forked from 0x2620/oxjs
some calendar updates
This commit is contained in:
rlx
parent
0cbf31e981
commit
2e3292e9ce
4 changed files with 179 additions and 49 deletions
|
|
@ -10895,7 +10895,7 @@ requires
|
|||
height: 512,
|
||||
range: [100, 5101],
|
||||
width: 512,
|
||||
zoom: 5
|
||||
zoom: 8
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxCalendar')
|
||||
|
|
@ -10904,7 +10904,8 @@ requires
|
|||
height: self.options.height + 'px'
|
||||
});
|
||||
|
||||
self.maxZoom = 28;
|
||||
self.maxZoom = 32;
|
||||
self.minLabelWidth = 80;
|
||||
self.overlayWidths = [Math.round(self.options.width / 16)];
|
||||
self.overlayWidths = [
|
||||
Math.floor((self.options.width - self.overlayWidths[0]) / 2),
|
||||
|
|
@ -10912,9 +10913,22 @@ requires
|
|||
Math.ceil((self.options.width - self.overlayWidths[0]) / 2),
|
||||
];
|
||||
self.units = [
|
||||
{
|
||||
id: 'millennium',
|
||||
seconds: 365242.5 * 86400,
|
||||
date: function(i) {
|
||||
return new Date((i + 1) + '000');
|
||||
},
|
||||
name: function(i) {
|
||||
return Ox.formatOrdinal(i + 2) + ' millennium';
|
||||
},
|
||||
value: function(date) {
|
||||
return Math.floor(date.getFullYear() / 1000) - 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'century',
|
||||
seconds: 36524 * 86400,
|
||||
seconds: 36524.25 * 86400,
|
||||
date: function(i) {
|
||||
return new Date((i + 19) + '00');
|
||||
},
|
||||
|
|
@ -10927,7 +10941,7 @@ requires
|
|||
},
|
||||
{
|
||||
id: 'decade',
|
||||
seconds: 3652 * 86400,
|
||||
seconds: 3652.425 * 86400,
|
||||
date: function(i) {
|
||||
return (i + 197) + '0'
|
||||
},
|
||||
|
|
@ -10940,7 +10954,7 @@ requires
|
|||
},
|
||||
{
|
||||
id: 'year',
|
||||
seconds: 365 * 86400,
|
||||
seconds: 365.2425 * 86400,
|
||||
date: function(i) {
|
||||
return (i + 1970) + '';
|
||||
},
|
||||
|
|
@ -10953,7 +10967,7 @@ requires
|
|||
},
|
||||
{
|
||||
id: 'month',
|
||||
seconds: 28 * 86000,
|
||||
seconds: 365.2425 / 12 * 86400,
|
||||
date: function(i) {
|
||||
return (Math.floor(i / 12) + 1970) + '-' + (Ox.mod(i, 12) + 1);
|
||||
},
|
||||
|
|
@ -10964,12 +10978,26 @@ requires
|
|||
return (date.getFullYear() - 1970) * 12 + date.getMonth();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'week',
|
||||
seconds: 7 * 86400,
|
||||
date: function(i) {
|
||||
return (i * 7 - 3) * 86400000;
|
||||
},
|
||||
name: function(i) {
|
||||
return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e');
|
||||
},
|
||||
value: function(date) {
|
||||
return Math.floor((+date / 86400000 + 4) / 7);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'day',
|
||||
seconds: 86400,
|
||||
date: function(i) {
|
||||
// adjust for timezone difference
|
||||
return i * 86400000 + +new Date().getTimezoneOffset() * 60000;
|
||||
// fixme: may still be off
|
||||
return i * 86400000 + Ox.TIMEZONE_OFFSET;
|
||||
},
|
||||
name: function(i) {
|
||||
return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y');
|
||||
|
|
@ -10978,6 +11006,19 @@ requires
|
|||
return Math.floor(date / 86400000);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'six_hours',
|
||||
seconds: 21600,
|
||||
date: function(i) {
|
||||
return i * 21600000 + Ox.TIMEZONE_OFFSET;
|
||||
},
|
||||
name: function(i) {
|
||||
return Ox.formatDate(new Date(i * 21600000 + Ox.TIMEZONE_OFFSET), '%b %e, %H:00');
|
||||
},
|
||||
value: function(date) {
|
||||
return Math.floor((date - Ox.TIMEZONE_OFFSET) / 21600000);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'hour',
|
||||
seconds: 3600,
|
||||
|
|
@ -10991,6 +11032,19 @@ requires
|
|||
return Math.floor(date / 3600000);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'five_minutes',
|
||||
seconds: 300,
|
||||
date: function(i) {
|
||||
return i * 300000;
|
||||
},
|
||||
name: function(i) {
|
||||
return Ox.formatDate(new Date(i * 300000), '%b %e, %H:%M');
|
||||
},
|
||||
value: function(date) {
|
||||
return Math.floor(date / 300000);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'minute',
|
||||
seconds: 60,
|
||||
|
|
@ -11004,6 +11058,19 @@ requires
|
|||
return Math.floor(date / 60000);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'five_seconds',
|
||||
seconds: 5,
|
||||
date: function(i) {
|
||||
return i * 5000;
|
||||
},
|
||||
name: function(i) {
|
||||
return Ox.formatDate(new Date(i * 5000), '%H:%M:%S');
|
||||
},
|
||||
value: function(date) {
|
||||
return Math.floor(date / 5000);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'second',
|
||||
seconds: 1,
|
||||
|
|
@ -11026,16 +11093,17 @@ requires
|
|||
bottom: '40px'
|
||||
})
|
||||
.bind({
|
||||
dblclick: dblclick,
|
||||
mouseleave: mouseleave,
|
||||
mousemove: mousemove,
|
||||
mousewheel: mousewheel
|
||||
})
|
||||
.bindEvent({
|
||||
doubleclick: doubleclick,
|
||||
dragstart: dragstart,
|
||||
drag: drag,
|
||||
dragpause: dragpause,
|
||||
dragend: dragend
|
||||
dragend: dragend,
|
||||
singleclick: singleclick
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
|
|
@ -11141,7 +11209,7 @@ requires
|
|||
renderCalendar();
|
||||
}
|
||||
|
||||
function dblclick(e) {
|
||||
function doubleclick(event, e) {
|
||||
if ($(e.target).is(':not(.OxLine > .OxDate)')) {
|
||||
if (self.options.zoom < self.maxZoom) {
|
||||
self.options.date = new Date(
|
||||
|
|
@ -11304,7 +11372,7 @@ requires
|
|||
}
|
||||
|
||||
function getPixelsPerSecond(zoom) {
|
||||
return Math.pow(2, (zoom || self.options.zoom) - 24);
|
||||
return Math.pow(2, (zoom || self.options.zoom) - (self.maxZoom - 4));
|
||||
}
|
||||
|
||||
function getPosition(date, zoom) {
|
||||
|
|
@ -11322,45 +11390,35 @@ requires
|
|||
function getBackgroundElements(zoom) {
|
||||
// fixme: duplicated
|
||||
var $elements = [],
|
||||
pixelsPerSecond = getPixelsPerSecond(zoom),
|
||||
n, unit, value, width;
|
||||
Ox.forEach(self.units, function(v, i) {
|
||||
width = Math.round(v.seconds * pixelsPerSecond);
|
||||
if (width < 64) {
|
||||
unit = v;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
|
||||
value = unit.value(self.options.date);
|
||||
Ox.loop(-n, n + 1, function(i) {
|
||||
$elements.push(
|
||||
new Ox.Element()
|
||||
.addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd')
|
||||
.css({
|
||||
left: getPosition(new Date(unit.date(value + i)), zoom) + 'px',
|
||||
width: width + 'px'
|
||||
})
|
||||
);
|
||||
units = getUnits(zoom),
|
||||
n, value, width;
|
||||
[1, 0].forEach(function(u) {
|
||||
var unit = units[u],
|
||||
value = unit.value(self.options.date),
|
||||
width = unit.seconds * getPixelsPerSecond(zoom),
|
||||
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
|
||||
Ox.loop(-n, n + 1, function(i) {
|
||||
$elements.push(
|
||||
new Ox.Element()
|
||||
.addClass(
|
||||
u == 0 ? 'line' : Ox.mod(value + i, 2) == 0 ? 'even' : 'odd'
|
||||
)
|
||||
.css({
|
||||
left: getPosition(new Date(unit.date(value + i)), zoom) + 'px',
|
||||
width: (u == 0 ? 1 : width) + 'px'
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
return $elements;
|
||||
}
|
||||
|
||||
function getTimelineElements(zoom) {
|
||||
var $elements = [],
|
||||
pixelsPerSecond = getPixelsPerSecond(zoom),
|
||||
n, unit, value, width;
|
||||
self.units = self.units.reverse();
|
||||
Ox.forEach(self.units, function(v) {
|
||||
width = Math.round(v.seconds * pixelsPerSecond);
|
||||
if (width >= 64) {
|
||||
unit = v;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
self.units = self.units.reverse();
|
||||
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
|
||||
value = unit.value(self.options.date);
|
||||
unit = getUnits(zoom)[0],
|
||||
value = unit.value(self.options.date),
|
||||
width = unit.seconds * getPixelsPerSecond(zoom);
|
||||
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
|
||||
Ox.loop(-n, n + 1, function(i) {
|
||||
$elements.push(
|
||||
getDateElement({
|
||||
|
|
@ -11374,6 +11432,24 @@ requires
|
|||
return $elements;
|
||||
}
|
||||
|
||||
function getUnits(zoom) {
|
||||
// returns array of 2 units
|
||||
// units[0] for timeline
|
||||
// units[1] for background
|
||||
var pixelsPerSecond = getPixelsPerSecond(zoom),
|
||||
units;
|
||||
self.units = self.units.reverse();
|
||||
Ox.forEach(self.units, function(v, i) {
|
||||
width = Math.round(v.seconds * pixelsPerSecond);
|
||||
if (width >= self.minLabelWidth) {
|
||||
units = [self.units[i], self.units[i - 1]];
|
||||
return false;
|
||||
}
|
||||
});
|
||||
self.units = self.units.reverse();
|
||||
return units;
|
||||
}
|
||||
|
||||
function mouseleave() {
|
||||
self.$tooltip.hide();
|
||||
}
|
||||
|
|
@ -11432,6 +11508,9 @@ requires
|
|||
renderBackground();
|
||||
renderTimelines();
|
||||
renderDates();
|
||||
self.$statusbar.html(
|
||||
Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S %s')
|
||||
);
|
||||
}
|
||||
|
||||
function renderBackground() {
|
||||
|
|
@ -11499,6 +11578,13 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function singleclick(event, e) {
|
||||
if ($(e.target).is(':not(.OxLine > .OxDate)')) {
|
||||
self.options.date = getMouseDate(e);
|
||||
renderCalendar();
|
||||
}
|
||||
}
|
||||
|
||||
self.onChange = function(key, val) {
|
||||
if (key == 'date') {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue