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

more calendar improvements (keyboard navigation etc.)

Browse source
This commit is contained in:
rolux 2011-05-25 18:36:55 +02:00
parent b18500d133
commit c661f3a883
4 changed files with 418 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demos/calendar/index.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>ox.js calendar demo</title>
<title>OxJS Calendar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>

305
demos/calendar/js/calendar.js
View file

@ -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);
});

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

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

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

@ -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) + '<br/>' + 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;
}
}