0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

better formatting of dates, especially around 0 AD

Browse source
This commit is contained in:
rolux 2011-05-27 13:33:01 +02:00
parent c85ab83f9a
commit 419985c835
3 changed files with 57 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
demos/calendar/js/calendar.js
View file

@ -48,15 +48,29 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: '2020s', start: '2020', end: '2030', type: 'date'}, {name: '2020s', start: '2020', end: '2030', type: 'date'},
{name: 'Homer', start: '-900', end: '-800', type: 'person'},
{name: 'Socrates', start: '-469', end: '-399', type: 'person'},
{name: 'Plato', start: '-428', end: '-348', type: 'person'},
{name: 'Aristotle', start: '-384', end: '-322', type: 'person'},
{name: 'Alexander the Great', start: '-356-07-20', end: '-323-06-10', type: 'person'},
{name: 'Euclid', start: '-300', end: '-200', type: 'person'},
{name: 'Hannibal', start: '-247', end: '-182', type: 'person'},
{name: 'Julius Caesar', start: '-100-07-13', end: '-44-03-15', type: 'person'}, {name: 'Julius Caesar', start: '-100-07-13', end: '-44-03-15', type: 'person'},
{name: 'Cleopatra', start: '-69', end: '-30-08-12', type: 'person'},
{name: 'Augustus', start: '-63-09-23', end: '14-08-19', type: 'person'},
{name: 'Jesus Christ', start: '-5', end: '33', type: 'person'}, {name: 'Jesus Christ', start: '-5', end: '33', type: 'person'},
{name: 'Charlemagne', start: '742-04-02', end: '814-01-28', type: 'person'},
{name: 'Barbarossa', start: '1122', end: '1190-06-10', type: 'person'}, {name: 'Barbarossa', start: '1122', end: '1190-06-10', type: 'person'},
{name: 'Genghis Khan', start: '1162-05-31', end: '1227-08-25', type: 'person'}, {name: 'Genghis Khan', start: '1162-05-31', end: '1227-08-25', type: 'person'},
{name: 'Marco Polo', start: '1254', end: '1324-01-08', type: 'person'}, {name: 'Marco Polo', start: '1254', end: '1324-01-08', type: 'person'},
{name: 'Christopher Columbus', start: '1451-08-22', end: '1506-05-20', type: 'person'}, {name: 'Christopher Columbus', start: '1451-08-22', end: '1506-05-20', type: 'person'},
{name: 'Leonardo da Vinci', start: '1452-04-15', end: '1519-05-02', type: 'person'}, {name: 'Leonardo da Vinci', start: '1452-04-15', end: '1519-05-02', type: 'person'},
{name: 'Vasco da Gama', start: '1460', end: '1524-12-24', type: 'person'},
{name: 'Nicolaus Copernicus', start: '1473-02-19', end: '1543-05-24', type: 'person'},
{name: 'Michelangelo', start: '1475-03-06', end: '1564-02-18', type: 'person'}, {name: 'Michelangelo', start: '1475-03-06', end: '1564-02-18', type: 'person'},
{name: 'Martin Luther', start: '1483-11-10', end: '1546-02-18', type: 'person'},
{name: 'Pieter Bruegel', start: '1525', end: '1569-09-09', type: 'person'}, {name: 'Pieter Bruegel', start: '1525', end: '1569-09-09', type: 'person'},
{name: 'Francis Drake', start: '1544', end: '1596-01-27', type: 'person'},
{name: 'Francis Bacon', start: '1561-01-22', end: '1626-04-09', type: 'person'}, {name: 'Francis Bacon', start: '1561-01-22', end: '1626-04-09', type: 'person'},
{name: 'Galileo Galilei', start: '1564-02-15', end: '1642-01-08', type: 'person'}, {name: 'Galileo Galilei', start: '1564-02-15', end: '1642-01-08', type: 'person'},
{name: 'William Shakespeare', start: '1564-04-26', end: '1616-04-23', type: 'person'}, {name: 'William Shakespeare', start: '1564-04-26', end: '1616-04-23', type: 'person'},
@ -130,6 +144,11 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'Michael Jackson', start: '1958-08-29', end: '2009-06-25', type: 'person'}, {name: 'Michael Jackson', start: '1958-08-29', end: '2009-06-25', type: 'person'},
{name: 'Lady Diana', start: '1961-07-01', end: '1997-08-31', type: 'person'}, {name: 'Lady Diana', start: '1961-07-01', end: '1997-08-31', type: 'person'},
{name: 'Holy Roman Empire', start: '962-02-02', end: '1806-08-06', type: 'place'},
{name: 'Ottoman Empire', start: '1299-07-27', end: '1923-10-29', type: 'place'},
{name: 'Ming Dynasty', start: '1368', end: '1644', type: 'place'},
{name: 'Qing Dynasty', start: '1644', end: '1912', type: 'place'},
{name: 'Austrian Empire', start: '1804-08-11', end: '1867-03-30', type: 'place'},
{name: 'Congo Free State', start: '1885-07-11', end: '1908-11-15', type: 'place'}, {name: 'Congo Free State', start: '1885-07-11', end: '1908-11-15', type: 'place'},
{name: 'Soviet Union', start: '1922-12-30', end: '1991-12-26', type: 'place'}, {name: 'Soviet Union', start: '1922-12-30', end: '1991-12-26', type: 'place'},
{name: 'Weimar Republic', start: '1918-11-09', end: '1933-01-30', type: 'place'}, {name: 'Weimar Republic', start: '1918-11-09', end: '1933-01-30', type: 'place'},
@ -140,17 +159,25 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'World Trade Center', start: '1973-04-04', end: '2001-09-11', type: 'place'}, {name: 'World Trade Center', start: '1973-04-04', end: '2001-09-11', type: 'place'},
{name: 'Middle Ages', start: '500', end: '1400', type: 'other'}, {name: 'Bronze Age', start: '-3000', end: '-1000', type: 'other'},
{name: 'Iron Age', start: '-1000', end: '500', type: 'other'},
{name: 'Middle Ages', start: '500', end: '1350', type: 'other'},
{name: 'Battle of Hastings', start: '1066-10-14', end: '1066-10-15', type: 'other'}, {name: 'Battle of Hastings', start: '1066-10-14', end: '1066-10-15', type: 'other'},
{name: 'Renaissance', start: '1300', end: '1700', type: 'other'}, {name: 'Crusades', start: '1095', end: '1291', type: 'other'},
{name: 'Hundred Years\' War', start: '1337', end: '1453', type: 'other'},
{name: 'Renaissance', start: '1350', end: '1650', type: 'other'},
{name: 'Fall of Constantinople', start: '1453-04-06', end: '1453-05-29', type: 'other'},
{name: 'Spanish Inquisition', start: '1480-09-27', end: '1834-07-15', type: 'other'}, {name: 'Spanish Inquisition', start: '1480-09-27', end: '1834-07-15', type: 'other'},
{name: 'Discovery of America', start: '1492', end: '1493', type: 'other'}, {name: 'Discovery of America', start: '1492', end: '1493', type: 'other'},
{name: 'Gregorian Calendar', start: '1582-10-05', end: '1582-10-15', type: 'other'},
{name: 'East India Company', start: '1600', end: '1874', type: 'other'}, {name: 'East India Company', start: '1600', end: '1874', type: 'other'},
{name: 'Thirty Years\' War', start: '1618', end: '1648', type: 'other'}, {name: 'Thirty Years\' War', start: '1618', end: '1648', type: 'other'},
{name: 'Industrial Revolution', start: '1750', end: '1850', type: 'other'},
{name: 'Declaration of Independence', start: '1776-07-04', end: '1776-07-05', type: 'other'}, {name: 'Declaration of Independence', start: '1776-07-04', end: '1776-07-05', type: 'other'},
{name: 'French Revolution', start: '1789', end: '1799', type: 'other'}, {name: 'French Revolution', start: '1789', end: '1799', type: 'other'},
{name: 'Storming of the Bastille', start: '1789-07-14', end: '1789-07-15', type: 'other'}, {name: 'Storming of the Bastille', start: '1789-07-14', end: '1789-07-15', type: 'other'},
{name: 'Napoleonic Era', start: '1799-11-09', end: '1815-06-28', type: 'other'}, {name: 'Napoleonic Era', start: '1799-11-09', end: '1815-06-28', type: 'other'},
{name: 'Battle of Waterloo', start: '1815-06-18', end: '1815-06-19', type: 'other'},
{name: 'The Year Without a Summer', start: '1816', end: '1817', type: 'other'}, {name: 'The Year Without a Summer', start: '1816', end: '1817', type: 'other'},
{name: 'Queen Victoria', start: '1837-06-20', end: '1901-01-22', type: 'other'}, {name: 'Queen Victoria', start: '1837-06-20', end: '1901-01-22', type: 'other'},
{name: 'Crimean War', start: '1853-10', end: '1856-02', type: 'other'}, {name: 'Crimean War', start: '1853-10', end: '1856-02', type: 'other'},
@ -178,6 +205,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
{name: 'Nagasaki', start: '1945-08-09', end: '1945-08-10', type: 'other'}, {name: 'Nagasaki', start: '1945-08-09', end: '1945-08-10', type: 'other'},
{name: 'Nuremburg Trials', start: '1945-11-20', end: '1946-10-01', type: 'other'}, {name: 'Nuremburg Trials', start: '1945-11-20', end: '1946-10-01', type: 'other'},
{name: 'Fourth Republic', start: '1946-10-14', end: '1958-10-04', type: 'other'}, {name: 'Fourth Republic', start: '1946-10-14', end: '1958-10-04', type: 'other'},
{name: 'Cold War', start: '1947', end: '1991', type: 'other'},
{name: 'Korean War', start: '1950-06-25', end: '1953-07-27', type: 'other'}, {name: 'Korean War', start: '1950-06-25', end: '1953-07-27', type: 'other'},
{name: 'Cuban Revolution', start: '1953-07-26', end: '1959-01-01', type: 'other'}, {name: 'Cuban Revolution', start: '1953-07-26', end: '1959-01-01', type: 'other'},
{name: 'Algerian War', start: '1954-11-01', end: '1962-03-19', type: 'other'}, {name: 'Algerian War', start: '1954-11-01', end: '1962-03-19', type: 'other'},
@ -220,7 +248,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
height: window.innerHeight, height: window.innerHeight,
range: [-5000, 5000], range: [-5000, 5000],
width: window.innerWidth, width: window.innerWidth,
zoom: 4 zoom: 2
}).appendTo(Ox.UI.$body).gainFocus(); }).appendTo(Ox.UI.$body).gainFocus();
}); });

8
source/Ox.UI/css/Ox.UI.css
View file

@ -161,16 +161,16 @@ Calendar
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.OxCalendar .OxLine > .OxEvent.OxDate { .OxCalendar .OxLine > .OxEvent.OxDate {
background: -moz-linear-gradient(top, rgba(224, 0, 0, 0.9), rgba(192, 0, 0, 0.9)); background: -moz-linear-gradient(top, rgba(192, 0, 0, 0.9), rgba(160, 0, 0, 0.9));
background: -webkit-linear-gradient(top, rgba(224, 0, 0, 0.9), rgba(192, 0, 0, 0.9)); background: -webkit-linear-gradient(top, rgba(192, 0, 0, 0.9), rgba(160, 0, 0, 0.9));
} }
.OxCalendar .OxLine > .OxEvent.OxPlace { .OxCalendar .OxLine > .OxEvent.OxPlace {
//background: -moz-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9)); //background: -moz-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9));
//background: -webkit-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9)); //background: -webkit-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9));
} }
.OxCalendar .OxLine > .OxEvent.OxPerson { .OxCalendar .OxLine > .OxEvent.OxPerson {
//background: -moz-linear-gradient(top, rgba(255, 64, 0, 0.9), rgba(224, 32, 0, 0.9)); //background: -moz-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
//background: -webkit-linear-gradient(top, rgba(255, 64, 0, 0.9), rgba(224, 32, 0, 0.9)); //background: -webkit-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
} }
.OxCalendar .OxLine > .OxEvent.OxSelected { .OxCalendar .OxLine > .OxEvent.OxSelected {
background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9)); background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));

57
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -112,19 +112,13 @@ Ox.Calendar = function(options, self) {
- date: returns the start date of the index-th month - date: returns the start date of the index-th month
- name: returns a string representation of the index-th month - name: returns a string representation of the index-th month
- value: returns the month index for a given date - value: returns the month index for a given date
Setting the date is verbose, but it's the only way to avoid years
like 50 to be coerced to 1950.
*/ */
self.units = [ self.units = [
{ {
id: 'millennium', id: 'millennium',
seconds: 365242.5 * 86400, seconds: 365242.5 * 86400,
date: function(i) { date: function(i) {
var date = new Date(); return Ox.parseDate((i + 1) * 1000, true);
date.setUTCFullYear((i + 1) * 1000);
date.setUTCMonth(0);
date.setUTCDate(0);
return date;
}, },
name: function(i) { name: function(i) {
return i > -2 return i > -2
@ -139,11 +133,7 @@ Ox.Calendar = function(options, self) {
id: 'century', id: 'century',
seconds: 36524.25 * 86400, seconds: 36524.25 * 86400,
date: function(i) { date: function(i) {
var date = new Date(); return Ox.parseDate((i + 19) * 100, true);
date.setUTCFullYear((i + 19) * 100);
date.setUTCMonth(0);
date.setUTCDate(0);
return date;
}, },
name: function(i) { name: function(i) {
return i > -20 return i > -20
@ -158,14 +148,12 @@ Ox.Calendar = function(options, self) {
id: 'decade', id: 'decade',
seconds: 3652.425 * 86400, seconds: 3652.425 * 86400,
date: function(i) { date: function(i) {
var date = new Date(); return Ox.parseDate((i + 197) * 10, true);
date.setUTCFullYear((i + 197) * 10);
date.setUTCMonth(0);
date.setUTCDate(0);
return date;
}, },
name: function(i) { name: function(i) {
return (i + 197) + '0s' return i > -198
? (i + 197) + '0s'
: (-i - 198) + '0s BC';
}, },
value: function(date) { value: function(date) {
return Math.floor(date.getUTCFullYear() / 10) - 197; return Math.floor(date.getUTCFullYear() / 10) - 197;
@ -175,14 +163,10 @@ Ox.Calendar = function(options, self) {
id: 'year', id: 'year',
seconds: 365.2425 * 86400, seconds: 365.2425 * 86400,
date: function(i) { date: function(i) {
var date = new Date(); return Ox.parseDate(i + 1970, true);
date.setUTCFullYear(i + 1970);
date.setUTCMonth(0);
date.setUTCDate(0);
return date;
}, },
name: function(i) { name: function(i) {
return (i + 1970) + ''; return Ox.formatDate(Ox.parseDate(i + 1970, true), '%x', true);
}, },
value: function(date) { value: function(date) {
return date.getUTCFullYear() - 1970; return date.getUTCFullYear() - 1970;
@ -192,14 +176,14 @@ Ox.Calendar = function(options, self) {
id: 'month', id: 'month',
seconds: 365.2425 / 12 * 86400, seconds: 365.2425 / 12 * 86400,
date: function(i) { date: function(i) {
var date = new Date(); return Ox.parseDate(
date.setUTCFullYear(Math.floor(i / 12) + 1970); (Math.floor(i / 12) + 1970) + '-' + (Ox.mod(i, 12) + 1), true
date.setUTCMonth(Ox.mod(i, 12)); );
date.setUTCDate(0); // fixme: WTF??
return date;
}, },
name: function(i) { name: function(i) {
return Ox.SHORT_MONTHS[Ox.mod(i, 12)] + ' ' + Math.floor(i / 12 + 1970) return Ox.formatDate(Ox.parseDate(
(Math.floor(i / 12 + 1970)) + '-' + (Ox.mod(i, 12) + 1), true
), '%b %x', true);
}, },
value: function(date) { value: function(date) {
return (date.getUTCFullYear() - 1970) * 12 + date.getUTCMonth(); return (date.getUTCFullYear() - 1970) * 12 + date.getUTCMonth();
@ -212,7 +196,7 @@ Ox.Calendar = function(options, self) {
return new Date((i * 7 - 3) * 86400000); return new Date((i * 7 - 3) * 86400000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e'); return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e', true);
}, },
value: function(date) { value: function(date) {
return Math.floor((date / 86400000 + 4) / 7); return Math.floor((date / 86400000 + 4) / 7);
@ -225,7 +209,7 @@ Ox.Calendar = function(options, self) {
return new Date(i * 86400000); return new Date(i * 86400000);
}, },
name: function(i) { name: function(i) {
return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y', true); return Ox.formatDate(new Date(i * 86400000), '%b %e, %x', true);
}, },
value: function(date) { value: function(date) {
return Math.floor(date / 86400000); return Math.floor(date / 86400000);
@ -453,8 +437,8 @@ Ox.Calendar = function(options, self) {
function dragstart(event, e) { function dragstart(event, e) {
//if ($(e.target).is(':not(.OxLine > .OxEvent)')) { //if ($(e.target).is(':not(.OxLine > .OxEvent)')) {
self.drag = { self.drag = {
x: e.clientX, top: self.$container.$element[0].scrollTop,
y: self.$container.$element[0].scrollTop x: e.clientX
}; };
//} //}
} }
@ -473,7 +457,9 @@ Ox.Calendar = function(options, self) {
self.$scrollbar.css({ self.$scrollbar.css({
marginLeft: Math.round(marginLeft / scrollbarFactor) + 'px' marginLeft: Math.round(marginLeft / scrollbarFactor) + 'px'
}); });
scrollTo(self.drag.y - e.clientDY); scrollTo(self.drag.top - e.clientDY);
// fixme: after dragging too far in one direction,
// dragging in the opposite direction should work immediately
} }
} }
@ -961,6 +947,7 @@ Ox.Calendar = function(options, self) {
} else { } else {
self.$container.$element[0].scrollTop = top; self.$container.$element[0].scrollTop = top;
} }
Ox.print('scrollTo', top)
} }
function selectEvent(id, $element) { function selectEvent(id, $element) {