debian-mirror-gitlab/app/assets/javascripts/ide/components/preview/navigator.vue

133 lines
3.3 KiB
Vue
Raw Normal View History

2018-11-18 11:00:15 +05:30
<script>
import { listen } from 'codesandbox-api';
import Icon from '~/vue_shared/components/icon.vue';
2019-02-15 15:39:39 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2018-11-18 11:00:15 +05:30
export default {
components: {
Icon,
2018-12-13 13:39:08 +05:30
GlLoadingIcon,
2018-11-18 11:00:15 +05:30
},
props: {
manager: {
type: Object,
required: true,
},
},
data() {
return {
currentBrowsingIndex: null,
navigationStack: [],
forwardNavigationStack: [],
path: '',
loading: true,
};
},
computed: {
backButtonDisabled() {
return this.navigationStack.length <= 1;
},
forwardButtonDisabled() {
return !this.forwardNavigationStack.length;
},
},
mounted() {
this.listener = listen(e => {
switch (e.type) {
case 'urlchange':
this.onUrlChange(e);
break;
case 'done':
this.loading = false;
break;
default:
break;
}
});
},
beforeDestroy() {
this.listener();
},
methods: {
onUrlChange(e) {
const lastPath = this.path;
this.path = e.url.replace(this.manager.bundlerURL, '') || '/';
if (lastPath !== this.path) {
this.currentBrowsingIndex =
this.currentBrowsingIndex === null ? 0 : this.currentBrowsingIndex + 1;
this.navigationStack.push(this.path);
}
},
back() {
const lastPath = this.path;
this.visitPath(this.navigationStack[this.currentBrowsingIndex - 1]);
this.forwardNavigationStack.push(lastPath);
if (this.currentBrowsingIndex === 1) {
this.currentBrowsingIndex = null;
this.navigationStack = [];
}
},
forward() {
this.visitPath(this.forwardNavigationStack.splice(0, 1)[0]);
},
refresh() {
this.visitPath(this.path);
},
visitPath(path) {
this.manager.iframe.src = `${this.manager.bundlerURL}${path}`;
},
},
};
</script>
<template>
<header class="ide-preview-header d-flex align-items-center">
<button
:aria-label="s__('IDE|Back')"
:disabled="backButtonDisabled"
:class="{
2019-02-15 15:39:39 +05:30
'disabled-content': backButtonDisabled,
2018-11-18 11:00:15 +05:30
}"
type="button"
class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
@click="back"
>
2019-02-15 15:39:39 +05:30
<icon :size="24" name="chevron-left" class="m-auto" />
2018-11-18 11:00:15 +05:30
</button>
<button
:aria-label="s__('IDE|Back')"
:disabled="forwardButtonDisabled"
:class="{
2019-02-15 15:39:39 +05:30
'disabled-content': forwardButtonDisabled,
2018-11-18 11:00:15 +05:30
}"
type="button"
class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
@click="forward"
>
2019-02-15 15:39:39 +05:30
<icon :size="24" name="chevron-right" class="m-auto" />
2018-11-18 11:00:15 +05:30
</button>
<button
:aria-label="s__('IDE|Refresh preview')"
type="button"
class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
@click="refresh"
>
2019-02-15 15:39:39 +05:30
<icon :size="18" name="retry" class="m-auto" />
2018-11-18 11:00:15 +05:30
</button>
<div class="position-relative w-100 prepend-left-4">
<input
:value="path || '/'"
type="text"
class="ide-navigator-location form-control bg-white"
readonly
/>
2019-02-15 15:39:39 +05:30
<gl-loading-icon v-if="loading" class="position-absolute ide-preview-loading-icon" />
2018-11-18 11:00:15 +05:30
</div>
</header>
</template>