From c4bfd3849f1deeafc80f89e2574e316b5325fdc9 Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Wed, 3 Dec 2014 21:10:19 +0100 Subject: [PATCH 1/8] Allow to multi increment minutes and hours --- src/clockpicker.js | 126 ++++++++++++++++++++------------------------- 1 file changed, 57 insertions(+), 69 deletions(-) diff --git a/src/clockpicker.js b/src/clockpicker.js index 7f208aa..f1ba120 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -102,6 +102,8 @@ this.id = uniqueId('cp'); this.element = element; this.options = options; + this.options.hourstep = this.parseStep(this.options.hourstep, 12); + this.options.minutestep = this.parseStep(this.options.minutestep, 60); this.isAppended = false; this.isShown = false; this.currentView = 'hours'; @@ -117,33 +119,10 @@ this.spanMinutes = popover.find('.clockpicker-span-minutes'); this.spanAmPm = popover.find('.clockpicker-span-am-pm'); this.amOrPm = "PM"; - + // Setup for for 12 hour clock if option is selected if (options.twelvehour) { - - var amPmButtonsTemplate = ['
', - '', - '', - '
'].join(''); - - var amPmButtons = $(amPmButtonsTemplate); - //amPmButtons.appendTo(plate); - - ////Not working b/c they are not shown when this runs - //$('clockpicker-am-button') - // .on("click", function() { - // self.amOrPm = "AM"; - // $('.clockpicker-span-am-pm').empty().append('AM'); - // }); - // - //$('clockpicker-pm-button') - // .on("click", function() { - // self.amOrPm = "PM"; - // $('.clockpicker-span-am-pm').empty().append('PM'); - // }); - + $('') .on("click", function() { self.amOrPm = "AM"; @@ -186,7 +165,8 @@ // Hours view if (options.twelvehour) { - for (i = 1; i < 13; i += 1) { + this.spanAmPm.empty().append(self.amOrPm); + for (i = 0; i < 12; i += options.hourstep) { tick = tickTpl.clone(); radian = i / 6 * Math.PI; radius = outerRadius; @@ -195,12 +175,12 @@ left: dialRadius + Math.sin(radian) * radius - tickRadius, top: dialRadius - Math.cos(radian) * radius - tickRadius }); - tick.html(i === 0 ? '00' : i); + tick.html(i === 0 ? 12 : i); hoursView.append(tick); tick.on(mousedownEvent, mousedown); } } else { - for (i = 0; i < 24; i += 1) { + for (i = 0; i < 24; i += options.hourstep) { tick = tickTpl.clone(); radian = i / 6 * Math.PI; var inner = i > 0 && i < 13; @@ -219,7 +199,8 @@ } // Minutes view - for (i = 0; i < 60; i += 5) { + var incrementValue = Math.max(options.minutestep, 5); + for (i = 0; i < 60; i += incrementValue) { tick = tickTpl.clone(); radian = i / 30 * Math.PI; tick.css({ @@ -267,7 +248,7 @@ } // Clock - self.setHand(dx, dy, ! space, true); + self.setHand(dx, dy, true); // Mousemove on document $doc.off(mousemoveEvent).on(mousemoveEvent, function(e){ @@ -280,7 +261,7 @@ return; } moved = true; - self.setHand(x, y, false, true); + self.setHand(x, y, true); }); // Mouseup on document @@ -361,6 +342,10 @@ } } + ClockPicker.prototype.parseStep = function(givenStepSize, wholeSize) { + return wholeSize % givenStepSize === 0 ? givenStepSize : 1; + } + // Default options ClockPicker.DEFAULTS = { 'default': '', // default time, 'now' or '13:14' e.g. @@ -369,8 +354,10 @@ align: 'left', // popover arrow align donetext: '完成', // done button text autoclose: false, // auto close when minute is selected - twelvehour: false, // change to 12 hour AM/PM clock from 24 hour - vibrate: true // vibrate the device when dragging clock hand + twelvehour: false, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + hourstep: 1, // allow to change the hourly step size + minutestep: 1 // allow to change the minute step size. For example you can only select quarters }; // Show or hide popover @@ -462,10 +449,14 @@ now.getMinutes() ]; } + this.hours = + value[0] || 0; + this.hours = Math.round(this.hours / this.options.hourstep) * this.options.hourstep; this.minutes = + value[1] || 0; + this.minutes = Math.round(this.minutes / this.options.minutestep) * this.options.minutestep; this.spanHours.html(leadingZero(this.hours)); this.spanMinutes.html(leadingZero(this.minutes)); + this.amOrPm = this.hours < 12 ? 'AM' : 'PM'; // Toggle to hours view this.toggleView('hours'); @@ -567,19 +558,26 @@ }; // Set clock hand to (x, y) - ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){ + ClockPicker.prototype.setHand = function(x, y, dragging){ var radian = Math.atan2(x, - y), isHours = this.currentView === 'hours', - unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), options = this.options, inner = isHours && z < (outerRadius + innerRadius) / 2, radius = inner ? innerRadius : outerRadius, + unit, value; - - if (options.twelvehour) { - radius = outerRadius; - } + + // Calculate the unit + if (isHours) { + unit = options.hourstep / 6 * Math.PI + } else { + unit = options.minutestep / 30 * Math.PI + } + + if (options.twelvehour) { + radius = outerRadius; + } // Radian should in range [0, 2PI] if (radian < 0) { @@ -592,36 +590,26 @@ // Get the round radian radian = value * unit; - // Correct the hours or minutes - if (options.twelvehour) { - if (isHours) { - if (value === 0) { - value = 12; - } - } else { - if (roundBy5) { - value *= 5; - } - if (value === 60) { - value = 0; - } - } - } else { - if (isHours) { - if (value === 12) { - value = 0; - } - value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12; - } else { - if (roundBy5) { - value *= 5; - } - if (value === 60) { - value = 0; - } - } - } - + // Correct the hours or minutes + if (isHours) { + value *= options.hourstep; + + if (! options.twelvehour && ! inner) { + value += 12; + } + if (options.twelvehour && value === 0) { + value = 12; + } + if (value === 24) { + value = 0; + } + } else { + value *= options.minutestep; + if (value === 60) { + value = 0; + } + } + // Once hours or minutes changed, vibrate the device if (this[this.currentView] !== value) { if (vibrate && this.options.vibrate) { From 8d11160b7575dfc44c75ccdb028c797e81bd77a3 Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Wed, 3 Dec 2014 21:20:27 +0100 Subject: [PATCH 2/8] Added the new options to the readme --- README.md | 2 ++ src/clockpicker.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5ff911a..f775982 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,8 @@ if (something) { | twelvehour | false | enables twelve hour mode with AM & PM buttons | | vibrate | true | vibrate the device when dragging clock hand | | fromnow | 0 | set default time to * milliseconds from now (using with default = 'now') | +| hourstep | 1 | allow to multi increment the hour | +| minutestep | 1 | allow to multi increment the minute | | init | | callback function triggered after the colorpicker has been initiated | | beforeShow | | callback function triggered before popup is shown | | afterShow | | callback function triggered after popup is shown | diff --git a/src/clockpicker.js b/src/clockpicker.js index f1ba120..9ad7543 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -356,8 +356,8 @@ autoclose: false, // auto close when minute is selected twelvehour: false, // change to 12 hour AM/PM clock from 24 hour vibrate: true, // vibrate the device when dragging clock hand - hourstep: 1, // allow to change the hourly step size - minutestep: 1 // allow to change the minute step size. For example you can only select quarters + hourstep: 1, // allow to multi increment the hour + minutestep: 1 // allow to multi increment the minute }; // Show or hide popover From ae6ca977e44b78de8eddd5b0ca227faf9673be9b Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Wed, 3 Dec 2014 21:24:33 +0100 Subject: [PATCH 3/8] Fix tab/spaces issue --- src/clockpicker.js | 94 +++++++++++++++++++++++----------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/src/clockpicker.js b/src/clockpicker.js index 9ad7543..a5a2827 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -102,8 +102,8 @@ this.id = uniqueId('cp'); this.element = element; this.options = options; - this.options.hourstep = this.parseStep(this.options.hourstep, 12); - this.options.minutestep = this.parseStep(this.options.minutestep, 60); + this.options.hourstep = this.parseStep(this.options.hourstep, 12); + this.options.minutestep = this.parseStep(this.options.minutestep, 60); this.isAppended = false; this.isShown = false; this.currentView = 'hours'; @@ -165,7 +165,7 @@ // Hours view if (options.twelvehour) { - this.spanAmPm.empty().append(self.amOrPm); + this.spanAmPm.empty().append(self.amOrPm); for (i = 0; i < 12; i += options.hourstep) { tick = tickTpl.clone(); radian = i / 6 * Math.PI; @@ -199,7 +199,7 @@ } // Minutes view - var incrementValue = Math.max(options.minutestep, 5); + var incrementValue = Math.max(options.minutestep, 5); for (i = 0; i < 60; i += incrementValue) { tick = tickTpl.clone(); radian = i / 30 * Math.PI; @@ -342,22 +342,22 @@ } } - ClockPicker.prototype.parseStep = function(givenStepSize, wholeSize) { - return wholeSize % givenStepSize === 0 ? givenStepSize : 1; - } + ClockPicker.prototype.parseStep = function(givenStepSize, wholeSize) { + return wholeSize % givenStepSize === 0 ? givenStepSize : 1; + } // Default options ClockPicker.DEFAULTS = { - 'default': '', // default time, 'now' or '13:14' e.g. - fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') + 'default': '', // default time, 'now' or '13:14' e.g. + fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') placement: 'bottom', // clock popover placement - align: 'left', // popover arrow align - donetext: '完成', // done button text - autoclose: false, // auto close when minute is selected + align: 'left', // popover arrow align + donetext: '完成', // done button text + autoclose: false, // auto close when minute is selected twelvehour: false, // change to 12 hour AM/PM clock from 24 hour - vibrate: true, // vibrate the device when dragging clock hand - hourstep: 1, // allow to multi increment the hour - minutestep: 1 // allow to multi increment the minute + vibrate: true, // vibrate the device when dragging clock hand + hourstep: 1, // allow to multi increment the hour + minutestep: 1 // allow to multi increment the minute }; // Show or hide popover @@ -451,12 +451,12 @@ } this.hours = + value[0] || 0; - this.hours = Math.round(this.hours / this.options.hourstep) * this.options.hourstep; + this.hours = Math.round(this.hours / this.options.hourstep) * this.options.hourstep; this.minutes = + value[1] || 0; - this.minutes = Math.round(this.minutes / this.options.minutestep) * this.options.minutestep; + this.minutes = Math.round(this.minutes / this.options.minutestep) * this.options.minutestep; this.spanHours.html(leadingZero(this.hours)); this.spanMinutes.html(leadingZero(this.minutes)); - this.amOrPm = this.hours < 12 ? 'AM' : 'PM'; + this.amOrPm = this.hours < 12 ? 'AM' : 'PM'; // Toggle to hours view this.toggleView('hours'); @@ -565,19 +565,19 @@ options = this.options, inner = isHours && z < (outerRadius + innerRadius) / 2, radius = inner ? innerRadius : outerRadius, - unit, + unit, value; - // Calculate the unit - if (isHours) { - unit = options.hourstep / 6 * Math.PI - } else { - unit = options.minutestep / 30 * Math.PI - } + // Calculate the unit + if (isHours) { + unit = options.hourstep / 6 * Math.PI + } else { + unit = options.minutestep / 30 * Math.PI + } - if (options.twelvehour) { - radius = outerRadius; - } + if (options.twelvehour) { + radius = outerRadius; + } // Radian should in range [0, 2PI] if (radian < 0) { @@ -590,25 +590,25 @@ // Get the round radian radian = value * unit; - // Correct the hours or minutes - if (isHours) { - value *= options.hourstep; - - if (! options.twelvehour && ! inner) { - value += 12; - } - if (options.twelvehour && value === 0) { - value = 12; - } - if (value === 24) { - value = 0; - } - } else { - value *= options.minutestep; - if (value === 60) { - value = 0; - } - } + // Correct the hours or minutes + if (isHours) { + value *= options.hourstep; + + if (! options.twelvehour && ! inner) { + value += 12; + } + if (options.twelvehour && value === 0) { + value = 12; + } + if (value === 24) { + value = 0; + } + } else { + value *= options.minutestep; + if (value === 60) { + value = 0; + } + } // Once hours or minutes changed, vibrate the device if (this[this.currentView] !== value) { From 5cfe240f96eb69bd405cfc0ad97a8c2ed0ca0e46 Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Wed, 3 Dec 2014 21:28:45 +0100 Subject: [PATCH 4/8] Fix tab/spaces issue --- src/clockpicker.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/clockpicker.js b/src/clockpicker.js index a5a2827..df3a344 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -348,16 +348,16 @@ // Default options ClockPicker.DEFAULTS = { - 'default': '', // default time, 'now' or '13:14' e.g. - fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') - placement: 'bottom', // clock popover placement - align: 'left', // popover arrow align - donetext: '完成', // done button text - autoclose: false, // auto close when minute is selected - twelvehour: false, // change to 12 hour AM/PM clock from 24 hour - vibrate: true, // vibrate the device when dragging clock hand - hourstep: 1, // allow to multi increment the hour - minutestep: 1 // allow to multi increment the minute + 'default': '', // default time, 'now' or '13:14' e.g. + fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') + placement: 'bottom', // clock popover placement + align: 'left', // popover arrow align + donetext: '完成', // done button text + autoclose: false, // auto close when minute is selected + twelvehour: false, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + hourstep: 1, // allow to multi increment the hour + minutestep: 1 // allow to multi increment the minute }; // Show or hide popover From f4cbb167d152f5b726478f0e3d2dad4a39f2e414 Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Wed, 3 Dec 2014 21:29:47 +0100 Subject: [PATCH 5/8] Fix tab/spaces issue --- src/clockpicker.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/clockpicker.js b/src/clockpicker.js index df3a344..4b410eb 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -348,16 +348,16 @@ // Default options ClockPicker.DEFAULTS = { - 'default': '', // default time, 'now' or '13:14' e.g. - fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') + 'default': '', // default time, 'now' or '13:14' e.g. + fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') placement: 'bottom', // clock popover placement - align: 'left', // popover arrow align - donetext: '完成', // done button text - autoclose: false, // auto close when minute is selected - twelvehour: false, // change to 12 hour AM/PM clock from 24 hour - vibrate: true, // vibrate the device when dragging clock hand - hourstep: 1, // allow to multi increment the hour - minutestep: 1 // allow to multi increment the minute + align: 'left', // popover arrow align + donetext: '完成', // done button text + autoclose: false, // auto close when minute is selected + twelvehour: false, // change to 12 hour AM/PM clock from 24 hour + vibrate: true, // vibrate the device when dragging clock hand + hourstep: 1, // allow to multi increment the hour + minutestep: 1 // allow to multi increment the minute }; // Show or hide popover From 06cbb4f57ffe1cc72349315c91047e0b5c41964d Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Wed, 3 Dec 2014 21:30:20 +0100 Subject: [PATCH 6/8] Fix tab/spaces issue --- src/clockpicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/clockpicker.js b/src/clockpicker.js index 4b410eb..6e3f4f2 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -349,7 +349,7 @@ // Default options ClockPicker.DEFAULTS = { 'default': '', // default time, 'now' or '13:14' e.g. - fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') + fromnow: 0, // set default time to * milliseconds from now (using with default = 'now') placement: 'bottom', // clock popover placement align: 'left', // popover arrow align donetext: '完成', // done button text From c4bad4e9d863c7bbc495ffcc0fd61ca6d9a3dad7 Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Wed, 3 Dec 2014 21:36:07 +0100 Subject: [PATCH 7/8] Bug fix with am/pm --- src/clockpicker.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/clockpicker.js b/src/clockpicker.js index 6e3f4f2..2fe7898 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -118,7 +118,7 @@ this.spanHours = popover.find('.clockpicker-span-hours'); this.spanMinutes = popover.find('.clockpicker-span-minutes'); this.spanAmPm = popover.find('.clockpicker-span-am-pm'); - this.amOrPm = "PM"; + this.amOrPm = ""; // Setup for for 12 hour clock if option is selected if (options.twelvehour) { @@ -165,7 +165,6 @@ // Hours view if (options.twelvehour) { - this.spanAmPm.empty().append(self.amOrPm); for (i = 0; i < 12; i += options.hourstep) { tick = tickTpl.clone(); radian = i / 6 * Math.PI; @@ -458,6 +457,10 @@ this.spanMinutes.html(leadingZero(this.minutes)); this.amOrPm = this.hours < 12 ? 'AM' : 'PM'; + if (this.options.twelvehour) { + this.spanAmPm.empty().append(this.amOrPm); + } + // Toggle to hours view this.toggleView('hours'); From c79c45d18fcf81577a2c34d0f1cb8c52edd30be0 Mon Sep 17 00:00:00 2001 From: Jordy Moos Date: Thu, 4 Dec 2014 07:00:35 +0100 Subject: [PATCH 8/8] Fix tab/spacing --- src/clockpicker.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/clockpicker.js b/src/clockpicker.js index 2fe7898..d0b35cb 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -457,9 +457,9 @@ this.spanMinutes.html(leadingZero(this.minutes)); this.amOrPm = this.hours < 12 ? 'AM' : 'PM'; - if (this.options.twelvehour) { - this.spanAmPm.empty().append(this.amOrPm); - } + if (this.options.twelvehour) { + this.spanAmPm.empty().append(this.amOrPm); + } // Toggle to hours view this.toggleView('hours');