{"id":17036023,"url":"https://github.com/phucbm/trigger-cycle","last_synced_at":"2025-03-22T22:42:01.069Z","repository":{"id":240874668,"uuid":"803651488","full_name":"phucbm/trigger-cycle","owner":"phucbm","description":"TriggerCycle is a lightweight JavaScript library for creating interval-based activation and deactivation of DOM elements.","archived":false,"fork":false,"pushed_at":"2024-05-21T06:57:05.000Z","size":241,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T10:22:36.642Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://phucbm.github.io/trigger-cycle/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phucbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-21T06:16:41.000Z","updated_at":"2024-05-21T06:57:08.000Z","dependencies_parsed_at":"2024-05-21T08:05:29.592Z","dependency_job_id":null,"html_url":"https://github.com/phucbm/trigger-cycle","commit_stats":null,"previous_names":["phucbm/trigger-cycle"],"tags_count":0,"template":false,"template_full_name":"phucbm/js-webpack-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftrigger-cycle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftrigger-cycle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftrigger-cycle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftrigger-cycle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/trigger-cycle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031345,"owners_count":20549913,"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":[],"created_at":"2024-10-14T08:48:57.547Z","updated_at":"2025-03-22T22:42:01.049Z","avatar_url":"https://github.com/phucbm.png","language":"JavaScript","readme":"\u003cimg src=\"https://github.com/phucbm/trigger-cycle/assets/14942380/9c8744a3-0c47-460e-8635-3c0622401401\" width=100\u003e\n\n# TriggerCycle.js\n\n**TriggerCycle** is a lightweight JavaScript library for creating interval-based activation and deactivation of DOM elements. It offers extensive customization options and event callbacks for visibility, progress, and breakpoints, making it perfect for creating dynamic and interactive web experiences.\n\n## Features\n\n- Interval-based element activation\n- Customizable active class\n- Looping through elements\n- Event callbacks for activation, deactivation, pause, resume, start, and progress\n- Visibility-based activation and deactivation\n- Breakpoint-based pause and resume\n\n## Installation\n\nInclude the `triggerCycle.js` file in your project:\n\n```html\n\u003cscript src=\"triggerCycle.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Basic Example\n\nCreate a container with elements you want to activate and deactivate:\n\n```html\n\u003cdiv id=\"trigger-container\"\u003e\n    \u003cdiv class=\"trigger-element\"\u003eElement 1\u003c/div\u003e\n    \u003cdiv class=\"trigger-element\"\u003eElement 2\u003c/div\u003e\n    \u003cdiv class=\"trigger-element\"\u003eElement 3\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"event-log\"\u003e\n    \u003ch2\u003eEvent Log\u003c/h2\u003e\n    \u003cul id=\"log-list\"\u003e\u003c/ul\u003e\n\u003c/div\u003e\n```\n\nAdd some basic styles and styles for active elements:\n\n```css\n.trigger-element {\n    padding: 20px;\n    background-color: #ccc;\n    border: 2px solid #999;\n    border-radius: 5px;\n    cursor: pointer;\n    transition: background-color 0.3s;\n}\n\n.trigger-element.active {\n    background-color: #4caf50;\n    border-color: #388e3c;\n    color: #fff;\n}\n\n#log-list li {\n    background-color: #fff;\n    margin: 5px 0;\n    padding: 10px;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    transition: background-color 0.3s;\n}\n\n.log-highlight {\n    background-color: #ffeb3b;\n    transition: background-color 1s;\n}\n```\n\nInitialize TriggerCycle with your elements and options:\n\n```html\n\u003cscript\u003e\n    document.addEventListener(\"DOMContentLoaded\", () =\u003e {\n        const triggerElements = document.querySelectorAll('.trigger-element');\n        const logList = document.getElementById('log-list');\n        const maxLogItems = 20;\n\n        const logEvent = (message) =\u003e {\n            const li = document.createElement('li');\n            li.textContent = message;\n            logList.appendChild(li);\n            li.classList.add('log-highlight');\n            setTimeout(() =\u003e {\n                li.classList.remove('log-highlight');\n            }, 1000);\n\n            if (logList.childElementCount \u003e maxLogItems) {\n                logList.removeChild(logList.firstChild);\n            }\n        };\n\n        new TriggerCycle({\n            triggerElements: Array.from(triggerElements),\n            intervalInSeconds: 3,\n            loop: true,\n            onActive: (event) =\u003e logEvent(`Active: Element ${event.index + 1}`),\n            onDeactive: (event) =\u003e logEvent(`Deactive: Element ${event.index + 1}`),\n            onPause: (event) =\u003e logEvent(`Paused due to ${event.type}`),\n            onResume: (event) =\u003e logEvent(`Resumed due to ${event.type}`),\n            onStart: (event) =\u003e logEvent(`Started with Element ${event.index + 1}`),\n            onProgress: (event) =\u003e {\n                const progress = Math.round(event.progress * 100);\n                logEvent(`Progress: Element ${event.index + 1} at ${progress}%`);\n            }\n        });\n    });\n\u003c/script\u003e\n```\n\n### API\n\n#### Constructor\n\n`new TriggerCycle(options)`\n\n##### Options\n\n- `intervalInSeconds` (number): Interval duration in seconds. Default is `2`.\n- `triggerElements` (HTMLElement[]): Array of elements to trigger.\n- `activeClass` (string): Class to add to active elements. Default is `'active'`.\n- `loop` (boolean): Whether to loop through elements. Default is `false`.\n- `onActive` (function): Callback when an element becomes active. Receives an event object.\n- `onDeactive` (function): Callback when an element becomes inactive. Receives an event object.\n- `onPause` (function): Callback when the interval is paused. Receives an event object.\n- `onResume` (function): Callback when the interval is resumed. Receives an event object.\n- `onStart` (function): Callback when the interval starts. Receives an event object.\n- `onProgress` (function): Callback for interval progress. Receives an event object with progress percentage.\n- `visibilityElement` (HTMLElement|null): Element to observe for visibility. Default is `null`.\n- `visibilityThreshold` (number): Visibility threshold. Default is `0.5`.\n- `pauseOnBreakpoint` (number|null): Breakpoint width to pause on. Default is `null`.\n\n### Example Usage\n\n#### Interval and Active Class\n\n```html\n\u003cscript\u003e\n    new TriggerCycle({\n        triggerElements: document.querySelectorAll('.trigger-element'),\n        intervalInSeconds: 5,\n        activeClass: 'active'\n    });\n\u003c/script\u003e\n```\n\n#### Loop Through Elements\n\n```html\n\u003cscript\u003e\n    new TriggerCycle({\n        triggerElements: document.querySelectorAll('.trigger-element'),\n        intervalInSeconds: 3,\n        loop: true\n    });\n\u003c/script\u003e\n```\n\n#### Event Callbacks\n\n```html\n\u003cscript\u003e\n    new TriggerCycle({\n        triggerElements: document.querySelectorAll('.trigger-element'),\n        onActive: (event) =\u003e console.log(`Active: Element ${event.index + 1}`),\n        onDeactive: (event) =\u003e console.log(`Deactive: Element ${event.index + 1}`),\n        onPause: (event) =\u003e console.log(`Paused due to ${event.type}`),\n        onResume: (event) =\u003e console.log(`Resumed due to ${event.type}`),\n        onStart: (event) =\u003e console.log(`Started with Element ${event.index + 1}`),\n        onProgress: (event) =\u003e {\n            const progress = Math.round(event.progress * 100);\n            console.log(`Progress: Element ${event.index + 1} at ${progress}%`);\n        }\n    });\n\u003c/script\u003e\n```\n\n#### Visibility-Based Activation\n\n```html\n\u003cscript\u003e\n    new TriggerCycle({\n        triggerElements: document.querySelectorAll('.trigger-element'),\n        visibilityElement: document.querySelector('#trigger-container'),\n        visibilityThreshold: 0.75\n    });\n\u003c/script\u003e\n```\n\n#### Breakpoint-Based Pause and Resume\n\n```html\n\u003cscript\u003e\n    new TriggerCycle({\n        triggerElements: document.querySelectorAll('.trigger-element'),\n        pauseOnBreakpoint: 600\n    });\n\u003c/script\u003e\n```\n\n## Contributing\n\nContributions are welcome! Please submit a pull request or open an issue to discuss your ideas.\n\n## License\n\nThis project is licensed under the MIT License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Ftrigger-cycle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Ftrigger-cycle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Ftrigger-cycle/lists"}