-
Notifications
You must be signed in to change notification settings - Fork 0
/
plugin.html
94 lines (90 loc) · 3.3 KB
/
plugin.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
body {
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 12px;
background: #ffffff;
margin: 0em;
padding: 16px;
color: #1d1d1d;
}
.label{
width: 70px;
font-size: 12px;
}
.value{
padding-left: 8px;
font-size: 12px;
}
.generate_button{
width: 100%;
border: none;
color: white;
padding: 14px 28px;
font-size: 12px;
cursor: pointer;
background-color: #4CAF50;
}
</style>
</head>
<body>
<table>
<tr>
<td class="label">
Dot size:
</td>
<td>
<input class="slider" type="range" id="dot_size_slider" name="dot_size_slider" min="1" max="20" value="1">
</td>
<td class="value">
<span id="dot_size_value"></span>
</td>
</tr>
<tr>
<td class="label">
Distance:
</td>
<td>
<input class="slider" type="range" id="distance_slider" name="dot_size_slider" min="1" max="50" value="12">
</td>
<td class="value">
<span id="distance_value"></span>
</td>
</tr>
</table>
<br>
<button class="generate_button" onclick="generate();">Generate Grid</button>
<script>
var dotSizeSlider = document.getElementById("dot_size_slider");
var dotSizeValue = document.getElementById("dot_size_value");
dotSizeValue.innerHTML = dotSizeSlider.value;
dotSizeSlider.oninput = function() {
dotSizeValue.innerHTML = this.value;
}
var distanceSlider = document.getElementById("distance_slider");
var distanceValue = document.getElementById("distance_value");
distanceValue.innerHTML = distanceSlider.value;
distanceSlider.oninput = function() {
distanceValue.innerHTML = this.value;
}
function generate(){
parent.postMessage({ pluginMessage: "" + dotSizeSlider.value + ":" + distanceSlider.value }, '*')
}
onmessage = (event) => {
console.log("alert message from plugin: ", event.data.pluginMessage);
const message = event.data.pluginMessage;
if(isNaN(message)){
alert(message);
}else{
const proceed = confirm("Generating a grid of " + Math.floor(message) + " may take a while, are you sure you want to continue?");
if(proceed){
parent.postMessage({ pluginMessage: "" + dotSizeSlider.value + ":" + distanceSlider.value + ":overidecheck" }, '*')
}
}
}
</script>
</body>
</html>