jQuery plugin that provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening
npm install widgsterWidgster
======================
Small jQuery plugin that provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening.
Use
------------
To apply all these features to your default widget you have to add appropriate links (or buttons) to it:
In the example above links are put into a .widget-controls but you can put them anywhere inside of widget.
Then widgster needs to be initialized via javascript:
$('.widget').widgster();
As you could guess data-widgster attribute defines widget action to be performed when link is clicked.
Actions
------------
* close - closes the widget;
* collapse - collapses (minimizes) the widget. An element holding this data attribute will be hidden when widget gets expanded;
* expand - expands the widget. An element holding this data attribute will be hidden when widget gets collapsed;
* fullscreen - fullscreens the widget. An element holding this data attribute will be hidden when widget gets restored;
* restore - restores the widget back to its position. An element holding this data attribute will be hidden when widget gets fullscreened;
* load - reloads widget content from the url provided with data-widget-load attribute.
All actions may be called via js:
$('.widget').widgster('close');
Options
------------
* collapsed - if true collapses widget after page load;
* fullscreened - if true fullscreens widget after page load;
* bodySelector - widget body selector. Used for loading and collapsing. Default is .body;
* load - an url to fetch widget body from. Default is undefined;
* showLoader - whether to show a loader when ajax refresh performed. Default is true;
* autoload - whether to automatically perform ajax refresh after page load. May be set to an integer value. If set, for example, to 2000 will refresh the widget every 2 seconds. Default is false;
* closePrompt(callback) - a function to be called when closing. Closing is only performed when callback is called.
Widgster accepts an object with options:
$('.widget').widgster({
collapsed: true
});
Events
------------
Each action fires both before and after event. Events have the same names as actions. Before event may be canceled.
For example, to make refresh button spin:
$('.widget').on("load.widgster", function(){
$(this).find('[data-widgster="load"] > i').addClass('fa-spin')
}).on("loaded.widgster", function(){
$(this).find('[data-widgster="load"] > i').removeClass('fa-spin')
});