Added error handling about not founding Sketch.app or open document w…

…indow

docs/download-analyst/index.html

@@ -65,6 +65,12 @@ <h1 style="text-align: center; font-weight: 800; font-size: 40px; margin-bottom:
 
     <h2>Update log</h2>
     <div style="max-width: 320px; margin: auto; text-align: left; color: rgba(255,255,255,0.85);">
+        <h2>v1.4.3</h2>
+        <p>
+            19.03.03<br />
+            - Added error handling about not founding Sketch.app or open document window.
+        </p>
+        <br />
         <h2>v1.4.2</h2>
         <p>
             19.01.29<br />

index.html

@@ -317,6 +317,48 @@
       border-image-slice: 1;
     }
 
+    .Alert--fail {
+      width: 360px;
+    }
+
+    .Alert__message-title--fail {
+      font-size: 15px;
+      font-weight: 700;
+      text-align: center;
+      word-break: break-word;
+      margin-bottom: 18px;
+    }
+
+    .Alert__message-text--fail {
+      font-size: 13px;
+      font-weight: 400;
+      text-align: left;
+      word-break: break-all;
+      height: 80px;
+      overflow-y: scroll;
+      background-color: #f5f5f5;
+      padding: 12px;
+      border-radius: 6px;
+      margin-bottom: 18px;
+    }
+
+    .Alert__fail-close-button {
+      cursor: pointer;
+      width: 60px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 3px;
+      display: inline-block;
+      margin: auto;
+      padding: 0 12px 1px;
+      height: 32px;
+      outline: 0;
+      background-color: #fdfdfd;
+      border: 1px solid #dfdfdf;
+      box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.05);
+      color: #424242;
+    }
+
     .Option {
       padding: 24px 0;
     }
@@ -431,12 +473,25 @@
     <div class="Alert__done-icon"></div>
     &nbsp;&nbsp;Done!
   </span>
-  <span class="Alert__message--fail"></span>
+  <span class="Alert__message--fail">
+    <h5 class="Alert__message-title--fail"></h5>
+    <p class="Alert__message-text--fail"></p>
+    <button class="Alert__fail-close-button" type="button" onclick="closeFailAlert();">Close</button>
+  </span>
 </div>
 <div class="Cover"></div>
 
 <script src="script/index.js"></script>
 
+<script>
+  const {alert, alertFailTitle, alertFailText} = require('./script/getElements');
+  function closeFailAlert() {
+    alert.classList.remove('Alert--fail');
+    alertFailText.innerHTML = '';
+    alertFailTitle.innerHTML = '';
+  }
+</script>
+
 <script>
   if(process.env.NODE_ENV === 'dev') {
     const webview = document.getElementsByClassName('Content__webview')[0];

package.json

@@ -1,7 +1,7 @@
 {
   "name": "html-to-sektch-electron",
   "main": "main.js",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "scripts": {
     "start": "webpack --config ./webviewScript/webpack.config.js && gulp start",
     "start:dev": "webpack --config ./webviewScript/webpack.config.js && NODE_ENV=dev gulp start",

script/fontReplacer.js

@@ -1,5 +1,5 @@
-const {options} = require(__dirname + '/getElements');
 const fontManager = require('font-manager');
+const {options} = require('./getElements');
 
 function getFontReplacerValues() {
   const fontReplacerSelectors = document.getElementsByClassName('Option__font-selector');

script/getElements.js

@@ -5,6 +5,8 @@ const pickerBtn = document.getElementsByClassName('SideBar__pick-btn')[0];
 const runBtn = document.getElementsByClassName('SideBar__run-btn')[0];
 const options = document.getElementsByClassName('Option')[0];
 const alert = document.getElementsByClassName('Alert')[0];
+const alertFailTitle = document.getElementsByClassName('Alert__message-title--fail')[0];
+const alertFailText = document.getElementsByClassName('Alert__message-text--fail')[0];
 const title = document.getElementsByTagName('title')[0];
 
-module.exports = {addressInput, webview, webviewSizeView, pickerBtn, runBtn, options, alert, title};
+module.exports = {addressInput, webview, webviewSizeView, pickerBtn, runBtn, options, alert, alertFailTitle, alertFailText, title};

script/handlePicker.js

@@ -1,4 +1,4 @@
-const {webview, pickerBtn, runBtn} = require(__dirname + '/getElements');
+const {webview, pickerBtn, runBtn} = require('./getElements');
 
 function startPicker() {
   webview.executeJavaScript('webviewScript.startPicker();');
@@ -15,4 +15,4 @@ function stopPicker() {
   pickerBtn.classList.remove('SideBar__pick-btn--stop-mode');
 }
 
-module.exports = {startPicker, stopPicker};
+module.exports = {startPicker, stopPicker};

script/handleSizeView.js

@@ -1,4 +1,4 @@
-const {webview, webviewSizeView} = require(__dirname + '/getElements');
+const {webview, webviewSizeView} = require('./getElements');
 
 let timeOut;
 
@@ -15,4 +15,4 @@ function showSizeView() {
 
 }
 
-module.exports = {showSizeView};
+module.exports = {showSizeView};

script/index.js

@@ -1,11 +1,11 @@
 const fs = require('fs');
 const appVersion = require('electron').remote.app.getVersion();
 
-const {webview, addressInput, pickerBtn, runBtn, title} = require(__dirname + '/script/getElements');
-const {findFont} = require(__dirname + '/script/fontReplacer');
-const {startPicker, stopPicker} = require(__dirname + '/script/handlePicker');
-const runHtmlToSketch = require(__dirname + '/script/runHtmlToSketch');
-const {showSizeView} = require(__dirname + '/script/handleSizeView');
+const {webview, addressInput, pickerBtn, runBtn, title} = require('./script/getElements');
+const {findFont} = require('./script/fontReplacer');
+const {startPicker, stopPicker} = require('./script/handlePicker');
+const runHtmlToSketch = require('./script/runHtmlToSketch');
+const {showSizeView} = require('./script/handleSizeView');
 
 title.innerText = title.innerText + ' v' + appVersion;
 

script/runHtmlToSketch.js

@@ -1,20 +1,43 @@
-const {webview, alert} = require(__dirname + '/getElements');
-const runPlugin = require(__dirname + '/runPlugin');
-const {replaceFont} = require(__dirname + '/fontReplacer');
+const {webview, alert, alertFailTitle, alertFailText} = require('./getElements');
+const runPlugin = require('./runPlugin');
+const {replaceFont} = require('./fontReplacer');
+
+const ERROR_KEY_MESSAGE_NOT_FOUND_CURRENT_PAGE = 'null is not an object (evaluating \'document.currentPage\')';
+const ERROR_KEY_MESSAGE_NOT_FOUND_SKETCH_APP = 'Looks like we can\'t find Sketch.app.';
+
+function doneAlert() {
+  alert.classList.remove('Alert--loading');
+  alert.classList.add('Alert--done');
+  setTimeout(function () {
+    alert.classList.remove('Alert--done');
+  }, 2000);
+}
+
+function failAlert(title, message) {
+  alert.classList.remove('Alert--loading');
+  alert.classList.add('Alert--fail');
+  alertFailTitle.innerHTML = title;
+  alertFailText.innerHTML = message;
+}
 
 function runHtmlToSketch() {
   alert.classList.add('Alert--loading');
   webview.executeJavaScript('webviewScript.page2layers();', false, function (result) {
     const jsonString = replaceFont(JSON.stringify(result));
 
-    runPlugin(jsonString, function() {
-      alert.classList.remove('Alert--loading');
-      alert.classList.add('Alert--done');
-      setTimeout(function () {
-        alert.classList.remove('Alert--done');
-      }, 2000);
-      webview.reload();
+    runPlugin(jsonString, function(message) {
+      if (!message) {
+        doneAlert();
+        webview.reload();
+      } else if (message.indexOf(ERROR_KEY_MESSAGE_NOT_FOUND_CURRENT_PAGE) !== -1) {
+        failAlert('Can\'t find open sketch document page.<br>Please retry after open empty sketch document.', message);
+      } else if (message.indexOf(ERROR_KEY_MESSAGE_NOT_FOUND_SKETCH_APP) !== -1) {
+        failAlert('Can\'t find Sketch.app in Applications folder.<br>Please retry after move Sketch.app to Applications folder.', message);
+      } else {
+        failAlert('Unknown error', message);
+      }
     });
+
   });
 }
 

script/runPlugin.js

@@ -22,14 +22,13 @@ async function runPlugin (json, callback) {
   fs.writeFileSync(path.resolve(pluginDirPath, 'asketch2sketch.sketchplugin/Contents/Sketch/run.js'), newPluginCode);
 
   const command = sketchtoolRunCommand(path.resolve(pluginDirPath, 'asketch2sketch.sketchplugin'), 'run');
-  exec(command, (error, stdout, stderr) => {
+  exec(command, (error, stdout) => {
     if (error) {
       console.error(`exec error: ${error}`);
       return;
     }
     console.log(`stdout: ${stdout}`);
-    console.log(`stderr: ${stderr}`);
-    callback();
+    callback(stdout.trim());
   });
 }