4 new features

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.
 

build/bootstrap-waitingfor.js

@@ -2,6 +2,7 @@
  * Module for displaying "Waiting for..." dialog using Bootstrap
  *
  * @author Eugene Maslovich <ehpc@em42.ru>
+ * 
  */
 
 (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 = $('<h' + settings.headerSize + ' />');
 			$headerTag.css({ 'margin': 0 });
@@ -137,7 +143,113 @@
 			if (typeof $dialog !== 'undefined') {
 				$dialog.modal('hide');
 			}
+		},
+		/**
+		 * Changes or displays current dialog message
+		 * @author Abdennour TOUMI <abdennour.toumi@gmail.com>
+		 */
+		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 <abdennour.toumi@gmail.com>
+		 * */
+		,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(timeout<timer){
+				        setTimeout(function(){
+					     messages.call($dialog,$dialog.find('.modal-header>h'+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 <abdennour.toumi@gmail.com>
+		*/
+
+		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 <abdennour.toumi@gmail.com>
+		*/
+		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;
+		}		
 	};
 
 }));

src/waitingfor.js

@@ -2,6 +2,7 @@
  * Module for displaying "Waiting for..." dialog using Bootstrap
  *
  * @author Eugene Maslovich <ehpc@em42.ru>
+ * 
  */
 
 (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 = $('<h' + settings.headerSize + ' />');
 			$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 <abdennour.toumi@gmail.com>
+		 */
+		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 <abdennour.toumi@gmail.com>
+		 * */
+		,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(timeout<timer){
+				        setTimeout(function(){
+					     messages.call($dialog,$dialog.find('.modal-header>h'+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 <abdennour.toumi@gmail.com>
+		*/
+
+		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 <abdennour.toumi@gmail.com>
+		*/
+		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;
+		}		
 	};
 
 }));
-