[ci skip] WIP dynamically switch between preview and repo-editor, disable edit button and editor for binary files

app/assets/javascripts/repo/components/repo.vue

@@ -7,6 +7,7 @@ import RepoBinaryViewer from './repo_binary_viewer.vue';
 import RepoMixin from '../mixins/repo_mixin';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
 import Store from '../stores/repo_store';
+import RepoHelper from '../helpers/repo_helper';
 import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
 
 export default {
@@ -20,6 +21,16 @@ export default {
     'repo-editor': MonacoLoaderHelper.repoEditorLoader,
     'repo-commit-section': RepoCommitSection,
     'popup-dialog': PopupDialog,
+    preview: { // POC
+      data: () => Store,
+      template: '<div v-html="activeFile.html"></div>',
+    },
+  },
+
+  mounted() {
+    RepoHelper.getContent().then(() => {
+
+    }).catch(RepoHelper.loadingError);
   },
 
   methods: {
@@ -31,6 +42,8 @@ export default {
       this.dialog.open = false;
       this.dialog.status = status;
     },
+
+    toggleBlobView: Store.toggleBlobView,
   },
 };
 </script>
@@ -40,8 +53,8 @@ export default {
   <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
     <repo-tabs/>
     <repo-file-buttons/>
-    <repo-editor/>
-    <repo-binary-viewer/>
+    <component :is="currentBlobView"></component>
+    <!-- <repo-binary-viewer/> soon™ -->
   </div>
   <repo-commit-section/>
   <popup-dialog

app/assets/javascripts/repo/components/repo_edit_button.vue

@@ -21,14 +21,15 @@ export default {
         return;
       }
       this.editMode = !this.editMode;
+      Store.toggleBlobView();
     },
   },
 }
 </script>
 
 <template>
-<a href="#" @click.prevent="editClicked" v-cloak v-if="isCommitable">
+<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable" :disabled="binary">
   <i :class="buttonIcon"></i>
   <span>{{buttonLabel}}</span>
-</a>
+</button>
 </template>

app/assets/javascripts/repo/components/repo_editor.vue

@@ -17,14 +17,12 @@ const RepoEditor = {
 
     this.addMonacoEvents();
 
-    Helper.getContent().then(() => {
-      const languages = this.monaco.languages.getLanguages();
-      const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
-      this.showHide();
-      const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
+    const languages = this.monaco.languages.getLanguages();
+    const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
+    this.showHide();
+    const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
 
-      this.monacoInstance.setModel(newModel);
-    }).catch(Helper.loadingError);
+    this.monacoInstance.setModel(newModel);
   },
 
   methods: {

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -166,6 +166,7 @@ const RepoHelper = {
           const rawUrl = RepoHelper.getRawURLFromBlobURL(file.url || Service.url);
           RepoHelper.setBinaryDataAsBase64(rawUrl, data);
           data.binary = true;
+          Store.currentBlobView = 'preview';
         } else {
           Service.getRaw(data.raw_path)
           .then(response => {

app/assets/javascripts/repo/stores/repo_store.js

@@ -20,6 +20,7 @@ const RepoStore = {
   submodules: [],
   blobRaw: '',
   blobRendered: '',
+  currentBlobView: 'preview',
   openedFiles: [],
   tabSize: 100,
   defaultTabSize: 100,
@@ -211,6 +212,11 @@ const RepoStore = {
     currentFile.newContent = contents;
   },
 
+  toggleBlobView() {
+    console.log('toggleBlobView');
+    RepoStore.currentBlobView = RepoStore.currentBlobView === 'preview' ? 'repo-editor' : 'preview';
+  },
+
   // getters
 
   isActiveFile(file) {

app/assets/stylesheets/pages/repo.scss

@@ -38,6 +38,10 @@
   @include truncate(250px);
 }
 
+#editable-mode {
+  display: inline-block;
+}
+
 .tree-content-holder {
   border: 1px solid $border-color;
   border-radius: $border-radius-default;

app/views/shared/repo/_editable_mode.html.haml

@@ -1,2 +1,2 @@
-%a.btn.btn-default#editable-mode
+#editable-mode
   %repo-edit-button