From 1544b45af5435fde1190634dc44b65ca6ab55238 Mon Sep 17 00:00:00 2001
From: Sheogorath <sheogorath@shivering-isles.com>
Date: Mon, 25 Mar 2019 17:41:51 +0100
Subject: [PATCH] Move upload button into toolbar

Currently we have the odd situation to have two toolbars. One inside the
header and one in the editor.

Since we only show the image upload button when the editor is visible we
should move the upload button into the editor toolbar.

This patch does this by adding the image upload button besides the image
tag button.

Signed-off-by: Sheogorath <sheogorath@shivering-isles.com>
---
 public/js/index.js                  | 15 ---------------
 public/js/lib/editor/index.js       |  9 +++++++++
 public/js/lib/editor/toolbar.html   |  3 +++
 public/js/lib/editor/ui-elements.js |  3 +--
 public/views/codimd/header.ejs      |  6 ------
 5 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/public/js/index.js b/public/js/index.js
index 76f952c..c59c94d 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -304,7 +304,6 @@ var editor = editorInstance.init(textit)
 // FIXME: global referncing in jquery-textcomplete patch
 window.editor = editor
 
-var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor)
 defaultTextHeight = parseInt($('.CodeMirror').css('line-height'))
 
 //  initalize ui reference
@@ -801,7 +800,6 @@ function changeMode (type) {
     editor.getInputField().blur()
   }
   if (appState.currentMode === modeType.edit || appState.currentMode === modeType.both) {
-    ui.toolbar.uploadImage.fadeIn()
     // add and update status bar
     if (!editorInstance.statusBar) {
       editorInstance.addStatusBar()
@@ -814,8 +812,6 @@ function changeMode (type) {
     // work around foldGutter might not init properly
     editor.setOption('foldGutter', false)
     editor.setOption('foldGutter', true)
-  } else {
-    ui.toolbar.uploadImage.fadeOut()
   }
   if (appState.currentMode !== modeType.edit) {
     $(document.body).css('background-color', 'white')
@@ -1051,17 +1047,6 @@ ui.toolbar.import.snippet.click(function () {
           ui.spinner.hide()
         })
 })
-// import from clipboard
-ui.toolbar.import.clipboard.click(function () {
-    // na
-})
-// upload image
-ui.toolbar.uploadImage.bind('change', function (e) {
-  var files = e.target.files || e.dataTransfer.files
-  e.dataTransfer = {}
-  e.dataTransfer.files = files
-  inlineAttach.onDrop(e)
-})
 // toc
 ui.toc.dropdown.click(function (e) {
   e.stopPropagation()
diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js
index f05d01b..17d30ca 100644
--- a/public/js/lib/editor/index.js
+++ b/public/js/lib/editor/index.js
@@ -138,6 +138,7 @@ export default class Editor {
   }
 
   addToolBar () {
+    var inlineAttach = inlineAttachment.editors.codemirror4.attach(this.editor)
     this.toolBar = $(toolBarTemplate)
     this.toolbarPanel = this.editor.addPanel(this.toolBar[0], {
       position: 'top'
@@ -157,6 +158,7 @@ export default class Editor {
     var makeTable = $('#makeTable')
     var makeLine = $('#makeLine')
     var makeComment = $('#makeComment')
+    var uploadImage = $('#uploadImage')
 
     makeBold.click(() => {
       utils.wrapTextWith(this.editor, this.editor, '**')
@@ -217,6 +219,13 @@ export default class Editor {
     makeComment.click(() => {
       utils.insertText(this.editor, '> []')
     })
+    uploadImage.bind('change', function (e) {
+      console.log("tiggered")
+      var files = e.target.files || e.dataTransfer.files
+      e.dataTransfer = {}
+      e.dataTransfer.files = files
+      inlineAttach.onDrop(e)
+    })
   }
 
   addStatusBar () {
diff --git a/public/js/lib/editor/toolbar.html b/public/js/lib/editor/toolbar.html
index a2ac476..9ea1aac 100644
--- a/public/js/lib/editor/toolbar.html
+++ b/public/js/lib/editor/toolbar.html
@@ -34,6 +34,9 @@
       <a id="makeImage" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Image">
           <i class="fa fa-image fa-fw"></i>
       </a>
+      <span id="uploadImage" class="btn btn-sm btn-dark btn-file ui-upload-image" title="Upload Image">
+          <i class="fa fa-upload fa-fw"></i><input type="file" accept="image/*" name="upload" multiple>
+      </span>
       <a id="makeTable" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Table">
           <i class="fa fa-table fa-fw"></i>
       </a>
diff --git a/public/js/lib/editor/ui-elements.js b/public/js/lib/editor/ui-elements.js
index 29a3778..ce19436 100644
--- a/public/js/lib/editor/ui-elements.js
+++ b/public/js/lib/editor/ui-elements.js
@@ -35,8 +35,7 @@ export const getUIElements = () => ({
     edit: $('.ui-edit'),
     view: $('.ui-view'),
     both: $('.ui-both'),
-    night: $('.ui-night'),
-    uploadImage: $('.ui-upload-image')
+    night: $('.ui-night')
   },
   infobar: {
     lastchange: $('.ui-lastchange'),
diff --git a/public/views/codimd/header.ejs b/public/views/codimd/header.ejs
index b83838e..6bf3780 100644
--- a/public/views/codimd/header.ejs
+++ b/public/views/codimd/header.ejs
@@ -15,9 +15,6 @@
         </div>
         <a class="navbar-brand pull-left" href="<%- serverURL %>/"><i class="fa fa-file-text"></i> CodiMD</a>
         <div class="nav-mobile pull-right visible-xs">
-            <span class="btn btn-link btn-file ui-upload-image" title="Upload Image" style="display:none;">
-                <i class="fa fa-camera"></i><input type="file" accept="image/*" name="upload" multiple>
-            </span>
             <a data-toggle="dropdown" class="btn btn-link">
                 <i class="fa fa-caret-down"></i>
             </a>
@@ -100,9 +97,6 @@
             <span class="btn btn-link btn-file ui-help" title="<%= __('Help') %>" data-toggle="modal" data-target=".help-modal">
                 <i class="fa fa-question-circle"></i>
             </span>
-            <span class="btn btn-link btn-file ui-upload-image" title="<%= __('Upload Image') %>" style="display:none;">
-                <i class="fa fa-camera"></i><input type="file" accept="image/*" name="upload" multiple>
-            </span>
         </ul>
         <ul class="nav navbar-nav navbar-right">
             <li id="online-user-list">