Merge pull request #9 from SISheogorath/feature/moveUpload

Move upload button into toolbar

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()

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 () {

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>

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'),

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">