read-smore - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0

dist/index.esm.js

@@ -1,2 +0,2 @@
-var n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1,linkElement:"a"};function e(e,t){t=Object.assign({},n,t);var r={originalContentArr:[],truncatedContentArr:[]};function a(n){return void 0!==n.dataset.readSmoreChars||null!==t.charsCount}function i(n,a,i){e[a].classList.toggle("is-expanded");var l=n.currentTarget;"true"!==l.dataset.clicked?(e[a].innerHTML=r.originalContentArr[a],l.innerHTML=t.lessText,l.dataset.clicked=!0,l.ariaExpanded=!0,i&&s(e[a])):(e[a].innerHTML=r.truncatedContentArr[a],l.innerHTML=t.moreText,l.dataset.clicked=!1,l.ariaExpanded=!1,i&&s(e[a]))}function s(n,e){n&&(n.lastElementChild.style.display="inline",n.style.display="inline"),e&&(e.style.display="inline")}return{init:function(){for(var n=0,l=e.length;n<l;++n)u=n,void 0,void 0,void 0,void 0,c=function(n){return void 0!==n.dataset.readSmoreChars?parseInt(n.dataset.readSmoreChars):null!==t.charsCount?parseInt(t.charsCount):void 0!==n.dataset.readSmoreWords?parseInt(n.dataset.readSmoreWords):null!==t.wordsCount?parseInt(t.wordsCount):void 0}(d=e[n]),p=function(n,e,t){void 0===t&&(t=!1);var r=function(n){return n.replace(/(^\s*)|(\s*$)/gi,"")}(n);return t?r.split("").slice(0,e-1).join("")+"...":r.split(/\s+/).slice(0,e-1).join(" ")+"..."}(m=d.innerHTML,c,a(d)),C=a(d)?m.length:(o=m,null!==o&&""!==o&&o.replace(/<[^>]+>/g,"")).split(" ").filter(function(n){return""!==n.trim()}).length,r.originalContentArr.push(m),r.truncatedContentArr.push(p),c<C&&(d.innerHTML=r.truncatedContentArr[u],function(n){var r=function(n){return void 0!==n.dataset.readSmoreInline||!0===t.isInline}(e[n]),a=document.createElement("span");a.className=t.blockClassName+"__link-wrap",a.innerHTML="\n      <"+t.linkElement+'\n        class="'+t.blockClassName+'__link"\n        style="cursor:pointer"\n        aria-expanded="false"\n        tabIndex="0">\n          '+t.moreText+"\n      </"+t.linkElement+">\n    ",r&&s(e[n],a),e[n].after(a),function(n,r){var a=e[n].nextSibling.firstElementChild;a.addEventListener("click",function(e){return i(e,n,r)}),a.addEventListener("keyup",function(e){13===e.keyCode&&"a"===t.linkElement&&i(e,n,r)})}(n,r)}(u));var o,d,u,c,m,p,C}}}export{e as default};
+function e(){return e=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},e.apply(this,arguments)}var n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1,linkElement:"a"};function t(t,r){r=e({},n,r);var a={originalContentArr:[],truncatedContentArr:[]};function i(e,n,i){var o=t[n].dataset.readSmoreMoreText,l=t[n].dataset.readSmoreLessText,c=e.currentTarget,d="true"===c.dataset.clicked;t[n].classList.toggle("is-expanded"),t[n].innerHTML=d?a.truncatedContentArr[n]:a.originalContentArr[n],c.innerHTML=d?o||r.moreText:l||r.lessText,c.dataset.clicked=!d,c.ariaExpanded=!d,i&&s(t[n])}function s(e,n){e&&(e.lastElementChild.style.display="inline",e.style.display="inline"),n&&(n.style.display="inline")}return{init:function(){t.forEach(function(e,n){!function(e,n){var o,l=function(e){return parseInt(e.dataset.readSmoreChars)||parseInt(r.charsCount)||parseInt(e.dataset.readSmoreWords)||parseInt(r.wordsCount)}(e),c=e.innerHTML,d=function(e){return void 0!==e.dataset.readSmoreChars||null!==r.charsCount}(e),u=function(e,n,t){void 0===t&&(t=!1);var r=function(e){return e.replace(/(^\s*)|(\s*$)/gi,"")}(e);return t?r.slice(0,n-1)+"...":r.split(/\s+/).slice(0,n-1).join(" ")+"..."}(c,l,d),f=d?c.length:(o=c,null!==o&&""!==o&&o.replace(/<[^>]+>/g,"")).split(" ").filter(function(e){return""!==e.trim()}).length;a.originalContentArr.push(c),a.truncatedContentArr.push(u),l<f&&(e.innerHTML=a.truncatedContentArr[n],function(e){var n=function(e){return void 0!==e.dataset.readSmoreInline||!0===r.isInline}(t[e]),a=document.createElement("span");a.className=r.blockClassName+"__link-wrap",a.innerHTML=function(e){return"\n      <"+r.linkElement+'\n        class="'+r.blockClassName+'__link"\n        style="cursor:pointer"\n        aria-expanded="false"\n        tabIndex="0">\n          '+(e.dataset.readSmoreMoreText||r.moreText)+"\n      </"+r.linkElement+">\n    "}(t[e]),n&&s(t[e],a),t[e].after(a),function(e,n){var a=t[e].nextSibling.firstElementChild;a.addEventListener("click",function(t){return i(t,e,n)}),a.addEventListener("keyup",function(t){13===t.keyCode&&"a"===r.linkElement&&i(t,e,n)})}(e,n)}(n))}(e,n)})}}}export{t as default};
 //# sourceMappingURL=index.esm.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-const n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1,linkElement:"a"};function e(e,t){t=Object.assign({},n,t);let r={originalContentArr:[],truncatedContentArr:[]};function a(n){return void 0!==n.dataset.readSmoreChars||null!==t.charsCount}function i(n,i){const o=function(n){return void 0!==n.dataset.readSmoreChars?parseInt(n.dataset.readSmoreChars):null!==t.charsCount?parseInt(t.charsCount):void 0!==n.dataset.readSmoreWords?parseInt(n.dataset.readSmoreWords):null!==t.wordsCount?parseInt(t.wordsCount):void 0}(n),d=n.innerHTML,c=function(n,e,t=!1){const r=function(n){return n.replace(/(^\s*)|(\s*$)/gi,"")}(n);return t?r.split("").slice(0,e-1).join("")+"...":r.split(/\s+/).slice(0,e-1).join(" ")+"..."}(d,o,a(n)),u=a(n)?d.length:function(n){const e=function(n){return null!==n&&""!==n&&n.replace(/<[^>]+>/g,"")}(n).split(" ");return e.filter(n=>""!==n.trim()).length}(d);r.originalContentArr.push(d),r.truncatedContentArr.push(c),o<u&&(n.innerHTML=r.truncatedContentArr[i],function(n){const r=function(n){return void 0!==n.dataset.readSmoreInline||!0===t.isInline}(e[n]),a=document.createElement("span");a.className=`${t.blockClassName}__link-wrap`,a.innerHTML=`\n      <${t.linkElement}\n        class="${t.blockClassName}__link"\n        style="cursor:pointer"\n        aria-expanded="false"\n        tabIndex="0">\n          ${t.moreText}\n      </${t.linkElement}>\n    `,r&&l(e[n],a),e[n].after(a),function(n,r){const a=e[n].nextSibling.firstElementChild;a.addEventListener("click",e=>s(e,n,r)),a.addEventListener("keyup",e=>{13===e.keyCode&&"a"===t.linkElement&&s(e,n,r)})}(n,r)}(i))}function s(n,a,i){e[a].classList.toggle("is-expanded");const s=n.currentTarget;"true"!==s.dataset.clicked?(e[a].innerHTML=r.originalContentArr[a],s.innerHTML=t.lessText,s.dataset.clicked=!0,s.ariaExpanded=!0,i&&l(e[a])):(e[a].innerHTML=r.truncatedContentArr[a],s.innerHTML=t.moreText,s.dataset.clicked=!1,s.ariaExpanded=!1,i&&l(e[a]))}function l(n,e){n&&(n.lastElementChild.style.display="inline",n.style.display="inline"),e&&(e.style.display="inline")}return{init:function(){for(let n=0,t=e.length;n<t;++n)i(e[n],n)}}}export{e as default};
+function n(){return n=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},n.apply(this,arguments)}const e={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1,linkElement:"a"};function t(t,r){r=n({},e,r);let a={originalContentArr:[],truncatedContentArr:[]};function s(n,e,s){const o=t[e].dataset.readSmoreMoreText,l=t[e].dataset.readSmoreLessText,c=n.currentTarget,d="true"===c.dataset.clicked;t[e].classList.toggle("is-expanded"),t[e].innerHTML=d?a.truncatedContentArr[e]:a.originalContentArr[e],c.innerHTML=d?o||r.moreText:l||r.lessText,c.dataset.clicked=!d,c.ariaExpanded=!d,s&&i(t[e])}function i(n,e){n&&(n.lastElementChild.style.display="inline",n.style.display="inline"),e&&(e.style.display="inline")}return{init:function(){t.forEach((n,e)=>{!function(n,e){const o=function(n){return parseInt(n.dataset.readSmoreChars)||parseInt(r.charsCount)||parseInt(n.dataset.readSmoreWords)||parseInt(r.wordsCount)}(n),l=n.innerHTML,c=function(n){return void 0!==n.dataset.readSmoreChars||null!==r.charsCount}(n),d=function(n,e,t=!1){const r=function(n){return n.replace(/(^\s*)|(\s*$)/gi,"")}(n);return t?r.slice(0,e-1)+"...":r.split(/\s+/).slice(0,e-1).join(" ")+"..."}(l,o,c),u=c?l.length:function(n){const e=function(n){return null!==n&&""!==n&&n.replace(/<[^>]+>/g,"")}(n).split(" ");return e.filter(n=>""!==n.trim()).length}(l);a.originalContentArr.push(l),a.truncatedContentArr.push(d),o<u&&(n.innerHTML=a.truncatedContentArr[e],function(n){const e=function(n){return void 0!==n.dataset.readSmoreInline||!0===r.isInline}(t[n]),a=document.createElement("span");a.className=`${r.blockClassName}__link-wrap`,a.innerHTML=function(n){return`\n      <${r.linkElement}\n        class="${r.blockClassName}__link"\n        style="cursor:pointer"\n        aria-expanded="false"\n        tabIndex="0">\n          ${n.dataset.readSmoreMoreText||r.moreText}\n      </${r.linkElement}>\n    `}(t[n]),e&&i(t[n],a),t[n].after(a),function(n,e){const a=t[n].nextSibling.firstElementChild;a.addEventListener("click",t=>s(t,n,e)),a.addEventListener("keyup",t=>{13===t.keyCode&&"a"===r.linkElement&&s(t,n,e)})}(n,e)}(e))}(n,e)})}}}export{t as default};
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e||self).readSmore=n()}(this,function(){var e={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1,linkElement:"a"};return function(n,t){t=Object.assign({},e,t);var r={originalContentArr:[],truncatedContentArr:[]};function i(e){return void 0!==e.dataset.readSmoreChars||null!==t.charsCount}function a(e,i,a){n[i].classList.toggle("is-expanded");var s=e.currentTarget;"true"!==s.dataset.clicked?(n[i].innerHTML=r.originalContentArr[i],s.innerHTML=t.lessText,s.dataset.clicked=!0,s.ariaExpanded=!0,a&&o(n[i])):(n[i].innerHTML=r.truncatedContentArr[i],s.innerHTML=t.moreText,s.dataset.clicked=!1,s.ariaExpanded=!1,a&&o(n[i]))}function o(e,n){e&&(e.lastElementChild.style.display="inline",e.style.display="inline"),n&&(n.style.display="inline")}return{init:function(){for(var e=0,s=n.length;e<s;++e)u=e,void 0,void 0,void 0,void 0,c=function(e){return void 0!==e.dataset.readSmoreChars?parseInt(e.dataset.readSmoreChars):null!==t.charsCount?parseInt(t.charsCount):void 0!==e.dataset.readSmoreWords?parseInt(e.dataset.readSmoreWords):null!==t.wordsCount?parseInt(t.wordsCount):void 0}(d=n[e]),p=function(e,n,t){void 0===t&&(t=!1);var r=function(e){return e.replace(/(^\s*)|(\s*$)/gi,"")}(e);return t?r.split("").slice(0,n-1).join("")+"...":r.split(/\s+/).slice(0,n-1).join(" ")+"..."}(f=d.innerHTML,c,i(d)),m=i(d)?f.length:(l=f,null!==l&&""!==l&&l.replace(/<[^>]+>/g,"")).split(" ").filter(function(e){return""!==e.trim()}).length,r.originalContentArr.push(f),r.truncatedContentArr.push(p),c<m&&(d.innerHTML=r.truncatedContentArr[u],function(e){var r=function(e){return void 0!==e.dataset.readSmoreInline||!0===t.isInline}(n[e]),i=document.createElement("span");i.className=t.blockClassName+"__link-wrap",i.innerHTML="\n      <"+t.linkElement+'\n        class="'+t.blockClassName+'__link"\n        style="cursor:pointer"\n        aria-expanded="false"\n        tabIndex="0">\n          '+t.moreText+"\n      </"+t.linkElement+">\n    ",r&&o(n[e],i),n[e].after(i),function(e,r){var i=n[e].nextSibling.firstElementChild;i.addEventListener("click",function(n){return a(n,e,r)}),i.addEventListener("keyup",function(n){13===n.keyCode&&"a"===t.linkElement&&a(n,e,r)})}(e,r)}(u));var l,d,u,c,f,p,m}}}});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e||self).readSmore=n()}(this,function(){function e(){return e=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},e.apply(this,arguments)}var n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1,linkElement:"a"};return function(t,r){r=e({},n,r);var a={originalContentArr:[],truncatedContentArr:[]};function i(e,n,i){var s=t[n].dataset.readSmoreMoreText,l=t[n].dataset.readSmoreLessText,d=e.currentTarget,u="true"===d.dataset.clicked;t[n].classList.toggle("is-expanded"),t[n].innerHTML=u?a.truncatedContentArr[n]:a.originalContentArr[n],d.innerHTML=u?s||r.moreText:l||r.lessText,d.dataset.clicked=!u,d.ariaExpanded=!u,i&&o(t[n])}function o(e,n){e&&(e.lastElementChild.style.display="inline",e.style.display="inline"),n&&(n.style.display="inline")}return{init:function(){t.forEach(function(e,n){!function(e,n){var s,l=function(e){return parseInt(e.dataset.readSmoreChars)||parseInt(r.charsCount)||parseInt(e.dataset.readSmoreWords)||parseInt(r.wordsCount)}(e),d=e.innerHTML,u=function(e){return void 0!==e.dataset.readSmoreChars||null!==r.charsCount}(e),c=function(e,n,t){void 0===t&&(t=!1);var r=function(e){return e.replace(/(^\s*)|(\s*$)/gi,"")}(e);return t?r.slice(0,n-1)+"...":r.split(/\s+/).slice(0,n-1).join(" ")+"..."}(d,l,u),f=u?d.length:(s=d,null!==s&&""!==s&&s.replace(/<[^>]+>/g,"")).split(" ").filter(function(e){return""!==e.trim()}).length;a.originalContentArr.push(d),a.truncatedContentArr.push(c),l<f&&(e.innerHTML=a.truncatedContentArr[n],function(e){var n=function(e){return void 0!==e.dataset.readSmoreInline||!0===r.isInline}(t[e]),a=document.createElement("span");a.className=r.blockClassName+"__link-wrap",a.innerHTML=function(e){return"\n      <"+r.linkElement+'\n        class="'+r.blockClassName+'__link"\n        style="cursor:pointer"\n        aria-expanded="false"\n        tabIndex="0">\n          '+(e.dataset.readSmoreMoreText||r.moreText)+"\n      </"+r.linkElement+">\n    "}(t[e]),n&&o(t[e],a),t[e].after(a),function(e,n){var a=t[e].nextSibling.firstElementChild;a.addEventListener("click",function(t){return i(t,e,n)}),a.addEventListener("keyup",function(t){13===t.keyCode&&"a"===r.linkElement&&i(t,e,n)})}(e,n)}(n))}(e,n)})}}}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "read-smore",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "A simple read more / read less feature in vanilla js",
@@ -47,8 +47,9 @@ "author": "Stephen Scaff <stephenscaff.com>",
   "devDependencies": {
-    "@parcel/transformer-sass": "^2.8.0",
-    "eslint": "^8.11.0",
+    "@parcel/transformer-sass": "^2.10.0",
+    "eslint": "^8.52.0",
     "gh-pages": "^5.0.0",
-    "microbundle": "^0.14.2",
-    "parcel": "^2.8.0"
-  }
+    "microbundle": "^0.15.1",
+    "parcel": "^2.10.0"
+  },
+  "type": "module"
 }

readme.md

@@ -30,3 +30,3 @@ # Read-Smore
 - Preserves existing markup (nice).
-- Read more / Read less text is customizable.
+- Read more / Read less text is customizable, via option or data-attribute.
 - Block level class name is customizable.
@@ -104,11 +104,11 @@ - Read More link can be inlined with truncated content, or as block level element below.
 
-| Option         | Type    | Description                                     | Default      |
-| -------------- | ------- | ----------------------------------------------- | ------------ |
-| blockClassName | String  | BEM style block name for injected link template | `read-smore` |
-| lessText       | String  | 'Read Less' closer link text                    | `Read more`  |
-| moreText       | String  | 'Read More' expander link text                  | `Read less`  |
-| wordsCount     | Number  | Default max words (if no data attribute)        | `30`         |
-| charsCount     | Number  | Default max characters (if no data attribute)   | `null`       |
-| isInline       | Boolean | Styles link text inline with content            | `false`      |
-| linkElement    | String  | Change expander element                         | `a`          |
+| Option         | Type    | Description                                           | Default      |
+| -------------- | ------- | ----------------------------------------------------- | ------------ |
+| blockClassName | String  | BEM style block name for injected link template       | `read-smore` |
+| lessText       | String  | 'Read Less' closer link text (if no data attribute)   | `Read more`  |
+| moreText       | String  | 'Read More' expander link text (if no data attribute) | `Read less`  |
+| wordsCount     | Number  | Default max words (if no data attribute)              | `30`         |
+| charsCount     | Number  | Default max characters (if no data attribute)         | `null`       |
+| isInline       | Boolean | Styles link text inline with content                  | `false`      |
+| linkElement    | String  | Change expander element                               | `a`          |
 
@@ -189,2 +189,19 @@ <br>
 
+#### Example defining read more/less text via data attribute
+
+To truncate content by max **character** count, use the data attribute `data-read-smore-chars=""` with desired value.
+
+```
+<div
+  class="js-read-smore"
+  data-read-smore-chars="150"
+  data-read-smore-more-text="Read Schmore"
+  data-read-smore-less-text="Read Schless"
+>
+  <p>Stuff and words and stuff and words.</p>
+  <p>Words and stuff and words and stuff.</p>
+  <!-- more HTML content -->
+</div>
+```
+
 #### Provide Options
@@ -191,0 +208,0 @@

No alert changes

Improved metrics

Lines of code

41

increased by2.5%

Number of lines in readme file

275

increased by6.59%

Is type module

Yes

Worsened metrics

Total package byte prevSize

61267

decreased by-0.46%

No dependency changes