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/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 = ['' , '' , '' , '' , '' , '' , 327 '' , '' , '' , '' , '' , '' ]; 328 return monthLabels[zeroBaseMonth] + " " + year; 329 }, 330 formatShortMonth: function(year, zeroBaseMonth) { 331 var monthLabels = ['' , '' , '' , '' , '' , '' , 332 '' , '' , '' , '' , '' , '' ]; 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 343 function log(str) { 344 var entry = document.createElement('li'); 345 entry.innerText = str; 346 document.getElementById('console').appendChild(entry); 347 } 348 349 window.onload = function() { 350 initializeConfig(); 351 openCalendar(); 352 }; 353 </script> 354 </body> 355 </html> 356
