Add docs for toolbar controller and pad_editbar
Marcel Klehr
parent
da5970dda3
commit
a69793a203
|
|
@ -6,3 +6,5 @@
|
||||||
@include editorInfo
|
@include editorInfo
|
||||||
@include changeset_library
|
@include changeset_library
|
||||||
@include pluginfw
|
@include pluginfw
|
||||||
|
@include toolbar
|
||||||
|
@include editbar
|
||||||
|
|
@ -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).
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
Loading…
Reference in New Issue