├── .gitignore ├── COPYING ├── LICENSE.txt ├── README.md ├── dist └── togglr.min.js ├── examples ├── accordion.html ├── dismiss.html ├── index.html ├── modal.html ├── tabs.html └── toggle.html ├── package.json └── src └── togglr.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /COPYING: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright © 2016 Stefano Peloso 2 | This work is free. You can redistribute it and/or modify it under the 3 | terms of the Do What The Fuck You Want To Public License, Version 2, 4 | as published by Sam Hocevar. See the COPYING file for more details. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Togglr 2 | ## The super lightweight zero dependencies useful utility. 3 | 4 | Togglr is a small (<1KB) utility specialized in one of the most common web tasks: adding or removing a class from one or more DOM nodes. 5 | It works on any modern browser (IE10+) and has no dependency from any other libraries. 6 | 7 | It works with (configurable) attributes on the trigger nodes. The following explanation assumes the default namespace `data-togglr-` is used. 8 | 9 | `data-togglr-target=“SELECTOR”` required, identify with a css3 SELECTOR which nodes shall be targeted by the change 10 | 11 | `data-togglr-toggle=“CLASS”` toggles CLASS on selected nodes 12 | 13 | `data-togglr-add=“CLASS”` adds CLASS on selected nodes 14 | 15 | `data-togglr-remove=“CLASS”` removes CLASS on selected nodes 16 | 17 | `data-togglr-exclusive=“CLASS”` toggles CLASS on selected nodes and removes it from their siblings 18 | 19 | `data-togglr-exclusiveAdd=“CLASS”` adds CLASS on selected nodes and removes it from their siblings 20 | 21 | If no other option than `data-togglr-target` is provided, the behavior defaults to `data-togglr-toggle=“isActive”` (`isActive` is the default class and can be configured otherwise). 22 | 23 | Togglr works on dynamic added nodes out of the box. 24 | 25 | When togglr initialize successfully, it adds a `togglr` class to the html node. This feature can be used to implement no-js fallbacks via css. 26 | 27 | Here are some examples: https://stefano.io/togglr/examples/ (no fancy stuff, just some demo of what you can do with togglr) 28 | 29 | To build a minified version inside the dist folder you can use: 30 | ``` 31 | npm install && npm run build 32 | ``` 33 | -------------------------------------------------------------------------------- /dist/togglr.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"use strict";var o,n=t+"target",r="toggle",c={toggle:function(t){t.classList.toggle(o)},add:function(t){t.classList.add(o)},remove:function(t){t.classList.remove(o)},exclusive:function(t){c.toggle(t),a(t)},exclusiveAdd:function(t){c.add(t),a(t)}},a=function(t){Array.prototype.forEach.call(t.parentNode.children,function(e){t!==e&&e.classList.remove(o)})},i=function(a){var i,d,s=a.target.getAttribute(n),l=c[r];if(s){a.preventDefault(),o=e;for(d in c)if(c.hasOwnProperty(d)&&(i=a.target.getAttribute(t+d))){o=i,l=c[d];break}Array.prototype.forEach.call(document.querySelectorAll(s),l)}},d=function(){document.documentElement.classList.add("togglr"),document.body.addEventListener("click",i,!0)},s=function(){"classList"in document.body?"loading"===document.readyState?document.addEventListener("DOMContentLoaded",d):d():console.error("togglr: unsupported browser")};s()}("data-togglr-","isActive"); -------------------------------------------------------------------------------- /examples/accordion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | togglr - examples - accordion 4 | 20 | 21 |

Togglr accordion example

22 | Examples index 23 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /examples/dismiss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | togglr - examples - dismiss message 4 | 20 | 21 |

Togglr dismiss message example

22 | Examples index 23 |
24 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

25 | 26 |
27 |
28 |

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | togglr - examples 4 |

Togglr examples

5 | 17 | -------------------------------------------------------------------------------- /examples/modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | togglr - examples - modal popup 4 | 38 | 39 |

Togglr modal popup example

40 | Examples index 41 | Open Modal 42 |
43 |
44 | 45 |
46 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

47 |

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

48 |
49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /examples/tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | togglr - examples - tabs 4 | 32 | 33 |

Togglr tabs example

34 | Examples index 35 | 43 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /examples/toggle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | togglr - examples - basic toggle 4 | 24 | 25 |

Togglr basic toggle example

26 | Examples index 27 |

28 | 29 |

30 |

31 | 32 |

33 |

34 | 35 | 36 | 37 |

38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "togglr", 3 | "version": "1.0.0", 4 | "description": "The super lightweight zero dependencies useful utility.", 5 | "directories": { 6 | "example": "examples" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/stefanoio/togglr.git" 11 | }, 12 | "author": "Stefano Peloso", 13 | "license": "WTFPL", 14 | "bugs": { 15 | "url": "https://github.com/stefanoio/togglr/issues" 16 | }, 17 | "scripts": { 18 | "build": "uglifyjs src/togglr.js -o dist/togglr.min.js -c -m" 19 | }, 20 | "homepage": "https://github.com/stefanoio/togglr#readme", 21 | "devDependencies": { 22 | "uglify-js": "^2.7.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/togglr.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * togglr 3 | * 4 | * Stefano Peloso - https://github.com/stefanoio/togglr 5 | * 6 | * Free to use under terms of WTFPL version 2 license 7 | */ 8 | 9 | (function(ATTRIBUTE_NAMESPACE, DEFAULT_CLASS) { 10 | "use strict"; 11 | 12 | var 13 | SELECTOR = ATTRIBUTE_NAMESPACE + "target", 14 | 15 | DEFAULT_MODE = "toggle", 16 | 17 | MODES = { 18 | toggle: function(el) { 19 | el.classList.toggle(theClass); 20 | }, 21 | add: function(el) { 22 | el.classList.add(theClass); 23 | }, 24 | remove: function(el) { 25 | el.classList.remove(theClass); 26 | }, 27 | exclusive: function(el) { 28 | MODES.toggle(el); 29 | _REMOVE_FROM_SIBLINGS(el); 30 | }, 31 | exclusiveAdd: function(el) { 32 | MODES.add(el); 33 | _REMOVE_FROM_SIBLINGS(el); 34 | } 35 | }, 36 | 37 | _REMOVE_FROM_SIBLINGS = function(el) { // Utility function for exclusive modes 38 | Array.prototype.forEach.call(el.parentNode.children, function(el2) { 39 | if(el !== el2) { 40 | el2.classList.remove(theClass); 41 | } 42 | }); 43 | }, 44 | 45 | theClass, 46 | 47 | click = function(e) { 48 | var 49 | selector = e.target.getAttribute(SELECTOR), 50 | theFunction = MODES[DEFAULT_MODE], 51 | tmpClass, 52 | attr; 53 | if(selector) { 54 | e.preventDefault(); 55 | theClass = DEFAULT_CLASS; 56 | for(attr in MODES) { 57 | if(MODES.hasOwnProperty(attr)) { 58 | tmpClass = e.target.getAttribute(ATTRIBUTE_NAMESPACE + attr); 59 | if(tmpClass) { 60 | theClass = tmpClass; 61 | theFunction = MODES[attr]; 62 | break; 63 | } 64 | } 65 | } 66 | Array.prototype.forEach.call(document.querySelectorAll(selector), theFunction); 67 | } 68 | }, 69 | 70 | ready = function() { 71 | document.documentElement.classList.add("togglr"); 72 | document.body.addEventListener("click", click, true); 73 | }, 74 | 75 | init = function() { 76 | if("classList" in document.body) { 77 | if(document.readyState === "loading") { 78 | document.addEventListener("DOMContentLoaded", ready); 79 | } else { 80 | ready(); 81 | } 82 | } else { 83 | console.error("togglr: unsupported browser"); 84 | } 85 | }; 86 | 87 | init(); 88 | 89 | })( 90 | // Configuration 91 | /* ATTRIBUTE_NAMESPACE: */ "data-togglr-", 92 | /* DEFAULT_CLASS: */ "isActive" 93 | ); 94 | --------------------------------------------------------------------------------