• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset=utf-8>
5<title>Calendar Picker test</title>
6<style>
7body {
8    background-color: #eeffff;
9    line-height: 1.4em;
10    font-family: Helvetica, sans-serif;
11}
12label {
13    width: 160px;
14    display: inline-block;
15}
16iframe {
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>
89function 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
99function 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
121function $(id) {
122    return document.getElementById(id);
123}
124
125var config = {};
126function 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
153var 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
260function 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
276function 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/web/resources/pickerCommon.css?' + (new Date()).getTime();
283    doc.head.appendChild(commonCssLink);
284    var buttonCssLink = doc.createElement('link');
285    buttonCssLink.rel = 'stylesheet';
286    buttonCssLink.href = '../../Source/web/resources/pickerButton.css?' + (new Date()).getTime();
287    doc.head.appendChild(buttonCssLink);
288    var suggestionPickerCssLink = doc.createElement('link');
289    suggestionPickerCssLink.rel = 'stylesheet';
290    suggestionPickerCssLink.href = '../../Source/web/resources/suggestionPicker.css?' + (new Date()).getTime();
291    doc.head.appendChild(suggestionPickerCssLink);
292    var link = doc.createElement('link');
293    link.rel = 'stylesheet';
294    link.href = '../../Source/web/resources/calendarPicker.css?' + (new Date()).getTime();
295    doc.head.appendChild(link);
296    var commonJsScript = doc.createElement('script');
297    commonJsScript.src = '../../Source/web/resources/pickerCommon.js?' + (new Date()).getTime();
298    doc.body.appendChild(commonJsScript);
299    var suggestionPickerJsScript = doc.createElement('script');
300    suggestionPickerJsScript.src = '../../Source/web/resources/suggestionPicker.js?' + (new Date()).getTime();
301    doc.body.appendChild(suggestionPickerJsScript);
302    var script = doc.createElement('script');
303    script.src = '../../Source/web/resources/calendarPicker.js?' + (new Date()).getTime();
304    doc.body.appendChild(script);
305
306    var pagePopupController = {
307        setValueAndClosePopup: function(numValue, stringValue) {
308            window.log('number=' + numValue + ', string="' + stringValue + '"');
309            if (numValue == 0)
310                window.document.getElementById('date').value = stringValue;
311        },
312        setValue: function(stringValue) {
313            window.log('string="' + stringValue + '"');
314            window.document.getElementById('date').value = stringValue;
315        },
316        closePopup: function() {
317            window.log('closePopup');
318        },
319        localizeNumberString: function(numString) {
320            if (typeof numString == "number")
321                return numString.toLocaleString();
322            return numString.toString();
323        },
324        histogramEnumeration: function() {},
325        formatMonth: function(year, zeroBaseMonth) {
326            var monthLabels = ['<January>', '<February>', '<March>', '<April>', '<May>', '<June>',
327                               '<July>', '<August>', '<September>', '<October>', '<November>', '<December>'];
328            return monthLabels[zeroBaseMonth] + " " + year;
329        },
330        formatShortMonth: function(year, zeroBaseMonth) {
331            var monthLabels = ['<Jan>', '<Feb>', '<Mar>', '<Apr>', '<May>', '<Jun>',
332                               '<Jul>', '<Aug>', '<Sept>', '<Oct>', '<Nov>', '<Dec>'];
333            return monthLabels[zeroBaseMonth] + " " + year;
334        }
335    }
336
337    setTimeout(function() {
338        frame.contentWindow.postMessage(JSON.stringify(createParam()), "*");
339        frame.contentWindow.pagePopupController = pagePopupController;
340    }, 100);
341}
342
343function log(str) {
344    var entry = document.createElement('li');
345    entry.innerText = str;
346    document.getElementById('console').appendChild(entry);
347}
348
349window.onload = function() {
350    initializeConfig();
351    openCalendar();
352};
353</script>
354</body>
355</html>
356