bespokejs/bespoke
Bespoke
Bespoke is a lightweight JavaScript presentation framework designed for creating sequenced web presentations. It functions as a DOM-based slide controller and navigation engine that manages the visibility and styling of HTML elements to create presentation flows.
The framework is built around a plugin-based architecture that allows for the extension of core behavior. This system enables the injection of custom logic into the navigation workflow by intercepting and modifying system events, including the ability to cancel specific actions.
The toolkit covers content element definition and state management, using CSS selectors to identify content units and automatically toggling classes based on whether an item is active or inactive. It tracks the current position within a linear sequence to coordinate transitions between elements.
Features
- Slide Presentation Runtimes - Provides a frontend framework that manages navigation, state, and transitions for web-based slide decks.
- Index Navigation - Tracks the current position within a linear sequence to coordinate transitions between active and inactive elements.
- Sequential Navigation State - Controls the sequence of a collection by transitioning between items and tracking the active index.
- Content Element Definition - Allows specifying primary units of content using CSS selectors to filter target elements.
- Event-Hook Extension Systems - Provides a system for intercepting and modifying application events to extend functionality or cancel actions.
- UI Event-Driven Navigation - Manages the sequence and state of content elements through a system of interceptable events.
- Event-Driven Plugin Logic - Implements a system that triggers custom plugin logic based on specific navigation and system events.
- Plugin Architectures - Implements a framework for adding custom behaviors by injecting functions that interact with application state.
- Content Unit Resolution - Identifies primary content units by querying the document with CSS selectors.
- DOM-State Mapping Layers - Synchronizes the internal navigation logic with the physical structure of the page using direct element references.
- Index-Driven Navigation Engines - Tracks active indices and triggers specific callbacks when navigating between defined content elements.
- Presentation Frameworks - Provides a comprehensive framework for building interactive slide-based presentations with state management and rendering tools.
- DOM-Based Slide Orchestrators - Manages presentation state by dynamically manipulating the DOM to display sequenced presentation flows.
- State-Based CSS Toggling - Automatically applies and removes CSS classes on DOM elements based on their active or inactive state.
- Presentation Plugin Systems - Extends the core behavior of the slide system by injecting custom logic into the navigation workflow via plugins.
- Hook-Based Plugin Systems - Uses a hook-based plugin system to allow extending core functionality by registering logic into lifecycle events.
- State-Based Transition Triggers - Triggers events and applies style classes when content items transition between active and inactive states.
- Event Handling Systems - Executes custom logic when specific items activate, deactivate, or when navigation is requested via an event-driven mechanism.
- HTML Slide Decks - Enables the creation of interactive HTML slide decks where elements trigger events based on the active slide.
- Sliders and Carousels - Micro-framework for creating custom presentations.
- Sliders & Carousels - Modular presentation library.
