{"id":22307798,"url":"https://github.com/boyanraichev/tat-js","last_synced_at":"2025-03-26T01:25:21.666Z","repository":{"id":65478469,"uuid":"119252072","full_name":"boyanraichev/tat-js","owner":"boyanraichev","description":"Basic JS utils for websites.","archived":false,"fork":false,"pushed_at":"2021-06-22T11:40:23.000Z","size":62,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T14:48:48.203Z","etag":null,"topics":["cookie-law","javascript","modals","scroll-events","scrollto","tabs","toggles","tooltips"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boyanraichev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-28T11:24:47.000Z","updated_at":"2021-06-22T11:40:26.000Z","dependencies_parsed_at":"2023-01-25T07:45:22.702Z","dependency_job_id":null,"html_url":"https://github.com/boyanraichev/tat-js","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyanraichev%2Ftat-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyanraichev%2Ftat-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyanraichev%2Ftat-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyanraichev%2Ftat-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boyanraichev","download_url":"https://codeload.github.com/boyanraichev/tat-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245569695,"owners_count":20637022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cookie-law","javascript","modals","scroll-events","scrollto","tabs","toggles","tooltips"],"created_at":"2024-12-03T20:11:40.524Z","updated_at":"2025-03-26T01:25:21.637Z","avatar_url":"https://github.com/boyanraichev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tat-js\n\nMinimalistic JS web package.\n\nObjectives\n----------\n\nThis 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. \n\nThis package aims to:\n- be very lightweight\n- be very fast\n- provide only the most common JS needs\n- let CSS do the animations and design, as browsers render native CSS animations faster than JS\n\nGet Started\n-----------\n\nIf 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.\n\nIf you need better support, you would have to include polyfills, i.e.:\n\n```html\n\u003cscript src=\"https://cdn.polyfill.io/v2/polyfill.min.js\"\u003e\u003c/script\u003e\n```\n  \n**Hooks**\n\nThis library uses classes as handlers, as they are much faster than using data attributes. All classes that call the library are \"js-\" prefixed.\n\n**Modals**\n\nAttach 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. \n\nThe modal will be created with the following structure:\n```html\n\u003cdiv id=\"\" class=\"modal\"\u003e\n  \u003cdiv class=\"modal-content\"\u003e\n  \t\u003cdiv class=\"js-modal-close modal-close\"\u003e\u003c/div\u003e\n  \tYour content will go here\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe \".modal\" element is also your overlay element, if you need one. The style.css file contains sample CSS styling to get you started.\n\nThe handler for closing the element is a \"js-modal-close\" class which is automatically included in your modal content.\n\nMust-fill attributes:\ndata-modal=\"\" - the ID of the modal that will be created\ndata-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\ndata-modal-get=\"\" - the ID of an element on your page that contains your modal content.\n\nHooks:\n- 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.\n- 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).\n\n**Confirm**\n\nYou can show a confirmation modal box in two ways:\n\n1. 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.\n\n2. 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.\n\n**Toggle on/off**\n\nToggle 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.\n\nMust-fill attributes:\ndata-toggle=\"\" - the ID of the element to be toggled. \n\nOptional attributes:\ndata-body-class=\"\" - add this class on the \u003cbody\u003e element when the element is toggled ON.\n\nEvents:\n'toggled' event is sent on the target element.\n\nExample markup:\n```html\n\u003cdiv id=\"target\"\u003eTarget element\u003c/div\u003e\n\u003cbutton class=\"js-toggle\" data-toggle=\"target\" data-body-class=\"has-element-toggled\"\u003eToggle link\u003c/button\u003e\n```\n\n**Scroll**\n\nUse the `.js-scroll` class to an element to add a scroll-to function when this element is clicked. \n\nMust-fill attributes:\ndata-scrollto=\"\" - the id of the element to scroll to\n\nOptional attributes:\ndata-offset=\"\" - the offset from the viewport top (in pixels) to leave above the scroll-to element. Default is 60 pixels.\n\n**Tabs**\n\nUse the `.js-tab` class to a handler to make a tab visible in a tab pane design.\n\nMust-fill attributes:\ndata-tab=\"\" - the ID of the tab to be shown. It will receive a class .active\ndata-menu=\"\" - the ID of the element containing the tab handlers. The currently active handler will receive class .active\ndata-wrap=\"\" - the ID of the element containing the tabs. Each tab should have the .tab class.\n\n**Tooltip**\n\nUse 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. \n\nMust-fill attributes (one of the two):\ndata-tooltip=\"\" -  the ID of the tooltip element to be shown. The tooltip will receive a class .active.\ndata-tooltip-text=\"\" -  the text content to be put in the tooltip element created dynamically.\n\nOptional attribute:\ndata-trigger=\"\" - possible options currently: mouseover, focus. Default is mouseover.\n\n**Form validation**\n\nAll 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. \n\nFurther 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:\ndata-validation-required=\"\" - for empty required field\ndata-validation-type=\"\" - for wrong type value (i.e. not an email)\ndata-validation-minlength=\"\" - for value that is too short\ndata-validation-range=\"\" - for numeric value that is not respecting the min, max or step values\ndata-validation-pattern=\"\" - for when a pattern has not been matched\n\n**Table rows**\n\nUse the .js-add-row on a handler to add rows to a table (does not have to be \u003ctable\u003e explicitly) and .js-del-row on an element within a row to delete this specific row. Every row should have the .row class.\n\nMust-fill attributes on .js-add-row:\ndata-table=\"\" - the ID of the table element\ndata-prototype=\"\" - the HTML prototype of the row to be added. \"__key__\" will be replaced with the incremental row number.\n\nOptional attributes on .js-add-row:\ndata-callback=\"\" - a function name to be run upon adding a row.\n\n**Cookie Law message**\n\nAdd the .js-cookie class on your \u003cbody\u003e 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.\n\nMust-fill attributes:\ndata-cookie-msg=\"\" - the HTML of the message you want displayed.\ndata-cookie-btn=\"\" - the HTML content of the accept button.\n\n**Scroll Functions**\n\nAdditional scroll-related functions.\n\n***Sticky Header***\n\nUse \".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.\n\n***Element in viewport***\n\nUse *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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboyanraichev%2Ftat-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboyanraichev%2Ftat-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboyanraichev%2Ftat-js/lists"}