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 [2013-12-05 22: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 20: | Line 19: | ||
| '' | | '' | ||
| '' | | '' | ||
- | | '' | + | | '' |
+ | | '' | ||
+ | | '' | ||
^ '' | ^ '' | ||
| '' | | '' | ||
Line 31: | Line 32: | ||
| '' | | '' | ||
^ '' | ^ '' | ||
- | | '' | + | | '' |
- | | '' | + | | '' |
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 57: | Line 59: | ||
* Inserts a toolbar button | * Inserts a toolbar button | ||
*/ | */ | ||
- | function insert_button(& $event, $param) { | + | function insert_button(Doku_Event |
$event-> | $event-> | ||
' | ' | ||
Line 68: | Line 70: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | Try to use [[plugin: | ||
==== ...using JavaScript ==== | ==== ...using JavaScript ==== | ||
Line 112: | 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 118: | 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" | ||
Here is an example partly from the toolbar picker: | Here is an example partly from the toolbar picker: | ||
Line 175: | 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**: |
+ | |||
+ | |||
+ | === Removing Buttons === | ||
+ | |||
+ | If you want to remove some of the toolbar buttons, you can do so by adding the following code into ''/ | ||
+ | |||
+ | <code javascript / | ||
+ | if (typeof window.toolbar !== ' | ||
+ | var blacklist = ["Bold Text", " | ||
+ | " | ||
+ | " | ||
+ | window.toolbar = window.toolbar.filter(function(elem){ return jQuery.inArray(elem.title, | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | This is from my personal wiki where I removed almost all the buttons. You can figure out what the title of your button is by running the following snippet in a javascript console: | ||
+ | <code javascript> | ||
+ | |||
+ | 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