some calendar updates
This commit is contained in:
rlx
parent
0cbf31e981
commit
2e3292e9ce
4 changed files with 179 additions and 49 deletions
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -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";}],
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
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);
|
||||
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')
|
||||
.addClass(
|
||||
u == 0 ? 'line' : Ox.mod(value + i, 2) == 0 ? 'even' : 'odd'
|
||||
)
|
||||
.css({
|
||||
left: getPosition(new Date(unit.date(value + i)), zoom) + 'px',
|
||||
width: width + '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();
|
||||
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);
|
||||
value = unit.value(self.options.date);
|
||||
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') {
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
});
|
||||
Loading…
Reference in a new issue