diff --git a/README.md b/README.md index fe41884..a17f9e4 100644 --- a/README.md +++ b/README.md @@ -13,13 +13,59 @@ See this plugin in action:rocket:: http://bootsnipp.com/snippets/featured/quotwa You can install this module with bower `bower install bootstrap-waitingfor` and include the files from `build` directory. + In your javascript code write something like this: + +**1.Show/Hide** : + ```js waitingDialog.show('I\'m waiting'); setTimeout(function () { waitingDialog.hide(); }, 1000); ``` +**2.message** : + After calling ```show``` function , you can **get** or **update** message of waiting dialog : + ```js + waitingDialog.message() // get the current message , i.e: "Loading" . + waitingDialog.message("Please wait"); // update the waiting dialog message . + ``` + +**3.animate/stopAnimate** : + +```js + //after calling show + a1=waitingDialog.animate(); // will animate "message" passed in "show" function . + + waitingDialog.animate("waiting"); // animate waiting : "waiting..","waiting...." ,"waiting......" ,"waiting.." so on + + waitingDialog.animate("waiting",3000,1000); // change message every 3 secondes + start after delay of 1 seconde + + waitingDialog.animate(["wait","wait..","please wait ..."]); loop without stopping on the array elements and change message + + var a2=waitingDialog.animate(function(container){ + container.html(new Date()) + },1000) ; + //---> the message will be the current Date/Time on real Time . + + /** + *********************** stopAnimate ******************************************************** + * mean stop change message + */ + waitingDialog.stopAnimate(a1); + + +``` + +**4.progress** : + + ```js + waitingDialog.progress(); //get current progress-bar value , default : 100 + waitingDialog.progress(70) ; // progress 70% + waitingDialog.progress(40,80) // progress 50% (because the total 80 is twice the current which is 40) + + ``` + See `src/waitingfor.js` for additional options. diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 3a2c1d3..0698051 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -2,6 +2,7 @@ * Module for displaying "Waiting for..." dialog using Bootstrap * * @author Eugene Maslovich + * */ (function (root, factory) { @@ -44,8 +45,8 @@ } // Dialog object - var $dialog; - + var $dialog,config,cache={}; + return { /** * Opens our dialog @@ -79,10 +80,13 @@ progressType: '', contentElement: 'p', contentClass: 'content', + rtl:true, + timer:500, //useful for animate function + timeout:0,//useful for animate function onHide: null // This callback runs after the dialog was hidden }, options), $headerTag, $contentTag; - + config= settings; $dialog = constructDialog($dialog); // Configuring dialog @@ -91,7 +95,9 @@ if (settings.progressType) { $dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType); } - + if(settings.rtl){ + $dialog.find('.progress-bar').css('float','right').end().attr('dir','rtl') + } // Generate header tag $headerTag = $(''); $headerTag.css({ 'margin': 0 }); @@ -137,7 +143,113 @@ if (typeof $dialog !== 'undefined') { $dialog.modal('hide'); } + }, + /** + * Changes or displays current dialog message + * @author Abdennour TOUMI + */ + message: function (newMessage) { + if (typeof $dialog !== 'undefined') { + if (typeof newMessage !== 'undefined') { + return $dialog.find('.modal-header>h'+config.headerSize).html(newMessage); + } + else { + return $dialog.find('.modal-header>h'+config.headerSize).html(); + } + } } + /** + * animate the message every period equals to 'timer', + * and starts this animation after a delay equals to 'timeout' + * + * + * @param messages can be : + * - string : it will be an array , i.e: messages="waitings"--> messages=["waiting..","waiting....",""waiting"......"] + * - array + * - function + * @param timer period + * @param timeout if it is 0 -> starts immediatly + * + * @return id of periodic job + * @author Abdennour TOUMI + * */ + ,animate:function(messages,timer,timeout){ + timer=timer ||config.timer; + timeout=timeout||config.timeout; + + messages=messages||$dialog.find('.modal-header>h'+config.headerSize).html(); + cache.animate=cache.animate || []; + if(typeof messages ==='string'){ + + + messages=['..','....','......'].map(function(e){ + return messages+e; + }) ; + } + + if(typeof messages ==='object' && messages instanceof Array){ + var old=messages; + messages=function(container){ + var current=old.indexOf(container.html()); + if(current<0){ + container.html(old[0]); + }else{ + var indx=(current+1>=old.length)?0:current+1 + container.html(old[indx]); + + } + } + + } + + if(typeof messages ==="function"){ + if(timeouth'+config.headerSize)) + },timeout) + } + var job= setInterval(function(){ + messages.call($dialog,$dialog.find('.modal-header>h'+config.headerSize)) + },timer); + cache.animate.push(job); + return job; + } + + + + }, + /** + * stop job with specified id . + if no id specified , stopAnimate will stop the last running job . + *@param id + * @author Abdennour TOUMI + */ + + stopAnimate:function(id){ + id=id || cache.animate[cache.animate.length-1]; + clearInterval(id); + delete cache.animate[cache.animate.indexOf(id)]; + return $dialog; + }, + /** + * @param percentOrCurrent + * @param total + * Calling with : + * - No Arguement --> get the current progress + * - One Argument --> "percentOrCurrent" is the percent of progress + * - Two Argument ---> "percentOrCurrent" is the current amount, "total" is the total amount . + *@author Abdennour TOUMI + */ + progress:function(percentOrCurrent,total){ + if(!arguments.length){ + return parseInt($dialog.find('.progress-bar')[0].style.width); + } + if(total){ + percentOrCurrent=parseInt(percentOrCurrent/total*100); + } + $dialog.find('.progress-bar').css('width',percentOrCurrent+'%'); + return $dialog; + } }; })); diff --git a/build/bootstrap-waitingfor.min.js b/build/bootstrap-waitingfor.min.js index 25003ac..94043ff 100644 --- a/build/bootstrap-waitingfor.min.js +++ b/build/bootstrap-waitingfor.min.js @@ -1 +1 @@ -!function(e,d){"use strict";"function"==typeof define&&define.amd?define(["jquery"],function(a){return e.waitingDialog=d(a)}):e.waitingDialog=e.waitingDialog||d(e.jQuery)}(this,function(e){"use strict";function d(d){return d&&d.remove(),e('')}var a;return{show:function(i,o){"undefined"==typeof o&&(o={}),"undefined"==typeof i&&(i="Loading");var s,n,t=e.extend({headerText:"",headerSize:3,headerClass:"",dialogSize:"m",progressType:"",contentElement:"p",contentClass:"content",onHide:null},o);a=d(a),a.find(".modal-dialog").attr("class","modal-dialog").addClass("modal-"+t.dialogSize),a.find(".progress-bar").attr("class","progress-bar"),t.progressType&&a.find(".progress-bar").addClass("progress-bar-"+t.progressType),s=e(""),s.css({margin:0}),t.headerClass&&s.addClass(t.headerClass),n=e("<"+t.contentElement+" />"),t.contentClass&&n.addClass(t.contentClass),t.headerText===!1?(n.html(i),a.find(".modal-body").prepend(n)):t.headerText?(s.html(t.headerText),a.find(".modal-header").html(s).show(),n.html(i),a.find(".modal-body").prepend(n)):(s.html(i),a.find(".modal-header").html(s).show()),"function"==typeof t.onHide&&a.off("hidden.bs.modal").on("hidden.bs.modal",function(){t.onHide.call(a)}),a.modal()},hide:function(){"undefined"!=typeof a&&a.modal("hide")}}}); \ No newline at end of file +!function(e,a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],function(d){return e.waitingDialog=a(d)}):e.waitingDialog=e.waitingDialog||a(e.jQuery)}(this,function(e){"use strict";function a(a){return a&&a.remove(),e('')}var d,t,n={};return{show:function(n,i){"undefined"==typeof i&&(i={}),"undefined"==typeof n&&(n="Loading");var r,o,s=e.extend({headerText:"",headerSize:3,headerClass:"",dialogSize:"m",progressType:"",contentElement:"p",contentClass:"content",rtl:!0,timer:500,timeout:0,onHide:null},i);t=s,d=a(d),d.find(".modal-dialog").attr("class","modal-dialog").addClass("modal-"+s.dialogSize),d.find(".progress-bar").attr("class","progress-bar"),s.progressType&&d.find(".progress-bar").addClass("progress-bar-"+s.progressType),s.rtl&&d.find(".progress-bar").css("float","right").end().attr("dir","rtl"),r=e(""),r.css({margin:0}),s.headerClass&&r.addClass(s.headerClass),o=e("<"+s.contentElement+" />"),s.contentClass&&o.addClass(s.contentClass),s.headerText===!1?(o.html(n),d.find(".modal-body").prepend(o)):s.headerText?(r.html(s.headerText),d.find(".modal-header").html(r).show(),o.html(n),d.find(".modal-body").prepend(o)):(r.html(n),d.find(".modal-header").html(r).show()),"function"==typeof s.onHide&&d.off("hidden.bs.modal").on("hidden.bs.modal",function(){s.onHide.call(d)}),d.modal()},hide:function(){"undefined"!=typeof d&&d.modal("hide")},message:function(e){return"undefined"!=typeof d?"undefined"!=typeof e?d.find(".modal-header>h"+t.headerSize).html(e):d.find(".modal-header>h"+t.headerSize).html():void 0},animate:function(e,a,i){if(a=a||t.timer,i=i||t.timeout,e=e||d.find(".modal-header>h"+t.headerSize).html(),n.animate=n.animate||[],"string"==typeof e&&(e=["..","....","......"].map(function(a){return e+a})),"object"==typeof e&&e instanceof Array){var r=e;e=function(e){var a=r.indexOf(e.html());if(0>a)e.html(r[0]);else{var d=a+1>=r.length?0:a+1;e.html(r[d])}}}if("function"==typeof e){a>i&&setTimeout(function(){e.call(d,d.find(".modal-header>h"+t.headerSize))},i);var o=setInterval(function(){e.call(d,d.find(".modal-header>h"+t.headerSize))},a);return n.animate.push(o),o}},stopAnimate:function(e){return e=e||n.animate[n.animate.length-1],clearInterval(e),delete n.animate[n.animate.indexOf(e)],d},progress:function(e,a){return arguments.length?(a&&(e=parseInt(e/a*100)),d.find(".progress-bar").css("width",e+"%"),d):parseInt(d.find(".progress-bar")[0].style.width)}}}); diff --git a/src/waitingfor.js b/src/waitingfor.js index 53e1e7a..2dfebf4 100644 --- a/src/waitingfor.js +++ b/src/waitingfor.js @@ -2,6 +2,7 @@ * Module for displaying "Waiting for..." dialog using Bootstrap * * @author Eugene Maslovich + * */ (function (root, factory) { @@ -44,8 +45,8 @@ } // Dialog object - var $dialog; - + var $dialog,config,cache={}; + return { /** * Opens our dialog @@ -79,11 +80,13 @@ progressType: '', contentElement: 'p', contentClass: 'content', - onHide: null, // This callback runs after the dialog was hidden - onShow: null // This callback runs after the dialog was shown + rtl:true, + timer:500, //useful for animate function + timeout:0,//useful for animate function + onHide: null // This callback runs after the dialog was hidden }, options), $headerTag, $contentTag; - + config= settings; $dialog = constructDialog($dialog); // Configuring dialog @@ -92,7 +95,9 @@ if (settings.progressType) { $dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType); } - + if(settings.rtl){ + $dialog.find('.progress-bar').css('float','right').end().attr('dir','rtl') + } // Generate header tag $headerTag = $(''); $headerTag.css({ 'margin': 0 }); @@ -128,11 +133,6 @@ settings.onHide.call($dialog); }); } - if (typeof settings.onShow === 'function') { - $dialog.off('shown.bs.modal').on('shown.bs.modal', function () { - settings.onShow.call($dialog); - }); - } // Opening dialog $dialog.modal(); }, @@ -143,8 +143,113 @@ if (typeof $dialog !== 'undefined') { $dialog.modal('hide'); } + }, + /** + * Changes or displays current dialog message + * @author Abdennour TOUMI + */ + message: function (newMessage) { + if (typeof $dialog !== 'undefined') { + if (typeof newMessage !== 'undefined') { + return $dialog.find('.modal-header>h'+config.headerSize).html(newMessage); + } + else { + return $dialog.find('.modal-header>h'+config.headerSize).html(); + } + } } + /** + * animate the message every period equals to 'timer', + * and starts this animation after a delay equals to 'timeout' + * + * + * @param messages can be : + * - string : it will be an array , i.e: messages="waitings"--> messages=["waiting..","waiting....",""waiting"......"] + * - array + * - function + * @param timer period + * @param timeout if it is 0 -> starts immediatly + * + * @return id of periodic job + * @author Abdennour TOUMI + * */ + ,animate:function(messages,timer,timeout){ + timer=timer ||config.timer; + timeout=timeout||config.timeout; + + messages=messages||$dialog.find('.modal-header>h'+config.headerSize).html(); + cache.animate=cache.animate || []; + if(typeof messages ==='string'){ + + + messages=['..','....','......'].map(function(e){ + return messages+e; + }) ; + } + + if(typeof messages ==='object' && messages instanceof Array){ + var old=messages; + messages=function(container){ + var current=old.indexOf(container.html()); + if(current<0){ + container.html(old[0]); + }else{ + var indx=(current+1>=old.length)?0:current+1 + container.html(old[indx]); + + } + } + + } + + if(typeof messages ==="function"){ + if(timeouth'+config.headerSize)) + },timeout) + } + var job= setInterval(function(){ + messages.call($dialog,$dialog.find('.modal-header>h'+config.headerSize)) + },timer); + cache.animate.push(job); + return job; + } + + + + }, + /** + * stop job with specified id . + if no id specified , stopAnimate will stop the last running job . + *@param id + * @author Abdennour TOUMI + */ + + stopAnimate:function(id){ + id=id || cache.animate[cache.animate.length-1]; + clearInterval(id); + delete cache.animate[cache.animate.indexOf(id)]; + return $dialog; + }, + /** + * @param percentOrCurrent + * @param total + * Calling with : + * - No Arguement --> get the current progress + * - One Argument --> "percentOrCurrent" is the percent of progress + * - Two Argument ---> "percentOrCurrent" is the current amount, "total" is the total amount . + *@author Abdennour TOUMI + */ + progress:function(percentOrCurrent,total){ + if(!arguments.length){ + return parseInt($dialog.find('.progress-bar')[0].style.width); + } + if(total){ + percentOrCurrent=parseInt(percentOrCurrent/total*100); + } + $dialog.find('.progress-bar').css('width',percentOrCurrent+'%'); + return $dialog; + } }; })); -