f4830030bf
Use MIT licensed clockpicker from http://weareoutman.github.io/clockpicker/ for Android like clock picker Know bug: next/prev month click only works with ctrl-click (jquery bug?)
97 lines
3.3 KiB
JavaScript
97 lines
3.3 KiB
JavaScript
define([
|
|
'jquery', 'knockout', 'text!./DateTime.html', 'fgcommand', 'kojqui/datepicker', 'kojqui/spinner', 'clockpicker'
|
|
], function(jquery, ko, htmlString, fgcommand) {
|
|
function ViewModel(params) {
|
|
var self = this;
|
|
|
|
self.timesOfToday = [
|
|
'Clock Time', 'Dawn', 'Morning', 'Noon', 'Afternoon', 'Dusk', 'Evening', 'Night',
|
|
];
|
|
|
|
self.setTimeOfToday = function(type) {
|
|
var offsetTypes = {
|
|
"Clock Time" : "real",
|
|
"Dawn" : "dawn",
|
|
"Morning" : "morning",
|
|
"Noon" : "noon",
|
|
"Afternoon" : "afternoon",
|
|
"Dusk" : "dusk",
|
|
"Evening" : "evening",
|
|
"Night" : "night",
|
|
}
|
|
offsetType = offsetTypes[type] || null;
|
|
if (!offsetType) {
|
|
console.log("unknown time offset type ", type);
|
|
return;
|
|
}
|
|
fgcommand.timeofday(offsetType);
|
|
}
|
|
|
|
self.gmtProp = ko.observable().extend({
|
|
fgprop : 'gmt'
|
|
});
|
|
//TODO: bind this to gmtProp?
|
|
// self.clockpickerInput.val(d.getUTCHours() + ':' + d.getUTCMinutes());
|
|
|
|
self.warp = ko.observable().extend({
|
|
fgprop : 'timeWarp'
|
|
});
|
|
|
|
self.simTimeUTC = ko.pureComputed(function() {
|
|
// make a Date object holding the UTC time
|
|
var d = new Date(self.gmtProp() + "Z");
|
|
return d.getTime();
|
|
});
|
|
|
|
self.timeAsString = ko.pureComputed(function() {
|
|
var d = new Date();
|
|
d.setTime( self.simTimeUTC() );
|
|
return d.toUTCString()
|
|
});
|
|
|
|
self.simTimeAsLocalTime = ko.pureComputed(function() {
|
|
// jqui datepicker displays local (browser) time, so fake it by adding timezoneOffset
|
|
var d = new Date();
|
|
d.setTime( self.simTimeUTC() + 60000 * d.getTimezoneOffset() );
|
|
return d;
|
|
});
|
|
|
|
self.onDateSelect = function(dateText, inst) {
|
|
var utc = new Date(self.simTimeUTC());
|
|
utc.setFullYear(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
|
|
self.setWarpFor( utc.getTime() );
|
|
}
|
|
|
|
self.setWarpFor = function( newDateTime ) {
|
|
var warp = (newDateTime - self.simTimeUTC())/1000;
|
|
console.log("warp=", warp, self.warp());
|
|
ko.utils.knockprops.write( "timeWarp", self.warp() + warp );
|
|
}
|
|
|
|
// clockpicker: see http://weareoutman.github.io/clockpicker/
|
|
self.clockpicker = jquery('.clockpicker').clockpicker({
|
|
placement : 'top',
|
|
align : 'left',
|
|
autoclose : true,
|
|
afterDone : function() {
|
|
var utc = new Date();
|
|
utc.setTime( self.simTimeUTC() );
|
|
var hm = self.clockpickerInput.val().toString().split(":");
|
|
utc.setUTCHours(hm[0]);
|
|
utc.setUTCMinutes(hm[1]);
|
|
self.setWarpFor( utc.getTime() );
|
|
},
|
|
});
|
|
|
|
self.clockpickerInput = jquery('.clockpicker input');
|
|
}
|
|
|
|
ViewModel.prototype.dispose = function() {
|
|
}
|
|
|
|
// Return component definition
|
|
return {
|
|
viewModel : ViewModel,
|
|
template : htmlString
|
|
};
|
|
});
|