Subversion Repositories Applications.papyrus

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1318 alexandre_ 1 
/*
2 
	Copyright (c) 2004-2006, The Dojo Foundation
3 
	All Rights Reserved.
4 
 
5 
	Licensed under the Academic Free License version 2.1 or above OR the
6 
	modified BSD license. For more information on Dojo licensing, see:
7 
 
8 
		http://dojotoolkit.org/community/licensing.shtml
9 
*/
10 
 
11 
dojo.provide("dojo.widget.TimePicker");
12 
dojo.require("dojo.widget.*");
13 
dojo.require("dojo.widget.HtmlWidget");
14 
dojo.require("dojo.event.*");
15 
dojo.require("dojo.date.serialize");
16 
dojo.require("dojo.date.format");
17 
dojo.require("dojo.dom");
18 
dojo.require("dojo.html.style");
19 
dojo.requireLocalization("dojo.i18n.calendar", "gregorian", null, "de,en,es,fi,fr,hu,ja,it,ko,nl,pt,sv,zh,pt-br,zh-cn,zh-hk,zh-tw,ROOT");
20 
dojo.requireLocalization("dojo.widget", "TimePicker", null, "ROOT");
21 
dojo.widget.defineWidget("dojo.widget.TimePicker", dojo.widget.HtmlWidget, function () {
22 
	this.time = "";
23 
	this.useDefaultTime = false;
24 
	this.useDefaultMinutes = false;
25 
	this.storedTime = "";
26 
	this.currentTime = {};
27 
	this.classNames = {selectedTime:"selectedItem"};
28 
	this.any = "any";
29 
	this.selectedTime = {hour:"", minute:"", amPm:"", anyTime:false};
30 
	this.hourIndexMap = ["", 2, 4, 6, 8, 10, 1, 3, 5, 7, 9, 11, 0];
31 
	this.minuteIndexMap = [0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9, 11];
32 
}, {isContainer:false, templateString:"<div class=\"timePickerContainer\" dojoAttachPoint=\"timePickerContainerNode\">\n\t<table class=\"timeContainer\" cellspacing=\"0\" >\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<td class=\"timeCorner cornerTopLeft\" valign=\"top\">&nbsp;</td>\n\t\t\t\t<td class=\"timeLabelContainer hourSelector\">${this.calendar.field-hour}</td>\n\t\t\t\t<td class=\"timeLabelContainer minutesHeading\">${this.calendar.field-minute}</td>\n\t\t\t\t<td class=\"timeCorner cornerTopRight\" valign=\"top\">&nbsp;</td>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td valign=\"top\" colspan=\"2\" class=\"hours\">\n\t\t\t\t\t<table align=\"center\">\n\t\t\t\t\t\t<tbody dojoAttachPoint=\"hourContainerNode\"  \n\t\t\t\t\t\t\tdojoAttachEvent=\"onClick: onSetSelectedHour;\">\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>12</td>\n\t\t\t\t\t\t\t\t<td>6</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>1</td>\n\t\t\t\t\t\t\t\t<td>7</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>2</td>\n\t\t\t\t\t\t\t\t<td>8</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>3</td>\n\t\t\t\t\t\t\t\t<td>9</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>4</td>\n\t\t\t\t\t\t\t\t<td>10</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>5</td>\n\t\t\t\t\t\t\t\t<td>11</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t</tbody>\n\t\t\t\t\t</table>\n\t\t\t\t</td>\n\t\t\t\t<td valign=\"top\" class=\"minutes\" colspan=\"2\">\n\t\t\t\t\t<table align=\"center\">\n\t\t\t\t\t\t<tbody dojoAttachPoint=\"minuteContainerNode\" \n\t\t\t\t\t\t\tdojoAttachEvent=\"onClick: onSetSelectedMinute;\">\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>00</td>\n\t\t\t\t\t\t\t\t<td>30</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>05</td>\n\t\t\t\t\t\t\t\t<td>35</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>10</td>\n\t\t\t\t\t\t\t\t<td>40</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>15</td>\n\t\t\t\t\t\t\t\t<td>45</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>20</td>\n\t\t\t\t\t\t\t\t<td>50</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td>25</td>\n\t\t\t\t\t\t\t\t<td>55</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t</tbody>\n\t\t\t\t\t</table>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr>\n\t\t\t\t<td class=\"cornerBottomLeft\">&nbsp;</td>\n\t\t\t\t<td valign=\"top\" class=\"timeOptions\">\n\t\t\t\t\t<table class=\"amPmContainer\">\n\t\t\t\t\t\t<tbody dojoAttachPoint=\"amPmContainerNode\" \n\t\t\t\t\t\t\tdojoAttachEvent=\"onClick: onSetSelectedAmPm;\">\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td id=\"am\">${this.calendar.am}</td>\n\t\t\t\t\t\t\t\t<td id=\"pm\">${this.calendar.pm}</td>\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t</tbody>\n\t\t\t\t\t</table>\n\t\t\t\t</td>\n\t\t\t\t<td class=\"timeOptions\">\n\t\t\t\t\t<div dojoAttachPoint=\"anyTimeContainerNode\" \n\t\t\t\t\t\tdojoAttachEvent=\"onClick: onSetSelectedAnyTime;\" \n\t\t\t\t\t\tclass=\"anyTimeContainer\">${this.widgetStrings.any}</div>\n\t\t\t\t</td>\n\t\t\t\t<td class=\"cornerBottomRight\">&nbsp;</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n", templateCssString:"/*Time Picker */\n.timePickerContainer {\n\twidth:122px;\n\tfont-family:Tahoma, Myriad, Helvetica, Arial, Verdana, sans-serif;\n\tfont-size:16px;\n}\n\n.timeContainer {\n\tborder-collapse:collapse;\n\tborder-spacing:0;\n}\n\n.timeContainer thead {\n\tcolor:#293a4b;\n\tfont-size:0.9em;\n\tfont-weight:700;\n}\n\n.timeContainer thead td {\n\tpadding:0.25em;\n\tfont-size:0.80em;\n\tborder-bottom:1px solid #6782A8;\n}\n\n.timeCorner {\n\twidth:10px;\n}\n\n.cornerTopLeft {\n\tbackground: url(\"images/dpCurveTL.png\") top left no-repeat;\n}\n\n.cornerTopRight {\n\tbackground: url(\"images/dpCurveTR.png\") top right no-repeat;\n}\n\n.timeLabelContainer {\n\tbackground: url(\"images/dpMonthBg.png\") top left repeat-x;\n}\n\n.hours, .minutes, .timeBorder {\n\tbackground: #7591bc url(\"images/dpBg.gif\") top left repeat-x;\n\n}\n\n.hours td, .minutes td {\n\tpadding:0.2em;\n\ttext-align:center;\n\tfont-size:0.7em;\n\tfont-weight:bold;\n\tcursor:pointer;\n\tcursor:hand;\n\tcolor:#fff;\n}\n\n.minutes {\n\tborder-left:1px solid #f5d1db;\n}\n\n.hours {\n\tborder-right:1px solid #6782A8;\n}\n\n.hourSelector {\n\tborder-right:1px solid #6782A8;\n\tpadding:5px;\n\tpadding-right:10px;\n}\n\n.minutesSelector {\n\tpadding:5px;\n\tborder-left:1px solid #f5c7d4;\n\ttext-align:center;\n}\n\n.minutesHeading {\n\tpadding-left:9px !important;\n}\n\n.timeOptions {\n\tbackground-color:#F9C9D7;\n}\n\n.timeContainer .cornerBottomLeft, .timeContainer .cornerBottomRight, .timeContainer .timeOptions {\n\tborder-top:1px solid #6782A8;\n}\n\n.timeContainer .cornerBottomLeft {\n\tbackground: url(\"images/dpCurveBL.png\") bottom left no-repeat !important;\n\twidth:9px !important;\n\tpadding:0;\n\tmargin:0;\n}\n\n.timeContainer .cornerBottomRight {\n\tbackground: url(\"images/dpCurveBR.png\") bottom right no-repeat !important;\n\twidth:9px !important;\n\tpadding:0;\n\tmargin:0;\n}\n\n.timeOptions {\n\tcolor:#fff;\n\tbackground:url(\"images/dpYearBg.png\") top left repeat-x;\n\n}\n\n.selectedItem {\n\tbackground-color:#fff;\n\tcolor:#6782a8 !important;\n}\n\n.timeOptions .selectedItem {\n\tcolor:#fff !important;\n\tbackground-color:#9ec3fb !important;\n}\n\n.anyTimeContainer {\n\ttext-align:center;\n\tfont-weight:bold;\n\tfont-size:0.7em;\n\tpadding:0.1em;\n\tcursor:pointer;\n\tcursor:hand;\n\tcolor:#fff !important;\n}\n\n.amPmContainer {\n\twidth:100%;\n}\n\n.amPmContainer td {\n\ttext-align:center;\n\tfont-size:0.7em;\n\tfont-weight:bold;\n\tcursor:pointer;\n\tcursor:hand;\n\tcolor:#fff;\n}\n\n\n\n/*.timePickerContainer {\n\tmargin:1.75em 0 0.5em 0;\n\twidth:10em;\n\tfloat:left;\n}\n\n.timeContainer {\n\tborder-collapse:collapse;\n\tborder-spacing:0;\n}\n\n.timeContainer thead td{\n\tborder-bottom:1px solid #e6e6e6;\n\tpadding:0 0.4em 0.2em 0.4em;\n}\n\n.timeContainer td {\n\tfont-size:0.9em;\n\tpadding:0 0.25em 0 0.25em;\n\ttext-align:left;\n\tcursor:pointer;cursor:hand;\n}\n\n.timeContainer td.minutesHeading {\n\tborder-left:1px solid #e6e6e6;\n\tborder-right:1px solid #e6e6e6;\t\n}\n\n.timeContainer .minutes {\n\tborder-left:1px solid #e6e6e6;\n\tborder-right:1px solid #e6e6e6;\n}\n\n.selectedItem {\n\tbackground-color:#3a3a3a;\n\tcolor:#ffffff;\n}*/\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/TimePicker.css"), postMixInProperties:function (localProperties, frag) {
33 
	dojo.widget.TimePicker.superclass.postMixInProperties.apply(this, arguments);
34 
	this.calendar = dojo.i18n.getLocalization("dojo.i18n.calendar", "gregorian", this.lang);
35 
	this.widgetStrings = dojo.i18n.getLocalization("dojo.widget", "TimePicker", this.lang);
36 
}, fillInTemplate:function (args, frag) {
37 
	var source = this.getFragNodeRef(frag);
38 
	dojo.html.copyStyle(this.domNode, source);
39 
	if (args.value) {
40 
		if (args.value instanceof Date) {
41 
			this.storedTime = dojo.date.toRfc3339(args.value);
42 
		} else {
43 
			this.storedTime = args.value;
44 
		}
45 
	}
46 
	this.initData();
47 
	this.initUI();
48 
}, initData:function () {
49 
	if (this.storedTime.indexOf("T") != -1 && this.storedTime.split("T")[1] && this.storedTime != " " && this.storedTime.split("T")[1] != "any") {
50 
		this.time = dojo.widget.TimePicker.util.fromRfcDateTime(this.storedTime, this.useDefaultMinutes, this.selectedTime.anyTime);
51 
	} else {
52 
		if (this.useDefaultTime) {
53 
			this.time = dojo.widget.TimePicker.util.fromRfcDateTime("", this.useDefaultMinutes, this.selectedTime.anyTime);
54 
		} else {
55 
			this.selectedTime.anyTime = true;
56 
			this.time = dojo.widget.TimePicker.util.fromRfcDateTime("", 0, 1);
57 
		}
58 
	}
59 
}, initUI:function () {
60 
	if (!this.selectedTime.anyTime && this.time) {
61 
		var amPmHour = dojo.widget.TimePicker.util.toAmPmHour(this.time.getHours());
62 
		var hour = amPmHour[0];
63 
		var isAm = amPmHour[1];
64 
		var minute = this.time.getMinutes();
65 
		var minuteIndex = parseInt(minute / 5);
66 
		this.onSetSelectedHour(this.hourIndexMap[hour]);
67 
		this.onSetSelectedMinute(this.minuteIndexMap[minuteIndex]);
68 
		this.onSetSelectedAmPm(isAm);
69 
	} else {
70 
		this.onSetSelectedAnyTime();
71 
	}
72 
}, setTime:function (date) {
73 
	if (date) {
74 
		this.selectedTime.anyTime = false;
75 
		this.setDateTime(dojo.date.toRfc3339(date));
76 
	} else {
77 
		this.selectedTime.anyTime = true;
78 
	}
79 
	this.initData();
80 
	this.initUI();
81 
}, setDateTime:function (rfcDate) {
82 
	this.storedTime = rfcDate;
83 
}, onClearSelectedHour:function (evt) {
84 
	this.clearSelectedHour();
85 
}, onClearSelectedMinute:function (evt) {
86 
	this.clearSelectedMinute();
87 
}, onClearSelectedAmPm:function (evt) {
88 
	this.clearSelectedAmPm();
89 
}, onClearSelectedAnyTime:function (evt) {
90 
	this.clearSelectedAnyTime();
91 
	if (this.selectedTime.anyTime) {
92 
		this.selectedTime.anyTime = false;
93 
		this.time = dojo.widget.TimePicker.util.fromRfcDateTime("", this.useDefaultMinutes);
94 
		this.initUI();
95 
	}
96 
}, clearSelectedHour:function () {
97 
	var hourNodes = this.hourContainerNode.getElementsByTagName("td");
98 
	for (var i = 0; i < hourNodes.length; i++) {
99 
		dojo.html.setClass(hourNodes.item(i), "");
100 
	}
101 
}, clearSelectedMinute:function () {
102 
	var minuteNodes = this.minuteContainerNode.getElementsByTagName("td");
103 
	for (var i = 0; i < minuteNodes.length; i++) {
104 
		dojo.html.setClass(minuteNodes.item(i), "");
105 
	}
106 
}, clearSelectedAmPm:function () {
107 
	var amPmNodes = this.amPmContainerNode.getElementsByTagName("td");
108 
	for (var i = 0; i < amPmNodes.length; i++) {
109 
		dojo.html.setClass(amPmNodes.item(i), "");
110 
	}
111 
}, clearSelectedAnyTime:function () {
112 
	dojo.html.setClass(this.anyTimeContainerNode, "anyTimeContainer");
113 
}, onSetSelectedHour:function (evt) {
114 
	this.onClearSelectedAnyTime();
115 
	this.onClearSelectedHour();
116 
	this.setSelectedHour(evt);
117 
	this.onSetTime();
118 
}, setSelectedHour:function (evt) {
119 
	if (evt && evt.target) {
120 
		if (evt.target.nodeType == dojo.dom.ELEMENT_NODE) {
121 
			var eventTarget = evt.target;
122 
		} else {
123 
			var eventTarget = evt.target.parentNode;
124 
		}
125 
		dojo.event.browser.stopEvent(evt);
126 
		dojo.html.setClass(eventTarget, this.classNames.selectedTime);
127 
		this.selectedTime["hour"] = eventTarget.innerHTML;
128 
	} else {
129 
		if (!isNaN(evt)) {
130 
			var hourNodes = this.hourContainerNode.getElementsByTagName("td");
131 
			if (hourNodes.item(evt)) {
132 
				dojo.html.setClass(hourNodes.item(evt), this.classNames.selectedTime);
133 
				this.selectedTime["hour"] = hourNodes.item(evt).innerHTML;
134 
			}
135 
		}
136 
	}
137 
	this.selectedTime.anyTime = false;
138 
}, onSetSelectedMinute:function (evt) {
139 
	this.onClearSelectedAnyTime();
140 
	this.onClearSelectedMinute();
141 
	this.setSelectedMinute(evt);
142 
	this.selectedTime.anyTime = false;
143 
	this.onSetTime();
144 
}, setSelectedMinute:function (evt) {
145 
	if (evt && evt.target) {
146 
		if (evt.target.nodeType == dojo.dom.ELEMENT_NODE) {
147 
			var eventTarget = evt.target;
148 
		} else {
149 
			var eventTarget = evt.target.parentNode;
150 
		}
151 
		dojo.event.browser.stopEvent(evt);
152 
		dojo.html.setClass(eventTarget, this.classNames.selectedTime);
153 
		this.selectedTime["minute"] = eventTarget.innerHTML;
154 
	} else {
155 
		if (!isNaN(evt)) {
156 
			var minuteNodes = this.minuteContainerNode.getElementsByTagName("td");
157 
			if (minuteNodes.item(evt)) {
158 
				dojo.html.setClass(minuteNodes.item(evt), this.classNames.selectedTime);
159 
				this.selectedTime["minute"] = minuteNodes.item(evt).innerHTML;
160 
			}
161 
		}
162 
	}
163 
}, onSetSelectedAmPm:function (evt) {
164 
	this.onClearSelectedAnyTime();
165 
	this.onClearSelectedAmPm();
166 
	this.setSelectedAmPm(evt);
167 
	this.selectedTime.anyTime = false;
168 
	this.onSetTime();
169 
}, setSelectedAmPm:function (evt) {
170 
	var eventTarget = evt.target;
171 
	if (evt && eventTarget) {
172 
		if (eventTarget.nodeType != dojo.dom.ELEMENT_NODE) {
173 
			eventTarget = eventTarget.parentNode;
174 
		}
175 
		dojo.event.browser.stopEvent(evt);
176 
		this.selectedTime.amPm = eventTarget.id;
177 
		dojo.html.setClass(eventTarget, this.classNames.selectedTime);
178 
	} else {
179 
		evt = evt ? 0 : 1;
180 
		var amPmNodes = this.amPmContainerNode.getElementsByTagName("td");
181 
		if (amPmNodes.item(evt)) {
182 
			this.selectedTime.amPm = amPmNodes.item(evt).id;
183 
			dojo.html.setClass(amPmNodes.item(evt), this.classNames.selectedTime);
184 
		}
185 
	}
186 
}, onSetSelectedAnyTime:function (evt) {
187 
	this.onClearSelectedHour();
188 
	this.onClearSelectedMinute();
189 
	this.onClearSelectedAmPm();
190 
	this.setSelectedAnyTime();
191 
	this.onSetTime();
192 
}, setSelectedAnyTime:function (evt) {
193 
	this.selectedTime.anyTime = true;
194 
	dojo.html.setClass(this.anyTimeContainerNode, this.classNames.selectedTime + " " + "anyTimeContainer");
195 
}, onClick:function (evt) {
196 
	dojo.event.browser.stopEvent(evt);
197 
}, onSetTime:function () {
198 
	if (this.selectedTime.anyTime) {
199 
		this.time = new Date();
200 
		var tempDateTime = dojo.widget.TimePicker.util.toRfcDateTime(this.time);
201 
		this.setDateTime(tempDateTime.split("T")[0]);
202 
	} else {
203 
		var hour = 12;
204 
		var minute = 0;
205 
		var isAm = false;
206 
		if (this.selectedTime["hour"]) {
207 
			hour = parseInt(this.selectedTime["hour"], 10);
208 
		}
209 
		if (this.selectedTime["minute"]) {
210 
			minute = parseInt(this.selectedTime["minute"], 10);
211 
		}
212 
		if (this.selectedTime["amPm"]) {
213 
			isAm = (this.selectedTime["amPm"].toLowerCase() == "am");
214 
		}
215 
		this.time = new Date();
216 
		this.time.setHours(dojo.widget.TimePicker.util.fromAmPmHour(hour, isAm));
217 
		this.time.setMinutes(minute);
218 
		this.setDateTime(dojo.widget.TimePicker.util.toRfcDateTime(this.time));
219 
	}
220 
	this.onValueChanged(this.time);
221 
}, onValueChanged:function (date) {
222 
}});
223 
dojo.widget.TimePicker.util = new function () {
224 
	this.toRfcDateTime = function (jsDate) {
225 
		if (!jsDate) {
226 
			jsDate = new Date();
227 
		}
228 
		jsDate.setSeconds(0);
229 
		return dojo.date.strftime(jsDate, "%Y-%m-%dT%H:%M:00%z");
230 
	};
231 
	this.fromRfcDateTime = function (rfcDate, useDefaultMinutes, isAnyTime) {
232 
		var tempDate = new Date();
233 
		if (!rfcDate || rfcDate.indexOf("T") == -1) {
234 
			if (useDefaultMinutes) {
235 
				tempDate.setMinutes(Math.floor(tempDate.getMinutes() / 5) * 5);
236 
			} else {
237 
				tempDate.setMinutes(0);
238 
			}
239 
		} else {
240 
			var tempTime = rfcDate.split("T")[1].split(":");
241 
			var tempDate = new Date();
242 
			tempDate.setHours(tempTime[0]);
243 
			tempDate.setMinutes(tempTime[1]);
244 
		}
245 
		return tempDate;
246 
	};
247 
	this.toAmPmHour = function (hour) {
248 
		var amPmHour = hour;
249 
		var isAm = true;
250 
		if (amPmHour == 0) {
251 
			amPmHour = 12;
252 
		} else {
253 
			if (amPmHour > 12) {
254 
				amPmHour = amPmHour - 12;
255 
				isAm = false;
256 
			} else {
257 
				if (amPmHour == 12) {
258 
					isAm = false;
259 
				}
260 
			}
261 
		}
262 
		return [amPmHour, isAm];
263 
	};
264 
	this.fromAmPmHour = function (amPmHour, isAm) {
265 
		var hour = parseInt(amPmHour, 10);
266 
		if (isAm && hour == 12) {
267 
			hour = 0;
268 
		} else {
269 
			if (!isAm && hour < 12) {
270 
				hour = hour + 12;
271 
			}
272 
		}
273 
		return hour;
274 
	};
275 
};
276