Initial line linking.

app/assets/javascripts/repo/repo_editor.js

@@ -9,6 +9,20 @@ export default class RepoEditor {
     this.el = document.getElementById('ide');
   }
 
+  addMonacoEvents() {
+    this.vue.$watch('activeFile.lineNumber', () => {
+      console.log('cahnged')
+    })
+    this.monacoEditor.onMouseUp(this.onMonacoEditorMouseUp);
+  }
+
+  onMonacoEditorMouseUp(e) {
+    if(e.target.element.className === 'line-numbers') {
+      location.hash = `L${e.target.position.lineNumber}`;
+      Store.activeLine = e.target.position.lineNumber;
+    }
+  }
+
   initMonaco() {
     window.require.config({ paths: { vs: '/monaco-editor/min/vs' } });
     window.require(['vs/editor/editor.main'], () => {
@@ -19,10 +33,12 @@ export default class RepoEditor {
           readOnly: true,
           contextmenu: false,
         }
-      )
+      );
+
       Helper.monacoInstance = monaco;
       this.initVue();
       monaco.languages.getLanguages();
+      this.addMonacoEvents();
     });
   }
 
@@ -54,6 +70,13 @@ export default class RepoEditor {
       },
 
       watch: {
+        activeLine() {
+          self.monacoEditor.setPosition({
+            lineNumber: this.activeLine,
+            column: 1
+          });
+        },
+
         isTree() {
           this.showHide();
         },

app/assets/javascripts/repo/repo_file_buttons.js

@@ -14,7 +14,7 @@ export default class RepoSidebar {
       el: '#repo-file-buttons',
       data: () => Store,
       template: `
-      <div id='repo-file-buttons' v-if='!isTree'>
+      <div id='repo-file-buttons' v-if='isMini'>
         <a :href='rawFileURL' target='_blank' class='btn btn-default'>Download file</a>
         <div class="btn-group" role="group" aria-label="File actions">
           <a :href='blameFileUrl' class='btn btn-default'>Blame</a>
@@ -36,7 +36,6 @@ export default class RepoSidebar {
         },
 
         rawFileURL() { 
-          console.log(this.activeFile)
           return Helper.getRawURLFromBlobURL(this.activeFile.url);
         },
 

app/assets/javascripts/repo/repo_helper.js

@@ -37,7 +37,6 @@ let RepoHelper = {
       split[blobIndex] = 'tree';
     }
     joined = split.join('/');
-    console.log(split)
     return split.join('/');
   },
 
@@ -164,14 +163,12 @@ let RepoHelper = {
 
     // may be tree or file.
   getContent(file) {
-    console.log('file')
     const loadingData = this.setLoading(true);
     Service.getContent()
     .then((response) => {
       let data = response.data;
       this.setLoading(false, loadingData);
       Store.isTree = this.isTree(data);
-
       if(!Store.isTree) {
         if(!file) {
           file = data;
@@ -185,7 +182,6 @@ let RepoHelper = {
             data
           );
           data.binary = true;
-          console.log('file1', file)
           if(!file.url) {
             file.url = location.pathname;
           }
@@ -194,7 +190,6 @@ let RepoHelper = {
           this.setActiveFile(data);
         } else {
           Store.blobRaw = data.plain;
-          console.log('file2', file)
           if(!file.url) {
             file.url = location.pathname;
           }
@@ -219,7 +214,6 @@ let RepoHelper = {
       }
     })
     .catch((response)=> {
-      console.log('response',response)
       this.setLoading(false, loadingData);
       new Flash('Unable to load the file at this time.')
     });

app/assets/javascripts/repo/repo_sidebar.js

@@ -35,6 +35,7 @@ export default class RepoSidebar {
       methods: {
         addPopEventListener() {
           window.addEventListener('popstate', () => {
+            if(location.href.indexOf('#') > -1) return;
             this.linkClicked({
               url: location.href
             });

app/assets/javascripts/repo/repo_store.js

@@ -21,6 +21,7 @@ let RepoStore = {
     size: 0,
     url: ''
   },
+  activeLine: 0,
   files: [],
   binary: false,
   binaryMimeType: '',

app/assets/stylesheets/pages/repo.scss

@@ -28,10 +28,19 @@ header {
   display: inline-block;
   width: 85%;
  
-  .monaco-editor.vs .cursor {
+  .monaco-editor.vs {
+    .line-numbers{
+      cursor: pointer;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    .cursor {
       background: rgba(255,255,255,0);
       border-color: rgba(255,255,255,0);
     }
+  }
 
   #tabs {
     height: 41px;