publish v2.2.0

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 2.2.0 (2022-07-15)
+**Closed issues:**
+- easy-self don't work with easy-rcoe attribute #5
+
+**Bugfix:**
+- fix error with attrsDefault for easy-toggler.es 
+
+**Implemented enhancements:**
+- Feature suggestion! Add hooks #6 (new hooks: `onToggle($el)`, `onAdd($el)`, `onRemove($el)`, `onRcoe($el)`)
+
 ## 2.1.0 (2022-06-18)
 **Closed issues:**
 - Delete log in core/index.js #4

README.md

@@ -15,42 +15,74 @@ Simple class switcher on web elements. JavaScript only.
   import easySetup from "easy-toggler";
 
   easySetup({
-      toggle: 'easy-toggle',
-      remove: 'easy-remove',
-      add: 'easy-add',
-      class: 'easy-class',
-      rcoe: 'easy-rcoe',
-      parallel: 'easy-parallel',
-      self: 'easy-self'
+    // html attrs
+    toggle: 'easy-toggle',
+    add: 'easy-add',
+    remove: 'easy-remove',
+    class: 'easy-class',
+    rcoe: 'easy-rcoe',
+    parallel: 'easy-parallel',
+    self: 'easy-self',
+    selfRcoe: 'easy-self-rcoe',
+
+    // Hooks
+    onToggle($el){},
+    onAdd($el){},
+    onRemove($el){},
+    onRcoe($el){},
   });
 </script>
 ```
+or easier:
+```html
+<script type="module">
+  import easySetup from "easy-toggler";
+
+  easySetup();
+</script>
+```
 
 ### UMD (+ jsDelivr)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/easy-toggler@2.1.0/dist/easy-toggler.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/easy-toggler@2.2.0/dist/easy-toggler.min.js"></script>
 ```
 ### CJS
 ```html
 <script type="module">
   const easySetup = require("easy-toggler.cjs");
 
   easySetup({
-      toggle: 'easy-toggle',
-      remove: 'easy-remove',
-      add: 'easy-add',
-      class: 'easy-class',
-      rcoe: 'easy-rcoe',
-      parallel: 'easy-parallel',
-      self: 'easy-self'
+    // html attrs
+    toggle: 'easy-toggle',
+    add: 'easy-add',
+    remove: 'easy-remove',
+    class: 'easy-class',
+    rcoe: 'easy-rcoe',
+    parallel: 'easy-parallel',
+    self: 'easy-self',
+    selfRcoe: 'easy-self-rcoe',
+
+    // Hooks
+    onToggle($el){},
+    onAdd($el){},
+    onRemove($el){},
+    onRcoe($el){},
   });
 </script>
 ```
+or easier:
+```html
+<script type="module">
+  import easySetup from "easy-toggler";
+
+  easySetup();
+</script>
+```
 
 ## Example №1
 When you click the button, the class ```show``` will be added to ```<nav id="main_menu">```
 ```html
-<button data-easy-toggle="#main_menu" data-easy-class="show">Menu</button>
+<button easy-toggle="#main_menu" easy-class="show">Menu</button>
 
 <nav id="main_menu">
     <ul>
@@ -64,10 +96,10 @@ When you click the button, the class ```show``` will be added to ```<nav id="mai
 ```
 
 ## Example №2
-When you click the button, the class  ```open``` will be added to ```<div id="categories" class="dropdown-menu">```. When clicking outside the element area, class ```open``` will be deleted from ```<div id="categories" class="dropdown-menu">```, since we specified the  ```data-easy-rcoe``` attribute for the link.
+When you click the button, the class  ```open``` will be added to ```<div id="categories" class="dropdown-menu">```. When clicking outside the element area, class ```open``` will be deleted from ```<div id="categories" class="dropdown-menu">```, since we specified the  ```easy-rcoe``` attribute for the link.
 ```html
 <div class="dropdown">
-    <a href="#" data-easy-toggle="#categories" data-easy-class="open" data-easy-rcoe>Categories</a>
+    <a href="#" easy-toggle="#categories" easy-class="open" easy-rcoe>Categories</a>
 
     <div id="categories" class="dropdown-menu">
         <a href="#">HTML</a>
@@ -81,12 +113,22 @@ When you click the button, the class  ```open``` will be added to ```<div id="ca
 
 **EasyToggler.js** only allows you to conveniently manage the element classes. CSS styles (behavior of elements with certain classes) must be specified independently.
 
-#### Specificity of attributes
+## Attributes
 - **easy-toggle** - toggle class for target element
 - **easy-add** - add class for target element
 - **easy-remove** - remove class for target element
 - **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
+- **easy-self-rcoe** - indicate whether it is necessary to delete the class if another is pressed (for self elements)
+
+
+## Hooks
+- **onToggle($el)** - hook before toggle action
+- **onAdd($el)** - hook before add action
+- **onRemove($el)** - hook before remove action
+- **onRcoe($el)** - hook before rcoe action
 
+## Contributing
+The author will be grateful to all developers for any suggestions to improve the plugin. Fork and submit pull requests. Thank you!

__test__/easySetup.test.js

@@ -6,14 +6,10 @@ import testDom from './test-dom';
 import easySetup from '../dist/easy-toggler.es';
 
 easySetup({
-    toggle: 'easy-toggle',
-    remove: 'easy-remove',
-    add: 'easy-add',
-    class: 'easy-class',
-    rcoe: 'easy-rcoe',
-    parallel: 'easy-parallel',
-    self: 'easy-self',
-    selfRcoe: 'easy-self-rcoe',
+    remove: 'data-easy-remove',
+    onRemove($el) {
+        console.log('remove hook!', $el.id);
+    }
 });
 
 beforeAll(() => {
@@ -66,3 +62,10 @@ test('test easy-self after click other button', () => {
     document.getElementById('dropdown').click();
     expect(btnSelf.classList.contains('btn-active')).toBe(false);
 });
+
+test('test easy-self-rcoe after click other button', () => {
+    const btnSelfRcoe = document.getElementById('btnSelfRcoe');
+    btnSelfRcoe.click();
+    document.getElementById('dropdown').click();
+    expect(btnSelfRcoe.classList.contains('btn-active')).toBe(false);
+});

__test__/test-dom.js

@@ -29,7 +29,7 @@ function testDom() {
         <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>
+            <button id="closeModal" data-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>
@@ -55,6 +55,16 @@ function testDom() {
             <a href="#">Item 2</a>
             <a href="#">Item 3</a>
         </div>
+
+        <button id="btnSelfRcoe" easy-toggle="#dropdownSelfRcoe" easy-class="active-menu" easy-rcoe easy-self="btn-active" easy-self-rcoe>
+            Button with self & rcoe
+        </button>
+
+        <div id="dropdownSelfRcoe">
+            <a href="#">Item 1</a>
+            <a href="#">Item 2</a>
+            <a href="#">Item 3</a>
+        </div>
     `
 }
 

dist/easy-toggler.cjs

@@ -1,11 +1,13 @@
 /*!
- * EasyToggler v2.1.0 (https://github.com/rah-emil/easy-toggler#readme)
+ * EasyToggler v2.2.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) => {
+  attrs.onToggle($toggler);
+
   const _target = $toggler.getAttribute(attrs.toggle);
 
   document.querySelectorAll(`[${attrs.toggle}]`).forEach(easyBlock => {
@@ -29,6 +31,8 @@ const toggle = ($toggler, attrs) => {
 };
 
 const add = ($add, attrs) => {
+  attrs.onAdd($add);
+
   const _target = $add.getAttribute(attrs.add);
 
   const _class = $add.getAttribute(attrs.class);
@@ -45,6 +49,8 @@ const add = ($add, attrs) => {
 };
 
 const remove = ($remove, attrs) => {
+  attrs.onRemove($remove);
+
   const _target = $remove.getAttribute(attrs.remove);
 
   const _class = $remove.getAttribute(attrs.class);
@@ -60,6 +66,25 @@ const remove = ($remove, attrs) => {
   }
 };
 
+const rcoes = (e, attrs) => {
+  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)) {
+      attrs.onRcoe($rcoe);
+      document.querySelector(block)?.classList.remove(block_class);
+
+      const _selfClass = $rcoe.getAttribute(attrs.self);
+
+      if (_selfClass) {
+        $rcoe.classList.remove(_selfClass);
+      }
+    }
+  });
+};
+
 function easyTogglerHandler(e, attrs) {
   const $toggler = e.target.closest(`[${attrs.toggle}]`);
   const $remove = e.target.closest(`[${attrs.remove}]`);
@@ -81,21 +106,7 @@ function easyTogglerHandler(e, attrs) {
   }
 
   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)) {
-        document.querySelector(block)?.classList.remove(block_class);
-
-        const _selfClass = $rcoe.getAttribute(attrs.self);
-
-        if (_selfClass) {
-          $rcoe.classList.remove(_selfClass);
-        }
-      }
-    });
+    rcoes(e, attrs);
   }
 }
 
@@ -106,7 +117,18 @@ const attrsDefault = {
   class: 'easy-class',
   rcoe: 'easy-rcoe',
   parallel: 'easy-parallel',
-  self: 'easy-self'
+  self: 'easy-self',
+  selfRcoe: 'easy-self-rcoe',
+
+  // Hooks
+  onToggle($el) {},
+
+  onAdd($el) {},
+
+  onRemove($el) {},
+
+  onRcoe($el) {}
+
 };
 
 /**
@@ -116,11 +138,12 @@ const attrsDefault = {
  */
 
 const easySetup = params => {
-  const customAttrs = {
-    attrsDefault,
+  const customAttrs = { ...attrsDefault,
     ...params
   };
-  document.addEventListener('click', e => easyTogglerHandler(e, customAttrs));
+  document.addEventListener('click', e => {
+    easyTogglerHandler(e, customAttrs);
+  });
 };
 
 module.exports = easySetup;