From 7f0be95de37dc786b28655b37645c2284e49a54a Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 07:03:26 +0300 Subject: [PATCH 01/19] message, animate, stopAnimate functions --- build/bootstrap-waitingfor.js | 61 +++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 3a2c1d3..0c8f3c5 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -137,7 +137,68 @@ if (typeof $dialog !== 'undefined') { $dialog.modal('hide'); } + }, + /** + * Changes or displays current dialog message + */ + message: function (newMessage) { + if (typeof $dialog !== 'undefined') { + if (typeof newMessage !== 'undefined') { + return $dialog.find('.modal-header>h'+settings.headerSize).html(newMessage); + } + else { + return $dialog.find('.modal-header>h'+settings.headerSize).html(); + } + } } + /** + * animate the message every period equals to 'timer', + * and starts this animation after a delay equals to 'timeout' + * + * + * @messages can be : + * - string : it will be an array , i.e: messages="waitings"--> messages=["waiting..","waiting....",""waiting"......"] + * - array + * - function + * @timer period + * @timeout if it is 0 -> starts immediatly + * */ + ,animate:function(messages,timer,timeout){ + timer=timer || 500; + timeout=timeout||0; + if(typeof messages ==='string'){ + + messages=['..','....','......'].map(function(e){ + return messages+e; + }) ; + } + + if(typeof messages ==='object' && messages instanceof Array){ + messages=function(container){ + var current=messages.indexOf(container.html()); + if(current<0){ + container.html(messages[0]); + }else{ + var indx=(current+1>messages.length)?0:current+1 + container.html(messages[indx]); + + } + } + + } + if(timeout Date: Tue, 17 Nov 2015 07:06:58 +0300 Subject: [PATCH 02/19] pass args to animate callback --- build/bootstrap-waitingfor.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 0c8f3c5..258d9ed 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -186,11 +186,16 @@ } } - if(timeouth'+settings.headerSize)) + },timeout) + } + return setInterval(function(){ + messages.call($dialog,$dialog.find('.modal-header>h'+settings.headerSize)) + },timer); } From 5284bfefadde50bb7b9371c4fe0931c1029a851a Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 07:10:59 +0300 Subject: [PATCH 03/19] make settings a shared variable --- build/bootstrap-waitingfor.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 258d9ed..36574fb 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -45,7 +45,7 @@ // Dialog object var $dialog; - + var config; return { /** * Opens our dialog @@ -82,7 +82,7 @@ onHide: null // This callback runs after the dialog was hidden }, options), $headerTag, $contentTag; - + config= settings; $dialog = constructDialog($dialog); // Configuring dialog @@ -144,10 +144,10 @@ message: function (newMessage) { if (typeof $dialog !== 'undefined') { if (typeof newMessage !== 'undefined') { - return $dialog.find('.modal-header>h'+settings.headerSize).html(newMessage); + return $dialog.find('.modal-header>h'+config.headerSize).html(newMessage); } else { - return $dialog.find('.modal-header>h'+settings.headerSize).html(); + return $dialog.find('.modal-header>h'+config.headerSize).html(); } } } @@ -190,11 +190,11 @@ if(typeof messages ==="function"){ if(timeouth'+settings.headerSize)) + messages.call($dialog,$dialog.find('.modal-header>h'+config.headerSize)) },timeout) } return setInterval(function(){ - messages.call($dialog,$dialog.find('.modal-header>h'+settings.headerSize)) + messages.call($dialog,$dialog.find('.modal-header>h'+config.headerSize)) },timer); } From 494f89747172fe52df223db29c0737f6d1633def Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 07:15:01 +0300 Subject: [PATCH 04/19] rectify "message" function , add "animate" & "stopAnimate" functions - rectify message function. - Add animate function - Add stopAnimate function --- build/bootstrap-waitingfor.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 36574fb..4fa138b 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -162,6 +162,8 @@ * - function * @timer period * @timeout if it is 0 -> starts immediatly + * + * @return id of periodic job * */ ,animate:function(messages,timer,timeout){ timer=timer || 500; @@ -174,13 +176,14 @@ } if(typeof messages ==='object' && messages instanceof Array){ + var old=messages; messages=function(container){ - var current=messages.indexOf(container.html()); + var current=old.indexOf(container.html()); if(current<0){ - container.html(messages[0]); + container.html(old[0]); }else{ - var indx=(current+1>messages.length)?0:current+1 - container.html(messages[indx]); + var indx=(current+1>old.length)?0:current+1 + container.html(old[indx]); } } From f48d311b8a0c0d1d1c4c521638effb8fd17e5a15 Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 07:19:27 +0300 Subject: [PATCH 05/19] Animate function : fix bug if array , rectify loop --- build/bootstrap-waitingfor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 4fa138b..5e45bcc 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -182,7 +182,7 @@ if(current<0){ container.html(old[0]); }else{ - var indx=(current+1>old.length)?0:current+1 + var indx=(current+1>=old.length)?0:current+1 container.html(old[indx]); } From d9a6acb3c6f7d8a5444fa1313b03ccfa4ca2c44f Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 08:30:10 +0300 Subject: [PATCH 06/19] two new features in animate function - you can pass "timer" && "timeout" as global settings , the "animate" function will reuse them if you don't specify argument 2 AND/OR argument 3 - you can call ```animate ``` function without argument , then, the animated message will be the message set on calling on ```show``` function . --- build/bootstrap-waitingfor.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 5e45bcc..2aef6b0 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -79,6 +79,8 @@ progressType: '', contentElement: 'p', contentClass: 'content', + 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; @@ -166,9 +168,11 @@ * @return id of periodic job * */ ,animate:function(messages,timer,timeout){ - timer=timer || 500; - timeout=timeout||0; + timer=timer ||config.timer; + timeout=timeout||config.timeout; + messages=messages||$dialog.message(); if(typeof messages ==='string'){ + messages=['..','....','......'].map(function(e){ return messages+e; From 4982d350f3dc4c3d0c80bdf2d538f758a69b6ce2 Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 08:55:08 +0300 Subject: [PATCH 07/19] Caching : new feature in stopAnimate - calling ``` stopAnimate``` without argument means --> stop the last running job . --- build/bootstrap-waitingfor.js | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 2aef6b0..a04c60c 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 config; + var $dialog,config,cache={}; + return { /** * Opens our dialog @@ -142,6 +143,7 @@ }, /** * Changes or displays current dialog message + * @author Abdennour TOUMI */ message: function (newMessage) { if (typeof $dialog !== 'undefined') { @@ -158,19 +160,21 @@ * and starts this animation after a delay equals to 'timeout' * * - * @messages can be : + * @param messages can be : * - string : it will be an array , i.e: messages="waitings"--> messages=["waiting..","waiting....",""waiting"......"] * - array * - function - * @timer period - * @timeout if it is 0 -> starts immediatly + * @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.message(); + cache.animate=cache.animate || []; if(typeof messages ==='string'){ @@ -200,16 +204,28 @@ messages.call($dialog,$dialog.find('.modal-header>h'+config.headerSize)) },timeout) } - return setInterval(function(){ + var job= setInterval(function(){ messages.call($dialog,$dialog.find('.modal-header>h'+config.headerSize)) },timer); + cache.animate.push(job); + return job; } - },stopAnimate:function(id){ - return clearInterval(id); - + }, + /* + * stop job with specified id . + if no id specified , stopAnimate will stop the last running job . + *@param id + + */ + + stopAnimate:function(id){ + id=id || cache.animate[cache.animate.length-1]; + clearInterval(id); + delete cache.animate[cache.animate.indexOf(id)]; + return $dialog; } }; From 356ce52749e004c973fd8d20d359bf5d20a2845f Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 08:58:20 +0300 Subject: [PATCH 08/19] Update bootstrap-waitingfor.js --- build/bootstrap-waitingfor.js | 1 + 1 file changed, 1 insertion(+) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index a04c60c..a19d954 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -173,6 +173,7 @@ ,animate:function(messages,timer,timeout){ timer=timer ||config.timer; timeout=timeout||config.timeout; + console.log($dialog) messages=messages||$dialog.message(); cache.animate=cache.animate || []; if(typeof messages ==='string'){ From 0cce270acfa150c629cc987c51e43a6a116f50b0 Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 09:01:05 +0300 Subject: [PATCH 09/19] Animate function : fix bug - bug if no argument -> get the current message and animate it --- build/bootstrap-waitingfor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index a19d954..54ec8bc 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -173,8 +173,8 @@ ,animate:function(messages,timer,timeout){ timer=timer ||config.timer; timeout=timeout||config.timeout; - console.log($dialog) - messages=messages||$dialog.message(); + + messages=messages||$dialog.find('.modal-header>h'+config.headerSize).html(); cache.animate=cache.animate || []; if(typeof messages ==='string'){ From a439af2b29dac24d173f3ea4fbe8cd8fe45066ed Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 09:09:22 +0300 Subject: [PATCH 10/19] progress function Calling with : - One Argument --> "percentOrCurrent" is the percent of progress - Two Argument ---> "percentOrCurrent" is the current amount, "total" is the total amount . --- build/bootstrap-waitingfor.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 54ec8bc..1760236 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -219,7 +219,7 @@ * stop job with specified id . if no id specified , stopAnimate will stop the last running job . *@param id - + * @author Abdennour TOUMI */ stopAnimate:function(id){ @@ -227,6 +227,21 @@ clearInterval(id); delete cache.animate[cache.animate.indexOf(id)]; return $dialog; + }, + /* + * @param percentOrCurrent + * @param total + * Calling with : + * - 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(total){ + percentOrCurrent=parseInt(percentOrCurrent/total*100); + } + $dialog.find('.progress-bar').css('width',percentOrCurrent+'%'); + return $dialog; } }; From 96ccb764ca9cef1b2c85ad3eff4a715fa6473abd Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 09:23:42 +0300 Subject: [PATCH 11/19] comment to jsdoc --- build/bootstrap-waitingfor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 1760236..29e3bec 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -215,7 +215,7 @@ }, - /* + /** * stop job with specified id . if no id specified , stopAnimate will stop the last running job . *@param id @@ -228,7 +228,7 @@ delete cache.animate[cache.animate.indexOf(id)]; return $dialog; }, - /* + /** * @param percentOrCurrent * @param total * Calling with : From 030d7a5a5004ff12d903a3746299082d2885d7d9 Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 09:31:44 +0300 Subject: [PATCH 12/19] getter for progress function --- build/bootstrap-waitingfor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 29e3bec..ecde61c 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -232,11 +232,15 @@ * @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').css('width')); + } if(total){ percentOrCurrent=parseInt(percentOrCurrent/total*100); } From 7fc2c5b0b2c1fac05c6245cd1e780b1ad22b9f1c Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 09:55:57 +0300 Subject: [PATCH 13/19] progress function:fix bug of getter use js not jquery to get the current width --- build/bootstrap-waitingfor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index ecde61c..1d1c6b5 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -239,7 +239,7 @@ */ progress:function(percentOrCurrent,total){ if(!arguments.length){ - return parseInt($dialog.find('.progress-bar').css('width')); + return parseInt($dialog.find('.progress-bar')[0].style.width;); } if(total){ percentOrCurrent=parseInt(percentOrCurrent/total*100); From 7ca2c51f0044b353e96594373aac652a77bfd475 Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 09:56:19 +0300 Subject: [PATCH 14/19] progress function:fix bug of getter use js not jquery to get the current width --- build/bootstrap-waitingfor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index 1d1c6b5..b263ab2 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -239,7 +239,7 @@ */ progress:function(percentOrCurrent,total){ if(!arguments.length){ - return parseInt($dialog.find('.progress-bar')[0].style.width;); + return parseInt($dialog.find('.progress-bar')[0].style.width); } if(total){ percentOrCurrent=parseInt(percentOrCurrent/total*100); From f2b0e877eb139b37dcf73f1a46517b0e5a2b6c25 Mon Sep 17 00:00:00 2001 From: abdennour Date: Tue, 17 Nov 2015 10:37:17 +0300 Subject: [PATCH 15/19] message, animate, stopAnimate & progress func doc --- README.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) 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. From d52d802758dcf209ddf68d3c2e08cace2ea0789a Mon Sep 17 00:00:00 2001 From: abdennour Date: Wed, 18 Nov 2015 08:55:18 +0300 Subject: [PATCH 16/19] message, animate, stopAnimate & progress func minify --- build/bootstrap-waitingfor.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/bootstrap-waitingfor.min.js b/build/bootstrap-waitingfor.min.js index 25003ac..a28d30c 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 o,r,s=e.extend({headerText:"",headerSize:3,headerClass:"",dialogSize:"m",progressType:"",contentElement:"p",contentClass:"content",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),o=e(""),o.css({margin:0}),s.headerClass&&o.addClass(s.headerClass),r=e("<"+s.contentElement+" />"),s.contentClass&&r.addClass(s.contentClass),s.headerText===!1?(r.html(n),d.find(".modal-body").prepend(r)):s.headerText?(o.html(s.headerText),d.find(".modal-header").html(o).show(),r.html(n),d.find(".modal-body").prepend(r)):(o.html(n),d.find(".modal-header").html(o).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 o=e;e=function(e){var a=o.indexOf(e.html());if(0>a)e.html(o[0]);else{var d=a+1>=o.length?0:a+1;e.html(o[d])}}}if("function"==typeof e){a>i&&setTimeout(function(){e.call(d,d.find(".modal-header>h"+t.headerSize))},i);var r=setInterval(function(){e.call(d,d.find(".modal-header>h"+t.headerSize))},a);return n.animate.push(r),r}},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)}}}); From e79106e7b59de65cbb1bdb4a1cf5e5e6cc5a631d Mon Sep 17 00:00:00 2001 From: abdennour Date: Wed, 18 Nov 2015 09:54:57 +0300 Subject: [PATCH 17/19] Right To Left Feature RTL Since our language is arabic , rtl=true is default . If you want LTR , ```js waitingDialog.show('waiting..',{rtl:false}) ``` --- build/bootstrap-waitingfor.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/build/bootstrap-waitingfor.js b/build/bootstrap-waitingfor.js index b263ab2..0698051 100644 --- a/build/bootstrap-waitingfor.js +++ b/build/bootstrap-waitingfor.js @@ -80,6 +80,7 @@ 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 @@ -94,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 }); From 1f8aca4ebc552818f70c34e810b1e1fceaaf42f6 Mon Sep 17 00:00:00 2001 From: abdennour Date: Wed, 18 Nov 2015 09:56:10 +0300 Subject: [PATCH 18/19] Right To Left Feature RTL : minify --- build/bootstrap-waitingfor.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/bootstrap-waitingfor.min.js b/build/bootstrap-waitingfor.min.js index a28d30c..94043ff 100644 --- a/build/bootstrap-waitingfor.min.js +++ b/build/bootstrap-waitingfor.min.js @@ -1 +1 @@ -!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 o,r,s=e.extend({headerText:"",headerSize:3,headerClass:"",dialogSize:"m",progressType:"",contentElement:"p",contentClass:"content",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),o=e(""),o.css({margin:0}),s.headerClass&&o.addClass(s.headerClass),r=e("<"+s.contentElement+" />"),s.contentClass&&r.addClass(s.contentClass),s.headerText===!1?(r.html(n),d.find(".modal-body").prepend(r)):s.headerText?(o.html(s.headerText),d.find(".modal-header").html(o).show(),r.html(n),d.find(".modal-body").prepend(r)):(o.html(n),d.find(".modal-header").html(o).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 o=e;e=function(e){var a=o.indexOf(e.html());if(0>a)e.html(o[0]);else{var d=a+1>=o.length?0:a+1;e.html(o[d])}}}if("function"==typeof e){a>i&&setTimeout(function(){e.call(d,d.find(".modal-header>h"+t.headerSize))},i);var r=setInterval(function(){e.call(d,d.find(".modal-header>h"+t.headerSize))},a);return n.animate.push(r),r}},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)}}}); +!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)}}}); From 5b5d1b8e6bf8fa155d115dbd1000dae404554a2b Mon Sep 17 00:00:00 2001 From: abdennour Date: Wed, 18 Nov 2015 09:56:50 +0300 Subject: [PATCH 19/19] adding RTL --- src/waitingfor.js | 129 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 117 insertions(+), 12 deletions(-) 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; + } }; })); -