From 2aaebb3ce0d178d98b2fba4cb47d1386527ef188 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sun, 28 May 2017 19:56:10 -0400
Subject: [PATCH] feat: Added localization to editor-codeblock

---
 client/js/components/editor-codeblock.vue | 28 +++++++++++++++++++----
 server/locales/en/browser.json            |  7 ++++++
 server/views/modals/editor-codeblock.pug  | 23 -------------------
 server/views/pages/view.pug               |  2 +-
 4 files changed, 31 insertions(+), 29 deletions(-)
 delete mode 100644 server/views/modals/editor-codeblock.pug

diff --git a/client/js/components/editor-codeblock.vue b/client/js/components/editor-codeblock.vue
index 5558c44e..63bfac5e 100644
--- a/client/js/components/editor-codeblock.vue
+++ b/client/js/components/editor-codeblock.vue
@@ -7,11 +7,14 @@
         transition(name='modal-content')
           .modal-content.is-expanded(v-show='isShown')
             header.is-green
-              span Insert Code Block
+              span {{ $t('editor.codeblocktitle') }}
+              p.modal-notify(v-bind:class='{ "is-active": isLoading }')
+                span {{ $t('editor.codeblockloading', { name: modeSelected }) }}
+                i
             section.is-gapless
               .columns.is-stretched
                 .column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
-                  .model-sidebar-header Language
+                  .model-sidebar-header {{ $t('editor.codeblocklanguage') }}
                   .model-sidebar-content
                     p.control.is-fullwidth
                       select(v-model='modeSelected')
@@ -19,8 +22,8 @@
                 .column.ace-container
                   #codeblock-editor
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-              a.button.is-green(v-on:click='insertCode') Insert Code Block
+              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('editor.discard') }}
+              a.button.is-green(v-on:click='insertCode') {{ $t('editor.codeblockinsert') }}
 </template>
 
 <script>
@@ -33,7 +36,8 @@
       return {
         modes: [],
         modeSelected: 'text',
-        modelistLoaded: []
+        modelistLoaded: [],
+        isLoading: false
       }
     },
     computed: {
@@ -72,13 +76,27 @@
         if (self._.includes(self.modelistLoaded, m)) {
           codeEditor.getSession().setMode('ace/mode/' + m)
         } else {
+          self.isLoading = true
           self.$http.get('/js/ace/mode-' + m + '.js').then(resp => {
             if(resp.ok) {
               eval(resp.bodyText)
               self.modelistLoaded.push(m)
               ace.acequire('ace/mode/' + m)
               codeEditor.getSession().setMode('ace/mode/' + m)
+              self._.delay(() => { self.isLoading = false }, 500)
+            } else {
+              this.$store.dispatch('alert', {
+                style: 'red',
+                icon: 'square-cross',
+                msg: 'Error: Unable to load language syntax.'
+              })
             }
+          }).catch(err => {
+            his.$store.dispatch('alert', {
+              style: 'red',
+              icon: 'square-cross',
+              msg: 'Error: ' + err.body.msg
+            })
           })
         }
       },
diff --git a/server/locales/en/browser.json b/server/locales/en/browser.json
index a15b6fd3..eae81794 100644
--- a/server/locales/en/browser.json
+++ b/server/locales/en/browser.json
@@ -1,4 +1,11 @@
 {
+  "editor": {
+    "discard": "Discard",
+    "codeblocktitle": "Insert Code Block",
+    "codeblockinsert": "Insert Code Block",
+    "codeblocklanguage": "Language",
+    "codeblockloading": "Loading code syntax for {{name}}"
+  },
   "nav": {
     "home": "Home"
   },
diff --git a/server/views/modals/editor-codeblock.pug b/server/views/modals/editor-codeblock.pug
deleted file mode 100644
index 2c4723e0..00000000
--- a/server/views/modals/editor-codeblock.pug
+++ /dev/null
@@ -1,23 +0,0 @@
-
-.modal#modal-editor-codeblock
-  .modal-background
-  .modal-container
-    .modal-content.is-expanded
-      
-      header.is-green
-        span Insert Code Block
-
-      section.is-gapless
-        .columns.is-stretched
-          .column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
-            .model-sidebar-header Language
-            .model-sidebar-content
-              p.control.is-fullwidth
-                select(v-model='modeSelected')
-                  option(v-for='mode in modes', v-bind:value='mode.name') {{ mode.caption }}
-          .column.ace-container
-            #codeblock-editor
-
-      footer
-        a.button.is-grey.is-outlined(v-on:click='cancel') Discard
-        a.button.is-green(v-on:click='insertCode') Insert Code Block
diff --git a/server/views/pages/view.pug b/server/views/pages/view.pug
index 144ad95c..6098557d 100644
--- a/server/views/pages/view.pug
+++ b/server/views/pages/view.pug
@@ -18,7 +18,7 @@ block rootNavRight
     a.button.is-outlined(href='/source/' + pageData.meta.path)
       i.icon-loader
       span= t('nav.source')
-    a.button.is-outlined(href='/hist/' + pageData.meta.path)
+    //- a.button.is-outlined(href='/hist/' + pageData.meta.path)
       i.icon-clock
       span= t('nav.history')
     if rights.write