feat: add toggle preview json to copy to manifest.json (#79)

NotWoods · Aug 9, 2024 · 9972e39 · 9972e39
1 parent ca25ba2
commit 9972e39
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 2 deletions.
diff --git a/editor.html b/editor.html
@@ -195,6 +195,23 @@ <h2 id="modalTitle" tabindex="0">Export</h2>
             </label>
           </div>
 
+          <div class="row mask__json-view">
+            <details class="mask__json-view__details">
+              <summary class="mask__json-view__summary">Show JSON</summary>
+              <pre class="mask__json-view__preview">Select some size to display the JSON preview</pre>
+              <div class="mask__json-view-info">
+                Copy this JSON into the <code>"icons"</code> array of your
+                <a
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  href="https://developer.mozilla.org/en-US/docs/Web/Manifest"
+                >
+                  Web App Manifest</a
+                >
+              </div>
+            </details>
+          </div>
+
           <div class="button__row dialog-buttons">
             <button type="button" class="button--secondary toggle--export" name="cancel">Cancel</button>
             <button type="submit" class="button--primary download-button" name="download">Download</button>

diff --git a/public/css/editor.css b/public/css/editor.css
@@ -157,6 +157,59 @@ input[type='text']:disabled,
   visibility: visible;
 }
 
+.mask__json-view {
+  margin-top: 0.8rem;
+}
+
+.mask__json-view__details {
+  margin-left: 0.4rem;
+}
+
+.mask__json-view__summary {
+  list-style: none;
+  color: #165fda;
+}
+
+.dark .mask__json-view__summary {
+  color: #448aff;
+}
+
+.mask__json-view__preview {
+  background-color: #ededed;
+  border-radius: 8px;
+  font-family: monospace;
+  margin-top: 0.5rem;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.dark .mask__json-view__preview {
+  background-color: #444;
+}
+
+.mask__json-view-info {
+  font-size: 0.9rem;
+}
+
+.mask__json-view-info code {
+  background-color: #ededed;
+  padding: 2px;
+  border-radius: 4px;
+}
+
+.dark .mask__json-view-info code {
+  background-color: #444;
+}
+
+.mask__json-view-info a {
+  color: #165fda;
+}
+
+.dark .mask__json-view-info a {
+  color: #448aff;
+}
+
 @media (max-width: 56rem) {
   dark-mode-toggle {
     right: 0;

diff --git a/src/editor/export.js b/src/editor/export.js
@@ -3,9 +3,36 @@ import { toUrl } from './canvas.js';
 /** @type {HTMLFormElement} */
 const sizes = document.querySelector('#exportSizes');
 const maxSizeValue = sizes.querySelector('#maxSize');
-const sizeInputs = /** @type {NodeListOf<HTMLInputElement>} */ (
+const sizeInputs = /** @type {NodeList} */ (
   document.getElementsByName('sizes')
 );
+const jsonPreview = document.querySelector('.mask__json-view__preview');
+
+sizeInputs.forEach((inputSize) => {
+  inputSize.addEventListener('change', handleClickSizeOption);
+});
+
+/**
+ * Returns selected sizes
+ */
+function getFormSizesValues() {
+  const exportSizes = new FormData(sizes).getAll('sizes').map(toSize);
+
+  return exportSizes;
+}
+
+function handleClickSizeOption() {
+  const exportSizes = getFormSizesValues()
+    .filter((size) => !!size)
+    .map((size) => ({
+      purpose: 'maskable',
+      sizes: `${size}x${size}`,
+      src: `maskable_icon_x${size}.png`,
+      type: 'image/png',
+    }));
+
+  jsonPreview.textContent = JSON.stringify(exportSizes, null, 2);
+}
 
 /**
  * @param {File | string} value
@@ -43,7 +70,7 @@ function updateExportSizes(controller) {
  * @param {import('./canvas.js').CanvasController} controller
  */
 async function download(controller) {
-  const exportSizes = new FormData(sizes).getAll('sizes').map(toSize);
+  const exportSizes = getFormSizesValues();
 
   const exported = Promise.all(
     exportSizes.map(async (size) => {
@@ -89,5 +116,10 @@ export function setupExportDialog(controller) {
 
   return function cleanup() {
     sizes.removeEventListener('submit', handleSubmit);
+
+    jsonPreview.textContent = 'Select some size to display the JSON preview';
+
+    // reset form fields
+    sizes.reset();
   };
 }