data-ws-hooks
Version:
Hooks html tags to js actions by using custom data attributes. Bootsratp style. Specifically useful for easily handling click events.
57 lines (36 loc) • 5.24 kB
Markdown
# 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](https://www.npmjs.com/package/data-ws-hooks)
## 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: <br>- Fire an action, like hide all elements of class x. See list of actions later. <br>- Fire a window.wsGlobals function <br>- Fire a global window function. Supports nested functions by dot notation. | - `<button data-ws-onclick="hideClass:popup">Close popup</button>` <br> - `<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. <br>**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](https://speechnotes.co/)
- [TTSReader - Online Text To Speech Reader](https://ttsreader.com/)
## 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.