diff --git a/README.md b/README.md index f66a326..2ca43a5 100755 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ $scope.numberPickerObject = { decimalStep: 0.25, //Optional format: "DECIMAL", //Optional - "WHOLE" or "DECIMAL" unit: "", //Optional - "m", "kg", "℃" or whatever you want + useNgTouch: false, //Optional - set true in conjunction with using ngTouch (see below) titleLabel: 'Number Picker', //Optional setLabel: 'Set', //Optional closeLabel: 'Close', //Optional @@ -66,6 +67,8 @@ $scope.numberPickerObject = { ```` +6) (optional) Install 'ngTouch' by https://github.com/nglar/ngTouch to get (pseudo-)autorepeat increment/decrement feature on touch panels. Also, remember to set useNgTouch to true. + ##Versions: ### 2) v1.1 diff --git a/dist/ionic-numberpicker.bundle.min.js b/dist/ionic-numberpicker.bundle.min.js index be690f1..6280b4e 100755 --- a/dist/ionic-numberpicker.bundle.min.js +++ b/dist/ionic-numberpicker.bundle.min.js @@ -1 +1 @@ -!function(e,n){var t=e.createElement("style");if(e.getElementsByTagName("head")[0].appendChild(t),t.styleSheet)t.styleSheet.disabled||(t.styleSheet.cssText=n);else try{t.innerHTML=n}catch(i){t.innerText=n}}(document,"/* Empty. Add your own CSS if you like */\n\n.numberPickerDecimal {\n color: #000;\n padding-top: 45px;\n text-align: center;\n font-weight: bold;\n}\n\n.numberPickerArrows {\n width: 100%;\n}\n\n.numberPickerBoxText {\n color: #000;\n height: 40px;\n text-align: center;\n border: 1px solid #dddddd;\n font-size: 16px;\n padding-top: 5px;\n}\n\n.overflowShow {\n white-space: normal !important;\n}"),function(e){try{e=angular.module("ionic-numberpicker.templates")}catch(n){e=angular.module("ionic-numberpicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-numberpicker-decimal.html",'
')}])}(),function(e){try{e=angular.module("ionic-numberpicker.templates")}catch(n){e=angular.module("ionic-numberpicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-numberpicker-whole.html",'
')}])}(),function(){"use strict";angular.module("ionic-numberpicker",["ionic","ionic-numberpicker.templates"])}(),function(){"use strict";function e(e){return{restrict:"AE",replace:!0,scope:{inputObj:"=inputObj"},link:function(n,t,i){function l(e,t){var i=parseFloat(e).toFixed(n.precision);return i}function c(e){var t=0;return e>=0?(n.isNegative=!1,t=Math.floor(e)):(n.isNegative=!0,t=Math.ceil(e)),Math.abs(t)}n.inputValue=n.inputObj.inputValue?n.inputObj.inputValue:0,n.minValue=n.inputObj.minValue,n.maxValue=n.inputObj.maxValue,n.precision=n.inputObj.precision?n.inputObj.precision:3,n.format=n.inputObj.format?n.inputObj.format:"DECIMAL",n.unit=n.inputObj.unit?n.inputObj.unit:"",n.titleLabel=n.inputObj.titleLabel?n.inputObj.titleLabel:"Number Picker",n.setLabel=n.inputObj.setLabel?n.inputObj.setLabel:"Set",n.closeLabel=n.inputObj.closeLabel?n.inputObj.closeLabel:"Close",n.decimalStep=n.inputObj.decimalStep?n.inputObj.decimalStep:.25,n.decimalCharacter=n.inputObj.decimalCharacter?n.inputObj.decimalCharacter:".",n.setButtonType=n.inputObj.setButtonType?n.inputObj.setButtonType:"button-positive",n.closeButtonType=n.inputObj.closeButtonType?n.inputObj.closeButtonType:"button-stable",n.wholeNumber=0,n.decimalNumber=0,n.isNegative=!1,n.numericValue=Number(n.wholeNumber+"."+n.decimalNumber),n.changeFormat=function(){n.format="DECIMAL"===n.format?"WHOLE":"DECIMAL"},n.decimalDisplay=function(){var e=n.decimalNumber.toString(),t=e.indexOf(".");return e.substring(t+1)},n.increaseWhole=function(){n.numericValue+=1,n.wholeNumber=c(n.numericValue),n.decimalNumber=l(n.numericValue%1),n.checkMax()},n.decreaseWhole=function(){n.numericValue-=1,n.wholeNumber=c(n.numericValue),n.decimalNumber=l(n.numericValue%1),n.checkMin()},n.increaseDecimal=function(){n.numericValue+=n.decimalStep,n.wholeNumber=c(n.numericValue),n.decimalNumber=l(n.numericValue%1),n.checkMax()},n.decreaseDecimal=function(){n.numericValue-=n.decimalStep,n.wholeNumber=c(n.numericValue),n.decimalNumber=l(n.numericValue%1),n.checkMin()},n.checkMax=function(){n.numericValue>=n.maxValue&&(n.numericValue=n.maxValue,n.wholeNumber=c(n.numericValue),n.decimalNumber=l(n.numericValue%1))},n.checkMin=function(){n.numericValue<=n.minValue&&(n.numericValue=n.minValue,n.wholeNumber=c(n.numericValue),n.decimalNumber=l(n.numericValue%1))},t.on("click",function(){"DECIMAL"==n.format?(n.wholeNumber=c(Number(n.inputValue)),n.decimalNumber=n.inputValue%1,n.numericValue=Number(n.wholeNumber)+Number(l(n.decimalNumber,n.precision)),n.decimalNumber=l(n.numericValue%1),e.show({templateUrl:"ionic-numberpicker-decimal.html",title:n.titleLabel,subTitle:"",scope:n,buttons:[{text:n.closeLabel,type:n.closeButtonType,onTap:function(e){n.inputObj.callback(void 0)}},{text:n.setLabel,type:n.setButtonType,onTap:function(e){n.loadingContent=!0,n.numericValue=Number(n.wholeNumber)+Number(l(n.decimalNumber,n.precision)),n.inputObj.callback(n.numericValue)}}]})):(n.wholeNumber=c(n.inputValue),n.decimalNumber=0,n.numericValue=Number(c(n.wholeNumber))+Number(l(n.decimalNumber,n.precision)),e.show({templateUrl:"ionic-numberpicker-whole.html",title:n.titleLabel,subTitle:"",scope:n,buttons:[{text:n.closeLabel,type:n.closeButtonType,onTap:function(e){n.inputObj.callback(void 0)}},{text:n.setLabel,type:n.setButtonType,onTap:function(e){n.loadingContent=!0,n.inputObj.callback(n.wholeNumber)}}]}))})}}}angular.module("ionic-numberpicker").directive("ionicNumberpicker",e),e.$inject=["$ionicPopup"]}(); \ No newline at end of file +!function(e,t){var n=e.createElement("style");if(e.getElementsByTagName("head")[0].appendChild(n),n.styleSheet)n.styleSheet.disabled||(n.styleSheet.cssText=t);else try{n.innerHTML=t}catch(o){n.innerText=t}}(document,"/* Empty. Add your own CSS if you like */\n\n.numberPickerDecimal {\n color: #000;\n padding-top: 45px;\n text-align: center;\n font-weight: bold;\n}\n\n.numberPickerArrows {\n width: 100%;\n}\n\n.numberPickerBoxText {\n color: #000;\n height: 40px;\n text-align: center;\n border: 1px solid #dddddd;\n font-size: 16px;\n padding-top: 5px;\n}\n\n.overflowShow {\n white-space: normal !important;\n}"),function(e){try{e=angular.module("ionic-numberpicker.templates")}catch(t){e=angular.module("ionic-numberpicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-numberpicker-decimal.html",'
{{wholeNumber}}
{{decimalDisplay()}}
')}])}(),function(e){try{e=angular.module("ionic-numberpicker.templates")}catch(t){e=angular.module("ionic-numberpicker.templates",[])}e.run(["$templateCache",function(e){e.put("ionic-numberpicker-whole.html",'
{{wholeNumber}}
')}])}(),function(){"use strict";angular.module("ionic-numberpicker",["ionic","ionic-numberpicker.templates"])}(),function(){"use strict";function e(e){return{restrict:"AE",replace:!0,scope:{inputObj:"=inputObj"},link:function(t,n,o){function u(e,n){var o=parseFloat(e).toFixed(t.precision);return o}function i(e){var n=0;return e>=0?(t.isNegative=!1,t.sign="",n=Math.floor(e)):(t.isNegative=!0,t.sign="-",n=Math.ceil(e)),Math.abs(n)}t.inputValue=t.inputObj.inputValue?t.inputObj.inputValue:0,t.minValue=t.inputObj.minValue,t.maxValue=t.inputObj.maxValue,t.precision=t.inputObj.precision?t.inputObj.precision:3,t.format=t.inputObj.format?t.inputObj.format:"DECIMAL",t.unit=t.inputObj.unit?t.inputObj.unit:"",t.titleLabel=t.inputObj.titleLabel?t.inputObj.titleLabel:"Number Picker",t.setLabel=t.inputObj.setLabel?t.inputObj.setLabel:"Set",t.closeLabel=t.inputObj.closeLabel?t.inputObj.closeLabel:"Close",t.decimalStep=t.inputObj.decimalStep?t.inputObj.decimalStep:.25,t.decimalCharacter=t.inputObj.decimalCharacter?t.inputObj.decimalCharacter:".",t.setButtonType=t.inputObj.setButtonType?t.inputObj.setButtonType:"button-positive",t.closeButtonType=t.inputObj.closeButtonType?t.inputObj.closeButtonType:"button-stable",t.useNgTouch=t.inputObj.useNgTouch?t.inputObj.useNgTouch:!1,t.wholeNumber=0,t.decimalNumber=0,t.isNegative=!1,t.sign="",t.numericValue=Number(t.wholeNumber+"."+t.decimalNumber),t.changeFormat=function(){t.format="DECIMAL"===t.format?"WHOLE":"DECIMAL"},t.decimalDisplay=function(){var e=t.decimalNumber.toString(),n=e.indexOf(".");return e.substring(n+1)},t.updateDisplay=function(){document.getElementById("wholeNumber").innerHTML=t.wholeNumber,document.getElementById("decimalNumber")&&(document.getElementById("decimalNumber").innerHTML=t.decimalDisplay()),document.getElementById("sign").innerHTML=t.sign},t.increaseWhole=function(){t.numericValue+=1,t.wholeNumber=i(t.numericValue),t.decimalNumber=u(t.numericValue%1),t.checkMax(),t.updateDisplay()},t.decreaseWhole=function(){t.numericValue-=1,t.wholeNumber=i(t.numericValue),t.decimalNumber=u(t.numericValue%1),t.checkMin(),t.updateDisplay()},t.increaseDecimal=function(){t.numericValue+=t.decimalStep,t.wholeNumber=i(t.numericValue),t.decimalNumber=u(t.numericValue%1),t.checkMax(),t.updateDisplay()},t.decreaseDecimal=function(){t.numericValue-=t.decimalStep,t.wholeNumber=i(t.numericValue),t.decimalNumber=u(t.numericValue%1),t.checkMin(),t.updateDisplay()},t.startWholeUp=function(e){(t.useNgTouch&&"touch"==e||!t.useNgTouch&&"mouse"==e)&&(t.increaseWhole(),t.timeoutUpID=setTimeout(function(){t.intervalUpID=setInterval(function(){t.increaseWhole()},100)},600))},t.stopWholeUp=function(){clearInterval(t.intervalUpID),clearTimeout(t.timeoutUpID)},t.startWholeDown=function(e){(t.useNgTouch&&"touch"==e||!t.useNgTouch&&"mouse"==e)&&(t.decreaseWhole(),t.timeoutDownID=setTimeout(function(){t.intervalDownID=setInterval(function(){t.decreaseWhole()},100)},600))},t.stopWholeDown=function(){clearInterval(t.intervalDownID),clearTimeout(t.timeoutDownID)},t.startDecimalUp=function(e){(t.useNgTouch&&"touch"==e||!t.useNgTouch&&"mouse"==e)&&(t.increaseDecimal(),t.timeoutUpID=setTimeout(function(){t.intervalUpID=setInterval(function(){t.increaseDecimal()},100)},600))},t.stopDecimalUp=function(){clearInterval(t.intervalUpID),clearTimeout(t.timeoutUpID)},t.startDecimalDown=function(e){(t.useNgTouch&&"touch"==e||!t.useNgTouch&&"mouse"==e)&&(t.decreaseDecimal(),t.timeoutDownID=setTimeout(function(){t.intervalDownID=setInterval(function(){t.decreaseDecimal()},100)},600))},t.stopDecimalDown=function(){clearInterval(t.intervalDownID),clearTimeout(t.timeoutDownID)},t.checkMax=function(){t.numericValue>=t.maxValue&&(t.numericValue=t.maxValue,t.wholeNumber=i(t.numericValue),t.decimalNumber=u(t.numericValue%1))},t.checkMin=function(){t.numericValue<=t.minValue&&(t.numericValue=t.minValue,t.wholeNumber=i(t.numericValue),t.decimalNumber=u(t.numericValue%1))},n.on("click",function(){"DECIMAL"==t.format?(t.inputValue=t.inputObj.inputValue?t.inputObj.inputValue:0,t.wholeNumber=i(Number(t.inputValue)),t.decimalNumber=t.inputValue%1,t.numericValue=Number(t.wholeNumber)+Number(u(t.decimalNumber,t.precision)),t.decimalNumber=u(t.numericValue%1),e.show({templateUrl:"ionic-numberpicker-decimal.html",title:t.titleLabel,subTitle:"",scope:t,buttons:[{text:t.closeLabel,type:t.closeButtonType,onTap:function(e){t.inputObj.callback(void 0)}},{text:t.setLabel,type:t.setButtonType,onTap:function(e){t.loadingContent=!0,t.numericValue=Number(t.isNegative?-t.wholeNumber:t.wholeNumber)+Number(u(t.decimalNumber,t.precision)),t.inputObj.callback(t.numericValue)}}]})):(t.inputValue=t.inputObj.inputValue?t.inputObj.inputValue:0,t.wholeNumber=i(t.inputValue),t.decimalNumber=0,t.numericValue=Number(i(t.wholeNumber))+Number(u(t.decimalNumber,t.precision)),e.show({templateUrl:"ionic-numberpicker-whole.html",title:t.titleLabel,subTitle:"",scope:t,buttons:[{text:t.closeLabel,type:t.closeButtonType,onTap:function(e){t.inputObj.callback(void 0)}},{text:t.setLabel,type:t.setButtonType,onTap:function(e){t.loadingContent=!0,t.inputObj.callback(t.isNegative?-t.wholeNumber:t.wholeNumber)}}]}))})}}}angular.module("ionic-numberpicker").directive("ionicNumberpicker",e),e.$inject=["$ionicPopup"]}(); \ No newline at end of file diff --git a/dist/templates.js b/dist/templates.js index f7ab921..081c276 100755 --- a/dist/templates.js +++ b/dist/templates.js @@ -6,7 +6,7 @@ try { } module.run(['$templateCache', function($templateCache) { $templateCache.put('ionic-numberpicker-decimal.html', - '
'); + '
{{wholeNumber}}
{{decimalDisplay()}}
'); }]); })(); @@ -18,6 +18,6 @@ try { } module.run(['$templateCache', function($templateCache) { $templateCache.put('ionic-numberpicker-whole.html', - '
'); + '
{{wholeNumber}}
'); }]); })(); diff --git a/src/ionic-numberpicker-decimal.html b/src/ionic-numberpicker-decimal.html index dc78b43..86b495e 100755 --- a/src/ionic-numberpicker-decimal.html +++ b/src/ionic-numberpicker-decimal.html @@ -1,24 +1,29 @@
- - + -
+
{{wholeNumber}}
 -
+ ng-mousedown="startDecimalUp('mouse')" ng-mouseup="stopDecimalUp()" ng-mouseleave="stopDecimalUp()" + ng-touchstart="startDecimalUp('touch')" ng-touchend="stopDecimalUp()"> + +
{{decimalDisplay()}}
+ ng-mousedown="startDecimalDown('mouse')" ng-mouseup="stopDecimalDown()" ng-mouseleave="stopDecimalDown()" + ng-touchstart="startDecimalDown('touch')" ng-touchend="stopDecimalDown()"> +
-
+ diff --git a/src/ionic-numberpicker-whole.html b/src/ionic-numberpicker-whole.html index 7224319..088363b 100755 --- a/src/ionic-numberpicker-whole.html +++ b/src/ionic-numberpicker-whole.html @@ -1,14 +1,15 @@
- - + -
+
{{wholeNumber}}
 diff --git a/src/ionic-numberpicker.directive.js b/src/ionic-numberpicker.directive.js index d82c3e8..9102160 100755 --- a/src/ionic-numberpicker.directive.js +++ b/src/ionic-numberpicker.directive.js @@ -32,9 +32,11 @@ scope.setButtonType = scope.inputObj.setButtonType ? scope.inputObj.setButtonType : 'button-positive'; scope.closeButtonType = scope.inputObj.closeButtonType ? scope.inputObj.closeButtonType : 'button-stable'; + scope.useNgTouch = scope.inputObj.useNgTouch ? scope.inputObj.useNgTouch : false; scope.wholeNumber = 0; scope.decimalNumber = 0; scope.isNegative = false; + scope.sign = ''; scope.numericValue = Number(scope.wholeNumber + '.' + scope.decimalNumber); //Changing the style @@ -48,6 +50,14 @@ return sValue.substring(index + 1); } + scope.updateDisplay = function() { + document.getElementById("wholeNumber").innerHTML = scope.wholeNumber; + if (document.getElementById("decimalNumber")) { + document.getElementById("decimalNumber").innerHTML = scope.decimalDisplay(); + } + document.getElementById("sign").innerHTML = scope.sign; + }; + //Increasing the whole number scope.increaseWhole = function () { scope.numericValue += 1; @@ -55,6 +65,7 @@ scope.decimalNumber = strip(scope.numericValue % 1); scope.checkMax(); + scope.updateDisplay(); }; //Decreasing the whole number @@ -64,6 +75,7 @@ scope.decimalNumber = strip(scope.numericValue % 1); scope.checkMin(); + scope.updateDisplay(); }; //Increasing the decimal number @@ -73,6 +85,7 @@ scope.decimalNumber = strip(scope.numericValue % 1); scope.checkMax(); + scope.updateDisplay(); }; //Decreasing the decimal number @@ -82,6 +95,71 @@ scope.decimalNumber = strip(scope.numericValue % 1); scope.checkMin(); + scope.updateDisplay(); + }; + + scope.startWholeUp = function(d) { + if ((scope.useNgTouch && d == 'touch') || (!scope.useNgTouch && d == 'mouse')) { + scope.increaseWhole(); + scope.timeoutUpID = setTimeout(function() { + scope.intervalUpID = setInterval(function(){ + scope.increaseWhole(); + }, 100) + }, 600) + } + }; + + scope.stopWholeUp = function() { + clearInterval(scope.intervalUpID); + clearTimeout(scope.timeoutUpID); + }; + + scope.startWholeDown = function(d) { + if ((scope.useNgTouch && d == 'touch') || (!scope.useNgTouch && d == 'mouse')) { + scope.decreaseWhole(); + scope.timeoutDownID = setTimeout(function() { + scope.intervalDownID = setInterval(function(){ + scope.decreaseWhole(); + }, 100) + }, 600) + } + }; + + scope.stopWholeDown = function() { + clearInterval(scope.intervalDownID); + clearTimeout(scope.timeoutDownID); + }; + + scope.startDecimalUp = function(d) { + if ((scope.useNgTouch && d == 'touch') || (!scope.useNgTouch && d == 'mouse')) { + scope.increaseDecimal(); + scope.timeoutUpID = setTimeout(function() { + scope.intervalUpID = setInterval(function(){ + scope.increaseDecimal(); + }, 100) + }, 600) + } + }; + + scope.stopDecimalUp = function() { + clearInterval(scope.intervalUpID); + clearTimeout(scope.timeoutUpID); + }; + + scope.startDecimalDown = function(d) { + if ((scope.useNgTouch && d == 'touch') || (!scope.useNgTouch && d == 'mouse')) { + scope.decreaseDecimal(); + scope.timeoutDownID = setTimeout(function() { + scope.intervalDownID = setInterval(function(){ + scope.decreaseDecimal(); + }, 100) + }, 600) + } + }; + + scope.stopDecimalDown = function() { + clearInterval(scope.intervalDownID); + clearTimeout(scope.timeoutDownID); }; function strip(number, precision) { @@ -94,9 +172,11 @@ if (number >= 0) { scope.isNegative = false; + scope.sign = ''; returnVal = Math.floor(number); } else { scope.isNegative = true; + scope.sign = '-'; returnVal = Math.ceil(number); } @@ -125,6 +205,9 @@ element.on("click", function () { if (scope.format == 'DECIMAL') { + //Reflect currentmost value (when the dialog opened twice) + scope.inputValue = scope.inputObj.inputValue ? scope.inputObj.inputValue : 0; + //Get Values from Initial Number scope.wholeNumber = findWholeNumber(Number(scope.inputValue)); scope.decimalNumber = scope.inputValue % 1; @@ -150,7 +233,7 @@ onTap: function (e) { scope.loadingContent = true; - scope.numericValue = Number(scope.wholeNumber) + Number(strip(scope.decimalNumber, scope.precision)); + scope.numericValue = Number(scope.isNegative ? -scope.wholeNumber : scope.wholeNumber) + Number(strip(scope.decimalNumber, scope.precision)); scope.inputObj.callback(scope.numericValue); } } @@ -158,6 +241,8 @@ }); } else { + //Reflect currentmost value (when the dialog opened twice) + scope.inputValue = scope.inputObj.inputValue ? scope.inputObj.inputValue : 0; //Get Values from Initial Number scope.wholeNumber = findWholeNumber(scope.inputValue); scope.decimalNumber = 0; @@ -182,7 +267,7 @@ onTap: function (e) { scope.loadingContent = true; - scope.inputObj.callback(scope.wholeNumber); + scope.inputObj.callback(scope.isNegative ? -scope.wholeNumber : scope.wholeNumber); } } ]