third_party/WebKit/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         axShowMonthSelector: "Show month selection panel",
 274         axShowNextMonth: "Show next month",
 275         axShowPreviousMonth: "Show previous month",
 276         todayLabel: "Today",
 277     }
 278 };
 279
 280 function openCalendar() {
 281     var frame = document.getElementsByTagName('iframe')[0];
 282     var doc = frame.contentDocument;
 283     doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>';
 284     var commonCssLink = doc.createElement('link');
 285     commonCssLink.rel = 'stylesheet';
 286     commonCssLink.href = '../../Source/web/resources/pickerCommon.css?' + (new Date()).getTime();
 287     doc.head.appendChild(commonCssLink);
 288     var buttonCssLink = doc.createElement('link');
 289     buttonCssLink.rel = 'stylesheet';
 290     buttonCssLink.href = '../../Source/web/resources/pickerButton.css?' + (new Date()).getTime();
 291     doc.head.appendChild(buttonCssLink);
 292     var suggestionPickerCssLink = doc.createElement('link');
 293     suggestionPickerCssLink.rel = 'stylesheet';
 294     suggestionPickerCssLink.href = '../../Source/web/resources/suggestionPicker.css?' + (new Date()).getTime();
 295     doc.head.appendChild(suggestionPickerCssLink);
 296     var link = doc.createElement('link');
 297     link.rel = 'stylesheet';
 298     link.href = '../../Source/web/resources/calendarPicker.css?' + (new Date()).getTime();
 299     doc.head.appendChild(link);
 300     var commonJsScript = doc.createElement('script');
 301     commonJsScript.src = '../../Source/web/resources/pickerCommon.js?' + (new Date()).getTime();
 302     doc.body.appendChild(commonJsScript);
 303     var suggestionPickerJsScript = doc.createElement('script');
 304     suggestionPickerJsScript.src = '../../Source/web/resources/suggestionPicker.js?' + (new Date()).getTime();
 305     doc.body.appendChild(suggestionPickerJsScript);
 306     var script = doc.createElement('script');
 307     script.src = '../../Source/web/resources/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         formatWeek: function(year, week, startDate) {
 340             return '' + year + '-W' + week + ' starting on ' + startDate;
 341         }
 342     }
 343
 344     setTimeout(function() {
 345         frame.contentWindow.postMessage(JSON.stringify(createParam()), "*");
 346         frame.contentWindow.pagePopupController = pagePopupController;
 347     }, 100);
 348 }
 349
 350 function log(str) {
 351     var entry = document.createElement('li');
 352     entry.innerText = str;
 353     document.getElementById('console').appendChild(entry);
 354 }
 355
 356 window.onload = function() {
 357     initializeConfig();
 358     openCalendar();
 359 };
 360 </script>
 361 </body>
 362 </html>