$ show alvarotrigo/fullPage.js
fullPage.js is a vanilla JavaScript library for creating full-screen scrolling websites (one-page sites) with vertical/horizontal snap scrolling, sections, and slides. The codebase uses a modular ES6 architecture with separate concerns for scroll handling, mouse/touch input, keyboard navigation, state management, and DOM manipulation. It exports a main class from src/js/fullpage.js with initialization via src/js/app.js. The library manages DOM structure through CSS classes (.fp-section, .fp-slide, .active, .fp-loaded) and maintains global state in src/js/common/state.js. It supports optional jQuery integration via src/js/jquery-adaptor.js and includes polyfills for IE11 compatibility. The build system uses Rollup for bundling and Gulp for asset processing, producing distribution files in dist/. The library features lazy loading for media, responsive breakpoints, and extensive callback hooks for lifecycle management.
The LLM identified 5 files worth highlighting for reuse:
Implements a self-contained event emitter pattern for decoupled event handling. The class provides on(), off(), and emit() methods that allow components to communicate without direct dependencies. This pattern is safely reusable in any JavaScript project requiring event-driven architecture. It demonstrates non-obvious skill in managing event listener registration and cleanup, preventing memory leaks through proper off() implementation.
Centralized options management with getOptions(), setOptions(), and setVariableState() functions. This module handles initialization defaults from optionsDefault.js, merges user-provided options, and maintains reactive state updates. The pattern is reusable for any library requiring configuration management with validation and defaults. It demonstrates skill in handling option validation, merging strategies, and state synchronization across the codebase.
Implements a lazy loading pattern for media elements (img, video, audio) using data-src attributes. The module defers loading until elements enter the viewport, improving initial page load performance. It handles different media types, manages loading states, and integrates with the scroll system to trigger loading at the right time. This pattern is reusable for any project requiring deferred media loading and demonstrates optimization skill in reducing initial bundle size and network requests.
Centralized state object tracking sections, slides, scroll positions, and active elements. Provides setState() and getState() methods for controlled state access. The state object maintains scrollY, scrollX, activeSection, activeSlide, and other critical values used throughout the library. This pattern is reusable for any application requiring centralized state management with controlled access patterns. It demonstrates skill in managing complex state relationships and preventing race conditions during scroll operations.
Base class for Section and Slide components implementing common functionality like element references, index tracking, and state management. Section and Slide classes inherit from Item, reducing code duplication and establishing a clear hierarchy. This pattern is reusable for any component-based architecture requiring shared functionality across related components. It demonstrates skill in creating maintainable inheritance hierarchies and abstracting common behavior.