Merge pull request #2 from kshaaban-/icons-to-items

Added support for including icons in the generation ion-items. Closed #1

Author: Khaled Shaaban

README.md

@@ -39,10 +39,10 @@ I couldn't find an existing plugin to handle duration inputs, but this was large
 4. You may use it immediately in your templates with the default configuration:
 
     ```html
-    <ionic-durationpicker idp-label="Mile Run Duration" idp-output="mileRunDuration">
+    <ionic-durationpicker idp-label="Mile Run Duration" idp-label-icon="ion-clock" idp-output="mileRunDuration">
     </ionic-durationpicker>
     ```
-    `idp-label` is the string that labels the generated `ion-item`. And the variable you pass into `idp-output` will be used to store the duration input in seconds format. You may also use it to initialize a duration from an integer representing a number of seconds. Be wary though, currently there are no checks against what's already in that variable.
+    `idp-label` is the string that labels the generated `ion-item`. If you would like to include an ionicon in your ion-item, then you can pass the icon name into `idp-label-icon`. And the variable you pass into `idp-output` will be used to store the duration input in seconds format. You may also use it to initialize a duration from an integer representing a number of seconds. Be wary though, currently there are no checks against what's already in that variable.
 
     For example, if your `$scope.mileRunDuration` had a value of `527`, then the above snippet will result with:
 
@@ -79,8 +79,8 @@ I couldn't find an existing plugin to handle duration inputs, but this was large
     Then pass it into the plugin's directive:
 
     ```html
-    <ionic-durationpicker idp-label="Mile Run Duration" idp-config="mileRunConfig"
-      idp-output="mileRunDuration">
+    <ionic-durationpicker idp-label="Mile Run Duration" idp-label-icon="ion-clock"
+      idp-config="mileRunConfig" idp-output="mileRunDuration">
     </ionic-durationpicker>
     ```
 
@@ -97,7 +97,7 @@ You can configure the plugin by passing an object containing any of the followin
 
 Property        | Type (_Default Value_)                      | Description
 :--------------:|:-------------------------------------------:|-------------------------------------------
-rtl             | Boolean (_false_)                           | For Right-to-left languages, flips the button to the left and pulls the label to the right in the generated `ion-item`.
+rtl             | Boolean (_false_)                           | For Right-to-left languages, flips the button to the left and pulls the label to the right along with the icon in the generated `ion-item`.
 inputButtonType | String (_'button-outline button-positive'_) | CSS class(es) for the button that shows the popup.
 format          | String (_'MM:SS'_)                          | Duration Format. **Default value is currently the _only_ supported format.**
 secondsStep     | Number (_1_)                                | Amount to increment/decrement seconds by on popup control arrow clicks.

dist/ionic-durationpicker.js

@@ -7,7 +7,7 @@
 		cacheTemplates.$inject = ["$templateCache"];
 
 		function cacheTemplates($templateCache) {
-				$templateCache.put("idp-item.html","<ion-item ng-class=getItemDirectionClasses()>{{idpLabel}} <button class=button ng-class=getInputButtonType() ng-click=showPopup()>{{prettyFormatDuration()}}</button></ion-item>");
+				$templateCache.put("idp-item.html","<ion-item ng-class=getItemClasses()><i ng-if=idpLabelIcon class=\"icon {{idpLabelIcon}}\"></i> {{idpLabel}} <button class=button ng-class=getInputButtonType() ng-click=showPopup()>{{prettyFormatDuration()}}</button></ion-item>");
 
 				$templateCache.put("popup-minutes-seconds.html","<div class=row><span class=\"idp-control col col-offset-20 col-25\"><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"increment(\'minutes\')\" on-hold=\"updateOnHold(\'minutes\', \'increment\')\" on-release=releaseHold()><i class=\"icon ion-chevron-up\"></i></button><div ng-bind=popupDuration.minutes class=idp-unit-box></div><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"decrement(\'minutes\')\" on-hold=\"updateOnHold(\'minutes\', \'decrement\')\" on-release=releaseHold()><i class=\"icon ion-chevron-down\"></i></button></span> <label class=\"col col-10 idp-unit-separator\">:</label> <span class=\"idp-control col col-25\"><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"increment(\'seconds\')\" on-hold=\"updateOnHold(\'seconds\', \'increment\')\" on-release=releaseHold()><i class=\"icon ion-chevron-up\"></i></button><div ng-bind=popupDuration.seconds class=idp-unit-box></div><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"decrement(\'seconds\')\" on-hold=\"updateOnHold(\'seconds\', \'decrement\')\" on-release=releaseHold()><i class=\"icon ion-chevron-down\"></i></button></span></div>");
 		}
@@ -38,6 +38,7 @@
             scope: {
                 idpConfig: '=',
                 idpLabel: '@',
+                idpLabelIcon: '@',
                 idpOutput: '='
             },
             link: linkFunc
@@ -55,6 +56,9 @@
             if (typeof scope.idpLabel === 'undefined' || scope.idpLabel === null) {
                 scope.idpLabel = 'Duration';
             }
+            if (typeof scope.idpLabelIcon === 'undefined' || scope.idpLabel === null) {
+                scope.idpLabelIcon = false;
+            }
             if (typeof scope.idpOutput === 'undefined' || scope.idpOutput === null) {
                 scope.idpOutput = 0;
             }
@@ -77,7 +81,7 @@
             };
 
             scope.showPopup = _showPopup;
-            scope.getItemDirectionClasses = _getItemDirectionClasses;
+            scope.getItemClasses = _getItemClasses;
             scope.getInputButtonType = _getInputButtonType;
             scope.increment = _increment;
             scope.decrement = _decrement;
@@ -159,12 +163,23 @@
                 });
             }
 
-            function _getItemDirectionClasses() {
+            function _getItemClasses() {
+                var itemClasses = '';
+
+                // Don't forget a white-space after each appended class
                 if (config.rtl) {
-                    return 'idp-dir-rtl item-button-left';
+                    itemClasses += 'idp-dir-rtl item-button-left ';
                 } else {
-                    return 'item-button-right';
+                    itemClasses += 'item-button-right ';
                 }
+
+                if (scope.idpLabelIcon && config.rtl) {
+                    itemClasses += 'item-icon-right ';
+                } else if (scope.idpLabelIcon) {
+                    itemClasses += 'item-icon-left ';
+                }
+
+                return itemClasses;
             }
 
             function _getInputButtonType() {

dist/ionic-durationpicker.min.js

@@ -14,6 +14,7 @@
             scope: {
                 idpConfig: '=',
                 idpLabel: '@',
+                idpLabelIcon: '@',
                 idpOutput: '='
             },
             link: linkFunc
@@ -31,6 +32,9 @@
             if (typeof scope.idpLabel === 'undefined' || scope.idpLabel === null) {
                 scope.idpLabel = 'Duration';
             }
+            if (typeof scope.idpLabelIcon === 'undefined' || scope.idpLabel === null) {
+                scope.idpLabelIcon = false;
+            }
             if (typeof scope.idpOutput === 'undefined' || scope.idpOutput === null) {
                 scope.idpOutput = 0;
             }
@@ -53,7 +57,7 @@
             };
 
             scope.showPopup = _showPopup;
-            scope.getItemDirectionClasses = _getItemDirectionClasses;
+            scope.getItemClasses = _getItemClasses;
             scope.getInputButtonType = _getInputButtonType;
             scope.increment = _increment;
             scope.decrement = _decrement;
@@ -135,12 +139,23 @@
                 });
             }
 
-            function _getItemDirectionClasses() {
+            function _getItemClasses() {
+                var itemClasses = '';
+
+                // Don't forget a white-space after each appended class
                 if (config.rtl) {
-                    return 'idp-dir-rtl item-button-left';
+                    itemClasses += 'idp-dir-rtl item-button-left ';
                 } else {
-                    return 'item-button-right';
+                    itemClasses += 'item-button-right ';
                 }
+
+                if (scope.idpLabelIcon && config.rtl) {
+                    itemClasses += 'item-icon-right ';
+                } else if (scope.idpLabelIcon) {
+                    itemClasses += 'item-icon-left ';
+                }
+
+                return itemClasses;
             }
 
             function _getInputButtonType() {