Merge pull request #45 from sachbearbeiter/main

MISC features

Author: sachbearbeiter

README.md

@@ -83,7 +83,7 @@ If you prefer to use a foreach to create the menu, or if you are upgrading from
     <ul>
       <?php foreach($items as $item): ?>
         <li>
-          <a href="<?php echo $item->url(); ?>" <?php e($item->isOpen(), 'aria-current') ?>>
+          <a href="<?php echo $item->url(); ?>" <?php e($item->isOpen(), 'aria-current="page"') ?>>
             <?php echo Str::esc($item->text(), 'html') ?>
           </a>
           <?php if($item->children()->isNotEmpty()): ?>
@@ -118,7 +118,7 @@ This means that if you simply add 5 Kirby pages to the field in multilang mode a
 
 The plugin allows you to add "Kirby Pages" and "Custom Links" to the navigation field. For "Kirby Pages", the page title will be the default value of the link text, if no custom link text is entered. This means that if you simply add 5 Kirby pages to the field in multilang mode and don't edit the links, you will see the language-specific page title and page URL in the generated markup.
 
-## What is new in version 4.0?
+## What's new in version 4.0?
 
 Changes worth mentioning:
 - It works with Kirby 4
@@ -131,6 +131,34 @@ Changes worth mentioning:
 - Markup: the current language and the actual values of the page title and page URL are taken into account when generating the markup for the field in the template.
 - Markup: link text and link attributes are properly escaped to prevent potential issues
 
+## What's new in version 4.1?
+
+New features:
+- The 'class' and 'target' values of links are now editable
+- The 'anchor' values of 'Kirby page' links are now editable
+- The 'title' textfield can be hidden, if you do not need it
+- The 'popup' toggle can be hidden, if you do not need it
+
+Different sites have different needs, so the editable fields are configurable via /site/config/config.php.
+
+Here are the available options that you can use in your config.php, and their default values:
+
+```php
+return [
+  'chrisbeluga.navigation.edit_title' => TRUE,
+  'chrisbeluga.navigation.edit_popup' => TRUE,
+  'chrisbeluga.navigation.edit_target' => FALSE,
+  'chrisbeluga.navigation.edit_class' => FALSE,
+  'chrisbeluga.navigation.edit_anchor' => FALSE,
+];
+```
+
+For example, if you want to customize the 'target' value of your links, then set 'chrisbeluga.navigation.edit_target' to TRUE. This will replace the simple 'Popup' toggle with a 'Target' textfield, allowing you to set a link target, such as '_parent' or '_top'.
+
+If you want to add an anchor value to your 'Kirby page' links, for example to have an URL such as /en/contact#locations, set 'chrisbeluga.navigation.edit_anchor' to TRUE. You can enter 'locations' as anchor, and '#locations' will be appended to the page URL of the link.
+
+If you use the recommended way to output the navigation markup from your template (such as $site->navigation()->toNavigationMarkup() in case of a field called 'navigation'), then any target, class and anchor values will be included automatically in the generated markup.
+
 ## Contributing
 
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

composer.json

@@ -2,7 +2,7 @@
   "name": "chrisbeluga/kirby-navigation",
   "description": "Kirby 4 field for hierarchical menus with drag & drop level indentation.",
   "type": "kirby-plugin",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "license": "MIT",
   "homepage": "https://github.com/chrisbeluga/kirby-navigation",
   "authors": [
@@ -15,7 +15,14 @@
       "name": "Ahmet Bora",
       "email": "[email protected]",
       "homepage": "https://owebstudio.com/"
-    }
+    },
+    {
+      "name": "Gabor Horvath"
+    },
+    {
+      "name": "Immo Seebörger",
+      "homepage": "https://diesachbearbeiter.de/"
+    }    
   ],
   "require": {
     "getkirby/composer-installer": "^1.2"

config/api.php

@@ -66,8 +66,8 @@
               // Default values of page links that prop.php also provides
               $language_code . '_link_text' => '',
               $language_code . '_link_title' => '',
-              'popup' => false,
               'children' => [],
+              'target' => '',
               // Temporary helper values that will not be saved
               'count' => $item->index()->count(),
             ]);

config/methods.php

@@ -13,17 +13,23 @@
     // Use anonymous recursive function to process child items
     $process_item = function($item, $depth=1) use (&$process_item, $lang_code) {
       $item['depth']=$depth;
-      // To help markup generation, set 'url', 'text' and 'title'
-      // according to the current language
+      // To help markup generation, set 'url', 'text', 'title'
+      // and the optional 'anchor' according to the current language
       if ($item['type']=='page') {
         $item['url']=$item[$lang_code . '_page_url'];
         $item['text']=$item[$lang_code . '_link_text'];
         $item['title']=$item[$lang_code . '_link_title'];
+        if (isset($item[$lang_code . '_link_anchor'])) {
+          $item['anchor']='#' . $item[$lang_code . '_link_anchor'];
+        }
+        else {
+          $item['anchor']='';
+        }
         if ($item['text']=='') {
-        $item['text']=$item[$lang_code . '_page_title'];
+          $item['text']=$item[$lang_code . '_page_title'];
         }
         if ($item['title']=='') {
-        $item['title']=$item[$lang_code . '_page_title'];
+          $item['title']=$item[$lang_code . '_page_title'];
         }
       }
       elseif ($item['type']=='custom') {
@@ -32,6 +38,7 @@
       }
       else {
         $item['error']=TRUE;
+        return $item;
       }
       if ($item['title']==$item['text']) {
         // No need to have a title
@@ -44,8 +51,11 @@
       if ($item['title']!='') {
         $item['attributes']['title']=$item['title'];
       }
-      if (!empty($item['popup'])) {
-        $item['attributes']['target']='_blank';
+      if (isset($item['class']) && ($item['class']!=='')) {
+        $item['attributes']['class']=$item['class'];
+      }
+      if (isset($item['target']) && ($item['target']!='')) {
+        $item['attributes']['target']=$item['target'];
       }
       if ($item['url'] === kirby()->url('current')) {
         $item['attributes']['aria-current']='page';

config/props.php

@@ -35,4 +35,25 @@
     }
     return $items;
   },
+  // Notify the Vue code which textfields should be editable by default.
+  // Notes:
+  // - The 'Popup' will be automatically hidden, if 'Target' is visible
+  // - If a certain value is set in the field, then Vue will show 
+  //   the editable textfield even if the corresponding option is false
+  // - These options can be set in /site/config/config.php
+  'edit_title' => function() {
+    return (bool) option('chrisbeluga.navigation.edit_title', true);
+  },
+  'edit_popup' => function() {
+    return (bool) option('chrisbeluga.navigation.edit_popup', true);
+  },
+  'edit_target' => function() {
+    return (bool) option('chrisbeluga.navigation.edit_target', false);
+  },
+  'edit_class' => function() {
+    return (bool) option('chrisbeluga.navigation.edit_class', false);
+  },
+  'edit_anchor' => function() {
+    return (bool) option('chrisbeluga.navigation.edit_anchor', false);
+  }
 ];

includes/refresh_item.inc.php

@@ -16,7 +16,7 @@
 * functions, when needed.
 *
 * A secondary purpose of these functions is to make multilanguage
-* navigation field editing as convinient as possible.
+* navigation field editing as convenient as possible.
 */
 
 // Use anonymous recursive function to process child items
@@ -118,6 +118,11 @@
     if (!isset($item[$language_code . '_link_title'])) {
       $item[$language_code . '_link_title']='';
     }
+    if (option('chrisbeluga.navigation.edit_anchor')) {
+      if (!isset($item[$language_code . '_link_anchor'])) {
+        $item[$language_code . '_link_anchor']='';
+      }
+    }
   }
   elseif ($item['type']=='custom') {
     // Validate the URL
@@ -132,6 +137,16 @@
       $item[$language_code . '_link_title']='';
     }
   }
+  // Handle the popup -> target transition to remain compatible.
+  // Previous plugin versions used the 'popup' boolean value.
+  // The new version uses the 'target' string value.
+  // The new version uses the 'Popup' toggle UI by default,
+  // but provides the edit_target option to switch to 'Target' string UI.
+  if (isset($item['popup']) && !isset($item['target'])) {
+    $item['target']=$item['popup'] ? '_blank' : '';
+  }
+  unset($item['popup']);
+
   // refresh child items, if any
   if (!empty($item['children'])) {
     foreach (array_keys($item['children']) as $key) {

index.js

@@ -21,4 +21,11 @@
         'navigation_item' => __DIR__ . '/snippets/navigation_item.php',
     ],
     'fieldMethods' => require_once __DIR__ . '/config/methods.php',
+    'options' => [
+        'edit_title' => TRUE,
+        'edit_popup' => TRUE,
+        'edit_target' => FALSE,
+        'edit_class' => FALSE,
+        'edit_anchor' => FALSE,
+    ],
 ]);

index.php

@@ -10,6 +10,9 @@
     'editor.label.url' => 'Url',
     'editor.label.text' => 'Text',
     'editor.label.title' => 'Titel',
+    'editor.label.anchor' => 'Anker',
+    'editor.label.class' => 'Klasse',
+    'editor.label.target' => 'Ziel',
     'editor.label.popup' => 'Popup',
     'editor.menu.close' => 'Schließen',
     'editor.menu.edit' => 'Bearbeiten',

languages/de.php

@@ -10,6 +10,9 @@
     'editor.label.url' => 'Url',
     'editor.label.text' => 'Text',
     'editor.label.title' => 'Title',
+    'editor.label.anchor' => 'Anchor',
+    'editor.label.class' => 'Class',
+    'editor.label.target' => 'Target',
     'editor.label.popup' => 'Popup',
     'editor.menu.close' => 'Close Item',
     'editor.menu.edit' => 'Edit Item',