From 419985c8351bbce3c59816324511501495759c17 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 27 May 2011 13:33:01 +0200 Subject: [PATCH] better formatting of dates, especially around 0 AD --- demos/calendar/js/calendar.js | 34 +++++++++++++-- source/Ox.UI/css/Ox.UI.css | 8 ++-- source/Ox.UI/js/Calendar/Ox.Calendar.js | 57 ++++++++++--------------- 3 files changed, 57 insertions(+), 42 deletions(-) diff --git a/demos/calendar/js/calendar.js b/demos/calendar/js/calendar.js index bb803089..2f9367f6 100644 --- a/demos/calendar/js/calendar.js +++ b/demos/calendar/js/calendar.js @@ -48,15 +48,29 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'} {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: '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: 'Charlemagne', start: '742-04-02', end: '814-01-28', 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: 'Marco Polo', start: '1254', end: '1324-01-08', 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: '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: 'Martin Luther', start: '1483-11-10', end: '1546-02-18', 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: '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'}, @@ -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: '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: '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'}, @@ -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: '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: '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: '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: '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: 'French Revolution', start: '1789', end: '1799', 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: '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: 'Queen Victoria', start: '1837-06-20', end: '1901-01-22', 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: '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: 'Cold War', start: '1947', end: '1991', 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: '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, range: [-5000, 5000], width: window.innerWidth, - zoom: 4 + zoom: 2 }).appendTo(Ox.UI.$body).gainFocus(); }); \ No newline at end of file diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index f7408a1b..e7755b6f 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -161,16 +161,16 @@ Calendar border-bottom-right-radius: 0; } .OxCalendar .OxLine > .OxEvent.OxDate { - background: -moz-linear-gradient(top, rgba(224, 0, 0, 0.9), rgba(192, 0, 0, 0.9)); - background: -webkit-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(192, 0, 0, 0.9), rgba(160, 0, 0, 0.9)); } .OxCalendar .OxLine > .OxEvent.OxPlace { //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)); } .OxCalendar .OxLine > .OxEvent.OxPerson { - //background: -moz-linear-gradient(top, rgba(255, 64, 0, 0.9), rgba(224, 32, 0, 0.9)); - //background: -webkit-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, 96, 0, 0.9), rgba(224, 80, 0, 0.9)); } .OxCalendar .OxLine > .OxEvent.OxSelected { background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9)); diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index 8790ae28..8df65e4f 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -112,19 +112,13 @@ Ox.Calendar = function(options, self) { - date: returns the start date of the index-th month - name: returns a string representation of the index-th month - 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 = [ { id: 'millennium', seconds: 365242.5 * 86400, date: function(i) { - var date = new Date(); - date.setUTCFullYear((i + 1) * 1000); - date.setUTCMonth(0); - date.setUTCDate(0); - return date; + return Ox.parseDate((i + 1) * 1000, true); }, name: function(i) { return i > -2 @@ -139,11 +133,7 @@ Ox.Calendar = function(options, self) { id: 'century', seconds: 36524.25 * 86400, date: function(i) { - var date = new Date(); - date.setUTCFullYear((i + 19) * 100); - date.setUTCMonth(0); - date.setUTCDate(0); - return date; + return Ox.parseDate((i + 19) * 100, true); }, name: function(i) { return i > -20 @@ -158,14 +148,12 @@ Ox.Calendar = function(options, self) { id: 'decade', seconds: 3652.425 * 86400, date: function(i) { - var date = new Date(); - date.setUTCFullYear((i + 197) * 10); - date.setUTCMonth(0); - date.setUTCDate(0); - return date; + return Ox.parseDate((i + 197) * 10, true); }, name: function(i) { - return (i + 197) + '0s' + return i > -198 + ? (i + 197) + '0s' + : (-i - 198) + '0s BC'; }, value: function(date) { return Math.floor(date.getUTCFullYear() / 10) - 197; @@ -175,14 +163,10 @@ Ox.Calendar = function(options, self) { id: 'year', seconds: 365.2425 * 86400, date: function(i) { - var date = new Date(); - date.setUTCFullYear(i + 1970); - date.setUTCMonth(0); - date.setUTCDate(0); - return date; + return Ox.parseDate(i + 1970, true); }, name: function(i) { - return (i + 1970) + ''; + return Ox.formatDate(Ox.parseDate(i + 1970, true), '%x', true); }, value: function(date) { return date.getUTCFullYear() - 1970; @@ -192,14 +176,14 @@ Ox.Calendar = function(options, self) { id: 'month', seconds: 365.2425 / 12 * 86400, date: function(i) { - var date = new Date(); - date.setUTCFullYear(Math.floor(i / 12) + 1970); - date.setUTCMonth(Ox.mod(i, 12)); - date.setUTCDate(0); // fixme: WTF?? - return date; + return Ox.parseDate( + (Math.floor(i / 12) + 1970) + '-' + (Ox.mod(i, 12) + 1), true + ); }, 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) { return (date.getUTCFullYear() - 1970) * 12 + date.getUTCMonth(); @@ -212,7 +196,7 @@ Ox.Calendar = function(options, self) { return new Date((i * 7 - 3) * 86400000); }, 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) { return Math.floor((date / 86400000 + 4) / 7); @@ -225,7 +209,7 @@ Ox.Calendar = function(options, self) { return new Date(i * 86400000); }, 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) { return Math.floor(date / 86400000); @@ -453,8 +437,8 @@ Ox.Calendar = function(options, self) { function dragstart(event, e) { //if ($(e.target).is(':not(.OxLine > .OxEvent)')) { self.drag = { - x: e.clientX, - y: self.$container.$element[0].scrollTop + top: self.$container.$element[0].scrollTop, + x: e.clientX }; //} } @@ -473,7 +457,9 @@ Ox.Calendar = function(options, self) { self.$scrollbar.css({ 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 { self.$container.$element[0].scrollTop = top; } + Ox.print('scrollTo', top) } function selectEvent(id, $element) {