From 7da02e13bdbc32a39a7687e4c59e5e997398e578 Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Sun, 25 Nov 2018 14:20:45 +0300 Subject: [PATCH 01/10] added JSDoc comments --- reactions.js | 200 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 146 insertions(+), 54 deletions(-) diff --git a/reactions.js b/reactions.js index 450c8fc..cdef936 100644 --- a/reactions.js +++ b/reactions.js @@ -2,7 +2,7 @@ * @typedef {object} ReactionsConfig * @property {string} title - Text in text area * @property {string} wrapperBlockSelector - Module holder -* +* @property {string[]} emojiCodes - uncodes of emijo to buttons */ @@ -26,6 +26,7 @@ class Reactions { unicode: [], countBlock: [] } + this.nodes.unicode = settings.emojiCodes; this.titleText = settings.title; this.appendElementsToWrapper(); @@ -33,8 +34,8 @@ class Reactions { } /** - * CSS classes of elements in class Reactions - */ + * CSS classes of elements in class Reactions + */ static get CSS(){ return { titleClass : 'reactions__text', @@ -49,7 +50,7 @@ class Reactions { } /** - * Create a general block + * Create blocks and give CSS class * @param {CSSClass} CSSClass - CSS class for block * @returns {HTMLElement} div */ @@ -61,10 +62,12 @@ class Reactions { return div; } - /** - * Append emojiblock, buttons and counter to general block - */ + /** + * Append emojiblock, emojiwrapper, buttons and counter to general block + * @return {void} + */ appendElementsToWrapper() { + /** * Append title */ @@ -80,100 +83,189 @@ class Reactions { this.nodes.wrapper.appendChild(this.nodes.emojiBlock); /** - * Append button - * @type {HTMLElement} button + * Create blocks and append them to wrapper + * @type {HTMLElement} */ for (let i = 0; i < this.nodes.unicode.length; i++){ + + /** + * Append wrapper to button and count clicks block + * @type {HTMLElement} emojiWrapper + */ this.nodes.emojiWrapper[i] = this.make('div', Reactions.CSS.emojiWrapperClass); this.nodes.wrapper.appendChild(this.nodes.emojiWrapper[i]); + /** + * Append buttons + * @type {HTMLElement} button + */ this.nodes.button[i] = this.make('div', Reactions.CSS.buttonClass); this.nodes.wrapper.appendChild(this.nodes.button[i]); /** - * Append wrapper for button + * Append wrappers for button * @type {HTMLElement} buttonWrapper */ - this.nodes.buttonWrapper[i] = this.make('div', Reactions.CSS.buttonWrapperClass); - this.nodes.wrapper.appendChild(this.nodes.buttonWrapper[i]); + this.nodes.buttonWrapper[i] = this.make('div', Reactions.CSS.buttonWrapperClass); + this.nodes.wrapper.appendChild(this.nodes.buttonWrapper[i]); /** - * Append clicks counter + * Append blocks for clicks counter * @type {HTMLElement} countBlock */ this.nodes.countBlock[i] = this.make('div', Reactions.CSS.countClicksClass); this.nodes.wrapper.appendChild(this.nodes.countBlock[i]); - } + } this.appendElementsToEmojiBlock() } - /** - * Append emoji and counter to emojiBlock - */ + /** + * Append emoji and counter to emojiBlock + * @return {void} + */ appendElementsToEmojiBlock(){ - /** - * Append button wrapper to emojiBlock - */ - for (let i = 0; i < this.nodes.unicode.length; i++){ - this.nodes.emojiBlock.appendChild(this.nodes.buttonWrapper[i]); + /** + * Append emojiwrapper to emojiblock and append button and counter in emojiwrapper + */ + for (let i = 0; i < this.nodes.unicode.length; i++){ - this.nodes.emojiBlock.appendChild(this.nodes.emojiWrapper[i]); - - this.nodes.emojiWrapper[i].appendChild(this.nodes.buttonWrapper[i]); + /** + * Append buttonWrapper to emojiBlock + */ + this.nodes.emojiBlock.appendChild(this.nodes.buttonWrapper[i]); - this.nodes.emojiWrapper[i].appendChild(this.nodes.countBlock[i]); + this.nodes.emojiBlock.appendChild(this.nodes.emojiWrapper[i]); + + this.nodes.emojiWrapper[i].appendChild(this.nodes.buttonWrapper[i]); - this.nodes.buttonWrapper[i].appendChild(this.nodes.button[i]); + this.nodes.emojiWrapper[i].appendChild(this.nodes.countBlock[i]); - this.nodes.button[i].innerText = String.fromCodePoint(this.nodes.unicode[i]); + this.nodes.buttonWrapper[i].appendChild(this.nodes.button[i]); - this.nodes.countBlock[i].innerText = '0'; + this.nodes.button[i].innerText = String.fromCodePoint(this.nodes.unicode[i]); + this.nodes.countBlock[i].innerText = '0'; } /** - * Transfer to counting clicks - * @param {HTMLElement} 'click' add CSS class, count clicks - * @return {void} - */ - for (let i = 0; i < this.nodes.unicode.length; i++) { + * Transfer to counting clicks after click on button + */ + for (let i = 0; i < this.nodes.unicode.length; i++) { this.nodes.buttonWrapper[i].addEventListener('click', () => { - this.countClicksToButton(this.nodes.buttonWrapper[i],this.nodes.emojiWrapper[i],i); - }) - ;} - }; + let counter = this.nodes.countBlock[i]; + + this.countClicksToButton(this.nodes.buttonWrapper[i],this.nodes.emojiWrapper[i],counter); + }); + } + } /** - * Increase or decrease counter after click + * Increase or decrease counter after click, add or remove acyive CSS class * @param {HTMLElement} buttonWrapper - * @param {HTMLElement} count of clicks + * @param {HTMLElement} emojiWrapper + * @param {HTMLElement} counter + * @return {void} */ - countClicksToButton(buttonWrapper,emojiWrapper,i){ + countClicksToButton(buttonWrapper,emojiWrapper,counter){ + + /** + * Find an active button + * @type {HTMLElement} + */ let itemActive = document.querySelector('.reactions__button--active'); + + /** + * Find an active emojiwrapper + * @type {HTMLElement} + */ let wrapperActive = document.querySelector('.reactions__emoji-wrapper--active'); + + /** + * If there is no active button, add active CSS class + * @param {HTMLElement} itemActive + * @return {void} + */ if (itemActive === null){ - buttonWrapper.classList.add(Reactions.CSS.activeButtonClass); - emojiWrapper.classList.add(Reactions.CSS.activeButtonWrapper); - this.nodes.countBlock[i].innerHTML = ++this.count; + this.addReaction(buttonWrapper,emojiWrapper,counter); + }else{ + + /** + * If clicked button is clicked, remove active CSS class + * @param {HTMLElement} itemActive + * @param {HTMLElement} buttonWrapper + * @return {void} + */ if(itemActive === buttonWrapper){ - buttonWrapper.classList.remove(Reactions.CSS.activeButtonClass); - emojiWrapper.classList.remove(Reactions.CSS.activeButtonWrapper); - this.nodes.countBlock[i].innerHTML = --this.count; + this.removeReaction(buttonWrapper,emojiWrapper,counter); + + /** + * Remove active CSS class for active button and add for clicked button + * @param {HTMLElement} itemActive + * @param {HTMLElement} buttonWrapper + * @return {void} + */ }else{ + + /** + * Count block of active button + * @type {HTMLElement} + */ let countActive = wrapperActive.querySelector('.reactions__count'); - countActive.innerHTML = --this.count; - itemActive.classList.remove(Reactions.CSS.activeButtonClass); - wrapperActive.classList.remove(Reactions.CSS.activeButtonWrapper); - buttonWrapper.classList.add(Reactions.CSS.activeButtonClass); - emojiWrapper.classList.add(Reactions.CSS.activeButtonWrapper); - this.nodes.countBlock[i].innerHTML = ++this.count; + + this.removeReaction(itemActive,wrapperActive,counter,countActive); + this.addReaction(buttonWrapper,emojiWrapper,counter); } } - }; + } + /** + * Add CSS active class and increase counter + * @param {HTMLElement} buttonWrapper + * @param {HTMLElement} emojiWrapper + * @param {HTMLElement} counter + * @return {void} + */ + addReaction(buttonWrapper,emojiWrapper,counter){ + buttonWrapper.classList.add(Reactions.CSS.activeButtonClass); + emojiWrapper.classList.add(Reactions.CSS.activeButtonWrapper); + + /** + * Increase counter + * @type {HTMLElement} + */ + counter.innerText = ++this.count; + } + + /** + * Remove CSS active class and decrease counter + * @param {HTMLElement} buttonWrapper + * @param {HTMLElement} emojiWrapper + * @param {HTMLElement} counter + * @param {HTMLElement} countActive + * @return {void} + */ + removeReaction(buttonWrapper,emojiWrapper,counter,countActive){ + buttonWrapper.classList.remove(Reactions.CSS.activeButtonClass); + emojiWrapper.classList.remove(Reactions.CSS.activeButtonWrapper); + + /** + * Decrease counter + * @type {HTMLElement} + */ + counter.innerText = --this.count; + + /** + * If we have an active count block write decreased counter + * @param {HTMLElement} countActive + * @return {void} + */ + if (countActive !== undefined){ + countActive.innerText = this.count; + } + } } From f0e7885c6b805741d536ef40a381148cdd588ab8 Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Sun, 25 Nov 2018 14:27:23 +0300 Subject: [PATCH 02/10] added JSDoc comments --- reactions.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/reactions.js b/reactions.js index cdef936..835e9f2 100644 --- a/reactions.js +++ b/reactions.js @@ -136,16 +136,36 @@ class Reactions { */ this.nodes.emojiBlock.appendChild(this.nodes.buttonWrapper[i]); + /** + * Append emojiWrapper to emojiBlock + */ this.nodes.emojiBlock.appendChild(this.nodes.emojiWrapper[i]); + /** + * Append buttonWrapper to emojiWrapper + */ this.nodes.emojiWrapper[i].appendChild(this.nodes.buttonWrapper[i]); + /** + * Append countBlock to emojiWrapper + */ this.nodes.emojiWrapper[i].appendChild(this.nodes.countBlock[i]); + /** + * Append button to buttonWrapper + */ this.nodes.buttonWrapper[i].appendChild(this.nodes.button[i]); + /** + * Add emoji to button + * @type {string} + */ this.nodes.button[i].innerText = String.fromCodePoint(this.nodes.unicode[i]); + /** + * Get 0 count to countBlock + * @type {String} + */ this.nodes.countBlock[i].innerText = '0'; } From 370f010add2be55c5f0621b7391afdbb0f0e6c65 Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Sun, 25 Nov 2018 14:50:15 +0300 Subject: [PATCH 03/10] fixed comments --- reactions.js | 85 ++++++++++++++++++++++------------------------------ 1 file changed, 35 insertions(+), 50 deletions(-) diff --git a/reactions.js b/reactions.js index 835e9f2..6143df8 100644 --- a/reactions.js +++ b/reactions.js @@ -1,20 +1,19 @@ /** -* @typedef {object} ReactionsConfig -* @property {string} title - Text in text area -* @property {string} wrapperBlockSelector - Module holder -* @property {string[]} emojiCodes - uncodes of emijo to buttons -*/ + * @typedef {object} ReactionsConfig + * @property {string} title - Text in text area + * @property {string} wrapperBlockSelector - Module holder + * @property {string[]} emojiCodes - unicodes of emoji to buttons + */ /** -* Creating blocks, adding emoji, text and buttons to general block -*/ + * Creating blocks, adding emoji, text and buttons to general block + */ class Reactions { /** - * @param {ReactionsConfig} settings - module configuration object - * @return {void} - */ + * @param {ReactionsConfig} settings - module configuration obj + */ constructor(settings) { this.nodes = { wrapper: document.querySelector(settings.wrapperBlockSelector), @@ -63,29 +62,28 @@ class Reactions { } /** - * Append emojiblock, emojiwrapper, buttons and counter to general block - * @return {void} + * Append emojiblock, emojiwrapper, buttons and counter to general block */ appendElementsToWrapper() { /** - * Append title - */ + * Append title + */ this.nodes.title = this.make('div', Reactions.CSS.titleClass); this.nodes.wrapper.appendChild(this.nodes.title); this.nodes.title.innerHTML = this.titleText; /** - * Append emoji wrapper - * @type {HTMLElement} emojiBlock - */ + * Append emoji wrapper + * @type {HTMLElement} emojiBlock + */ this.nodes.emojiBlock = this.make('div', Reactions.CSS.emojiClass); this.nodes.wrapper.appendChild(this.nodes.emojiBlock); /** - * Create blocks and append them to wrapper - * @type {HTMLElement} - */ + * Create and append blocks to wrapper + * @type {HTMLElement} + */ for (let i = 0; i < this.nodes.unicode.length; i++){ /** @@ -103,16 +101,16 @@ class Reactions { this.nodes.wrapper.appendChild(this.nodes.button[i]); /** - * Append wrappers for button - * @type {HTMLElement} buttonWrapper - */ + * Append wrappers for button + * @type {HTMLElement} buttonWrapper + */ this.nodes.buttonWrapper[i] = this.make('div', Reactions.CSS.buttonWrapperClass); this.nodes.wrapper.appendChild(this.nodes.buttonWrapper[i]); /** - * Append blocks for clicks counter - * @type {HTMLElement} countBlock - */ + * Append blocks for clicks counter + * @type {HTMLElement} countBlock + */ this.nodes.countBlock[i] = this.make('div', Reactions.CSS.countClicksClass); this.nodes.wrapper.appendChild(this.nodes.countBlock[i]); } @@ -122,7 +120,6 @@ class Reactions { /** * Append emoji and counter to emojiBlock - * @return {void} */ appendElementsToEmojiBlock(){ @@ -183,12 +180,11 @@ class Reactions { } /** - * Increase or decrease counter after click, add or remove acyive CSS class - * @param {HTMLElement} buttonWrapper - * @param {HTMLElement} emojiWrapper - * @param {HTMLElement} counter - * @return {void} - */ + * Increase or decrease counter after click, add or remove active CSS class + * @param {HTMLElement} buttonWrapper + * @param {HTMLElement} emojiWrapper + * @param {HTMLElement} counter + */ countClicksToButton(buttonWrapper,emojiWrapper,counter){ /** @@ -205,8 +201,6 @@ class Reactions { /** * If there is no active button, add active CSS class - * @param {HTMLElement} itemActive - * @return {void} */ if (itemActive === null){ this.addReaction(buttonWrapper,emojiWrapper,counter); @@ -214,19 +208,13 @@ class Reactions { }else{ /** - * If clicked button is clicked, remove active CSS class - * @param {HTMLElement} itemActive - * @param {HTMLElement} buttonWrapper - * @return {void} + * If clicked button is active, remove active CSS class */ if(itemActive === buttonWrapper){ this.removeReaction(buttonWrapper,emojiWrapper,counter); /** * Remove active CSS class for active button and add for clicked button - * @param {HTMLElement} itemActive - * @param {HTMLElement} buttonWrapper - * @return {void} */ }else{ @@ -246,8 +234,7 @@ class Reactions { * Add CSS active class and increase counter * @param {HTMLElement} buttonWrapper * @param {HTMLElement} emojiWrapper - * @param {HTMLElement} counter - * @return {void} + * @param {HTMLElement} counter */ addReaction(buttonWrapper,emojiWrapper,counter){ buttonWrapper.classList.add(Reactions.CSS.activeButtonClass); @@ -255,7 +242,7 @@ class Reactions { /** * Increase counter - * @type {HTMLElement} + * @type {string} */ counter.innerText = ++this.count; } @@ -265,8 +252,7 @@ class Reactions { * @param {HTMLElement} buttonWrapper * @param {HTMLElement} emojiWrapper * @param {HTMLElement} counter - * @param {HTMLElement} countActive - * @return {void} + * @param {HTMLElement} countActive */ removeReaction(buttonWrapper,emojiWrapper,counter,countActive){ buttonWrapper.classList.remove(Reactions.CSS.activeButtonClass); @@ -274,14 +260,13 @@ class Reactions { /** * Decrease counter - * @type {HTMLElement} + * @type {string} */ counter.innerText = --this.count; /** * If we have an active count block write decreased counter - * @param {HTMLElement} countActive - * @return {void} + * @type {string} */ if (countActive !== undefined){ countActive.innerText = this.count; From fc78b1964f52a20cc2484930cd04d00a90a45116 Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Sun, 25 Nov 2018 19:29:18 +0300 Subject: [PATCH 04/10] fixed comments --- reactions.js | 47 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 34 insertions(+), 13 deletions(-) diff --git a/reactions.js b/reactions.js index 6143df8..375eb98 100644 --- a/reactions.js +++ b/reactions.js @@ -2,7 +2,7 @@ * @typedef {object} ReactionsConfig * @property {string} title - Text in text area * @property {string} wrapperBlockSelector - Module holder - * @property {string[]} emojiCodes - unicodes of emoji to buttons + * @property {string[]} emojiCodes - unicodes of emoji to buttons */ @@ -49,10 +49,10 @@ class Reactions { } /** - * Create blocks and give CSS class - * @param {CSSClass} CSSClass - CSS class for block - * @returns {HTMLElement} div - */ + * Create blocks and give CSS class + * @param {CSSClass} CSSClass - CSS class for block + * @returns {HTMLElement} div + */ make(tagName, className) { let div = document.createElement(tagName); @@ -174,7 +174,11 @@ class Reactions { this.nodes.buttonWrapper[i].addEventListener('click', () => { let counter = this.nodes.countBlock[i]; - this.countClicksToButton(this.nodes.buttonWrapper[i],this.nodes.emojiWrapper[i],counter); + this.countClicksToButton( + this.nodes.buttonWrapper[i], + this.nodes.emojiWrapper[i], + counter + ); }); } } @@ -185,7 +189,7 @@ class Reactions { * @param {HTMLElement} emojiWrapper * @param {HTMLElement} counter */ - countClicksToButton(buttonWrapper,emojiWrapper,counter){ + countClicksToButton(buttonWrapper, emojiWrapper, counter){ /** * Find an active button @@ -203,7 +207,11 @@ class Reactions { * If there is no active button, add active CSS class */ if (itemActive === null){ - this.addReaction(buttonWrapper,emojiWrapper,counter); + this.addReaction( + buttonWrapper, + emojiWrapper, + counter + ); }else{ @@ -211,7 +219,11 @@ class Reactions { * If clicked button is active, remove active CSS class */ if(itemActive === buttonWrapper){ - this.removeReaction(buttonWrapper,emojiWrapper,counter); + this.removeReaction( + buttonWrapper, + emojiWrapper, + counter + ); /** * Remove active CSS class for active button and add for clicked button @@ -224,8 +236,17 @@ class Reactions { */ let countActive = wrapperActive.querySelector('.reactions__count'); - this.removeReaction(itemActive,wrapperActive,counter,countActive); - this.addReaction(buttonWrapper,emojiWrapper,counter); + this.removeReaction( + itemActive, + wrapperActive, + counter, + countActive + ); + this.addReaction( + buttonWrapper, + emojiWrapper, + counter + ); } } } @@ -236,7 +257,7 @@ class Reactions { * @param {HTMLElement} emojiWrapper * @param {HTMLElement} counter */ - addReaction(buttonWrapper,emojiWrapper,counter){ + addReaction(buttonWrapper, emojiWrapper, counter){ buttonWrapper.classList.add(Reactions.CSS.activeButtonClass); emojiWrapper.classList.add(Reactions.CSS.activeButtonWrapper); @@ -254,7 +275,7 @@ class Reactions { * @param {HTMLElement} counter * @param {HTMLElement} countActive */ - removeReaction(buttonWrapper,emojiWrapper,counter,countActive){ + removeReaction(buttonWrapper, emojiWrapper, counter, countActive){ buttonWrapper.classList.remove(Reactions.CSS.activeButtonClass); emojiWrapper.classList.remove(Reactions.CSS.activeButtonWrapper); From 1555cee7e43f70a3ef40830a49059befc7b8d9e3 Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Mon, 26 Nov 2018 12:59:12 +0300 Subject: [PATCH 05/10] fixed comments --- reactions.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/reactions.js b/reactions.js index 375eb98..19998ff 100644 --- a/reactions.js +++ b/reactions.js @@ -50,15 +50,16 @@ class Reactions { /** * Create blocks and give CSS class - * @param {CSSClass} CSSClass - CSS class for block - * @returns {HTMLElement} div + * @param {string} tagName + * @param {string} className - CSS class for block + * @returns {HTMLElement} element */ make(tagName, className) { - let div = document.createElement(tagName); + let element = document.createElement(tagName); - div.classList.add(className); + element.classList.add(className); - return div; + return element; } /** @@ -213,12 +214,12 @@ class Reactions { counter ); - }else{ + } else { /** * If clicked button is active, remove active CSS class */ - if(itemActive === buttonWrapper){ + if (itemActive === buttonWrapper){ this.removeReaction( buttonWrapper, emojiWrapper, @@ -228,7 +229,7 @@ class Reactions { /** * Remove active CSS class for active button and add for clicked button */ - }else{ + } else { /** * Count block of active button @@ -287,7 +288,6 @@ class Reactions { /** * If we have an active count block write decreased counter - * @type {string} */ if (countActive !== undefined){ countActive.innerText = this.count; From 96c12c8ce484befffb0e9869f671d1c9287292ad Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Tue, 27 Nov 2018 19:54:49 +0300 Subject: [PATCH 06/10] deleted querySelector --- reactions.js | 97 ++++++++++++++++++---------------------------------- 1 file changed, 33 insertions(+), 64 deletions(-) diff --git a/reactions.js b/reactions.js index 19998ff..bbaf654 100644 --- a/reactions.js +++ b/reactions.js @@ -23,13 +23,16 @@ class Reactions { buttonWrapper: [], button: [], unicode: [], - countBlock: [] + countBlock: [], + itemActive: null, + wrapperActive: null + } this.nodes.unicode = settings.emojiCodes; this.titleText = settings.title; this.appendElementsToWrapper(); - this.count=0; + this.count = 0; } /** @@ -55,7 +58,7 @@ class Reactions { * @returns {HTMLElement} element */ make(tagName, className) { - let element = document.createElement(tagName); + const element = document.createElement(tagName); element.classList.add(className); @@ -158,13 +161,13 @@ class Reactions { * Add emoji to button * @type {string} */ - this.nodes.button[i].innerText = String.fromCodePoint(this.nodes.unicode[i]); + this.nodes.button[i].textContent = String.fromCodePoint(this.nodes.unicode[i]); /** * Get 0 count to countBlock * @type {String} */ - this.nodes.countBlock[i].innerText = '0'; + this.nodes.countBlock[i].textContent = '0'; } @@ -173,13 +176,8 @@ class Reactions { */ for (let i = 0; i < this.nodes.unicode.length; i++) { this.nodes.buttonWrapper[i].addEventListener('click', () => { - let counter = this.nodes.countBlock[i]; - this.countClicksToButton( - this.nodes.buttonWrapper[i], - this.nodes.emojiWrapper[i], - counter - ); + this.countClicksToButton(i); }); } } @@ -190,41 +188,21 @@ class Reactions { * @param {HTMLElement} emojiWrapper * @param {HTMLElement} counter */ - countClicksToButton(buttonWrapper, emojiWrapper, counter){ - - /** - * Find an active button - * @type {HTMLElement} - */ - let itemActive = document.querySelector('.reactions__button--active'); - - /** - * Find an active emojiwrapper - * @type {HTMLElement} - */ - let wrapperActive = document.querySelector('.reactions__emoji-wrapper--active'); + countClicksToButton(i){ /** * If there is no active button, add active CSS class */ - if (itemActive === null){ - this.addReaction( - buttonWrapper, - emojiWrapper, - counter - ); + if (this.nodes.wrapperActive === null){ + this.addReaction(i); } else { /** * If clicked button is active, remove active CSS class */ - if (itemActive === buttonWrapper){ - this.removeReaction( - buttonWrapper, - emojiWrapper, - counter - ); + if (this.nodes.wrapperActive === i){ + this.removeReaction(i); /** * Remove active CSS class for active button and add for clicked button @@ -235,19 +213,13 @@ class Reactions { * Count block of active button * @type {HTMLElement} */ - let countActive = wrapperActive.querySelector('.reactions__count'); - - this.removeReaction( - itemActive, - wrapperActive, - counter, - countActive - ); - this.addReaction( - buttonWrapper, - emojiWrapper, - counter - ); + + this.removeReaction(this.nodes.wrapperActive); + + this.nodes.countBlock[i].textContent = this.count; + + this.addReaction(i); + } } } @@ -258,15 +230,17 @@ class Reactions { * @param {HTMLElement} emojiWrapper * @param {HTMLElement} counter */ - addReaction(buttonWrapper, emojiWrapper, counter){ - buttonWrapper.classList.add(Reactions.CSS.activeButtonClass); - emojiWrapper.classList.add(Reactions.CSS.activeButtonWrapper); + addReaction(i){ + this.nodes.buttonWrapper[i].classList.add(Reactions.CSS.activeButtonClass); + this.nodes.emojiWrapper[i].classList.add(Reactions.CSS.activeButtonWrapper); + this.nodes.itemActive = i; + this.nodes.wrapperActive = i; /** * Increase counter * @type {string} */ - counter.innerText = ++this.count; + this.nodes.countBlock[i].textContent = ++this.count; } /** @@ -276,22 +250,17 @@ class Reactions { * @param {HTMLElement} counter * @param {HTMLElement} countActive */ - removeReaction(buttonWrapper, emojiWrapper, counter, countActive){ - buttonWrapper.classList.remove(Reactions.CSS.activeButtonClass); - emojiWrapper.classList.remove(Reactions.CSS.activeButtonWrapper); + removeReaction(i){ + this.nodes.buttonWrapper[i].classList.remove(Reactions.CSS.activeButtonClass); + this.nodes.emojiWrapper[i].classList.remove(Reactions.CSS.activeButtonWrapper); + this.nodes.itemActive = null; + this.nodes.wrapperActive = null; /** * Decrease counter * @type {string} */ - counter.innerText = --this.count; - - /** - * If we have an active count block write decreased counter - */ - if (countActive !== undefined){ - countActive.innerText = this.count; - } + this.nodes.countBlock[i].textContent = --this.count; } } From 7aaced7ee8101ad056d736ec81700453e1ee1852 Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Tue, 27 Nov 2018 20:28:30 +0300 Subject: [PATCH 07/10] added sel counter --- reactions.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/reactions.js b/reactions.js index bbaf654..6062ed2 100644 --- a/reactions.js +++ b/reactions.js @@ -25,14 +25,13 @@ class Reactions { unicode: [], countBlock: [], itemActive: null, - wrapperActive: null - + wrapperActive: null, + count: [] } this.nodes.unicode = settings.emojiCodes; this.titleText = settings.title; this.appendElementsToWrapper(); - this.count = 0; } /** @@ -117,6 +116,8 @@ class Reactions { */ this.nodes.countBlock[i] = this.make('div', Reactions.CSS.countClicksClass); this.nodes.wrapper.appendChild(this.nodes.countBlock[i]); + + this.nodes.count[i] = '0'; } this.appendElementsToEmojiBlock() @@ -216,8 +217,8 @@ class Reactions { this.removeReaction(this.nodes.wrapperActive); - this.nodes.countBlock[i].textContent = this.count; - + this.nodes.countBlock[i].textContent = parseInt(this.nodes.count[i]); + this.addReaction(i); } @@ -240,7 +241,8 @@ class Reactions { * Increase counter * @type {string} */ - this.nodes.countBlock[i].textContent = ++this.count; + this.nodes.count[i] = parseInt(this.nodes.count[i]) + 1 + this.nodes.countBlock[i].textContent = this.nodes.count[i]; } /** @@ -260,7 +262,8 @@ class Reactions { * Decrease counter * @type {string} */ - this.nodes.countBlock[i].textContent = --this.count; + this.nodes.count[i] = parseInt(this.nodes.count[i]) - 1 + this.nodes.countBlock[i].textContent = this.nodes.count[i]; } } From f9c41a9c372d2ab01d1fb6eb5e4ccd64d782c4fa Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Tue, 27 Nov 2018 20:48:25 +0300 Subject: [PATCH 08/10] deleted useless string --- reactions.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/reactions.js b/reactions.js index 6062ed2..9fa422c 100644 --- a/reactions.js +++ b/reactions.js @@ -177,7 +177,6 @@ class Reactions { */ for (let i = 0; i < this.nodes.unicode.length; i++) { this.nodes.buttonWrapper[i].addEventListener('click', () => { - this.countClicksToButton(i); }); } @@ -217,8 +216,6 @@ class Reactions { this.removeReaction(this.nodes.wrapperActive); - this.nodes.countBlock[i].textContent = parseInt(this.nodes.count[i]); - this.addReaction(i); } From ed89d00c5e516c633d203c2d98826464d79ed9f1 Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Wed, 28 Nov 2018 17:19:46 +0300 Subject: [PATCH 09/10] moved out not DOM elements --- reactions.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/reactions.js b/reactions.js index 9fa422c..d488bf3 100644 --- a/reactions.js +++ b/reactions.js @@ -22,14 +22,13 @@ class Reactions { emojiWrapper: [], buttonWrapper: [], button: [], - unicode: [], countBlock: [], itemActive: null, - wrapperActive: null, - count: [] + wrapperActive: null } - - this.nodes.unicode = settings.emojiCodes; + + this.count = []; + this.unicode = settings.emojiCodes; this.titleText = settings.title; this.appendElementsToWrapper(); } @@ -87,7 +86,7 @@ class Reactions { * Create and append blocks to wrapper * @type {HTMLElement} */ - for (let i = 0; i < this.nodes.unicode.length; i++){ + for (let i = 0; i < this.unicode.length; i++){ /** * Append wrapper to button and count clicks block @@ -117,7 +116,7 @@ class Reactions { this.nodes.countBlock[i] = this.make('div', Reactions.CSS.countClicksClass); this.nodes.wrapper.appendChild(this.nodes.countBlock[i]); - this.nodes.count[i] = '0'; + this.count[i] = '0'; } this.appendElementsToEmojiBlock() @@ -131,7 +130,7 @@ class Reactions { /** * Append emojiwrapper to emojiblock and append button and counter in emojiwrapper */ - for (let i = 0; i < this.nodes.unicode.length; i++){ + for (let i = 0; i < this.unicode.length; i++){ /** * Append buttonWrapper to emojiBlock @@ -162,7 +161,7 @@ class Reactions { * Add emoji to button * @type {string} */ - this.nodes.button[i].textContent = String.fromCodePoint(this.nodes.unicode[i]); + this.nodes.button[i].textContent = String.fromCodePoint(this.unicode[i]); /** * Get 0 count to countBlock @@ -175,7 +174,7 @@ class Reactions { /** * Transfer to counting clicks after click on button */ - for (let i = 0; i < this.nodes.unicode.length; i++) { + for (let i = 0; i < this.unicode.length; i++) { this.nodes.buttonWrapper[i].addEventListener('click', () => { this.countClicksToButton(i); }); @@ -238,8 +237,8 @@ class Reactions { * Increase counter * @type {string} */ - this.nodes.count[i] = parseInt(this.nodes.count[i]) + 1 - this.nodes.countBlock[i].textContent = this.nodes.count[i]; + this.count[i] = parseInt(this.count[i]) + 1 + this.nodes.countBlock[i].textContent = this.count[i]; } /** @@ -259,8 +258,8 @@ class Reactions { * Decrease counter * @type {string} */ - this.nodes.count[i] = parseInt(this.nodes.count[i]) - 1 - this.nodes.countBlock[i].textContent = this.nodes.count[i]; + this.count[i] = parseInt(this.count[i]) - 1 + this.nodes.countBlock[i].textContent = this.count[i]; } } From e2a3db7ca44a924083a122c353d629ec618bb8eb Mon Sep 17 00:00:00 2001 From: overkam <44203987+overkam@users.noreply.github.com> Date: Wed, 28 Nov 2018 18:03:28 +0300 Subject: [PATCH 10/10] deleted itemActive --- reactions.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/reactions.js b/reactions.js index d488bf3..45df7e0 100644 --- a/reactions.js +++ b/reactions.js @@ -22,11 +22,11 @@ class Reactions { emojiWrapper: [], buttonWrapper: [], button: [], - countBlock: [], - itemActive: null, - wrapperActive: null + countBlock: [] } - + + this.itemActive= null; + this.wrapperActive= null; this.count = []; this.unicode = settings.emojiCodes; this.titleText = settings.title; @@ -192,7 +192,7 @@ class Reactions { /** * If there is no active button, add active CSS class */ - if (this.nodes.wrapperActive === null){ + if (this.wrapperActive === null){ this.addReaction(i); } else { @@ -200,7 +200,7 @@ class Reactions { /** * If clicked button is active, remove active CSS class */ - if (this.nodes.wrapperActive === i){ + if (this.wrapperActive === i){ this.removeReaction(i); /** @@ -213,7 +213,7 @@ class Reactions { * @type {HTMLElement} */ - this.removeReaction(this.nodes.wrapperActive); + this.removeReaction(this.wrapperActive); this.addReaction(i); @@ -230,8 +230,7 @@ class Reactions { addReaction(i){ this.nodes.buttonWrapper[i].classList.add(Reactions.CSS.activeButtonClass); this.nodes.emojiWrapper[i].classList.add(Reactions.CSS.activeButtonWrapper); - this.nodes.itemActive = i; - this.nodes.wrapperActive = i; + this.wrapperActive = i; /** * Increase counter @@ -251,8 +250,7 @@ class Reactions { removeReaction(i){ this.nodes.buttonWrapper[i].classList.remove(Reactions.CSS.activeButtonClass); this.nodes.emojiWrapper[i].classList.remove(Reactions.CSS.activeButtonWrapper); - this.nodes.itemActive = null; - this.nodes.wrapperActive = null; + this.wrapperActive = null; /** * Decrease counter