https://github.com/boyanraichev/tat-js
Basic JS utils for websites.
https://github.com/boyanraichev/tat-js
cookie-law javascript modals scroll-events scrollto tabs toggles tooltips
Last synced: about 1 year ago
JSON representation
Basic JS utils for websites.
- Host: GitHub
- URL: https://github.com/boyanraichev/tat-js
- Owner: boyanraichev
- Created: 2018-01-28T11:24:47.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-06-22T11:40:23.000Z (almost 5 years ago)
- Last Synced: 2025-03-18T14:48:48.203Z (about 1 year ago)
- Topics: cookie-law, javascript, modals, scroll-events, scrollto, tabs, toggles, tooltips
- Language: JavaScript
- Size: 60.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tat-js
Minimalistic JS web package.
Objectives
----------
This is a simple native JavaScript library to provide standard websites with common stuff like modals, sticky headers, etc. in a lightweight and fast script. It is aimed at smaller websites and web apps that do not need a heavy, powerful framework and do not want the bulkiness of libraries like Bootstrap JS or similar.
This package aims to:
- be very lightweight
- be very fast
- provide only the most common JS needs
- let CSS do the animations and design, as browsers render native CSS animations faster than JS
Get Started
-----------
If you are using npm or another package manager you can install by including `tat-js` in your dependencies and then using `require('tat')` or `import {} from 'tat.js'` in your script. This will include the babel EC5 transpiled version of the package.
If you need better support, you would have to include polyfills, i.e.:
```html
```
**Hooks**
This library uses classes as handlers, as they are much faster than using data attributes. All classes that call the library are "js-" prefixed.
**Modals**
Attach a ".js-modal" class to your handler. The content of your modal can be either passed in the data-modal-content="" attribute of your handler, or alternatively pass a data-modal-get="" attribute with the ID of the html element that contains your modal content.
The modal will be created with the following structure:
```html
```
The ".modal" element is also your overlay element, if you need one. The style.css file contains sample CSS styling to get you started.
The handler for closing the element is a "js-modal-close" class which is automatically included in your modal content.
Must-fill attributes:
data-modal="" - the ID of the modal that will be created
data-modal-content="" - the HTML content of the modal (parse through htmlspecialchars() php function). If this attribute is not set you must set the next one
data-modal-get="" - the ID of an element on your page that contains your modal content.
Hooks:
- You can push objects to the tat.modalHooks array, containing hooks tied to a particular modal ID. The hook object should contain two properties: "id" is the modal ID you want it to run on, and "hook" is your hook function.
- You can set the tat.modalCloseHook property as a function to run when the user tries to close the modal. This hook is run once and then cleared (so you have to set it up every time this particular modal is shown).
**Confirm**
You can show a confirmation modal box in two ways:
1. Use a ".js-confirm" class on your handler element. Use the data-modal attribute to set the modal ID and the data-text attribute to set the modal text. Pass additional data through the data-confirm-data="" attribute on the same element. Set up your callback function using a modal hook as described in the modals section.
2. Hook your handler in your script and call tat.confirm(modalID,modalContent,callback,data) method with the following parameters: the ID of the confirmation modal, the text of the confirmation modal, the callback function upon confirmation and additional data you want to pass to the callback function.
**Toggle on/off**
Toggle an element (use CSS to style the desired behaviour, i.e. show/hide). The toggled element will receive a class `.active` when ON and the handler will receive a class `.toggled`. Use the `.js-toggle` class to activate the handler.
Must-fill attributes:
data-toggle="" - the ID of the element to be toggled.
Optional attributes:
data-body-class="" - add this class on the element when the element is toggled ON.
Events:
'toggled' event is sent on the target element.
Example markup:
```html
Target element
Toggle link
```
**Scroll**
Use the `.js-scroll` class to an element to add a scroll-to function when this element is clicked.
Must-fill attributes:
data-scrollto="" - the id of the element to scroll to
Optional attributes:
data-offset="" - the offset from the viewport top (in pixels) to leave above the scroll-to element. Default is 60 pixels.
**Tabs**
Use the `.js-tab` class to a handler to make a tab visible in a tab pane design.
Must-fill attributes:
data-tab="" - the ID of the tab to be shown. It will receive a class .active
data-menu="" - the ID of the element containing the tab handlers. The currently active handler will receive class .active
data-wrap="" - the ID of the element containing the tabs. Each tab should have the .tab class.
**Tooltip**
Use the `.js-tooltip` class to a handler to show a tooltip upon specific action. The handler will receive a class `.tooltip-on` when activated. The tooltip itself can be another element (which will receive a class `.active` when active) or an element created programmatically with the text provided in a data attribute.
Must-fill attributes (one of the two):
data-tooltip="" - the ID of the tooltip element to be shown. The tooltip will receive a class .active.
data-tooltip-text="" - the text content to be put in the tooltip element created dynamically.
Optional attribute:
data-trigger="" - possible options currently: mouseover, focus. Default is mouseover.
**Form validation**
All input, select and textarea elements on your page will receive a class `.has-input` when they receive input for the first time. This allows you to use the css `:invalid` selector to visualise invalid input only after the user has interacted with this field.
Further form validation is possible with the addition of `.js-validate` class on the form. This will add a `.was-validated` class upon submit, allowing you to further use css `:invalid` and `:valid` selectors to style the inputs. Additionally, you can easily set custom validation messages with the following data attributes:
data-validation-required="" - for empty required field
data-validation-type="" - for wrong type value (i.e. not an email)
data-validation-minlength="" - for value that is too short
data-validation-range="" - for numeric value that is not respecting the min, max or step values
data-validation-pattern="" - for when a pattern has not been matched
**Table rows**
Use the .js-add-row on a handler to add rows to a table (does not have to be explicitly) and .js-del-row on an element within a row to delete this specific row. Every row should have the .row class.
Must-fill attributes on .js-add-row:
data-table="" - the ID of the table element
data-prototype="" - the HTML prototype of the row to be added. "__key__" will be replaced with the incremental row number.
Optional attributes on .js-add-row:
data-callback="" - a function name to be run upon adding a row.
**Cookie Law message**
Add the .js-cookie class on your element to activate the Cookie Law message. This function sets a cookie, so that the message is shown to the user only upon first visit.
Must-fill attributes:
data-cookie-msg="" - the HTML of the message you want displayed.
data-cookie-btn="" - the HTML content of the accept button.
**Scroll Functions**
Additional scroll-related functions.
***Sticky Header***
Use ".js-sticky" class on the header or other element you want to make sticky. Use CSS to actually make the element sticky - the script only adds the class `sticked` on the element and the `has-sticky` class on the body, when the scroll position is reached.
***Element in viewport***
Use *js-inview* class on an element and when the element is scrolled into the viewport it will gain the *in-viewport* class. Additionally, an `inView` event is fired everytime the element enters the viewport. The default entrance point is at the bottom of the screen, but you can apply an offset `data-offset="0.5"` with 0 being bottom of the screen and 1 being the top of the screen.