Merge pull request #8 from tomik23:refactoring

Refactoring
tomickigrzegorz · Oct 30, 2020 · d497337 · d497337
2 parents 092b61e + 78ec599
commit d497337
Show file tree

Hide file tree

Showing 9 changed files with 533 additions and 835 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,46 +1,30 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true
+    env: {
+        browser: true,
+        node: true,
+        es6: true,
     },
-    "extends": [
-        "airbnb-base",
-        "prettier"
-    ],
-    "parser": "@babel/eslint-parser",
-    "plugins": ["prettier"],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "rules": {
-        "prettier/prettier": [
-            "error",
+    extends: ['eslint:recommended'],
+    plugins: ['prettier'],
+    rules: {
+        'prettier/prettier': [
+            'warn',
             {
-                "endOfLine": "auto"
-            }
-        ],
-        "class-methods-use-this": "off",
-        "quotes": [
-            "error",
-            "single"
+                semi: true,
+                singleQuote: true,
+                tabWidth: 2,
+                endOfLine: 'auto',
+                printWidth: 80,
+            },
         ],
-        "linebreak-style": ["error", "windows"],
-        "no-param-reassign": [
+        'comma-dangle': ['error', 'only-multiline'],
+        'linebreak-style': ['error', 'windows'],
+        'no-param-reassign': [
             2,
             {
-                "props": false
-            }
+                props: false,
+            },
         ],
-        "no-plusplus": [
-            "error",
-            {
-                "allowForLoopAfterthoughts": true
-            }
-        ]
-    }
-};
+    },
+    parser: '@babel/eslint-parser',
+};
diff --git a/.prettierrc b/.prettierrc
diff --git a/README.md b/README.md
@@ -55,6 +55,13 @@ npm run prod
 <link rel="stylesheet" href="style.css">
 <script src="showMore.min.js"></script>
 ```
+<img src="https://cdn.jsdelivr.net/www.jsdelivr.com/4a8e863f4c627929f243db3360393a7eed05238c/img/logo-horizontal.svg">
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tomik23/show-more@master/docs/style.css">
+<script src="https://cdn.jsdelivr.net/gh/tomik23/show-more@master/docs/showMore.min.js"></script>
+```
+
 ---
 ### For text → [live example](https://tomik23.github.io/show-more#example-text):
 ```html

diff --git a/docs/global.css b/docs/global.css
diff --git a/docs/showMore.min.js b/docs/showMore.min.js
diff --git a/package.json b/package.json
@@ -1,15 +1,26 @@
 {
   "name": "show-more-read",
-  "version": "1.0.6",
+  "version": "1.0.7",
+  "main": "docs/showMore.min.js",
   "description": "JavaScript library that truncates text, list or table by chars, elements or rows",
   "author": "Grzegorz Tomicki",
-  "main": "docs/showMore.min.js",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tomik23/show-more/issues"
+  },
   "homepage": "https://github.com/tomik23/show-more#readme",
   "repository": {
     "type": "git",
     "url": "https://github.com/tomik23/show-more.git"
   },
+  "scripts": {
+    "dev": "concurrently \"yarn sass:dev\" \"yarn watch\"",
+    "prod": "yarn build && yarn sass:prod",
+    "build": "rollup --config --environment PRODUCTION",
+    "watch": "rollup --config --watch",
+    "sass:prod": "node-sass sources/scss -o docs --output-style compressed",
+    "sass:dev": "node-sass -w sources/scss -o docs"
+  },
   "keywords": [
     "show-more/less",
     "text",
@@ -19,14 +30,6 @@
     "display-inlne",
     "block"
   ],
-  "scripts": {
-    "dev": "concurrently \"yarn sass:dev\" \"yarn watch\"",
-    "prod": "yarn build && yarn sass:prod",
-    "build": "rollup --config --environment PRODUCTION",
-    "watch": "rollup --config --watch",
-    "sass:prod": "node-sass sources/scss -o docs --output-style compressed",
-    "sass:dev": "node-sass -w sources/scss -o docs"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -39,25 +42,22 @@
       "last 1 safari version"
     ]
   },
-  "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/eslint-plugin": "^7.11.5",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/core": "^7.12.3",
+    "@babel/eslint-parser": "^7.12.1",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
     "@rollup/plugin-babel": "^5.2.1",
     "concurrently": "^5.3.0",
     "core-js": "^3.6.5",
-    "eslint": "^7.10.0",
-    "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-config-prettier": "^6.12.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "^7.12.1",
+    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "node-sass": "^4.14.1",
     "prettier": "^2.1.2",
-    "rollup": "^2.28.2",
+    "rollup": "^2.32.1",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-serve": "^1.0.4",
     "rollup-plugin-terser": "^7.0.2"
   }
-}
+}
diff --git a/sources/index.js b/sources/index.js
@@ -23,13 +23,11 @@ class ShowMore {
         after: after || 0,
       };
 
-      this.initial();
+      this.initial(this.object);
     }
   }
 
-  initial = () => {
-    const { element, after, limit, type } = this.object;
-
+  initial = ({ element, after, limit, type }) => {
     // set default aria-expande to false
     element.setAttribute('aria-expanded', 'false');
     const limitCounts = limit + after;
@@ -49,11 +47,11 @@ class ShowMore {
 
       if (element.innerText.length > limitCounts) {
         truncatedText = orgTexReg.substr(0, limit + differenceBetweenHTMLaTEXT);
-        truncatedText = truncatedText.substr(
-          0,
-          Math.min(truncatedText.length, truncatedText.lastIndexOf(' '))
+        const minText = Math.min(
+          truncatedText.length,
+          truncatedText.lastIndexOf(' ')
         );
-        element.innerHTML = truncatedText;
+        element.innerHTML = truncatedText.substr(0, minText);
 
         this.addBtn(this.object);
 
@@ -84,11 +82,11 @@ class ShowMore {
         );
       }
     }
-  }
+  };
 
   clickEvent = (element, object) => {
     element.addEventListener('click', this.handleEvent.bind(this, object));
-  }
+  };
 
   createBtn = ({ element, number, less, more, type }) => {
     const typeAria = this.checkExp ? less : more;
@@ -102,11 +100,11 @@ class ShowMore {
       ? typeAria + this.getNumber(element, type)
       : typeAria;
     return btn;
-  }
+  };
 
   addRemClass = (element, type) => {
     element.classList[type ? 'add' : 'remove']('hidden');
-  }
+  };
 
   handleEvent = (object, event) => {
     const {
@@ -156,7 +154,7 @@ class ShowMore {
     ) {
       this.setExpand({ ...object, target });
     }
-  }
+  };
 
   addBtn = (object) => {
     const { type, element, typeElement } = object;
@@ -167,18 +165,17 @@ class ShowMore {
       el.appendChild(this.createBtn(object));
       element.appendChild(el);
     }
-  }
+  };
 
   // number of hidden items
-  getNumber = (element, type) => {
-    const { rows, children } = element;
+  getNumber = ({ rows, children }, type) => {
     const elementType = type === 'table' ? rows : children;
 
     const numbersElementHidden = [].slice
       .call(elementType)
       .filter((el) => el.className === 'hidden').length;
     return numbersElementHidden !== 0 ? ` ${numbersElementHidden}` : '';
-  }
+  };
 
   setExpand = ({ element, type, less, more, number, target }) => {
     const typeAria = this.checkExp ? less : more;
@@ -198,7 +195,7 @@ class ShowMore {
     } else if (this.object.type === 'list') {
       lastChild.parentNode.removeChild(lastChild);
     }
-  }
+  };
 }
 
 export default ShowMore;
diff --git a/sources/scss/global.scss b/sources/scss/global.scss
@@ -111,30 +111,31 @@ html[data-useragent*="IE"] .example-html {
   &-html {
     cursor: pointer;
   }
+}
 
-  h5 {
-    position: relative;
-    cursor: pointer;
-    padding: 2px 2px 2px 25px;
-    margin: 0;
-
-    &:before {
-      position: absolute;
-      content: "\27A4";
-      left: 0;
-      top: 1px;
-      transition: transform 0.2s ease-in-out;
-    }
+pre {
+  overflow: auto;
+  margin: -20px auto -60px auto;
+  padding: 0;
+
+  code {
+    line-height: 130%;
   }
+}
 
-  pre {
-    overflow: auto;
-    margin: -20px auto -60px auto;
-    padding: 0;
 
-    code {
-      line-height: 130%;
-    }
+h5 {
+  position: relative;
+  cursor: pointer;
+  padding: 20px 2px 2px 25px;
+  margin: 0;
+
+  &:before {
+    position: absolute;
+    content: "\27A4";
+    left: 0;
+    top: 19px;
+    transition: transform 0.2s ease-in-out;
   }
 }