### Install Pageable via npm
Source: https://github.com/mobius1/pageable/blob/master/README.md
This command installs the Pageable library using npm, a package manager for Node.js. It saves the package as a dependency in your project's package.json file.
```bash
npm install pageable --save
```
--------------------------------
### Initialize Pageable with Custom Options
Source: https://github.com/mobius1/pageable/blob/master/docs/orientate.html
Demonstrates how to create a new Pageable instance with custom configuration options. The example shows how to disable pips and define a callback function to dynamically orient the pageable element based on the index of the finished page.
```javascript
new Pageable("main", {
pips: false,
onFinish: function(data) {
// orientate horizontally when index is odd number
this.orientate(data.index % 2 == 0 ? "vertical" : "horizontal");
},
});
```
--------------------------------
### Pageable Initialization with Callback
Source: https://github.com/mobius1/pageable/blob/master/docs/progress.html
This example demonstrates how to initialize the Pageable library and pass the `update` function as a callback to the `onScroll` option. This will trigger the progress bar updates whenever scrolling occurs.
```javascript
const pages = new Pageable("main", {
onScroll: update,
});
```
--------------------------------
### Listening to Pageable Events
Source: https://github.com/mobius1/pageable/blob/master/README.md
Demonstrates how to use the `on(type, callback)` method to subscribe to various custom events emitted by a Pageable instance. Includes examples for initialization, updates, and different scroll stages.
```javascript
const pages = new Pageable("#container");
pages.on("init", data => {
// do something when the instance is ready
});
pages.on("update", data => {
// do something when the instance is updated
// this event also fires when the screen size changes
});
pages.on("scroll.before", data => {
// do something before scrolling starts
// this event will fire when the defined delay begins
// e.g. if the delay is set to 400, this event will
// fire 400ms BEFORE the "scroll.start" event fires
});
pages.on("scroll.start", data => {
// do something when scrolling starts
// this event will fire when the defined delay ends
// e.g. if the delay is set to 400, this event will
// fire 400ms AFTER the "scroll.before" event fires
});
pages.on("scroll", data => {
// do something during scroll
});
pages.on("scroll.end", data => {
// do something when scrolling ends
});
```
--------------------------------
### Basic HTML Structure for Pageable
Source: https://github.com/mobius1/pageable/blob/master/README.md
This HTML structure demonstrates the basic setup required for Pageable. A container element with a specific ID is needed, and each scrollable section within it must have a `data-anchor` attribute.
```html
....
```
--------------------------------
### Pageable Initialization with Event Emitter
Source: https://github.com/mobius1/pageable/blob/master/docs/progress.html
This example shows an alternative way to use the Pageable library by initializing it without an `onScroll` callback and then attaching the `update` function to the 'scroll' event using the built-in event emitter. This provides more flexibility in managing scroll events.
```javascript
const pages = new Pageable("main");
pages.on("scroll", update);
```
--------------------------------
### JavaScript Event Listeners
Source: https://github.com/mobius1/pageable/blob/master/docs/index.html
Shows how to listen for various Pageable events such as initialization, scroll start, during scroll, and scroll end.
```javascript
const pages = new Pageable("#container");
pages.on("init", data => {
// do something when the instance is ready
});
pages.on("scroll.start", data => {
// do something when scrolling starts
});
pages.on("scroll", data => {
// do something during scroll
});
pages.on("scroll.end", data => {
// do something when scrolling ends
});
```
--------------------------------
### HTML Structure for Pageable
Source: https://github.com/mobius1/pageable/blob/master/README.md
Example HTML structure required for Pageable.js, including a main container and individual page elements with data anchors.
```html
...
```
--------------------------------
### Initialize Pageable with Options
Source: https://github.com/mobius1/pageable/blob/master/README.md
Initializes Pageable.js with a comprehensive set of configuration options to customize behavior, appearance, and events.
```javascript
new Pageable("#container", {
childSelector: "[data-anchor]", // CSS3 selector string for the pages
anchors: [], // define the page anchors
pips: true, // display the pips
animation: 300, // the duration in ms of the scroll animation
delay: 0, // the delay in ms before the scroll animation starts
throttle: 50, // the interval in ms that the resize callback is fired
orientation: "vertical", // or horizontal
swipeThreshold: 50, // swipe / mouse drag distance (px) before firing the page change event
freeScroll: false, // allow manual scrolling when dragging instead of automatically moving to next page
navPrevEl: false, // define an element to use to scroll to the previous page (CSS3 selector string or Element reference)
navNextEl: false, // define an element to use to scroll to the next page (CSS3 selector string or Element reference)
infinite: false, // enable infinite scrolling (from 0.4.0)
slideshow: { // enable slideshow that cycles through your pages automatically (from 0.4.0)
interval: 3000, // time in ms between page change,
delay: 0 // delay in ms after the interval has ended and before changing page
},
events: {
wheel: true, // enable / disable mousewheel scrolling
mouse: true, // enable / disable mouse drag scrolling
touch: true, // enable / disable touch / swipe scrolling
keydown: true, // enable / disable keyboard navigation
},
easing: function(currentTime, startPos, endPos, interval) {
// the easing function used for the scroll animation
return -endPos * (currentTime /= interval) * (currentTime - 2) + startPos;
},
onInit: function() {
// do something when the instance is ready
},
onUpdate: function() {
// do something when the instance updates
},
onBeforeStart: function() {
// do something before scrolling begins
},
onStart: function() {
// do something when scrolling begins
},
onScroll: function() {
// do something during scroll
},
onFinish: function() {
// do something when scrolling ends
},
});
```
--------------------------------
### Pageable.js Configuration Options
Source: https://github.com/mobius1/pageable/blob/master/README.md
Details the various configuration options available for initializing Pageable.js, including intervals, navigation elements, slideshow behavior, event handling, easing functions, and callbacks.
```javascript
/*
* Configuration Options:
*/
// Sets the interval in `ms` that the resize callback is fired.
// type: Number
// default: 50
resizeInterval: 50,
// Define an element to use to scroll to the previous page. A valid CSS3 selector string or Element reference.
// type: String|HTMLElement
// default: false
navPrevEl: false,
// Define an element to use to scroll to the next page. A valid CSS3 selector string or Element reference.
// type: String|HTMLElement
// default: false
navNextEl: false,
// Enables the slideshow function that cycles through your pages automatically.
// The object has two properties to further customise the slideshow:
// * interval - length of time in `ms` to display each page.
// * delay - delay in `ms` after the interval has ended and before changing page.
// type: Object
// default: false
slideshow: {
interval: 3000,
delay: 500
},
// Define the allowed events.
// All properties are set to `true` by default.
// type: Object
events: {
wheel: true,
mouse: true,
touch: true,
keydown: true
},
// Define the easing function used for the scroll animation.
// The function takes four arguments: currentTime, startPos, endPos, interval.
// type: Function
// default: (currentTime, startPos, endPos, interval) => -endPos * (currentTime /= interval) * (currentTime - 2) + startPos
easings: function(currentTime, startPos, endPos, interval) { /* ... */ },
// Define a callback to be called when the instance is fully rendered and ready for use.
// The function takes a single argument that returns the data object (See [Custom Events](#custom-events))
// type: Function
// default: noop
onInit: function(data) { /* ... */ },
// Define a callback to be called when the instance updates.
// The function takes a single argument that returns the data object (See [Custom Events](#custom-events))
// type: Function
// default: noop
onUpdate: function(data) { /* ... */ },
// Define a callback to be called before scrolling begins.
// The function takes a single argument that returns the data object (See [Custom Events](#custom-events))
// type: Function
// default: noop
onBeforeStart: function(data) { /* ... */ },
// Define a callback to be called when scrolling begins.
// The function takes a single argument that returns the data object (See [Custom Events](#custom-events))
// type: Function
// default: noop
onStart: function(data) { /* ... */ },
// Define a callback to be called while scrolling.
// The function takes a single argument that returns the data object (See [Custom Events](#custom-events))
// type: Function
// default: noop
onScroll: function(data) { /* ... */ },
// Define a callback to be called when scrolling finishes.
// The function takes a single argument that returns the data object (See [Custom Events](#custom-events))
// type: Function
// default: noop
onFinish: function(data) { /* ... */ }
```
--------------------------------
### JavaScript Initialization with Customization
Source: https://github.com/mobius1/pageable/blob/master/docs/index.html
Initializes Pageable with custom configuration options such as animation speed, delay, and orientation.
```javascript
new Pageable("#container", {
animation: 500,
delay: 400,
orientation: "horizontal",
onScroll: function() {
// do something during scroll
}
});
```
--------------------------------
### Initialize Pageable
Source: https://github.com/mobius1/pageable/blob/master/README.md
This JavaScript code demonstrates how to instantiate Pageable. It requires a reference to the HTML container element that holds the scrollable pages.
```javascript
const pageable = new Pageable(document.getElementById('container'));
```
--------------------------------
### Initialize Pageable
Source: https://github.com/mobius1/pageable/blob/master/README.md
Basic initialization of Pageable.js on a container element.
```javascript
new Pageable("#container");
```
--------------------------------
### Pageable.js Methods
Source: https://github.com/mobius1/pageable/blob/master/README.md
Details the available methods for controlling and interacting with a Pageable.js instance, including initialization, destruction, navigation, and event management.
```javascript
// Initialize Pageable
new Pageable("#container", {
// options...
});
// Destroy the instance.
// This will remove all event listeners and return the DOM to its initial state.
pageable.destroy();
// Initialise the instance after destroying.
pageable.init();
// Scroll to next page.
pageable.next();
// Scroll to previous page.
pageable.prev();
// Scroll to defined page number.
// e.g., scroll to page 3
pageable.scrollToPage(3);
// Scroll to defined anchor.
pageable.scrollToAnchor("#myanchor");
// Orientate the instance to either vertical or horizontal.
pageable.orientate("horizontal");
// or
pageable.orientate("vertical");
// Get an instance of the slideshow (requires slideshow option to be true).
// The slideshow instance has two methods: start() and stop().
// stop / pause slideshow
pageable.slideshow().stop();
// start / resume slideshow
pageable.slideshow().start();
// Add custom event listener.
pageable.on("event", function(data) { /* ... */ });
// Remove custom event listener.
pageable.off("event", function(data) { /* ... */ });
```
--------------------------------
### Pageable API Documentation
Source: https://github.com/mobius1/pageable/blob/master/docs/index.html
Comprehensive API documentation for Pageable, covering configuration options, control methods, and events.
```APIDOC
Pageable:
__constructor(selector: string, options?: object)
selector: CSS selector for the container element.
options: Configuration object for customizing Pageable behavior.
Configuration Options:
animation (number): Duration of the scroll animation in milliseconds. Defaults to 500.
delay (number): Delay between animations in milliseconds. Defaults to 0.
orientation (string): 'vertical' or 'horizontal'. Defaults to 'vertical'.
swipeThreshold (number): Minimum swipe distance to trigger a scroll. Defaults to 50.
freeScroll (boolean): Allows free scrolling without snapping to pages. Defaults to false.
infinite (boolean): Enables infinite scrolling loop. Defaults to false.
onScroll (function): Callback function executed during scrolling.
Control Methods:
prev(): Scrolls to the previous page.
next(): Scrolls to the next page.
scrollToPage(pageNumber: number): Scrolls to the specified page number (1-based index).
scrollToAnchor(anchorSelector: string): Scrolls to the element with the specified anchor selector (e.g., '#page-3').
orientate(orientation: string): Changes the scrolling orientation to 'vertical' or 'horizontal'.
Events:
init: Triggered when the Pageable instance is initialized.
scroll.start: Triggered when a scroll animation begins.
scroll: Triggered during a scroll animation.
scroll.end: Triggered when a scroll animation finishes.
Example Usage:
const pages = new Pageable('#container', {
animation: 700,
orientation: 'horizontal'
});
pages.next();
pages.on('scroll.end', () => console.log('Scroll ended'));
```
--------------------------------
### JavaScript Initialization
Source: https://github.com/mobius1/pageable/blob/master/docs/index.html
Basic JavaScript code to initialize Pageable on a specified container element.
```javascript
new Pageable("#container");
```
--------------------------------
### Pageable API Reference
Source: https://github.com/mobius1/pageable/blob/master/README.md
This section details the configuration options, methods, and custom events available for the Pageable library. It covers how to customize scrolling behavior, navigate between pages, and handle events.
```APIDOC
Pageable Options:
childSelector: string (default: '> div') - Selector for the direct children that represent pages.
anchors: array (default: []) - Array of strings to use as anchors for each page.
pips: boolean (default: true) - Whether to show navigation pips.
animation: string (default: 'ease-out') - CSS animation timing function for scrolling.
delay: number (default: 0) - Delay in milliseconds before scrolling to the next page.
throttle: number (default: 0) - Throttle scroll events by milliseconds.
orientation: string (default: 'vertical') - 'vertical' or 'horizontal' scrolling.
swipeThreshold: number (default: 50) - Minimum swipe distance in pixels to trigger a page change.
freeScroll: boolean (default: false) - Allows free scrolling without snapping to pages.
navPrevEl: string (default: null) - Selector for a custom previous navigation element.
navNextEl: string (default: null) - Selector for a custom next navigation element.
infinite: boolean (default: false) - Enables infinite scrolling loop.
easing: string (default: 'ease-out') - CSS easing function for animations.
Pageable Methods:
destroy(): void - Destroys the Pageable instance and removes event listeners.
init(): void - Re-initializes the Pageable instance.
next(): void - Scrolls to the next page.
prev(): void - Scrolls to the previous page.
scrollToPage(page: number): void - Scrolls to a specific page by its index (0-based).
scrollToAnchor(anchor: string): void - Scrolls to the page associated with the given anchor string.
orientate(orientation: string): void - Changes the scrolling orientation to 'vertical' or 'horizontal'.
slideshow(): void - Starts a slideshow mode.
on(event: string, callback: function): void - Attaches an event listener.
off(event: string, callback: function): void - Removes an event listener.
Custom Events:
init - Fired when Pageable is initialized.
update - Fired when Pageable is updated (e.g., orientation change).
beforeStart - Fired before a scroll animation starts.
start - Fired when a scroll animation starts.
scroll - Fired during scrolling.
finish - Fired when a scroll animation finishes.
```
--------------------------------
### JavaScript Control Methods
Source: https://github.com/mobius1/pageable/blob/master/docs/index.html
Demonstrates how to control Pageable instances programmatically, including navigating to previous/next pages, specific pages, anchors, and changing orientation.
```javascript
const pages = new Pageable("#container");
// scroll to previous page
pages.prev();
// scroll to next page
pages.next();
// scroll to defined page
pages.scrollToPage(3);
// scroll to defined anchor
pages.scrollToAnchor("#page-3");
// switch to horizontal scrolling
pages.orientate("horizontal");
```
--------------------------------
### Include Pageable via CDN
Source: https://github.com/mobius1/pageable/blob/master/README.md
This snippet shows how to include the Pageable JavaScript library in an HTML file using a CDN link. It also provides the link for the optional CSS stylesheet for styling navigation elements.
```html
```
--------------------------------
### HTML Structure for Pageable
Source: https://github.com/mobius1/pageable/blob/master/docs/index.html
Defines the necessary HTML structure for initializing Pageable. A container element with child divs, each representing a page with a data-anchor attribute.
```html
```
--------------------------------
### Pageable JavaScript Initialization
Source: https://github.com/mobius1/pageable/blob/master/docs/delay.html
Initializes the Pageable component with custom options, such as a delay for scroll transitions and a callback for managing active classes before scrolling.
```javascript
new Pageable("main", {
// delay the scroll by 300ms to allow the transition to complete
delay: 300,
onBeforeStart: function(data) {
// remove the active class before scroll starts
this.pages[data.index].classList.remove("pg-active");
}
});
```
--------------------------------
### Anchor Slugification
Source: https://github.com/mobius1/pageable/blob/master/README.md
Demonstrates how Pageable.js automatically 'slugifies' data-anchor attributes to be used as page IDs.
```text
The defined anchors will be 'slugified' and used as the page's `id` - e.g. `My Page 1` will be converted to `my-page-1`
```
--------------------------------
### Pageable Event Data Structure
Source: https://github.com/mobius1/pageable/blob/master/README.md
Defines the structure of the data object passed to Pageable event callbacks. It includes the current page index, scroll offset, maximum scrollable amount, and scroll percentage.
```javascript
{
index: // the current page index
scrolled: // the current scroll offset
max: // the maximum scroll amount possible
percent: // the scroll position as a percentage of the maximum scroll (v0.6.7 and above)
}
```
--------------------------------
### HTML Structure for Progress Bars
Source: https://github.com/mobius1/pageable/blob/master/docs/progress.html
This snippet shows the HTML structure required for both radial and linear progress bars. The radial progress bar uses SVG elements, while the linear progress bar uses a simple div with a class 'bar'.
```html
```
--------------------------------
### Pageable CSS Transitions
Source: https://github.com/mobius1/pageable/blob/master/docs/delay.html
Defines the CSS styles for the Pageable component, including scaling and transition effects for active pages.
```css
.pg-page {
transform: scale(0.9, 0.9);
transition: all 500ms;
}
.pg-page.pg-active {
transform: scale(1, 1);
}
```
--------------------------------
### JavaScript Callback for Progress Bar Updates
Source: https://github.com/mobius1/pageable/blob/master/docs/progress.html
This JavaScript function, `update`, is designed to be used as a callback to update both radial and linear progress bars. It calculates the progress based on scroll data and applies the necessary styles to the SVG circle and the linear progress bar.
```javascript
const bar = document.querySelector(".bar");
const svg = document.querySelector("svg");
const circle = svg.querySelector("circle");
const r = circle.getAttribute("r");
const circ = 2 * Math.PI * r;
// callback to update the progress bars
function update(data) {
const pos = 1 - ((data.max - data.scrolled) / data.max);
// update radial progress bar
circle.style.strokeDashoffset = circ - (circ * pos);
// update linear progress bar
bar.style.transform = `scale(${pos}, 1)`;
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.