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