script/calendar.js: simplify & use CSS3 transition
This commit is contained in:
parent
466cbf24f3
commit
78022e6872
|
@ -1,87 +1,22 @@
|
||||||
/**
|
function hilight_today() {
|
||||||
*
|
var now = new Date();
|
||||||
* $Id$
|
var today_id = "calendar-" +
|
||||||
*
|
now.getFullYear() + "-" +
|
||||||
* This script waits for the document to be loaded,
|
(now.getMonth() + 1) + "-" +
|
||||||
* then seeks the right table cell for today's date
|
now.getDate();
|
||||||
* and changes it's background color.
|
|
||||||
*
|
|
||||||
* Fading is just an additional effect.
|
|
||||||
*
|
|
||||||
**/
|
|
||||||
|
|
||||||
set_hilight_timer();
|
var today = document.getElementById(today_id);
|
||||||
|
|
||||||
function set_hilight_timer()
|
|
||||||
{
|
|
||||||
window.setTimeout(hilight_today, 50);
|
|
||||||
}
|
|
||||||
|
|
||||||
function hilight_today()
|
|
||||||
{
|
|
||||||
/* Has document fetching completed enough? */
|
/* Has document fetching completed enough? */
|
||||||
if (document.getElementsByClassName("calendar"))
|
if (today) {
|
||||||
{
|
|
||||||
var now = new Date();
|
|
||||||
var today_id = "calendar-" +
|
|
||||||
now.getFullYear() + "-" +
|
|
||||||
(now.getMonth() + 1) + "-" +
|
|
||||||
now.getDate();
|
|
||||||
|
|
||||||
var today = document.getElementById(today_id);
|
|
||||||
|
|
||||||
var td = today.parentNode;
|
var td = today.parentNode;
|
||||||
if (td)
|
var klass = td.getAttribute('class');
|
||||||
{
|
klass = (klass || "") + " today";
|
||||||
td.style.backgroundColor = "#ebc63c";
|
td.setAttribute('class', klass);
|
||||||
td.style.backgroundColor = "black";
|
} else {
|
||||||
fade_td(td, 0, 100);
|
/* No calendar, retry later: */
|
||||||
}
|
window.setTimeout(hilight_today, 100);
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
/* No calendar, continue waiting */
|
|
||||||
window.setTimeout(hilight_today, 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fade_td(td, step, interval)
|
|
||||||
{
|
|
||||||
var colors = new Array(
|
|
||||||
"#edece5",
|
|
||||||
"#edece7",
|
|
||||||
"#edebe1",
|
|
||||||
"#ede9db",
|
|
||||||
"#ede8d5",
|
|
||||||
"#ede7cf",
|
|
||||||
"#ede5c9",
|
|
||||||
"#ede4c3",
|
|
||||||
"#ede2bc",
|
|
||||||
"#ede1b6",
|
|
||||||
"#ece0b0",
|
|
||||||
"#ecdeaa",
|
|
||||||
"#ecdda4",
|
|
||||||
"#ecdc9e",
|
|
||||||
"#ecda98",
|
|
||||||
"#ecd991",
|
|
||||||
"#ecd78b",
|
|
||||||
"#ecd685",
|
|
||||||
"#ecd57f",
|
|
||||||
"#ecd379",
|
|
||||||
"#ebd273",
|
|
||||||
"#ebd16d");
|
|
||||||
|
|
||||||
td.style.backgroundColor = colors[step];
|
|
||||||
var next_step = step + 1;
|
|
||||||
if (next_step < colors.length)
|
|
||||||
{
|
|
||||||
/* These three lines feature two techniques:
|
|
||||||
* * lambda
|
|
||||||
* * tail-recursive
|
|
||||||
*/
|
|
||||||
window.setTimeout(function() {
|
|
||||||
fade_td(td, next_step, interval);
|
|
||||||
},(next_step == 1) ? interval * 10 : interval); /* Delay the first step */
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.setTimeout(hilight_today, 1);
|
||||||
|
|
|
@ -515,6 +515,15 @@ table.calendar tr td:hover ul li {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.calendar .today {
|
||||||
|
background-color: #ebd16d;
|
||||||
|
-webkit-transition: background-color 2s linear;
|
||||||
|
-moz-transition: background-color 2s linear;
|
||||||
|
-o-transition: background-color 2s linear;
|
||||||
|
-ms-transition: background-color 2s linear;
|
||||||
|
transition: background-color 2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
/* -- MIME Icons -- */
|
/* -- MIME Icons -- */
|
||||||
/* Icons from the Tango Project, http://art.gnome.org/themes/icon/1150 */
|
/* Icons from the Tango Project, http://art.gnome.org/themes/icon/1150 */
|
||||||
/* CSS Idea by Tigion, http://blog.tigion.de/2007/06/28/link-indication-der-kompromiss-des-linkbildes/ */
|
/* CSS Idea by Tigion, http://blog.tigion.de/2007/06/28/link-indication-der-kompromiss-des-linkbildes/ */
|
||||||
|
|
Loading…
Reference in New Issue
Block a user