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 = 'Loading...'; 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 = ['' , '' , '' , '' , '' , '' , 331 '' , '' , '' , '' , '' , '' ]; 332 return monthLabels[zeroBaseMonth] + " " + year; 333 }, 334 formatShortMonth: function(year, zeroBaseMonth) { 335 var monthLabels = ['' , '' , '' , '' , '' , '' , 336 '' , '' , '' , '' , '' , '' ]; 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> 360
