diff --git a/README.md b/README.md index 2c477d9..0ecc298 100644 --- a/README.md +++ b/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 - + ``` - `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 - + ``` @@ -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. diff --git a/dist/ionic-durationpicker.js b/dist/ionic-durationpicker.js index 4d36824..de676a9 100644 --- a/dist/ionic-durationpicker.js +++ b/dist/ionic-durationpicker.js @@ -7,7 +7,7 @@ cacheTemplates.$inject = ["$templateCache"]; function cacheTemplates($templateCache) { - $templateCache.put("idp-item.html","{{idpLabel}} "); + $templateCache.put("idp-item.html"," {{idpLabel}} "); $templateCache.put("popup-minutes-seconds.html","
"); } @@ -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() { diff --git a/dist/ionic-durationpicker.min.js b/dist/ionic-durationpicker.min.js index 7e465e3..b4c57da 100644 --- a/dist/ionic-durationpicker.min.js +++ b/dist/ionic-durationpicker.min.js @@ -1 +1 @@ -!function(){"use strict";function t(t){t.put("idp-item.html","{{idpLabel}} "),t.put("popup-minutes-seconds.html",'
')}angular.module("ionic-durationpicker.templates",[]).run(t),t.$inject=["$templateCache"]}(),function(){"use strict";angular.module("ionic-durationpicker",["ionic","ionic-durationpicker.templates"])}(),function(){"use strict";function t(t,n){function o(o,e,p){function i(){g=new Date(1e3*o.idpOutput),o.duration={minutes:f(g.getUTCMinutes()),seconds:f(g.getUTCSeconds())},o.popupDuration=angular.copy(o.duration)}function u(t){var n=y[t+"Step"];o.popupDuration[t]=parseInt(o.popupDuration[t]),o.popupDuration[t]=(o.popupDuration[t]+n)%60,o.popupDuration[t]=f(o.popupDuration[t])}function a(t){var n=y[t+"Step"];o.popupDuration[t]=parseInt(o.popupDuration[t]),o.popupDuration[t]=(o.popupDuration[t]+(60-n))%60,o.popupDuration[t]=f(o.popupDuration[t])}function l(n,o){C=t(function(){"increment"===o?u(n):"decrement"===o&&a(n)},100)}function r(){t.cancel(C)}function d(){var t;switch(y.format){case"MM:SS":t="popup-minutes-seconds.html";break;default:t="popup-minutes-seconds.html"}n.show({templateUrl:t,title:y.popupTitle,subTitle:y.popupSubTitle,scope:o,buttons:[{text:y.popupCancelLabel,type:y.popupCancelButtonType,onTap:i},{text:y.popupSaveLabel,type:y.popupSaveButtonType,onTap:b}]})}function c(){return y.rtl?"idp-dir-rtl item-button-left":"item-button-right"}function s(){return y.inputButtonType}function m(){var t=f(o.duration.minutes),n=f(o.duration.seconds);return t+":"+n}function b(){o.duration=angular.copy(o.popupDuration),o.idpOutput=parseInt(60*o.duration.minutes)+parseInt(o.duration.seconds)}function f(t){var n=parseInt(t);return 10>n?"0"+n:n}"undefined"!=typeof o.idpConfig&&null!==o.idpConfig||(o.idpConfig={}),"undefined"!=typeof o.idpLabel&&null!==o.idpLabel||(o.idpLabel="Duration"),"undefined"!=typeof o.idpOutput&&null!==o.idpOutput||(o.idpOutput=0);var g,C,y={rtl:o.idpConfig.rtl?o.idpConfig.rtl:!1,inputButtonType:o.idpConfig.inputButtonType?o.idpConfig.inputButtonType:"button-outline button-positive",format:o.idpConfig.format?o.idpConfig.format:"MM:SS",secondsStep:o.idpConfig.secondsStep?o.idpConfig.secondsStep:1,minutesStep:o.idpConfig.minutesStep?o.idpConfig.minutesStep:1,popupTitle:o.idpConfig.popupTitle?o.idpConfig.popupTitle:"Duration Picker",popupSubTitle:o.idpConfig.popupSubTitle?o.idpConfig.popupSubTitle:"Enter duration",popupSaveLabel:o.idpConfig.popupSaveLabel?o.idpConfig.popupSaveLabel:"Save",popupSaveButtonType:o.idpConfig.popupSaveButtonType?o.idpConfig.popupSaveButtonType:"button-positive",popupCancelLabel:o.idpConfig.popupCancelLabel?o.idpConfig.popupCancelLabel:"Cancel",popupCancelButtonType:o.idpConfig.popupCancelButtonType?o.idpConfig.popupCancelButtonType:"button-stable"};o.showPopup=d,o.getItemDirectionClasses=c,o.getInputButtonType=s,o.increment=u,o.decrement=a,o.updateOnHold=l,o.releaseHold=r,o.prettyFormatDuration=m,i()}var e={restrict:"E",templateUrl:"idp-item.html",scope:{idpConfig:"=",idpLabel:"@",idpOutput:"="},link:o};return e}angular.module("ionic-durationpicker").directive("ionicDurationpicker",t),t.$inject=["$interval","$ionicPopup"]}(),function(t,n){var o=t.createElement("style");if(t.getElementsByTagName("head")[0].appendChild(o),o.styleSheet)o.styleSheet.disabled||(o.styleSheet.cssText=n);else try{o.innerHTML=n}catch(e){o.innerText=n}}(document,".idp-control {\n min-width: 52px;\n min-height: 37px;\n text-align: center;\n font-size: 20px;\n line-height: 32px;\n}\n\n.idp-control-arrow {\n width: 100%;\n}\n\n.idp-control-arrow > .icon::before {\n margin-top: 6px;\n vertical-align: middle;\n}\n\n.idp-unit-box {\n border: 1px solid #dddddd;\n}\n\n.idp-unit-separator {\n padding-top: 44px !important;\n font-weight: bold;\n text-align: center;\n}\n\n.idp-dir-rtl {\n direction: rtl !important;\n}"); \ No newline at end of file +!function(){"use strict";function n(n){n.put("idp-item.html",' {{idpLabel}} '),n.put("popup-minutes-seconds.html",'
')}angular.module("ionic-durationpicker.templates",[]).run(n),n.$inject=["$templateCache"]}(),function(){"use strict";angular.module("ionic-durationpicker",["ionic","ionic-durationpicker.templates"])}(),function(){"use strict";function n(n,t){function o(o,e,i){function p(){g=new Date(1e3*o.idpOutput),o.duration={minutes:f(g.getUTCMinutes()),seconds:f(g.getUTCSeconds())},o.popupDuration=angular.copy(o.duration)}function u(n){var t=y[n+"Step"];o.popupDuration[n]=parseInt(o.popupDuration[n]),o.popupDuration[n]=(o.popupDuration[n]+t)%60,o.popupDuration[n]=f(o.popupDuration[n])}function a(n){var t=y[n+"Step"];o.popupDuration[n]=parseInt(o.popupDuration[n]),o.popupDuration[n]=(o.popupDuration[n]+(60-t))%60,o.popupDuration[n]=f(o.popupDuration[n])}function l(t,o){C=n(function(){"increment"===o?u(t):"decrement"===o&&a(t)},100)}function r(){n.cancel(C)}function d(){var n;switch(y.format){case"MM:SS":n="popup-minutes-seconds.html";break;default:n="popup-minutes-seconds.html"}t.show({templateUrl:n,title:y.popupTitle,subTitle:y.popupSubTitle,scope:o,buttons:[{text:y.popupCancelLabel,type:y.popupCancelButtonType,onTap:p},{text:y.popupSaveLabel,type:y.popupSaveButtonType,onTap:m}]})}function c(){var n="";return n+=y.rtl?"idp-dir-rtl item-button-left ":"item-button-right ",o.idpLabelIcon&&y.rtl?n+="item-icon-right ":o.idpLabelIcon&&(n+="item-icon-left "),n}function s(){return y.inputButtonType}function b(){var n=f(o.duration.minutes),t=f(o.duration.seconds);return n+":"+t}function m(){o.duration=angular.copy(o.popupDuration),o.idpOutput=parseInt(60*o.duration.minutes)+parseInt(o.duration.seconds)}function f(n){var t=parseInt(n);return 10>t?"0"+t:t}"undefined"!=typeof o.idpConfig&&null!==o.idpConfig||(o.idpConfig={}),"undefined"!=typeof o.idpLabel&&null!==o.idpLabel||(o.idpLabel="Duration"),"undefined"!=typeof o.idpLabelIcon&&null!==o.idpLabel||(o.idpLabelIcon=!1),"undefined"!=typeof o.idpOutput&&null!==o.idpOutput||(o.idpOutput=0);var g,C,y={rtl:o.idpConfig.rtl?o.idpConfig.rtl:!1,inputButtonType:o.idpConfig.inputButtonType?o.idpConfig.inputButtonType:"button-outline button-positive",format:o.idpConfig.format?o.idpConfig.format:"MM:SS",secondsStep:o.idpConfig.secondsStep?o.idpConfig.secondsStep:1,minutesStep:o.idpConfig.minutesStep?o.idpConfig.minutesStep:1,popupTitle:o.idpConfig.popupTitle?o.idpConfig.popupTitle:"Duration Picker",popupSubTitle:o.idpConfig.popupSubTitle?o.idpConfig.popupSubTitle:"Enter duration",popupSaveLabel:o.idpConfig.popupSaveLabel?o.idpConfig.popupSaveLabel:"Save",popupSaveButtonType:o.idpConfig.popupSaveButtonType?o.idpConfig.popupSaveButtonType:"button-positive",popupCancelLabel:o.idpConfig.popupCancelLabel?o.idpConfig.popupCancelLabel:"Cancel",popupCancelButtonType:o.idpConfig.popupCancelButtonType?o.idpConfig.popupCancelButtonType:"button-stable"};o.showPopup=d,o.getItemClasses=c,o.getInputButtonType=s,o.increment=u,o.decrement=a,o.updateOnHold=l,o.releaseHold=r,o.prettyFormatDuration=b,p()}var e={restrict:"E",templateUrl:"idp-item.html",scope:{idpConfig:"=",idpLabel:"@",idpLabelIcon:"@",idpOutput:"="},link:o};return e}angular.module("ionic-durationpicker").directive("ionicDurationpicker",n),n.$inject=["$interval","$ionicPopup"]}(),function(n,t){var o=n.createElement("style");if(n.getElementsByTagName("head")[0].appendChild(o),o.styleSheet)o.styleSheet.disabled||(o.styleSheet.cssText=t);else try{o.innerHTML=t}catch(e){o.innerText=t}}(document,".idp-control {\n min-width: 52px;\n min-height: 37px;\n text-align: center;\n font-size: 20px;\n line-height: 32px;\n}\n\n.idp-control-arrow {\n width: 100%;\n}\n\n.idp-control-arrow > .icon::before {\n margin-top: 6px;\n vertical-align: middle;\n}\n\n.idp-unit-box {\n border: 1px solid #dddddd;\n}\n\n.idp-unit-separator {\n padding-top: 44px !important;\n font-weight: bold;\n text-align: center;\n}\n\n.idp-dir-rtl {\n direction: rtl !important;\n}"); \ No newline at end of file diff --git a/src/directives.js b/src/directives.js index f99b7d8..eb24202 100644 --- a/src/directives.js +++ b/src/directives.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() { diff --git a/src/templates.js b/src/templates.js index c3da6cf..b8bcadf 100644 --- a/src/templates.js +++ b/src/templates.js @@ -7,7 +7,7 @@ cacheTemplates.$inject = ["$templateCache"]; function cacheTemplates($templateCache) { - $templateCache.put("idp-item.html","{{idpLabel}} "); + $templateCache.put("idp-item.html"," {{idpLabel}} "); $templateCache.put("popup-minutes-seconds.html","
"); } diff --git a/src/templates/idp-item.html b/src/templates/idp-item.html index 4561ff9..67b6be4 100644 --- a/src/templates/idp-item.html +++ b/src/templates/idp-item.html @@ -1,4 +1,5 @@ - + + {{idpLabel}}