v 2.1.0

rah-emil · Jun 18, 2022 · 00eae22 · 00eae22
1 parent 13943f9
commit 00eae22
Show file tree

Hide file tree

Showing 20 changed files with 323 additions and 268 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 2.1.0 (2022-06-18)
+**Closed issues:**
+- Delete log in core/index.js #4
+- Дополнительный функционал #2 (self-easy)
+
+**Implemented enhancements:**
+- code refactoring
+
 ## 2.0.0 (2022-06-16)
 **Closed issues:**
 - fix "Don't work remove class after added data-easy-parallel #3"

diff --git a/README.md b/README.md
@@ -1,4 +1,11 @@
 # EasyToggler.js 🔗🚀
+![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCj5-dlnKYZ7O2HIYgP8urqw?style=flat)
+![GitHub](https://img.shields.io/github/license/rah-emil/easy-toggler)
+![GitHub all releases](https://img.shields.io/github/downloads/rah-emil/easy-toggler/total)
+![GitHub issues](https://img.shields.io/github/issues/rah-emil/easy-toggler)
+![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/rah-emil/easy-toggler)
+![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hm/rah-emil/easy-toggler)
+
 Simple class switcher on web elements. JavaScript only.
 
 ## Import EasyToggler
@@ -14,13 +21,14 @@ Simple class switcher on web elements. JavaScript only.
       class: 'easy-class',
       rcoe: 'easy-rcoe',
       parallel: 'easy-parallel',
+      self: 'easy-self'
   });
 </script>
 ```
 
 ### UMD (+ jsDelivr)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/easy-toggler@2.0.0/dist/easy-toggler.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/easy-toggler@2.1.0/dist/easy-toggler.min.js"></script>
 ```
 ### CJS
 ```html
@@ -34,6 +42,7 @@ Simple class switcher on web elements. JavaScript only.
       class: 'easy-class',
       rcoe: 'easy-rcoe',
       parallel: 'easy-parallel',
+      self: 'easy-self'
   });
 </script>
 ```
@@ -79,4 +88,5 @@ When you click the button, the class  ```open``` will be added to ```<div id="ca
 - **easy-class** - specifying the class for the target element
 - **easy-rcoe** - indicate whether it is necessary to delete the class if another is pressed
 - **easy-parallel** - so that elements can open parallel to each other
+- **easy-self** - add a class to the clicked button
 
diff --git a/__test__/easySetup.test.js b/__test__/easySetup.test.js
@@ -2,7 +2,8 @@
  * @jest-environment jsdom
  * @jest-environment-options {"url": "https://jestjs.io/"}
  */
-const easySetup = require('./../dist/easy-toggler.cjs');
+import testDom from './test-dom';
+import easySetup from '../dist/easy-toggler.es';
 
 easySetup({
     toggle: 'easy-toggle',
@@ -11,46 +12,12 @@ easySetup({
     class: 'easy-class',
     rcoe: 'easy-rcoe',
     parallel: 'easy-parallel',
+    self: 'easy-self',
+    selfRcoe: 'easy-self-rcoe',
 });
 
 beforeAll(() => {
-    document.body.innerHTML = `
-        <button id="btn1" easy-toggle="#dropdown" easy-class="active">Menu 1</button>
-
-        <div id="dropdown">
-            <a href="#">Item 1</a>
-            <a href="#">Item 2</a>
-            <a href="#">Item 3</a>
-        </div>
-
-        <button id="btn2" easy-toggle="#dropdown2" easy-class="active-menu" easy-rcoe>Menu 2</button>
-
-        <div id="dropdown2" class="active-menu">
-            <a href="#">Item 1</a>
-            <a href="#">Item 2</a>
-            <a href="#">Item 3</a>
-        </div>
-
-        <button id="btn3" easy-toggle="#dropdown3" easy-class="active-menu" easy-rcoe easy-parallel>
-            Menu 3
-        </button>
-
-        <div id="dropdown3" class="active-menu">
-            <a href="#">Item 1</a>
-            <a href="#">Item 2</a>
-            <a href="#">Item 3</a>
-        </div>
-
-        <button id="showModal" easy-add="#modal_1" easy-class="show" easy-rcoe>Modal show!</button>
-
-        <div id="modal_1">
-            <button id="closeModal" easy-remove="#modal_1" easy-class="show">Close modal</button>
-            <div>
-                <h3>Modal window</h3>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita reiciendis, earum cupiditate obcaecati vel in vitae officia nihil praesentium id, quod quasi repellat maxime fugiat eos ipsa. Consectetur, aperiam dignissimos!</p>
-            </div>
-        </div>
-    `;
+    document.body.innerHTML = testDom();
 })
 
 test('test easy-toggle', () => {
@@ -87,3 +54,15 @@ test('test easy-remove', () => {
     const modal_1 = document.getElementById('modal_1');
     expect(modal_1.classList.contains('show')).toBe(false);
 });
+
+test('test easy-self', () => {
+    const btnSelf = document.getElementById('btnSelf');
+    btnSelf.click();
+    expect(btnSelf.classList.contains('btn-active')).toBe(true);
+});
+
+test('test easy-self after click other button', () => {
+    const btnSelf = document.getElementById('btnSelf');
+    document.getElementById('dropdown').click();
+    expect(btnSelf.classList.contains('btn-active')).toBe(false);
+});
diff --git a/__test__/test-dom.js b/__test__/test-dom.js
@@ -0,0 +1,61 @@
+function testDom() {
+    return `
+        <button id="btn1" easy-toggle="#dropdown" easy-class="active">Menu 1</button>
+
+        <div id="dropdown">
+            <a href="#">Item 1</a>
+            <a href="#">Item 2</a>
+            <a href="#">Item 3</a>
+        </div>
+
+        <button id="btn2" easy-toggle="#dropdown2" easy-class="active-menu" easy-rcoe>Menu 2</button>
+
+        <div id="dropdown2" class="active-menu">
+            <a href="#">Item 1</a>
+            <a href="#">Item 2</a>
+            <a href="#">Item 3</a>
+        </div>
+
+        <button id="btn3" easy-toggle="#dropdown3" easy-class="active-menu" easy-rcoe easy-parallel>
+            Menu 3
+        </button>
+
+        <div id="dropdown3" class="active-menu">
+            <a href="#">Item 1</a>
+            <a href="#">Item 2</a>
+            <a href="#">Item 3</a>
+        </div>
+
+        <button id="showModal" easy-add="#modal_1" easy-class="show" easy-rcoe>Modal show!</button>
+
+        <div id="modal_1">
+            <button id="closeModal" easy-remove="#modal_1" easy-class="show">Close modal</button>
+            <div>
+                <h3>Modal window</h3>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita reiciendis, earum cupiditate obcaecati vel in vitae officia nihil praesentium id, quod quasi repellat maxime fugiat eos ipsa. Consectetur, aperiam dignissimos!</p>
+            </div>
+        </div>
+
+        <button id="btn3" easy-toggle="#dropdown3" easy-class="active-menu" easy-rcoe easy-parallel>
+            Menu 3
+        </button>
+
+        <div id="dropdown3" class="active-menu">
+            <a href="#">Item 1</a>
+            <a href="#">Item 2</a>
+            <a href="#">Item 3</a>
+        </div>
+
+        <button id="btnSelf" easy-toggle="#dropdownSelf" easy-class="active-menu" easy-rcoe easy-self="btn-active">
+            Button with self
+        </button>
+
+        <div id="dropdownSelf">
+            <a href="#">Item 1</a>
+            <a href="#">Item 2</a>
+            <a href="#">Item 3</a>
+        </div>
+    `
+}
+
+export default testDom;
diff --git a/dist/easy-toggler.cjs b/dist/easy-toggler.cjs
@@ -1,97 +1,98 @@
 /*!
- * EasyToggler v2.0.0 (https://github.com/rah-emil/easy-toggler#readme)
+ * EasyToggler v2.1.0 (https://github.com/rah-emil/easy-toggler#readme)
  * Copyright 2022 Rah Emil <013131@mail.ru>
  * Licensed under MIT (https://github.com/rah-emil/easy-toggler/blob/master/LICENSE)
  */
 'use strict';
 
 const toggle = ($toggler, attrs) => {
-  $toggler._target = $toggler.el.getAttribute(attrs.toggle);
-  $toggler._class = $toggler.el.getAttribute(attrs.class);
+  const _target = $toggler.getAttribute(attrs.toggle);
 
-  try {
-    document.querySelectorAll(`[${attrs.toggle}]`).forEach(easyBlock => {
-      if (!easyBlock.hasAttribute(attrs.parallel) && easyBlock !== $toggler.el) {
-        document.querySelector(easyBlock.getAttribute(attrs.toggle)).classList.remove(easyBlock.getAttribute(attrs.class));
-      } // document.querySelector(easyBlock.getAttribute(attrs.toggle)).classList.remove(easyBlock.getAttribute(attrs.class));
+  document.querySelectorAll(`[${attrs.toggle}]`).forEach(easyBlock => {
+    if (!easyBlock.hasAttribute(attrs.parallel) && easyBlock !== $toggler) {
+      document.querySelector(easyBlock.getAttribute(attrs.toggle)).classList.remove(easyBlock.getAttribute(attrs.class));
 
-    });
-    document.querySelector($toggler._target).classList.toggle($toggler._class);
-  } catch (ey_error) {
-    console.warn(`easyToggler | not found '${$toggler._target}'`);
+      const _selfClass = $toggler.getAttribute(attrs.self);
+
+      if (_selfClass) {
+        $toggler.classList.remove(_selfClass);
+      }
+    }
+  });
+  document.querySelector(_target)?.classList.toggle($toggler.getAttribute(attrs.class));
+
+  const _selfClass = $toggler.getAttribute(attrs.self);
+
+  if (_selfClass) {
+    $toggler.classList.toggle(_selfClass);
   }
 };
 
 const add = ($add, attrs) => {
-  $add._target = $add.el.getAttribute(attrs.add);
-  $add._class = $add.el.getAttribute(attrs.class);
+  const _target = $add.getAttribute(attrs.add);
 
-  try {
-    document.querySelectorAll($add._target).forEach(easyBlock => {
-      easyBlock.classList.add($add._class);
-    });
-  } catch (ey_error) {
-    console.warn(`easyToggler | not found '${$add._target}' for add class`);
+  const _class = $add.getAttribute(attrs.class);
+
+  document.querySelectorAll(_target).forEach(easyBlock => {
+    easyBlock.classList.add(_class);
+  });
+
+  const _selfClass = $add.getAttribute(attrs.self);
+
+  if (_selfClass) {
+    $add.classList.add(_selfClass);
   }
 };
 
 const remove = ($remove, attrs) => {
-  $remove._target = $remove.el.getAttribute(attrs.remove);
-  $remove._class = $remove.el.getAttribute(attrs.class);
+  const _target = $remove.getAttribute(attrs.remove);
 
-  try {
-    document.querySelectorAll($remove._target).forEach(easyBlock => {
-      easyBlock.classList.remove($remove._class);
-    });
-  } catch (ey_error) {
-    console.warn(`easyToggler | not found '${$remove._target}' for remove class`);
+  const _class = $remove.getAttribute(attrs.class);
+
+  document.querySelectorAll(_target).forEach(easyBlock => {
+    easyBlock.classList.remove(_class);
+  });
+
+  const _selfClass = $remove.getAttribute(attrs.self);
+
+  if (_selfClass) {
+    $remove.classList.remove(_selfClass);
   }
 };
 
 function easyTogglerHandler(e, attrs) {
-  const $toggler = {
-    el: e.target.closest(`[${attrs.toggle}]`),
-    _class: null,
-    _target: null
-  };
-  const $remove = {
-    el: e.target.closest(`[${attrs.remove}]`),
-    _class: null,
-    _target: null
-  };
-  const $add = {
-    el: e.target.closest(`[${attrs.add}]`),
-    _class: null,
-    _target: null
-  };
+  const $toggler = e.target.closest(`[${attrs.toggle}]`);
+  const $remove = e.target.closest(`[${attrs.remove}]`);
+  const $add = e.target.closest(`[${attrs.add}]`);
 
-  if ($toggler.el) {
+  if ($toggler) {
     e.preventDefault();
     toggle($toggler, attrs);
   }
 
-  if ($remove.el) {
+  if ($remove) {
     e.preventDefault();
     remove($remove, attrs);
   }
 
-  if ($add.el) {
+  if ($add) {
     e.preventDefault();
     add($add, attrs);
   }
 
-  if (!$toggler.el && !$remove.el && !$add.el) {
-    let $rcoes = document.querySelectorAll(`[${attrs.rcoe}]`);
-    console.log('NOT OUR NODE');
+  if (!$toggler && !$remove && !$add) {
+    const $rcoes = document.querySelectorAll(`[${attrs.rcoe}]`);
     Array.from($rcoes).forEach($rcoe => {
       let block = $rcoe.getAttribute(attrs.toggle);
       let block_class = $rcoe.getAttribute(attrs.class);
 
       if (!e.target.closest(block)) {
-        try {
-          document.querySelector(block).classList.remove(block_class);
-        } catch (ey_error) {
-          console.warn(`easyToggler | not found '${block}'`);
+        document.querySelector(block)?.classList.remove(block_class);
+
+        const _selfClass = $rcoe.getAttribute(attrs.self);
+
+        if (_selfClass) {
+          $rcoe.classList.remove(_selfClass);
         }
       }
     });
@@ -104,7 +105,8 @@ const attrsDefault = {
   remove: 'easy-remove',
   class: 'easy-class',
   rcoe: 'easy-rcoe',
-  parallel: 'easy-parallel'
+  parallel: 'easy-parallel',
+  self: 'easy-self'
 };
 
 /**