Skip to content

add wrap option #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

add wrap option #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fdb76a6
add wrap to options
peppertom Oct 13, 2016
55766f4
add replaceNbsps function
peppertom Oct 13, 2016
e5b4233
call replaceNbsps if wrap is set to word
peppertom Oct 13, 2016
aef5e4c
add truncateWordChunk function
peppertom Oct 13, 2016
94f4a4a
call truncateWordchunk if wrap set to word
peppertom Oct 13, 2016
0b49619
set default option to wrap by letter
peppertom Oct 13, 2016
e8de05b
apply changes to the original truncate.js file
peppertom Oct 13, 2016
4370c41
fix truncateWordChunk's text to str
peppertom Oct 13, 2016
33f1e11
add wrap option to README.md
peppertom Oct 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ Truncate.js currently depends on jQuery. There are two ways to use Truncate.js:
- `showLess`: HTML to insert when .expand() is called. Useful for a "Show Less" button. _default: ""_
- `position`: Position of the truncation. Possible values: `start`, `middle`, `end`. _default: "end"_
- `maxHeight`: Truncate the content to fit in the specified height (in px).
- `wrap`: Prevent words to be broken at truncation. Content breaks on full words if wrap is set to `word`. _default: "letter"_

----

Expand Down
47 changes: 35 additions & 12 deletions dist/truncate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,24 @@
return text.replace(/\s*$/,"");
}

function setText(element, text) {
function replaceNbsps(str) {
var rep = new RegExp(String.fromCharCode(160), "g");
return str.replace(rep, " ");
}

function truncateWordChunk(str,ellipsis){

var endChunk = str.substr( text.lastIndexOf(" "),text.length-1 );
str = str.replace(endChunk,ellipsis);

return str;
}

function setText(element, text, options) {
if ( options.wrap === 'word' ){
text = replaceNbsps(text);
text = truncateWordChunk(text,options.ellipsis);
}
if (element.innerText) {
element.innerText = text;
} else if (element.nodeValue) {
Expand Down Expand Up @@ -66,7 +83,7 @@

// Because traversal is in-order so the algorithm already checked that
// this point meets the height requirement. As such, it's safe to truncate here.
setText($prevSibling[0], $prevSibling.text() + options.ellipsis);
setText($prevSibling[0], $prevSibling.text() + options.ellipsis, options);
$parent.remove();

if ($clipNode.length) {
Expand All @@ -93,7 +110,7 @@
mid = low + ((high - low) >> 1); // Integer division

chunk = options.ellipsis + trimRight(original.substr(mid - 1, original.length));
setText(element, chunk);
setText(element, chunk, options);

if ($rootNode.height() > options.maxHeight) {
// too big, reduce the chunk
Expand All @@ -107,7 +124,7 @@
}

if (maxChunk.length > 0) {
setText(element, maxChunk);
setText(element, maxChunk, options);
return true;
} else {
return truncateNearestSibling($element, $rootNode, $clipNode, options);
Expand All @@ -129,7 +146,7 @@
mid = low + ((high - low) >> 1); // Integer division

chunk = trimRight(original.substr(0, mid + 1)) + options.ellipsis;
setText(element, chunk);
setText(element, chunk, options);

if ($rootNode.height() > options.maxHeight) {
// too big, reduce the chunk
Expand All @@ -142,7 +159,7 @@
}

if (maxChunk.length > 0) {
setText(element, maxChunk);
setText(element, maxChunk, options);
return true;
} else {
return truncateNearestSibling($element, $rootNode, $clipNode, options);
Expand All @@ -164,7 +181,7 @@
mid = low + ((high - low) >> 1); // Integer division

chunk = trimRight(original.substr(0, mid)) + options.ellipsis + original.substr(len - mid, len - mid);
setText(element, chunk);
setText(element, chunk, options);

if ($rootNode.height() > options.maxHeight) {
// too big, reduce the chunk
Expand All @@ -179,7 +196,7 @@
}

if (maxChunk.length > 0) {
setText(element, maxChunk);
setText(element, maxChunk, options);
return true;
} else {
return truncateNearestSibling($element, $rootNode, $clipNode, options);
Expand Down Expand Up @@ -351,7 +368,8 @@
* ellipsis: '… ',
* showMore: '<a class="show-more">Show More</a>',
* showLess: '<a class="show-less">Show Less</a>',
* position: "start"
* position: "start",
* wrap: 'letter'
* });
*
* // Update HTML
Expand All @@ -377,7 +395,8 @@
showMore: '',
showLess: '',
position: 'end',
lineHeight: 'auto'
lineHeight: 'auto',
wrap: 'letter'
};

this.config(options);
Expand All @@ -403,7 +422,7 @@

if (this.options.lineHeight === 'auto') {
var lineHeightCss = this.$element.css('line-height'),
lineHeight = 18; // for Normal we return the default value: 18px
lineHeight = 18; // for Normal we return the default value: 18px

if (lineHeightCss !== "normal") {
lineHeight = parseInt(lineHeightCss, 10);
Expand All @@ -420,6 +439,10 @@
this.options.position = 'end';
}

if (this.options.wrap === undefined) {
this.options.wrap = 'letter';
}

this.$clipNode = $($.parseHTML(this.options.showMore), this.$element);

// Forced update if plugin already initialized
Expand Down Expand Up @@ -514,7 +537,7 @@
*/
collapse: function (retruncate) {
this.isExplicitlyCollapsed = true;

if (this.isCollapsed) {
return;
}
Expand Down
2 changes: 1 addition & 1 deletion dist/truncate.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

47 changes: 35 additions & 12 deletions truncate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,24 @@
return text.replace(/\s*$/,"");
}

function setText(element, text) {
function replaceNbsps(str) {
var rep = new RegExp(String.fromCharCode(160), "g");
return str.replace(rep, " ");
}

function truncateWordChunk(str,ellipsis){

var endChunk = str.substr( str.lastIndexOf(" "),str.length-1 );
str = str.replace(endChunk,ellipsis);

return str;
}

function setText(element, text, options) {
if ( options.wrap === 'word' ){
text = replaceNbsps(text);
text = truncateWordChunk(text,options.ellipsis);
}
if (element.innerText) {
element.innerText = text;
} else if (element.nodeValue) {
Expand Down Expand Up @@ -66,7 +83,7 @@

// Because traversal is in-order so the algorithm already checked that
// this point meets the height requirement. As such, it's safe to truncate here.
setText($prevSibling[0], $prevSibling.text() + options.ellipsis);
setText($prevSibling[0], $prevSibling.text() + options.ellipsis, options);
$parent.remove();

if ($clipNode.length) {
Expand All @@ -93,7 +110,7 @@
mid = low + ((high - low) >> 1); // Integer division

chunk = options.ellipsis + trimRight(original.substr(mid - 1, original.length));
setText(element, chunk);
setText(element, chunk, options);

if ($rootNode.height() > options.maxHeight) {
// too big, reduce the chunk
Expand All @@ -107,7 +124,7 @@
}

if (maxChunk.length > 0) {
setText(element, maxChunk);
setText(element, maxChunk, options);
return true;
} else {
return truncateNearestSibling($element, $rootNode, $clipNode, options);
Expand All @@ -129,7 +146,7 @@
mid = low + ((high - low) >> 1); // Integer division

chunk = trimRight(original.substr(0, mid + 1)) + options.ellipsis;
setText(element, chunk);
setText(element, chunk, options);

if ($rootNode.height() > options.maxHeight) {
// too big, reduce the chunk
Expand All @@ -142,7 +159,7 @@
}

if (maxChunk.length > 0) {
setText(element, maxChunk);
setText(element, maxChunk, options);
return true;
} else {
return truncateNearestSibling($element, $rootNode, $clipNode, options);
Expand All @@ -164,7 +181,7 @@
mid = low + ((high - low) >> 1); // Integer division

chunk = trimRight(original.substr(0, mid)) + options.ellipsis + original.substr(len - mid, len - mid);
setText(element, chunk);
setText(element, chunk, options);

if ($rootNode.height() > options.maxHeight) {
// too big, reduce the chunk
Expand All @@ -179,7 +196,7 @@
}

if (maxChunk.length > 0) {
setText(element, maxChunk);
setText(element, maxChunk, options);
return true;
} else {
return truncateNearestSibling($element, $rootNode, $clipNode, options);
Expand Down Expand Up @@ -351,7 +368,8 @@
* ellipsis: '… ',
* showMore: '<a class="show-more">Show More</a>',
* showLess: '<a class="show-less">Show Less</a>',
* position: "start"
* position: "start",
* wrap: 'letter'
* });
*
* // Update HTML
Expand All @@ -377,7 +395,8 @@
showMore: '',
showLess: '',
position: 'end',
lineHeight: 'auto'
lineHeight: 'auto',
wrap: 'letter'
};

this.config(options);
Expand All @@ -403,7 +422,7 @@

if (this.options.lineHeight === 'auto') {
var lineHeightCss = this.$element.css('line-height'),
lineHeight = 18; // for Normal we return the default value: 18px
lineHeight = 18; // for Normal we return the default value: 18px

if (lineHeightCss !== "normal") {
lineHeight = parseInt(lineHeightCss, 10);
Expand All @@ -420,6 +439,10 @@
this.options.position = 'end';
}

if (this.options.wrap === undefined) {
this.options.wrap = 'letter';
}

this.$clipNode = $($.parseHTML(this.options.showMore), this.$element);

// Forced update if plugin already initialized
Expand Down Expand Up @@ -514,7 +537,7 @@
*/
collapse: function (retruncate) {
this.isExplicitlyCollapsed = true;

if (this.isCollapsed) {
return;
}
Expand Down