From c8f1c4683f69d0e62855ef2747d5e9d415a0cd1b Mon Sep 17 00:00:00 2001 From: Adrien Pyke Date: Wed, 11 Sep 2019 18:51:34 -0400 Subject: [PATCH 1/7] fix font-family --- webview/index.js | 128 ++++++++++++++++++++++++----------------------- 1 file changed, 66 insertions(+), 62 deletions(-) diff --git a/webview/index.js b/webview/index.js index 1b4ae9e..8dd1028 100644 --- a/webview/index.js +++ b/webview/index.js @@ -1,28 +1,29 @@ ;(function() { const vscode = acquireVsCodeApi() - let target = 'container' + let target = "container" let transparentBackground = false - let backgroundColor = '#f2f2f2' + let backgroundColor = "#f2f2f2" + let fontFamily vscode.postMessage({ - type: 'getAndUpdateCacheAndSettings' + type: "getAndUpdateCacheAndSettings" }) - const snippetNode = document.getElementById('snippet') - const snippetContainerNode = document.getElementById('snippet-container') - const obturateur = document.getElementById('save') + const snippetNode = document.getElementById("snippet") + const snippetContainerNode = document.getElementById("snippet-container") + const obturateur = document.getElementById("save") - snippetContainerNode.style.opacity = '1' - const oldState = vscode.getState(); + snippetContainerNode.style.opacity = "1" + const oldState = vscode.getState() if (oldState && oldState.innerHTML) { snippetNode.innerHTML = oldState.innerHTML } - const getInitialHtml = fontFamily => { + const getInitialHtml = () => { const cameraWithFlashEmoji = String.fromCodePoint(128248) const monoFontStack = `${fontFamily},SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace` - return `
console.log('0. Run command \`Polacode ${cameraWithFlashEmoji}\`')
console.log('1. Copy some code')
console.log('2. Paste into Polacode view')
console.log('3. Click the button ${cameraWithFlashEmoji}')
` + return `
console.log('0. Run command \`Polacode ${cameraWithFlashEmoji}\`')
console.log('1. Copy some code')
console.log('2. Paste into Polacode view')
console.log('3. Click the button ${cameraWithFlashEmoji}')
` } const serializeBlob = (blob, cb) => { @@ -30,7 +31,7 @@ fileReader.onload = () => { const bytes = new Uint8Array(fileReader.result) - cb(Array.from(bytes).join(',')) + cb(Array.from(bytes).join(",")) } function getBrightness(color) { const rgb = this.toRgb() @@ -42,7 +43,7 @@ function shoot(serializedBlob) { vscode.postMessage({ - type: 'shoot', + type: "shoot", data: { serializedBlob } @@ -61,23 +62,23 @@ } function getSnippetBgColor(html) { const match = html.match(/background-color: (#[a-fA-F0-9]+)/) - return match ? match[1] : undefined; + return match ? match[1] : undefined } function updateEnvironment(snippetBgColor) { // update snippet bg color - document.getElementById('snippet').style.backgroundColor = snippetBgColor + document.getElementById("snippet").style.backgroundColor = snippetBgColor // update backdrop color if (isDark(snippetBgColor)) { - snippetContainerNode.style.backgroundColor = '#f2f2f2' + snippetContainerNode.style.backgroundColor = "#f2f2f2" } else { - snippetContainerNode.style.background = 'none' + snippetContainerNode.style.background = "none" } } function getMinIndent(code) { - const arr = code.split('\n') + const arr = code.split("\n") let minIndentCount = Number.MAX_VALUE for (let i = 0; i < arr.length; i++) { @@ -93,24 +94,27 @@ } function stripInitialIndent(html, indent) { - const doc = new DOMParser().parseFromString(html, 'text/html') - const initialSpans = doc.querySelectorAll('div > div span:first-child') + const doc = new DOMParser().parseFromString(html, "text/html") + const initialSpans = doc.querySelectorAll("div > div span:first-child") for (let i = 0; i < initialSpans.length; i++) { initialSpans[i].textContent = initialSpans[i].textContent.slice(indent) } return doc.body.innerHTML } - document.addEventListener('paste', e => { - const innerHTML = e.clipboardData.getData('text/html') + document.addEventListener("paste", e => { + var div = document.createElement("div") + div.innerHTML = e.clipboardData.getData("text/html") + div.querySelector("div").style.fontFamily = fontFamily + const innerHTML = div.innerHTML - const code = e.clipboardData.getData('text/plain') + const code = e.clipboardData.getData("text/plain") const minIndent = getMinIndent(code) const snippetBgColor = getSnippetBgColor(innerHTML) if (snippetBgColor) { vscode.postMessage({ - type: 'updateBgColor', + type: "updateBgColor", data: { bgColor: snippetBgColor } @@ -127,9 +131,9 @@ vscode.setState({ innerHTML }) }) - obturateur.addEventListener('click', () => { - if (target === 'container') { - shootAll() + obturateur.addEventListener("click", () => { + if (target === "container") { + shootAll() } else { shootSnippet() } @@ -142,19 +146,19 @@ width, height, style: { - transform: 'scale(2)', - 'transform-origin': 'center', + transform: "scale(2)", + "transform-origin": "center", background: getRgba(backgroundColor, transparentBackground) } } // Hide resizer before capture - snippetNode.style.resize = 'none' - snippetContainerNode.style.resize = 'none' + snippetNode.style.resize = "none" + snippetContainerNode.style.resize = "none" domtoimage.toBlob(snippetContainerNode, config).then(blob => { - snippetNode.style.resize = '' - snippetContainerNode.style.resize = '' + snippetNode.style.resize = "" + snippetContainerNode.style.resize = "" serializeBlob(blob, serializedBlob => { shoot(serializedBlob) }) @@ -168,20 +172,20 @@ width, height, style: { - transform: 'scale(2)', - 'transform-origin': 'center', + transform: "scale(2)", + "transform-origin": "center", padding: 0, - background: 'none' + background: "none" } } // Hide resizer before capture - snippetNode.style.resize = 'none' - snippetContainerNode.style.resize = 'none' + snippetNode.style.resize = "none" + snippetContainerNode.style.resize = "none" domtoimage.toBlob(snippetContainerNode, config).then(blob => { - snippetNode.style.resize = '' - snippetContainerNode.style.resize = '' + snippetNode.style.resize = "" + snippetContainerNode.style.resize = "" serializeBlob(blob, serializedBlob => { shoot(serializedBlob) }) @@ -190,62 +194,62 @@ let isInAnimation = false - obturateur.addEventListener('mouseover', () => { + obturateur.addEventListener("mouseover", () => { if (!isInAnimation) { isInAnimation = true new Vivus( - 'save', + "save", { duration: 40, onReady: () => { - obturateur.className = 'obturateur filling' + obturateur.className = "obturateur filling" } }, () => { setTimeout(() => { isInAnimation = false - obturateur.className = 'obturateur' + obturateur.className = "obturateur" }, 700) } ) } }) - window.addEventListener('message', e => { + window.addEventListener("message", e => { if (e) { - if (e.data.type === 'init') { - const { fontFamily, bgColor } = e.data + if (e.data.type === "init") { + const { fontFamily: ff, bgColor } = e.data + fontFamily = ff - const initialHtml = getInitialHtml(fontFamily) + const initialHtml = getInitialHtml() snippetNode.innerHTML = initialHtml vscode.setState({ innerHTML: initialHtml }) // update backdrop color, using bgColor from last pasted snippet // cannot deduce from initialHtml since it's always using Nord color if (isDark(bgColor)) { - snippetContainerNode.style.backgroundColor = '#f2f2f2' + snippetContainerNode.style.backgroundColor = "#f2f2f2" } else { - snippetContainerNode.style.background = 'none' + snippetContainerNode.style.background = "none" } - - } else if (e.data.type === 'update') { - document.execCommand('paste') - } else if (e.data.type === 'restore') { + } else if (e.data.type === "update") { + document.execCommand("paste") + } else if (e.data.type === "restore") { snippetNode.innerHTML = e.data.innerHTML updateEnvironment(e.data.bgColor) - } else if (e.data.type === 'restoreBgColor') { + } else if (e.data.type === "restoreBgColor") { updateEnvironment(e.data.bgColor) - } else if (e.data.type === 'updateSettings') { + } else if (e.data.type === "updateSettings") { snippetNode.style.boxShadow = e.data.shadow target = e.data.target transparentBackground = e.data.transparentBackground snippetContainerNode.style.backgroundColor = e.data.backgroundColor backgroundColor = e.data.backgroundColor if (e.data.ligature) { - snippetNode.style.fontVariantLigatures = 'normal' + snippetNode.style.fontVariantLigatures = "normal" } else { - snippetNode.style.fontVariantLigatures = 'none' + snippetNode.style.fontVariantLigatures = "none" } } } @@ -253,10 +257,10 @@ })() function getRgba(hex, transparentBackground) { - const bigint = parseInt(hex.slice(1), 16); - const r = (bigint >> 16) & 255; - const g = (bigint >> 8) & 255; - const b = bigint & 255; + const bigint = parseInt(hex.slice(1), 16) + const r = (bigint >> 16) & 255 + const g = (bigint >> 8) & 255 + const b = bigint & 255 const a = transparentBackground ? 0 : 1 return `rgba(${r}, ${g}, ${b}, ${a})` -} \ No newline at end of file +} From 8e0d3df1058e9e6d432ddcf681beb49c7c5ea246 Mon Sep 17 00:00:00 2001 From: Adrien Pyke Date: Wed, 11 Sep 2019 18:53:47 -0400 Subject: [PATCH 2/7] double quote --- webview/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webview/index.js b/webview/index.js index 8dd1028..3131843 100644 --- a/webview/index.js +++ b/webview/index.js @@ -264,3 +264,4 @@ function getRgba(hex, transparentBackground) { const a = transparentBackground ? 0 : 1 return `rgba(${r}, ${g}, ${b}, ${a})` } + From 187ebc236b48b261a5ebb6ce25b220fbdbf53b3f Mon Sep 17 00:00:00 2001 From: Adrien Pyke Date: Wed, 11 Sep 2019 18:53:59 -0400 Subject: [PATCH 3/7] fix eol --- webview/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/webview/index.js b/webview/index.js index 3131843..8dd1028 100644 --- a/webview/index.js +++ b/webview/index.js @@ -264,4 +264,3 @@ function getRgba(hex, transparentBackground) { const a = transparentBackground ? 0 : 1 return `rgba(${r}, ${g}, ${b}, ${a})` } - From a2ab7e67ccbf36884650fea8ed08972af5797bd6 Mon Sep 17 00:00:00 2001 From: Adrien Pyke Date: Wed, 11 Sep 2019 18:56:28 -0400 Subject: [PATCH 4/7] format From 350cedc2d01958d1285a369bb4eb55c164b4944f Mon Sep 17 00:00:00 2001 From: Adrien Pyke Date: Wed, 11 Sep 2019 18:57:23 -0400 Subject: [PATCH 5/7] format --- webview/index.js | 102 +++++++++++++++++++++++------------------------ 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/webview/index.js b/webview/index.js index 8dd1028..97620b7 100644 --- a/webview/index.js +++ b/webview/index.js @@ -1,20 +1,20 @@ ;(function() { const vscode = acquireVsCodeApi() - let target = "container" + let target = 'container' let transparentBackground = false - let backgroundColor = "#f2f2f2" + let backgroundColor = '#f2f2f2' let fontFamily vscode.postMessage({ - type: "getAndUpdateCacheAndSettings" + type: 'getAndUpdateCacheAndSettings' }) - const snippetNode = document.getElementById("snippet") - const snippetContainerNode = document.getElementById("snippet-container") - const obturateur = document.getElementById("save") + const snippetNode = document.getElementById('snippet') + const snippetContainerNode = document.getElementById('snippet-container') + const obturateur = document.getElementById('save') - snippetContainerNode.style.opacity = "1" + snippetContainerNode.style.opacity = '1' const oldState = vscode.getState() if (oldState && oldState.innerHTML) { snippetNode.innerHTML = oldState.innerHTML @@ -31,7 +31,7 @@ fileReader.onload = () => { const bytes = new Uint8Array(fileReader.result) - cb(Array.from(bytes).join(",")) + cb(Array.from(bytes).join(',')) } function getBrightness(color) { const rgb = this.toRgb() @@ -43,7 +43,7 @@ function shoot(serializedBlob) { vscode.postMessage({ - type: "shoot", + type: 'shoot', data: { serializedBlob } @@ -67,18 +67,18 @@ function updateEnvironment(snippetBgColor) { // update snippet bg color - document.getElementById("snippet").style.backgroundColor = snippetBgColor + document.getElementById('snippet').style.backgroundColor = snippetBgColor // update backdrop color if (isDark(snippetBgColor)) { - snippetContainerNode.style.backgroundColor = "#f2f2f2" + snippetContainerNode.style.backgroundColor = '#f2f2f2' } else { - snippetContainerNode.style.background = "none" + snippetContainerNode.style.background = 'none' } } function getMinIndent(code) { - const arr = code.split("\n") + const arr = code.split('\n') let minIndentCount = Number.MAX_VALUE for (let i = 0; i < arr.length; i++) { @@ -94,27 +94,27 @@ } function stripInitialIndent(html, indent) { - const doc = new DOMParser().parseFromString(html, "text/html") - const initialSpans = doc.querySelectorAll("div > div span:first-child") + const doc = new DOMParser().parseFromString(html, 'text/html') + const initialSpans = doc.querySelectorAll('div > div span:first-child') for (let i = 0; i < initialSpans.length; i++) { initialSpans[i].textContent = initialSpans[i].textContent.slice(indent) } return doc.body.innerHTML } - document.addEventListener("paste", e => { - var div = document.createElement("div") - div.innerHTML = e.clipboardData.getData("text/html") - div.querySelector("div").style.fontFamily = fontFamily + document.addEventListener('paste', e => { + var div = document.createElement('div') + div.innerHTML = e.clipboardData.getData('text/html') + div.querySelector('div').style.fontFamily = fontFamily const innerHTML = div.innerHTML - const code = e.clipboardData.getData("text/plain") + const code = e.clipboardData.getData('text/plain') const minIndent = getMinIndent(code) const snippetBgColor = getSnippetBgColor(innerHTML) if (snippetBgColor) { vscode.postMessage({ - type: "updateBgColor", + type: 'updateBgColor', data: { bgColor: snippetBgColor } @@ -131,8 +131,8 @@ vscode.setState({ innerHTML }) }) - obturateur.addEventListener("click", () => { - if (target === "container") { + obturateur.addEventListener('click', () => { + if (target === 'container') { shootAll() } else { shootSnippet() @@ -146,19 +146,19 @@ width, height, style: { - transform: "scale(2)", - "transform-origin": "center", + transform: 'scale(2)', + 'transform-origin': 'center', background: getRgba(backgroundColor, transparentBackground) } } // Hide resizer before capture - snippetNode.style.resize = "none" - snippetContainerNode.style.resize = "none" + snippetNode.style.resize = 'none' + snippetContainerNode.style.resize = 'none' domtoimage.toBlob(snippetContainerNode, config).then(blob => { - snippetNode.style.resize = "" - snippetContainerNode.style.resize = "" + snippetNode.style.resize = '' + snippetContainerNode.style.resize = '' serializeBlob(blob, serializedBlob => { shoot(serializedBlob) }) @@ -172,20 +172,20 @@ width, height, style: { - transform: "scale(2)", - "transform-origin": "center", + transform: 'scale(2)', + 'transform-origin': 'center', padding: 0, - background: "none" + background: 'none' } } // Hide resizer before capture - snippetNode.style.resize = "none" - snippetContainerNode.style.resize = "none" + snippetNode.style.resize = 'none' + snippetContainerNode.style.resize = 'none' domtoimage.toBlob(snippetContainerNode, config).then(blob => { - snippetNode.style.resize = "" - snippetContainerNode.style.resize = "" + snippetNode.style.resize = '' + snippetContainerNode.style.resize = '' serializeBlob(blob, serializedBlob => { shoot(serializedBlob) }) @@ -194,31 +194,31 @@ let isInAnimation = false - obturateur.addEventListener("mouseover", () => { + obturateur.addEventListener('mouseover', () => { if (!isInAnimation) { isInAnimation = true new Vivus( - "save", + 'save', { duration: 40, onReady: () => { - obturateur.className = "obturateur filling" + obturateur.className = 'obturateur filling' } }, () => { setTimeout(() => { isInAnimation = false - obturateur.className = "obturateur" + obturateur.className = 'obturateur' }, 700) } ) } }) - window.addEventListener("message", e => { + window.addEventListener('message', e => { if (e) { - if (e.data.type === "init") { + if (e.data.type === 'init') { const { fontFamily: ff, bgColor } = e.data fontFamily = ff @@ -229,27 +229,27 @@ // update backdrop color, using bgColor from last pasted snippet // cannot deduce from initialHtml since it's always using Nord color if (isDark(bgColor)) { - snippetContainerNode.style.backgroundColor = "#f2f2f2" + snippetContainerNode.style.backgroundColor = '#f2f2f2' } else { - snippetContainerNode.style.background = "none" + snippetContainerNode.style.background = 'none' } - } else if (e.data.type === "update") { - document.execCommand("paste") - } else if (e.data.type === "restore") { + } else if (e.data.type === 'update') { + document.execCommand('paste') + } else if (e.data.type === 'restore') { snippetNode.innerHTML = e.data.innerHTML updateEnvironment(e.data.bgColor) - } else if (e.data.type === "restoreBgColor") { + } else if (e.data.type === 'restoreBgColor') { updateEnvironment(e.data.bgColor) - } else if (e.data.type === "updateSettings") { + } else if (e.data.type === 'updateSettings') { snippetNode.style.boxShadow = e.data.shadow target = e.data.target transparentBackground = e.data.transparentBackground snippetContainerNode.style.backgroundColor = e.data.backgroundColor backgroundColor = e.data.backgroundColor if (e.data.ligature) { - snippetNode.style.fontVariantLigatures = "normal" + snippetNode.style.fontVariantLigatures = 'normal' } else { - snippetNode.style.fontVariantLigatures = "none" + snippetNode.style.fontVariantLigatures = 'none' } } } From 1b8f598d46a84ffdf8e0ecc4eeb3c31ca8661201 Mon Sep 17 00:00:00 2001 From: Adrien Pyke Date: Wed, 11 Sep 2019 19:02:54 -0400 Subject: [PATCH 6/7] Re add meta --- webview/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview/index.js b/webview/index.js index 97620b7..bb3870e 100644 --- a/webview/index.js +++ b/webview/index.js @@ -23,7 +23,7 @@ const getInitialHtml = () => { const cameraWithFlashEmoji = String.fromCodePoint(128248) const monoFontStack = `${fontFamily},SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace` - return `
console.log('0. Run command \`Polacode ${cameraWithFlashEmoji}\`')
console.log('1. Copy some code')
console.log('2. Paste into Polacode view')
console.log('3. Click the button ${cameraWithFlashEmoji}')
` + return `
console.log('0. Run command \`Polacode ${cameraWithFlashEmoji}\`')
console.log('1. Copy some code')
console.log('2. Paste into Polacode view')
console.log('3. Click the button ${cameraWithFlashEmoji}')
` } const serializeBlob = (blob, cb) => { From 87a0d001456bfa7674b5423af292c73ab4534c99 Mon Sep 17 00:00:00 2001 From: Adrien Pyke Date: Mon, 23 Sep 2019 15:38:44 -0400 Subject: [PATCH 7/7] minor cleanup --- webview/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/webview/index.js b/webview/index.js index bb3870e..c07e6c7 100644 --- a/webview/index.js +++ b/webview/index.js @@ -20,9 +20,10 @@ snippetNode.innerHTML = oldState.innerHTML } - const getInitialHtml = () => { + const getInitialHtml = ff => { const cameraWithFlashEmoji = String.fromCodePoint(128248) - const monoFontStack = `${fontFamily},SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace` + const monoFontStack = `${ff},SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace` + fontFamily = monoFontStack return `
console.log('0. Run command \`Polacode ${cameraWithFlashEmoji}\`')
console.log('1. Copy some code')
console.log('2. Paste into Polacode view')
console.log('3. Click the button ${cameraWithFlashEmoji}')
` } @@ -103,7 +104,7 @@ } document.addEventListener('paste', e => { - var div = document.createElement('div') + const div = document.createElement('div') div.innerHTML = e.clipboardData.getData('text/html') div.querySelector('div').style.fontFamily = fontFamily const innerHTML = div.innerHTML @@ -219,10 +220,9 @@ window.addEventListener('message', e => { if (e) { if (e.data.type === 'init') { - const { fontFamily: ff, bgColor } = e.data - fontFamily = ff + const { fontFamily, bgColor } = e.data - const initialHtml = getInitialHtml() + const initialHtml = getInitialHtml(fontFamily) snippetNode.innerHTML = initialHtml vscode.setState({ innerHTML: initialHtml })