feat: make initial open tab configurable (#32)

Closes #27
gearsdigital · Jul 13, 2020 · 76262ac · 76262ac
1 parent 19773bb
commit 76262ac
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -50,26 +50,25 @@ git submodule add https://github.com/gearsdigital/enhanced-toolbar-link-dialog.g
 
 ## Configuration
 
-The list item text is created using the [Kirby Query Language](https://getkirby.com/docs/guide/blueprints/query-language) and therefore customizable. It is totally up to you, how the page will appear to your users. You have access to `$page`, `site` and `kirby`.
+| Option | Default | Description |
+|:---|:---|:---|
+| `gearsdigital.enhanced-toolbar-link-dialog.link.title ` | `"{{page.title}}"` String | The list item text is created using the [Kirby Query Language](https://getkirby.com/docs/guide/blueprints/query-language) and therefore customizable. It is totally up to you, how the page will appear to your users.<br><br>Within the query you have access to `page`, `site` and `kirby`. |
+| `gearsdigital.enhanced-toolbar-link-dialog.tab.order ` | `"0"` - String |  You can choose between two values. <br><br>`"0"` _"External Link"_ Tab is initially active.<br>`"1"` _"Internal Link"_ Tab is initially active.|
 
-The default is `{{ page.title }}`.
-
-In order to change the default add `gearsdigital.enhanced-toolbar-link-dialog.link.title` to your `site/config.php`.
-
-### Example
+#### Examples
 ```php
-// site/config.php
+// site/config/config.php
 return [
     'gearsdigital.enhanced-toolbar-link-dialog.link.title' => '### {{ page.title }} ###',
+    'gearsdigital.enhanced-toolbar-link-dialog.tab.order' => '1', // Internal Link Tab is active
 ];
 ```
 
-This will wrap the text in `###` => (`### In the jungle of Sumatra ###`)
-
 ## Available translations
 
 - German
 - English
+- Czech
 
 > Pull requests with additonal translations are very much appreciated!
 

diff --git a/cypress/fixtures/config.php b/cypress/fixtures/config.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'gearsdigital.enhanced-toolbar-link-dialog.link.title' => '### {{ page.title }} ###',
+    'gearsdigital.enhanced-toolbar-link-dialog.tab.order' => '1', // Internal Link Tab is active
+];
diff --git a/cypress/integration/dialog_spec.js b/cypress/integration/dialog_spec.js
@@ -3,6 +3,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
     cy.login();
     cy.openFirstNote();
     cy.openDialog();
+    cy.openInternalTab();
 
     cy.get(".k-text-input").type("jun",{delay: 100}).should("have.value", "jun");
 
@@ -17,6 +18,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
     cy.login();
     cy.openFirstNote();
     cy.openDialog();
+    cy.openInternalTab();
 
     cy.get(".k-pages-dialog .k-dialog-pagination")
       .find('button[title="Next"]')
@@ -28,6 +30,27 @@ describe("Enhanced Link Toolbar Dialog", () => {
       .should("have.length", 1);
   });
 
+  describe("Options", () => {
+    beforeEach(() => {
+      cy.task('copyKirbyConfig');
+      cy.login();
+      cy.openFirstNote();
+      cy.openDialog();
+    });
+
+    afterEach(() => {
+      cy.task('restoreKirbyConfig')
+    });
+
+    it('link.title and tab.order', () => {
+      cy.get(".k-pages-dialog .k-list-item:first-child")
+        .should(
+          "include.text",
+          "###"
+        );
+    });
+  });
+
   describe("KirbyText", () => {
     describe("with selected link", () => {
 
@@ -38,6 +61,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
         cy.get(".k-textarea-field textarea").clear();
 
         cy.openDialog();
+        cy.openInternalTab();
 
         cy.get(".k-pages-dialog .k-list")
           .find(".k-list-item:first-child")
@@ -61,6 +85,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
           .type("{selectall}");
 
         cy.openDialog();
+        cy.openInternalTab();
 
         cy.get(".k-pages-dialog .k-list")
           .find(".k-list-item:first-child")
@@ -84,6 +109,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
           .type("{selectall}");
 
         cy.openDialog();
+        cy.openInternalTab();
 
         cy.get(".k-pages-dialog .k-list")
           .find(".k-list-item:first-child")
@@ -107,6 +133,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
         cy.get(".k-textarea-field textarea").clear().type("Lorem ipsum dolor");
 
         cy.openDialog();
+        cy.openInternalTab();
 
         cy.get(".k-button").contains("Ok").click();
 
@@ -126,6 +153,7 @@ describe("Enhanced Link Toolbar Dialog", () => {
           .type("{selectall}");
 
         cy.openDialog();
+        cy.openInternalTab();
 
         cy.get(".k-button").contains("Ok").click();
 

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -0,0 +1,23 @@
+const fs = require("fs");
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  on('task', {
+    copyKirbyConfig() {
+      const base = "../../../site/config";
+      fs.renameSync(`${base}/config.php`, `${base}/bak_config.php`);
+      fs.copyFileSync(__dirname + "/../fixtures/config.php", `${base}/config.php`);
+
+      return null
+    },
+    restoreKirbyConfig() {
+      const base = "../../../site/config";
+      fs.unlinkSync(`${base}/config.php`);
+      fs.renameSync(`${base}/bak_config.php`, `${base}/config.php`);
+
+      return null
+    }
+  })
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -39,6 +39,9 @@ Cypress.Commands.add('openFirstNote', function (options = {}) {
 
 Cypress.Commands.add('openDialog', function (options = {}) {
   cy.get('.k-toolbar .k-icon-url').click()
+});
+
+Cypress.Commands.add('openInternalTab', function (options = {}) {
   cy.get(".k-dialog-body nav").contains("Internal Link").click();
 });
 

diff --git a/index.css b/index.css
@@ -1 +1 @@
-.k-tab[data-v-fac765]{padding:1rem 0}.k-pagination[data-v-fac765]{z-index:1;position:relative}
+.k-tab[data-v-b8caa5]{padding:1rem 0}.k-pagination[data-v-b8caa5]{z-index:1;position:relative}
diff --git a/index.js b/index.js
diff --git a/index.php b/index.php
@@ -3,6 +3,45 @@
 use Kirby\Http\Url;
 use Kirby\Toolkit\Str;
 
+$translations = [
+    'en' => [
+        'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Internal Link',
+        'gearsdigital.enhanced-toolbar-link-dialog.external' => 'External Link',
+        '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.',
+    ],
+    'de' => [
+        'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Interner Link',
+        'gearsdigital.enhanced-toolbar-link-dialog.external' => 'Externer Link',
+        'gearsdigital.enhanced-toolbar-link-dialog.empty' => 'Keine Seiten gefunden.',
+        'gearsdigital.enhanced-toolbar-link-dialog.target.title' => 'Link Ziel',
+        'gearsdigital.enhanced-toolbar-link-dialog.target.help' => 'Gibt an, wo das verknüpfte Dokument geöffnet werden soll.',
+    ],
+    'cs' => [
+        'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Interní odkaz',
+        'gearsdigital.enhanced-toolbar-link-dialog.external' => 'Externí odkaz',
+        'gearsdigital.enhanced-toolbar-link-dialog.empty' => 'Nebyly nalezeny žádné stránky.',
+        'gearsdigital.enhanced-toolbar-link-dialog.target.title' => 'Cíl odkazu',
+        'gearsdigital.enhanced-toolbar-link-dialog.target.help' => 'Můžete upřesnit, kam se má odkaz otevřít.',
+    ],
+];
+
+// This quite hacky but enables us to pass options down to VUE.
+// We're programmatically extending translations by adding a "hidden" key.
+// This key can than be comsumed within the Vue part of the plugin using the $t helper.
+// @Fixes: #27
+function tabOrderOptionInterceptor(&$translations)
+{
+    $order = option('gearsdigital.enhanced-toolbar-link-dialog.tab.order', "0");
+
+    foreach ($translations as $k => $v) {
+        $translations[$k] += ["gearsdigital.enhanced-toolbar-link-dialog.tab.order" => $order];
+    }
+
+    return $translations;
+}
+
 Kirby::plugin('gearsdigital/enhanced-toolbar-link-dialog', [
     'api'          => [
         'models'      => [
@@ -55,27 +94,5 @@
             ],
         ],
     ],
-    'translations' => [
-        'en' => [
-            'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Internal Link',
-            'gearsdigital.enhanced-toolbar-link-dialog.external' => 'External Link',
-            '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.'
-        ],
-        'de' => [
-            'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Interner Link',
-            'gearsdigital.enhanced-toolbar-link-dialog.external' => 'Externer Link',
-            'gearsdigital.enhanced-toolbar-link-dialog.empty'    => 'Keine Seiten gefunden.',
-            'gearsdigital.enhanced-toolbar-link-dialog.target.title' => 'Link Ziel',
-            'gearsdigital.enhanced-toolbar-link-dialog.target.help' => 'Gibt an, wo das verknüpfte Dokument geöffnet werden soll.',
-        ],
-        'cs' => [
-            'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Interní odkaz',
-            'gearsdigital.enhanced-toolbar-link-dialog.external' => 'Externí odkaz',
-            'gearsdigital.enhanced-toolbar-link-dialog.empty'    => 'Nebyly nalezeny žádné stránky.',
-            'gearsdigital.enhanced-toolbar-link-dialog.target.title' => 'Cíl odkazu',
-            'gearsdigital.enhanced-toolbar-link-dialog.target.help' => 'Můžete upřesnit, kam se má odkaz otevřít.',
-        ],
-    ],
+    'translations' => tabOrderOptionInterceptor($translations),
 ]);
diff --git a/src/components/EnhancedToolbarLinkDialog.vue b/src/components/EnhancedToolbarLinkDialog.vue
@@ -157,8 +157,9 @@ export default {
   },
   methods: {
     open(input, selection) {
+      const openTab = parseInt(this.$t('gearsdigital.enhanced-toolbar-link-dialog.tab.order'), 10) || 0;
       this.value.text = selection;
-      this.currentTab = this.tabs[0];
+      this.currentTab = this.tabs[openTab];
       this.$refs.dialog.open();
     },
     resetForm() {