Skip to content
This repository has been archived by the owner on Jun 21, 2022. It is now read-only.

Allow increment of hour and minute #38

Open
wants to merge 8 commits into
base: gh-pages
Choose a base branch
from
Open

Allow increment of hour and minute #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c4bfd38
Allow to multi increment minutes and hours
JordyMoos Dec 3, 2014
8d11160
Added the new options to the readme
JordyMoos Dec 3, 2014
ae6ca97
Fix tab/spaces issue
JordyMoos Dec 3, 2014
5cfe240
Fix tab/spaces issue
JordyMoos Dec 3, 2014
f4cbb16
Fix tab/spaces issue
JordyMoos Dec 3, 2014
06cbb4f
Fix tab/spaces issue
JordyMoos Dec 3, 2014
c4bad4e
Bug fix with am/pm
JordyMoos Dec 3, 2014
c79c45d
Fix tab/spacing
JordyMoos Dec 4, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
133 changes: 62 additions & 71 deletions src/clockpicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -116,34 +118,11 @@
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) {

var amPmButtonsTemplate = ['<div class="clockpicker-am-pm-block">',
'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-am-button">',
'AM</button>',
'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-pm-button">',
'PM</button>',
'</div>'].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');
// });


$('<button type="button" class="btn btn-sm btn-default clockpicker-button am-button">' + "AM" + '</button>')
.on("click", function() {
self.amOrPm = "AM";
Expand Down Expand Up @@ -186,7 +165,7 @@

// Hours view
if (options.twelvehour) {
for (i = 1; i < 13; i += 1) {
for (i = 0; i < 12; i += options.hourstep) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
radius = outerRadius;
Expand All @@ -195,12 +174,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;
Expand All @@ -219,7 +198,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({
Expand Down Expand Up @@ -267,7 +247,7 @@
}

// Clock
self.setHand(dx, dy, ! space, true);
self.setHand(dx, dy, true);

// Mousemove on document
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
Expand All @@ -280,7 +260,7 @@
return;
}
moved = true;
self.setHand(x, y, false, true);
self.setHand(x, y, true);
});

// Mouseup on document
Expand Down Expand Up @@ -361,16 +341,22 @@
}
}

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')
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
'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
Expand Down Expand Up @@ -462,10 +448,18 @@
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';

if (this.options.twelvehour) {
this.spanAmPm.empty().append(this.amOrPm);
}

// Toggle to hours view
this.toggleView('hours');
Expand Down Expand Up @@ -567,19 +561,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) {
Expand All @@ -593,35 +594,25 @@
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;
}
if (isHours) {
value *= options.hourstep;

if (! options.twelvehour && ! inner) {
value += 12;
}
if (options.twelvehour && value === 0) {
value = 12;
}
if (value === 24) {
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;
}
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) {
Expand Down