@teyostudios/apply-dynamic-actions NPM

ApplyDynamicActions

ApplyDynamicActions, is a small tool, apply events to DOM elements to manipulate classes of any element of the DOM, in a simple way, using only attributes or few lines of code..

Sometimes we want to change, remove or add a class to an element, by clicking on it or on another.

With this little tool, it is done using only data-attributes. It is also possible to do it with some lines of js in a much more simplified way.

Starting 🚀

To use it you only need to import the module where you need it, add the data-attributes, or add the config by js, and start it.

See Deployment to know how to deploy the project.

Pre-requirements 📋

There are not pre requirements

Installation 🔧

Just install the last version

npm install @teyostudios/apply-dynamic-actions --save

Deployment 📦

Import in your js

import DynamicActions from @teyostudios/apply-dynamic-actions;

If you prefer a shorter name

import DynamicActions as customName from @teyostudios/apply-dynamic-actions;

There are just 2 functions:

addElement : to add element configs, before to start it. (optional)
start : to add all the events to the elements.

Add Element

There are 3 options to add actions: 1. By data-attributes

The data attributes are:

data-ts-action: "add|remove|toggle".
data-ts-class: classname.
data-ts-eventName: eventName (by default "click").
data-ts-container-query: "query for document.querySelector".

Problem: Only can add 1 action to an element.

Add by data-ts-config as a JSON text [ { tsAction: "add|remove|toggle", tsClass: classname, tsEventName: eventName (by default "click"), tsContainerQuery: "query for document.querySelector" }, { tsAction: "add|remove|toggle", tsClass: classname, tsEventName: eventName (by default "click"), tsContainerQuery: "query for document.querySelector" }, ... } Ej: data-ts-config='{"tsAction": "toggle", "tsClass": "hidde-panel", "tsContainerQuery": "main > .content"}'

Add by js: (in js not use the "ts")

DynamicActions.addElement({
  el: document.querySelector("main > .content .info-panel > .action"),
  action: "toggle",
  class: "hidde-panel",
  eventName: "click",
  containerQuery: "main > .content"
});