Unreviewed build fix; remove unintentional semicolon.
[WebKit-https.git] / ManualTests / forms / calendar-picker.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8>
5 <title>Calendar Picker test</title>
6 <style>
7 body {
8     background-color: #eeffff;
9     line-height: 1.4em;
10     font-family: Helvetica, sans-serif;
11 }
12 label {
13     width: 160px;
14     display: inline-block;
15 }
16 iframe {
17     z-index: 2147483647;
18     width: 100px;
19     height: 100px;
20     border: 0;
21     overflow: hidden;
22 }
23 </style>
24 </head>
25 <body>
26
27 <p>This is a testbed for a calendar picker.</p>
28
29 <h2>Preview</h2>
30
31 <input type="text" id="date" style="margin: 0;"><br>
32 <iframe></iframe>
33
34 <h2>Console</h2>
35
36 <ol id="console" style="font-family:monospace;"></ol>
37
38 <h2>Config</h2>
39 <form action="" method="GET">
40     <fieldset>
41         <legend>Locale</legend>
42         
43         <label for="locale">Locale</label>
44         <select name="locale" id="config_locale">
45             <!-- Populated from locale_data. -->
46         </select>
47         <br />
48         <label for="locale_rtl">Locale RTL</label>
49         <input type="checkbox" name="locale_rtl" id="config_locale_rtl" value="true">
50         <br />
51         <label for="week_start_day">Week start day</label>
52         <select name="week_start_day" id="config_week_start_day">
53             <option value="0">Sunday</option>
54             <option value="1">Monday</option>
55             <option value="2">Tuesday</option>
56             <option value="3">Wednesday</option>
57             <option value="4">Thursday</option>
58             <option value="5">Friday</option>
59             <option value="6">Saturday</option>
60         </select>
61     </fieldset>
62
63     <fieldset>
64         <legend>Attributes</legend>
65         
66         <label for="type">[type]</label>
67         <select name="type" id="config_type">
68             <option>date</option>
69             <option>week</option>
70             <option>month</option>
71         </select>
72         <br />
73         <label for="value">[value]</label>
74         <input type="text" name="value" id="config_value">
75         <br />
76         <label for="min">[min]</label>
77         <input type="text" name="min" id="config_min">
78         <br />
79         <label for="max">[max]</label>
80         <input type="text" name="max" id="config_max">
81         <br />
82         <label for="step">[step]</label>
83         <input type="number" name="step" id="config_step">
84     </fieldset>
85     <input type="submit" value="Submit">
86 </form>
87
88 <script>
89 function getParam(key) {
90     key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
91     var pattern = "[\\?&]" + key + "=([^&#]*)";
92     var regex = new RegExp(pattern);
93     var results = regex.exec(window.location.search);
94     if (!results)
95         return "";
96     return decodeURIComponent(results[1].replace(/\+/g, " "));
97 }
98
99 function setParam(key, value) {
100     key = escape(key);
101     value = escape(value);
102
103     var kvp = document.location.search.substr(1).split('&');
104
105     for (var i = kvp.length - 1; i >= 0; --i){
106         kvp[i]
107         var x = kvp[i].split('=');
108         if (x[0] === key) {
109             x[1] = value;
110             kvp[i] = x.join('=');
111             break;
112         }
113     }
114
115     if (i < 0)
116         kvp[kvp.length] = key + "=" + value;
117
118     document.location.search = kvp.join('&');
119 }
120
121 function $(id) {
122     return document.getElementById(id);
123 }
124
125 var config = {};
126 function initializeConfig() {
127     for (locale in locale_data) {
128         var option = document.createElement("option");
129         option.setAttribute("label", locale_data[locale].displayName);
130         option.setAttribute("value", locale);
131         $("config_locale").appendChild(option);
132     }
133     
134     config.locale = getParam("locale") || "en_US";
135     config.isLocaleRTL = getParam("locale_rtl") === "true";
136     config.weekStartDay = parseInt(getParam("weekStartDay") || "0", 10);
137     config.type = getParam("type") || "date";
138     config.value = getParam("value") || "";
139     config.min = getParam("min") || "";
140     config.max = getParam("max") || "";
141     config.step = getParam("step") || "1";
142
143     $("config_locale").value = config.locale;
144     $("config_locale_rtl").checked = config.isLocaleRTL;
145     $("config_week_start_day").value = config.weekStartDay;
146     $("config_type").value = config.type;
147     $("config_value").value = config.value;
148     $("config_min").value = config.min;
149     $("config_max").value = config.max;
150     $("config_step").value = config.step;
151 };
152
153 var locale_data = {
154     "en_US": {
155         "displayName": "English (United States)",
156         "shortMonthLabels": [
157         "Jan",
158         "Feb",
159         "Mar",
160         "Apr",
161         "May",
162         "Jun",
163         "Jul",
164         "Aug",
165         "Sep",
166         "Oct",
167         "Nov",
168         "Dec"
169         ],
170         "dayLabels": [
171         "S",
172         "M",
173         "T",
174         "W",
175         "T",
176         "F",
177         "S"
178         ],
179     },
180     "ja": {
181         "displayName": "Japanese",
182         "shortMonthLabels": [
183         "1月",
184         "2月",
185         "3月",
186         "4月",
187         "5月",
188         "6月",
189         "7月",
190         "8月",
191         "9月",
192         "10月",
193         "11月",
194         "12月"
195         ],
196         "dayLabels": [
197         "日",
198         "月",
199         "火",
200         "水",
201         "木",
202         "金",
203         "土"
204         ],
205     },
206     "ar": {
207         "displayName": "Arabic",
208         "shortMonthLabels": [
209         "يناير",
210         "فبراير",
211         "مارس",
212         "أبريل",
213         "مايو",
214         "يونيو",
215         "يوليو",
216         "أغسطس",
217         "سبتمبر",
218         "أكتوبر",
219         "نوفمبر",
220         "ديسمبر"
221         ],
222         "dayLabels": [
223         "ح",
224         "ن",
225         "ث",
226         "ر",
227         "خ",
228         "ج",
229         "س"
230         ],
231     },
232     "vi": {
233         "displayName": "Vietnamese",
234         "shortMonthLabels": [
235         "thg 1",
236         "thg 2",
237         "thg 3",
238         "thg 4",
239         "thg 5",
240         "thg 6",
241         "thg 7",
242         "thg 8",
243         "thg 9",
244         "thg 10",
245         "thg 11",
246         "thg 12"
247         ],
248         "dayLabels": [
249         "CN",
250         "T2",
251         "T3",
252         "T4",
253         "T5",
254         "T6",
255         "T7"
256         ],
257     },
258 };
259
260 function createParam() {
261     return {
262         mode: config.type,
263         locale: config.locale,
264         weekStartDay: config.weekStartDay,
265         isLocaleRTL: config.isLocaleRTL,
266         dayLabels: locale_data[config.locale].dayLabels,
267         shortMonthLabels: locale_data[config.locale].shortMonthLabels,
268         max: config.max,
269         min: config.min,
270         step: config.step * (config.type === "month" ? 1 : 86400000),
271         stepBase: "0",
272         currentValue: config.value
273     }
274 };
275
276 function openCalendar() {
277     var frame = document.getElementsByTagName('iframe')[0];
278     var doc = frame.contentDocument;
279     doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
280     var commonCssLink = doc.createElement('link');
281     commonCssLink.rel = 'stylesheet';
282     commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime();
283     doc.head.appendChild(commonCssLink);
284     var commonChromiumCssLink = doc.createElement('link');
285     commonChromiumCssLink.rel = 'stylesheet';
286     commonChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/pickerCommonChromium.css?' + (new Date()).getTime();
287     doc.head.appendChild(commonChromiumCssLink);
288     var suggestionPickerCssLink = doc.createElement('link');
289     suggestionPickerCssLink.rel = 'stylesheet';
290     suggestionPickerCssLink.href = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.css?' + (new Date()).getTime();
291     doc.head.appendChild(suggestionPickerCssLink);
292     var link = doc.createElement('link');
293     link.rel = 'stylesheet';
294     link.href = '../../Source/WebCore/Resources/pagepopups/calendarPicker.css?' + (new Date()).getTime();
295     doc.head.appendChild(link);
296     var calendarPickerChromiumCssLink = doc.createElement('link');
297     calendarPickerChromiumCssLink.rel = 'stylesheet';
298     calendarPickerChromiumCssLink.href = '../../Source/WebCore/Resources/pagepopups/chromium/calendarPickerChromium.css?' + (new Date()).getTime();
299     doc.head.appendChild(calendarPickerChromiumCssLink);
300     var commonJsScript = doc.createElement('script');
301     commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime();
302     doc.body.appendChild(commonJsScript);
303     var suggestionPickerJsScript = doc.createElement('script');
304     suggestionPickerJsScript.src = '../../Source/WebCore/Resources/pagepopups/suggestionPicker.js?' + (new Date()).getTime();
305     doc.body.appendChild(suggestionPickerJsScript);
306     var script = doc.createElement('script');
307     script.src = '../../Source/WebCore/Resources/pagepopups/calendarPicker.js?' + (new Date()).getTime();
308     doc.body.appendChild(script);
309
310     var pagePopupController = {
311         setValueAndClosePopup: function(numValue, stringValue) {
312             window.log('number=' + numValue + ', string="' + stringValue + '"');
313             if (numValue == 0)
314                 window.document.getElementById('date').value = stringValue;
315         },
316         setValue: function(stringValue) {
317             window.log('string="' + stringValue + '"');
318             window.document.getElementById('date').value = stringValue;
319         },
320         closePopup: function() {
321             window.log('closePopup');
322         },
323         localizeNumberString: function(numString) {
324             if (typeof numString == "number")
325                 return numString.toLocaleString();
326             return numString.toString();
327         },
328         histogramEnumeration: function() {},
329         formatMonth: function(year, zeroBaseMonth) {
330             var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
331                                '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
332             return monthLabels[zeroBaseMonth] + " " + year;
333         },
334         formatShortMonth: function(year, zeroBaseMonth) {
335             var monthLabels = ['<Jan>', '<Feb>', '<Mar>', '<Apr>', '<May>', '<Jun>',
336                                '<Jul>', '<Aug>', '<Sept>', '<Oct>', '<Nov>', '<Dec>'];
337             return monthLabels[zeroBaseMonth] + " " + year;
338         }
339     }
340
341     setTimeout(function() {
342         frame.contentWindow.postMessage(JSON.stringify(createParam()), "*");
343         frame.contentWindow.pagePopupController = pagePopupController;
344     }, 100);
345 }
346
347 function log(str) {
348     var entry = document.createElement('li');
349     entry.innerText = str;
350     document.getElementById('console').appendChild(entry);
351 }
352
353 window.onload = function() {
354     initializeConfig();
355     openCalendar();
356 };
357 </script>
358 </body>
359 </html>