blob: 4b33793a5526bcc1f427143b4a422dc1cb1af157 (
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
89
90
91
92
|
$(document).ready(function(){
$("#periodString").hide();
$("#otherPeriods").hide();
$("#datepicker").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(){
$("#datepicker").toggle();
if($("#datepicker").is(":visible"))
{
$("#datepicker .ui-state-highlight").removeClass('ui-state-highlight');
}
});
} );
|