|
1 | 1 | //https://webbit.webduino.io/blockly/?demo=default#EqdrNJvwYzQy6 |
2 | 2 | ~async function () { |
3 | | - |
4 | | - // 怪獸定位 |
| 3 | + // 凱比定位 |
| 4 | + const content = document.querySelector('.content'); |
| 5 | + content.classList.remove('loading'); |
5 | 6 | const kebbi = document.getElementById('svgKebbi'); |
6 | 7 | const circle = document.querySelector('.circle'); |
7 | | - const ww = window.innerWidth; |
8 | | - const wh = window.innerHeight; |
| 8 | + const ww = content.offsetWidth; |
| 9 | + const wh = content.offsetHeight; |
9 | 10 | const ox = (ww - kebbi.offsetWidth) / 2; |
10 | 11 | const oy = (wh * 0.8 - kebbi.offsetHeight) / 2; |
11 | 12 | kebbi.style.left = `${ox}px`; |
|
63 | 64 | const popup = document.getElementById('popup'); |
64 | 65 | const popupClose = document.getElementById('popupClose'); |
65 | 66 | const saveUrl = document.getElementById('saveUrl'); |
66 | | - new ClipboardJS('#saveUrl'); |
67 | 67 | popupClose.addEventListener('click', () => { |
68 | 68 | popup.classList.remove('show'); |
69 | 69 | }); |
70 | 70 | saveBtn.addEventListener('click', async function () { |
71 | 71 | let write = await database.ref('/').push(list); |
72 | 72 | popup.classList.add('show'); |
73 | 73 | saveUrl.innerText = urlOrigin + '/#' + write.key; |
74 | | - saveUrl.click(); |
75 | 74 | window.history.pushState({}, 0, urlOrigin + '#' + write.key); |
76 | 75 | document.getSelection().removeAllRanges(); |
77 | 76 | }); |
78 | 77 |
|
| 78 | + // 點擊後複製連結 |
| 79 | + const copy = document.getElementById('copy'); |
| 80 | + new ClipboardJS('#copy'); |
| 81 | + copy.addEventListener('click', () => { |
| 82 | + copy.innerText = '複製成功'; |
| 83 | + copy.classList.add('copied'); |
| 84 | + setTimeout(() => { |
| 85 | + copy.innerText = '複製連結'; |
| 86 | + copy.classList.remove('copied'); |
| 87 | + }, 1000); |
| 88 | + }); |
| 89 | + |
79 | 90 | /* firebase 讀檔 */ |
80 | 91 | if (urlHash) { |
81 | 92 | list = await database.ref(urlHash).once('value').then(result => { |
|
120 | 131 |
|
121 | 132 | // 顯示十顆按鈕的文字 |
122 | 133 | const btn = document.querySelectorAll('.btn'); |
123 | | - function buttonText() { |
124 | | - btn.forEach(e => { |
125 | | - let name = e.id; |
126 | | - e.innerHTML = `<span>${list[name]}</span>`; |
127 | | - }); |
128 | | - } |
129 | | - buttonText(); |
| 134 | + let btnObj = {}; |
| 135 | + btn.forEach(e => { |
| 136 | + btnObj[e.id] = document.getElementById(e.id); |
| 137 | + e.innerHTML = `<span>${list[e.id]}</span>`; |
| 138 | + }); |
130 | 139 |
|
131 | 140 | // 暫存到 localStorage 的函式 |
132 | 141 | function save(val) { |
|
142 | 151 | self.addEventListener('input', () => { |
143 | 152 | window.history.pushState({}, 0, urlOrigin); |
144 | 153 | list[m] = self.value; |
145 | | - btn.forEach(ele => { |
146 | | - if (ele.id == m) { |
147 | | - ele.innerHTML = `<span>${self.value}</span>`; |
148 | | - } |
149 | | - }); |
150 | | - buttonText(); |
| 154 | + if (btnObj[m]) { |
| 155 | + btnObj[m].innerHTML = `<span>${self.value}</span>`; |
| 156 | + } |
151 | 157 | save(list); |
152 | 158 | if (m == 'topic2') { |
153 | 159 | mqttGet(list.topic2); |
|
163 | 169 | } |
164 | 170 | // 發送 mqtt 訊號 |
165 | 171 | const mqtt = async function (topic, msg) { |
166 | | - console.log(topic,list.topic1); |
167 | 172 | if (topic == list.topic1) { |
168 | 173 | webduinoBroadcastor.send({ |
169 | 174 | topic: topic, |
|
178 | 183 | const mqttGet = async function (topic) { |
179 | 184 | await webduinoBroadcastor.onMessage(topic, async (msg) => { |
180 | 185 | if (topic == list.topic2) { |
181 | | - console.log(msg); |
182 | 186 | clearTimeout(messageTimer); |
183 | 187 | messageH4.innerText = msg; |
184 | 188 | message.classList.add('show'); |
|
0 commit comments