easy-toggler - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

__test__/easySetup.test.js

@@ -6,3 +6,3 @@ /**
 import testDom from './test-dom';
-import easySetup from '../dist/easy-toggler.es';
+import easySetup from '../dist/easy-toggler';
 
@@ -9,0 +9,0 @@ easySetup({

dist/easy-toggler.js

 /*!
- * EasyToggler v2.2.2 (https://github.com/rah-emil/easy-toggler#readme)
+ * EasyToggler v2.2.3 (https://github.com/rah-emil/easy-toggler#readme)
  * Copyright 2022 Rah Emil <[e-mail]>
  * Licensed under MIT (https://github.com/rah-emil/easy-toggler/blob/master/LICENSE)
  */
-(function (factory) {
-    typeof define === 'function' && define.amd ? define(factory) :
-    factory();
-})((function () { 'use strict';
+const toggle = ($toggler, attrs) => {
+  attrs.onToggle($toggler);
 
-    const toggle = ($toggler, attrs) => {
-      attrs.onToggle($toggler);
+  const _target = $toggler.getAttribute(attrs.toggle);
 
-      const _target = $toggler.getAttribute(attrs.toggle);
+  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.querySelectorAll(`[${attrs.toggle}]`).forEach(easyBlock => {
-        if (!easyBlock.hasAttribute(attrs.parallel) && easyBlock !== $toggler) {
-          document.querySelector(easyBlock.getAttribute(attrs.toggle)).classList.remove(easyBlock.getAttribute(attrs.class));
-
-          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);
+        $toggler.classList.remove(_selfClass);
       }
-    };
+    }
+  });
+  document.querySelector(_target)?.classList.toggle($toggler.getAttribute(attrs.class));
 
-    const add = ($add, attrs) => {
-      attrs.onAdd($add);
+  const _selfClass = $toggler.getAttribute(attrs.self);
 
-      const _target = $add.getAttribute(attrs.add);
+  if (_selfClass) {
+    $toggler.classList.toggle(_selfClass);
+  }
+};
 
-      const _class = $add.getAttribute(attrs.class);
+const add = ($add, attrs) => {
+  attrs.onAdd($add);
 
-      document.querySelectorAll(_target).forEach(easyBlock => {
-        easyBlock.classList.add(_class);
-      });
+  const _target = $add.getAttribute(attrs.add);
 
-      const _selfClass = $add.getAttribute(attrs.self);
+  const _class = $add.getAttribute(attrs.class);
 
-      if (_selfClass) {
-        $add.classList.add(_selfClass);
-      }
-    };
+  document.querySelectorAll(_target).forEach(easyBlock => {
+    easyBlock.classList.add(_class);
+  });
 
-    const remove = ($remove, attrs) => {
-      attrs.onRemove($remove);
+  const _selfClass = $add.getAttribute(attrs.self);
 
-      const _target = $remove.getAttribute(attrs.remove);
+  if (_selfClass) {
+    $add.classList.add(_selfClass);
+  }
+};
 
-      const _class = $remove.getAttribute(attrs.class);
+const remove = ($remove, attrs) => {
+  attrs.onRemove($remove);
 
-      document.querySelectorAll(_target).forEach(easyBlock => {
-        easyBlock.classList.remove(_class);
-      });
+  const _target = $remove.getAttribute(attrs.remove);
 
-      const _selfClass = $remove.getAttribute(attrs.self);
+  const _class = $remove.getAttribute(attrs.class);
 
-      if (_selfClass) {
-        $remove.classList.remove(_selfClass);
-      }
-    };
+  document.querySelectorAll(_target).forEach(easyBlock => {
+    easyBlock.classList.remove(_class);
+  });
 
-    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);
+  const _selfClass = $remove.getAttribute(attrs.self);
 
-        if (!e.target.closest(block)) {
-          attrs.onRcoe($rcoe);
-          document.querySelector(block)?.classList.remove(block_class);
+  if (_selfClass) {
+    $remove.classList.remove(_selfClass);
+  }
+};
 
-          const _selfClass = $rcoe.getAttribute(attrs.self);
+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 (_selfClass) {
-            $rcoe.classList.remove(_selfClass);
-          }
-        }
-      });
-    };
+    if (!e.target.closest(block)) {
+      attrs.onRcoe($rcoe);
+      document.querySelector(block)?.classList.remove(block_class);
 
-    function easyTogglerHandler(e, attrs) {
-      const $toggler = e.target.closest(`[${attrs.toggle}]`);
-      const $remove = e.target.closest(`[${attrs.remove}]`);
-      const $add = e.target.closest(`[${attrs.add}]`);
+      const _selfClass = $rcoe.getAttribute(attrs.self);
 
-      if ($toggler) {
-        e.preventDefault();
-        toggle($toggler, attrs);
+      if (_selfClass) {
+        $rcoe.classList.remove(_selfClass);
       }
+    }
+  });
+};
 
-      if ($remove) {
-        e.preventDefault();
-        remove($remove, attrs);
-      }
+function easyTogglerHandler(e, attrs) {
+  const $toggler = e.target.closest(`[${attrs.toggle}]`);
+  const $remove = e.target.closest(`[${attrs.remove}]`);
+  const $add = e.target.closest(`[${attrs.add}]`);
 
-      if ($add) {
-        e.preventDefault();
-        add($add, attrs);
-      }
+  if ($toggler) {
+    e.preventDefault();
+    toggle($toggler, attrs);
+  }
 
-      if (!$toggler && !$remove && !$add) {
-        rcoes(e, attrs);
-      }
-    }
+  if ($remove) {
+    e.preventDefault();
+    remove($remove, attrs);
+  }
 
-    const attrsDefault = {
-      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',
+  if ($add) {
+    e.preventDefault();
+    add($add, attrs);
+  }
 
-      // Hooks
-      onToggle($el) {},
+  if (!$toggler && !$remove && !$add) {
+    rcoes(e, attrs);
+  }
+}
 
-      onAdd($el) {},
+const attrsDefault = {
+  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',
 
-      onRemove($el) {},
+  // Hooks
+  onToggle($el) {},
 
-      onRcoe($el) {}
+  onAdd($el) {},
 
-    };
+  onRemove($el) {},
 
-    document.addEventListener('DOMContentLoaded', () => {
-      document.addEventListener('click', e => {
-        easyTogglerHandler(e, attrsDefault);
-      });
-    });
+  onRcoe($el) {}
 
-}));
+};
+
+/**
+ * Setup easyToggler plugin
+ * with custom attributes
+ * @param params<Object>
+ */
+
+const easySetup = params => {
+  const customAttrs = { ...attrsDefault,
+    ...params
+  };
+  document.addEventListener('click', e => {
+    easyTogglerHandler(e, customAttrs);
+  });
+};
+
+export { easySetup as default };
 //# sourceMappingURL=easy-toggler.js.map

dist/easy-toggler.min.js

 /*!
- * EasyToggler v2.2.2 (https://github.com/rah-emil/easy-toggler#readme)
+ * EasyToggler v2.2.3 (https://github.com/rah-emil/easy-toggler#readme)
  * Copyright 2022 Rah Emil <[e-mail]>
  * Licensed under MIT (https://github.com/rah-emil/easy-toggler/blob/master/LICENSE)
  */
-!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e,t){const s=e.target.closest(`[${t.toggle}]`),o=e.target.closest(`[${t.remove}]`),l=e.target.closest(`[${t.add}]`);s&&(e.preventDefault(),((e,t)=>{t.onToggle(e);const s=e.getAttribute(t.toggle);document.querySelectorAll(`[${t.toggle}]`).forEach((s=>{if(!s.hasAttribute(t.parallel)&&s!==e){document.querySelector(s.getAttribute(t.toggle)).classList.remove(s.getAttribute(t.class));const o=e.getAttribute(t.self);o&&e.classList.remove(o)}})),document.querySelector(s)?.classList.toggle(e.getAttribute(t.class));const o=e.getAttribute(t.self);o&&e.classList.toggle(o)})(s,t)),o&&(e.preventDefault(),((e,t)=>{t.onRemove(e);const s=e.getAttribute(t.remove),o=e.getAttribute(t.class);document.querySelectorAll(s).forEach((e=>{e.classList.remove(o)}));const l=e.getAttribute(t.self);l&&e.classList.remove(l)})(o,t)),l&&(e.preventDefault(),((e,t)=>{t.onAdd(e);const s=e.getAttribute(t.add),o=e.getAttribute(t.class);document.querySelectorAll(s).forEach((e=>{e.classList.add(o)}));const l=e.getAttribute(t.self);l&&e.classList.add(l)})(l,t)),s||o||l||((e,t)=>{const s=document.querySelectorAll(`[${t.rcoe}]`);Array.from(s).forEach((s=>{let o=s.getAttribute(t.toggle),l=s.getAttribute(t.class);if(!e.target.closest(o)){t.onRcoe(s),document.querySelector(o)?.classList.remove(l);const e=s.getAttribute(t.self);e&&s.classList.remove(e)}}))})(e,t)}const t={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",onToggle(e){},onAdd(e){},onRemove(e){},onRcoe(e){}};document.addEventListener("DOMContentLoaded",(()=>{document.addEventListener("click",(s=>{e(s,t)}))}))}));
+function e(e,t){const s=e.target.closest(`[${t.toggle}]`),o=e.target.closest(`[${t.remove}]`),l=e.target.closest(`[${t.add}]`);s&&(e.preventDefault(),((e,t)=>{t.onToggle(e);const s=e.getAttribute(t.toggle);document.querySelectorAll(`[${t.toggle}]`).forEach((s=>{if(!s.hasAttribute(t.parallel)&&s!==e){document.querySelector(s.getAttribute(t.toggle)).classList.remove(s.getAttribute(t.class));const o=e.getAttribute(t.self);o&&e.classList.remove(o)}})),document.querySelector(s)?.classList.toggle(e.getAttribute(t.class));const o=e.getAttribute(t.self);o&&e.classList.toggle(o)})(s,t)),o&&(e.preventDefault(),((e,t)=>{t.onRemove(e);const s=e.getAttribute(t.remove),o=e.getAttribute(t.class);document.querySelectorAll(s).forEach((e=>{e.classList.remove(o)}));const l=e.getAttribute(t.self);l&&e.classList.remove(l)})(o,t)),l&&(e.preventDefault(),((e,t)=>{t.onAdd(e);const s=e.getAttribute(t.add),o=e.getAttribute(t.class);document.querySelectorAll(s).forEach((e=>{e.classList.add(o)}));const l=e.getAttribute(t.self);l&&e.classList.add(l)})(l,t)),s||o||l||((e,t)=>{const s=document.querySelectorAll(`[${t.rcoe}]`);Array.from(s).forEach((s=>{let o=s.getAttribute(t.toggle),l=s.getAttribute(t.class);if(!e.target.closest(o)){t.onRcoe(s),document.querySelector(o)?.classList.remove(l);const e=s.getAttribute(t.self);e&&s.classList.remove(e)}}))})(e,t)}const t={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",onToggle(e){},onAdd(e){},onRemove(e){},onRcoe(e){}},s=s=>{const o={...t,...s};document.addEventListener("click",(t=>{e(t,o)}))};export{s as default};
 //# sourceMappingURL=easy-toggler.min.js.map

package.json

 {
   "name": "easy-toggler",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Simple class switcher on web elements. JavaScript only.",
   "main": "dist/easy-toggler.cjs",
-  "module": "dist/easy-toggler.es.js",
-  "jsdelivr": "dist/easy-toggler.umd.min.js",
-  "umd:main": "dist/easy-toggler.umd.js",
-  "cdn": "dist/easy-toggler.umd.min.js",
+  "module": "dist/easy-toggler.js",
+  "jsdelivr": "dist/easy-toggler.iife.min.js",
+  "umd:main": "dist/easy-toggler.iife.js",
+  "cdn": "dist/easy-toggler.iife.min.js",
   "scripts": {
     "test": "jest",
     "cover": "jest --coverage",
-    "lint": "eslint src/easy-toggler.es.js src/easy-toggler.umd.js",
+    "lint": "eslint src/easy-toggler.js src/easy-toggler.iife.js",
     "build": "rollup --config --sourcemap"
@@ -15,0 +15,0 @@ },

README.md

@@ -7,6 +7,23 @@ # EasyToggler.js 🔗🚀
 ![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)
+[![](https://data.jsdelivr.com/v1/package/npm/easy-toggler/badge?style=rounded)](https://www.jsdelivr.com/package/npm/easy-toggler)
 
 Simple class switcher on web elements. JavaScript only.
 
+![](readme/mem.png)
+
+## Use a plugin instead of JavaScript
+```html
+<!-- js: menu.classList.toggle('active') -->
+<button easy-toggle="#target" easy-class="active">Toggle class</button>
+
+<!-- js: menu.classList.add('active') -->
+<button easy-add="#target" easy-class="active">Add class</button>
+
+<!-- js: menu.classList.remove('active') -->
+<button easy-remove="#target" easy-class="active">Remove class</button>
+
+<!-- js: menu.classList.toggle('active') + work with e.closest() -->
+<button easy-toggle="#target" easy-class="active" easy-rcoe>Removing a class if we click on an empty space</button>
+```
+
 ## Import EasyToggler
@@ -41,3 +58,2 @@ ### ES
   import easySetup from "easy-toggler";
-
   easySetup();
@@ -47,5 +63,5 @@ </script>
 
-### UMD (+ jsDelivr)
+### CDN jsDelivr
 ```html
-<script src="https://cdn.jsdelivr.net/npm/easy-toggler@2.2.0/dist/easy-toggler.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/easy-toggler@2.2.3/dist/easy-toggler.iife.min.js"></script>
 ```
@@ -55,3 +71,3 @@ ### CJS
 <script type="module">
-  const easySetup = require("easy-toggler.cjs");
+  const easySetup = require("easy-toggler");
 
@@ -80,4 +96,3 @@ easySetup({
 <script type="module">
-  import easySetup from "easy-toggler";
-
+  const easySetup = require("easy-toggler");
   easySetup();
@@ -87,3 +102,6 @@ </script>
 
-## Example №1
+## Demo
+Visit demo page: [rah-emil.ru/easy-toggler](https://rah-emil.ru/easy-toggler)
+
+### Example №1
 When you click the button, the class ```show``` will be added to ```<nav id="main_menu">```
@@ -104,3 +122,3 @@ ```html
 
-## Example №2
+### 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  ```easy-rcoe``` attribute for the link.
@@ -139,4 +157,1 @@ ```html
 - **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!

rollup.config.js

@@ -20,4 +20,4 @@ import path from 'path';
 
-const pathCore = path.join(__dirname, 'src/easy-toggler.es.js');
-const pathCoreUmd = path.join(__dirname, 'src/easy-toggler.umd.js');
+const pathCore = path.join(__dirname, 'src/easy-toggler.js');
+const pathCoreIife = path.join(__dirname, 'src/easy-toggler.iife.js');
 
@@ -29,4 +29,4 @@ const bundles = [
             banner: getHeader(),
-            file: path.join(__dirname, 'dist/easy-toggler.es.js'),
-            format: 'esm',
+            file: path.join(__dirname, 'dist/easy-toggler.js'),
+            format: 'es',
         },
@@ -38,22 +38,20 @@ },
             banner: getHeader(),
-            file: path.join(__dirname, 'dist/easy-toggler.es.min.js'),
-            format: 'esm',
+            file: path.join(__dirname, 'dist/easy-toggler.min.js'),
+            format: 'es',
         },
     },
     {
-        input: pathCoreUmd,
+        input: pathCoreIife,
         output: {
             banner: getHeader(),
-            name: 'easy-toggler',
-            file: path.join(__dirname, 'dist/easy-toggler.js'),
-            format: 'umd',
+            file: path.join(__dirname, 'dist/easy-toggler.iife.js'),
+            format: 'iife',
         },
     },
     {
-        input: pathCoreUmd,
+        input: pathCoreIife,
         output: {
             banner: getHeader(),
-            name: 'easy-toggler',
-            file: path.join(__dirname, 'dist/easy-toggler.min.js'),
-            format: 'umd',
+            file: path.join(__dirname, 'dist/easy-toggler.iife.min.js'),
+            format: 'iife',
         },
@@ -60,0 +58,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

860575

increased by1031.96%

Number of package files

32

increased by6.67%

Number of lines in readme file

150

increased by11.11%

Worsened metrics

Lines of code

710

decreased by-0.56%

No dependency changes