pmelab / hurricane Goto Github PK
View Code? Open in Web Editor NEWAdvanced ajax loading spinners for Drupal.
Advanced ajax loading spinners for Drupal.
# Hurricane Drupal 7 module to add CSS-styleable loading spinners. ## What does it do? Provides easily styleable and extendable **throbbers** (the spinning AJAX progress indicator) and optionally replaces the Drupal standard throbber. ## Installation Copy the *[libraries]* and *hurricane* modules into a Drupal `modules` folder and either the [Raphaël][raphael] or [Spin.js][spinjs] library into a `libraries` folder. Hurricane consists of a core module and three extensions which may be activated independently: - **hurricane:** The main module, providing the hurricane jQuery plugin. Required by all other modules. - **hurricane_integration:** Deeper integration of hurricane into Drupal. Automatically replaces Drupal Ajax throbbers with hurricane and provides theme settings. *Without this module, you won't see any throbbers unless you attach them manually, by using the `$.hurricane()` jQuery plugin in your javascript code!* - **hurricane_raphael:** [Raphaël][raphael] based SVG/VML renderers. Requires [Raphaël][raphael] library to be installed in a libraries compliant subfolder. - **hurricane_spinjs:** Renderer based on [Spin.js][spinjs]. Requires [Spin.js][spinjs] library to be installed in a libraries compliant subfolder. - **hurricane_tests:** A test page `hurricane/test` which displays hurricane renderers configured in a theme. ### Libraries Hurricane may use [Raphaël][raphael] or [Spin.js][spinjs] to draw more sophisticated throbber animations. They are both optional, but if you want to try out Hurricane, you want them both. For production you will use either one of them or a custom renderer you write yourself. Download [raphael-min.js][raphaelmin] and place it in a `raphael` subdirectory in any of these libraries folders. sites/all/libraries/raphael/raphael-min.js sites/[mydomain.com]/libraries/raphael/raphael-min.js profiles/[myprofile]/libraries/raphael/raphael-min.js There is a [raphael module][raphmod] for drupal, which has not been updated for a long time and is currently not compatible with hurricane. I'm looking for a way to fix this. For using [Spin.js][spinjs], download [spin.js][spinjsmin] and place it in a `spinjs` libraries folder. sites/all/libraries/spinjs/spin.js sites/[mydomain.com]/libraries/spinjs/spin.js profiles/[myprofile]/libraries/spinjs/spin.js ## Usage Activate `hurricane`, `hurricane_integration` and `hurricane_raphael` / `hurricane_spinjs`, navigate to your theme's settings page and configure available renderers. After saving the available renderers setting an additional group appears, where the appearance of the standard renderer may be configured. Renderers may be styled independently in the CSS sheet. A CSS-Snippet is generated on the fly in the appearance configurations *"Export"* group. ### Included renderers Hurricane uses replacable plugins, called *renderers*, to draw the animated throbber. `hurricane` itself provides the *Drop*, a simple pulsating CSS3 dot. Nothing fancy. With `hurricane_raphael` the *Hurricane* and *Twister* renderers are enabled. Additionally it includes a new class for [Raphaël][raphael] based renderers for you to build upon. [Raphaël][raphael] is quite big (31Kb gzipped), and if you don't use it in your project anyway, the throbbers alone may not justify the additional filesize. Your choice. `hurricane_spinjs` uses the [Spin.js][spinjs] library to provide a throbber called *Spin.js*, similiar to the *Hurricane* included in `hurricane_raphael`. Far more lightweight, but less fancy. I'm planning to add more renderer animations out of the box. Suggestions are welcome! ## Extend To add a completely new renderer, a module has to implement `hook_hurricane_renderers()`, which returns an array of machine readable identifiers associated with information about the new renderer: - **label:** A human readable label for the renderer. - **parameters:** CSS parameters the renderer accepts, as an array with CSS-properties as keys and information arrays as values. - *label:* Human readable title, describing what the property is used for. - *default:* A default value for this property. - **js/css/library:** Attach Javascript and CSS resources which should be loaded for this renderer. Behaves exactly like [\#attached][attached] in Forms. At least one javascript file, containing the renderers implementation, should be registered. The javascript implementation of the renderer has to extend `$.hurricane.base`, which defines the following interface: - `init(element)`: The constructor. The document element the throbber should be rendered into is passed as argument. - `setup()`: Called after construction. Parsed CSS-properties are passed as `options` argument. - `start()`: The throbber should start to spin, jump, dance or whatever you have in mind. - `stop()`: Tells the throbber to stand still again. - `destroy()`: Called before the throbber is hidden, to do any necessary cleanup work. ### Parameters These CSS-Properties and according values are available as parameters. - `line-height`: 0 - 100 - `text-indent`: 0 - 100 - `word-spacing`: 0 - 100 - `letter-spacing`: 0 - 100 - `font-size`: 0 - 100 - `font-weight`: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 - `text-transform`: none | capitalize | uppercase - `text-decoration`: none | underline | overline | line-through | blink - `text-align`: left | right | center | justify - `white-space`: normal | pre | nowrap | pre-wrap | pre-line - `font-style`: normal | italic | oblique - `color`: *any hex color value* - `background-color`: *any hex color value* ### Example Implementation of `hook_hurricane_renderers()`: function mymodule_hurricane_renderers() { return array( 'my_throbber' => array( 'label' => t('My Throbber'), 'js' => array( 'path/to/mymodule/mythrobber.js' => array(), ), 'parameters' => array( 'line-height' => array('label' => t('Size'), 'default' => 50), 'color' => array('label' => t('Color'), 'default' => '#3182c5'), ), ), ); } Javascript implementation in `mythrobber.js`. For more sophisticated examples look at `hurricane/drop.js` or `hurricane/hurricane_raphael/hurricane.js`. (function($) { $.hurricane.mythrobber = $.hurricane.base.extend({ init: function (element) { // Prepare and store the anchor element. }, setup: function (options) { // Interpret and store options. }, start: function () { // Dance like the world is ending! }, stop: function () { // Stop dancing! }, destroy: function () { // Clean up allocated objects. } }); }(jQuery)); *The module has been developed by [Philipp Melab][pm] and sponsored by [Zensations - web & communcations][zen].* [spinjs]: http://fgnass.github.com/spin.js/ "Spin.js" [spinjsmin]: http://fgnass.github.com/spin.js/dist/spin.js "Spin.js Source" [raphael]: http://raphaeljs.com/ "Raphaël" [raphaelmin]: http://tinyurl.com/bwp4wam "Raphaël Source" [raphmod]: http://drupal.org/project/raphael "Raphaël module on drupal.org" [zen]: http://www.zensations.at "Zensations - web & communications" [pm]: http://drupal.org/user/555322 "User Profile: Philipp Melab" [attached]: http://tinyurl.com/cxzn4cp "Drupal Form API Reference: #attached" [libraries]: http://drupal.org/project/libraries "Libraries API"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.