Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phucbm/trigger-cycle
TriggerCycle is a lightweight JavaScript library for creating interval-based activation and deactivation of DOM elements.
https://github.com/phucbm/trigger-cycle
Last synced: 25 days ago
JSON representation
TriggerCycle is a lightweight JavaScript library for creating interval-based activation and deactivation of DOM elements.
- Host: GitHub
- URL: https://github.com/phucbm/trigger-cycle
- Owner: phucbm
- License: mit
- Created: 2024-05-21T06:16:41.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-21T06:57:05.000Z (6 months ago)
- Last Synced: 2024-05-21T07:54:59.213Z (6 months ago)
- Language: JavaScript
- Homepage: https://phucbm.github.io/trigger-cycle/
- Size: 235 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TriggerCycle.js
**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.
## Features
- Interval-based element activation
- Customizable active class
- Looping through elements
- Event callbacks for activation, deactivation, pause, resume, start, and progress
- Visibility-based activation and deactivation
- Breakpoint-based pause and resume
## Installation
Include the `triggerCycle.js` file in your project:
```html
```
## Usage
### Basic Example
Create a container with elements you want to activate and deactivate:
```html
Element 1
Element 2
Element 3
Event Log
```
Add some basic styles and styles for active elements:
```css
.trigger-element {
padding: 20px;
background-color: #ccc;
border: 2px solid #999;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.trigger-element.active {
background-color: #4caf50;
border-color: #388e3c;
color: #fff;
}
#log-list li {
background-color: #fff;
margin: 5px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
transition: background-color 0.3s;
}
.log-highlight {
background-color: #ffeb3b;
transition: background-color 1s;
}
```
Initialize TriggerCycle with your elements and options:
```html
document.addEventListener("DOMContentLoaded", () => {
const triggerElements = document.querySelectorAll('.trigger-element');
const logList = document.getElementById('log-list');
const maxLogItems = 20;
const logEvent = (message) => {
const li = document.createElement('li');
li.textContent = message;
logList.appendChild(li);
li.classList.add('log-highlight');
setTimeout(() => {
li.classList.remove('log-highlight');
}, 1000);
if (logList.childElementCount > maxLogItems) {
logList.removeChild(logList.firstChild);
}
};
new TriggerCycle({
triggerElements: Array.from(triggerElements),
intervalInSeconds: 3,
loop: true,
onActive: (event) => logEvent(`Active: Element ${event.index + 1}`),
onDeactive: (event) => logEvent(`Deactive: Element ${event.index + 1}`),
onPause: (event) => logEvent(`Paused due to ${event.type}`),
onResume: (event) => logEvent(`Resumed due to ${event.type}`),
onStart: (event) => logEvent(`Started with Element ${event.index + 1}`),
onProgress: (event) => {
const progress = Math.round(event.progress * 100);
logEvent(`Progress: Element ${event.index + 1} at ${progress}%`);
}
});
});
```
### API
#### Constructor
`new TriggerCycle(options)`
##### Options
- `intervalInSeconds` (number): Interval duration in seconds. Default is `2`.
- `triggerElements` (HTMLElement[]): Array of elements to trigger.
- `activeClass` (string): Class to add to active elements. Default is `'active'`.
- `loop` (boolean): Whether to loop through elements. Default is `false`.
- `onActive` (function): Callback when an element becomes active. Receives an event object.
- `onDeactive` (function): Callback when an element becomes inactive. Receives an event object.
- `onPause` (function): Callback when the interval is paused. Receives an event object.
- `onResume` (function): Callback when the interval is resumed. Receives an event object.
- `onStart` (function): Callback when the interval starts. Receives an event object.
- `onProgress` (function): Callback for interval progress. Receives an event object with progress percentage.
- `visibilityElement` (HTMLElement|null): Element to observe for visibility. Default is `null`.
- `visibilityThreshold` (number): Visibility threshold. Default is `0.5`.
- `pauseOnBreakpoint` (number|null): Breakpoint width to pause on. Default is `null`.
### Example Usage
#### Interval and Active Class
```html
new TriggerCycle({
triggerElements: document.querySelectorAll('.trigger-element'),
intervalInSeconds: 5,
activeClass: 'active'
});
```
#### Loop Through Elements
```html
new TriggerCycle({
triggerElements: document.querySelectorAll('.trigger-element'),
intervalInSeconds: 3,
loop: true
});
```
#### Event Callbacks
```html
new TriggerCycle({
triggerElements: document.querySelectorAll('.trigger-element'),
onActive: (event) => console.log(`Active: Element ${event.index + 1}`),
onDeactive: (event) => console.log(`Deactive: Element ${event.index + 1}`),
onPause: (event) => console.log(`Paused due to ${event.type}`),
onResume: (event) => console.log(`Resumed due to ${event.type}`),
onStart: (event) => console.log(`Started with Element ${event.index + 1}`),
onProgress: (event) => {
const progress = Math.round(event.progress * 100);
console.log(`Progress: Element ${event.index + 1} at ${progress}%`);
}
});
```
#### Visibility-Based Activation
```html
new TriggerCycle({
triggerElements: document.querySelectorAll('.trigger-element'),
visibilityElement: document.querySelector('#trigger-container'),
visibilityThreshold: 0.75
});
```
#### Breakpoint-Based Pause and Resume
```html
new TriggerCycle({
triggerElements: document.querySelectorAll('.trigger-element'),
pauseOnBreakpoint: 600
});
```
## Contributing
Contributions are welcome! Please submit a pull request or open an issue to discuss your ideas.
## License
This project is licensed under the MIT License.