New data-attribute: progress

src/Lungo.Constants.js

@@ -51,7 +51,8 @@ LUNGO.Constants = {
         PERCENT: '%',
         TARGET: 'target',
         FIRST: 'first',
-        LAST: 'last'
+        LAST: 'last',
+        EMPTY: ''
     },
 
     BINDING: {

src/stylesheets/css/Lungo.widgets.form.css

@@ -22,5 +22,5 @@ input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::be
 input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{height:27px;}
 input[type="range"]{-webkit-appearance:none;height:3px;width:100%;outline:none;border-radius:1px;position:relative;padding:0px;margin:0px;margin-bottom:4px !important;border:0;cursor:ew-resize;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:1;width:24px;height:24px;border-radius:12px;}
 .progress{width:100%;}.progress .labels{display:block;}.progress .labels span:last-child{float:right;}
-.progress .bar{height:3px;display:block;}.progress .bar .value{display:block;height:inherit;width:0%;-webkit-transition:width 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}.progress .bar .value .glow{float:right;height:inherit;width:3px;}
+.progress .bar{height:3px;display:block;}.progress .bar .value{display:block;height:inherit;width:0%;-webkit-transition:width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);}.progress .bar .value .glow{float:right;height:inherit;width:3px;}
 @media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}

src/stylesheets/less/Lungo.widgets.form.less

@@ -234,7 +234,7 @@ input[type="range"] {
 			display:block;
 	    	height: inherit;
 	    	width: 0%;
-	    	-webkit-transition: width 250ms @defaultTrasition;	
+	    	-webkit-transition: width 500ms @defaultTrasition;	
 	    	
 	    	& .glow {
 				float:right;

src/view/Lungo.View.Element.js

@@ -9,12 +9,15 @@
 
 LUNGO.View.Element = (function(lng, undefined) {
 
+    var ATTRIBUTE = lng.Constants.ATTRIBUTE;
+    var BINDING = lng.Constants.BINDING;
     var SELECTORS = {
-        BUBBLE: '.bubble.count'
+        BUBBLE: '.bubble.count',
+        PROGRESS_VALUE: ' .value',
+        PROGRESS_PERCENTAGE: ' .labels span:last-child',
+        PROGRESS_DESCRIPTION: ' .labels span:first-child'
     };
 
-    var BINDING = lng.Constants.BINDING;
-
     /**
      * Set a counter to the element
      *
@@ -26,7 +29,7 @@ LUNGO.View.Element = (function(lng, undefined) {
     var count = function(selector, count) {
         var element = lng.dom(selector);
 
-        if (element ) {
+        if (element) {
             if (count > 0) {
                 _setBubble(element, count);
             } else {
@@ -35,6 +38,29 @@ LUNGO.View.Element = (function(lng, undefined) {
         }
     };
 
+    /**
+     * Set a progress to the element
+     *
+     * @method progress
+     *
+     * @param  {string}  Element query selector
+     * @param  {number}  Percentage
+     * @param  {boolean} Show the labels: description and current percentage
+     * @param  {string}  Description
+     */
+    var progress = function(selector, percentage, with_labels, description) {
+        var element = lng.dom(selector);
+
+        if (element) {
+            percentage += ATTRIBUTE.PERCENT;
+
+            lng.dom(selector + SELECTORS.PROGRESS_VALUE).style(ATTRIBUTE.WIDTH, percentage);
+
+            _setProgressLabel(selector + SELECTORS.PROGRESS_PERCENTAGE, with_labels, percentage);
+            _setProgressLabel(selector + SELECTORS.PROGRESS_DESCRIPTION, with_labels, description);
+        }
+    };
+
     var _setBubble = function(element, count) {
         var bubbles = element.children(SELECTORS.BUBBLE);
         var total_bubbles = bubbles.length;
@@ -49,8 +75,13 @@ LUNGO.View.Element = (function(lng, undefined) {
         }
     };
 
+    var _setProgressLabel = function(selector, with_labels, attribute) {
+        lng.dom(selector).html((with_labels) ? attribute : ATTRIBUTE.EMPTY);
+    };
+
     return {
-        count: count
+        count: count,
+        progress: progress
     };
 
 })(LUNGO);