summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ide/components/preview/navigator.vue
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/ide/components/preview/navigator.vue')
-rw-r--r--app/assets/javascripts/ide/components/preview/navigator.vue136
1 files changed, 0 insertions, 136 deletions
diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue
deleted file mode 100644
index 852de16d508..00000000000
--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<script>
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
-import { listen } from 'codesandbox-api';
-
-export default {
- components: {
- GlIcon,
- GlLoadingIcon,
- },
- props: {
- client: {
- 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.client.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) {
- // eslint-disable-next-line vue/no-mutating-props
- this.client.iframe.src = `${this.client.bundlerURL}${path}`;
- },
- },
-};
-</script>
-
-<template>
- <header class="ide-preview-header d-flex align-items-center">
- <button
- :aria-label="s__('IDE|Back')"
- :disabled="backButtonDisabled"
- :class="{
- 'disabled-content': backButtonDisabled,
- }"
- type="button"
- class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
- @click="back"
- >
- <gl-icon :size="24" name="chevron-left" class="m-auto" />
- </button>
- <button
- :aria-label="s__('IDE|Back')"
- :disabled="forwardButtonDisabled"
- :class="{
- 'disabled-content': forwardButtonDisabled,
- }"
- type="button"
- class="ide-navigator-btn d-flex align-items-center d-transparent border-0 bg-transparent"
- @click="forward"
- >
- <gl-icon :size="24" name="chevron-right" class="m-auto" />
- </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"
- >
- <gl-icon :size="16" name="retry" class="m-auto" />
- </button>
- <div class="position-relative w-100 gl-ml-2">
- <input
- :value="path || '/'"
- type="text"
- class="ide-navigator-location form-control bg-white"
- readonly
- />
- <gl-loading-icon
- v-if="loading"
- size="sm"
- class="position-absolute ide-preview-loading-icon"
- />
- </div>
- </header>
-</template>