makeSettings -> renderSettings (#315)

This commit is contained in:
Taly 2018-07-19 17:50:30 +03:00 committed by GitHub
parent f2ef201a52
commit 835e698e23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 54 additions and 28 deletions

View file

@ -5936,8 +5936,8 @@ var BlockSettings = function (_Module) {
}, {
key: 'addToolSettings',
value: function addToolSettings() {
if (typeof this.Editor.BlockManager.currentBlock.tool.makeSettings === 'function') {
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.makeSettings());
if (typeof this.Editor.BlockManager.currentBlock.tool.renderSettings === 'function') {
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.renderSettings());
}
}
@ -7501,11 +7501,18 @@ var UI = function (_Module) {
case _.keyCodes.ENTER:
this.enterPressed(event);
break;
default:
this.defaultBehaviour(event);
break;
}
}
/**
* Ignore all other document's keydown events
* @param {KeyboardEvent} event
*/
}, {
key: 'defaultBehaviour',
value: function defaultBehaviour(event) {
@ -7516,7 +7523,14 @@ var UI = function (_Module) {
* clear pointer and close toolbar
*/
if (!keyDownOnEditor) {
/**
* Remove all highlights and remove caret
*/
this.Editor.BlockManager.dropPointer();
/**
* Close Toolbar
*/
this.Editor.Toolbar.close();
}
}

File diff suppressed because one or more lines are too long

View file

@ -10,52 +10,52 @@ regardless to the plugin's option.
### Let's look the examples:
«Plugin»'s Developers need to expand «makeSettings» method that returns HTML.
«Plugin»'s Developers need to expand «renderSettings» method that returns HTML.
Every user action will be handled by itself. So, you can easily write
callbacks that switches your content or makes better. For more information
read [Tools](tools.md).
---
«Tune»'s Developers need to implement core-provided interface to develop
tunes that will be appeared in Toolbar default settings zone.
Tunes must expand two important methods:
- `render()` - returns HTML and it is appended to the default settings zone
- `save()` - extracts important information to be saved
No restrictions. Handle user action by yourself
Create Class that implements block-tune.ts
Your Tune's constructor gets argument as object and it includes:
- {Object} api - object contains public methods from modules. @see [API](api.md)
- {Object} settings - settings contains block default state.
Your Tune's constructor gets argument as object and it includes:
- {Object} api - object contains public methods from modules. @see [API](api.md)
- {Object} settings - settings contains block default state.
This object could have information about cover, anchor and so on.
Example on TypeScript:
Example on TypeScript:
```js
import IBlockTune from './block-tune';
export default class YourCustomTune implements IBlockTune {
public constructor({api, settings}) {
this.api = api;
this.settings = settings;
}
render() {
let someHTML = '...';
let someHTML = '...';
return someHTML;
}
save() {
// Return the important data that needs to be saved
return object
}
someMethod() {
// moves current block down
this.api.blocks.moveDown();
@ -67,22 +67,22 @@ Example on ES6
```js
export default class YourCustomTune {
constructor({api, settings}) {
this.api = api;
this.settings = settings;
}
render() {
let someHTML = '...';
let someHTML = '...';
return someHTML;
}
save() {
// Return the important data that needs to be saved
return object
}
someMethod() {
// moves current block down
this.api.blocks.moveDown();

View file

@ -96,7 +96,7 @@ class Header {
*
* @return {HTMLElement}
*/
makeSettings() {
renderSettings() {
let holder = document.createElement('DIV');
/** Add type selectors */

View file

@ -22,7 +22,7 @@ export interface IBlockTool {
* Create Block's settings block
* @return {HTMLElement}
*/
makeSettings(): HTMLElement;
renderSettings(): HTMLElement;
/**
* Return Tool's main block-wrapper

View file

@ -95,7 +95,7 @@ export default class BlocksAPI extends Module implements IBlocksAPI {
if (this.Editor.BlockManager.currentBlockIndex === 0) {
this.Editor.Caret.setToBlock(this.Editor.BlockManager.currentBlock);
} else {
this.Editor.Caret.navigatePrevious(true)
this.Editor.Caret.navigatePrevious(true);
}
this.Editor.Toolbar.close();

View file

@ -70,8 +70,8 @@ export default class BlockSettings extends Module {
* Add Tool's settings
*/
addToolSettings() {
if (typeof this.Editor.BlockManager.currentBlock.tool.makeSettings === 'function') {
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.makeSettings());
if (typeof this.Editor.BlockManager.currentBlock.tool.renderSettings === 'function') {
$.append(this.nodes.toolSettings, this.Editor.BlockManager.currentBlock.tool.renderSettings());
}
}

View file

@ -20,14 +20,14 @@ module.exports = (function (settings) {
* Append settings content
* It's stored in tool.settings
*/
if ( !editor.tools[toolType] || !editor.tools[toolType].makeSettings ) {
if ( !editor.tools[toolType] || !editor.tools[toolType].renderSettings ) {
return;
}
/**
* Draw settings block
*/
var settingsBlock = editor.tools[toolType].makeSettings();
var settingsBlock = editor.tools[toolType].renderSettings();
editor.nodes.pluginSettings.appendChild(settingsBlock);

View file

@ -38,7 +38,7 @@ module.exports = (function (toolbar) {
let toolType = editor.content.currentNode.dataset.tool;
if (!editor.tools[toolType] || !editor.tools[toolType].makeSettings ) {
if (!editor.tools[toolType] || !editor.tools[toolType].renderSettings ) {
editor.nodes.showSettingsButton.classList.add('hide');
} else {
editor.nodes.showSettingsButton.classList.remove('hide');

View file

@ -170,12 +170,17 @@ export default class UI extends Module {
case _.keyCodes.ENTER:
this.enterPressed(event);
break;
default:
this.defaultBehaviour(event);
break;
}
}
/**
* Ignore all other document's keydown events
* @param {KeyboardEvent} event
*/
defaultBehaviour(event) {
const keyDownOnEditor = event.target.closest(`.${this.CSS.editorWrapper}`);
@ -184,7 +189,14 @@ export default class UI extends Module {
* clear pointer and close toolbar
*/
if (!keyDownOnEditor) {
/**
* Remove all highlights and remove caret
*/
this.Editor.BlockManager.dropPointer();
/**
* Close Toolbar
*/
this.Editor.Toolbar.close();
}
}