import {LitElement, html, css, svg} from '/static/lit/lit-all.min.js'; let gSocket; let gCurrentFile; let gFiles = {}; let gApp = {files: {}, emoji: '๐Ÿ“ฆ'}; let gEditor; let gSplit; let gOriginalInput; let kErrorColor = "#dc322f"; let kStatusColor = "#fff"; /* Functions that server-side app code can call through the app object. */ const k_api = { setDocument: {args: ['content'], func: api_setDocument}, postMessage: {args: ['message'], func: api_postMessage}, error: {args: ['error'], func: api_error}, localStorageSet: {args: ['key', 'value'], func: api_localStorageSet}, localStorageGet: {args: ['key'], func: api_localStorageGet}, requestPermission: {args: ['permission', 'id'], func: api_requestPermission}, print: {args: ['...'], func: api_print}, setHash: {args: ['hash'], func: api_setHash}, }; const k_global_style = css` a:link { color: #268bd2; } a:visited { color: #6c71c4; } a:hover { color: #859900; } a:active { color: #2aa198; } `; class TfNavigationElement extends LitElement { static get properties() { return { credentials: {type: Object}, permissions: {type: Object}, show_permissions: {type: Boolean}, status: {type: Object}, spark_lines: {type: Object}, version: {type: Object}, show_version: {type: Boolean}, }; } constructor() { super(); this.permissions = {}; this.show_permissions = false; this.status = {}; this.spark_lines = {}; } toggle_edit(event) { event.preventDefault(); if (editing()) { closeEditor(); } else { edit(); } } reset_permission(key) { send({action: "resetPermission", permission: key}); } get_spark_line(key, options) { if (!this.spark_lines[key]) { let spark_line = document.createElement('tf-sparkline'); spark_line.style.display = 'flex'; spark_line.style.flexDirection = 'row'; spark_line.style.flex = '0 100 10em'; spark_line.title = key; if (options) { if (options.max) { spark_line.max = options.max; } } this.spark_lines[key] = spark_line; this.requestUpdate(); } return this.spark_lines[key]; } render_login() { if (this?.credentials?.session?.name) { return html`logout ${this.credentials.session.name}`; } else { return html`login`; } } render_permissions() { if (this.show_permissions) { return html`
This app has the following permissions:
${Object.keys(this.permissions).map(key => html`
${key}: ${this.permissions[key] ? 'โœ… Allowed' : 'โŒ Denied'}
`)}
`; } } render() { let self = this; return html`
this.show_version = !this.show_version}>๐Ÿ˜Ž ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number} TF apps edit self.show_permissions = !self.show_permissions}>๐ŸŽ›๏ธ ${this.status.message} ${this.render_permissions()} ${Object.keys(this.spark_lines).sort().map(x => this.spark_lines[x]).map(x => [x.dataset.emoji, x])} ${this.render_login()}
`; } } customElements.define('tf-navigation', TfNavigationElement); class TfFilesElement extends LitElement { static get properties() { return { current: {type: String}, files: {type: Object}, }; } constructor() { super(); this.files = {}; } file_click(file) { this.dispatchEvent(new CustomEvent('file_click', { detail: { file: file, }, bubbles: true, composed: true, })); } render_file(file) { let classes = ['file']; if (file == this.current) { classes.push('current'); } if (!this.files[file].clean) { classes.push('dirty'); } return html`
this.file_click(file)}>${file}
`; } render() { let self = this; return html`
${Object.keys(this.files).sort().map(x => self.render_file(x))}
`; } } customElements.define('tf-files', TfFilesElement); class TfFilesPaneElement extends LitElement { static get properties() { return { expanded: {type: Boolean}, current: {type: String}, files: {type: Object}, }; } constructor() { super(); this.expanded = window.localStorage.getItem('files') != '0'; this.files = {}; } set_expanded(expanded) { this.expanded = expanded; window.localStorage.setItem('files', expanded ? '1' : '0'); } render() { let self = this; let expander = this.expanded ? html` self.set_expanded(false)} class="expander">ยซ` : html` self.set_expanded(true)} class="expander">ยป`; let content = html`
openFile(event.detail.file)}>
`; return html`
${this.expanded ? html`Files` : undefined} ${expander}
${this.expanded ? content : undefined}
`; } } customElements.define('tf-files-pane', TfFilesPaneElement); class TfSparkLineElement extends LitElement { static get properties() { return { lines: {type: Array}, min: {type: Number}, max: {type: Number}, }; } constructor() { super(); this.min = 0; this.max = 1.0; this.lines = []; this.k_values_max = 100; } append(key, value) { let line = null; for (let it of this.lines) { if (it.name == key) { line = it; break; } } if (!line) { const k_colors = ['#0f0', '#88f', '#ff0', '#f0f', '#0ff', '#f00', '#888']; line = { name: key, style: k_colors[this.lines.length % k_colors.length], values: Array(this.k_values_max).fill(0), }; this.lines.push(line); } if (line.values.length >= this.k_values_max) { line.values.shift(); } line.values.push(value); this.requestUpdate(); } render_line(line) { if (line?.values?.length >= 2) { let max = Math.max(this.max, ...line.values); let points = [].concat(...line.values.map((x, i) => [100.0 * i / (line.values.length - 1), 10.0 - 10.0 * (x - this.min) / (max - this.min)])); return svg``; } } render() { let max = Math.round(10.0 * Math.max(...this.lines.map(line => line.values[line.values.length - 1]))) / 10.0; return html` ${this.lines.map(x => this.render_line(x))} ${max} `; } } customElements.define('tf-sparkline', TfSparkLineElement); window.addEventListener("keydown", function(event) { if (event.keyCode == 83 && (event.altKey || event.ctrlKey)) { if (editing()) { save(); event.preventDefault(); } } else if (event.keyCode == 66 && event.altKey) { if (editing()) { closeEditor(); event.preventDefault(); } } }); function ensureLoaded(nodes, callback) { if (!nodes.length) { callback(); return; } let search = nodes.shift(); let head = document.head; let found = false; for (let i = 0; i < head.childNodes.length; i++) { if (head.childNodes[i].tagName == search.tagName) { let match = true; for (let attribute in search.attributes) { if (head.childNodes[i].attributes[attribute].value != search.attributes[attribute]) { match = false; } } if (match) { found = true; break; } } } if (found) { ensureLoaded(nodes, callback); } else { let node = document.createElement(search.tagName); node.onreadystatechange = node.onload = function() { ensureLoaded(nodes, callback); }; for (let attribute in search.attributes) { node.setAttribute(attribute, search.attributes[attribute]); } head.insertBefore(node, head.firstChild); } } function editing() { return document.getElementById("editPane").style.display != 'none'; } function edit() { if (editing()) { return; } window.localStorage.setItem('editing', '1'); if (gSplit) { gSplit.destroy(); gSplit = undefined; } gSplit = Split(['#editPane', '#viewPane'], {minSize: 0}); document.getElementById("editPane").style.display = 'flex'; ensureLoaded([ {tagName: "script", attributes: {src: "/codemirror/codemirror.min.js"}}, {tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/base16-dark.min.css"}}, {tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/matchesonscrollbar.min.css"}}, {tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/dialog.min.css"}}, {tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/codemirror.min.css"}}, {tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/lint.css"}}, {tagName: "script", attributes: {src: "/codemirror/trailingspace.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/dialog.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/search.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/searchcursor.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/jump-to-line.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/matchesonscrollbar.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/annotatescrollbar.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/javascript.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/css.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/xml.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/htmlmixed.min.js"}}, {tagName: "script", attributes: {src: "/codemirror/lint.js"}}, {tagName: "script", attributes: {src: "/codemirror/jshint.js"}}, {tagName: "script", attributes: {src: "/codemirror/javascript-lint.min.js"}}, ], function() { load().catch(function(error) { alert(error); closeEditor(); }); }); } function trace() { window.open(`/speedscope/#profileURL=${encodeURIComponent('/trace')}`); } function guessMode(name) { return name.endsWith(".js") ? "javascript" : name.endsWith(".html") ? "htmlmixed" : null; } function loadFile(name, id) { return fetch('/' + id + '/view').then(function(response) { if (!response.ok) { throw new Error('Request failed: ' + response.status + ' ' + response.statusText); } return response.text(); }).then(function(text) { gFiles[name].doc = new CodeMirror.Doc(text, guessMode(name)); if (!Object.values(gFiles).some(x => !x.doc)) { openFile(Object.keys(gFiles).sort()[0]); } }); } function load(path) { return fetch((path || url()) + 'view').then(function(response) { if (!response.ok) { if (response.status == 404) { return null; } else { throw new Error(response.status + ' ' + response.statusText); } } return response.json(); }).then(function(json) { if (!gEditor) { gEditor = CodeMirror.fromTextArea(document.getElementById("editor"), { 'theme': 'base16-dark', 'lineNumbers': true, 'tabSize': 4, 'indentUnit': 4, 'indentWithTabs': true, 'showTrailingSpace': true, 'gutters': ['CodeMirror-lint-markers'], 'mode': {'js': 'javascript'}[(path || url()).split('.').pop()], 'lint': { 'options': { 'esversion': 2021, }, }, }); gEditor.on('changes', function() { updateFiles(); }); } gFiles = {}; let isApp = false; let promises = []; if (json && json['type'] == 'tildefriends-app') { isApp = true; Object.keys(json['files']).forEach(function(name) { gFiles[name] = {}; promises.push(loadFile(name, json['files'][name])); }); if (Object.keys(json['files']).length == 0) { document.getElementById("editPane").style.display = 'flex'; } gApp = json; gApp.emoji = gApp.emoji || '๐Ÿ“ฆ'; document.getElementById('icon').value = gApp.emoji; } if (!isApp) { document.getElementById("editPane").style.display = 'flex'; let text = '// New script.\n'; gCurrentFile = 'app.js'; gFiles[gCurrentFile] = { doc: new CodeMirror.Doc(text, guessMode(gCurrentFile)), }; openFile(gCurrentFile); } return Promise.all(promises); }); } function closeEditor() { window.localStorage.setItem('editing', '0'); document.getElementById("editPane").style.display = 'none'; if (gSplit) { gSplit.destroy(); gSplit = undefined; } } function explodePath() { return /^\/~([^\/]+)\/([^\/]+)(.*)/.exec(window.location.pathname); } function save(save_to) { document.getElementById("save").disabled = true; if (gCurrentFile) { gFiles[gCurrentFile].doc = gEditor.getDoc(); } let save_path = save_to; if (!save_path) { let name = document.getElementById("name"); if (name && name.value) { save_path = name.value; } else { save_path = url(); } } let promises = []; for (let name of Object.keys(gFiles)) { let file = gFiles[name]; if (file.doc.isClean(file.generation)) { continue; } delete file.id; promises.push(fetch('/save', { method: 'POST', headers: { 'Content-Type': 'text/plain', }, body: file.doc.getValue(), }).then(function(response) { if (!response.ok) { throw new Error('Saving "' + name + '": ' + response.status + ' ' + response.statusText); } return response.text(); }).then(function(text) { file.id = text; if (file.id.charAt(0) == '/') { file.id = file.id.substr(1); } })); } return Promise.all(promises).then(function() { let app = { type: "tildefriends-app", files: Object.fromEntries(Object.keys(gFiles).map(x => [x, gFiles[x].id || gApp.files[x]])), emoji: gApp.emoji || '๐Ÿ“ฆ', }; Object.values(gFiles).forEach(function(file) { delete file.id; }); gApp = JSON.parse(JSON.stringify(app)); return fetch(save_path + 'save', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(app), }).then(function(response) { if (!response.ok) { throw new Error(response.status + ' ' + response.statusText); } if (save_path != window.location.pathname) { alert('Saved to ' + save_path + '.'); } else { reconnect(save_path); } }); }).catch(function(error) { alert(error); }).finally(function() { document.getElementById("save").disabled = false; Object.values(gFiles).forEach(function(file) { file.generation = file.doc.changeGeneration(); }); updateFiles(); }); } function changeIcon() { let value = prompt('Enter a new app icon emoji:'); if (value !== undefined) { gApp.emoji = value || '๐Ÿ“ฆ'; document.getElementById('icon').value = gApp.emoji; } } function deleteApp() { let name = document.getElementById("name"); let path = name && name.value ? name.value : url(); if (confirm(`Are you sure you want to delete the app '${path}'?`)) { fetch(path + 'delete').then(function(response) { if (!response.ok) { throw new Error(response.status + ' ' + response.statusText); } alert('Deleted.'); }).catch(function(error) { alert(error); }); } } function url() { let hash = window.location.href.indexOf('#'); let question = window.location.href.indexOf('?'); let end = -1; if (hash != -1 && (hash < end || end == -1)) { end = hash; } if (question != -1 && (question < end || end == -1)) { end = question; } return end != -1 ? window.location.href.substring(0, end) : window.location.href; } function hash() { return window.location.hash != "#" ? window.location.hash : ""; } function api_setDocument(content) { let iframe = document.getElementById("document"); iframe.srcdoc = content; } function api_postMessage(message) { let iframe = document.getElementById("document"); iframe.contentWindow.postMessage(message, "*"); } function api_error(error) { if (error) { if (typeof(error) == 'string') { setStatusMessage('โš ๏ธ ' + error, '#f00'); } else { setStatusMessage('โš ๏ธ ' + error.message + '\n' + error.stack, '#f00'); } } console.log('error', error); } function api_localStorageSet(key, value) { window.localStorage.setItem('app:' + key, value); } function api_localStorageGet(key) { return window.localStorage.getItem('app:' + key); } function api_requestPermission(permission, id) { let outer = document.createElement('div'); outer.classList.add('permissions'); let container = document.createElement('div'); container.classList.add('permissions_contents'); let div = document.createElement('div'); div.appendChild(document.createTextNode('This app is requesting the following permission:')); let span = document.createElement('span'); span.style = 'font-weight: bold'; span.appendChild(document.createTextNode(permission)); div.appendChild(span); container.appendChild(div); div = document.createElement('div'); div.style = 'padding: 1em'; let check = document.createElement('input'); check.id = 'permissions_remember_check'; check.type = 'checkbox'; div.appendChild(check); let label = document.createElement('label'); label.htmlFor = check.id; label.appendChild(document.createTextNode('Remember this decision.')); div.appendChild(label); container.appendChild(div); const k_options = [ { id: 'allow', text: 'โœ… Allow', grant: ['allow once', 'allow'], }, { id: 'deny', text: 'โŒ Deny', grant: ['deny once', 'deny'], }, ]; return new Promise(function(resolve, reject) { div = document.createElement('div'); for (let option of k_options) { let button = document.createElement('button'); button.innerText = option.text; button.id = option.id; button.onclick = function() { resolve(option.grant[check.checked ? 1 : 0]); document.body.removeChild(outer); } div.appendChild(button); } container.appendChild(div); outer.appendChild(container); document.body.appendChild(outer); }); } function api_print() { console.log('app>', ...arguments); } function api_setHash(hash) { window.location.hash = hash; } function _receive_websocket_message(message) { if (message && message.action == "session") { setStatusMessage("๐ŸŸข Executing...", kStatusColor); document.getElementsByTagName('tf-navigation')[0].credentials = message.credentials; } else if (message && message.action == 'permissions') { document.getElementsByTagName('tf-navigation')[0].permissions = message.permissions ?? {}; } else if (message && message.action == "ready") { setStatusMessage(null); if (window.location.hash) { send({event: "hashChange", hash: window.location.hash}); } document.getElementsByTagName('tf-navigation')[0].version = message.version; send({action: 'enableStats', enabled: true}); } else if (message && message.action == "ping") { send({action: "pong"}); } else if (message && message.action == "stats") { let now = new Date().getTime(); for (let key of Object.keys(message.stats)) { const k_groups = { rpc_in: {group: 'rpc', name: 'in'}, rpc_out: {group: 'rpc', name: 'out'}, cpu_percent: {group: 'cpu', name: 'main'}, thread_percent: {group: 'cpu', name: 'work'}, arena_percent: {group: 'memory', name: 'm'}, js_malloc_percent: {group: 'memory', name: 'js'}, memory_percent: {group: 'memory', name: 'tot'}, sqlite3_memory_percent: {group: 'memory', name: 'sql'}, tf_malloc_percent: {group: 'memory', name: 'tf'}, tls_malloc_percent: {group: 'memory', name: 'tls'}, uv_malloc_percent: {group: 'memory', name: 'uv'}, messages_stored: {group: 'store', name: 'messages'}, blobs_stored: {group: 'store', name: 'blobs'}, socket_count: {group: 'socket', name: 'total'}, socket_open_count: {group: 'socket', name: 'open'}, import_count: {group: 'functions', name: 'imports'}, export_count: {group: 'functions', name: 'exports'}, }; const k_colors = ['#0f0', '#88f', '#ff0', '#f0f', '#0ff', '#f00', '#888']; let graph_key = k_groups[key]?.group || key; if (graph_key == 'cpu' || graph_key == 'rpc' || graph_key == 'store') { let line = document.getElementsByTagName('tf-navigation')[0].get_spark_line(graph_key, { max: 100 }); line.dataset.emoji = { 'cpu': '๐Ÿ’ป', 'rpc': '๐Ÿ”', 'store': '๐Ÿ’พ', }[graph_key]; line.append(key, message.stats[key]); } } } else if (message && message.message === 'tfrpc' && message.method) { let api = k_api[message.method]; let id = message.id; let params = message.params; if (api) { Promise.resolve(api.func(...params)).then(function(result) { send({ message: 'tfrpc', id: id, result: result, }); }).catch(function(error) { send({ message: 'tfrpc', id: id, error: error, }); }); } } } function setStatusMessage(message, color) { document.getElementsByTagName('tf-navigation')[0].status = {message: message, color: color}; } function send(value) { try { if (gSocket && gSocket.readyState == gSocket.OPEN) { gSocket.send(JSON.stringify(value)); } } catch (error) { setStatusMessage('๐Ÿคท Send failed: ' + error.toString(), kErrorColor); } } function fixImage(sourceData, maxWidth, maxHeight, callback) { let result = sourceData; let image = new Image(); image.crossOrigin = "anonymous"; image.referrerPolicy = "no-referrer"; image.onload = function() { if (image.width > maxWidth || image.height > maxHeight) { let downScale = Math.min(maxWidth / image.width, maxHeight / image.height); let canvas = document.createElement("canvas"); canvas.width = image.width * downScale; canvas.height = image.height * downScale; let context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); image.width = canvas.width; image.height = canvas.height; context.drawImage(image, 0, 0, image.width, image.height); result = canvas.toDataURL(); } callback(result); }; image.src = sourceData; } function sendImage(image) { fixImage(image, 320, 240, function(result) { send({image: result}); }); } function hashChange() { send({event: 'hashChange', hash: window.location.hash}); } function focus() { if (gSocket && gSocket.readyState == gSocket.CLOSED) { connectSocket(); } else { send({event: "focus"}); } } function blur() { if (gSocket && gSocket.readyState == gSocket.OPEN) { send({event: "blur"}); } } function message(event) { if (event.data && event.data.event == "resizeMe" && event.data.width && event.data.height) { let iframe = document.getElementById("iframe_" + event.data.name); iframe.setAttribute("width", event.data.width); iframe.setAttribute("height", event.data.height); } else if (event.data && event.data.action == "setHash") { window.location.hash = event.data.hash; } else if (event.data && event.data.action == 'storeBlob') { fetch('/save', { method: 'POST', headers: { 'Content-Type': 'application/binary', }, body: event.data.blob.buffer, }).then(function(response) { if (!response.ok) { throw new Error(response.status + ' ' + response.statusText); } return response.text(); }).then(function(text) { let iframe = document.getElementById("document"); iframe.contentWindow.postMessage({'storeBlobComplete': {name: event.data.blob.name, path: text, type: event.data.blob.type, context: event.data.context}}, '*'); }); } else { send({event: "message", message: event.data}); } } function reconnect(path) { let oldSocket = gSocket; gSocket = null if (oldSocket) { oldSocket.onopen = null; oldSocket.onclose = null; oldSocket.onmessage = null; oldSocket.close(); } connectSocket(path); } function connectSocket(path) { if (!gSocket || gSocket.readyState != gSocket.OPEN) { if (gSocket) { gSocket.onopen = null; gSocket.onclose = null; gSocket.onmessage = null; gSocket.close(); } setStatusMessage("โšช Connecting...", kStatusColor); gSocket = new WebSocket( (window.location.protocol == "https:" ? "wss://" : "ws://") + window.location.hostname + (window.location.port.length ? ":" + window.location.port : "") + "/app/socket"); gSocket.onopen = function() { setStatusMessage("๐ŸŸก Authenticating...", kStatusColor); let connect_path = path ?? window.location.pathname; gSocket.send(JSON.stringify({ action: "hello", path: connect_path, url: window.location.href, api: Object.entries(k_api).map(([key, value]) => [].concat([key], value.args)), })); } gSocket.onmessage = function(event) { _receive_websocket_message(JSON.parse(event.data)); } gSocket.onclose = function(event) { const k_codes = { 1000: 'Normal closure', 1001: 'Going away', 1002: 'Protocol error', 1003: 'Unsupported data', 1005: 'No status received', 1006: 'Abnormal closure', 1007: 'Invalid frame payload data', 1008: 'Policy violation', 1009: 'Message too big', 1010: 'Missing extension', 1011: 'Internal error', 1012: 'Service restart', 1013: 'Try again later', 1014: 'Bad gateway', 1015: 'TLS handshake', }; setStatusMessage("๐Ÿ”ด Closed: " + (k_codes[event.code] || event.code), kErrorColor); } } } function openFile(name) { let newDoc = (name && gFiles[name]) ? gFiles[name].doc : new CodeMirror.Doc("", guessMode(name)); let oldDoc = gEditor.swapDoc(newDoc); if (gFiles[gCurrentFile]) { gFiles[gCurrentFile].doc = oldDoc; } gCurrentFile = name; updateFiles(); gEditor.focus(); } function updateFiles() { let files = document.getElementsByTagName("tf-files-pane")[0]; if (files) { files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, { clean: gFiles[file].doc.isClean(gFiles[file].generation), }])); files.current = gCurrentFile; } gEditor.focus(); } function makeNewFile(name) { gFiles[name] = { doc: new CodeMirror.Doc("", guessMode(name)), generation: -1, }; openFile(name); } function newFile() { let name = prompt("Name of new file:", "file.js"); if (name && !gFiles[name]) { makeNewFile(name); } } function removeFile() { if (confirm("Remove " + gCurrentFile + "?")) { delete gFiles[gCurrentFile]; openFile(Object.keys(gFiles)[0]); } } window.addEventListener("load", function() { window.addEventListener("hashchange", hashChange); window.addEventListener("focus", focus); window.addEventListener("blur", blur); window.addEventListener("message", message, false); window.addEventListener("online", connectSocket); document.getElementById("name").value = window.location.pathname; document.getElementById('closeEditor').addEventListener('click', () => closeEditor()); document.getElementById('save').addEventListener('click', () => save()); document.getElementById('icon').addEventListener('click', () => changeIcon()); document.getElementById('delete').addEventListener('click', () => deleteApp()); document.getElementById('trace_button').addEventListener('click', function(event) { event.preventDefault(); trace(); }); for (let tag of document.getElementsByTagName('a')) { if (tag.accessKey) { tag.classList.add('tooltip_parent'); let tooltip = document.createElement('div'); tooltip.classList.add('tooltip'); if (tag.dataset.tip) { let description = document.createElement('div'); description.innerText = tag.dataset.tip; tooltip.appendChild(description); } let parts = tag.accessKeyLabel ? tag.accessKeyLabel.split('+') : []; for (let i = 0; i < parts.length; i++) { let key = parts[i]; let kbd = document.createElement('kbd'); kbd.innerText = key; tooltip.appendChild(kbd); if (i < parts.length - 1) { tooltip.appendChild(document.createTextNode('+')); } } tag.appendChild(tooltip); } } connectSocket(window.location.pathname); if (window.localStorage.getItem('editing') == '1') { edit(); } else { closeEditor(); } });