read-smore
Advanced tools
Comparing version 2.1.0 to 2.2.0
@@ -1,2 +0,2 @@ | ||
var e={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1};function n(n,r){r=Object.assign({},e,r);var t={originalContentArr:[],truncatedContentArr:[]};function a(e){return void 0!==e.dataset.readSmoreChars||null!==r.charsCount}return{init:function(){for(var e=0,o=n.length;e<o;++e)l=e,void 0,void 0,void 0,void 0,c=function(e){return void 0!==e.dataset.readSmoreChars?parseInt(e.dataset.readSmoreChars):null!==r.charsCount?parseInt(r.charsCount):void 0!==e.dataset.readSmoreWords?parseInt(e.dataset.readSmoreWords):null!==r.wordsCount?parseInt(r.wordsCount):void 0}(i=n[e]),u=function(e,n,r){void 0===r&&(r=!1);var t=function(e){return e.replace(/(^\s*)|(\s*$)/gi,"")}(e);return r?t.split("").slice(0,n-1).join("")+"...":t.split(/\s+/).slice(0,n-1).join(" ")+"..."}(d=i.innerHTML,c,a(i)),C=a(i)?d.length:(s=d,null!==s&&""!==s&&s.replace(/<[^>]+>/g,"")).split(" ").filter(function(e){return""!==e.trim()}).length,t.originalContentArr.push(d),t.truncatedContentArr.push(u),c<C&&(i.innerHTML=t.truncatedContentArr[l],function(e){var a=document.createElement("span");a.className=r.blockClassName+"__link-wrap",a.innerHTML=function(e){return'\n <a id="'+r.blockClassName+"_"+e+'"\n class="'+r.blockClassName+'__link"\n style="cursor:pointer">\n '+r.moreText+"\n </a>\n "}(e),n[e].after(a),function(e){document.querySelector("#"+r.blockClassName+"_"+e).addEventListener("click",function(a){n[e].classList.toggle("is-expanded");var o=a.currentTarget;"true"!==o.dataset.clicked?(n[e].innerHTML=t.originalContentArr[e],o.innerHTML=r.lessText,o.dataset.clicked=!0):(n[e].innerHTML=t.truncatedContentArr[e],o.innerHTML=r.moreText,o.dataset.clicked=!1)})}(e)}(l));var s,i,l,c,d,u,C}}}n.options=e;export{n as default}; | ||
var n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1};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 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,i=e.length;n<i;++n)d=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}(l=e[n]),C=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(" ")+"..."}(u=l.innerHTML,c,a(l)),m=a(l)?u.length:(o=u,null!==o&&""!==o&&o.replace(/<[^>]+>/g,"")).split(" ").filter(function(n){return""!==n.trim()}).length,r.originalContentArr.push(u),r.truncatedContentArr.push(C),c<m&&(l.innerHTML=r.truncatedContentArr[d],function(n){var a=function(n){return void 0!==n.dataset.readSmoreInline||!0===t.isInline}(e[n]),i=document.createElement("span");i.className=t.blockClassName+"__link-wrap",i.innerHTML=function(n){return'\n <a id="'+t.blockClassName+"_"+n+'"\n class="'+t.blockClassName+'__link"\n style="cursor:pointer">\n '+t.moreText+"\n </a>\n "}(n),a&&s(e[n],i),e[n].after(i),function(n,a){document.querySelector("#"+t.blockClassName+"_"+n).addEventListener("click",function(i){e[n].classList.toggle("is-expanded");var o=i.currentTarget;"true"!==o.dataset.clicked?(e[n].innerHTML=r.originalContentArr[n],o.innerHTML=t.lessText,o.dataset.clicked=!0,a&&s(e[n])):(e[n].innerHTML=r.truncatedContentArr[n],o.innerHTML=t.moreText,o.dataset.clicked=!1,a&&s(e[n]))})}(n,a)}(d)),console.log(e[n]);var o,l,d,c,u,C,m}}}e.options=n;export{e as default}; | ||
//# sourceMappingURL=index.esm.js.map |
@@ -1,2 +0,2 @@ | ||
var e={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1};function n(n,r){r=Object.assign({},e,r);var t={originalContentArr:[],truncatedContentArr:[]};function a(e){return void 0!==e.dataset.readSmoreChars||null!==r.charsCount}return{init:function(){for(var e=0,o=n.length;e<o;++e)l=e,void 0,void 0,void 0,void 0,c=function(e){return void 0!==e.dataset.readSmoreChars?parseInt(e.dataset.readSmoreChars):null!==r.charsCount?parseInt(r.charsCount):void 0!==e.dataset.readSmoreWords?parseInt(e.dataset.readSmoreWords):null!==r.wordsCount?parseInt(r.wordsCount):void 0}(i=n[e]),u=function(e,n,r){void 0===r&&(r=!1);var t=function(e){return e.replace(/(^\s*)|(\s*$)/gi,"")}(e);return r?t.split("").slice(0,n-1).join("")+"...":t.split(/\s+/).slice(0,n-1).join(" ")+"..."}(d=i.innerHTML,c,a(i)),C=a(i)?d.length:(s=d,null!==s&&""!==s&&s.replace(/<[^>]+>/g,"")).split(" ").filter(function(e){return""!==e.trim()}).length,t.originalContentArr.push(d),t.truncatedContentArr.push(u),c<C&&(i.innerHTML=t.truncatedContentArr[l],function(e){var a=document.createElement("span");a.className=r.blockClassName+"__link-wrap",a.innerHTML=function(e){return'\n <a id="'+r.blockClassName+"_"+e+'"\n class="'+r.blockClassName+'__link"\n style="cursor:pointer">\n '+r.moreText+"\n </a>\n "}(e),n[e].after(a),function(e){document.querySelector("#"+r.blockClassName+"_"+e).addEventListener("click",function(a){n[e].classList.toggle("is-expanded");var o=a.currentTarget;"true"!==o.dataset.clicked?(n[e].innerHTML=t.originalContentArr[e],o.innerHTML=r.lessText,o.dataset.clicked=!0):(n[e].innerHTML=t.truncatedContentArr[e],o.innerHTML=r.moreText,o.dataset.clicked=!1)})}(e)}(l));var s,i,l,c,d,u,C}}}n.options=e,module.exports=n; | ||
var n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1};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 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,o=e.length;n<o;++n)d=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}(l=e[n]),C=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(" ")+"..."}(u=l.innerHTML,c,a(l)),m=a(l)?u.length:(i=u,null!==i&&""!==i&&i.replace(/<[^>]+>/g,"")).split(" ").filter(function(n){return""!==n.trim()}).length,r.originalContentArr.push(u),r.truncatedContentArr.push(C),c<m&&(l.innerHTML=r.truncatedContentArr[d],function(n){var a=function(n){return void 0!==n.dataset.readSmoreInline||!0===t.isInline}(e[n]),o=document.createElement("span");o.className=t.blockClassName+"__link-wrap",o.innerHTML=function(n){return'\n <a id="'+t.blockClassName+"_"+n+'"\n class="'+t.blockClassName+'__link"\n style="cursor:pointer">\n '+t.moreText+"\n </a>\n "}(n),a&&s(e[n],o),e[n].after(o),function(n,a){document.querySelector("#"+t.blockClassName+"_"+n).addEventListener("click",function(o){e[n].classList.toggle("is-expanded");var i=o.currentTarget;"true"!==i.dataset.clicked?(e[n].innerHTML=r.originalContentArr[n],i.innerHTML=t.lessText,i.dataset.clicked=!0,a&&s(e[n])):(e[n].innerHTML=r.truncatedContentArr[n],i.innerHTML=t.moreText,i.dataset.clicked=!1,a&&s(e[n]))})}(n,a)}(d)),console.log(e[n]);var i,l,d,c,u,C,m}}}e.options=n,module.exports=e; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
const n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1};function e(e,t){t=Object.assign({},n,t);let r={originalContentArr:[],truncatedContentArr:[]};function s(n){return void 0!==n.dataset.readSmoreChars||null!==t.charsCount}function o(n,o){const a=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),i=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(" ")+"..."}(i,a,s(n)),l=s(n)?i.length:function(n){const e=function(n){return null!==n&&""!==n&&n.replace(/<[^>]+>/g,"")}(n).split(" ");return e.filter(n=>""!==n.trim()).length}(i);r.originalContentArr.push(i),r.truncatedContentArr.push(c),a<l&&(n.innerHTML=r.truncatedContentArr[o],function(n){const s=document.createElement("span");s.className=`${t.blockClassName}__link-wrap`,s.innerHTML=function(n){return`\n <a id="${t.blockClassName}_${n}"\n class="${t.blockClassName}__link"\n style="cursor:pointer">\n ${t.moreText}\n </a>\n `}(n),e[n].after(s),function(n){document.querySelector(`#${t.blockClassName}_${n}`).addEventListener("click",s=>{e[n].classList.toggle("is-expanded");const o=s.currentTarget;"true"!==o.dataset.clicked?(e[n].innerHTML=r.originalContentArr[n],o.innerHTML=t.lessText,o.dataset.clicked=!0):(e[n].innerHTML=r.truncatedContentArr[n],o.innerHTML=t.moreText,o.dataset.clicked=!1)})}(n)}(o))}return{init:function(){for(let n=0,t=e.length;n<t;++n)o(e[n],n)}}}e.options=n;export{e as default}; | ||
const n={blockClassName:"read-smore",wordsCount:30,charsCount:null,moreText:"Read More",lessText:"Read Less",isInline:!1};function e(e,t){t=Object.assign({},n,t);let r={originalContentArr:[],truncatedContentArr:[]};function s(n){return void 0!==n.dataset.readSmoreChars||null!==t.charsCount}function o(n,o){const i=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),l=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(" ")+"..."}(l,i,s(n)),u=s(n)?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);r.originalContentArr.push(l),r.truncatedContentArr.push(c),i<u&&(n.innerHTML=r.truncatedContentArr[o],function(n){const s=function(n){return void 0!==n.dataset.readSmoreInline||!0===t.isInline}(e[n]),o=document.createElement("span");o.className=`${t.blockClassName}__link-wrap`,o.innerHTML=function(n){return`\n <a id="${t.blockClassName}_${n}"\n class="${t.blockClassName}__link"\n style="cursor:pointer">\n ${t.moreText}\n </a>\n `}(n),s&&a(e[n],o),e[n].after(o),function(n,s){document.querySelector(`#${t.blockClassName}_${n}`).addEventListener("click",o=>{e[n].classList.toggle("is-expanded");const i=o.currentTarget;"true"!==i.dataset.clicked?(e[n].innerHTML=r.originalContentArr[n],i.innerHTML=t.lessText,i.dataset.clicked=!0,s&&a(e[n])):(e[n].innerHTML=r.truncatedContentArr[n],i.innerHTML=t.moreText,i.dataset.clicked=!1,s&&a(e[n]))})}(n,s)}(o))}function a(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)o(e[n],n),console.log(e[n])}}}e.options=n;export{e as default}; | ||
//# sourceMappingURL=index.modern.js.map |
@@ -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};function n(n,t){t=Object.assign({},e,t);var r={originalContentArr:[],truncatedContentArr:[]};function o(e){return void 0!==e.dataset.readSmoreChars||null!==t.charsCount}return{init:function(){for(var e=0,a=n.length;e<a;++e)l=e,void 0,void 0,void 0,void 0,d=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}(i=n[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.split("").slice(0,n-1).join("")+"...":r.split(/\s+/).slice(0,n-1).join(" ")+"..."}(c=i.innerHTML,d,o(i)),f=o(i)?c.length:(s=c,null!==s&&""!==s&&s.replace(/<[^>]+>/g,"")).split(" ").filter(function(e){return""!==e.trim()}).length,r.originalContentArr.push(c),r.truncatedContentArr.push(u),d<f&&(i.innerHTML=r.truncatedContentArr[l],function(e){var o=document.createElement("span");o.className=t.blockClassName+"__link-wrap",o.innerHTML=function(e){return'\n <a id="'+t.blockClassName+"_"+e+'"\n class="'+t.blockClassName+'__link"\n style="cursor:pointer">\n '+t.moreText+"\n </a>\n "}(e),n[e].after(o),function(e){document.querySelector("#"+t.blockClassName+"_"+e).addEventListener("click",function(o){n[e].classList.toggle("is-expanded");var a=o.currentTarget;"true"!==a.dataset.clicked?(n[e].innerHTML=r.originalContentArr[e],a.innerHTML=t.lessText,a.dataset.clicked=!0):(n[e].innerHTML=r.truncatedContentArr[e],a.innerHTML=t.moreText,a.dataset.clicked=!1)})}(e)}(l));var s,i,l,d,c,u,f}}}return n.options=e,n}); | ||
!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};function n(n,t){t=Object.assign({},e,t);var r={originalContentArr:[],truncatedContentArr:[]};function o(e){return void 0!==e.dataset.readSmoreChars||null!==t.charsCount}function i(e,n){e&&(e.lastElementChild.style.display="inline",e.style.display="inline"),n&&(n.style.display="inline")}return{init:function(){for(var e=0,a=n.length;e<a;++e)d=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}(l=n[e]),f=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(" ")+"..."}(u=l.innerHTML,c,o(l)),m=o(l)?u.length:(s=u,null!==s&&""!==s&&s.replace(/<[^>]+>/g,"")).split(" ").filter(function(e){return""!==e.trim()}).length,r.originalContentArr.push(u),r.truncatedContentArr.push(f),c<m&&(l.innerHTML=r.truncatedContentArr[d],function(e){var o=function(e){return void 0!==e.dataset.readSmoreInline||!0===t.isInline}(n[e]),a=document.createElement("span");a.className=t.blockClassName+"__link-wrap",a.innerHTML=function(e){return'\n <a id="'+t.blockClassName+"_"+e+'"\n class="'+t.blockClassName+'__link"\n style="cursor:pointer">\n '+t.moreText+"\n </a>\n "}(e),o&&i(n[e],a),n[e].after(a),function(e,o){document.querySelector("#"+t.blockClassName+"_"+e).addEventListener("click",function(a){n[e].classList.toggle("is-expanded");var s=a.currentTarget;"true"!==s.dataset.clicked?(n[e].innerHTML=r.originalContentArr[e],s.innerHTML=t.lessText,s.dataset.clicked=!0,o&&i(n[e])):(n[e].innerHTML=r.truncatedContentArr[e],s.innerHTML=t.moreText,s.dataset.clicked=!1,o&&i(n[e]))})}(e,o)}(d)),console.log(n[e]);var s,l,d,c,u,f,m}}}return n.options=e,n}); | ||
//# sourceMappingURL=index.umd.js.map |
{ | ||
"name": "read-smore", | ||
"version": "2.1.0", | ||
"version": "2.2.0", | ||
"description": "A simple read more / read less feature in vanilla js", | ||
@@ -40,4 +40,3 @@ "author": "Stephen Scaff <stephenscaff.com>", | ||
"dev": "npm run demo:start && microbundle watch", | ||
"prepublish": "npm run clean && npm run build && npm run demo:build && gh-pages -d ./demo/dist", | ||
"demo:start": "parcel ./demo/src/index.html --dist-dir ./demo/dist", | ||
"demo:start": "parcel ./demo/src/*.html --dist-dir ./demo/dist", | ||
"demo:build": "parcel build ./demo/src/index.html --dist-dir ./demo/dist --public-url ./", | ||
@@ -49,8 +48,8 @@ "demo:deploy": "npm run demo:build && gh-pages -d ./demo/dist", | ||
"devDependencies": { | ||
"@parcel/transformer-sass": "^2.3.2", | ||
"@parcel/transformer-sass": "^2.8.0", | ||
"eslint": "^8.11.0", | ||
"gh-pages": "^3.2.3", | ||
"microbundle": "^0.14.2", | ||
"parcel": "^2.3.2" | ||
"parcel": "^2.8.0" | ||
} | ||
} |
@@ -18,5 +18,4 @@ # Read-Smore | ||
5. [🕹️ Usage](#-usage) | ||
6. [🎨 Cursor Types](#-cursor-types) | ||
7. [📓 Notes](#-notes) | ||
8. [📅 To Dos](#-to-dos) | ||
6. [📓 Notes](#-notes) | ||
7. [📅 To Dos](#-to-dos) | ||
@@ -27,10 +26,11 @@ <br/> | ||
- Super duper lightweight, no dependencies, vanilla js. | ||
- Supports truncating content by max Word or Character count. | ||
- Super lightweight, no dependencies, vanilla js, es6. | ||
- Supports truncating content by max word or character count. | ||
- Define max word or characters via data attribute or option | ||
- Adds ellipse after truncated content. | ||
- Preserves existing markup (nice). | ||
- Read more / Read less text is customizable. | ||
- Use data attributes to control max words/characters count. | ||
- Block level class name is customizable. | ||
- Read More text can be block level or inline via provided (and super minimal) css | ||
- Read More link can be inlined with truncated content, or as block level element below. | ||
- No CSS deps, lib is 100% js. | ||
- Hybrid NPM Module, supporting `import` and `require` | ||
@@ -113,2 +113,3 @@ | ||
| isInline | Boolean | Styles link text inline with content | `false` | | ||
| linkElement | String | Change expander element | `a` | | ||
@@ -208,17 +209,10 @@ <br> | ||
#### Make Read more link inline | ||
#### Inline Read More link | ||
To have the Read More link appear inline with the ellipsed content, as opposed to below it, some very simple styles are included in the package. | ||
Import them in your css: | ||
You can have the Read More link appear inline with the ellipsed content, as opposed to below it. | ||
**CSS File** | ||
Note: As of v2.2.0, required css dep was removed in favor of a pure js approach that simply applied inline styles. | ||
``` | ||
import 'read-more/index.css'; | ||
``` | ||
**1: Via `data-read-smore-inline`** | ||
Then use the data attribute `data-read-smore-inline="true" | ||
**JS** | ||
``` | ||
@@ -236,4 +230,14 @@ <div | ||
Note, will probably remove the required css dep in favor inline styles or a js only solution. | ||
**2: Via Option (effects all readSmore instances** | ||
``` | ||
const readMores = document.querySelectorAll('.js-read-smore') | ||
const options = { | ||
isInline: true | ||
} | ||
const RMs = ReadSmore(readMores, options) | ||
``` | ||
<br/> | ||
@@ -254,6 +258,6 @@ | ||
- ~~Bundle as Hybrid NPM Module to support `import` and `require`~~ | ||
- ~~Remove CSS needed for inline option~~ | ||
- Provide callbacks on open/close | ||
- Provide a destroy method | ||
- Provide a solution for content injected after page load | ||
- Remove CSS needed for inline option | ||
- Add some tests |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
57584
37
258
11