| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset=utf-8> |
| <title>List Picker test</title> |
| <style> |
| body { |
| background-color: #eeffff; |
| } |
| iframe { |
| z-index: 2147483647; |
| width: 100px; |
| height: 100px; |
| border: 0; |
| overflow: hidden; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <p>This is a testbed for list picker.</p> |
| |
| <div> |
| <select id="menu"> |
| <option value="0">foo</option> |
| <option value="1">bar</option> |
| <option value="2">bar</option> |
| <optgroup label=bar> |
| <option value="4">bar</option> |
| <option value="5">bar</option> |
| </optgroup> |
| <option value="6">bar</option> |
| </select> |
| <iframe srcdoc="<!DOCTYPE html>"></iframe> |
| |
| <ol id="console" style="font-family:monospace;"> |
| </ol> |
| |
| <script> |
| var pickerArguments = { |
| selectedIndex: 0, |
| children: [{ |
| type: "option", |
| label: "foo", |
| title: "", |
| value: 0, |
| ariaLabel: "", |
| disabled: false, |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "400", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }, { |
| type: "option", |
| label: "bar", |
| title: "", |
| value: 1, |
| ariaLabel: "", |
| disabled: false, |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "400", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }, { |
| type: "separator", |
| label: "bar", |
| title: "", |
| value: 2, |
| ariaLabel: "", |
| disabled: false, |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "400", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }, { |
| type: "option", |
| label: "bar", |
| title: "", |
| value: 2, |
| ariaLabel: "", |
| disabled: false, |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "400", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }, { |
| type: "optgroup", |
| label: "foo", |
| title: "", |
| ariaLabel: "", |
| disabled: false, |
| children: [{ |
| type: "option", |
| label: "bar", |
| title: "", |
| value: 3, |
| ariaLabel: "", |
| disabled: false, |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "700", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }, |
| { |
| type: "option", |
| label: "bar", |
| title: "", |
| value: 4, |
| ariaLabel: "", |
| disabled: false, |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "400", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }], |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "400", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }, { |
| type: "option", |
| label: "bar", |
| title: "", |
| value: 5, |
| ariaLabel: "", |
| disabled: false, |
| style: { |
| color: "black", |
| backgroundColor: "transparent", |
| fontSize: "11px", |
| fontWeight: "400", |
| fontFamily: ["sans-serif"], |
| visibility: "visible", |
| display: "block", |
| direction: "ltr", |
| unicodeBidi: "normal" |
| } |
| }], |
| anchorRectInScreen: { |
| x: 1332, |
| y: 356, |
| width: 64, |
| height: 18, |
| }, |
| }; |
| |
| function openListPicker(args) { |
| var frame = document.getElementsByTagName('iframe')[0]; |
| var doc = frame.contentDocument; |
| doc.documentElement.innerHTML = '<!DOCTYPE html><head></head><body><div id=main>Loading...</div></body>'; |
| var commonCssLink = doc.createElement('link'); |
| commonCssLink.rel = 'stylesheet'; |
| commonCssLink.href = '../../Source/core/html/forms/resources/pickerCommon.css?' + (new Date()).getTime(); |
| doc.head.appendChild(commonCssLink); |
| var listPickerCssLink = doc.createElement('link'); |
| listPickerCssLink.rel = 'stylesheet'; |
| listPickerCssLink.href = '../../Source/core/html/forms/resources/listPicker.css?' + (new Date()).getTime(); |
| doc.head.appendChild(listPickerCssLink); |
| var commonJsScript = doc.createElement('script'); |
| commonJsScript.src = '../../Source/core/html/forms/resources/pickerCommon.js?' + (new Date()).getTime(); |
| doc.body.appendChild(commonJsScript); |
| var listPickerJsScript = doc.createElement('script'); |
| listPickerJsScript.src = '../../Source/core/html/forms/resources/listPicker.js?' + (new Date()).getTime(); |
| doc.body.appendChild(listPickerJsScript); |
| |
| var pagePopupController = { |
| setValue: function(stringValue) { |
| window.log('string="' + stringValue + '"'); |
| if (numValue == 0) |
| window.document.getElementById('menu').value = stringValue; |
| }, |
| setValueAndClosePopup: function(numValue, stringValue) { |
| window.log('number=' + numValue + ', string="' + stringValue + '"'); |
| if (numValue == 0) |
| window.document.getElementById('menu').value = stringValue; |
| }, |
| } |
| |
| setTimeout(function() { |
| frame.contentWindow.postMessage(JSON.stringify(args), "*"); |
| frame.contentWindow.pagePopupController = pagePopupController; |
| }, 100); |
| } |
| |
| function log(str) { |
| var entry = document.createElement('li'); |
| entry.innerText = str; |
| document.getElementById('console').appendChild(entry); |
| } |
| |
| document.getElementsByTagName('iframe')[0].onload = function () { |
| openListPicker(pickerArguments); |
| } |
| </script> |
| </body> |
| </html> |
