| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset=utf-8> |
| <title><input type=color></title> |
| <style> |
| body { |
| background-color: #eeffff; |
| } |
| iframe { |
| z-index: 2147483647; |
| width: 180px; |
| height: 240px; |
| border: 0; |
| overflow: hidden; |
| } |
| textarea { |
| width: 350px; |
| height: 150px; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <h3>This is a testbed for <input type=color></h3> |
| |
| <h3>Regular popup <input type=color> <input type="color" id="color"></h3> |
| |
| <h3>Inline iframe <input type=color></h3> |
| <div>Set arguments for the color picker with this textarea.</div> |
| <div>The arguments are used inside the picker as "global.params".</div> |
| <div>The string must be JSON formatted with double quotes.</div> |
| <div><textarea id=argsTextarea></textarea></div> |
| <div><button id=restartbutton>Restart picker with args</button></div> |
| <br> |
| <div id=iframecontainer></div> |
| |
| <ol id="console" style="font-family:monospace;"></ol> |
| |
| <script> |
| argsTextarea.textContent = `{ |
| "selectedColor": "#aaaaaa" |
| }`; |
| |
| restartbutton.onclick = openColorPicker; |
| |
| function openColorPicker() { |
| const oldFrame = document.getElementById('coloriframe'); |
| if (oldFrame) |
| oldFrame.remove(); |
| const frame = document.createElement('iframe'); |
| frame.id = 'coloriframe'; |
| iframecontainer.appendChild(frame); |
| const doc = frame.contentDocument; |
| |
| // The following code sets up a color picker inside an iframe as similarly as |
| // possible to ColorChooserPopupUIController::WriteColorPickerDocument. |
| // https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/forms/color_chooser_popup_ui_controller.cc;l=97;drc=cc7f2a9e51671f702fd5e6a07c0ffda834fa8a38 |
| |
| doc.documentElement.innerHTML = ` |
| <head> |
| <meta charset='UTF-8'> |
| <link rel=stylesheet href="../../renderer/core/html/forms/resources/pickerCommon.css"> |
| <link rel=stylesheet href="../../renderer/core/html/forms/resources/color_picker.css"> |
| </head> |
| <body> |
| <div id=main>Loading...</div> |
| </body> |
| `; |
| |
| const pickerCommon = doc.createElement('script'); |
| pickerCommon.src = "../../renderer/core/html/forms/resources/pickerCommon.js"; |
| doc.body.appendChild(pickerCommon); |
| |
| const colorPicker = doc.createElement('script'); |
| colorPicker.src = "../../renderer/core/html/forms/resources/color_picker.js"; |
| doc.body.appendChild(colorPicker); |
| |
| const colorPickerCommon = doc.createElement('script'); |
| colorPickerCommon.src = "../../renderer/core/html/forms/resources/color_picker_common.js"; |
| doc.body.appendChild(colorPickerCommon); |
| |
| const pagePopupController = frame.contentWindow.pagePopupController = { |
| setValueAndClosePopup: function(numValue, stringValue) { |
| window.log('number=' + numValue + ', string="' + stringValue + '"'); |
| if (numValue === 0) |
| window.document.getElementById('color').value = stringValue; |
| }, |
| setValue: function(value) { |
| window.log('value="' + value + '"'); |
| window.document.getElementById('color').value = value; |
| }, |
| closePopup: function() { |
| }, |
| }; |
| |
| setTimeout(function() { |
| frame.contentWindow.postMessage(argsTextarea.textContent, "*"); |
| frame.contentWindow.pagePopupController = pagePopupController; |
| }, 100); |
| } |
| |
| function log(str) { |
| var entry = document.createElement('li'); |
| entry.innerText = str; |
| document.getElementById('console').appendChild(entry); |
| } |
| |
| openColorPicker(); |
| |
| </script> |
| </body> |
| </html> |
