blob: 7ca90166a604420975ac45cc6af6837b0c002def (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
$(document).ready(function(){
$("#periodString").hide();
$("#otherPeriods").hide();
$("#calendar").hide();
$("#periodString").show();
// we get the content of the div before modifying it (append image, etc.)
// so we can restore its value when we want
var savedCurrentPeriod = $("#periodString #currentPeriod").html();
// timeout used to fadeout the menu
var timeout = null;
var timeoutLength;
// restore the normal style of the current period type eg "DAY"
function restoreCurrentPeriod()
{
$("#currentPeriod")
.removeClass("hoverPeriod")
.html(savedCurrentPeriod);
}
// remove the sub menu created that contains the other periods availble
// eg. week | month | year
function removePeriodMenu() {
$("#otherPeriods").fadeOut('fast');
setCurrentPeriodStyle = true;
}
// state machine a bit complex and was hard to come up with
// there should be a simpler way to do it with jquery...
// if set to true, means that we want to style our current period
// for example add bold and append the image
var setCurrentPeriodStyle = true;
$("#periodString #periods")
.hover(function(){
$(this).css({ cursor: "pointer"});
// cancel the timeout
// indeed if the user goes away of the div and goes back on
// we don't hide the submenu!
if(timeout != null)
{
clearTimeout(timeout);
timeout = null;
timeoutLength = 500;
}
else
{
timeoutLength = 0;
setCurrentPeriodStyle = true;
}
if( setCurrentPeriodStyle == true)
{
$("#currentPeriod:not(.hoverPeriod)")
.addClass("hoverPeriod")
.append(' <img src="plugins/CoreHome/templates/images/more_period.gif" style="vertical-align:middle">');
}
}, function(){
restoreCurrentPeriod();
// we callback the function to hide the sub menu
// only if it was visible (otherwise it messes the state machine)
if($("#otherPeriods").is(":visible"))
{
timeout = setTimeout( removePeriodMenu , timeoutLength);
}
setCurrentPeriodStyle = false;
})
.click( function() {
// we restore the initial style on the DAY link
restoreCurrentPeriod();
// the menu shall fadeout after 500ms
timeoutLength = 500;
// appearance!
$("#otherPeriods").fadeIn();
});
$("#periodString #date")
.hover( function(){
$(this).css({ cursor: "pointer"});
}, function(){
})
.click(function(){
$("#calendar").toggle();
});
} );
|
