TinyURL panel field

Following a discussion in this thread TinyURL in the Panel I created a field for this:

Kirby TinyURL field

A tiny field that displays the tinyURL of a page in the panel.

Kirby Tiny URL

Installation

1. Kirby CLI

If you are using the Kirby CLI you can install this plugin by running the following command in your shell from the root folder of your Kirby installation:

kirby plugin:install thiousi/kirby-tinyurl-field

2. Manual

Download this archive, extract it and rename it to tinyurl. Copy the folder to your site/fields folder.

3. Git Submodule

If you know your way around git, you can download this as a submodule:

git submodule add https://github.com/Thiousi/kirby-tinyurl-field/ site/fields/tinyurl/

Usage

In your blueprint:

  tinyurl:
    label: Tiny URL
    type: tinyurl

The field supports the standard options:

- Help
- Width

You can also internationalize the label like with any standard field.

To-do

[ ] Copy to clipboard on click

License

MIT

6 Likes

Good job!

For the copying to the clipboard, try the clipboard.js library. I’ve used on a application and it’s the best out there!

1 Like

Thanks Pedro, I’ve added a link to the library on the Github issue.
I like this example in particular:

If you want to try it yourself before I do, feel free to fork it :slight_smile:

Version 1.1.0

Adds copy to clipboard functionality with clipboard.js as suggested by @pedroborges

On click, the url is copied to clipboard.

1 Like

I’m trying different things here to make it more user friendly:

  1. Field is readonly but does not use the readonly classes from Kirby
  2. Chain icon replaced by clipboard icon

I’m not sure if this is a good direction to take. Thoughts?

1 Like

+1 for the clipboard icon
-1 for removing readonly classes

Thanks for the feedback Sam!

I’m trying to add a css tooltip that displays on hover but can’t get it to work for the life of me…
Is there anything special in the panel that prevents us from adding tooltips to fields? Has anybody been able to implement css tooltips in the panel ?

Can’t you just add a title attribute? :slight_smile:

I’m not sure I understand what you’re saying Jens :flushed:

<div title="My tooltip"></div>

I’ve tried that and many other methos (data-tooltip, aria-label) but the problem is not storing the content of the tooltip but displaying it. All known methods to display a tooltip in css are not working in the panel.

But with title you don’t need CSS. It will display the title on hover anyway. Just like the title attribute on a link or an image.

1 Like

Ah I see what you mean. I’d rather style it as a proper tooltip though. For now a help text will suffice :slight_smile:

1 Like

For the record, I think keeping the help text visible is fine. You don’t need a tooltip.

But theoretically, you could do something like this…

.field-name-tiny-url .field-help {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.field-name-tiny-url .field-content:hover, + .field-help,
.field-name-tiny-url .field-content:focus, + .field-help {
  opacity: 1;
  /* Some funky absolute positioning to make it look like a tooltip */
}

This is not accessible though. I don’t think the tooltip would be viewable with keyboard navigation.

I went with the help text, the clipboard icon, the readonly state and released 1.1.1 on Github :slight_smile:

Thanks for your contributions!

1.1.1

  • Changed icon to clipboard
  • Better console logging
  • Cleaned up code
1 Like