Merge pull request #37 from amitmerchant1990/ui-improvements

Improve some of the UI elements to look more modern and fix lint.
amitmerchant1990 · Oct 8, 2020 · 9dbf4c8 · 9dbf4c8
2 parents 49b89d5 + e4306da
commit 9dbf4c8
Show file tree

Hide file tree

Showing 7 changed files with 586 additions and 522 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2016 Amit Merchant <[email protected]>
+Copyright (c) 2020 Amit Merchant <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

diff --git a/app/img/markdownify.gif b/app/img/markdownify.gif
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -1,9 +1,9 @@
 /*!
-* The MIT License (MIT)
-* Copyright (c) 2016 Amit Merchant <[email protected]>
+ * The MIT License (MIT)
+ * Copyright (c) 2020 Amit Merchant <[email protected]>
  */
 
-var showdown  = require('showdown');
+var showdown = require('showdown');
 var remote = require('electron').remote;
 var ipc = require('electron').ipcRenderer;
 var dialog = require('electron').remote.dialog;
@@ -19,187 +19,187 @@ const config = require('./config');
 
 // `remote.require` since `Menu` is a main-process module.
 var buildEditorContextMenu = remote.require('electron-editor-context-menu');
-var currentValue = 0, currentValueTheme = 0;
+var currentValue = 0,
+    currentValueTheme = 0;
 
 window.addEventListener('contextmenu', e => {
-  // Only show the context menu in text editors.
-  if (!e.target.closest('textarea, input, [contenteditable="true"],section')) return;
+    // Only show the context menu in text editors.
+    if (!e.target.closest('textarea, input, [contenteditable="true"],section')) return;
 
-  var menu = buildEditorContextMenu();
+    var menu = buildEditorContextMenu();
 
-  // The 'contextmenu' event is emitted after 'selectionchange' has fired but possibly before the
-  // visible selection has changed. Try to wait to show the menu until after that, otherwise the
-  // visible selection will update after the menu dismisses and look weird.
-  setTimeout(() => {
-    menu.popup(remote.getCurrentWindow());
-  }, 30);
+    // The 'contextmenu' event is emitted after 'selectionchange' has fired but possibly before the
+    // visible selection has changed. Try to wait to show the menu until after that, otherwise the
+    // visible selection will update after the menu dismisses and look weird.
+    setTimeout(() => {
+        menu.popup(remote.getCurrentWindow());
+    }, 30);
 });
 
 var cm = CodeMirror.fromTextArea(document.getElementById("plainText"), {
-  lineNumbers: false,
-  mode: "markdown",
-  viewportMargin: 100000000000,
-  lineWrapping : true,
-  autoCloseBrackets: true
+    lineNumbers: false,
+    mode: "markdown",
+    viewportMargin: 100000000000,
+    lineWrapping: true,
+    autoCloseBrackets: true
 });
 
 $(() => {
-  var plainText = document.getElementById('plainText'),
-    markdownArea = document.getElementById('markdown');
-
-  cm.on('change', (cMirror) => {
-    // get value right from instance
-    //yourTextarea.value = cMirror.getValue();
-    var markdownText = cMirror.getValue();
-    // Convert emoji's
-    markdownText = replaceWithEmojis(markdownText);
-    latexText = katex.renderLaTeX(markdownText);
-
-    marked.setOptions({
-      highlight: (code) => {
-        return require('highlightjs').highlightAuto(code).value;
-      }
+    var plainText = document.getElementById('plainText'),
+        markdownArea = document.getElementById('markdown');
+
+    cm.on('change', (cMirror) => {
+        // get value right from instance
+        //yourTextarea.value = cMirror.getValue();
+        var markdownText = cMirror.getValue();
+        // Convert emoji's
+        markdownText = replaceWithEmojis(markdownText);
+        latexText = katex.renderLaTeX(markdownText);
+
+        marked.setOptions({
+            highlight: (code) => {
+                return require('highlightjs').highlightAuto(code).value;
+            }
+        });
+
+        //Md -> Preview
+        html = marked(latexText, {
+            gfm: true,
+            tables: true,
+            breaks: false,
+            pedantic: false,
+            sanitize: false,
+            smartLists: true,
+            smartypants: false
+        });
+
+        markdownArea.innerHTML = html;
+
+        //Md -> HTML
+        converter = new showdown.Converter();
+        html = converter.makeHtml(markdownText);
+        document.getElementById("htmlPreview").value = html;
+
+        if (this.isFileLoadedInitially) {
+            this.setClean();
+            this.isFileLoadedInitially = false;
+        }
+
+        if (this.currentFile != '') {
+            this.updateWindowTitle(this.currentFile);
+        } else {
+            this.updateWindowTitle();
+        }
+
     });
 
-    //Md -> Preview
-    html = marked(latexText,{
-              gfm: true,
-              tables: true,
-              breaks: false,
-              pedantic: false,
-              sanitize: false,
-              smartLists: true,
-              smartypants: false
+    // Get the most recently saved file
+    storage.get('markdown-savefile', (error, data) => {
+        if (error) throw error;
+
+        if ('filename' in data) {
+            fs.readFile(data.filename, 'utf-8', (err, data) => {
+                if (err) {
+                    alert("An error ocurred while opening the file " + err.message)
+                }
+                cm.getDoc().setValue(data);
             });
-
-    markdownArea.innerHTML = html;
+            this.isFileLoadedInitially = true;
+            this.currentFile = data.filename;
+        }
+    });
+
+
+    /**************************
+     * Synchronized scrolling *
+     **************************/
+
+    var $prev = $('#previewPanel'),
+        $markdown = $('#markdown'),
+        $syncScroll = $('#syncScroll'),
+        canScroll; // Initialized below.
+
+    // Retaining state in boolean since this will be more CPU friendly instead of constantly selecting on each event.
+    var toggleSyncScroll = () => {
+            console.log('Toggle scroll synchronization.');
+            canScroll = $syncScroll.is(':checked');
+
+            config.set('isSyncScroll', canScroll);
+            // If scrolling was just enabled, ensure we're back in sync by triggering window resize.
+            if (canScroll) $(window).trigger('resize');
+        }
+        //toggleSyncScroll();
+    $syncScroll.on('change', toggleSyncScroll);
+
+    const isSyncScroll = config.get('isSyncScroll');
+    if (isSyncScroll === true) {
+        $syncScroll.attr('checked', true);
+    } else {
+        $syncScroll.attr('checked', false);
+    }
+    /**
+     * Scrollable height.
+     */
 
-    //Md -> HTML
-    converter = new showdown.Converter();
-    html      = converter.makeHtml(markdownText);
-    document.getElementById("htmlPreview").value = html;
+    var codeScrollable = () => {
+        var info = cm.getScrollInfo(),
+            fullHeight = info.height,
+            viewHeight = info.clientHeight;
 
-    if(this.isFileLoadedInitially){
-      this.setClean();
-      this.isFileLoadedInitially = false;
+        return fullHeight - viewHeight;
     }
 
-    if(this.currentFile!=''){
-      this.updateWindowTitle(this.currentFile);
-    }else{
-      this.updateWindowTitle();
+    var prevScrollable = () => {
+        var fullHeight = $markdown.height(),
+            viewHeight = $prev.height();
+        return fullHeight - viewHeight;
     }
 
-  });
-
-  // Get the most recently saved file
-  storage.get('markdown-savefile', (error, data) => {
-    if (error) throw error;
-
-    if ('filename' in data) {
-      fs.readFile(data.filename, 'utf-8', (err, data) => {
-         if(err){
-             alert("An error ocurred while opening the file "+ err.message)
-         }
-         cm.getDoc().setValue(data);
-      });
-      this.isFileLoadedInitially = true;
-      this.currentFile = data.filename;
+    /**
+     * Temporarily swaps out a scroll handler.
+     */
+    var muteScroll = (obj, listener) => {
+        obj.off('scroll', listener);
+        obj.on('scroll', tempHandler);
+
+        var tempHandler = () => {
+            obj.off('scroll', tempHandler);
+            obj.on('scroll', listener);
+        }
     }
-  });
-
-
-  /**************************
-   * Synchronized scrolling *
-   **************************/
-
-  var $prev = $('#previewPanel'),
-    $markdown = $('#markdown'),
-    $syncScroll = $('#syncScroll'),
-    canScroll; // Initialized below.
-
-  // Retaining state in boolean since this will be more CPU friendly instead of constantly selecting on each event.
-  var toggleSyncScroll = () => {
-	  console.log('Toggle scroll synchronization.');
-	  canScroll = $syncScroll.is(':checked');
-
-    config.set('isSyncScroll', canScroll);
-	  // If scrolling was just enabled, ensure we're back in sync by triggering window resize.
-	  if (canScroll) $(window).trigger('resize');
-  }
-  //toggleSyncScroll();
-  $syncScroll.on('change', toggleSyncScroll);
-
-  const isSyncScroll = config.get('isSyncScroll');
-  if(isSyncScroll===true){
-    $syncScroll.attr('checked', true);
-  }else{
-    $syncScroll.attr('checked', false);
-  }
-  /**
-   * Scrollable height.
-   */
-
-  var codeScrollable = () => {
-    var info = cm.getScrollInfo(),
-      fullHeight = info.height,
-      viewHeight = info.clientHeight;
-
-    return fullHeight - viewHeight;
-  }
-
-  var prevScrollable = () => {
-    var fullHeight = $markdown.height(),
-      viewHeight = $prev.height();
-    return fullHeight - viewHeight;
-  }
-
-  /**
-   * Temporarily swaps out a scroll handler.
-   */
-  var muteScroll = (obj, listener) => {
-    obj.off('scroll', listener);
-    obj.on('scroll', tempHandler);
-
-    var tempHandler = () => {
-      obj.off('scroll', tempHandler);
-      obj.on('scroll', listener);
+
+    /**
+     * Scroll Event Listeners
+     */
+    var codeScroll = () => {
+        var scrollable = codeScrollable();
+        if (scrollable > 0 && canScroll) {
+            var percent = cm.getScrollInfo().top / scrollable;
+
+            // Since we'll be triggering scroll events.
+            console.log('Code scroll: %' + (Math.round(100 * percent)));
+            muteScroll($prev, prevScroll);
+            $prev.scrollTop(percent * prevScrollable());
+        }
     }
-  }
-
-  /**
-   * Scroll Event Listeners
-   */
-  var codeScroll = () => {
-    var scrollable = codeScrollable();
-    if (scrollable > 0 && canScroll) {
-      var percent = cm.getScrollInfo().top / scrollable;
-
-      // Since we'll be triggering scroll events.
-      console.log('Code scroll: %' + (Math.round(100 * percent)));
-      muteScroll($prev, prevScroll);
-      $prev.scrollTop(percent * prevScrollable());
+    cm.on('scroll', codeScroll);
+    $(window).on('resize', codeScroll);
+
+    var prevScroll = () => {
+        var scrollable = prevScrollable();
+        if (scrollable > 0 && canScroll) {
+            var percent = $(this).scrollTop() / scrollable;
+
+            // Since we'll be triggering scroll events.
+            muteScroll(cm, codeScroll);
+            cm.scrollTo(null, codeScrollable() * percent);
+        }
     }
-  }
-  cm.on('scroll', codeScroll);
-  $(window).on('resize', codeScroll);
-
-  var prevScroll = () => {
-      var scrollable = prevScrollable();
-      if (scrollable > 0 && canScroll) {
-        var percent = $(this).scrollTop() / scrollable;
-
-        // Since we'll be triggering scroll events.
-        console.log('Preview scroll: %' + (Math.round(100 * percent)));
-        muteScroll(cm, codeScroll);
-        cm.scrollTo(null, codeScrollable() * percent);
-      }
-  }
-  $prev.on('scroll', prevScroll);
-
-  const isDarkMode = config.get('darkMode');
-  changeTheme(isDarkMode);
-
-  const isHtml = config.get('isHtml');
-  clkPref(isHtml);
-});
+    $prev.on('scroll', prevScroll);
+
+    const isDarkMode = config.get('darkMode');
+    changeTheme(isDarkMode);
+
+    const isHtml = config.get('isHtml');
+    clkPref(isHtml);
+});