swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-load URLs for preview+link when opening the dropdown

Browse Source
This commit is contained in:
Tobias Klika
2022-03-04 16:17:57 +01:00
parent 3beec30e8d
commit 9d1da7e489
1 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Backoffice.UI/app/components/ui-form-header-links.vue
+23 -26
View File
@@ -1,10 +1,15 @@
<template>
<ui-dropdown-button v-if="hasPreview" label="@page.preview.title" icon="fth-eye" :disabled="disabled" :prevent="true" @click="openPreview" />
<ui-dropdown-button v-if="hasLink" label="@ui.open.title" icon="fth-external-link" :disabled="disabled" :prevent="true" @click="openLink" />
<!--<a v-if="hasLink" :href="urlLinkAbsolute" target="_blank" :disabled="disabled || !urlLink" type="button" class="ui-dropdown-button has-icon is-multiline" @click="dropdown.hide()">
<!--<ui-dropdown-button v-if="hasPreview" label="@page.preview.title" icon="fth-eye" :disabled="disabled || !urlLink" @click="openPreview" />
<ui-dropdown-button v-if="hasLink" label="@ui.open.title" icon="fth-external-link" :disabled="disabled || !urlLink" @click="openLink" />-->
<ui-link v-if="hasPreview" :to="{ name: 'preview', query: { path: urlLink }}" target="preview" :disabled="disabled || !urlLink" type="button" class="ui-dropdown-button has-icon" @click="dropdown.hide()">
<ui-icon symbol="fth-eye" class="ui-dropdown-button-icon" />
<span class="-name"><ui-localize value="@page.preview.title" /></span>
</ui-link>
<a v-if="hasLink" :href="urlLinkAbsolute" target="_blank" :disabled="disabled || !urlLink" type="button" class="ui-dropdown-button has-icon" @click="dropdown.hide()">
<ui-icon symbol="fth-external-link" class="ui-dropdown-button-icon" />
<span class="-name"><ui-localize value="@ui.open.title" /><span class="-minor" v-if="false && urlLink" :title="urlLink">{{urlLink}}</span></span>
</a>-->
</a>
<ui-dropdown-separator v-if="hasPreview || hasLink" />
</template>
@@ -36,18 +41,21 @@
dropdown: null,
urlList: [],
urlDomain: null,
urlPreview: null
urlPreview: null,
failed: false
}),
watch: {
'value.lastModifiedDate'()
{
this.reloadUrls();
this.loadUrls();
}
},
mounted()
{
this.loadUrls();
let current = this;
do
{
@@ -68,11 +76,11 @@
computed: {
hasPreview()
{
return this.value && typeof this.url === 'function' && this.previewEnabled;
return !this.failed && this.value && typeof this.url === 'function' && this.previewEnabled;
},
hasLink()
{
return this.value && typeof this.url === 'function';
return !this.failed && this.value && typeof this.url === 'function';
},
urlLink()
{
@@ -88,33 +96,22 @@
async loadUrls()
{
const result = await this.url(this.value);
this.urlList = result.data.urls ? result.data.urls : [result.data.url];
this.urlList = result.data.urls ? result.data.urls : (result.data.url ? [result.data.url] : []);
this.urlDomain = result.data.domain;
this.failed = this.urlList.length < 1 || !result.data.domain;
},
async openPreview(_, opts)
{
opts.loading(true);
await this.loadUrls();
opts.loading(false);
if (this.urlLink)
{
var resolved = this.$router.resolve({ name: 'preview', query: { path: this.urlLink } });
window.open(window.location.origin + resolved.href, 'preview');
opts.hide();
}
var resolved = this.$router.resolve({ name: 'preview', query: { path: this.urlLink } });
window.open(window.location.origin + resolved.href, 'preview');
opts.hide();
},
async openLink(_, opts)
{
opts.loading(true);
await this.loadUrls();
opts.loading(false);
if (this.urlLink)
{
window.open(this.urlLinkAbsolute, '_blank');
opts.hide();
}
window.open(this.urlLinkAbsolute, '_blank');
opts.hide();
}
}
}