diff --git a/doc/api/api.md b/doc/api/api.md index eb5bb9c9b..d124e4c3f 100644 --- a/doc/api/api.md +++ b/doc/api/api.md @@ -5,4 +5,6 @@ @include hooks_server-side @include editorInfo @include changeset_library -@include pluginfw \ No newline at end of file +@include pluginfw +@include toolbar +@include editbar \ No newline at end of file diff --git a/doc/api/editbar.md b/doc/api/editbar.md new file mode 100644 index 000000000..ce89c0b7c --- /dev/null +++ b/doc/api/editbar.md @@ -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). \ No newline at end of file diff --git a/doc/api/hooks_server-side.md b/doc/api/hooks_server-side.md index 0486f7d3c..0bde2aad4 100644 --- a/doc/api/hooks_server-side.md +++ b/doc/api/hooks_server-side.md @@ -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. -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 `` and immediately before the title tag + * `styles` - the style ``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 Called from: src/node/db/Pad.js diff --git a/doc/api/toolbar.md b/doc/api/toolbar.md new file mode 100644 index 000000000..1ca61ced1 --- /dev/null +++ b/doc/api/toolbar.md @@ -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 \ No newline at end of file