From 6a43c200efdfe3e5f0b9d3cc455994d7286d8de9 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 20 Jun 2017 08:21:07 -0400 Subject: [PATCH] Navigate to new tree. --- app/assets/javascripts/repo/repo_bundle.js | 3 +- app/assets/javascripts/repo/repo_editor.js | 10 +- app/assets/javascripts/repo/repo_file.js | 19 ++++ app/assets/javascripts/repo/repo_helper.js | 94 +++++++++++++++++++ app/assets/javascripts/repo/repo_service.js | 9 +- app/assets/javascripts/repo/repo_sidebar.js | 41 ++++---- app/assets/javascripts/repo/repo_store.js | 4 +- app/assets/stylesheets/pages/repo.scss | 14 +++ app/controllers/concerns/renders_blob.rb | 2 +- app/helpers/tree_helper.rb | 2 +- app/views/projects/_files.html.haml | 6 -- app/views/projects/blob/_blob.html.haml | 1 + .../projects/tree/_tree_content.html.haml | 3 + 13 files changed, 171 insertions(+), 37 deletions(-) create mode 100644 app/assets/javascripts/repo/repo_file.js create mode 100644 app/assets/stylesheets/pages/repo.scss diff --git a/app/assets/javascripts/repo/repo_bundle.js b/app/assets/javascripts/repo/repo_bundle.js index 565f15f622d..aff91badbae 100644 --- a/app/assets/javascripts/repo/repo_bundle.js +++ b/app/assets/javascripts/repo/repo_bundle.js @@ -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(); } } diff --git a/app/assets/javascripts/repo/repo_editor.js b/app/assets/javascripts/repo/repo_editor.js index 57b093f3996..a780cf3596c 100644 --- a/app/assets/javascripts/repo/repo_editor.js +++ b/app/assets/javascripts/repo/repo_editor.js @@ -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: { diff --git a/app/assets/javascripts/repo/repo_file.js b/app/assets/javascripts/repo/repo_file.js new file mode 100644 index 00000000000..9e185751a96 --- /dev/null +++ b/app/assets/javascripts/repo/repo_file.js @@ -0,0 +1,19 @@ +let RepoFile = { + template: ` +
  • + + {{file.name}} +
    • + `, + props: { + name: 'repo-file', + file: Object, + }, + + methods: { + linkClicked(file) { + this.$emit('linkclicked', file); + } + } +}; +export default RepoFile; diff --git a/app/assets/javascripts/repo/repo_helper.js b/app/assets/javascripts/repo/repo_helper.js index 78f4b7251fe..389e732c9f7 100644 --- a/app/assets/javascripts/repo/repo_helper.js +++ b/app/assets/javascripts/repo/repo_helper.js @@ -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); } }; diff --git a/app/assets/javascripts/repo/repo_service.js b/app/assets/javascripts/repo/repo_service.js index a1613e5d464..6541bc4f339 100644 --- a/app/assets/javascripts/repo/repo_service.js +++ b/app/assets/javascripts/repo/repo_service.js @@ -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); } }; diff --git a/app/assets/javascripts/repo/repo_sidebar.js b/app/assets/javascripts/repo/repo_sidebar.js index 0f54dc1e3f4..375a1218f10 100644 --- a/app/assets/javascripts/repo/repo_sidebar.js +++ b/app/assets/javascripts/repo/repo_sidebar.js @@ -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() {} } \ No newline at end of file diff --git a/app/assets/javascripts/repo/repo_store.js b/app/assets/javascripts/repo/repo_store.js index 7809aa30758..50e443bff0c 100644 --- a/app/assets/javascripts/repo/repo_store.js +++ b/app/assets/javascripts/repo/repo_store.js @@ -8,6 +8,8 @@ let RepoStore = { blobs: [], submodules: [], blobRaw: '', - blobRendered: '' + blobRendered: '', + + files: [] }; export default RepoStore; diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss new file mode 100644 index 00000000000..0a026102b6e --- /dev/null +++ b/app/assets/stylesheets/pages/repo.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/app/controllers/concerns/renders_blob.rb b/app/controllers/concerns/renders_blob.rb index 0fd5399af9d..46a3a64b3ad 100644 --- a/app/controllers/concerns/renders_blob.rb +++ b/app/controllers/concerns/renders_blob.rb @@ -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, diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb index b3456dc3293..77bb124731e 100644 --- a/app/helpers/tree_helper.rb +++ b/app/helpers/tree_helper.rb @@ -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 diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml index 426085b3e1c..6efc8bc68a8 100644 --- a/app/views/projects/_files.html.haml +++ b/app/views/projects/_files.html.haml @@ -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 diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml index cf0c4d2378b..b88db67eb09 100644 --- a/app/views/projects/blob/_blob.html.haml +++ b/app/views/projects/blob/_blob.html.haml @@ -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;" } diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml index e31a222f47c..e990a41ab68 100644 --- a/app/views/projects/tree/_tree_content.html.haml +++ b/app/views/projects/tree/_tree_content.html.haml @@ -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