Giter Club home page Giter Club logo

enhanced-toolbar-link-dialog's Introduction

Enhanced Toolbar Link Dialog

Kirby Version E2E Downloads PHP 8.0

This plugin extends the default link dialog with search functionality, making it possible to create links to existing or external pages.

link-dialog.mp4

Configuration

These are all available configuration options and their default values.

Option Description Type Default
title Format the page title of the result list using Kirby Query Language. string {{ page.title }}
filter Filter the result list. Learn how to use filterBy. array null
sort Sort the result list. Learn how to use sortBy. array null
qualified Prefix every link with your current Site-Url. boolean false
translations Override plugin translations. array []
target-field By setting hidden, the field will be hidden. Setting disabled will disable the field but keep it visible. string
anchor-field By setting hidden, the field will be hidden. Setting disabled will disable the field but keep it visible. string

Usage

// site/config/config.php
return [
  "gearsdigital.enhanced-toolbar-link-dialog" => [
    "title" => "{{ page.title }}",
    "filter" => null,
    "sort" => null,
    "qualified" => false,
    "translations" => [],
    "anchor-field" => 'hidden',
    "target-field" => disabled,
  ]
];

Installation

Composer (recommended)

composer require gearsdigital/enhanced-toolbar-link-dialog

Download

Download the latest version, copy all files to /site/plugins/enhanced-toolbar-link-dialog.

Git submodule

git submodule add https://github.com/gearsdigital/enhanced-toolbar-link-dialog.git site/plugins/enhanced-toolbar-link-dialog

FAQ

Can I use this plugin with Kirby Blocks?

Starting from version 3.0.0, Blocks are supported, and it also works seamlessly with default textareas.

Can I link to different sites?

Yes, absolutely. Just write (or paste) the URL into the Link field.

Can I create anchor-only links?

If you want to jump to a specific part of the page you're currently editing, you can create anchor-only links by leaving the Link field empty and filling in the Anchor field.

Can I customize the result list page title?

Yes, you can use the title option to customize the title according to your needs using the Kirby Query Language.

Within a query, you have access to page, site, and kirby objects. For example, setting 'title' => '{{ page.title }} [{{ page.parent.title }}]' will display the title as 'Mountains [Photography]'.

Can I show only pages that match some specific criteria?

Certainly! By setting "filter"=> ['status', 'listed'], only listed pages will be displayed. You can study the Filtering compendium to learn more about filtering collections in Kirby.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Localization

This is the list of all available translation keys:

Key Value
gearsdigital.enhanced-toolbar-link-dialog.anchor.title Anchor
gearsdigital.enhanced-toolbar-link-dialog.field.autosuggest.placeholder Enter a URL or search term…

You can override translations by adding this to your site config.

// site/config/config.php
return [
  "gearsdigital.enhanced-toolbar-link-dialog" => [
    "translations" => [
      "en" => [
        "gearsdigital.enhanced-toolbar-link-dialog.autosuggest.placeholder" => "I'm overridden!",
      ],
    ],
  ]
]

Available languages

  • English (default)
  • German 🇩🇪
  • French 🇫🇷
  • Dutch 🇳🇱
  • Danish 🇩🇰
  • Norwegian 🇳🇴
  • Swedish 🇸🇪
  • Islandic 🇮🇸

License

MIT

enhanced-toolbar-link-dialog's People

Contributors

dependabot[bot] avatar gearsdigital avatar herrajon avatar janherman avatar malvese avatar mvilskersts avatar renestalder avatar semantic-release-bot avatar yoanmalie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

enhanced-toolbar-link-dialog's Issues

Move dialog pagination

Right now the pagination is the very last element but to improve the usability it should be closer to the page list.

Feature Request: Link to Files

Thank you for writing this plugin, it's truly helpful!
It would be really cool if it was possible to link to uploaded files also - e.g. pdf documents, or even images or videos.
Do you think this might be in the cards?

Compatibility with Kirby blocks

Can you please add support for Kirby blocks links?
I have installed your latest plugin on my Kirby 3.6 environment and cannot see any difference for blocks links.

Plugin breaks Panel of kirby v.3.4.0-rc.2

Describe the bug
Unfortunately Your plugin breaks the panel of the recent kirby version.

To Reproduce

Case 1:

  1. If the panel is already installed, go to panel/users
  2. No user is shown
  3. Creating a new User also fails

Console output:

GET http://localhost/my-project/api/roles 500 (Internal Server Error)
message: "Call to a member function value() on string"

GET http://localhost/my-project/api/translations 500 (Internal Server Error)
message: Call to undefined method Kirby\Cms\Translation::title()

enhanced-toolbar-link001

Case 2:

  1. Create a new kirby project
  2. Go to my-project/panel
  3. The panel installation page stays blank

Console output:

GET http://localhost/my-project/api/translations 500 (Internal Server Error)
message: Call to undefined method Kirby\Cms\Translation::title()

*enhanced-toolbar-link-dialog Version
1.2.3

Kirby Version
3.4.0-rc.2

Additional context
Many thanks in advance for having a look into it! 🙌🏼 😊

Make Link-Target Text in Dropdown configurable

Here's another improvement, that could be useful.
Sometimes there are Editors that have absolutely no idea what "target:" self, blank, top, etc means.
So instead of hardcoding the text into select field, we could extend the options in the config with a custom text, like

"blank" => "Open in new window / tab",
"self" => "Open in same window",
"top" ...

I don't want to bother You too much, so I can try to solve it myself and make a pull request again (will probably find some time next week).
Just wanted to know, what You think about the idea. :)

Optimize user interface

It would be nice the clean up the UI bit by removing the "Target" dropdown and get rid of "Frame" option. Maybe a simple checkbox or toggle field could do the trick.

Enable link dialog in Kirby Editor

Great plugin! Really helps lower the barrier for non-technical editors.

Is there anyway to trigger the plugin's link dialog when adding a link within the Kirby Editor? Unfortunately when you mark a text and want to add/convert it to a link, you get the standard link dialog.

I have tried to read through the plugin's code, but I can't see where the hook for the default textarea field is, and therefore I do not know how to hook into the Kirby Editor plugin.

Happy to give it a shot myself!

Make list size configurable

We should make the amount of visible pages configurable so a user can define what amount of pages he wants to see.

Translation Dutch (NL)

$translations = [
'nl' => [
'gearsdigital.enhanced-toolbar-link-dialog.internal' => 'Interne Link',
'gearsdigital.enhanced-toolbar-link-dialog.external' => 'Externe Link',
'gearsdigital.enhanced-toolbar-link-dialog.empty' => 'Geen pagina's gevonden',
'gearsdigital.enhanced-toolbar-link-dialog.target.title' => 'Link Doel',
'gearsdigital.enhanced-toolbar-link-dialog.target.help' => 'Geef aan waar het gekoppelde document moet worden geopend.',
],

Improve accessibility of UI

The search results of the link field can't be selected by keyboard. I would usually expect them to be accessible by arrow keys. See the native <datalist> HTML element for an example of accessible keyboard navigation.

There are probably more issues when used with a screen reader (like announcement of update results etc.), but the keyboard navigation would already be a quick-win.

Make dialog tab order configurable

One might to deal with internal links a lot and it's a bit inconvienent to always click on the second tab first before you can select a site.

Wouldn't it be awesome if you can spare a click and have the Internal Link Tab the first one opened?

Add default dialog behaviour

It would make sense to make the Dialog exactly like the default page dialog. Currently there are all pages included. Not Level 1 -> Level 2 …

cf8b65b15aced14d817fb0dee8d6d2e684966cdd-1

Impact on kirby modal height

Hi, thanks for your plugin that add a really good feature to kirby 🙂.

My issue is that your plugin impact the height of the general modal of kirby (for changing status, name ...)

I found that there is a min-height: in EnhancedToolbarWriterLinkDialog.vue that may cause this issue.
.k-dialog-body form { min-height: 340px; }
Is there any reason to add this ? Because without this property it seems to work too ?

How it looks normally
Capture d’écran 2023-03-09 à 13 11 25

how it's altered by the plugin
Capture d’écran 2023-03-09 à 13 08 35

add plugin option to configure displayed title

could use an plugin option based on a query instead.
i would need that to show parent title as a category kind of style.

'gearsdigital.enhanced-toolbar-link-dialog.link.title' => '{{ page.title }} [ {{ page.parent.title }} ]',

https://github.com/gearsdigital/enhanced-toolbar-link-dialog/blob/master/index.php#L16

$query = option('gearsdigital.enhanced-toolbar-link-dialog.link.title', '{{ page.title }}');
return Str::template($query, [
 'page' => $page,
 'site' => site(),
 'kirby' => kirby(),
]);

Compatibility issue with Kirby 3.6.0 alpha.x

Hello everyone,
with new Kirby version "3.6.0 alpha.x" the page listing under INTERNER LINK isn't visible anymore.
Also German Language setting is not reflected anymore.
Last known running plug-in is with Kirby version "3.5.7.1"

I see:
image

instead of:
image

Best Regards
Zeljko

Pages don't show up in 3.7

Hi there!

In Kirby v3.7, the paginated list of pages does not show up anymore which does not allow for the selection of pages and effectively renders the plugin unusable.

20220725-165500_Screenshot_starterkit test

Note that the filtering and searching still seems to work as indicated by the pagination numbers and UI, but I cannot select any pages anymore. Any idea how to fix this?

Thanks!

Internal link search - no pages shown

When I start typing into the search field and then delete it (so that the field is empty), it should show me all the pages again. But no pages are displayed in the list below the field.

Make search case-insensitive?

I just realized the search is case sensitive. For example, I have a page called "Kontakt". It does not find that page when I type "kontakt" into the search field. Is it possible to make it case-insensitive? :-)

Internal Links should be converted to relative links

Is it possible to have links within a textarea to be relative instead of absolute?

(link: /neues/a-night-in-the-forest text: I am the link)

this gives me a with $page->text()->kt() the following:

<a href=\"http://fulldomain.de/neues/a-night-in-the-forest\">I am the link</a>

If its a internal link, i want to get the following:

<a href=\"./neues/a-night-in-the-forest\">I am the link</a>

It works, if i change the link field in my textarea to the following:

(link: ./neues/a-night-in-the-forest text: I am the link)

Evaluate dedicated toolbar button

Right now, Enhanced Toolbar Link Dialog, does what its name says, it extends the standard link dialog by adding a tabbed interface.

It might be a good idea to have dedicated toolbar button which would reduce the overall complexity.

Remove domain from page url

It would be much more convenient and less error prone if we would strip out the domain.

Before

(link: http://localhost:3010/images/mountains text: mountains)

After

(link: /images/mountains text: mountains)

External link link target

I think it is especially important that you can choose a link target for an external link. Now that is only possible with internally links.

Deprecation Warning with php 8.1.3

Hi Steffen,

I'm getting the following deprecation warning when I log in to the panel:
is_a(): Passing null to parameter #2 ($class) of type string is deprecated".
I went through all installed plugins and it seems, that the warning comes from the toolbar-link-dialog.
I recently upgraded my php version, so I guess, that's why the error shows up now.

Toolbar Version: 2.2.2
Kirby Version: 3.6.3-rc.1
PHP Version: 8.1.3

Feature request: Option to disable the anchor field

First of all, thank you for your plugin. It is so simple that I may use it by default on all my new Kirby projects, until it ends up being eventually integrated to the Kirby core.

It would be really nice to have a config option to disable the anchor field, to allow building simpler websites for unskilled clients who do not need to know what an anchor is.

link target shows 2x _blank

Sorry to bother again, but here's another (small) bug, that I've found.

Describe the bug
The label for 'self' in the dropdown shows 'blank'.

Screenshot
target

enhanced-toolbar-link-dialog Version
1.3

Kirby Version
3.3.6

Also, maybe an enhancement could be to only show the insert button (or make it active), when a page has been selected, so the user can't insert (link: null).
I'm very happy with Your plugin, and I already feel bad for the many reports, so let me know, how I can buy You a beer! 🙃

Internal link search not working

I noticed Internal link search field is not working properly after updating to 1.3.1.

To reproduce:

  1. open link dialog and switch to Internal link
  2. start typing - no filter is applied and I get a lot of errors in console: Uncaught TypeError: can't access property "page", c.pagination is undefined

If I have more pages, so that pagination is displayed at the bottom, the search kind of works. I have to:

  1. start typing - the view is not filtered again
  2. click on next page in pagination
  3. sometimes, the pages list in filtered according to the search term

My setup:
Kirby 3.4.0, Enhanced toolbar link dialog v. 1.3.1

Cannot delete custom url pages

What i’m doing:
I have a event with a date, when it happens. I want to add the date of the event to the slug of the page. e.g. EventXYZ happens on 02.08.2022 which should create a slug eventxyz-02-08-2022. This is currently working as expected. But unfortunately i cannot delete these “custom” generated pages. It shows me the following error after i clicked on "Delete":
image

blueprint.yml:

addFields:
  title:
    label: Titel
    type: text
    required: true
    icon: title
    preselect: true

  date:
    label: Datum
    help: Wann findet die Darbietung statt?
    type: date
    display: DD.MM.YYYY
    default: today
    required: true

  __dialog:
    skip: true
    redirect: true

These are the XHR Requests:
image

1. Page Fetch:
{
  "$dropdown": {
    "options": [
      {
        "dialog": {
          "url": "/pages/darbietungen+test4-20-08-2022/changeTitle",
          "query": {
            "select": "title"
          }
        },
        "icon": "title",
        "text": "Umbenennen",
        "disabled": false
      },
      {
        "dialog": "/pages/darbietungen+test4-20-08-2022/duplicate",
        "icon": "copy",
        "text": "Duplizieren",
        "disabled": false
      },
      "-",
      {
        "dialog": {
          "url": "/pages/darbietungen+test4-20-08-2022/changeTitle",
          "query": {
            "select": "slug"
          }
        },
        "icon": "url",
        "text": "URL ändern",
        "disabled": false
      },
      {
        "dialog": "/pages/darbietungen+test4-20-08-2022/changeStatus",
        "icon": "preview",
        "text": "Status ändern",
        "disabled": false
      },
      {
        "dialog": "/pages/darbietungen+test4-20-08-2022/changeSort",
        "icon": "sort",
        "text": "Position ändern",
        "disabled": true
      },
      {
        "dialog": "/pages/darbietungen+test4-20-08-2022/changeTemplate",
        "icon": "template",
        "text": "Vorlage ändern",
        "disabled": true
      },
      "-",
      {
        "dialog": "/pages/darbietungen+test4-20-08-2022/delete",
        "icon": "trash",
        "text": "Löschen",
        "disabled": false
      }
    ],
    "code": 200,
    "path": "dropdowns/pages/darbietungen+test4-20-08-2022",
    "referrer": "/pages/darbietungen+test4-20-08-2022"
  }
}
2. panel/dialogs//pages/darbietungen+test4-20-08-2022/delete Success Response:
{
  "$dialog": {
    "component": "k-remove-dialog",
    "props": {
      "text": "Willst du die Seite <strong>test4</strong> wirklich löschen?"
    },
    "code": 200,
    "path": "dialogs/pages/darbietungen+test4-20-08-2022/delete",
    "referrer": "/pages/darbietungen+test4-20-08-2022"
  }
}
3. panel/dialogs/pages/darbietungen+test4-20-08-2022/delete Error Response:
{
  "$dialog": {
    "code": 500,
    "error": "Trying to access array offset on value of type null",
    "path": "dialogs/pages/darbietungen+test4-20-08-2022/delete",
    "referrer": "/pages/darbietungen+test4-20-08-2022"
  }
}

↑ whats looking odd to me is the dialogs/ prefix in the path. But i don’t know what value the function tries to access, which is null.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.