From 1be42fc33ddf7cc8fccbba523e73a9bf89efd8b1 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 14 Oct 2024 17:23:16 +0300 Subject: [PATCH 1/4] feat: Enhance Snippet Builder #46 --- builder/index.html | 105 ++++++++++++++++++++++++++++++++++++++++++--- builder/main.css | 26 ++++++++++- builder/main.js | 68 +++++++++++++++++++++++++++++ 3 files changed, 193 insertions(+), 6 deletions(-) diff --git a/builder/index.html b/builder/index.html index 079d6bc..b2e618b 100644 --- a/builder/index.html +++ b/builder/index.html @@ -5,8 +5,8 @@ VS Code Snippets Builder - - + + Custom Snippet + + Language Snippet Scope* + + +
+

+ Language Snippet Scope
+ Determines which programming languages or file types a + snippet will appear in. +

+

+ Recommendations
+ You can select multiple scopes for your snippet e.g "javascript, html" +

+
+ + + + +
+ + + + +
+ + + +
+ Description @@ -129,7 +189,7 @@

Custom Snippet

> - + @@ -162,13 +222,48 @@

Custom Snippet

 - + + + + Import Snippet + + +
+

+ Import Snippet
+ Upload JSON snippet files directly from the computer. +

+

+

+ Recommendations
+ Ensure that the JSON snippet file adheres to the correct format, including + required fields such as name, prefix, body, and description. +

+
+ + + + + +

Custom snippet code:

-
+ 
+          
+          
+

Do you think more users would benefit from this snippet?
If so, please consider diff --git a/builder/main.css b/builder/main.css index b770b1e..8da70fe 100644 --- a/builder/main.css +++ b/builder/main.css @@ -16,8 +16,10 @@ #codePreview { float: left; padding: 1rem; + position: relative; } -textarea#body { +#desc, +#body { height: 200px; } .screenshot { @@ -61,4 +63,26 @@ calcite-popover div { } p{ font-size: .9rem; +} +pre { + position: relative; +} +#copy-button { + position: absolute; + top: 1.4em; + right: 0px; + padding: 2px 8px 2px 8px; + margin-top: 3px; + margin-right: 6px; + border-radius: 2px; + background: none; + color: #ccc; + border: none; + cursor: pointer; +} +#copy-button:hover { + background-color: #80808080; +} +#language-selection label { + margin-right: 12px; } \ No newline at end of file diff --git a/builder/main.js b/builder/main.js index 907e476..4ba97c4 100644 --- a/builder/main.js +++ b/builder/main.js @@ -1,6 +1,7 @@ let snippet = { name: "", prefix: "", + scope: [], desc: "", body: "", parse: (body) => { @@ -26,12 +27,37 @@ ${x} toString: () => { return `"${snippet.name}": { "prefix": "${snippet.prefix}", +"scope": "${Array.isArray(snippet.scope) ? snippet.scope.join(', ') : ''}", "body": ${snippet.parse(snippet.body)}, "description": "${snippet.desc}" }`; }, }; +document.querySelectorAll('#language-selection input[type="checkbox"]').forEach((checkbox) => { + checkbox.addEventListener("change", function () { + if (!Array.isArray(snippet.scope)) { + snippet.scope = []; + } + + // If the checkbox is checked, add the value to the scope array + if (this.checked) { + if (!snippet.scope.includes(this.value)) { + snippet.scope.push(this.value); + } + } else { + // If unchecked, remove the value from the scope array + const index = snippet.scope.indexOf(this.value); + if (index > -1) { + snippet.scope.splice(index, 1); + } + } + + // Render the snippet to reflect changes + renderSnippet(); + }); +}); + function renderSnippet() { document.getElementById("snippets").innerText = snippet.toString(); hljs.highlightAll(); @@ -58,11 +84,53 @@ Code: ${snippet.toString()} \`\`\` `); + document.querySelector( "calcite-button" ).href = `${repoUrl}/issues/new?title=${title}&body=${body}`; } +document.getElementById("import-snippet").addEventListener("change", (event) => { + const file = event.target.files[0]; + + if (file) { + const reader = new FileReader(); + + reader.onload = function(e) { + try { + const fileContent = e.target.result; + const snippetObject = JSON.parse(fileContent); + + const snippetDisplay = document.getElementById("snippets"); + snippetDisplay.innerText = JSON.stringify(snippetObject, null, 2); + + hljs.highlightElement(snippetDisplay); + + } catch (error) { + console.error("Failed to parse the snippet JSON: ", error); + document.getElementById("snippets").innerText = "Error parsing JSON. Please upload a valid snippet."; + } + }; + + reader.readAsText(file); + } +}); + + +const copyButton = document.getElementById("copy-button"); + +copyButton.addEventListener("click", (event) => { + event.preventDefault(); + const snippetText = snippet.toString(); + navigator.clipboard.writeText(snippetText) + .then(() => { + copyButton.textContent = "Copied"; + }) + setTimeout(() => { + copyButton.textContent = "Copy"; + }, 1000); +}); + document.querySelectorAll("calcite-input").forEach((item) => { item.addEventListener("keyup", (evt) => { snippet[evt.target.closest("calcite-input").id] = evt.target.value.replace( From 1feaa1e0d48db6751c3369cd73adf209b9ad3519 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 22 Oct 2024 13:54:52 +0300 Subject: [PATCH 2/4] feat: Enhance Snippet Builder Esri#46 --- builder/index.html | 9 +++++++- builder/main.js | 53 +++++++++++++++++++++++++++++++++------------ builder/sample.json | 10 +++++++++ 3 files changed, 57 insertions(+), 15 deletions(-) create mode 100644 builder/sample.json diff --git a/builder/index.html b/builder/index.html index b2e618b..b93eddd 100644 --- a/builder/index.html +++ b/builder/index.html @@ -254,7 +254,14 @@

Custom Snippet

- + + + + +

+ For a sample snippet file, download sample.json. +

+
diff --git a/builder/main.js b/builder/main.js index 4ba97c4..0337dcb 100644 --- a/builder/main.js +++ b/builder/main.js @@ -39,21 +39,16 @@ document.querySelectorAll('#language-selection input[type="checkbox"]').forEach( if (!Array.isArray(snippet.scope)) { snippet.scope = []; } - - // If the checkbox is checked, add the value to the scope array if (this.checked) { if (!snippet.scope.includes(this.value)) { snippet.scope.push(this.value); } } else { - // If unchecked, remove the value from the scope array const index = snippet.scope.indexOf(this.value); if (index > -1) { snippet.scope.splice(index, 1); } } - - // Render the snippet to reflect changes renderSnippet(); }); }); @@ -90,8 +85,11 @@ ${snippet.toString()} ).href = `${repoUrl}/issues/new?title=${title}&body=${body}`; } -document.getElementById("import-snippet").addEventListener("change", (event) => { - const file = event.target.files[0]; +const inputElement = document.getElementById("import-snippet"); +if (inputElement) { + inputElement.addEventListener("change", (event) => { + const file = event.target.files[0]; + console.log("Selected file:", file); if (file) { const reader = new FileReader(); @@ -99,12 +97,27 @@ document.getElementById("import-snippet").addEventListener("change", (event) => reader.onload = function(e) { try { const fileContent = e.target.result; + console.log("File content:", fileContent); + const snippetObject = JSON.parse(fileContent); - const snippetDisplay = document.getElementById("snippets"); - snippetDisplay.innerText = JSON.stringify(snippetObject, null, 2); + const firstSnippet = Object.values(snippetObject)[0]; + snippet.name = Object.keys(snippetObject)[0]; + snippet.prefix = firstSnippet.prefix; + snippet.scope = firstSnippet.scope.split(', '); + snippet.body = firstSnippet.body.join('\n'); + snippet.desc = firstSnippet.description; + + document.getElementById("name").value = snippet.name; + document.getElementById("prefix").value = snippet.prefix; + document.getElementById("desc").value = snippet.desc; + document.getElementById("body").value = snippet.body; + + document.querySelectorAll('#language-selection input[type="checkbox"]').forEach((checkbox) => { + checkbox.checked = snippet.scope.includes(checkbox.value); + }); - hljs.highlightElement(snippetDisplay); + renderSnippet(); } catch (error) { console.error("Failed to parse the snippet JSON: ", error); @@ -114,8 +127,10 @@ document.getElementById("import-snippet").addEventListener("change", (event) => reader.readAsText(file); } -}); - + }); +} else { + console.error("Element with ID 'import-snippet' not found."); +} const copyButton = document.getElementById("copy-button"); @@ -131,9 +146,19 @@ copyButton.addEventListener("click", (event) => { }, 1000); }); -document.querySelectorAll("calcite-input").forEach((item) => { +document.querySelectorAll("calcite-input:not([type='file'])").forEach((item) => { + item.addEventListener("keyup", (evt) => { + snippet[evt.target.closest("calcite-input:not([type='file'])").id] = evt.target.value.replace( + /\"/g, + '\\"' + ); + renderSnippet(); + }); +}); + +document.querySelectorAll("calcite-text-area").forEach((item) => { item.addEventListener("keyup", (evt) => { - snippet[evt.target.closest("calcite-input").id] = evt.target.value.replace( + snippet[evt.target.closest("calcite-text-area").id] = evt.target.value.replace( /\"/g, '\\"' ); diff --git a/builder/sample.json b/builder/sample.json new file mode 100644 index 0000000..601f255 --- /dev/null +++ b/builder/sample.json @@ -0,0 +1,10 @@ +{ + "A JavaScript only snippet": { + "scope": "javascript", + "prefix": "myConsoleLog", + "body": [ + "console.log(\"Hello Map\");" + ], + "description": "Console log \"Hello Map\"" + } + } \ No newline at end of file From b85fb4a8a30e5fa9c063011ed4f47200f467ac3d Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 22 Oct 2024 14:00:15 +0300 Subject: [PATCH 3/4] feat: Enhance Snippet Builder Esri#46 --- builder/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/builder/index.html b/builder/index.html index b93eddd..e33e7ef 100644 --- a/builder/index.html +++ b/builder/index.html @@ -256,8 +256,6 @@

Custom Snippet

- -

For a sample snippet file, download sample.json.

From 5fc412a55b0084eb3c30ec65adf28146f3e82833 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 22 Oct 2024 15:06:57 +0300 Subject: [PATCH 4/4] feat: Enhance Snippet Builder Esri#46 --- builder/main.js | 4 +++- builder/sample.json | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/builder/main.js b/builder/main.js index 0337dcb..460ad4f 100644 --- a/builder/main.js +++ b/builder/main.js @@ -114,7 +114,9 @@ if (inputElement) { document.getElementById("body").value = snippet.body; document.querySelectorAll('#language-selection input[type="checkbox"]').forEach((checkbox) => { - checkbox.checked = snippet.scope.includes(checkbox.value); + const scopeValues = checkbox.value.split(',').map(scope => scope.trim()); + checkbox.checked = snippet.scope.includes(checkbox.value); + checkbox.checked = scopeValues.some(scope => snippet.scope.includes(scope)); }); renderSnippet(); diff --git a/builder/sample.json b/builder/sample.json index 601f255..3bc84fc 100644 --- a/builder/sample.json +++ b/builder/sample.json @@ -1,6 +1,6 @@ { "A JavaScript only snippet": { - "scope": "javascript", + "scope": "javascript", "prefix": "myConsoleLog", "body": [ "console.log(\"Hello Map\");"