Data-ws-hooks NPM

Easily hook html to js

It hooks between HTML tags and attributes to js functions or events.

Web: <script src="https://unpkg.com/data-ws-hooks/build/bundle.min.js"></script>
Node: npm i data-ws-hooks

Important! This works if css defines class "hidden" as "display:none", as the hiding here works by toggling this class

- HTML Attributes

Attribute	Note	Example
data-ws-onclick	When element is clicked - it will trigger one of the 3, in that order of precedence: - Fire an action, like hide all elements of class x. See list of actions later. - Fire a window.wsGlobals function - Fire a global window function. Supports nested functions by dot notation.	- `<button data-ws-onclick="hideClass:popup">Close popup</button>` - `<button data-ws-onclick="signin">Sign In</button>`
data-ws-src	Sets a "src" attribute with its value as the "data-ws-src", so to lazy load src instead of blocking the user experience.	- `<iframe data-ws-src="/embedded/feedback_form.html"/>`
data-ws-tab	Combined with the classes: "tab-selector", "tab-selector selected", "tab-section", "tab-section hidden" it gives a tab functionality. Important! Allows a single set of tabs per page!	`<div><span class="tab-selector selected" data-ws-tab="tab1">Tab1</span><span class="tab-selector" data-ws-tab="tab2">Tab2</span></div>`
data-ws-toggle-hidden-data	Defines elements to be toggled 'hidden' class when a respective button is clicked.	`<div data-ws-toggle-hidden-data='signin-dialog'>...</div>`
data-ws-toggle-hidden-button	When clicked, toggle 'hidden' class on all elements that share the value in their "data-ws-toggle-hidden-data" attribute.	`<button data-ws-toggle-hidden-button='signin-dialog'>Sign In</button>`

- Built-in onclick actions

Run as: data-ws-onclick="some_action:optional_param"

Actions	Note	Example
hideClass:some_class	Hide all elements of class some_class.	- `<button data-ws-onclick="hideClass:popup">Close popup</button>`
copy:	Copy the value attribute of clicked element	- `<input data-ws-onclick="copy" type:"text" value="this will be copied"/>`
copy:#some_element_id	Copy the value attribute of #some_element_id element	- `<button data-ws-onclick="copy:#some_element_id" >Copy</button>`

This is used on the following sites:

It sometimes hides by styling directly and sometimes by toggling "hidden" class. Inconsistent...
Allow more than a single set of tabs on page... Perhaps contain tabs in a parent...

This package is published both on GitHub and on npmjs.
To publish an updated version - simply run npm publish, it will commit & push updates both to github and npm.