Merge pull request #32 from teawithfruit:patch-1

Opportunity to change the button class and add additional classes the button

README.md

@@ -154,6 +154,9 @@ npm run prod
 | `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 |
+| `regex` |  | adding your own regular expressions. It is an object with two parameters `match` and `replace`, see example below |
+| `btnClass` |  | Button class name. Default: `show-more-btn` |
+| `btnClassAppend` |  | Opportunity to add additional classes to the button |
 
 
 > ^ 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
@@ -169,6 +172,23 @@ document.addEventListener('DOMContentLoaded', function() {
     onMoreLess: (type, object) => {
       // type = less/more and full object
       console.log(type, object);
+    },
+  });
+});
+```
+
+## Own regular expressions
+
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+  new ShowMore('.element', {
+    // you can also add your own regular expression,
+    // it will only apply to text elements.
+    regex: {
+      image: {
+        match: /<img([\w\W]+?)[/]?>/g,
+        replace: ''
+      }
     }
   });
 });
@@ -178,4 +198,4 @@ document.addEventListener('DOMContentLoaded', function() {
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png" alt="Vivaldi" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Vivaldi |
 | --------- | --------- | --------- | --------- | --------- |
-| IE10+, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| IE10+, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

docs/index.html

@@ -42,7 +42,19 @@ <h2>Configuration</h2>
   }
 });</code>
           </pre>
-        </div>
+          <p>You can add your own regular expression</p>
+          <div class="example-html">
+            <pre>
+            <code code class="language-js">new ShowMore('.element', {
+  regex: {
+    image: {
+      match: /&lt;img([\w\W]+?)[/]?&gt;/g,
+      replace: ''
+    }
+  }
+});</code>
+          </pre>
+          </div>
       </section>
 
       <!-- More text -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "show-more-read",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "main": "docs/showMore.min.js",
   "description": "JavaScript library that truncates text, list or table by chars, elements or rows",
   "author": "Grzegorz Tomicki",
@@ -43,25 +43,25 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.14.5",
-    "@babel/eslint-parser": "^7.14.5",
+    "@babel/core": "^7.15.0",
+    "@babel/eslint-parser": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-env": "^7.15.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.3.1",
     "concurrently": "^6.2.0",
-    "core-js": "^3.14.0",
-    "cssnano": "^5.0.6",
-    "eslint": "^7.28.0",
+    "core-js": "^3.16.0",
+    "cssnano": "^5.0.7",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "postcss": "^8.3.2",
+    "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.3.1",
-    "rollup": "^2.51.2",
-    "rollup-plugin-livereload": "^2.0.0",
+    "prettier": "^2.3.2",
+    "rollup": "^2.56.0",
+    "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.34.1"
+    "sass": "^1.37.5"
   }
-}
+}

sources/index.js

@@ -1,15 +1,27 @@
 class ShowMore {
-  constructor(className, { onMoreLess = () => { } } = {}) {
+  constructor(className, { onMoreLess = () => { }, regex = {} } = {}) {
     this.elements = document.querySelectorAll(className);
     this.onMoreLess = onMoreLess;
 
-    this.regex = {
-      newLine: /(\r\n|\n|\r)/gm,
-      space: /\s\s+/gm,
-      br: /<br\s*\/?>/gim,
-      html: /(<((?!b|\/b|!strong|\/strong)[^>]+)>)/ig,
-      // img: /<img([\w\W]+?)[/]?>/g,
-    };
+    this.regex = Object.assign({
+      newLine: {
+        match: /(\r\n|\n|\r)/gm,
+        replace: ''
+      },
+      space: {
+        match: /\s\s+/gm,
+        replace: ' '
+      },
+      br: {
+        match: /<br\s*\/?>/gim,
+        replace: ''
+      },
+      html: {
+        match: /(<((?!b|\/b|!strong|\/strong)[^>]+)>)/ig,
+        replace: ''
+      }
+    }, regex);
+
     for (let i = 0; i < this.elements.length; i++) {
       const {
         type,
@@ -20,6 +32,8 @@ class ShowMore {
         less,
         number,
         ellipsis,
+        btnClass,
+        btnClassAppend,
       } = JSON.parse(this.elements[i].getAttribute('data-config'));
 
       this.object = {
@@ -34,6 +48,8 @@ class ShowMore {
         less: less || false,
         number: number || false,
         after: after || 0,
+        btnClass: btnClass || 'show-more-btn',
+        btnClassAppend: btnClassAppend || null,
       };
       this.initial(this.object);
     }
@@ -82,12 +98,11 @@ class ShowMore {
       const originalText = element.innerHTML.trim();
       let elementText = element.textContent.trim();
 
-      const orgTexReg = originalText
-        .replace(this.regex.br, '')
-        .replace(this.regex.newLine, '')
-        .replace(this.regex.space, ' ')
-        .replace(this.regex.html, '')
-      // .replace(this.regex.img, '')
+      let orgTexReg = originalText;
+      for (let key in this.regex) {
+        const { match, replace } = this.regex[key];
+        if (key && match) orgTexReg = orgTexReg.replace(match, replace);
+      }
 
       if (elementText.length > limitCounts) {
         truncatedText = this.htmlSubstr(orgTexReg, limit).concat(ellips);
@@ -129,13 +144,13 @@ class ShowMore {
     element.addEventListener('click', this.handleEvent.bind(this, object));
   };
 
-  createBtn = ({ element, number, less, more, type }) => {
+  createBtn = ({ element, number, less, more, type, btnClass, btnClassAppend }) => {
     const typeAria = this.checkExp ? less || '' : more || '';
     const label = this.checkExp ? 'collapse' : 'expand';
     const expanded = this.checkExp ? true : false;
 
     const btn = document.createElement('button');
-    btn.className = 'show-more-btn';
+    btn.className = btnClassAppend == null ? btnClass : btnClass + ' ' + btnClassAppend;
     btn.setAttribute('aria-expanded', expanded);
     btn.setAttribute('aria-label', label);
     btn.setAttribute('tabindex', 0);
@@ -158,10 +173,11 @@ class ShowMore {
       typeElement,
       originalText,
       truncatedText,
+      btnClass,
     } = object;
     const { currentTarget, target } = event;
 
-    const checkContainsClass = target.classList.contains('show-more-btn');
+    const checkContainsClass = target.classList.contains(btnClass);
     const ariaExpanded = element.getAttribute('aria-expanded');
     this.checkExp = ariaExpanded === 'false';
 
@@ -253,4 +269,4 @@ class ShowMore {
   };
 }
 
-export default ShowMore;
+export default ShowMore;