From c661f3a883717ec280a1ec8f793ad41a4c98e4dc Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 25 May 2011 18:36:55 +0200 Subject: [PATCH] more calendar improvements (keyboard navigation etc.) --- demos/calendar/index.html | 2 +- demos/calendar/js/calendar.js | 305 ++++++++++++++---------- source/Ox.UI/css/Ox.UI.css | 25 +- source/Ox.UI/js/Calendar/Ox.Calendar.js | 251 ++++++++++++++++--- 4 files changed, 418 insertions(+), 165 deletions(-) diff --git a/demos/calendar/index.html b/demos/calendar/index.html index e61ed473..1a535b5d 100644 --- a/demos/calendar/index.html +++ b/demos/calendar/index.html @@ -1,7 +1,7 @@ - ox.js calendar demo + OxJS Calendar Demo diff --git a/demos/calendar/js/calendar.js b/demos/calendar/js/calendar.js index 115bd65d..23210ffc 100644 --- a/demos/calendar/js/calendar.js +++ b/demos/calendar/js/calendar.js @@ -14,134 +14,193 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'} Ox.Calendar({ date: new Date(0), events: [ - {name: 'The Epoch', start: '1970-01-01 00:00:00', end: '1970-01-01 00:00:01'}, + + {name: '14th Century', start: '1300', end: '1400', type: 'date'}, + {name: '15th Century', start: '1400', end: '1500', type: 'date'}, + {name: '15th Century', start: '1500', end: '1600', type: 'date'}, + {name: '17th Century', start: '1600', end: '1700', type: 'date'}, + {name: '18th Century', start: '1700', end: '1800', type: 'date'}, + {name: '19th Century', start: '1800', end: '1900', type: 'date'}, + {name: '20th Century', start: '1900', end: '2000', type: 'date'}, + {name: '1900s', start: '1900', end: '1910', type: 'date'}, + {name: '1910s', start: '1910', end: '1920', type: 'date'}, + {name: '1920s', start: '1920', end: '1930', type: 'date'}, + {name: '1930s', start: '1930', end: '1940', type: 'date'}, + {name: '1940s', start: '1940', end: '1950', type: 'date'}, + {name: '1950s', start: '1950', end: '1960', type: 'date'}, + {name: '1960s', start: '1960', end: '1970', type: 'date'}, + {name: '1967', start: '1967', end: '1968', type: 'date'}, + {name: '1968', start: '1968', end: '1969', type: 'date'}, + {name: 'Spring 1968', start: '1968-03', end: '1968-06', type: 'date'}, + {name: 'May 1968', start: '1968-05', end: '1968-06', type: 'date'}, + {name: 'Summer 1968', start: '1968-06', end: '1968-09', type: 'date'}, + {name: '1969', start: '1969', end: '1970', type: 'date'}, + {name: '1970s', start: '1970', end: '1980', type: 'date'}, + {name: '1980s', start: '1980', end: '1990', type: 'date'}, + {name: '1990s', start: '1990', end: '2000', type: 'date'}, + {name: '21st Century', start: '2000', end: '2100', type: 'date'}, + {name: '2000s', start: '2000', end: '2010', type: 'date'}, + {name: '2010s', start: '2010', end: '2020', type: 'date'}, + {name: '2020s', start: '2020', end: '2030', type: 'date'}, - {name: 'Genghis Khan', start: '1162', end: '1228', type: 'Person'}, - {name: 'Marco Polo', start: '1254', end: '1324-01-08', type: 'Person'}, - {name: 'Columbus', start: '1451-08-22', end: '1506-05-20', type: 'Person'}, - {name: 'Da Vinci', start: '1452-04-15', end: '1519-05-02', type: 'Person'}, - {name: 'Michelangelo', start: '1475-03-06', end: '1564-02-18', type: 'Person'}, - {name: 'Bruegel', start: '1525', end: '1569-09-09', type: 'Person'}, - {name: 'Galilei', start: '1564-02-15', end: '1642-01-08', type: 'Person'}, - {name: 'Shakespeare', start: '1564-04-26', end: '1616-04-23', type: 'Person'}, - {name: 'Descartes', start: '1596-03-31', end: '1650-02-11', type: 'Person'}, - {name: 'Velazquez', start: '1599-06-06', end: '1660-08-06', type: 'Person'}, - {name: 'Vermeer', start: '1632-10-31', end: '1675-12-15', type: 'Person'}, - {name: 'Spinoza', start: '1632-11-24', end: '1677-02-21', type: 'Person'}, - {name: 'Louix XIV', start: '1638-09-05', end: '1715-09-01', type: 'Person'}, - {name: 'Newton', start: '1643-01-04', end: '1727-03-31', type: 'Person'}, - {name: 'Leibniz', start: '1646-07-01', end: '1716-11-14', type: 'Person'}, - {name: 'Kant', start: '1724-04-22', end: '1804-02-12', type: 'Person'}, - {name: 'Napoleon', start: '1769-08-15', end: '1821-05-05', type: 'Person'}, - {name: 'Hegel', start: '1770-08-27', end: '1831-11-14', type: 'Person'}, - {name: 'Darwin', start: '1809-02-12', end: '1882-04-19', type: 'Person'}, - {name: 'Marx', start: '1818-05-05', end: '1883-03-14', type: 'Person'}, + {name: 'Genghis Khan', start: '1162', end: '1228', 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: 'Michelangelo', start: '1475-03-06', end: '1564-02-18', type: 'person'}, + {name: 'Pieter Bruegel', start: '1525', end: '1569-09-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'}, + {name: 'René Descartes', start: '1596-03-31', end: '1650-02-11', type: 'person'}, + {name: 'Diego Velázquez', start: '1599-06-06', end: '1660-08-06', type: 'person'}, + {name: 'Johannes Vermeer', start: '1632-10-31', end: '1675-12-15', type: 'person'}, + {name: 'Baruch Spinoza', start: '1632-11-24', end: '1677-02-21', type: 'person'}, + {name: 'Louix XIV', start: '1638-09-05', end: '1715-09-01', type: 'person'}, + {name: 'Isaac Newton', start: '1643-01-04', end: '1727-03-31', type: 'person'}, + {name: 'Gottfried Leibniz', start: '1646-07-01', end: '1716-11-14', type: 'person'}, + {name: 'Immanuel Kant', start: '1724-04-22', end: '1804-02-12', type: 'person'}, + {name: 'George Washington', start: '1732-02-22', end: '1799-12-14', type: 'person'}, + {name: 'Thomas Jefferson', start: '1743-04-13', end: '1826-07-04', type: 'person'}, + {name: 'Johann Wolfgang von Goethe', start: '1749-08-28', end: '1832-03-22', type: 'person'}, + {name: 'Louis XVI', start: '1754-08-23', end: '1793-01-21', type: 'person'}, + {name: 'Marie Antoinette', start: '1755-11-01', end: '1793-10-16', type: 'person'}, + {name: 'Maximilien Robespierre', start: '1758-05-06', end: '1794-07-28', type: 'person'}, + {name: 'Napoleon', start: '1769-08-15', end: '1821-05-05', type: 'person'}, + {name: 'Georg Wilhelm Friedrich Hegel', start: '1770-08-27', end: '1831-11-14', type: 'person'}, + {name: 'Abraham Lincoln', start: '1809-02-12', end: '1865-04-15', type: 'person'}, + {name: 'Charles Darwin', start: '1809-02-12', end: '1882-04-19', type: 'person'}, + {name: 'Ada Lovelace', start: '1815-12-10', end: '1852-11-27', type: 'person'}, + {name: 'Karl Marx', start: '1818-05-05', end: '1883-03-14', type: 'person'}, ///* - {name: 'Gandhi', start: '1869-10-02', end: '1948-01-30', type: 'Person'}, - {name: 'Lenin', start: '1870-04-22', end: '1924-01-21', type: 'Person'}, - {name: 'Stalin', start: '1878-12-18', end: '1953-03-05', type: 'Person'}, - {name: 'Einstein', start: '1879-03-14', end: '1955-04-18', type: 'Person'}, - {name: 'Picasso', start: '1881-10-25', end: '1973-04-08', type: 'Person'}, - {name: 'Roosevelt', start: '1882-01-30', end: '1945-04-12', type: 'Person'}, - {name: 'Hitler', start: '1889-04-20', end: '1945-04-30', type: 'Person'}, - {name: 'Hitchcock', start: '1899-08-13', end: '1980-04-29', type: 'Person'}, - {name: 'Turing', start: '1912-06-23', end: '1954-06-07', type: 'Person'}, - {name: 'Kennedy', start: '1917-05-29', end: '1963-11-22', type: 'Person'}, - {name: 'Deleuze', start: '1925-01-18', end: '1995-11-04', type: 'Person'}, - {name: 'Warhol', start: '1928-08-06', end: '1987-02-22', type: 'Person'}, - {name: 'Debord', start: '1931-12-28', end: '1994-11-30', type: 'Person'}, - //*/ - /* - {name: 'Test', start: new Date('1970-01-01'), end: new Date('1970-01-02')}, - {name: 'Battle of Hastings', start: new Date('1066-10-14'), end: new Date('1066-10-15')}, - {name: 'Renaissance', start: new Date('1300'), end: new Date('1700')}, - {name: 'Spanish Inquisition', start: new Date('1480-09-27'), end: new Date('1820-03-10')}, - {name: 'Discovery of America', start: new Date('1492'), end: new Date('1493')}, - {name: 'East India Company', start: new Date('1600'), end: new Date('1874')}, - {name: 'Thirty Years\' War', start: new Date('1618'), end: new Date('1649')}, - {name: 'Declaration of Independence', start: new Date('1776-07-04'), end: new Date('1776-07-05')}, - {name: 'French Revolution', start: new Date('1789'), end: new Date('1800')}, - {name: 'Storming of the Bastille', start: new Date('1789-07-14'), end: new Date('1789-07-15')}, - {name: 'Napoleonic Era', start: new Date('1799-11-09'), end: new Date('1815-06-29')}, - {name: 'The Year Without a Summer', start: new Date('1816'), end: new Date('1817')}, - {name: 'Queen Victoria', start: new Date('1837-06-20'), end: new Date('1901-01-23')}, - {name: 'Crimean War', start: new Date('1853-10'), end: new Date('1856-03')}, - {name: 'American Civil War', start: new Date('1861-04-12'), end: new Date('1865-04-10')}, - {name: 'Franco-Prussian War', start: new Date('1870-07-19'), end: new Date('1871-05-11')}, - {name: 'Paris Commune', start: new Date('1871-03-18'), end: new Date('1871-05-29')}, - {name: 'Congo Free State', start: new Date('1885-07-11'), end: new Date('1908-11-16')}, - {name: '20th century', start: new Date('1900'), end: new Date('2000')}, - {name: 'Titanic', start: new Date('1912-04-15'), end: new Date('1912-04-16')}, - {name: 'World War One', start: new Date('1914-07-28'), end: new Date('1918-11-12')}, - {name: 'Battle of Verdun', start: new Date('1916-02-21'), end: new Date('1916-12-19')}, - {name: 'Russian Revolution', start: new Date('1917'), end: new Date('1918')}, - {name: 'October Revolution', start: new Date('1917-11-07'), end: new Date('1917-11-09')}, - {name: 'Spanish Flu', start: new Date('1918'), end: new Date('1919')}, - {name: 'Weimar Republic', start: new Date('1918-11-09'), end: new Date('1933-01-30')}, - {name: 'Treaty of Versailles', start: new Date('1919-06-28'), end: new Date('1919-06-29')}, - {name: '1920s', start: new Date('1920'), end: new Date('1930')}, - {name: 'Soviet Union', start: new Date('1922-12-30'), end: new Date('1991-12-27')}, - {name: 'The Third Reich', start: new Date('1933-01-30'), end: new Date('1945-05-09')}, - {name: 'Spanish Civil War', start: new Date('1936-07-17'), end: new Date('1939-04-02')}, - {name: '1936 Summer Olympics', start: new Date('1936-08-01'), end: new Date('1936-08-17')}, - {name: 'Hindenburg', start: new Date('1937-05-06'), end: new Date('1937-05-07')}, - {name: 'World War Two', start: new Date('1939-09-01'), end: new Date('1945-09-03')}, - {name: 'Pearl Harbour', start: new Date('1941-12-07'), end: new Date('1941-12-08')}, - {name: 'Wannsee Conference', start: new Date('1942-01-20'), end: new Date('1942-01-21')}, - {name: 'Battle of Stalingrad', start: new Date('1942-08-23'), end: new Date('1943-02-03')}, - {name: 'D-Day', start: new Date('1944-06-06'), end: new Date('1944-06-07')}, - {name: 'Liberation of Auschwitz', start: new Date('1945-01-27'), end: new Date('1945-01-28')}, - {name: 'Hiroshima', start: new Date('1945-08-06'), end: new Date('1945-08-07')}, - {name: 'Nagasaki', start: new Date('1945-08-09'), end: new Date('1945-08-10')}, - {name: 'Nuremburg Trials', start: new Date('1945-11-20'), end: new Date('1946-10-02')}, - {name: 'Fourth Republic', start: new Date('1946-10-14'), end: new Date('1958-10-05')}, - {name: 'West Germany', start: new Date('1949-05-23'), end: new Date('1990-10-03')}, - {name: 'Korean War', start: new Date('1950-06-25'), end: new Date('1953-07-28')}, - {name: 'Cuban Revolution', start: new Date('1953-07-26'), end: new Date('1959-01-02')}, - {name: 'Algerian War', start: new Date('1954-11-01'), end: new Date('1962-03-20')}, - {name: 'Vietnam War', start: new Date('1955-11-01'), end: new Date('1975-05-01')}, - {name: '1960s', start: new Date('1960-01-01'), end: new Date('1970-01-01')}, - {name: 'Eichmann Trial', start: new Date('1961-04-11'), end: new Date('1961-08-15')}, - {name: 'Bay of Pigs', start: new Date('1961-04-17'), end: new Date('1961-04-20')}, - {name: 'Berlin Wall', start: new Date('1961-08-13'), end: new Date('1989-11-09')}, - {name: 'Cuban Missile Crisis', start: new Date('1962-10'), end: new Date('1962-12')}, - {name: 'Assassination of John F. Kennedy', start: new Date('1963-11-22'), end: new Date('1963-11-23')}, - {name: 'Sgt. Pepper', start: new Date('1967-06-01'), end: new Date('1967-06-02')}, - {name: 'Assassination of Benno Ohnesorg', start: new Date('1967-06-02'), end: new Date('1967-06-03')}, - {name: 'Six-Day War', start: new Date('1967-06-05'), end: new Date('1967-06-11')}, - {name: '1968', start: new Date('1968-01-01'), end: new Date('1969-01-01')}, - {name: 'My Lai', start: new Date('1968-03-16'), end: new Date('1968-03-17')}, - {name: 'Assassination of Martin Luther King', start: new Date('1968-04-04'), end: new Date('1968-04-05')}, - {name: 'Assassination of Rudi Dutschke', start: new Date('1968-04-11'), end: new Date('1968-04-12')}, - {name: 'May 1968', start: new Date('1968-05-01'), end: new Date('1968-06-01')}, - {name: '1968 Cannes Film Festival', start: new Date('1968-05-10'), end: new Date('1968-05-20')}, - {name: 'Valerie Solanas', start: new Date('1968-06-03'), end: new Date('1968-06-04')}, - {name: 'Assassination of Robert F. Kennedy', start: new Date('1968-06-05'), end: new Date('1968-06-06')}, - {name: '1968 Summer Olympics', start: new Date('1968-10-12'), end: new Date('1968-10-28')}, - {name: 'Apollo 11', start: new Date('1969-07-16'), end: new Date('1969-07-25')}, - {name: 'Moon Landing', start: new Date('1969-07-20'), end: new Date('1969-07-21')}, - {name: 'The Epoch', start: new Date('1970-01-01 00:00:00'), end: new Date('1970-01-01 00:00:01')}, - {name: '1970s', start: new Date('1970-01-01'), end: new Date('1980-01-01')}, - {name: '1972 Summer Olympics', start: new Date('1972-08-26'), end: new Date('1972-09-11')}, - {name: 'Apollo 17', start: new Date('1972-12-07'), end: new Date('1972-12-20')}, - {name: 'World Trade Center', start: new Date('1973-04-04'), end: new Date('2001-09-11')}, - {name: '1980s', start: new Date('1980-01-01'), end: new Date('1990-01-01')}, - {name: 'Iran-Iraq War', start: new Date('1980-09-22'), end: new Date('1988-08-21')}, - {name: 'Tschernobyl', start: new Date('1986-04-26'), end: new Date('1986-04-27')}, - {name: 'Fall of the Berlin Wall', start: new Date('1989-11-09'), end: new Date('1989-11-10')}, - {name: 'Gulf War', start: new Date('1990-08-02'), end: new Date('1991-03-01')}, - {name: 'Clinton Presidency', start: new Date('1993-01-20'), end: new Date('2001-01-20')}, - {name: 'German Reunification', start: new Date('1990-10-03'), end: new Date('1990-10-04')}, - {name: 'The Battle of Seattle', start: new Date('1999-11-30'), end: new Date('1999-12-01')}, - {name: 'George W. Bush', start: new Date('2001-01-20'), end: new Date('2009-01-20')}, - {name: 'Carlo Giuliani', start: new Date('2001-07-20'), end: new Date('2001-07-21')}, - {name: '9-11', start: new Date('2001-09-11'), end: new Date('2001-09-12')}, - {name: 'Fukushima', start: new Date('2011-03-11'), end: new Date('2011-03-12')} - */ + {name: 'Charles Baudelaire', start: '1821-04-09', end: '1867-08-31', type: 'person'}, + {name: 'Paul Verlaine', start: '1844-03-30', end: '1896-01-08', type: 'person'}, + {name: 'Arthur Rimbaud', start: '1854-10-20', end: '1891-11-10', type: 'person'}, + {name: 'Sigmund Freud', start: '1856-05-06', end: '1939-09-23', type: 'person'}, + {name: 'Max Planck', start: '1858-04-23', end: '1947-10-04', type: 'person'}, + {name: 'Henri Bergson', start: '1859-10-18', end: '1941-01-04', type: 'person'}, + {name: 'Marie Curie', start: '1867-11-07', end: '1934-07-04', type: 'person'}, + {name: 'Mahatma Gandhi', start: '1869-10-02', end: '1948-01-30', type: 'person'}, + {name: 'Vladimir Lenin', start: '1870-04-22', end: '1924-01-21', type: 'person'}, + {name: 'Winston Churchill', start: '1874-11-30', end: '1965-01-24', type: 'person'}, + {name: 'Josef Stalin', start: '1878-12-18', end: '1953-03-05', type: 'person'}, + {name: 'Albert Einstein', start: '1879-03-14', end: '1955-04-18', type: 'person'}, + {name: 'Pablo Picasso', start: '1881-10-25', end: '1973-04-08', type: 'person'}, + {name: 'Theodor Roosevelt', start: '1882-01-30', end: '1945-04-12', type: 'person'}, + {name: 'James Joyce', start: '1882-02-02', end: '1941-01-13', type: 'person'}, + {name: 'Franz Kafka', start: '1883-07-03', end: '1924-06-03', type: 'person'}, + {name: 'Adolf Hitler', start: '1889-04-20', end: '1945-04-30', type: 'person'}, + {name: 'Charles de Gaulle', start: '1890-11-22', end: '1970-11-09', type: 'person'}, + {name: 'Walter Benjamin', start: '1892-07-15', end: '1940-09-26', type: 'person'}, + {name: 'Al Capione', start: '1899-01-17', end: '1947-01-25', type: 'person'}, + {name: 'Alfred Hitchcock', start: '1899-08-13', end: '1980-04-29', type: 'person'}, + {name: 'Werner Heisenberg', start: '1901-12-05', end: '1976-02-01', type: 'person'}, + {name: 'Theodor W. Adorno', start: '1903-09-11', end: '1969-08-06', type: 'person'}, + {name: 'Salvador Dalí', start: '1904-05-11', end: '1989-01-23', type: 'person'}, + {name: 'Samuel Beckett', start: '1906-04-13', end: '1989-12-22', type: 'person'}, + {name: 'Kurt Gödel', start: '1906-04-28', end: '1978-01-14', type: 'person'}, + {name: 'Grace Hopper', start: '1906-12-09', end: '1992-01-01', type: 'person'}, + {name: 'Alan Turing', start: '1912-06-23', end: '1954-06-07', type: 'person'}, + {name: 'John F. Kennedy', start: '1917-05-29', end: '1963-11-22', type: 'person'}, + {name: 'Gilles Deleuze', start: '1925-01-18', end: '1995-11-04', type: 'person'}, + {name: 'Marylin Monroe', start: '1926-06-01', end: '1962-08-05', type: 'person'}, + {name: 'Michel Foucault', start: '1926-10-15', end: '1984-06-25', type: 'person'}, + {name: 'Che Guevara', start: '1928-06-14', end: '1967-10-09', type: 'person'}, + {name: 'Andy Warhol', start: '1928-08-06', end: '1987-02-22', type: 'person'}, + {name: 'Félix Guattari', start: '1930-04-30', end: '1992-08-29', type: 'person'}, + {name: 'Guy Debord', start: '1931-12-28', end: '1994-11-30', type: 'person'}, + {name: 'John Lennon', start: '1940-10-09', end: '1980-12-08', type: 'person'}, + {name: 'Jimi Hendrix', start: '1942-11-27', end: '1970-09-18', type: 'person'}, + {name: 'Jim Morrison', start: '1943-12-08', end: '1971-06-03', 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: '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'}, + {name: 'Third Reich', start: '1933-01-30', end: '1945-05-08', type: 'place'}, + {name: 'West Germany', start: '1949-05-23', end: '1990-10-03', type: 'place'}, + {name: 'East Germany', start: '1949-10-07', end: '1990-10-03', type: 'place'}, + {name: 'Berlin Wall', start: '1961-08-13', end: '1989-11-09', type: 'place'}, + {name: 'World Trade Center', start: '1973-04-04', end: '2001-09-11', type: 'place'}, + + + {name: 'Battle of Hastings', start: '1066-10-14', end: '1066-10-15', type: 'other'}, + {name: 'Renaissance', start: '1300', end: '1700', 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: 'East India Company', start: '1600', end: '1874', type: 'other'}, + {name: 'Thirty Years\' War', start: '1618', end: '1648', 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: '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'}, + {name: 'American Civil War', start: '1861-04-12', end: '1865-04-09', type: 'other'}, + {name: 'Franco-Prussian War', start: '1870-07-19', end: '1871-05-10', type: 'other'}, + {name: 'Paris Commune', start: '1871-03-18', end: '1871-05-28', type: 'other'}, + {name: 'Titanic', start: '1912-04-15', end: '1912-04-16', type: 'other'}, + {name: 'World War One', start: '1914-07-28', end: '1918-11-11', type: 'other'}, + {name: 'Battle of Verdun', start: '1916-02-21', end: '1916-12-18', type: 'other'}, + {name: 'Russian Revolution', start: '1917', end: '1918', type: 'other'}, + {name: 'October Revolution', start: '1917-11-07', end: '1917-11-08', type: 'other'}, + {name: 'Spanish Flu', start: '1918', end: '1919', type: 'other'}, + {name: 'Treaty of Versailles', start: '1919-06-28', end: '1919-06-29', type: 'other'}, + {name: 'Spanish Civil War', start: '1936-07-17', end: '1939-04-01', type: 'other'}, + {name: '1936 Summer Olympics', start: '1936-08-01', end: '1936-08-16', type: 'other'}, + {name: 'Hindenburg', start: '1937-05-06', end: '1937-05-07', type: 'other'}, + {name: 'World War Two', start: '1939-09-01', end: '1945-09-02', type: 'other'}, + {name: 'Pearl Harbour', start: '1941-12-07', end: '1941-12-08', type: 'other'}, + {name: 'Wannsee Conference', start: '1942-01-20', end: '1942-01-21', type: 'other'}, + {name: 'Battle of Stalingrad', start: '1942-08-23', end: '1943-02-02', type: 'other'}, + {name: 'D-Day', start: '1944-06-06', end: '1944-06-07', type: 'other'}, + {name: 'Liberation of Auschwitz', start: '1945-01-27', end: '1945-01-28', type: 'other'}, + {name: 'Hiroshima', start: '1945-08-06', end: '1945-08-07', 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: 'Fourth Republic', start: '1946-10-14', end: '1958-10-04', 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'}, + {name: 'Vietnam War', start: '1955-11-01', end: '1975-04-30', type: 'other'}, + {name: 'Eichmann Trial', start: '1961-04-11', end: '1961-08-14', type: 'other'}, + {name: 'Bay of Pigs', start: '1961-04-17', end: '1961-04-19', type: 'other'}, + {name: 'Cuban Missile Crisis', start: '1962-10-14', end: '1962-11-20', type: 'other'}, + {name: 'Assassination of John F. Kennedy', start: '1963-11-22', end: '1963-11-23', type: 'other'}, + {name: 'Summer of Love', start: '1967-06', end: '1967-09', type: 'other'}, + {name: 'Sgt. Pepper', start: '1967-06-01', end: '1967-06-02', type: 'other'}, + {name: 'Assassination of Benno Ohnesorg', start: '1967-06-02', end: '1967-06-03', type: 'other'}, + {name: 'Six-Day War', start: '1967-06-05', end: '1967-06-11', type: 'other'}, + {name: 'My Lai', start: '1968-03-16', end: '1968-03-17', type: 'other'}, + {name: 'Assassination of Martin Luther King', start: '1968-04-04', end: '1968-04-05', type: 'other'}, + {name: 'Assassination of Rudi Dutschke', start: '1968-04-11', end: '1968-04-12', type: 'other'}, + {name: '1968 Cannes Film Festival', start: '1968-05-10', end: '1968-05-19', type: 'other'}, + {name: 'Valerie Solanas', start: '1968-06-03', end: '1968-06-04', type: 'other'}, + {name: 'Assassination of Robert F. Kennedy', start: '1968-06-05', end: '1968-06-06', type: 'other'}, + {name: '1968 Summer Olympics', start: '1968-10-12', end: '1968-10-27', type: 'other'}, + {name: 'Apollo 11', start: '1969-07-16', end: '1969-07-24', type: 'other'}, + {name: 'Moon Landing', start: '1969-07-20', end: '1969-07-21', type: 'other'}, + {name: 'The Epoch', start: '1970-01-01 00:00:00', end: '1970-01-01 00:00:01', type: 'other'}, + {name: '1972 Summer Olympics', start: '1972-08-26', end: '1972-09-10', type: 'other'}, + {name: 'Apollo 17', start: '1972-12-07', end: '1972-12-19', type: 'other'}, + {name: 'Iran-Iraq War', start: '1980-09-22', end: '1988-08-20', type: 'other'}, + {name: 'Tschernobyl', start: '1986-04-26', end: '1986-04-27', type: 'other'}, + {name: 'Fall of the Berlin Wall', start: '1989-11-09', end: '1989-11-10', type: 'other'}, + {name: 'Gulf War', start: '1990-08-02', end: '1991-02-28', type: 'other'}, + {name: 'German Reunification', start: '1990-10-03', end: '1990-10-04', type: 'other'}, + {name: 'Clinton Presidency', start: '1993-01-20', end: '2001-01-20', type: 'other'}, + {name: 'Battle of Seattle', start: '1999-11-30', end: '1999-12-01', type: 'other'}, + {name: 'George W. Bush Presidency', start: '2001-01-20', end: '2009-01-20', type: 'other'}, + {name: 'Carlo Giuliani', start: '2001-07-20', end: '2001-07-21', type: 'other'}, + {name: '9-11', start: '2001-09-11', end: '2001-09-12', type: 'other'}, + {name: 'Fukushima', start: '2011-03-11', end: '2011-03-12', type: 'other'} + ], height: window.innerHeight, - width: window.innerWidth + width: window.innerWidth, + zoom: 4 }).appendTo(Ox.UI.$body); }); \ 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 0bb07338..406a621f 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -117,6 +117,9 @@ Calendar right: 0; overflow: hidden; } +.OxCalendar > .OxCalendarContent { + //height: 100%; +} .OxCalendar .OxBackground { position: absolute; @@ -142,14 +145,26 @@ Calendar cursor: pointer; } .OxCalendar .OxLine > .OxEvent { - border-radius: 2px; - background: -moz-linear-gradient(top, rgba(255, 32, 32, 0.9), rgba(224, 0, 0, 0.9)); - background: -webkit-linear-gradient(top, rgba(255, 32, 32, 0.9), rgba(224, 0, 0, 0.9)); + border-radius: 4px; + background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9)); + background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9)); color: rgb(255, 255, 255); } +.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)); +} +.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)); +} .OxCalendar .OxLine > .OxEvent.OxSelected { - background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(112, 112, 224, 0.9)); - background: -webkit-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(112, 112, 224, 0.9)); + background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9)); + background: -webkit-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9)); } .OxCalendar .OxTimeline { diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index 4124090e..1f7ffe76 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -35,6 +35,7 @@ Ox.Calendar = function(options, self) { height: 256, range: [1000, 3000], selected: '', + showTypes: ['date', 'place', 'person', 'other'], width: 256, zoom: 8 }) @@ -43,6 +44,32 @@ Ox.Calendar = function(options, self) { .css({ width: self.options.width + 'px', height: self.options.height + 'px' + }) + .bindEvent({ + anyclick: function() { + that.gainFocus(); + }, + key_0: function() { + panToSelected(); + }, + key_equal: function() { + zoomBy(1); + }, + key_escape: function() { + selectEvent(''); + }, + key_left: function() { + panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000); + }, + key_minus: function() { + zoomBy(-1); + }, + key_right: function() { + panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000); + }, + key_shift_0: function() { + zoomToSelected(); + } }); self.options.events.forEach(function(event) { @@ -231,6 +258,35 @@ Ox.Calendar = function(options, self) { } ]; + self.$toolbar = Ox.Bar({ + size: 24 + }) + .appendTo(that); + + Ox.print(self.options.showTypes) + self.$typeSelect = Ox.Select({ + items: [ + {id: 'date', title: 'Dates', checked: self.options.showTypes.indexOf('date') > -1}, + {id: 'place', title: 'Places', checked: self.options.showTypes.indexOf('place') > -1}, + {id: 'person', title: 'People', checked: self.options.showTypes.indexOf('person') > -1}, + {id: 'other', title: 'Other', checked: self.options.showTypes.indexOf('other') > -1} + ], + max: -1, + min: 1, + title: 'Show...', + width: 80 + }) + .css({margin: '4px'}) + .bindEvent({ + change: function(data) { + self.options.showTypes = data.selected.map(function(type) { + return type.id; + }); + renderCalendar(); + } + }) + .appendTo(self.$toolbar); + self.$container = new Ox.Element() .addClass('OxCalendarContainer') .css({ @@ -456,28 +512,51 @@ Ox.Calendar = function(options, self) { } function formatEvent(event) { + return formatEventRange(event) + '
' + formatEventDuration(event); + } + + function formatEventDuration(event) { + // fixme: still wrong because of different number of leap days + var date = new Date(getEventDuration(event)), + strings = [], + values = { + years: date.getUTCFullYear() - 1970, + days: Ox.getDayOfTheYear(date, true) - 1, + hours: date.getUTCHours(), + minutes: date.getUTCMinutes(), + seconds: date.getUTCMilliseconds() + }; + //Ox.print('****', values); + ['year', 'day', 'hour', 'minute', 'second'].forEach(function(key) { + var value = values[key + 's']; + value && strings.push(value + ' ' + key + (value > 1 ? 's' : '')); + }); + return strings.join(' '); + } + + function formatEventRange(event) { var isFullDays = Ox.formatDate(event.start, '%H:%M:%S', true) == '00:00:00' && Ox.formatDate(event.end, '%H:%M:%S', true) == '00:00:00', - isOneDay = isFullDays && event.end - event.start == 86400000, // fixme: wrong, DST + isOneDay = isFullDays && getEventDuration(event) == 86400000, // fixme: wrong, DST isSameDay = Ox.formatDate(event.start, '%Y-%m-%d', true) == Ox.formatDate(event.end, '%Y-%m-%d', true), isSameYear = event.start.getUTCFullYear() == event.end.getUTCFullYear(), timeFormat = isFullDays ? '' : ', %H:%M:%S', - str = Ox.formatDate(event.start, '%a, %b %e', true); + string = Ox.formatDate(event.start, '%a, %b %e', true); if (isOneDay || isSameDay || !isSameYear) { - str += Ox.formatDate(event.start, ', %Y' + timeFormat, true); + string += Ox.formatDate(event.start, ', %Y' + timeFormat, true); } if (!isOneDay && !isSameDay) { - str += Ox.formatDate(event.end, ' - %a, %b %e, %Y' + timeFormat, true); + string += Ox.formatDate(event.end, ' - %a, %b %e, %Y' + timeFormat, true); } if (isSameDay) { - str += Ox.formatDate(event.end, ' - ' + timeFormat.replace(', ', ''), true); + string += Ox.formatDate(event.end, ' - ' + timeFormat.replace(', ', ''), true); } - return str; + return string; } - function getCalendarEvent() { - var ms = self.options.width * getSecondsPerPixel() * 1000; + function getCalendarEvent(zoom) { + var ms = self.options.width * getSecondsPerPixel(zoom || self.options.zoom) * 1000; return { start: new Date(+self.options.date - ms / 2), end: new Date(+self.options.date + ms / 2) @@ -495,13 +574,23 @@ Ox.Calendar = function(options, self) { return event; } + function getEventCenter(event) { + return new Date(+event.start + getEventDuration(event) / 2); + } + + function getEventDuration(event) { + return event.end - event.start; + } + function getEventElement(event, zoom) { var left = getPosition(event.start, zoom), width = Math.max(getPosition(event.end, zoom) - left, 1); + Ox.print(event) return new Ox.Element() - .addClass('OxEvent' + ( - event.id == self.options.selected ? ' OxSelected' : '' - )) + .addClass('OxEvent' + + (event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) + + (event.id == self.options.selected ? ' OxSelected' : '') + ) .css({ left: left + 'px', width: width + 'px' @@ -513,7 +602,15 @@ Ox.Calendar = function(options, self) { } function getEventElementById(id) { - + var $element; + $('.OxLine > .OxEvent').each(function() { + var $this = $(this); + if ($this.data('id') == id) { + $element = $this; + return false; + } + }); + return $element; }; function getMouseDate(e) { @@ -538,6 +635,14 @@ Ox.Calendar = function(options, self) { return 1 / getPixelsPerSecond(zoom); } + function getSelectedEvent() { + var event = null; + if (self.options.selected !== '') { + event = getEventById(self.options.selected); + } + return event; + } + function getBackgroundElements(zoom) { // fixme: duplicated var $elements = [], @@ -634,9 +739,7 @@ Ox.Calendar = function(options, self) { self.options.date = deltaZ == -1 ? new Date(2 * +self.options.date - +getMouseDate(e)) : new Date((+self.options.date + +getMouseDate(e)) / 2) - self.options.zoom += deltaZ; - self.$zoomInput.options({value: self.options.zoom}); - renderCalendar(); + zoomBy(deltaZ); } } self.mousewheel = true; @@ -653,6 +756,38 @@ Ox.Calendar = function(options, self) { ); } + function panBy(ms) { + Ox.print('panBY', ms) + panTo(new Date(+self.options.date + ms)); + } + + function panTo(date) { + var delta = (date - self.options.date) / 1000 * getPixelsPerSecond(), + ms = 250 * Math.max(Math.abs(delta) / (self.$content.width() / 2), 1); + self.$content.animate({ + marginLeft: -delta + 'px' + }, ms, function() { + self.options.date = date; + renderCalendar(); + self.$content.css({ + marginLeft: 0 + }); + }); + + }; + + function panToSelected() { + if (self.options.selected !== '') { + panTo(getEventCenter(getSelectedEvent())); + } + } + + function renderBackground() { + getBackgroundElements(self.options.zoom).forEach(function($element) { + $element.appendTo(self.$background); + }); + } + function renderCalendar() { $('.OxBackground').empty(); $('.OxEvent').remove(); @@ -664,21 +799,24 @@ Ox.Calendar = function(options, self) { ); } - function renderBackground() { - getBackgroundElements(self.options.zoom).forEach(function($element) { - $element.appendTo(self.$background); - }); - } - function renderEvents() { var calendarEvent = getCalendarEvent(); - lineEvents = []; + lineEvents = [], + types = ['date']; //['date', 'place', 'person', 'other']; self.options.events.filter(function(event) { - // filter out events outside the visible area - return overlaps(event, calendarEvent); + // filter out events with types not shown + // and events outside the visible area + return self.options.showTypes.indexOf(event.type) > -1 + && overlaps(event, calendarEvent); }).sort(function(a, b) { - // sort events by duration, descending - return (b.end - b.start) - (a.end - a.start); + // sort events + if (a.type != b.type) { + return types.indexOf(b.type) - types.indexOf(a.type); + } else if (a.start < b.start || a.start > b.start) { + return a.start - b.start; + } else { + return (b.end - b.start) - (a.end - a.start); + } }).forEach(function(event, i) { var line = lineEvents.length; // traverse lines @@ -729,23 +867,64 @@ Ox.Calendar = function(options, self) { }); } - function selectEvent(id) { + function selectEvent(id, $element) { + self.$content.find('.OxSelected').removeClass('OxSelected'); + if (id) { + self.options.selected = id; + ($element || getEventElementById(id)).addClass('OxSelected'); + // fixme: map event should also be 'select', not 'selectplace' + that.triggerEvent('select', {id: id}); + } else { + if (self.options.selected !== '') { + self.options.selected = ''; + that.triggerEvent('select', {id: ''}); + } + } } function singleclick(event, e) { var $target = $(e.target), id = $target.data('id'); if ($target.is('.OxLine > .OxEvent')) { - self.options.selected = id; - self.$content.find('.OxSelected').removeClass('OxSelected'); - $target.addClass('OxSelected'); - // fixme: map event should also be 'select', not 'selectplace' - that.triggerEvent('select', { - id: id - }); + selectEvent(id, $target); } else { - self.options.date = getMouseDate(e); - renderCalendar(); + selectEvent(''); + panTo(getMouseDate(e)); + } + } + + function zoomBy(delta) { + zoomTo(self.options.zoom + delta); + } + + function zoomTo(zoom) { + self.options.zoom = zoom; + self.$zoomInput.options({value: zoom}); + renderCalendar(); + } + + function zoomToSelected() { + if (self.options.selected !== '') { + var event = getSelectedEvent(), + eventDuration = getEventDuration(event), + zoom = getZoom(); + if (zoom == self.options.zoom) { + panToSelected(); + } else { + self.options.date = getEventCenter(event); + zoomTo(zoom); + } + } + function getZoom() { + var zoom; + Ox.loop(32, 0, function(z) { + var calendarDuration = getEventDuration(getCalendarEvent(z)); + if (calendarDuration > eventDuration) { + zoom = z; + return false; + } + }); + return zoom; } }