Add docs for toolbar controller and pad_editbar

pull/2110/head
Marcel Klehr 2014-03-16 15:43:38 +01:00
parent da5970dda3
commit a69793a203
4 changed files with 107 additions and 2 deletions

View File

@ -6,3 +6,5 @@
@include editorInfo @include editorInfo
@include changeset_library @include changeset_library
@include pluginfw @include pluginfw
@include toolbar
@include editbar

28
doc/api/editbar.md Normal file
View File

@ -0,0 +1,28 @@
# Editbar
srf/static/js/pad_editbar.js
## isEnabled()
## disable()
## toggleDropDown(dropdown, callback)
Shows the dropdown `div.popup` whose `id` equals `dropdown`.
## registerCommand(cmd, callback)
Register a handler for a specific command. Commands are fired if the corresponding button is clicked or the corresponding select is changed.
## registerAceCommand(cmd, callback)
Creates an ace callstack and calls the callback with an ace instance: `callback(cmd, ace)`.
Example:
```
toolbar.registerAceCommand("insertorderedlist", function (cmd, ace) {
ace.ace_doInsertOrderedList();
});
```
## registerDropdownCommand(cmd, dropdown)
Ties a `div.popup` where `id` equals `dropdown` to a `command` fired by clicking a button.
## triggerCommand(cmd[, item])
Triggers a command (optionally with some internal representation of the toolbar item that triggered it).

View File

@ -63,7 +63,46 @@ Things in context:
This hook gets called upon the rendering of an ejs template block. For any specific kind of block, you can change how that block gets rendered by modifying the content object passed in. This hook gets called upon the rendering of an ejs template block. For any specific kind of block, you can change how that block gets rendered by modifying the content object passed in.
Have a look at `src/templates/pad.html` and `src/templates/timeslider.html` to see which blocks are available. Available blocks in `pad.html` are:
* `htmlHead` - after `<html>` and immediately before the title tag
* `styles` - the style `<link>`s
* `body` - the contents of the body tag
* `editbarMenuLeft` - the left tool bar (consider using the toolbar controller instead of manually adding html here)
* `editbarMenuRight` - right tool bar
* `afterEditbar` - allows you to add stuff immediately after the toolbar
* `userlist` - the contents of the userlist dropdown
* `loading` - the intial loading message
* `mySettings` - the left column of the settings dropdown ("My view"); intended for adding checkboxes only
* `mySettings.dropdowns` - add your dropdown settings here
* `globalSettings` - the right column of the settings dropdown ("Global view")
* `importColumn` - import form
* `exportColumn` - export form
* `modals` - Contains all connectivity messages
* `embedPopup` - the embed dropdown
* `scripts` - Add your script tags here, if you really have to (consider use client-side hooks instead)
`timeslider.html` blocks:
* `timesliderStyles`
* `timesliderScripts`
* `timesliderBody`
* `timesliderTop`
* `timesliderEditbarRight`
* `modals`
`index.html` blocks:
* `indexWrapper` - contains the form for creating new pads
## padInitToolbar
Called from: src/node/hooks/express/specialpages.js
Things in context:
1. toolbar - the toolbar controller that will render the toolbar eventually
Here you can add custom toolbar items that will be available in the toolbar config in `settings.json`. For more about the toolbar controller see the API section.
## padCreate ## padCreate
Called from: src/node/db/Pad.js Called from: src/node/db/Pad.js

36
doc/api/toolbar.md Normal file
View File

@ -0,0 +1,36 @@
# Toolbar controller
src/node/utils/toolbar.js
## button(opts)
* {Object} `opts`
* `command` - this command fill be fired on the editbar on click
* `localizationId` - will be set as `data-l10-id`
* `class` - here you can add additional classes to the button
Returns: {Button}
Example:
```
var orderedlist = toolbar.button({
command: "insertorderedlist",
localizationId: "pad.toolbar.ol.title",
class: "buttonicon-insertorderedlist"
})
```
## selectButton(opts)
* {Object} `opts`
* `id` - id of the menu item
* `selectId` - id of the select element
* `command` - this command fill be fired on the editbar on change
Returns: {SelectButton}
## SelectButton.addOption(value, text, attributes)
* {String} value - The value of this option
* {String} text - the label text used for this option
* {Object} attributes - any additional html attributes go here (e.g. `data-l10n-id`)
## registerButton(name, item)
* {String} name - used to reference the item in the toolbar config in settings.json
* {Button|SelectButton} item - the button to add