Permalink
Browse files

Support truncating content from the beginning, along with end and cen…

…ter.
  • Loading branch information...
1 parent 0c73715 commit 85659676aefb0e8588ac381f3374028898cf5c36 @djjeck djjeck committed Dec 21, 2012
Showing with 50 additions and 14 deletions.
  1. +1 −1 README.md
  2. +29 −3 demo.html
  3. +20 −10 jquery.truncate.js
View
@@ -19,7 +19,7 @@ Additionally if the text has been shortened you can set a class to be appended t
- **width** (int) Width to which the text will be shortened *[default: auto]*
- **token** (string) Replacement string for the stripped part *[default: '…']*
-- **side** (string) Side from which shorten. Can either be 'center', 'right' *[default: right]*
+- **side** (string) Side from which shorten. Can either be 'left', 'center', 'right' *[default: right]*
- **addclass** (string) Add a class to the truncated strings element *[default: false]*
- **addtitle** (bool) Add/Set "title" attribute with original text to the truncated strings element *[default: false]*
- **multiline** (bool) Applies truncation to multi-line, wrapped text *[default: false]*
View
@@ -48,14 +48,22 @@
width: 'auto',
after: '…',
side: 'right',
- addclass: 'highlight',
+ addclass: false,
addtitle: true,
});
$('.demo2').truncate({
width: 'auto',
after: '…',
side: 'center',
+ addclass: 'highlight',
+ addtitle: false,
+ });
+
+ $('.demo3').truncate({
+ width: 'auto',
+ after: '…',
+ side: 'left',
addclass: false,
addtitle: false,
});
@@ -70,7 +78,7 @@
width: 'auto',
after: '…',
side: 'right',
- addclass: 'highlight',
+ addclass: false,
addtitle: true,
});
</pre>
@@ -88,7 +96,7 @@
width: 'auto',
after: '&hellip;',
side: 'center',
- addclass: false,
+ addclass: 'highlight',
addtitle: false,
});
</pre>
@@ -101,5 +109,23 @@
<p class="demo2 grid600 font24">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<pre>
+$('.demo3').truncate({
+ width: 'auto',
+ after: '&hellip;',
+ side: 'left',
+ addclass: false,
+ addtitle: false,
+});
+</pre>
+
+<p class="demo3 grid600 font12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p class="demo3 grid600 font14">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p class="demo3 grid600 font16">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p class="demo3 grid600 font24">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
</body>
</html>
View
@@ -3,6 +3,10 @@
return !isNaN(parseFloat(n)) && isFinite(n);
}
function findTruncPoint(dimension, max, text, start, end, $workerEl, token, fromEnd) {
+ var makeContent = function(content) {
+ return (fromEnd ? token : '') + content + (fromEnd ? '' : token);
+ };
+
var opt1,
opt2,
mid;
@@ -19,14 +23,14 @@
return 0;
}
- if ($workerEl.html(opt2 + token)[dimension]() < $workerEl.html(opt1 + token)[dimension]()) {
+ if ($workerEl.html(makeContent(opt2))[dimension]() < $workerEl.html(makeContent(opt1))[dimension]()) {
return end;
}
mid = parseInt((start + end) / 2, 10);
opt1 = fromEnd ? text.slice(-mid) : text.slice(0, mid);
- $workerEl.html(opt1 + token);
+ $workerEl.html(makeContent(opt1));
if ($workerEl[dimension]() === max) {
return mid;
}
@@ -48,7 +52,7 @@
}
if(typeof options.side != 'undefined')
switch(options.side) {
- case 'center': case 'right':
+ case 'left': case 'center': case 'right':
break;
default:
// falls back to default
@@ -99,13 +103,19 @@
if (originalDim > truncateDim) {
$truncateWorker.text('');
- if (options.side == 'center') {
- truncateDim = parseInt(truncateDim / 2, 10) + 1;
- truncatedText = elementText.slice(0, findTruncPoint(dimension, truncateDim, elementText, 0, elementText.length, $truncateWorker, options.token, false))
- + options.token
- + elementText.slice(-1 * findTruncPoint(dimension, truncateDim, elementText, 0, elementText.length, $truncateWorker, '', true));
- } else {
- truncatedText = elementText.slice(0, findTruncPoint(dimension, truncateDim, elementText, 0, elementText.length, $truncateWorker, options.token, false)) + options.token;
+ switch(options.side) {
+ case 'left':
+ truncatedText = options.token + elementText.slice(-1 * findTruncPoint(dimension, truncateDim, elementText, 0, elementText.length, $truncateWorker, options.token, true));
+ break;
+ case 'center':
+ truncateDim = parseInt(truncateDim / 2, 10) - 1;
+ truncatedText = elementText.slice(0, findTruncPoint(dimension, truncateDim, elementText, 0, elementText.length, $truncateWorker, options.token, false))
+ + options.token
+ + elementText.slice(-1 * findTruncPoint(dimension, truncateDim, elementText, 0, elementText.length, $truncateWorker, '', true));
+ break;
+ case 'right':
+ truncatedText = elementText.slice(0, findTruncPoint(dimension, truncateDim, elementText, 0, elementText.length, $truncateWorker, options.token, false)) + options.token;
+ break;
}
if (options.addclass) {

0 comments on commit 8565967

Please sign in to comment.