Skip to content

G
gitlab-ce
Commit 27ab1150 authored by Luke "Jared" Bennett's avatar Luke "Jared" Bennett
Browse files
Options

Add root vue instance

parent 9646330e
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 139 deletions
app/assets/javascripts/repo/index.js
View file @ 27ab1150
/* global monaco */ /* global monaco */
import $ from 'jquery'; import $ from 'jquery';
import Sidebar from './repo_sidebar'; import Vue from 'vue';
import RepoSidebar from './repo_sidebar.vue';
import EditButton from './repo_edit_button'; import EditButton from './repo_edit_button';
import CommitSection from './repo_commit_section'; import CommitSection from './repo_commit_section';
import Service from './repo_service'; import Service from './repo_service';
import Store from './repo_store'; import Store from './repo_store';
import Helper from './repo_helper'; import RepoTabs from './repo_tabs.vue';
import monacoLoader from './monaco_loader'; import RepoFileButtons from './repo_file_buttons.vue';
import RepoBinaryViewer from './repo_binary_viewer.vue';
import RepoEditor from './repo_editor.vue';
import RepoMiniMixin from './repo_mini_mixin';
function initMonaco(el, cb) { function initRepo() {
monacoLoader(['vs/editor/editor.main'], () => { const repo = document.getElementById('repo');
const monacoInstance = monaco.editor.create(el, {
model: null,
readOnly: true,
contextmenu: false,
});
cb(monacoInstance); Store.service = Service;
Store.service.url = repo.dataset.url;
new Vue({
el: repo,
data: () => Store,
template: `
<div class="tree-content-holder">
<repo-sidebar/>
<div class="panel-right">
<repo-tabs/>
<repo-file-buttons/>
<repo-editor/>
<repo-binary-viewer/>
</div>
</div>
`,
mixins: [RepoMiniMixin],
components: {
'repo-sidebar': RepoSidebar,
'repo-tabs': RepoTabs,
'repo-file-buttons': RepoFileButtons,
'repo-binary-viewer': RepoBinaryViewer,
'repo-editor': RepoEditor,
},
}); });
}
function initRepo() {
const sidebar = document.getElementById('sidebar');
const editButton = document.getElementById('editable-mode'); const editButton = document.getElementById('editable-mode');
const commitSection = document.getElementById('commit-area'); const commitSection = document.getElementById('commit-area');
Store.service = Service;
Store.service.url = sidebar.dataset.url;
Store.editButton = new EditButton(editButton); Store.editButton = new EditButton(editButton);
Store.commitSection = new CommitSection(commitSection); Store.commitSection = new CommitSection(commitSection);
initMonaco(sidebar, (monacoInstance) => {
Store.monacoInstance = monacoInstance;
Store.sidebar = new Sidebar(sidebar);
Helper.getContent();
});
} }
$(initRepo); $(initRepo);
......
app/assets/javascripts/repo/repo_editor.vue
View file @ 27ab1150
...@@ -3,19 +3,33 @@ ...@@ -3,19 +3,33 @@
import Vue from 'vue'; import Vue from 'vue';
import Store from './repo_store'; import Store from './repo_store';
import Helper from './repo_helper'; import Helper from './repo_helper';
import monacoLoader from './monaco_loader';
const RepoEditor = { const RepoEditor = {
data: () => Store, data: () => Store,
mounted() { mounted() {
this.addMonacoEvents(); monacoLoader(['vs/editor/editor.main'], () => {
this.showHide(); const monacoInstance = monaco.editor.create(this.$el, {
model: null,
readOnly: true,
contextmenu: false,
});
Store.monacoInstance = monacoInstance;
this.addMonacoEvents();
if (this.blobRaw === '') return; Helper.getContent().then(() => {
this.showHide();
const newModel = monaco.editor.createModel(this.blobRaw, 'plaintext'); if (this.blobRaw === '') return;
this.monacoInstance.setModel(newModel); const newModel = monaco.editor.createModel(this.blobRaw, 'plaintext');
this.monacoInstance.setModel(newModel);
});
});
}, },
methods: { methods: {
...@@ -28,12 +42,12 @@ const RepoEditor = { ...@@ -28,12 +42,12 @@ const RepoEditor = {
}, },
addMonacoEvents() { addMonacoEvents() {
this.monacoEditor.onMouseUp(this.onMonacoEditorMouseUp); this.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp);
this.monacoEditor.onKeyUp(this.onMonacoEditorKeysPressed.bind(this)); this.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this));
}, },
onMonacoEditorKeysPressed() { onMonacoEditorKeysPressed() {
Store.setActiveFileContents(this.monacoEditor.getValue()); Store.setActiveFileContents(this.monacoInstance.getValue());
}, },
onMonacoEditorMouseUp(e) { onMonacoEditorMouseUp(e) {
......
app/assets/javascripts/repo/repo_helper.js
View file @ 27ab1150
...@@ -96,7 +96,7 @@ const RepoHelper = { ...@@ -96,7 +96,7 @@ const RepoHelper = {
getContent(treeOrFile, cb) { getContent(treeOrFile, cb) {
let file = treeOrFile; let file = treeOrFile;
// const loadingData = RepoHelper.setLoading(true); // const loadingData = RepoHelper.setLoading(true);
Service.getContent() return Service.getContent()
.then((response) => { .then((response) => {
const data = response.data; const data = response.data;
// RepoHelper.setLoading(false, loadingData); // RepoHelper.setLoading(false, loadingData);
...@@ -178,10 +178,10 @@ const RepoHelper = { ...@@ -178,10 +178,10 @@ const RepoHelper = {
}; };
}, },
scrollTabsRight() { scrollTabsRight() {
// wait for the transition. 0.1 seconds. // wait for the transition. 0.1 seconds.
setTimeout(() => { setTimeout(() => {
document.getElementById('tabs').scrollLeft = 12000; document.getElementById('tabs').scrollLeft = 12000;
}, 200) }, 200)
......
app/assets/javascripts/repo/repo_sidebar.js deleted 100644 → 0
View file @ 9646330e
import Vue from 'vue';
import Service from './repo_service';
import Helper from './repo_helper';
import Store from './repo_store';
import RepoPreviousDirectory from './repo_prev_directory.vue';
import RepoFileOptions from './repo_file_options.vue';
import RepoFile from './repo_file.vue';
import RepoLoadingFile from './repo_loading_file.vue';
import RepoTabs from './repo_tabs.vue';
import RepoFileButtons from './repo_file_buttons.vue';
import RepoBinaryViewer from './repo_binary_viewer.vue';
import RepoEditor from './repo_editor.vue';
import RepoMiniMixin from './repo_mini_mixin';
export default class RepoSidebar {
constructor(el) {
this.initVue(el);
}
initVue(el) {
this.vue = new Vue({
el,
mixins: [RepoMiniMixin],
components: {
'repo-file-options': RepoFileOptions,
'repo-previous-directory': RepoPreviousDirectory,
'repo-file': RepoFile,
'repo-loading-file': RepoLoadingFile,
'repo-tabs': RepoTabs,
'repo-file-buttons': RepoFileButtons,
'repo-binary-viewer': RepoBinaryViewer,
'repo-editor': RepoEditor,
},
created() {
this.addPopEventListener();
},
data: () => Store,
methods: {
addPopEventListener() {
window.addEventListener('popstate', () => {
if (location.href.indexOf('#') > -1) return;
this.linkClicked({
url: location.href,
});
});
},
linkClicked(clickedFile) {
let url = '';
let file = clickedFile;
if (typeof file === 'object') {
file.loading = true;
if (file.type === 'tree' && file.opened) {
file = Store.removeChildFilesOfTree(file);
file.loading = false;
} else {
url = file.url;
Service.url = url;
// I need to refactor this to do the `then` here.
// Not a callback. For now this is good enough.
// it works.
Helper.getContent(file, () => {
file.loading = false;
Helper.scrollTabsRight();
});
}
} else if (typeof file === 'string') {
// go back
url = file;
Service.url = url;
Helper.getContent(null, () => {
Helper.scrollTabsRight();
});
}
},
},
});
}
}
app/assets/javascripts/repo/repo_sidebar.vue 0 → 100644
View file @ 27ab1150
<script>
import Vue from 'vue';
import Service from './repo_service';
import Helper from './repo_helper';
import Store from './repo_store';
import RepoPreviousDirectory from './repo_prev_directory.vue';
import RepoFileOptions from './repo_file_options.vue';
import RepoFile from './repo_file.vue';
import RepoLoadingFile from './repo_loading_file.vue';
import RepoMiniMixin from './repo_mini_mixin';
const RepoSidebar = {
mixins: [RepoMiniMixin],
components: {
'repo-file-options': RepoFileOptions,
'repo-previous-directory': RepoPreviousDirectory,
'repo-file': RepoFile,
'repo-loading-file': RepoLoadingFile,
},
created() {
this.addPopEventListener();
},
data: () => Store,
methods: {
addPopEventListener() {
window.addEventListener('popstate', () => {
if (location.href.indexOf('#') > -1) return;
this.linkClicked({
url: location.href,
});
});
},
linkClicked(clickedFile) {
let url = '';
let file = clickedFile;
if (typeof file === 'object') {
file.loading = true;
if (file.type === 'tree' && file.opened) {
file = Store.removeChildFilesOfTree(file);
file.loading = false;
} else {
url = file.url;
Service.url = url;
// I need to refactor this to do the `then` here.
// Not a callback. For now this is good enough.
// it works.
Helper.getContent(file, () => {
file.loading = false;
Helper.scrollTabsRight();
});
}
} else if (typeof file === 'string') {
// go back
url = file;
Service.url = url;
Helper.getContent(null, () => {
Helper.scrollTabsRight();
});
}
},
},
};
export default RepoSidebar;
</script>
<template>
<div id="sidebar" :class="{'sidebar-mini' : isMini}" v-cloak>
<table class="table">
<thead v-if="!isMini">
<th v-if="!isMini">
Name
</th>
<th v-else>
Project
</th>
<th class="hidden-sm hidden-xs" v-if="!isMini">
Last Commit
</th>
<th class="hidden-xs" v-if="!isMini">
Last Update
</th>
</thead>
<tbody>
<repo-file-options
:is-mini="isMini"
project-name="TODO"/>
<repo-previous-directory
:prev-url="prevURL"
@linkclicked="linkClicked(prevURL)"/>
<repo-loading-file
v-for="n in 5"
:loading="loading"
:has-files="!!files.length"
:is-mini="isMini"/>
<repo-file
v-for="file in files"
:key="file.id"
:file="file"
:is-mini="isMini"
@linkclicked="linkClicked(file)"
:is-tree="isTree"
:has-files="!!files.length"
:active-file="activeFile"/>
</tbody>
</table>
</div>
</template>
app/assets/javascripts/repo/repo_tabs.vue
View file @ 27ab1150
...@@ -7,7 +7,7 @@ import RepoMiniMixin from './repo_mini_mixin'; ...@@ -7,7 +7,7 @@ import RepoMiniMixin from './repo_mini_mixin';
const RepoTabs = { const RepoTabs = {
mixins: [RepoMiniMixin], mixins: [RepoMiniMixin],
components: { components: {
'repo-tab': RepoTab, 'repo-tab': RepoTab,
}, },
......
app/views/projects/tree/_tree_content.html.haml
View file @ 27ab1150
.tree-content-holder #repo{ data: { url: repo_url(@project) } }
#sidebar{ ":class" => "{'sidebar-mini' : isMini}", "v-cloak" => "1", data: { url: repo_url(@project) } }<
%table.table
%thead{ "v-if" => "!isMini" }
%th{ "v-if" => "!isMini" }
Name
%th{ "v-else" => "1" }
Project
%th.hidden-sm.hidden-xs{ "v-if" => "!isMini" }
Last Commit
%th.hidden-xs{ "v-if" => "!isMini" }
Last Update
%tbody
%tr{ is: "repo-file-options", ":is-mini" => "isMini", "project-name" => @project.name }
%tr{ is: "repo-previous-directory", ":prev-url" => "prevURL", "@linkclicked" => "linkClicked(prevURL)" }
%tr{ is: "repo-loading-file", "v-for" => "n in 5", ":loading" => "loading", ":has-files" => "!!files.length", ":is-mini" => "isMini" }
%tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":has-files" => "!!files.length", ":active-file" => "activeFile" }
.panel-right>
%repo-tabs
%repo-file-buttons
%repo-editor
%repo-binary-viewer
#commit-area{ "v-if" => "changedFiles.length" } #commit-area{ "v-if" => "changedFiles.length" }
%form.form-horizontal %form.form-horizontal
%fieldset %fieldset
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7