devel:toolbar
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
devel:toolbar [2016-05-08 00:00] – Klap-in | devel:toolbar [2019-04-21 03:47] – Dr-Yukon | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== The Toolbar ====== | ====== The Toolbar ====== | ||
- | The [[: | + | The [[: |
===== How the toolbar is built (and cached) ===== | ===== How the toolbar is built (and cached) ===== | ||
Line 7: | Line 7: | ||
The toolbar is completely built through [[JavaScript]]. Which buttons the toolbar contains, is read from an array called '' | The toolbar is completely built through [[JavaScript]]. Which buttons the toolbar contains, is read from an array called '' | ||
- | This means, the toolbar gets cached like any other JavaScript in DokuWiki. | + | This means the toolbar gets cached like any other JavaScript in DokuWiki. |
==== The toolbar array ==== | ==== The toolbar array ==== | ||
Line 37: | Line 36: | ||
A look at [[xref> | A look at [[xref> | ||
+ | |||
===== Extending the Toolbar... ===== | ===== Extending the Toolbar... ===== | ||
- | The toolbar can be customized in two ways - via JavaScript or PHP. Which method you choose basically depends on your skills and familiarity with the language at hand. For the PHP approach you will always need to write a plugin, the JavaScript method can be used from a [[javascript|userscript]] as well. | + | The toolbar can be customized in two ways - via JavaScript or PHP. Which method you choose basically depends on your skills and familiarity with the language at hand. For the PHP approach, you will always need to write a plugin, the JavaScript method can be used from a [[javascript|userscript]] as well. |
==== ...using PHP ==== | ==== ...using PHP ==== | ||
- | To extend the toolbar from your plugin you need to write a [[devel: | + | To extend the toolbar from your plugin you need to write a [[devel: |
Create your button structure according to the above information and add it to the received event data.-function in '' | Create your button structure according to the above information and add it to the received event data.-function in '' | ||
Line 70: | Line 70: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | Try to use [[plugin: | ||
==== ...using JavaScript ==== | ==== ...using JavaScript ==== | ||
Line 114: | Line 116: | ||
</ | </ | ||
Some notes: | Some notes: | ||
- | * Be aware of the default locations of the images '' | + | * Be aware of the default locations of the images: '' |
* The available options for access keys depends on the [[: | * The available options for access keys depends on the [[: | ||
* More about [[devel: | * More about [[devel: | ||
Line 120: | Line 122: | ||
==== Dynamic Data ==== | ==== Dynamic Data ==== | ||
- | The above methods work well for adding static buttons that add static data. When you need to do something more dynamic like adding the current date, you can not simply extend the '' | + | The above methods work well for adding static buttons that add static data. When you need to do something more dynamic like adding the current date, you can not simply extend the '' |
The files [[xref> | The files [[xref> | ||
- | When adding to the '' | + | When adding to the '' |
The returned string is "the id for in aria-control" | The returned string is "the id for in aria-control" | ||
Line 180: | Line 182: | ||
* If you don't want to append your button at the end of the toolbar, you just need to insert your data into the '' | * If you don't want to append your button at the end of the toolbar, you just need to insert your data into the '' | ||
* There are some [[devel: | * There are some [[devel: | ||
- | * **Important**: | + | * **Important**: |
Line 201: | Line 203: | ||
Then take the string and append it to the ' | Then take the string and append it to the ' | ||
+ | See also the [[plugin: | ||
+ | |||
+ | ===== CSS Spritemap ===== | ||
+ | |||
+ | If you need to reduce the number of server requests for downloading micro-icons, | ||
+ | - 15 icons of the 20 in the ''/ | ||
+ | - You can take the finished spritemap [[https:// | ||
+ | - CSS used to show a certain point on spritemap. | ||
+ | - Add the following CSS rules to your local style file ''/ | ||
+ | <code css> | ||
+ | #tool__bar { | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | background: | ||
+ | height: 16px; | ||
+ | margin: 4px 7px 3px 3px; | ||
+ | vertical-align: | ||
+ | width: 16px; | ||
+ | img { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | button: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Maybe one day this fix will be obsolete due to the introduction of spritemap in the Dokuwiki. |
devel/toolbar.txt · Last modified: 2023-08-01 20:08 by annda