Commit e99f4534 authored by Regis's avatar Regis

phil said this is good - no need to dynamically update since this is a static page for now

parent f9f27432
......@@ -5,72 +5,31 @@
gl.VueStage = Vue.extend({
data() {
return {
request: false,
count: 0,
builds: '',
spinner: '<span class="fa fa-spinner fa-spin"></span>',
};
},
props: ['stage', 'svgs', 'match'],
methods: {
fetchBuilds(e) {
/**
This is a very interesting UI problem
Essentially we have to clear builds on blur no matter what
This was preventing turbolinks to make the request to the link clicked
Vue will always look at the VDOM element which is the button
It has a special attribute 'aria-expanded':
- which will let us know if it is expanded
- once the build link is clicked
- when someone clicks outside of the dropdown
In order for this to work:
- we check that the event has the correct aria attribute
- we make sure that if it does, we check where the event is on the DOM
- we also check to see if the event is on the DOM or the native browser client
*/
const areaExpanded = e.currentTarget.attributes['aria-expanded'];
if (areaExpanded && (areaExpanded.textContent === 'true')) {
const related = e.relatedTarget;
if (!related && e.sourceCapabilities) {
return this.clearBuilds();
} else if (!related && e.sourceCapabilities === null) {
return null;
} else if (!related && e.sourceCapabilities === undefined) {
this.request = false;
return null;
} else if (!related.parentElement) {
return this.clearBuilds();
} else if (~related.parentElement.parentElement.className.indexOf('js-builds-dropdown-container')) {
return null;
}
}
if (this.request) return this.clearBuilds();
fetchBuilds() {
if (this.count > 0) return null;
return this.$http.get(this.stage.dropdown_path)
.then((response) => {
this.request = true;
this.count += 1;
this.builds = JSON.parse(response.body).html;
}, () => {
const flash = new Flash('Something went wrong on our end.');
this.request = false;
return flash;
});
},
clearBuilds() {
this.builds = '';
this.request = false;
},
},
computed: {
buildsOrSpinner() {
return this.request ? this.builds : this.spinner;
return this.builds ? this.builds : this.spinner;
},
dropdownClass() {
if (this.request) return 'js-builds-dropdown-container';
if (this.builds) return 'js-builds-dropdown-container';
return 'js-builds-dropdown-loading builds-dropdown-loading';
},
buildStatus() {
......@@ -91,8 +50,7 @@
template: `
<div>
<button
@click='fetchBuilds($event)'
@blur='fetchBuilds($event)'
@click='fetchBuilds'
:class="triggerButtonClass"
:title='stage.title'
data-placement="top"
......
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