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