Merge pull request #22 from tomik23:add-ellipsis-to-text

Add an ellipsis to the text by default
tomickigrzegorz · May 22, 2021 · d0a6374 · d0a6374
2 parents f213c73 + 0018dfd
commit d0a6374
Show file tree

Hide file tree

Showing 6 changed files with 505 additions and 430 deletions.
diff --git a/README.md b/README.md
@@ -98,15 +98,6 @@ npm run prod
 ```
 ---
 
-### Only ellipsis → [live example](https://tomik23.github.io/show-more#ellipsis):
-```html
-<div class="element" data-config='{ "type": "text", "limit": 100, "ellipsis": " ..." }'>
-  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>
-```
----
-
 ### Show the number next to the button  → [live example](https://tomik23.github.io/show-more#show-number):
 ```html
 <ul class="element display-inline" data-config='{ "type": "list", "limit": 3, "element": "li", "more": "→ show more", "less": "← less", "number": true }'>
@@ -115,18 +106,27 @@ npm run prod
 </ul>
 ```
 
-| element | description |
-|--------------- |-------------|
-| `your-class` | name of the class after which we want to add support for showing/hiding text, list or table |
-| `data-config` | embedding JSON in the html, the entire configuration of a particular element  |
-| `type` | we have three type after which it will be hidden [text, list or table] |
-| `limit` | `text` after how many characters to hide the text and insert `show more/less`<br />`list` or `table` after how many elements/rows hide the rest and insert `show more/less` |
-| `after` | this parameter checks how much text is after the trimmed text the `limit` parameter, if the text is less than the `after` parameter does not add a more/less button`^. |
-| `element` | on the parameter we will create an html element and put in the text `show more/less` |
-| `more/less` | is the text and chars that appears after the text, list or table e.g. `> show more` and  `< show less` |
-| `number` | number of hidden items to show more/less e.g. `-> show more 3`, only works for list and table |
-| `ellipsis` | show only the ellipsis |
-| `onMoreLess` | callback function |
+### Only the ellipsis → [live example](https://tomik23.github.io/show-more#ellipsis):
+```html
+<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>
+```
+---
+
+| element | require | description |
+|--------------- | :-------------: |-------------|
+| `your-class` | ✔ | name of the class after which we want to add support for showing/hiding text, list or table |
+| `data-config` | ✔ | embedding JSON in the html, the entire configuration of a particular element  |
+| `type` | ✔ | we have three type after which it will be hidden [text, list or table] |
+| `limit` | ✔ |`text` after how many characters to hide the text and insert `show more/less`<br />`list` or `table` after how many elements/rows hide the rest and insert `show more/less` |
+| `after` |  | this parameter checks how much text is after the trimmed text the `limit` parameter, if the text is less than the `after` parameter does not add a more/less button`^. |
+| `element` |  | on the parameter we will create an html element and put in the text `show more/less` |
+| `more/less` |  | is the text and chars that appears after the text, list or table e.g. `> show more` and  `< show less` |
+| `number` |  | number of hidden items to show more/less e.g. `-> show more 3`, only works for list and table |
+| `ellipsis` |  | By default, adding an ellipsis to shortened text can be turned off by setting 'ellipsis': false |
+| `onMoreLess` |  | callback function |
 
 
 > ^ Let's say we have 20 records with text and we determine that the text is to be trimmed after 100 characters in each record, it may happen that in several records the text is very short and has 110 characters, so `show more/less` will appear after 100 characters and after clicking an additional 10 characters, it will look funny. To prevent this, we add the `"after": 50` parameter, which means that the hidden text must be at least 50 characters. Otherwise, `show more/less` will not appear. The same `after` can be applied to lists, elements and table records

diff --git a/docs/index.html b/docs/index.html
@@ -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>
@@ -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>
@@ -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"
@@ -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>
@@ -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>
@@ -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>

diff --git a/docs/showMore.min.js b/docs/showMore.min.js