Merge pull request #6

next/release

index.html

@@ -813,7 +813,10 @@ <h2>Credits</h2>
     <i class="material-icons">usb</i>
   </button>
   <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect reset">
-    <i class="material-icons">refresh</i>
+    <i class="material-icons">settings_backup_restore</i>
+  </button>
+  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect help">
+    <i class="material-icons">help_outline</i>
   </button>
 </div>
 
@@ -877,6 +880,38 @@ <h4>Controllers</h4>
   </div>
 </dialog>
 
+<!-- Help Dialog -->
+
+<dialog class="mdl-dialog" id="help">
+  <h4 class="mdl-dialog__title">
+    Help
+  </h4>
+  <div class="mdl-dialog__content">
+    <div>
+      <h4>Known Devices Drawings</h4>
+      <div>
+        <h6>Novation Launchpad X (Selector)</h6>
+        <img
+          alt="novation launchpad x drawing"
+          src="/assets/known-devices-drawings/novation-launchpad-x-drawing.svg"
+        >
+      </div>
+      <div>
+        <h6>Novation Launch Control XL (Controller)</h6>
+        <img
+          alt="novation launch control xl drawing"
+          src="/assets/known-devices-drawings/novation-launch-control-xl-drawing.svg"
+        >
+      </div>
+    </div>
+  </div>
+  <div class="mdl-dialog__actions">
+    <button class="mdl-button close-button" type="button">
+      close
+    </button>
+  </div>
+</dialog>
+
 <script src="bundle.js"></script>
 <!-- Google analytics -->
 <script src="analytics.js"></script>

package.json

@@ -6,15 +6,17 @@
   "scripts": {
     "clean": "rimraf dist",
     "start": "yarn serve-watch",
-    "prep": "copyfiles analytics.js dist && concat node_modules/material-design-lite/material.min.js node_modules/seedrandom/seedrandom.min.js > dist/lib.js",
+    "prep": "yarn clean && yarn prep:default && yarn prep:assets",
+    "prep:default": "copyfiles analytics.js dist && concat node_modules/material-design-lite/material.min.js node_modules/seedrandom/seedrandom.min.js > dist/lib.js",
+    "prep:assets": "copyfiles ./assets/**/*.svg dist",
     "build-css": "concat node_modules/material-design-lite/material.min.css styles.css > dist/bundle.css",
     "watch-css": "concat node_modules/material-design-lite/material.min.css styles.css -o dist/bundle.css",
     "build-html": "copyfiles index.html dist",
     "watch-html": "concat index.html -o dist/index.html",
     "build-js": "browserify src/playground/playground.ts -p [tsify] | uglifyjs -c > dist/bundle.js",
     "watch-js": "watchify src/playground/playground.ts -p [tsify] -v --debug -o dist/bundle.js",
     "build": "yarn prep && yarn build-js && yarn build-css && yarn build-html",
-    "watch": "yarn prep && concurrently \"yarn watch-js\" \"yarn watch-css\" \"yarn watch-html\"",
+    "watch": "yarn prep && concurrently 'yarn watch-js' 'yarn watch-css' 'yarn watch-html'",
     "serve": "npx serve dist/",
     "serve-watch": "concurrently \"npx serve dist/\" \"yarn watch\"",
     "build:archive": "./bin/archive-release.sh"

src/app/ui/buttons.ui.ts

@@ -1,5 +1,6 @@
 import { devicesUi } from './devices.ui';
 import { mappingsUi } from './mappings.ui';
+import { helpUi } from './help.ui';
 
 export const buttonsUi = Object.create (null);
 
@@ -9,6 +10,7 @@ buttonsUi.nodeSelectors = {
   devices: '.devices',
   mappings: '.mappings',
   reset: '.reset',
+  help: '.help',
 };
 
 buttonsUi.init = function () {
@@ -17,11 +19,14 @@ buttonsUi.init = function () {
   this.devices = this.node.querySelector (this.nodeSelectors.devices);
   this.mappings = this.node.querySelector (this.nodeSelectors.mappings);
   this.reset = this.node.querySelector (this.nodeSelectors.reset);
+  this.help = this.node.querySelector (this.nodeSelectors.help);
 
-  // eslint-disable-next-line no-console
-  this.settings.onclick = () => console.log ('settings');
   this.devices.onclick = () => mappingsUi.show ();
   this.mappings.onclick = () => devicesUi.show ();
+  this.help.onclick = () => helpUi.show ();
+
+  // eslint-disable-next-line no-console
+  this.settings.onclick = () => console.log ('settings');
   // eslint-disable-next-line no-console
   this.reset.onclick = () => console.log ('reset');
 };

src/app/ui/help.ui.ts

@@ -0,0 +1,51 @@
+import { dialogPrototype } from './prototypes/dialog.prototype';
+
+export const helpUi = Object.create (dialogPrototype);
+
+helpUi.nodeSelectors = {
+  node: '#help',
+  closeButton: '.close-button',
+  content: '.mdl-dialog__content',
+};
+
+helpUi.init = function () {
+  this.node = document.querySelector (this.nodeSelectors.node);
+  this.closeButton = this.node.querySelector (this.nodeSelectors.closeButton);
+  this.content = this.node.querySelector (this.nodeSelectors.content);
+  this.drawings = Array.from (this.content.children[0].children).slice (1);
+
+  this.attachEvents (this.closeButton);
+  this.renderDrawings ();
+};
+
+helpUi.hideDrawing = function (drawing) {
+  const image = drawing.querySelector ('img');
+  image.style.display = 'none';
+};
+
+helpUi.hideOtherDrawings = function (currentDrawing) {
+  const otherImages = this.drawings.filter ((d) => d !== currentDrawing);
+  otherImages.forEach ((drawing) => this.hideDrawing (drawing));
+};
+
+helpUi.renderDrawings = function () {
+  this.drawings.forEach ((drawing) => {
+    const title = drawing.querySelector ('h6');
+    const image = drawing.querySelector ('img');
+
+    // init
+    this.hideDrawing (drawing);
+    image.onclick = () => this.hideDrawing (drawing);
+
+    // on title click
+    title.onclick = () => {
+      if (image.style.display === 'none') {
+        image.style.display = 'block';
+        image.scrollIntoView ();
+        this.hideOtherDrawings (drawing);
+      } else {
+        this.hideDrawing (drawing);
+      }
+    };
+  });
+};

src/app/ui/ui.ts

@@ -3,6 +3,7 @@ import { buttonsUi } from './buttons.ui';
 import { notificationsUi } from './notifications.ui';
 import { neuronCardUi } from './neuron-card.ui';
 import { devicesUi } from './devices.ui';
+import { helpUi } from './help.ui';
 
 export const ui = Object.create (null);
 
@@ -17,6 +18,7 @@ ui.init = async function () {
   buttonsUi.init ();
   neuronCardUi.init ();
   devicesUi.init ();
+  helpUi.init ();
 
   notificationsUi.notify ('test');
 };

styles.css

@@ -1073,3 +1073,32 @@ Devices
 #devices {
   width: 650px;
 }
+
+/**
+Help Dialog
+ */
+
+#help {
+  width: 80vw;
+}
+
+#help .mdl-dialog__content h6 {
+  cursor: pointer;
+  transition: all .1s ease-in;
+}
+
+#help .mdl-dialog__content div div {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+#help .mdl-dialog__content h6:hover {
+  color: #0D658C;
+}
+
+#help .mdl-dialog__content img {
+  cursor: pointer;
+  width: 600px;
+  height: 600px;
+}