Skip to content

Commit

Permalink
feat: add an ellipsis to the text by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomickigrzegorz
tomickigrzegorz committed May 22, 2021
1 parent eedd3a6 commit 0018dfd
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 32 deletions.
39 changes: 29 additions & 10 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,16 @@ <h2>More text - without 'after', cut after 120 characters</h2>
<h2>More text - from 'after': 50, prevent cutting after 120 characters</h2>
<div class="element"
data-config='{ "type": "text", "limit": 120, "after": 50, "more": "&#8594; show more", "less": "&#8592; less" }'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia illo temporibus voluptate veritatis porro, dignissimos dolore debitis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia illo temporibus voluptate veritatis porro,
dignissimos dolore debitis!
</div>
<div class="example-html">
<pre>
<code class="language-json">{
"type": "text",
"limit": 120,
"after": 50, // prevent cutting after 120 characters
// prevent cutting after 120 characters
"after": 50,
"more": "&#8594; show more",
"less": "&#8592; less"
}</code>
Expand All @@ -92,7 +94,14 @@ <h2>More text - from 'after': 50, prevent cutting after 120 characters</h2>
<h2>More text</h2>
<div class="element"
data-config='{ "type": "text", "limit": 120, "after": 50, "more": "&#8594; read more", "less": "&#8592; read less" }'>
<strong>Contrary to popular belief, Lorem Ipsum is not simply random text</strong>. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (<b>The Extremes of Good and Evil</b>) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
<b>Contrary to popular belief</b>, Lorem Ipsum is not simply random text. It has roots in a piece of classical
Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem
Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.
</div>
<div class="example-html">
<pre>
Expand All @@ -112,14 +121,21 @@ <h2>More text</h2>
<h2>More text, "show more" new line</h2>
<div class="element"
data-config='{ "type": "text", "limit": 90, "element": "div", "after": 50, "more": "&#8595; read more", "less": "&#8593; read less" }'>
<b>Lorem Ipsum</b> - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною. Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.
<b>Lorem Ipsum</b> - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum є,
фактично,
стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку
зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні,
залишаючись по суті незмінною. Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків
шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного
верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum.
</div>
<div class="example-html">
<pre>
<code class="language-json">{
"type": "text",
"limit": 90,
"element": "div", // adds a 'div' on a new line
// adds a 'div' on a new line
"element": "div",
"after": 50,
"more": "&#8595; show more",
"less": "&#8593; less"
Expand Down Expand Up @@ -153,7 +169,8 @@ <h2>Element list</h2>
"element": "li",
"more": "&#8595; show more",
"less": "&#8593; less",
"number": true // adds the number of items to the button
// adds the number of items to the button
"number": true
}</code>
</pre>
</div>
Expand Down Expand Up @@ -292,7 +309,8 @@ <h2>Only "show more"</h2>
<code class="language-json">{
"type": "list",
"limit": 5,
"more": "&#8594; show more" // only the 'show more' button
// only the 'show more' button
"more": "&#8594; show more"
}</code>
</pre>
</div>
Expand All @@ -301,16 +319,17 @@ <h2>Only "show more"</h2>
<!-- ellipsis -->
<section id="ellipsis">
<h2>Only the ellipsis</h2>
<div class="element" data-config='{ "type": "text", "limit": 100, "ellipsis": " ..." }'>
<div class="element" data-config='{ "type": "text", "limit": 100 }'>
It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout.
</div>
<div class="example-html">
<pre>
<code code class="language-json">{
"type": "text",
"limit": 100,
"ellipsis": " ..." // we add an ellipsis
// cropping the text after 100 characters
// and adding an ellipse
"limit": 100
}</code>
</pre>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/showMore.min.js
View file

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

27 changes: 6 additions & 21 deletions sources/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,8 @@ class ShowMore {
this.onMoreLess = onMoreLess;

this.regex = {
global: /[\W|\w\p{L}|\p{N}]/gu,
newLine: /(\r\n|\n|\r)/gi,
space: /\s\s+/g,
img: /<img([\w\W]+?)[/]?>/gi,
html: /(<([^>]+)>)/gi,
br: /<\s*\/?br\s*[/]?>/gi,
};
for (let i = 0; i < this.elements.length; i++) {
const {
Expand All @@ -29,7 +25,7 @@ class ShowMore {
type,
limit,
classArray: this.elements[i].classList,
ellipsis: ellipsis || false,
ellipsis,
typeElement: element || 'span',
more: more || false,
less: less || false,
Expand All @@ -40,10 +36,11 @@ class ShowMore {
}
}

initial = ({ element, after, limit, type }) => {
initial = ({ element, after, ellipsis, limit, type }) => {
// set default aria-expande to false
element.setAttribute('aria-expanded', 'false');
const limitCounts = limit + after;
const ellips = ellipsis === false ? '' : '...';

if (type === 'text') {
let truncatedText = '';
Expand All @@ -53,17 +50,12 @@ class ShowMore {
const orgTexReg = originalText
.replace(this.regex.newLine, ' ')
.replace(this.regex.space, ' ')
// .replace(this.regex.img, '')
// .replace(this.regex.html, '')
.replace(this.regex.br, ' ');

let lengthText = elementText.match(this.regex.global);

const differenceBetweenHTMLaTEXT = orgTexReg.length - lengthText.length;
const differenceBetweenHTMLaTEXT = orgTexReg.length - elementText.length;

if (elementText.length > limitCounts) {
truncatedText = orgTexReg.substr(0, limit + differenceBetweenHTMLaTEXT);
truncatedText = truncatedText.substr(0, truncatedText.length);
truncatedText = truncatedText.substr(0, Math.min(truncatedText.length, truncatedText.lastIndexOf(' '))).concat(ellips);

element.innerHTML = truncatedText;

Expand Down Expand Up @@ -176,14 +168,7 @@ class ShowMore {
};

addBtn = (object) => {
const { type, element, more, ellipsis, typeElement } = object;

if (type !== 'table' && !more && ellipsis) {
const el = document.createElement('span');
el.insertAdjacentHTML('afterbegin', ellipsis);
element.appendChild(el);
return;
}
const { type, element, more, typeElement } = object;

if (!more) {
return;
Expand Down

0 comments on commit 0018dfd

Please sign in to comment.