-
Notifications
You must be signed in to change notification settings - Fork 0
/
edit.js
113 lines (96 loc) · 2.58 KB
/
edit.js
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
var deflate = require('pako/lib/deflate').deflate
var encode = require('urlsafe-base64').encode
var RUNNER = 'https://the-grid.github.io/ed-userhtml/?g='
var MAX_URL_LENGTH = 2000
var cachedBlock = null
var textarea = document.getElementById('textarea')
var status = document.getElementById('status')
var heightInput = document.getElementById('height')
var cachedHeight = 0
var hideStatusTimeout = null
function showStatus (text) {
if (hideStatusTimeout) {
window.clearTimeout(hideStatusTimeout)
hideStatusTimeout = null
}
status.textContent = text
}
function hideStatus () {
status.textContent = ''
}
function b64ify (text) {
var zipped = deflate(text, {to: 'string'})
var ascii = window.btoa(zipped)
var b64 = encode(ascii)
return b64
}
function send (topic, payload) {
if (!cachedBlock || !cachedBlock.id) return
window.parent.postMessage(
{ topic: topic
, id: cachedBlock.id
, payload: payload
}
, '*'
)
}
function toEdit (block) {
if (!block) return
if (!block.metadata) {
block.metadata = {}
}
block.metadata.widget = 'userhtml'
cachedBlock = block
if (block.text || block.metadata.text) {
textarea.value = block.text || block.metadata.text
}
if (block.height || block.metadata.height) {
heightInput.value = block.height || block.metadata.height
}
resize()
}
function fromEdit (event) {
if (!cachedBlock || !cachedBlock.metadata) return
showStatus('saving...')
var text = textarea.value
var height = parseInt(heightInput.value, 10)
height = Math.min(5000, Math.max(1, height))
var b64 = b64ify(text)
cachedBlock.text = text
cachedBlock.metadata.text = text
cachedBlock.height = height
cachedBlock.metadata.height = height
var url = RUNNER + b64
if (url.length > MAX_URL_LENGTH) {
showStatus('error: input too long')
return
}
cachedBlock.metadata.isBasedOnUrl = url
cachedBlock.html = '<iframe src="'+url+'" height="'+height+'"></iframe>'
hideStatusTimeout = setTimeout(hideStatus, 1000)
send('changed', cachedBlock)
resize()
}
textarea.addEventListener('input', fromEdit)
heightInput.addEventListener('input', fromEdit)
function resize () {
textarea.style.height = 'auto'
var height = textarea.scrollHeight
textarea.style.height = height + 'px'
height += 30
if (height !== cachedHeight) {
cachedHeight = height
send('height', height)
}
}
window.addEventListener('message', function (message) {
switch (message.data.topic) {
case 'setblock':
var block = message.data.payload
toEdit(block)
break
case 'focus':
textarea.focus()
break
}
})