1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Color Suggestion Picker test</title> 6 <style> 7 body { 8 background-color: #eeffff; 9 } 10 iframe { 11 z-index: 2147483647; 12 width: 180px; 13 height: 240px; 14 border: 0; 15 overflow: hidden; 16 } 17 </style> 18 </head> 19 <body> 20 21 <p>This is a testbed for a color suggestion picker.</p> 22 23 <div><input type="color" id="color"></div> 24 <iframe></iframe> 25 26 <ol id="console" style="font-family:monospace;"> 27 </ol> 28 29 <script> 30 var arguments = { 31 values : ['#000000', '#404040', '#808080', '#c0c0c0', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#404040', '#808080', '#c0c0c0', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff'], 32 otherColorLabel: 'Other...' 33 }; 34 35 function openColorPicker(args) { 36 var frame = document.getElementsByTagName('iframe')[0]; 37 var doc = frame.contentDocument; 38 doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...</div></body>'; 39 var commonCssLink = doc.createElement('link'); 40 commonCssLink.rel = 'stylesheet'; 41 commonCssLink.href = '../../Source/WebCore/Resources/pagepopups/pickerCommon.css?' + (new Date()).getTime(); 42 doc.head.appendChild(commonCssLink); 43 var link = doc.createElement('link'); 44 link.rel = 'stylesheet'; 45 link.href = '../../Source/WebCore/Resources/pagepopups/colorSuggestionPicker.css?' + (new Date()).getTime(); 46 doc.head.appendChild(link); 47 var commonJsScript = doc.createElement('script'); 48 commonJsScript.src = '../../Source/WebCore/Resources/pagepopups/pickerCommon.js?' + (new Date()).getTime(); 49 doc.body.appendChild(commonJsScript); 50 var script = doc.createElement('script'); 51 script.src = '../../Source/WebCore/Resources/pagepopups/colorSuggestionPicker.js?' + (new Date()).getTime(); 52 doc.body.appendChild(script); 53 54 var pagePopupController = { 55 setValueAndClosePopup: function(numValue, stringValue) { 56 window.log('number=' + numValue + ', string="' + stringValue + '"'); 57 if (numValue === 0) 58 window.document.getElementById('color').value = stringValue; 59 }, 60 setValue: function(value) { 61 window.log('value="' + value + '"'); 62 window.document.getElementById('color').value = value; 63 }, 64 closePopup: function() { 65 }, 66 } 67 68 setTimeout(function() { 69 frame.contentWindow.postMessage(JSON.stringify(args), "*"); 70 frame.contentWindow.pagePopupController = pagePopupController; 71 }, 100); 72 } 73 74 function log(str) { 75 var entry = document.createElement('li'); 76 entry.innerText = str; 77 document.getElementById('console').appendChild(entry); 78 } 79 80 openColorPicker(arguments); 81 </script> 82 </body> 83 </html>
