Skip to content

Commit

Permalink
Added title and anchor bookmarks fields to internal links (#38)
Browse files Browse the repository at this point in the history 
feat: add title and anchor fields to internal links dialog
  • Loading branch information
@mvilskersts
mvilskersts authored Dec 1, 2020
1 parent 76b3270 commit 8d6a86e
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 36 deletions.
103 changes: 91 additions & 12 deletions cypress/integration/dialog_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
cy.openDialog();
cy.openInternalTab();

cy.get(".k-text-input").type("jun",{delay: 100}).should("have.value", "jun");
cy.get(".k-dialog-search .k-text-input").type("jun",{delay: 500}).should("have.value", "jun");

cy.wait(1000);

Expand All @@ -22,8 +22,8 @@ describe("Enhanced Link Toolbar Dialog", () => {

cy.get(".k-pages-dialog .k-dialog-pagination")
.find('button[title="Next"]')
.click()
.click();
.click({force: true})
.click({force: true});

cy.get(".k-pages-dialog .k-list")
.find(".k-list-item")
Expand Down Expand Up @@ -67,13 +67,13 @@ describe("Enhanced Link Toolbar Dialog", () => {

cy.get(".k-pages-dialog .k-list")
.find(".k-list-item:first-child")
.click();
.click({force: true});

cy.get(".k-button").contains("Ok").click();
cy.get(".k-button").contains("Ok").click({force: true});

cy.get(".k-textarea-field textarea").should(
"include.value",
"(link: /notes/in-the-jungle-of-sumatra text: In the jungle of Sumatra)"
"(link: /notes/in-the-jungle-of-sumatra text: ### In the jungle of Sumatra ###)"
);
});

Expand All @@ -91,9 +91,9 @@ describe("Enhanced Link Toolbar Dialog", () => {

cy.get(".k-pages-dialog .k-list")
.find(".k-list-item:first-child")
.click();
.click({force: true});

cy.get(".k-button").contains("Ok").click();
cy.get(".k-button").contains("Ok").click({force: true});

cy.get(".k-textarea-field textarea").should(
"include.value",
Expand All @@ -115,16 +115,95 @@ describe("Enhanced Link Toolbar Dialog", () => {

cy.get(".k-pages-dialog .k-list")
.find(".k-list-item:first-child")
.click();
.click({force: true});
cy.get(".k-pages-dialog .k-select-input-native").select("Blank");

cy.get(".k-button").contains("Ok").click();
cy.get(".k-button").contains("Ok").click({force: true});

cy.get(".k-textarea-field textarea").should(
"include.value",
"(link: /notes/in-the-jungle-of-sumatra text: Lorem ipsum dolor target: _blank)"
);
});

it('should insert "text:" from selection with #anchor', () => {
cy.login();
cy.openFirstNote();

cy.get(".k-textarea-field textarea")
.clear()
.type("Lorem ipsum dolor")
.type("{selectall}");

cy.openDialog();
cy.openInternalTab();

cy.get(".k-pages-dialog .k-list")
.find(".k-list-item:first-child")
.click({force: true});

cy.get(".k-pages-dialog .k-select-input-native").select("Blank");
cy.get(".k-pages-dialog .k-field-name-anchor .k-text-input").type("anchor");

cy.get(".k-button").contains("Ok").click({force: true});
cy.get(".k-textarea-field textarea").should(
"include.value",
"(link: /notes/in-the-jungle-of-sumatra#anchor text: Lorem ipsum dolor target: _blank)"
);
});

it('should insert "text:" from selection with :title', () => {
cy.login();
cy.openFirstNote();

cy.get(".k-textarea-field textarea")
.clear()
.type("Lorem ipsum dolor")
.type("{selectall}");

cy.openDialog();
cy.openInternalTab();

cy.get(".k-pages-dialog .k-list")
.find(".k-list-item:first-child")
.click({force: true});

cy.get(".k-pages-dialog .k-select-input-native").select("Blank");
cy.get(".k-pages-dialog .k-field-name-title .k-text-input").type("Title");

cy.get(".k-button").contains("Ok").click({force: true});
cy.get(".k-textarea-field textarea").should(
"include.value",
"(link: /notes/in-the-jungle-of-sumatra text: Lorem ipsum dolor target: _blank title: Title)"
);
});

it('should insert "text:" from selection with anchor, :target and :title', () => {
cy.login();
cy.openFirstNote();

cy.get(".k-textarea-field textarea")
.clear()
.type("Lorem ipsum dolor")
.type("{selectall}");

cy.openDialog();
cy.openInternalTab();

cy.get(".k-pages-dialog .k-list")
.find(".k-list-item:first-child")
.click({force: true});

cy.get(".k-pages-dialog .k-select-input-native").select("Blank");
cy.get(".k-pages-dialog .k-field-name-anchor .k-text-input").type("anchor");
cy.get(".k-pages-dialog .k-field-name-title .k-text-input").type("Title");

cy.get(".k-button").contains("Ok").click({force: true});
cy.get(".k-textarea-field textarea").should(
"include.value",
"(link: /notes/in-the-jungle-of-sumatra#anchor text: Lorem ipsum dolor target: _blank title: Title)"
);
});
});

describe("without selected link", () => {
Expand All @@ -137,7 +216,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
cy.openDialog();
cy.openInternalTab();

cy.get(".k-button").contains("Ok").click();
cy.get(".k-button").contains("Ok").click({force: true});

cy.get(".k-textarea-field textarea").should(
"include.value",
Expand All @@ -157,7 +236,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
cy.openDialog();
cy.openInternalTab();

cy.get(".k-button").contains("Ok").click();
cy.get(".k-button").contains("Ok").click({force: true});

cy.get(".k-textarea-field textarea").should(
"include.value",
Expand Down
10 changes: 4 additions & 6 deletions cypress/support/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Cypress.Commands.add('login', function (options = {}) {
.type(user.password)

cy.get('button')
.click()
.click({force: true})
})
cy.url().should('include', '/panel')
})
Expand All @@ -34,15 +34,13 @@ Cypress.Commands.add('openFirstNote', function (options = {}) {
cy.visit('http://localhost:8000/panel');

cy.get('.k-section-name-notes li:first-child a')
.click()
.click({force: true})
});

Cypress.Commands.add('openDialog', function (options = {}) {
cy.get('.k-toolbar .k-icon-url').click()
cy.get('.k-toolbar .k-icon-url').click({force: true})
});

Cypress.Commands.add('openInternalTab', function (options = {}) {
cy.get(".k-dialog-body nav").contains("Internal Link").click();
cy.get(".k-dialog-body nav").contains("Internal Link").click({force: true});
});


2 changes: 2 additions & 0 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
'gearsdigital.enhanced-toolbar-link-dialog.empty' => 'No pages found',
'gearsdigital.enhanced-toolbar-link-dialog.target.title' => 'Link Target',
'gearsdigital.enhanced-toolbar-link-dialog.target.help' => 'Specify where to open the linked document.',
'gearsdigital.enhanced-toolbar-link-dialog.title.title' => 'Title',
'gearsdigital.enhanced-toolbar-link-dialog.anchor.title' => 'Anchor',
],
'de' => [
'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Interner Link',
Expand Down
67 changes: 49 additions & 18 deletions src/components/EnhancedToolbarLinkDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,9 @@
@paginate="paginate"
/>
<k-line-field />
<k-select-field
v-model="selectedLinkTarget"
:options="linkTargets"
type="select"
name="target"
:label="$t('gearsdigital.enhanced-toolbar-link-dialog.target.title')"
:help="$t('gearsdigital.enhanced-toolbar-link-dialog.target.help')"
<k-form
:fields="attributeFields"
v-model="attributes"
/>
</div>
<k-text v-else>
Expand Down Expand Up @@ -130,13 +126,32 @@ export default {
type: "text",
},
},
selectedLinkTarget: null,
linkTargets: [
{ value: "_blank", text: "Blank" },
{ value: "_self", text: "Self" },
{ value: "_parent", text: "Parent" },
{ value: "_top", text: "Top" },
],
attributeFields: {
selectedLinkTarget: {
label: this.$t('gearsdigital.enhanced-toolbar-link-dialog.target.title'),
type: "select",
options: [
{ value: "_blank", text: "Blank" },
{ value: "_self", text: "Self" },
{ value: "_parent", text: "Parent" },
{ value: "_top", text: "Top" },
],
help: this.$t('gearsdigital.enhanced-toolbar-link-dialog.target.help')
},
title: {
label: this.$t('gearsdigital.enhanced-toolbar-link-dialog.title.title'),
type: "text",
},
anchor: {
label: this.$t('gearsdigital.enhanced-toolbar-link-dialog.anchor.title'),
type: "text",
},
},
attributes: {
selectedLinkTarget: null,
title: null,
anchor: null
},
};
},
watch: {
Expand All @@ -154,6 +169,9 @@ export default {
kirbytext() {
return this.$store.state.system.info.kirbytext;
},
urlWithAnchor() {
return this.attributes.anchor ? this.value.url + '#' + this.attributes.anchor : this.value.url;
}
},
methods: {
open(input, selection) {
Expand All @@ -170,7 +188,11 @@ export default {
this.value.text = null;
this.search = null;
this.pagination.page = 1;
this.selectedLinkTarget = null;
this.attributes = {
selectedLinkTarget: null,
title: null,
anchor: null
}
},
selectTab(tab) {
this.currentTab = tab;
Expand Down Expand Up @@ -199,11 +221,20 @@ export default {
},
createKirbytext() {
const parts = [];
parts.push(`link: ${this.value.url}`);
parts.push(`link: ${this.urlWithAnchor}`);
parts.push(`text: ${this.value.text}`);
if (this.selectedLinkTarget) {
parts.push(`target: ${this.selectedLinkTarget}`);
if (this.attributes.selectedLinkTarget) {
parts.push(`target: ${this.attributes.selectedLinkTarget}`);
}
if (this.attributes.title) {
parts.push(`title: ${this.attributes.title}`);
}
if (this.value.url.indexOf('http') === 0) {
parts.push(`rel: nofollow`);
}
return `(${parts.join(" ")})`;
Expand Down

0 comments on commit 8d6a86e

Please sign in to comment.