refactor: editor-file.vue -> image + localization

README.md

@@ -48,7 +48,7 @@ Current and upcoming milestones *(major features only, see the [changelog](https
 
 ### Beta 12
 > *Planned for early June release*  
-![Progress](http://progressed.io/bar/85)
+![Progress](http://progressed.io/bar/95)
 
 - [x] Anchor with Copy to clipboard function
 - [x] Full UI Localization

client/js/components/editor.component.js

@@ -127,7 +127,7 @@ export default {
           {
             name: 'image',
             action: (editor) => {
-              self.$store.dispatch('editorImage/open')
+              self.$store.dispatch('editorFile/open', { mode: 'image' })
             },
             className: 'icon-image',
             title: 'Insert Image'
@@ -135,7 +135,7 @@ export default {
           {
             name: 'file',
             action: (editor) => {
-              self.$store.dispatch('editorFile/open')
+              self.$store.dispatch('editorFile/open', { mode: 'file' })
             },
             className: 'icon-paper',
             title: 'Insert File'

client/js/store/modules/editor-file.js

@@ -3,15 +3,18 @@
 export default {
   namespaced: true,
   state: {
-    shown: false
+    shown: false,
+    mode: 'image'
   },
   getters: {},
   mutations: {
-    shownChange: (state, shownState) => { state.shown = shownState }
+    shownChange: (state, shownState) => { state.shown = shownState },
+    modeChange: (state, modeState) => { state.mode = modeState }
   },
   actions: {
     open({ commit }, opts) {
       commit('shownChange', true)
+      commit('modeChange', opts.mode)
       wikijs.$emit('editorFile/init')
     },
     close({ commit }) { commit('shownChange', false) }

server/locales/en/browser.json

@@ -23,11 +23,19 @@
     "filerenameaction": "Rename",
     "filesuccess": "File link has been inserted.",
     "filetitle": "Insert File",
-    "fileupload": "Upload File",
+    "fileupload": "Upload File(s)",
     "fileuploaderror": "Upload Error: {{err}}",
     "fileuploadsuccess": "File(s) uploaded successfully.",
     "folders": "Folders",
     "foldersloading": "Fetching folders list...",
+    "imagetitle": "Insert Image",
+    "imageinsert": "Insert Image",
+    "imagesuccess": "Image has been inserted.",
+    "imageupload": "Upload Image(s)",
+    "imagealignleft": "Left (default)",
+    "imagealigncenter": "Centered",
+    "imagealignright": "Right",
+    "imagealignlogo": "Page Logo",
     "newfolder": "New Folder",
     "videoanymp4file": "Any standard MP4 file",
     "videoinsert": "Insert Video",

server/views/modals/editor-file.pug

-
-.modal#modal-editor-file
-  .modal-background
-  .modal-container
-    .modal-content.is-expanded
-
-      header.is-green
-        span Insert File
-        p.modal-notify(v-bind:class='{ "is-active": isLoading }')
-          span {{ isLoadingText }}
-          i
-      .modal-toolbar.is-green
-        a.button(v-on:click='newFolder')
-          i.fa.fa-folder
-          span New Folder
-        a.button#btn-editor-file-upload
-          i.fa.fa-upload
-          span Upload File
-          label
-            input(type='file', multiple)
-      section.is-gapless
-        .columns.is-stretched
-          .column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
-            .model-sidebar-header Folders
-            ul.model-sidebar-list
-              li(v-for='fld in folders')
-                a(v-on:click='selectFolder(fld)', v-bind:class='{ "is-active": currentFolder === fld }')
-                  i.icon-folder2
-                  span / {{ fld }}
-          .column.editor-modal-file-choices
-            figure(v-for='fl in files', v-bind:class='{ "is-active": currentFile === fl._id }', v-on:click='selectFile(fl._id)', v-bind:data-uid='fl._id')
-              i(class='icon-file')
-              span: strong {{ fl.filename }}
-              span {{ fl.mime }}
-              span {{ fl.filesize | filesize }}
-            em(v-show='files.length < 1')
-              i.icon-marquee-minus
-              | This folder is empty.
-      footer
-        a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-        a.button.is-green(v-on:click='insertFileLink') Insert Link to File
-
-  .modal.is-superimposed(v-bind:class='{ "is-active": newFolderShow }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-light-blue New Folder
-        section
-          label.label Enter the new folder name:
-          p.control.is-fullwidth
-            input.input#txt-editor-file-newfoldername(type='text', placeholder='folder name', v-model='newFolderName', v-on:keyup.enter='newFolderCreate', v-on:keyup.esc='newFolderDiscard')
-            span.help.is-danger(v-show='newFolderError') This folder name is invalid!
-        footer
-          a.button.is-grey.is-outlined(v-on:click='newFolderDiscard') Discard
-          a.button.is-light-blue(v-on:click='newFolderCreate') Create
-
-  .modal.is-superimposed(v-bind:class='{ "is-active": renameFileShow }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-indigo Rename File
-        section
-          label.label Enter the new filename (without the extension) of the file:
-          p.control.is-fullwidth
-            input.input#txt-editor-file-rename(type='text', placeholder='filename', v-model='renameFileFilename')
-            span.help.is-danger.is-hidden This filename is invalid!
-        footer
-          a.button.is-grey.is-outlined(v-on:click='renameFileDiscard') Discard
-          a.button.is-light-blue(v-on:click='renameFileGo') Rename
-
-  .modal.is-superimposed(v-bind:class='{ "is-active": deleteFileShow }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-red Delete file?
-        section
-          span Are you sure you want to delete #[strong {{deleteFileFilename}}]?
-        footer
-          a.button.is-grey.is-outlined(v-on:click='deleteFileWarn(false)') Discard
-          a.button.is-red(v-on:click='deleteFileGo') Delete

server/views/modals/editor-image.pug

-
-.modal#modal-editor-image
-  .modal-background
-  .modal-container
-    .modal-content.is-expanded
-
-      header.is-green
-        span Insert Image
-        p.modal-notify(v-bind:class='{ "is-active": isLoading }')
-          span {{ isLoadingText }}
-          i
-      .modal-toolbar.is-green
-        a.button(v-on:click='newFolder')
-          i.fa.fa-folder
-          span New Folder
-        a.button#btn-editor-image-upload
-          i.fa.fa-upload
-          span Upload Image
-          label
-            input(type='file', multiple)
-        a.button(v-on:click='fetchFromUrl')
-          i.fa.fa-download
-          span Fetch from URL
-      section.is-gapless
-        .columns.is-stretched
-          .column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
-            .model-sidebar-header Folders
-            ul.model-sidebar-list
-              li(v-for='fld in folders')
-                a(v-on:click='selectFolder(fld)', v-bind:class='{ "is-active": currentFolder === fld }')
-                  i.icon-folder2
-                  span / {{ fld }}
-            .model-sidebar-header Alignment
-            .model-sidebar-content
-              p.control.is-fullwidth
-                select(v-model='currentAlign')
-                  option(value='left') Left (default)
-                  option(value='center') Centered
-                  option(value='right') Right
-                  option(value='logo') Page Logo
-          .column.editor-modal-image-choices
-            figure(v-for='img in images', v-bind:class='{ "is-active": currentImage === img._id }', v-on:click='selectImage(img._id)', v-bind:data-uid='img._id')
-              img(v-bind:src='"/uploads/t/" + img._id + ".png"')
-              span: strong {{ img.basename }}
-              span {{ img.filesize | filesize }}
-            em(v-show='images.length < 1')
-              i.icon-marquee-minus
-              | This folder is empty.
-      footer
-        a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-        a.button.is-green(v-on:click='insertImage') Insert Image
-
-  .modal.is-superimposed(v-bind:class='{ "is-active": newFolderShow }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-light-blue New Folder
-        section
-          label.label Enter the new folder name:
-          p.control.is-fullwidth
-            input.input#txt-editor-image-newfoldername(type='text', placeholder='folder name', v-model='newFolderName', v-on:keyup.enter='newFolderCreate', v-on:keyup.esc='newFolderDiscard')
-            span.help.is-danger(v-show='newFolderError') This folder name is invalid!
-        footer
-          a.button.is-grey.is-outlined(v-on:click='newFolderDiscard') Discard
-          a.button.is-light-blue(v-on:click='newFolderCreate') Create
-
-  .modal.is-superimposed(v-bind:class='{ "is-active": fetchFromUrlShow }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-light-blue Fetch Image from URL
-        section
-          label.label Enter full URL path to the image:
-          p.control.is-fullwidth
-            input.input#txt-editor-image-fetchurl(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL')
-            span.help.is-danger.is-hidden This URL path is invalid!
-        footer
-          a.button.is-grey.is-outlined(v-on:click='fetchFromUrlDiscard') Discard
-          a.button.is-light-blue(v-on:click='fetchFromUrlGo') Fetch
-
-  .modal.is-superimposed(v-bind:class='{ "is-active": renameImageShow }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-indigo Rename Image
-        section
-          label.label Enter the new filename (without the extension) of the image:
-          p.control.is-fullwidth
-            input.input#txt-editor-image-rename(type='text', placeholder='filename', v-model='renameImageFilename')
-            span.help.is-danger.is-hidden This filename is invalid!
-        footer
-          a.button.is-grey.is-outlined(v-on:click='renameImageDiscard') Discard
-          a.button.is-light-blue(v-on:click='renameImageGo') Rename
-
-  .modal.is-superimposed(v-bind:class='{ "is-active": deleteImageShow }')
-    .modal-background
-    .modal-container
-      .modal-content
-        header.is-red Delete image?
-        section
-          span Are you sure you want to delete #[strong {{deleteImageFilename}}]?
-        footer
-          a.button.is-grey.is-outlined(v-on:click='deleteImageWarn(false)') Discard
-          a.button.is-red(v-on:click='deleteImageGo') Delete

server/views/pages/create.pug

@@ -18,6 +18,7 @@ block content
     .editor-area
       textarea(ref='editorTextArea', v-pre)= pageData.markdown
 
+  editor-file
   editor-video
   editor-codeblock
   modal-discard-page(mode='create', current-path=pageData.meta.path)