Navigate to new tree.
This commit is contained in:
parent
7e9100fca9
commit
6a43c200ef
13 changed files with 171 additions and 37 deletions
|
@ -2,6 +2,7 @@ import Sidebar from './repo_sidebar'
|
|||
import Editor from './repo_editor'
|
||||
import Service from './repo_service'
|
||||
import Store from './repo_store'
|
||||
import Helper from './repo_helper'
|
||||
|
||||
export default class RepoBundle {
|
||||
constructor() {
|
||||
|
@ -10,6 +11,6 @@ export default class RepoBundle {
|
|||
Store.service.url = url;
|
||||
Store.sidebar = new Sidebar(url);
|
||||
Store.editor = new Editor();
|
||||
Store.sidebar.getContent();
|
||||
Helper.getContent();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@ import Store from './repo_store'
|
|||
export default class RepoEditor {
|
||||
constructor() {
|
||||
this.initMonaco();
|
||||
this.el = document.getElementById('ide');
|
||||
}
|
||||
|
||||
initMonaco() {
|
||||
|
@ -21,13 +22,12 @@ export default class RepoEditor {
|
|||
}
|
||||
|
||||
initVue() {
|
||||
const self = this;
|
||||
const monacoEditor = this.monacoEditor;
|
||||
this.vue = new Vue({
|
||||
data: () => Store,
|
||||
|
||||
created () {
|
||||
if(this.blobRaw !== ''){
|
||||
console.log(monacoEditor)
|
||||
monacoEditor.setModel(
|
||||
monaco.editor.createModel(
|
||||
this.blobRaw,
|
||||
|
@ -35,6 +35,12 @@ export default class RepoEditor {
|
|||
)
|
||||
);
|
||||
}
|
||||
|
||||
if(this.isTree) {
|
||||
self.el.styles = 'display: none';
|
||||
} else {
|
||||
self.el.styles = 'display: inline-block';
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
19
app/assets/javascripts/repo/repo_file.js
Normal file
19
app/assets/javascripts/repo/repo_file.js
Normal file
|
@ -0,0 +1,19 @@
|
|||
let RepoFile = {
|
||||
template: `
|
||||
<li>
|
||||
<i class='fa' :class='file.icon'></i>
|
||||
<a :href='file.url' @click.prevent='linkClicked(file)'>{{file.name}}</a>
|
||||
</li>
|
||||
`,
|
||||
props: {
|
||||
name: 'repo-file',
|
||||
file: Object,
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkClicked(file) {
|
||||
this.$emit('linkclicked', file);
|
||||
}
|
||||
}
|
||||
};
|
||||
export default RepoFile;
|
|
@ -1,8 +1,16 @@
|
|||
import Service from './repo_service'
|
||||
import Store from './repo_store'
|
||||
|
||||
let RepoHelper = {
|
||||
isTree(data) {
|
||||
return data.hasOwnProperty('blobs');
|
||||
},
|
||||
|
||||
Time: window.performance
|
||||
&& window.performance.now
|
||||
? window.performance
|
||||
: Date,
|
||||
|
||||
blobURLtoParent(url) {
|
||||
const split = url.split('/');
|
||||
split.pop();
|
||||
|
@ -11,6 +19,92 @@ let RepoHelper = {
|
|||
split[blobIndex] = 'tree';
|
||||
}
|
||||
return split.join('/');
|
||||
},
|
||||
|
||||
// may be tree or file.
|
||||
getContent() {
|
||||
Service.getContent()
|
||||
.then((response)=> {
|
||||
let data = response.data;
|
||||
Store.isTree = this.isTree(data);
|
||||
if(!Store.isTree) {
|
||||
// it's a blob
|
||||
const parentURL = this.blobURLtoParent(Service.url);
|
||||
Store.blobRaw = data.plain;
|
||||
Service.getContent(parentURL)
|
||||
.then((response)=> {
|
||||
console.log(response.data)
|
||||
})
|
||||
.catch((response)=> {
|
||||
|
||||
});
|
||||
} else {
|
||||
// it's a tree
|
||||
Store.files = this.dataToListOfFiles(data);
|
||||
}
|
||||
})
|
||||
.catch((response)=> {
|
||||
console.log('error response', response);
|
||||
});
|
||||
},
|
||||
|
||||
toFA(icon) {
|
||||
return `fa-${icon}`
|
||||
},
|
||||
|
||||
dataToListOfFiles(data) {
|
||||
let a = [];
|
||||
|
||||
//push in blobs
|
||||
data.blobs.forEach((blob) => {
|
||||
a.push({
|
||||
type: 'blob',
|
||||
name: blob.name,
|
||||
url: blob.url,
|
||||
icon: this.toFA(blob.icon)
|
||||
})
|
||||
});
|
||||
|
||||
data.trees.forEach((tree) => {
|
||||
a.push({
|
||||
type: 'tree',
|
||||
name: tree.name,
|
||||
url: tree.url,
|
||||
icon: this.toFA(tree.icon)
|
||||
})
|
||||
});
|
||||
|
||||
data.submodules.forEach((submodule) => {
|
||||
a.push({
|
||||
type: 'submodule',
|
||||
name: submodule.name,
|
||||
url: submodule.url,
|
||||
icon: this.toFA(submodule.icon)
|
||||
})
|
||||
});
|
||||
|
||||
return a;
|
||||
},
|
||||
|
||||
genKey () {
|
||||
return this.Time.now().toFixed(3)
|
||||
},
|
||||
|
||||
_key: '',
|
||||
|
||||
getStateKey () {
|
||||
return this._key
|
||||
},
|
||||
|
||||
setStateKey (key) {
|
||||
this._key = key;
|
||||
},
|
||||
|
||||
toURL(url) {
|
||||
var history = window.history;
|
||||
this._key = this.genKey();
|
||||
history.pushState({ key: this._key }, '', url);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -2,6 +2,11 @@ import axios from 'axios';
|
|||
|
||||
let RepoService = {
|
||||
url: '',
|
||||
params: {
|
||||
params: {
|
||||
format: 'json'
|
||||
}
|
||||
},
|
||||
|
||||
setUrl(url) {
|
||||
this.url = url;
|
||||
|
@ -9,9 +14,9 @@ let RepoService = {
|
|||
|
||||
getContent(url) {
|
||||
if(url){
|
||||
return axios.get(url);
|
||||
return axios.get(url, this.params);
|
||||
}
|
||||
return axios.get(this.url);
|
||||
return axios.get(this.url, this.params);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -1,37 +1,32 @@
|
|||
import Service from './repo_service'
|
||||
import Helper from './repo_helper'
|
||||
import Vue from 'vue';
|
||||
import Vue from 'vue'
|
||||
import Store from './repo_store'
|
||||
import RepoFile from './repo_file'
|
||||
|
||||
export default class RepoSidebar {
|
||||
constructor(url) {
|
||||
this.url = url;
|
||||
this.initVue();
|
||||
this.el = document.getElementById('ide');
|
||||
}
|
||||
|
||||
// may be tree or file.
|
||||
getContent() {
|
||||
Service.getContent()
|
||||
.then((response)=> {
|
||||
let data = response.data;
|
||||
Store.isTree = Helper.isTree(data);
|
||||
if(!Store.isTree) {
|
||||
// it's a blob
|
||||
const parentURL = Helper.blobURLtoParent(Service.url);
|
||||
Store.blobRaw = data.plain;
|
||||
Service.getContent(parentURL + '/?format=json')
|
||||
.then((response)=> {
|
||||
console.log(response.data)
|
||||
})
|
||||
.catch((response)=> {
|
||||
initVue() {
|
||||
this.vue = new Vue({
|
||||
el: '#sidebar',
|
||||
components: {
|
||||
'repo-file':RepoFile,
|
||||
},
|
||||
|
||||
});
|
||||
} else {
|
||||
data: () => Store,
|
||||
|
||||
methods: {
|
||||
linkClicked(file) {
|
||||
Service.url = file.url;
|
||||
Helper.getContent();
|
||||
Helper.toURL(file.url);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((response)=> {
|
||||
console.log('error response', response);
|
||||
});
|
||||
}
|
||||
|
||||
initVue() {}
|
||||
}
|
|
@ -8,6 +8,8 @@ let RepoStore = {
|
|||
blobs: [],
|
||||
submodules: [],
|
||||
blobRaw: '',
|
||||
blobRendered: ''
|
||||
blobRendered: '',
|
||||
|
||||
files: []
|
||||
};
|
||||
export default RepoStore;
|
||||
|
|
14
app/assets/stylesheets/pages/repo.scss
Normal file
14
app/assets/stylesheets/pages/repo.scss
Normal file
|
@ -0,0 +1,14 @@
|
|||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
li {
|
||||
border-bottom: 1px solid $border-gray-normal;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -12,7 +12,7 @@ module RendersBlob
|
|||
blob.simple_viewer
|
||||
end
|
||||
return render_404 unless viewer
|
||||
|
||||
puts blob
|
||||
render json: {
|
||||
html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false),
|
||||
plain: blob.data,
|
||||
|
|
|
@ -13,7 +13,7 @@ module TreeHelper
|
|||
end
|
||||
|
||||
def repo_url()
|
||||
url_for(params.merge(format: :json))
|
||||
request.original_url
|
||||
end
|
||||
|
||||
# Return an image icon depending on the file type and mode
|
||||
|
|
|
@ -5,10 +5,4 @@
|
|||
.nav-block
|
||||
= render 'projects/tree/tree_header', tree: @tree
|
||||
|
||||
- if commit
|
||||
.info-well.hidden-xs.project-last-commit.append-bottom-default
|
||||
.well-segment
|
||||
%ul.blob-commit-info
|
||||
= render 'projects/commits/commit', commit: commit, ref: ref, project: project
|
||||
|
||||
= render 'projects/tree/tree_content', tree: @tree
|
||||
|
|
|
@ -8,4 +8,5 @@
|
|||
= render "projects/blob/auxiliary_viewer", blob: blob
|
||||
|
||||
#blob-content-holder.blob-content-holder
|
||||
#sidebar
|
||||
#ide{ data: { url: repo_url }, style: "height:400px;" }
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
.tree-content-holder
|
||||
#sidebar
|
||||
%ul
|
||||
%repo-file{ "v-for"=> "file in files", ":file" => "file","@linkclicked" => "linkClicked(file)" }
|
||||
#ide{ data: { url: repo_url }, style: "height:400px;" }
|
||||
|
||||
- if tree.readme
|
||||
|
|
Loading…
Reference in a new issue