data-ws-hooks

Easily hook html to js

TL;DR

data-ws-onclick="foo"

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

See published npm package

Import:

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

How to use?

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>

Showcases

This is used on the following sites:

• Speechnotes - Lightweight Speech Recognizing Notepad
• TTSReader - Online Text To Speech Reader

TODOs:

• 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...

How to contribute & publish updates to this package?

• 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.