mirror of
https://github.com/codex-team/editor.js
synced 2026-03-16 23:55:49 +01:00
add move up button to default tunes area
This commit is contained in:
parent
cd6edef5a4
commit
7945bcee30
8 changed files with 115 additions and 84 deletions
|
|
@ -931,13 +931,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
|
||||
*
|
||||
* @class MoveUpTune
|
||||
* @classdesc Editor's default tune that moves up selected block
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
var MoveUpTune = function (_BlockTune) {
|
||||
_inherits(MoveUpTune, _BlockTune);
|
||||
|
||||
|
|
@ -947,6 +945,7 @@ var MoveUpTune = function (_BlockTune) {
|
|||
return _possibleConstructorReturn(this, (MoveUpTune.__proto__ || Object.getPrototypeOf(MoveUpTune)).call(this, state));
|
||||
}
|
||||
/**
|
||||
* Create "MoveUp" button and add click event listener
|
||||
* @returns [Element}
|
||||
*/
|
||||
|
||||
|
|
@ -958,8 +957,19 @@ var MoveUpTune = function (_BlockTune) {
|
|||
textContent: 'Her'
|
||||
});
|
||||
|
||||
moveUpButton.addEventListener('click', this.handle, false);
|
||||
return moveUpButton;
|
||||
}
|
||||
/**
|
||||
* Move current block up
|
||||
* @param {Event} event
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'handle',
|
||||
value: function handle(event) {
|
||||
console.log('hey');
|
||||
}
|
||||
}]);
|
||||
|
||||
return MoveUpTune;
|
||||
|
|
@ -983,7 +993,7 @@ module.exports = exports['default'];
|
|||
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
|
@ -992,24 +1002,38 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||
|
||||
/**
|
||||
* BlockTune abstract class
|
||||
*
|
||||
* All tunes must expand this class
|
||||
*/
|
||||
var BlockTune = function () {
|
||||
function BlockTune(state) {
|
||||
_classCallCheck(this, BlockTune);
|
||||
/**
|
||||
* Tune's state
|
||||
* @param {Object} state
|
||||
*/
|
||||
function BlockTune(state) {
|
||||
_classCallCheck(this, BlockTune);
|
||||
|
||||
this.state = state;
|
||||
}
|
||||
/**
|
||||
* @return {Element}
|
||||
*/
|
||||
this.state = state;
|
||||
}
|
||||
/**
|
||||
* @return {Element}
|
||||
*/
|
||||
|
||||
|
||||
_createClass(BlockTune, [{
|
||||
key: "render",
|
||||
value: function render() {}
|
||||
}]);
|
||||
_createClass(BlockTune, [{
|
||||
key: "render",
|
||||
value: function render() {}
|
||||
/**
|
||||
* Handle click event
|
||||
* @param {Event} event
|
||||
*/
|
||||
|
||||
return BlockTune;
|
||||
}, {
|
||||
key: "handle",
|
||||
value: function handle(event) {}
|
||||
}]);
|
||||
|
||||
return BlockTune;
|
||||
}();
|
||||
|
||||
BlockTune.displayName = "BlockTune";
|
||||
|
|
@ -1203,11 +1227,24 @@ var Block = function () {
|
|||
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make an array with default settings
|
||||
* Each block has default tune instance that have states
|
||||
* @return {*[]}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'makeTunes',
|
||||
value: function makeTunes() {
|
||||
return [new _blockTuneMoveUp2.default(this.settings)];
|
||||
}
|
||||
|
||||
/**
|
||||
* Enumerates initialized tunes and returns fragment that can be appended to the toolbars area
|
||||
* @return {DocumentFragment}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'renderTunes',
|
||||
value: function renderTunes() {
|
||||
|
|
@ -1217,7 +1254,6 @@ var Block = function () {
|
|||
$.append(tunesElement, tune.render());
|
||||
});
|
||||
|
||||
console.log(tunesElement);
|
||||
return tunesElement;
|
||||
}
|
||||
|
||||
|
|
@ -3984,10 +4020,6 @@ var BlockSettings = function (_Module) {
|
|||
}, {
|
||||
key: 'addToolSettings',
|
||||
value: function addToolSettings() {}
|
||||
// console.log('Block Settings: add settings for ',
|
||||
// this.Editor.BlockManager.currentBlock
|
||||
// );
|
||||
|
||||
|
||||
/**
|
||||
* Add default settings
|
||||
|
|
@ -3996,33 +4028,7 @@ var BlockSettings = function (_Module) {
|
|||
}, {
|
||||
key: 'addDefaultSettings',
|
||||
value: function addDefaultSettings() {
|
||||
var _this2 = this;
|
||||
|
||||
this.Editor.BlockManager.currentBlock.renderTunes();
|
||||
|
||||
/**
|
||||
* Remove Block Button
|
||||
* --------------------------------------------
|
||||
*/
|
||||
this.nodes.buttonRemove = $.make('div', BlockSettings.CSS.button, {
|
||||
textContent: 'Remove Block'
|
||||
});
|
||||
|
||||
$.append(this.nodes.defaultSettings, this.nodes.buttonRemove);
|
||||
|
||||
this.Editor.Listeners.on(this.nodes.buttonRemove, 'click', function (event) {
|
||||
return _this2.removeBlockButtonClicked(event);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Clicks on the Remove Block Button
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'removeBlockButtonClicked',
|
||||
value: function removeBlockButtonClicked() {
|
||||
console.log('❇️ Remove Block Button clicked');
|
||||
$.append(this.nodes.defaultSettings, this.Editor.BlockManager.currentBlock.renderTunes());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,15 +1,14 @@
|
|||
/**
|
||||
*
|
||||
* @class MoveUpTune
|
||||
* @classdesc Editor's default tune that moves up selected block
|
||||
*/
|
||||
import BlockTune from './block-tune';
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default class MoveUpTune extends BlockTune {
|
||||
constructor(state) {
|
||||
super(state);
|
||||
}
|
||||
/**
|
||||
* Create "MoveUp" button and add click event listener
|
||||
* @returns [Element}
|
||||
*/
|
||||
render() {
|
||||
|
|
@ -17,6 +16,14 @@ export default class MoveUpTune extends BlockTune {
|
|||
textContent: 'Her'
|
||||
});
|
||||
|
||||
moveUpButton.addEventListener('click', this.handle, false);
|
||||
return moveUpButton;
|
||||
}
|
||||
/**
|
||||
* Move current block up
|
||||
* @param {Event} event
|
||||
*/
|
||||
handle(event) {
|
||||
console.log('hey');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
/**
|
||||
*
|
||||
* @class MoveUpTune
|
||||
* @classdesc Editor's default tune that moves up selected block
|
||||
*/
|
||||
import BlockTune from './block-tune';
|
||||
|
||||
declare var $: any;
|
||||
declare var _: any;
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default class MoveUpTune extends BlockTune {
|
||||
constructor(state) {
|
||||
super(state);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create "MoveUp" button and add click event listener
|
||||
* @returns [Element}
|
||||
*/
|
||||
render() {
|
||||
|
|
@ -23,6 +22,15 @@ export default class MoveUpTune extends BlockTune {
|
|||
textContent: 'Her'
|
||||
});
|
||||
|
||||
moveUpButton.addEventListener('click', this.handle, false);
|
||||
return moveUpButton;
|
||||
}
|
||||
|
||||
/**
|
||||
* Move current block up
|
||||
* @param {Event} event
|
||||
*/
|
||||
handle(event) {
|
||||
console.log("hey");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
/**
|
||||
* BlockTune abstract class
|
||||
*
|
||||
* All tunes must expand this class
|
||||
*/
|
||||
export default class BlockTune {
|
||||
/**
|
||||
* Tune's state
|
||||
* @param {Object} state
|
||||
*/
|
||||
constructor(state) {
|
||||
this.state = state;
|
||||
}
|
||||
|
|
@ -9,4 +15,9 @@ export default class BlockTune {
|
|||
* @return {Element}
|
||||
*/
|
||||
render() { }
|
||||
/**
|
||||
* Handle click event
|
||||
* @param {Event} event
|
||||
*/
|
||||
handle(event) { }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
/**
|
||||
* BlockTune abstract class
|
||||
*
|
||||
* All tunes must expand this class
|
||||
*/
|
||||
export default class BlockTune {
|
||||
|
||||
state: any;
|
||||
|
||||
/**
|
||||
* Tune's state
|
||||
* @param {Object} state
|
||||
*/
|
||||
constructor(state) {
|
||||
this.state = state;
|
||||
}
|
||||
|
|
@ -13,4 +19,10 @@ export default class BlockTune {
|
|||
* @return {Element}
|
||||
*/
|
||||
render() {}
|
||||
|
||||
/**
|
||||
* Handle click event
|
||||
* @param {Event} event
|
||||
*/
|
||||
handle(event) {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -168,6 +168,11 @@ export default class Block {
|
|||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make an array with default settings
|
||||
* Each block has default tune instance that have states
|
||||
* @return {*[]}
|
||||
*/
|
||||
makeTunes() {
|
||||
return [
|
||||
new MoveUpTune(this.settings),
|
||||
|
|
@ -175,6 +180,10 @@ export default class Block {
|
|||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Enumerates initialized tunes and returns fragment that can be appended to the toolbars area
|
||||
* @return {DocumentFragment}
|
||||
*/
|
||||
renderTunes() {
|
||||
let tunesElement = document.createDocumentFragment();
|
||||
|
||||
|
|
@ -182,7 +191,6 @@ export default class Block {
|
|||
$.append(tunesElement, tune.render());
|
||||
});
|
||||
|
||||
console.log(tunesElement);
|
||||
return tunesElement;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,35 +57,14 @@ export default class BlockSettings extends Module {
|
|||
* Add Tool's settings
|
||||
*/
|
||||
addToolSettings() {
|
||||
// console.log('Block Settings: add settings for ',
|
||||
// this.Editor.BlockManager.currentBlock
|
||||
// );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Add default settings
|
||||
*/
|
||||
addDefaultSettings() {
|
||||
this.Editor.BlockManager.currentBlock.renderTunes();
|
||||
|
||||
/**
|
||||
* Remove Block Button
|
||||
* --------------------------------------------
|
||||
*/
|
||||
this.nodes.buttonRemove = $.make('div', BlockSettings.CSS.button, {
|
||||
textContent: 'Remove Block'
|
||||
});
|
||||
|
||||
$.append(this.nodes.defaultSettings, this.nodes.buttonRemove);
|
||||
|
||||
this.Editor.Listeners.on(this.nodes.buttonRemove, 'click', (event) => this.removeBlockButtonClicked(event));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clicks on the Remove Block Button
|
||||
*/
|
||||
removeBlockButtonClicked() {
|
||||
console.log('❇️ Remove Block Button clicked');
|
||||
$.append(this.nodes.defaultSettings, this.Editor.BlockManager.currentBlock.renderTunes());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue