DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:editonlink

editonlink Plugin

Compatible with DokuWiki

  • 2018-04-22 "Greebo" yes
  • 2017-02-19 "Frusterick Manners" yes
  • 2016-06-26 "Elenor Of Tsort" yes
  • 2015-08-10 "Detritus" yes

plugin Adds a popover button "Edit" to inner wiki links, so you can go edit that page in one click.

Last updated on
2018-12-12
Provides
Action
Repository
Source

Tagged with button, css, editing, links, shortcut, tooltip

Installation

Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. Refer to Plugins on how to install plugins manually.

(Early releases (before 1.0.3) had different download links; so if you have problems with their updating in Extension Manager, just uninstall the plugin and install it afresh.)

Examples/Usage

After you installed the plugin, the links to pages in your wiki will receive “Edit” button (appears on hover). So you would not need to click first the link to go to that page, and then to click “Edit page” there. With this new popover button you go to the editor window of that other page in one click.

See the popover button in action: Demo.

Hover the links and notice how the button size is adjusting to different font sizes.

Since version 1.1 (2018-11-17) there is correct support for:

  • Multi-line links (where top-right of the first line can be different from the right corner of the bounding rectangle).
  • Right-click (context menu) and Ctrl-click (open in new window). So you can easily open editing of the linked page in another tab/window, while the original link itself gets restored to its initial value.
  • Best contrast & size of the underline wave on hover.

Configuration and Settings

The plugin should work out of the box. If you would like to adjust its looks for your template, then read on please.

Technical notes:

1. If you disable Javascript, clicking the popover button will just go to the target link, without editing the target page.

2. The sizes of the popover buttons get adjusted with the links font sizes (=1em). If you want to change the appearance (the size of the popover button, its color etc.), you can apply your styles, for example, in <your dokuwiki>/conf/userstyle.css or in CSS files of your template. (For the original CSS see <your dokuwiki>/lib/plugins/editonlink/style.css).

:!: Note that you could safely change the size of the button, because the Javascript would calculate its size correctly; but if you dramatically change its perfect round form ;), and especially the positioning of the button as related to its parent link, then you should accordingly change the calculations of the target region on the screen (it's in <your dokuwiki>/lib/plugins/editonlink/script.js, and you can overwrite it in <your dokuwiki>/conf/userscript.js or in JS files of your template).

3. Likewise, overwrite CSS if you like to change the animation of hovered links. (This animation is done via tiny inline SVG).

4. Buttons are automatically added to inner wiki links (CSS classes wikilink1, wikilink2 – existing and non-existing pages) and to breadcrumbs (CSS class breadcrumbs). It can be changed via CSS.

5. CSS conflicts are unlikely, but they can happen if you style the inner wiki links in your template with :after pseudo-elements. That can conflict with the popover button. Then maybe you could change :after to :before, or something.

6. In order to add the popover button, the inner links get position: relative. It might happen that you wish to give some of such links in your template position: absolute or position: fixed. (For example, if you use those links as dropdowns in navigation toolbars or something).

Then a conflict with this plugin can happen. To avoid it, you can, for example, remove classes wikilink1, wikilink2 and breadcrumbs from those specially positioned links; or wrap them in div's or span's and give special positioning to those instead of the links.

Development

I had an idea of turning CSS of the plugin off any time when Javascript is disabled in user's browser. It could be done by detecting <html> class: no-js or js (at least, in default DokuWiki template and similar). But it appears that links on the page get drawn before <html> gets class js set; so I just leave CSS as it is.

Change Log

  • 2018-12-12 v1.2. Some tweaks for compliance and against the bug in some browsers which would make links with “position: relative” invisible in some cases.
  • 2018-11-17 v1.1. Support for multiline links, ctrl-click, right-click.
    • In case of multiline link, clientBoundingRect top-right might not give the correct position of the button; so I use adding another element with the same positioning on the link click, to learn the actual coordinates of the “:after” element (the button).
    • Using things like ctrl-click and right-click, the user can stay on the page after clicking the link; so I restore the target link to its original href (onmouseleave).
  • 2018-11-16 v1.0.5. More contrast for the hover underline wave
  • 2018-11-15 v1.0.4. Underline wave style adjusted
  • 2018-11-14 v1.0.3. Style & test improvements; download link changed. Uninstall and then reinstall the plugin in case you have problems upgrading via Extension Manager.
  • 2018-11-14 v1.0.2. Removed hash part of the URL when going to editing
  • 2018-11-14 v1.0.1. Style fix
  • 2018-11-13 v1.0. Initial release

Known Bugs and Issues

To discuss bugs or issues, please use the github tracker.

:!: Due to some FF bug (?), in some templates, elements with “position: relative” (and manipulated visibility/opacity of pseudo-elements) can remain invisible when scrolled into the window. In that case, try to set “z-index: 1” or something.

Maybe I should add z-index to wikilink style, but I'm not sure what exactly is that bug and wouldn't that be excessive for usual templates.

ToDo/Wish List

Empty.

FAQ

Q. Would buttons added to all those links slow down the page?

A. Not at all. In general, there are several reasons why pages can get slower with plugins and other bells and whistles:

  • Loading larger contents. In this case, the plugin is very tiny (about 3 kb non gzipped).
  • Loading of additional files. For example, if a page requests additional pictures, you need to wait while the request to the server gets there and back. It can slow the page rendering indeed, therefore DokuWiki transforms small pictures into inline CSS (encoded text in CSS), which wouldn't require additional requests. In this plugin, the pictures are already inline CSS – no delay whatsoever.
  • Heavy Javascript processing in browser can slow the page down. In this plugin, there is no such thing. The program is well optimized, it uses only one event listener regardless of how much links are there on the page. And it's invoked only once per click; so it doesn't affect the performance at all.
  • CSS styling takes some (small) time, so the more CSS, the slower the page. However, modern browsers are very fast in applying the same styles to many elements; so even if there are hundreds of links on your page, I doubt you could notice any difference.
  • Inserting elements in DOM can be somehow time-consuming – especially when repeated many times. In other words, Javascript can insert elements in your page, and then every time the browser has to re-calculate and re-construct everything. But in this plugin, the buttons are pseudo-elements – CSS styles, not real elements, they don't get inserted in the DOM. The only insertion happens on clicking the link – and it takes just few milliseconds.

Conclusion: this plugin just couldn't have any noticeable effect on the performance.

Discussion

If the link contains a parameter – like “this:page?do=something”, then the button click replaces that parameter with “?do=edit” (for the moment of clicking; then the link gets restored to its original URL). The point is, by this button you go to edit an address with any additional parameters stripped. I believe it's how the editing works anyway.

An interesting development could be to show a little popup menu when clicking that button. (It would be painted by JS, only by the click, thus having no influence on the speed of the page).

plugin/editonlink.txt · Last modified: 2018-12-12 06:10 by sancaya