improved nested stars support; removed usuable postcss plugins; secur…

…ity updates

coverage/lcov.info

@@ -27,27 +27,27 @@ FNF:23
 FNH:20
 FNDA:8,_default
 FNDA:8,init
-FNDA:2,submit
+FNDA:4,submit
 FNDA:4,getFingerPrint
 FNDA:0,(anonymous_15)
 FNDA:0,(anonymous_16)
 FNDA:0,(anonymous_17)
 FNDA:4,(anonymous_18)
 FNDA:4,(anonymous_19)
 FNDA:116,(anonymous_20)
-FNDA:4,blockVotes
-FNDA:1,unblockVotes
+FNDA:6,blockVotes
+FNDA:2,unblockVotes
 FNDA:8,isVoted
 FNDA:2,addVoteToStorage
 FNDA:10,setInitialRating
 FNDA:10,setActiveStar
-FNDA:6,handleHover
-FNDA:30,(anonymous_28)
+FNDA:7,handleHover
+FNDA:35,(anonymous_28)
 FNDA:1,(anonymous_29)
 FNDA:5,(anonymous_30)
 FNDA:2,(anonymous_31)
-FNDA:6,addClickHandler
-FNDA:1,(anonymous_33)
+FNDA:7,addClickHandler
+FNDA:4,(anonymous_33)
 DA:1,1
 DA:4,8
 DA:5,8
@@ -66,13 +66,13 @@ DA:39,8
 DA:40,5
 DA:41,5
 DA:43,3
-DA:48,2
-DA:52,2
-DA:53,1
-DA:56,2
+DA:48,4
+DA:52,4
+DA:53,3
+DA:56,4
 DA:57,1
-DA:60,2
-DA:61,2
+DA:60,4
+DA:61,4
 DA:64,4
 DA:65,4
 DA:66,0
@@ -85,14 +85,14 @@ DA:76,4
 DA:77,4
 DA:78,116
 DA:80,4
-DA:87,4
-DA:88,4
-DA:89,4
-DA:93,1
-DA:94,1
-DA:96,1
-DA:97,1
-DA:98,1
+DA:87,6
+DA:88,6
+DA:89,6
+DA:93,2
+DA:94,2
+DA:96,2
+DA:97,2
+DA:98,2
 DA:102,8
 DA:103,2
 DA:106,6
@@ -106,27 +106,29 @@ DA:120,10
 DA:124,10
 DA:125,10
 DA:126,10
-DA:130,6
-DA:131,6
-DA:132,30
+DA:130,7
+DA:131,7
+DA:132,35
 DA:133,1
 DA:134,5
-DA:138,30
+DA:138,35
 DA:139,2
-DA:144,6
-DA:145,6
-DA:146,1
-DA:148,1
-DA:150,1
-DA:151,0
-DA:154,1
-DA:155,1
-DA:156,1
-DA:157,1
-DA:159,1
-DA:161,1
-LF:77
-LH:71
+DA:144,7
+DA:145,7
+DA:146,4
+DA:149,4
+DA:150,4
+DA:152,0
+DA:155,4
+DA:156,0
+DA:159,4
+DA:160,3
+DA:161,3
+DA:162,3
+DA:164,3
+DA:166,3
+LF:79
+LH:72
 BRDA:18,0,0,6
 BRDA:18,0,1,2
 BRDA:18,1,0,8
@@ -139,10 +141,10 @@ BRDA:35,4,0,4
 BRDA:35,4,1,4
 BRDA:39,5,0,5
 BRDA:39,5,1,3
-BRDA:52,6,0,1
+BRDA:52,6,0,3
 BRDA:52,6,1,1
 BRDA:56,7,0,1
-BRDA:56,7,1,1
+BRDA:56,7,1,3
 BRDA:65,8,0,0
 BRDA:65,8,1,4
 BRDA:102,9,0,2
@@ -159,12 +161,14 @@ BRDA:124,14,0,10
 BRDA:124,14,1,0
 BRDA:124,15,0,10
 BRDA:124,15,1,10
-BRDA:150,16,0,0
-BRDA:150,16,1,1
-BRDA:154,17,0,1
-BRDA:154,17,1,0
-BRDA:154,18,0,1
-BRDA:154,18,1,1
-BRF:38
-BRH:33
+BRDA:149,16,0,4
+BRDA:149,16,1,0
+BRDA:155,17,0,0
+BRDA:155,17,1,4
+BRDA:159,18,0,3
+BRDA:159,18,1,1
+BRDA:159,19,0,4
+BRDA:159,19,1,4
+BRF:40
+BRH:35
 end_of_record

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savingsunited/zvezdochki",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "The component for easy creation of star rating components",
   "main": "dist/Zvezdochki.3283b0c3.js",
   "repository": "https://github.com/pcvg/zvezdochki",
@@ -28,35 +28,34 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/register": "^7.11.5",
+    "@babel/core": "^7.12.9",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/register": "^7.12.1",
     "canvas": "^2.6.1",
     "chai": "^4.2.0",
     "coveralls": "^3.1.0",
     "cssnano": "^4.1.10",
     "del-cli": "^3.0.1",
-    "eslint": "^7.11.0",
+    "eslint": "^7.14.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.0",
     "jsdom": "^16.4.0",
     "jsdom-global": "^3.0.2",
     "microlight": "^0.0.7",
-    "mocha": "^8.1.3",
+    "mocha": "^8.2.1",
     "mocha-lcov-reporter": "^1.3.0",
     "mock-local-storage": "^1.1.15",
-    "node-sass": "^4.14.1",
+    "node-sass": "^5.0.0",
     "nyc": "^15.1.0",
     "parcel": "^1.12.4",
-    "postcss": "^8.1.1",
-    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss": "^8.1.10",
     "postcss-preset-env": "^6.7.0",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.8.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-scss": "^3.18.0"
   },
   "peerDependencies": {
-    "postcss": "^8.1.1"
+    "postcss": "^8.1.10"
   },
   "dependencies": {
     "fingerprintjs2": "^2.1.2",

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    'postcss-flexbugs-fixes': {},
     'postcss-preset-env': {
       autoprefixer: true,
       stage: 3

src/Zvezdochki.js

@@ -144,10 +144,15 @@ export default class {
   addClickHandler() {
     this.ratingEl.addEventListener('click', ev => {
       ev.preventDefault();
+      let target;
 
-      let target = ev.target;
+      if (ev.target.dataset[this.options.starDataAttr]) {
+        target = ev.target
+      } else {
+        target = ev.target.closest(`[data-${this.options.starDataAttr}]`)
+      }
 
-      if (!target.dataset[this.options.starDataAttr]) {
+      if (!target) {
         return;
       }
 
@@ -160,6 +165,6 @@ export default class {
 
         this.blockVotes();
       }
-    }, true);
+    });
   }
 }

src/demo.js

@@ -38,6 +38,8 @@ require("microlight");
   let unblockBtn = document.querySelector('.btn--unblock');
 
   unblockBtn.addEventListener('click', () => {
+    unblockBtn.innerText = "Unblocked";
+    unblockBtn.setAttribute('disabled', 'disabled')
     emojisRating.unblockVotes();
   });
 })();
@@ -56,7 +58,7 @@ require("microlight");
 
   new Zvezdochki(ratingEl, options);
 
-  ratingEl.addEventListener('click', ev => {
+  ratingEl.addEventListener('vote', ev => {
     output.innerText = "Clicked = " + ev.detail.star + ". \n  LocalStorage content is = " + window.localStorage.getItem('votes');
   });
 

src/demo.scss

@@ -131,5 +131,10 @@ pre {
     margin-top: 18px;
     color: #000;
     background-color: #73E4AD;
+
+    &[disabled] {
+      background-color: #AAA;
+      cursor: default;
+    }
   }
 }

tests/test-emoji.js

@@ -18,8 +18,8 @@ let testOptions = {
 
 const STARS = `<div class="${testOptions.elementClass}" data-rating="hankey">
                 <div class="${testOptions.elementClass}__list">
-                  <span data-emoji="love">😍</span>
-                  <span data-emoji="yep">😃</span>
+                  <span data-emoji="love"><span>😍</span></span>
+                  <span data-emoji="yep"><span>😃</span></span>
                   <span data-emoji="maybe">😏</span>
                   <span data-emoji="nope">😐</span>
                   <span data-emoji="hankey">💩</span>
@@ -39,20 +39,44 @@ const HTML = `<!DOCTYPE html>
     </body>
    </html>`;
 
-let starRating;
-
 describe("initialize with emoji", function() {
+  let ratingEl, emojiClicked, starRating;
+
   before(function() {
     let DOM = new JSDOM(HTML, {resources: "usable", runScripts: "dangerously"});
 
     let window = DOM.window;
     let document = window.document;
+    ratingEl = document.querySelector(`.${testOptions.elementClass}`)
+
+    starRating = new Zvezdochki(ratingEl, testOptions);
 
-    starRating = new Zvezdochki(document.querySelector(`.${testOptions.elementClass}`), testOptions);
+    ratingEl.addEventListener("vote", function(ev) {
+      emojiClicked = ev.detail.star;
+    });
   });
 
   it("should initialize", function() {
     starRating.should.be.an('object');
   });
 
+  it("should click on emojis", function() {
+    let clickEvent = document.createEvent("HTMLEvents");
+    clickEvent.initEvent("click", true, true);
+    ratingEl.querySelector('span:nth-child(3)').dispatchEvent(clickEvent);
+
+    emojiClicked.should.be.equal('maybe');
+  });
+
+  it("should click on emojis with nested elements", function() {
+    starRating.unblockVotes();
+    let clickEvent = document.createEvent("HTMLEvents");
+    clickEvent.initEvent("click", true, true);
+    ratingEl.querySelector('span:nth-child(2)').dispatchEvent(clickEvent);
+
+    emojiClicked.should.be.equal('yep');
+  });
+
+
+
 });