⚠️ ARCHIVED PROJECT - NO LONGER MAINTAINEDThis project is archived and no longer maintained. Both AngularJS (reached End of Life on December 31, 2021) and the underlying chardin.js library are no longer supported.
For Modern Alternatives, Consider:
- intro.js - Feature-rich library with active maintenance
- driver.js - Lightweight, no dependencies
- shepherd.js - Highly customizable, framework-agnostic
This repository remains available for historical reference and existing users.
Angular Wrapper for chardin.js instruction overlay which was inspired by the Gmail composer tour at the time.
Include the angular-help-overlay js file (min or source), chardin.js, and chardin.css. If you are using grunt and using a bowerInstall task, you probably will still need to manually include chardin.js and chardin.css yourself, however the angular-help-overlay should be injected just fine.
Next, install the module to your app:
angular.module('YourApp', ['angularHelpOverlay'])
...
});
Usage is straightforward: Find the dom element where you want to the overlay to appear (e.g., body, div, etc.) and add this tag to the element:
<body help-overlay="showHelp">...</body>With showHelp being a scoped boolean property. Setting that property to true will enable the overlay. Since this is just an AngularJS wrapper around a jquery plugin, this directive still uses chardin.js native attribute lookups:
<div data-intro="Some Help description here" data-position="top">...</div>data-intro: Text to show with the instructions
data-position: (left, top, right, bottom), where to place the text with respect to the element
Additionally this directive provides delegation of chardin.js start and stop events via, overlay-start-callback and overlay-stop-callback:
<body help-overlay="showHelp" overlay-start-callback="startFn(event)" overlay-stop-callback="stopFn(event)">...</body>events being passed are the original chardin.js event objects.
Note: The chardin.js attributes will not work on elements that get replaced at compile time, particularly those that are angular directives with replace:true. The workaround for this is to enclose the directive with a simple html wrapper element (e.g., <span> or a <div>) with the chardin.js attributes on it.
The example folder contains a modified example of the original chardin.js (i.e., minus the image animate).