Skip to content

Commit

Permalink
style: optimize component readability
Browse files Browse the repository at this point in the history
  • Loading branch information
@gearsdigital
gearsdigital committed Jul 4, 2020
1 parent f11586f commit 5242272
Showing 1 changed file with 149 additions and 143 deletions.
292 changes: 149 additions & 143 deletions src/components/EnhancedToolbarLinkDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
@close="resetForm"
:button="$t('insert')"
>

<div v-if="tabs && tabs.length > 1" class="k-header-tabs">
<nav>
<k-button
Expand Down Expand Up @@ -79,7 +78,7 @@
/>
</div>
<k-text v-else>
{{$t('gearsdigital.enhanced-toolbar-link-dialog.empty')}}
{{ $t("gearsdigital.enhanced-toolbar-link-dialog.empty") }}
</k-text>

<k-pagination
Expand All @@ -88,166 +87,173 @@
v-bind="pagination"
align="center"
class="k-dialog-pagination"
@paginate="paginate"/>
@paginate="paginate"
/>
</div>
</k-dialog>
</template>

<script>
export default {
data() {
return {
tabs: [
{
name: 'external',
label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.external")
},
{
name: 'internal',
label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.internal")
},
],
search: null,
currentPage: {},
currentTab: {},
pages: [],
value: {
url: null,
text: null
export default {
data() {
return {
tabs: [
{
name: "external",
label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.external"),
},
pagination: {
page: 1,
total: 0
{
name: "internal",
label: this.$t("gearsdigital.enhanced-toolbar-link-dialog.internal"),
},
],
search: null,
currentPage: {},
currentTab: {},
pages: [],
value: {
url: null,
text: null,
},
pagination: {
page: 1,
total: 0,
},
externalFields: {
url: {
label: this.$t("link"),
type: "text",
placeholder: this.$t("url.placeholder"),
icon: "url",
},
externalFields: {
url: {
label: this.$t("link"),
type: 'text',
placeholder: this.$t("url.placeholder"),
icon: 'url'
},
text: {
label: this.$t("link.text"),
type: 'text'
}
text: {
label: this.$t("link.text"),
type: "text",
},
selectedLinkTarget: null,
linkTargets: [
{value: '_blank', text: '_blank'},
{value: '_self', text: '_blank'},
{value: '_parent', text: '_parent'},
{value: '_top', text: '_top'},
]
};
},
selectedLinkTarget: null,
linkTargets: [
{ value: "_blank", text: "_blank" },
{ value: "_self", text: "_blank" },
{ value: "_parent", text: "_parent" },
{ value: "_top", text: "_top" },
],
};
},
watch: {
search: debounce(() => {
this.pagination.page = 0;
this.fetch();
}, 200),
},
computed: {
hasPages() {
return this.pages.length;
},
watch: {
search: debounce(function () {
this.pagination.page = 0;
this.fetch();
}, 200)
kirbytext() {
return this.$store.state.system.info.kirbytext;
},
computed: {
hasPages() {
return this.pages.length
},
kirbytext() {
return this.$store.state.system.info.kirbytext;
}
},
methods: {
open(input, selection) {
this.value.text = selection;
this.currentTab = this.tabs[0];
this.$refs.dialog.open();
},
methods: {
open(input, selection) {
this.value.text = selection;
this.currentTab = this.tabs[0];
this.$refs.dialog.open();
},
resetForm() {
resetForm() {
this.value = {
url: null,
text: null,
};
this.value.text = null;
this.search = null;
this.pagination.page = 1;
this.selectedLinkTarget = null;
},
selectTab(tab) {
this.currentTab = tab;
},
selectPage(model) {
this.value = {
url: model.slug,
text: this.value.text || model.title,
};
if (this.isCurrentPage(model)) {
this.currentPage = {};
this.value = {
url: null,
text: null
};
this.value.text = null;
this.search = null;
this.pagination.page = 1;
this.selectedLinkTarget = null;
},
selectTab(tab) {
this.currentTab = tab;
},
selectPage(model) {
this.value = {
url: model.slug,
text: this.value.text || model.title
text: null,
};
if (this.isCurrentPage(model)) {
this.currentPage = {};
this.value = {
url: null,
text: null
};
} else {
this.currentPage = model
}
},
isCurrentPage(page) {
return this.currentPage === page
},
paginate(pagination) {
this.pagination.page = pagination.page;
this.fetch();
},
createKirbytext() {
if (!this.value.url && this.value.text) {
return this.value.text;
}
} else {
this.currentPage = model;
}
},
isCurrentPage(page) {
return this.currentPage === page;
},
paginate(pagination) {
this.pagination.page = pagination.page;
this.fetch();
},
createKirbytext() {
if (!this.value.url && this.value.text) {
return this.value.text;
}
const target = `${this.selectedLinkTarget ? "target: " + this.selectedLinkTarget : ""}`;
const link = `link: ${this.value.url}`;
const text = `text: ${this.value.text}`;
const target = `${
this.selectedLinkTarget ? "target: " + this.selectedLinkTarget : ""
}`;
const link = `link: ${this.value.url}`;
const text = `text: ${this.value.text}`;
return this.value.text.length > 0
? `(${link} ${text} ${target})`
: `(${link} ${target})`;
},
createMarkdown() {
if (this.value.text.length > 0) {
return `[${this.value.text}](${this.value.url})`;
} else {
return `<${this.value.url}>`;
}
},
fetch() {
const params = {
page: this.pagination.page,
search: this.search
};
this.$api.get('enhanced-toolbar-link-dialog/pages', params).then(response => {
this.pages = response.data;
this.pagination = response.pagination;
});
},
submit() {
this.$emit("submit", this.kirbytext ? this.createKirbytext() : this.createMarkdown());
this.$refs.dialog.close();
return this.value.text.length > 0
? `(${link} ${text} ${target})`
: `(${link} ${target})`;
},
createMarkdown() {
if (this.value.text.length > 0) {
return `[${this.value.text}](${this.value.url})`;
} else {
return `<${this.value.url}>`;
}
}
}
function debounce(fn, delay = 200) {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
},
fetch() {
const params = {
page: this.pagination.page,
search: this.search,
};
this.$api
.get("enhanced-toolbar-link-dialog/pages", params)
.then((response) => {
this.pages = response.data;
this.pagination = response.pagination;
});
},
submit() {
this.$emit(
"submit",
this.kirbytext ? this.createKirbytext() : this.createMarkdown()
);
this.$refs.dialog.close();
},
},
};
function debounce(fn, delay = 200) {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
</script>

<style>
.k-tab {
padding: 1rem 0;
}
.k-tab {
padding: 1rem 0;
}
</style>

0 comments on commit 5242272

Please sign in to comment.