Keyboard shortcuts, arrow keys

lifeofmle · Jul 4, 2019 · 2c99e1b · 2c99e1b
1 parent d686238
commit 2c99e1b
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 948 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,10 +22,8 @@
   "devDependencies": {
     "@skpm/builder": "^0.5.11",
     "@skpm/extract-loader": "^2.0.2",
-    "btoa": "^1.2.1",
     "css-loader": "^1.0.0",
-    "html-loader": "^0.5.1",
-    "mocha-js-delegate": "^0.2.0"
+    "html-loader": "^0.5.1"
   },
   "resources": [
     "resources/**/*.js"

diff --git a/resources/style.css b/resources/style.css
@@ -42,3 +42,7 @@ input, textarea {
   height: 100%;
   overflow-y: scroll;
 }
+
+li.active {
+  font-weight: bold;
+}
diff --git a/resources/webview.html b/resources/webview.html
@@ -5,33 +5,86 @@
   <title>symbol-insert</title>
   <link rel="stylesheet" href="./style.css">
   <script>
-    function filterSymbols() {
-      // Declare variables
+    var currentFocus = -1;
+
+    function resetFocus() {
+      console.log('Reset all items');
+      var ul = document.getElementById("symbols");
+      var items = ul.getElementsByTagName('li');
+      for (var i = 0; i < items.length; i++) {
+        items[i].classList.remove("active");
+      }
+    }
+
+    function setActive() {
+      var ul = document.getElementById("symbols");
+      var items = ul.getElementsByTagName('li');
+      console.log('Current focus is now: ', currentFocus);
+      if (currentFocus >= items.length) currentFocus = (items.length - 1);
+      if (currentFocus < 0) currentFocus = 0;
+      console.log('Setting active: ', currentFocus);
+      items[currentFocus].classList.add("active");
+    }
+
+    function filterSymbols(e) {
       var input, filter, ul, li, a, i, txtValue;
+
       input = document.getElementById('symbolSearch');
+
+      if (!input.value) return;
+
       filter = input.value.toUpperCase();
       ul = document.getElementById("symbols");
-      li = ul.getElementsByTagName('li');
-
-      // Loop through all list items, and hide those who don't match the search query
-      for (i = 0; i < li.length; i++) {
-        a = li[i].getElementsByTagName("a")[0];
-        txtValue = a.textContent || a.innerText;
-        if (txtValue.toUpperCase().indexOf(filter) > -1) {
-          li[i].style.display = "";
-        } else {
-          li[i].style.display = "none";
+      items = ul.getElementsByTagName('li');
+
+      resetFocus();
+      if (e.keyCode == 40) {
+        // Down arrow
+        currentFocus++;
+        setActive();
+      } else if (e.keyCode == 38) {
+        // Up arrow
+        currentFocus--;
+        setActive();
+      } else if (e.keyCode == 13) {
+        // Enter key
+        e.preventDefault();
+        if (currentFocus > -1) {
+          var link = items[currentFocus].getElementsByClassName('symbol-link')[0];
+          if (link) {
+            link.click();
+          }
+        }
+      } else {
+        // Filter list
+        // Loop through all list items, and hide those who don't match the search query
+        for (i = 0; i < items.length; i++) {
+          a = items[i].getElementsByTagName("a")[0];
+          txtValue = a.textContent || a.innerText;
+          if (txtValue.toUpperCase().indexOf(filter) > -1) {
+            items[i].style.display = "";
+          } else {
+            items[i].style.display = "none";
+          }
         }
       }
     }
   </script>
 </head>
 <body>
   <div class="container">
-    <div>
+    <div style="display: none">
       <button id="symbolButton">Get symbols</button>
     </div>
-    <input type="text" id="symbolSearch" onkeyup="filterSymbols()" placeholder="Search for symbols..">
+    <input
+      id="symbolSearch"
+      type="text"
+      onkeydown="filterSymbols(event)"
+      placeholder="Search for symbols.."
+      autofocus
+      autocomplete="off"
+      readonly
+      onfocus="this.removeAttribute('readonly');">
     <ul id="symbols"></ul>
   </div>
 

diff --git a/resources/webview.js b/resources/webview.js
@@ -56,23 +56,3 @@ window.displaySymbols = (symbolItems) => {
     symbolList.appendChild(li);
   }
 }
-
-function filterSymbols() {
-  // Declare variables
-  var input, filter, ul, li, a, i, txtValue;
-  input = document.getElementById('symbolSearch');
-  filter = input.value.toUpperCase();
-  ul = document.getElementById("symbols");
-  li = ul.getElementsByTagName('li');
-
-  // Loop through all list items, and hide those who don't match the search query
-  for (i = 0; i < li.length; i++) {
-    a = li[i].getElementsByTagName("a")[0];
-    txtValue = a.textContent || a.innerText;
-    if (txtValue.toUpperCase().indexOf(filter) > -1) {
-      li[i].style.display = "";
-    } else {
-      li[i].style.display = "none";
-    }
-  }
-}
diff --git a/src/command.js b/src/command.js
@@ -1,9 +1,9 @@
 import BrowserWindow from 'sketch-module-web-view';
 import { getWebview } from 'sketch-module-web-view/remote';
-const MochaJSDelegate = require("mocha-js-delegate");
 import UI from 'sketch/ui';
 import Sketch from 'sketch/dom';
-import Btoa from 'btoa';
+// import Btoa from 'btoa';
+// const MochaJSDelegate = require("mocha-js-delegate");
 
 const webviewIdentifier = 'symbol-insert.webview';
 
@@ -16,19 +16,22 @@ export default function () {
     show: false
   }
 
-  const browserWindow = new BrowserWindow(options)
+  const browserWindow = new BrowserWindow(options);
+  const webContents = browserWindow.webContents;
 
   // only show the window when the page has loaded to avoid a white flash
   browserWindow.once('ready-to-show', () => {
     // var symbols = getSymbols();
     // webContents
     //   .executeJavaScript(`listSymbols(${symbols})`)
     //   .catch(console.error);
+    var symbols = JSON.stringify(getSymbols());
+    webContents
+      .executeJavaScript(`displaySymbols(${symbols})`)
+      .catch(console.error);
 
     browserWindow.show();
-  })
-
-  const webContents = browserWindow.webContents;
+  });
 
   // print a message when the page loads
   // webContents.on('did-finish-load', () => {
@@ -54,38 +57,7 @@ export default function () {
     insertSymbol(symbolId);
   });
 
-
-  /*
-  This is so our script's JSContext sticks around,
-  instead of being destroyed as soon as the current execution block is finished.
-  */
-  var fiber = require('sketch/async').createFiber();
-
-  // Create a WebView
-  var webView = WebView.new();
-
-  var delegate = new MochaJSDelegate({
-    // define a property
-    counter: 1,
-
-    // define an instance method
-    "webView:didFinishLoadForFrame:": function(webView, webFrame) {
-      // access counter
-      const counter = this.counter;
-      sketch.UI.message("Loaded! " + counter);
-
-      fiber.cleanup();
-    }
-  });
-
-  // Set WebView's frame load delegate
-  webView.setFrameLoadDelegate(
-    delegate.new({
-      // set the property during the initialisation
-      counter: 4
-    })
-  );
-  webView.setMainFrameURL("http://google.com/");
+  //https://medium.com/madeawkward/how-to-create-floating-sketch-plugins-part-i-6241b82170d0
 
   browserWindow.loadURL(require('../resources/webview.html'))
 }
@@ -114,14 +86,14 @@ function getSymbols() {
         document
       );
       symbolReferences.forEach(symbolReference => {
-        var symbol = symbolReference.import();
-        const buffer = Sketch.export(symbol, {formats: 'png', output: false});
-        var imageLayer = new Sketch.Image({image: buffer});
-        var imageData = imageLayer.image;
-        var imageAsString = Btoa(buffer);
-        if (symbolItems.length <= 0){
-          console.log(symbolReference.name, imageAsString);
-        }
+        // var symbol = symbolReference.import();
+        // const buffer = Sketch.export(symbol, {formats: 'png', output: false});
+        // var imageLayer = new Sketch.Image({image: buffer});
+        // var imageData = imageLayer.image;
+        // var imageAsString = Btoa(buffer);
+        // if (symbolItems.length <= 0){
+        //   console.log(symbolReference.name, imageAsString);
+        // }
         symbolItems.push({
           id: symbolReference.id,
           name: symbolReference.name,
@@ -137,27 +109,49 @@ function insertSymbol(symbolId){
   var document = Sketch.getSelectedDocument();
   var masterSymbol = document.getSymbolMasterWithID(symbolId);
   var instance = masterSymbol.createNewInstance();
-  // instance.parent = document.selectedPage;
 
-  try {
-    var nativeDocument = document.sketchObject;
-    var insertAction = nativeDocument.actionsController().actionForID("MSInsertSymbolAction");
-    var tempMenuItem = NSMenuItem.alloc().init();
+  // is there an active artboard?
+  var selectedArtboard = null;
+  var selectedLayers = document.selectedLayers;
+  if (selectedLayers) {
+    var layers = selectedLayers.layers;
+    if (layers) {
+      // get first layer that is an Artboard
+      for (var i=0; i <= layers.length-1; i++){
+        if (layers[i].type == 'Artboard'){
+          selectedArtboard = layers[i];
+          break;
+        }
+      }
+    }
+  }
 
-    tempMenuItem.setRepresentedObject(instance.sketchObject);
-    insertAction.doPerformAction(tempMenuItem);
+  instance.parent = selectedArtboard ? selectedArtboard : document.selectedPage;
 
-    } catch(e) {
-        log("Exception: " + e);
-    }
+  // try {
+  //   var nativeDocument = document.sketchObject;
+  //   var insertAction = nativeDocument.actionsController().actionForID("MSInsertSymbolAction");
+  //   var tempMenuItem = NSMenuItem.alloc().init();
+
+  //   tempMenuItem.setRepresentedObject(instance.sketchObject);
+  //   insertAction.doPerformAction(tempMenuItem);
+  // } catch(e) {
+  //     log("Exception: " + e);
+  // }
 }
 
 // ✅ Get all symbols from Symbol and Shared Libraries
 // ✅ Display name with slashes
-// TODO Load the symbols when open
+// ✅ Load the symbols when open
 // TODO Display preview of symbol
 // ✅ Filter for symbol
-// ✅  Insert symbol when selected
-// TODO Keyboard arrow on search
+// ✅ Insert symbol when selected
+// ✅ Keyboard arrow on search
+// ✅ Add to current artboard (if present)
 // TODO Style display symbols
+// ✅ Keyboard shortcut
 // TODO Insert symbol by mouse
+// TODO Drag and drop
+// TODO Logo
+// TODO Readme.md update
+// TODO Simple webpage