Removed queries from vue implementor constructors

app/assets/javascripts/repo/index.js

@@ -11,15 +11,26 @@ import Store from './repo_store';
 import Helper from './repo_helper';
 
 $(() => {
-  const url = document.getElementById('ide').dataset.url;
+  const ide = document.getElementById('ide');
+  const tabs = document.getElementById('tabs');
+  const sidebar = document.getElementById('sidebar');
+  const fileButtons = document.getElementById('repo-file-buttons');
+  const editButton = document.getElementById('editable-mode');
+  const commitSection = document.getElementById('commit-area');
+  const binaryViewer = document.getElementById('binary-viewer');
+
+  const url = ide.dataset.url;
+
   Store.service = Service;
   Store.service.url = url;
-  Store.tabs = new Tabs();
-  Store.sidebar = new Sidebar(url);
-  Store.editor = new Editor();
-  Store.buttons = new FileButtons();
-  Store.editButton = new EditButton();
-  Store.commitSection = new CommitSection();
-  Store.binaryViewer = new BinaryViewer();
+
+  Store.tabs = new Tabs(tabs);
+  Store.sidebar = new Sidebar(sidebar);
+  Store.editor = new Editor(ide);
+  Store.buttons = new FileButtons(fileButtons);
+  Store.editButton = new EditButton(editButton);
+  Store.commitSection = new CommitSection(commitSection);
+  Store.binaryViewer = new BinaryViewer(binaryViewer);
+
   Helper.getContent();
 });

app/assets/javascripts/repo/repo_binary_viewer.js

@@ -3,13 +3,13 @@ import Store from './repo_store';
 import RepoHelper from './repo_helper';
 
 export default class RepoBinaryViewer {
-  constructor() {
-    this.initVue();
+  constructor(el) {
+    this.initVue(el);
   }
 
-  initVue() {
+  initVue(el) {
     this.vue = new Vue({
-      el: '#binary-viewer',
+      el,
 
       data: () => Store,
 

app/assets/javascripts/repo/repo_commit_section.js

@@ -2,14 +2,13 @@ import Vue from 'vue';
 import Store from './repo_store';
 
 export default class RepoCommitSection {
-  constructor() {
-    this.initVue();
-    this.el = document.getElementById('commit-area');
+  constructor(el) {
+    this.initVue(el);
   }
 
-  initVue() {
+  initVue(el) {
     this.vue = new Vue({
-      el: '#commit-area',
+      el,
       data: () => Store,
 
       computed: {

app/assets/javascripts/repo/repo_edit_button.js

@@ -2,14 +2,13 @@ import Vue from 'vue';
 import Store from './repo_store';
 
 export default class RepoEditButton {
-  constructor() {
-    this.initVue();
-    this.el = document.getElementById('editable-mode');
+  constructor(el) {
+    this.initVue(el);
   }
 
-  initVue() {
+  initVue(el) {
     this.vue = new Vue({
-      el: '#editable-mode',
+      el,
       data: () => Store,
       computed: {
         buttonLabel() {

app/assets/javascripts/repo/repo_editor.js

@@ -5,9 +5,9 @@ import Helper from './repo_helper';
 import monacoLoader from './monaco_loader';
 
 export default class RepoEditor {
-  constructor() {
+  constructor(el) {
     this.initMonaco();
-    this.el = document.getElementById('ide');
+    this.el = el;
   }
 
   addMonacoEvents() {
@@ -38,13 +38,12 @@ export default class RepoEditor {
 
   initVue() {
     const self = this;
-    const monacoEditor = this.monacoEditor;
     this.vue = new Vue({
       data: () => Store,
       created() {
         this.showHide();
         if (this.blobRaw !== '') {
-          monacoEditor.setModel(
+          self.monacoEditor.setModel(
             monaco.editor.createModel(
               this.blobRaw,
               'plain',

app/assets/javascripts/repo/repo_file_buttons.js

@@ -4,15 +4,13 @@ import Helper from './repo_helper';
 import RepoMiniMixin from './repo_mini_mixin';
 
 export default class RepoFileButtons {
-  constructor(url) {
-    this.url = url;
-    this.initVue();
-    this.el = document.getElementById('repo-file-buttons');
+  constructor(el) {
+    this.initVue(el);
   }
 
-  initVue() {
+  initVue(el) {
     this.vue = new Vue({
-      el: '#repo-file-buttons',
+      el,
       data: () => Store,
       mixins: [RepoMiniMixin],
       template: `

app/assets/javascripts/repo/repo_sidebar.js

@@ -9,15 +9,13 @@ import RepoLoadingFile from './repo_loading_file';
 import RepoMiniMixin from './repo_mini_mixin';
 
 export default class RepoSidebar {
-  constructor(url) {
-    this.url = url;
-    this.initVue();
-    this.el = document.getElementById('ide');
+  constructor(el) {
+    this.initVue(el);
   }
 
-  initVue() {
+  initVue(el) {
     this.vue = new Vue({
-      el: '#sidebar',
+      el,
       mixins: [RepoMiniMixin],
       components: {
         'repo-file-options': RepoFileOptions,

app/assets/javascripts/repo/repo_tabs.js

@@ -4,14 +4,14 @@ import RepoTab from './repo_tab';
 import RepoMiniMixin from './repo_mini_mixin';
 
 export default class RepoTabs {
-  constructor() {
+  constructor(el) {
     RepoTabs.styleTabsForWindows();
-    this.initVue();
+    this.initVue(el);
   }
 
-  initVue() {
+  initVue(el) {
     this.vue = new Vue({
-      el: '#tabs',
+      el,
       mixins: [RepoMiniMixin],
       components: {
         'repo-tab': RepoTab,