some calendar updates

This commit is contained in:
rlx 2011-04-21 11:50:08 +00:00
parent 0cbf31e981
commit 2e3292e9ce
4 changed files with 179 additions and 49 deletions

View file

@ -47,12 +47,16 @@ Calendar
background: -webkit-gradient(linear, left top, left bottom, from(rgb(48, 48, 48)), to(rgb(16, 16, 16)));
}
.OxThemeModern .OxCalendar .OxBackground > div.odd {
.OxThemeModern .OxCalendar .OxBackground > div.even {
background: rgb(16, 16, 16);
}
.OxThemeModern .OxCalendar .OxBackground > div.even {
.OxThemeModern .OxCalendar .OxBackground > div.odd {
//background: rgb(20, 20, 20);
background: rgb(24, 24, 24);
}
.OxThemeModern .OxCalendar .OxBackground > div.line {
background: rgb(32, 32, 32);
}
/*

View file

@ -72,6 +72,8 @@ Ox.SYMBOLS = {
CLOSE: '\u2715', BALLOT: '\u2717', WINDOWS: '\u2756',
EDIT: '\uF802', CLICK: '\uF803', APPLE: '\uF8FF'
};
// local timezone offset in milliseconds
Ox.TIMEZONE_OFFSET = +new Date().getTimezoneOffset() * 60000;
Ox.TYPES = [
'Arguments', 'Array', 'Boolean', 'Date', 'Element', 'Function', 'Infinity',
'NaN', 'Null', 'Number', 'Object', 'RegExp', 'String', 'Undefined'
@ -1082,6 +1084,11 @@ Ox.isLeapYear = function(year) {
return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
};
Ox.makeDate = function(date) {
return Ox.isDate(date) ? date :
Ox.isUndefined(date) ? new Date() : new Date(date);
};
/*
================================================================================
DOM functions
@ -1611,6 +1618,22 @@ Ox.formatDate = function() {
>>> Ox.formatDate(new Date("01/03/2000"), "%W")
"01"
*/
/*
var date, fn, format, utc
Array.prototype.slice.call(arguments).forEach(function(arg) {
});
var fn = {}, format;
[
'getFullYear', 'getMonth', 'getDate',
'getHours', 'getMinutes', 'getSeconds', 'toString'
].forEach(function(f) {
});
*/
var format = [
["%", function() {return "%{%}";}],
["c", function() {return "%x %X";}],

View file

@ -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') {

View file

@ -6,6 +6,7 @@ $(function() {
date: new Date(0),
dates: [
{name: 'Genghis Khan', start: new Date('1162'), stop: new Date('1228'), type: 'Person'},
{name: 'Marco Polo', start: new Date('1254'), stop: new Date('1324-01-09'), type: 'Person'},
{name: 'Columbus', start: new Date('1451-08-22'), stop: new Date('1506-05-21'), type: 'Person'},
{name: 'Da Vinci', start: new Date('1452-04-15'), stop: new Date('1519-05-03'), type: 'Person'},
{name: 'Michelangelo', start: new Date('1475-03-06'), stop: new Date('1564-02-19'), type: 'Person'},
@ -25,13 +26,16 @@ $(function() {
{name: 'Darwin', start: new Date('1809-02-12'), stop: new Date('1882-04-20'), type: 'Person'},
{name: 'Marx', start: new Date('1818-05-05'), stop: new Date('1883-03-15'), type: 'Person'},
/*
{name: 'Gandhi', start: new Date('1869-10-02'), stop: new Date('1948-01-31'), type: 'Person'},
{name: 'Lenin', start: new Date('1870-04-22'), stop: new Date('1924-01-22'), type: 'Person'},
{name: 'Stalin', start: new Date('1878-12-18'), stop: new Date('1953-03-06'), type: 'Person'},
{name: 'Einstein', start: new Date('1879-03-14'), stop: new Date('1955-04-19'), type: 'Person'},
{name: 'Picasso', start: new Date('1881-10-25'), stop: new Date('1973-04-09'), type: 'Person'},
{name: 'Roosevelt', start: new Date('1882-01-30'), stop: new Date('1945-04-13'), type: 'Person'},
{name: 'Hitler', start: new Date('1889-04-20'), stop: new Date('1945-05-01'), type: 'Person'},
{name: 'Hitchcock', start: new Date('1899-08-13'), stop: new Date('1980-04-30'), type: 'Person'},
{name: 'Turing', start: new Date('1912-06-23'), stop: new Date('1954-06-08'), type: 'Person'},
{name: 'Kennedy', start: new Date('1917-05-29'), stop: new Date('1963-11-23'), type: 'Person'},
{name: 'Deleuze', start: new Date('1925-01-18'), stop: new Date('1995-11-05'), type: 'Person'},
{name: 'Warhol', start: new Date('1928-08-06'), stop: new Date('1987-02-23'), type: 'Person'},
{name: 'Debord', start: new Date('1931-12-28'), stop: new Date('1994-12-01'), type: 'Person'},
@ -39,19 +43,25 @@ $(function() {
{name: 'Test', start: new Date('1970-01-01'), stop: new Date('1970-01-02')},
{name: 'Battle of Hastings', start: new Date('1066-10-14'), stop: new Date('1066-10-15')},
{name: 'Renaissance', start: new Date('1300'), stop: new Date('1700')},
{name: 'Spanish Inquisition', start: new Date('1480-09-27'), stop: new Date('1820-03-10')},
{name: 'Discovery of America', start: new Date('1492'), stop: new Date('1493')},
{name: 'East India Company', start: new Date('1600'), stop: new Date('1874')},
{name: 'Thirty Years\' War', start: new Date('1618'), stop: new Date('1649')},
{name: 'Declaration of Independence', start: new Date('1776-07-04'), stop: new Date('1776-07-05')},
{name: 'French Revolution', start: new Date('1789'), stop: new Date('1800')},
{name: 'Storming of the Bastille', start: new Date('1789-07-14'), stop: new Date('1789-07-15')},
{name: 'Napoleonic Era', start: new Date('1799-11-09'), stop: new Date('1815-06-29')},
{name: 'The Year Without a Summer', start: new Date('1816'), stop: new Date('1817')},
{name: 'Queen Victoria', start: new Date('1837-06-20'), stop: new Date('1901-01-23')},
{name: 'Crimean War', start: new Date('1853-10'), stop: new Date('1856-03')},
{name: 'American Civil War', start: new Date('1861-04-12'), stop: new Date('1865-04-10')},
{name: 'Franco-Prussian War', start: new Date('1870-07-19'), stop: new Date('1871-05-11')},
{name: 'Paris Commune', start: new Date('1871-03-18'), stop: new Date('1871-05-29')},
{name: 'Congo Free State', start: new Date('1885-07-11'), stop: new Date('1908-11-16')},
{name: '20th century', start: new Date('1900'), stop: new Date('2000')},
{name: 'Titanic', start: new Date('1912-04-15'), stop: new Date('1912-04-16')},
{name: 'World War One', start: new Date('1914-07-28'), stop: new Date('1918-11-12')},
{name: 'Battle of Verdun', start: new Date('1916-02-21'), stop: new Date('1916-12-19')},
{name: 'Russian Revolution', start: new Date('1917'), stop: new Date('1918')},
{name: 'October Revolution', start: new Date('1917-11-07'), stop: new Date('1917-11-09')},
{name: 'Spanish Flu', start: new Date('1918'), stop: new Date('1919')},
@ -64,10 +74,15 @@ $(function() {
{name: '1936 Summer Olympics', start: new Date('1936-08-01'), stop: new Date('1936-08-17')},
{name: 'Hindenburg', start: new Date('1937-05-06'), stop: new Date('1937-05-07')},
{name: 'World War Two', start: new Date('1939-09-01'), stop: new Date('1945-09-03')},
{name: 'Pearl Harbour', start: new Date('1941-12-07'), stop: new Date('1941-12-08')},
{name: 'Wannsee Conference', start: new Date('1942-01-20'), stop: new Date('1942-01-21')},
{name: 'Battle of Stalingrad', start: new Date('1942-08-23'), stop: new Date('1943-02-03')},
{name: 'D-Day', start: new Date('1944-06-06'), stop: new Date('1944-06-07')},
{name: 'Liberation of Auschwitz', start: new Date('1945-01-27'), stop: new Date('1945-01-28')},
{name: 'Hiroshima', start: new Date('1945-08-06'), stop: new Date('1945-08-07')},
{name: 'Nagasaki', start: new Date('1945-08-09'), stop: new Date('1945-08-10')},
{name: 'Nuremburg Trials', start: new Date('1945-11-20'), stop: new Date('1946-10-02')},
{name: 'Fourth Republic', start: new Date('1946-10-14'), stop: new Date('1958-10-05')},
{name: 'West Germany', start: new Date('1949-05-23'), stop: new Date('1990-10-03')},
{name: 'Korean War', start: new Date('1950-06-25'), stop: new Date('1953-07-28')},
{name: 'Cuban Revolution', start: new Date('1953-07-26'), stop: new Date('1959-01-02')},
@ -103,14 +118,16 @@ $(function() {
{name: 'Tschernobyl', start: new Date('1986-04-26'), stop: new Date('1986-04-27')},
{name: 'Fall of the Berlin Wall', start: new Date('1989-11-09'), stop: new Date('1989-11-10')},
{name: 'Gulf War', start: new Date('1990-08-02'), stop: new Date('1991-03-01')},
{name: 'Clinton Presidency', start: new Date('1993-01-20'), stop: new Date('2001-01-20')},
{name: 'German Reunification', start: new Date('1990-10-03'), stop: new Date('1990-10-04')},
{name: 'The Battle of Seattle', start: new Date('1999-11-30'), stop: new Date('1999-12-01')},
{name: 'George W. Bush', start: new Date('2001-01-20'), stop: new Date('2009-01-20')},
{name: '9-11', start: new Date('2001-09-11'), stop: new Date('2001-09-12')}
{name: 'Carlo Giuliani', start: new Date('2001-07-20'), stop: new Date('2001-07-21')},
{name: '9-11', start: new Date('2001-09-11'), stop: new Date('2001-09-12')},
{name: 'Fukushima', start: new Date('2011-03-11'), stop: new Date('2011-03-12')}
],
height: window.innerHeight,
width: window.innerWidth,
zoom: 5
width: window.innerWidth
}).appendTo(Ox.UI.$body);
});