$ show pablof7z/chardin.js
Chardin.js is a jQuery plugin that creates an instructional overlay on web pages, highlighting elements and displaying tooltips based on `data-intro` and `data-position` attributes. It supports both a simultaneous display of all hints and a sequential step-by-step tour mode with automatic or click-based advancement. The plugin dynamically positions helper layers and tooltips relative to target elements, handling scroll and resize events. The architecture is a single-file, self-contained jQuery plugin pattern with an accompanying CSS file. It relies on jQuery 3.5+ and a simple API for starting, stopping, and toggling the overlay. The codebase is functional and well-structured but uses an outdated build chain (CoffeeScript, Rake, node-sass) and lacks modern module bundling or ES6 syntax. The repository appears to have been inactive for several years, with no recent commits or active maintenance.
The LLM identified 2 files worth highlighting for reuse:
Core implementation of the Chardin.js library. It encapsulates all overlay logic in a single `chardinJs` class: adds a dark mask, highlights elements, positions tooltips with configurable offsets and distances, and supports sequential mode with keyboard/click navigation and auto-advance. The class is instantiated as a singleton per selector via the jQuery plugin pattern. Its API (`start`, `stop`, `toggle`, `refresh`) is clean. This component is reusable as a standalone tour overlay library when combined with the CSS; it can be extracted into another project by copying the file and including jQuery and the CSS.
SCSS source for the overlay styling. It uses a Sass map for dynamic distance values (100-1000) to adjust tooltip connecting line lengths, and a mixin for transitions. The resulting CSS provides styles for overlay layers, helper layers, tooltips, and show/hide effects. This component demonstrates non-obvious SCSS feature usage (Sass map iteration to generate multiple distance classes) and could be reused in any overlay-style project by adapting the class names.