add file loader

Dinir · May 27, 2020 · 7af30ba · 7af30ba
1 parent c6dbe94
commit 7af30ba
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 29 deletions.
diff --git a/css/main.css b/css/main.css
diff --git a/css/main.css.map b/css/main.css.map
diff --git a/index.html b/index.html
@@ -138,6 +138,25 @@
       store them in the local storage of this web page.
     </span>
   </div>
+  <div class="option" data-name="custom-skin">
+    <label id="customSkinLoadArea">
+      <b>Import Custom Skin</b>
+      <span class="after-margin file-input-container">
+        <input class="visually-hidden"
+               type="file" accept="application/json,image/*" multiple>
+        <button data-name="fileSelect">Choose Files</button>
+        <span class="inactive">
+          Currently Loaded:
+          <span id="currentlyLoadedCustomSkin">Nothing</span>
+        </span>
+      </span>
+      <span class="description">
+        Upload a json and up to 4 images for the custom skin.
+        New files replace old ones.
+        Click anywhere in this area to bring the file select screen.
+      </span>
+    </label>
+  </div>
   <div>
     <div>
       <b class="inline">Mini Padder</b><sub> <span class="version"></span></sub>
@@ -166,6 +185,12 @@
   const canvas = Array.from(canvasContainer.querySelectorAll('div'))
   const cpDom = document.getElementById('control-panel')
   const cpDomSizeDescriptor = document.getElementById('displaySizeDescriptor')
+  const cpDomSkinUploader = {
+    droparea: cpDom.querySelector('#customSkinLoadArea'),
+    input: cpDom.querySelector('#customSkinLoadArea input'),
+    button: cpDom.querySelector('#customSkinLoadArea button[data-name="fileSelect"]'),
+    indicator: document.getElementById('currentlyLoadedCustomSkin')
+  }
 </script>
 
 <!-- store error logs -->
@@ -206,7 +231,8 @@
     layout: 'selectFromList',
     displayWidth: 'slider',
     fadeout: 'textArray',
-    management: 'buttons'
+    management: 'buttons',
+    customSkin: 'uploader'
   }, [
     'gamepadconnected', 'gamepaddisconnected'
   ])
@@ -292,6 +318,14 @@
       }
     }
   )
+
+  cpPanel.customSkin.assign(
+    cpDomSkinUploader.input,
+    cpDomSkinUploader.droparea,
+    cpDomSkinUploader.button,
+    f => true,
+    cpDomSkinUploader.indicator
+  )
 </script>
 
 <!-- updater -->

diff --git a/js/interface/controlPanel.js b/js/interface/controlPanel.js
@@ -35,7 +35,7 @@ class ControlPanel {
 
   static get recognizedTypes () {
     return [
-      'dynamicButtons', 'selectFromList', 'slider', 'textArray', 'buttons'
+      'dynamicButtons', 'selectFromList', 'slider', 'textArray', 'buttons', 'uploader'
     ]
   }
 
@@ -422,4 +422,55 @@ class ControlPanel {
       }
     }
   }
+
+  getControlForUploader (name) {
+    return {
+      name: name,
+      /** @type {string[]} */
+      panelValue: null,
+      applyPanelValue: function () {
+
+      },
+      assign: function (input, droparea, visibleButton, typeCheckFunction, textIndicator) {
+        this.input = input
+        this.droparea = droparea
+        this.replaceInput = Boolean(visibleButton)
+        this.button = visibleButton || null
+        this.typeCheck = typeCheckFunction
+        this.indicator = textIndicator
+
+        // receive dropped files just in case
+        this.droparea.addEventListener('dragenter', this._preventDefault, false)
+        this.droparea.addEventListener('dragover', this._preventDefault, false)
+        this.droparea.addEventListener('drop', e => {
+          this._preventDefault(e)
+          this._handleFiles(e.dataTransfer.files)
+        }, false)
+
+        this.input.addEventListener('change', e => {
+          this._preventDefault(e)
+          this._handleFiles(e.target.files)
+        })
+        if (this.replaceInput) {
+          this.button.addEventListener('click', () => {
+            this.input.click()
+          }, false)
+        }
+      },
+      _preventDefault: function (e) {
+        e.stopPropagation()
+        e.preventDefault()
+      },
+      _handleFiles: function (files) {
+        for (let i = 0; i < files.length; i++) {
+          const file = files[i]
+          const type = file.type === 'application/json' ? 'json' :
+            file.type.startsWith('image/') ? 'image' : null
+          if (!type) { continue } // do something to alert
+
+          console.log(file)
+        }
+      }
+    }
+  }
 }
diff --git a/js/module/GamepadRenderer.js b/js/module/GamepadRenderer.js
@@ -550,6 +550,8 @@ class GamepadRenderer {
     }
     this.addSkinToSkinList(dirname)
     const skin = this.skins[dirname]
+
+    // load from the hosted space
     const path = `./skin/${dirname}`
     fetch(`${path}/config.json`)
       .then(response => response.json())

diff --git a/scss/main.scss b/scss/main.scss
@@ -41,6 +41,13 @@ sub {
   font-size: x-small;
 }
 
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
 .inline {
   display: inline;
 }
@@ -105,9 +112,29 @@ sub {
     }
   }
 
+  b {
+    // control panel section name
+    display: block;
+    margin-bottom: 0.5em;
+    &.inline {
+      display: inline;
+    }
+  }
+  label {
+    display: inline-block;
+  }
+  address {
+    a {
+      color: #171717;
+    }
+  }
+
   .after-margin {
     margin-bottom: 0.25em;
   }
+  span.after-margin {
+    display: block;
+  }
   .full-width {
     display: block;
   }
@@ -129,23 +156,6 @@ sub {
     }
   }
 
-  b {
-    // control panel section name
-    display: block;
-    margin-bottom: 0.5em;
-    &.inline {
-      display: inline;
-    }
-  }
-  label {
-    display: inline-block;
-  }
-  address {
-    a {
-      color: #171717;
-    }
-  }
-
   @media (max-height: 599px) and (orientation: landscape) {
     & {
       height: auto;