mirror of
https://github.com/codex-team/editor.js
synced 2026-03-16 07:35:48 +01:00
Merge pull request #244 from codex-team/module-listeners
Module listeners
This commit is contained in:
Murod Khaydarov
GitHub
commit
bbc1d0dff8
6 changed files with 504 additions and 220 deletions
|
|
@ -855,7 +855,7 @@ module.exports = exports["default"];
|
|||
* @property {String} placeholder - First Block placeholder
|
||||
* @property {Object} sanitizer - @todo fill desc
|
||||
* @property {Boolean} hideToolbar - @todo fill desc
|
||||
* @property {Object} toolsConfig - tools configuration {@link Tools#ToolsConfig}
|
||||
* @property {Object} toolsConfig - tools configuration {@link tools#ToolConfig}
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -881,7 +881,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|||
* Require Editor modules places in components/modules dir
|
||||
*/
|
||||
// eslint-disable-next-line
|
||||
var modules = ["blockManager.js","caret.js","events.js","renderer.js","sanitizer.js","saver.js","toolbar.js","toolbox.js","tools.js","ui.js"].map(function (module) {
|
||||
var modules = ["blockManager.js","caret.js","events.js","listeners.js","renderer.js","sanitizer.js","saver.js","toolbar.js","toolbox.js","tools.js","ui.js"].map(function (module) {
|
||||
return __webpack_require__(6)("./" + module);
|
||||
});
|
||||
|
||||
|
|
@ -1291,13 +1291,14 @@ var map = {
|
|||
"./blockManager.js": 7,
|
||||
"./caret.js": 9,
|
||||
"./events.js": 10,
|
||||
"./renderer.js": 11,
|
||||
"./sanitizer.js": 12,
|
||||
"./saver.js": 14,
|
||||
"./toolbar.js": 15,
|
||||
"./toolbox.js": 16,
|
||||
"./tools.js": 17,
|
||||
"./ui.js": 18
|
||||
"./listeners.js": 11,
|
||||
"./renderer.js": 12,
|
||||
"./sanitizer.js": 13,
|
||||
"./saver.js": 15,
|
||||
"./toolbar.js": 16,
|
||||
"./toolbox.js": 17,
|
||||
"./tools.js": 18,
|
||||
"./ui.js": 19
|
||||
};
|
||||
function webpackContext(req) {
|
||||
return __webpack_require__(webpackContextResolve(req));
|
||||
|
|
@ -1469,9 +1470,9 @@ var BlockManager = function (_Module) {
|
|||
* keydown on block
|
||||
* @todo move to the keydown module
|
||||
*/
|
||||
block.pluginsContent.addEventListener('keydown', function (event) {
|
||||
this.Editor.Listeners.on(block.pluginsContent, 'keydown', function (event) {
|
||||
return _this3.keyDownOnBlock(event);
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1486,7 +1487,7 @@ var BlockManager = function (_Module) {
|
|||
switch (event.keyCode) {
|
||||
|
||||
case _.keyCodes.ENTER:
|
||||
this.enterPressedOnPluginsContent(event);
|
||||
// this.enterPressedOnPluginsContent(event);
|
||||
break;
|
||||
case _.keyCodes.DOWN:
|
||||
case _.keyCodes.RIGHT:
|
||||
|
|
@ -2554,6 +2555,264 @@ module.exports = exports["default"];
|
|||
/* 11 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
/* WEBPACK VAR INJECTION */(function(Module) {
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
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; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
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; }
|
||||
|
||||
/**
|
||||
* Codex Editor Listeners module
|
||||
*
|
||||
* @module Listeners
|
||||
*
|
||||
* Module-decorator for event listeners assignment
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 2.0.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Listeners} Listeners
|
||||
* @property {Array} allListeners
|
||||
*/
|
||||
|
||||
var Listeners = function (_Module) {
|
||||
_inherits(Listeners, _Module);
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {EditorConfig} config
|
||||
*/
|
||||
function Listeners(_ref) {
|
||||
var config = _ref.config;
|
||||
|
||||
_classCallCheck(this, Listeners);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, (Listeners.__proto__ || Object.getPrototypeOf(Listeners)).call(this, { config: config }));
|
||||
|
||||
_this.allListeners = [];
|
||||
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Assigns event listener on element
|
||||
*
|
||||
* @param {Element} element - DOM element that needs to be listened
|
||||
* @param {String} eventType - event type
|
||||
* @param {Function} handler - method that will be fired on event
|
||||
* @param {Boolean} useCapture - use event bubbling
|
||||
*/
|
||||
|
||||
|
||||
_createClass(Listeners, [{
|
||||
key: "on",
|
||||
value: function on(element, eventType, handler) {
|
||||
var useCapture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
||||
|
||||
|
||||
var assignedEventData = {
|
||||
element: element,
|
||||
eventType: eventType,
|
||||
handler: handler,
|
||||
useCapture: useCapture
|
||||
};
|
||||
|
||||
var alreadyExist = this.findOne(element, eventType, handler);
|
||||
|
||||
if (alreadyExist) return;
|
||||
|
||||
this.allListeners.push(assignedEventData);
|
||||
element.addEventListener(eventType, handler, useCapture);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes event listener from element
|
||||
*
|
||||
* @param {Element} element - DOM element that we removing listener
|
||||
* @param {String} eventType - event type
|
||||
* @param {Function} handler - remove handler, if element listens several handlers on the same event type
|
||||
* @param {Boolean} useCapture - use event bubbling
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "off",
|
||||
value: function off(element, eventType, handler) {
|
||||
var useCapture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
||||
|
||||
|
||||
var existingListeners = this.findAll(element, eventType, handler);
|
||||
|
||||
for (var i = 0; i < existingListeners.length; i++) {
|
||||
|
||||
var index = this.allListeners.indexOf(existingListeners[i]);
|
||||
|
||||
if (index > 0) {
|
||||
|
||||
this.allListeners.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
element.removeEventListener(eventType, handler, useCapture);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search method: looks for listener by passed element
|
||||
* @param {Element} element - searching element
|
||||
* @returns {Array} listeners that found on element
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "findByElement",
|
||||
value: function findByElement(element) {
|
||||
|
||||
var listenersOnElement = [];
|
||||
|
||||
for (var i = 0; i < this.allListeners.length; i++) {
|
||||
|
||||
var listener = this.allListeners[i];
|
||||
|
||||
if (listener.element === element) {
|
||||
|
||||
listenersOnElement.push(listener);
|
||||
}
|
||||
}
|
||||
|
||||
return listenersOnElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* Search method: looks for listener by passed event type
|
||||
* @param {String} eventType
|
||||
* @return {Array} listeners that found on element
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "findByType",
|
||||
value: function findByType(eventType) {
|
||||
|
||||
var listenersWithType = [];
|
||||
|
||||
for (var i = 0; i < this.allListeners.length; i++) {
|
||||
|
||||
var listener = this.allListeners[i];
|
||||
|
||||
if (listener.type === eventType) {
|
||||
|
||||
listenersWithType.push(listener);
|
||||
}
|
||||
}
|
||||
|
||||
return listenersWithType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Search method: looks for listener by passed handler
|
||||
* @param {Function} handler
|
||||
* @return {Array} listeners that found on element
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "findByHandler",
|
||||
value: function findByHandler(handler) {
|
||||
|
||||
var listenersWithHandler = [];
|
||||
|
||||
for (var i = 0; i < this.allListeners.length; i++) {
|
||||
|
||||
var listener = this.allListeners[i];
|
||||
|
||||
if (listener.handler === handler) {
|
||||
|
||||
listenersWithHandler.push(listener);
|
||||
}
|
||||
}
|
||||
|
||||
return listenersWithHandler;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {String} eventType
|
||||
* @param {Function} handler
|
||||
* @return {Element|null}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "findOne",
|
||||
value: function findOne(element, eventType, handler) {
|
||||
|
||||
var foundListeners = this.findAll(element, eventType, handler);
|
||||
|
||||
return foundListeners.length > 0 ? foundListeners[0] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {String} eventType
|
||||
* @param {Function} handler
|
||||
* @return {Array}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "findAll",
|
||||
value: function findAll(element, eventType, handler) {
|
||||
|
||||
var foundAllListeners = void 0,
|
||||
foundByElements = [],
|
||||
foundByEventType = [],
|
||||
foundByHandler = [];
|
||||
|
||||
if (element) foundByElements = this.findByElement(element);
|
||||
|
||||
if (eventType) foundByEventType = this.findByType(eventType);
|
||||
|
||||
if (handler) foundByHandler = this.findByHandler(handler);
|
||||
|
||||
foundAllListeners = foundByElements.concat(foundByEventType, foundByHandler);
|
||||
|
||||
return foundAllListeners;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes all listeners
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "removeAll",
|
||||
value: function removeAll() {
|
||||
|
||||
this.allListeners.map(function (current) {
|
||||
|
||||
current.element.removeEventListener(current.eventType, current.handler);
|
||||
});
|
||||
|
||||
this.allListeners = [];
|
||||
}
|
||||
}]);
|
||||
|
||||
return Listeners;
|
||||
}(Module);
|
||||
|
||||
Listeners.displayName = "Listeners";
|
||||
exports.default = Listeners;
|
||||
module.exports = exports["default"];
|
||||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
|
||||
|
||||
/***/ }),
|
||||
/* 12 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
/* WEBPACK VAR INJECTION */(function(Module, _) {
|
||||
|
||||
|
|
@ -2679,7 +2938,7 @@ module.exports = exports["default"];
|
|||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
|
||||
|
||||
/***/ }),
|
||||
/* 12 */
|
||||
/* 13 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -2757,7 +3016,7 @@ var Sanitizer = function (_Module) {
|
|||
_this.sanitizerConfig = config.settings ? config.settings.sanitizer : {};
|
||||
|
||||
/** HTML Janitor library */
|
||||
_this.sanitizerInstance = __webpack_require__(13);
|
||||
_this.sanitizerInstance = __webpack_require__(14);
|
||||
|
||||
return _this;
|
||||
}
|
||||
|
|
@ -2860,7 +3119,7 @@ module.exports = exports['default'];
|
|||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
|
||||
|
||||
/***/ }),
|
||||
/* 13 */
|
||||
/* 14 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (root, factory) {
|
||||
|
|
@ -3055,7 +3314,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (roo
|
|||
|
||||
|
||||
/***/ }),
|
||||
/* 14 */
|
||||
/* 15 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -3346,7 +3605,7 @@ module.exports = exports['default'];
|
|||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
|
||||
|
||||
/***/ }),
|
||||
/* 15 */
|
||||
/* 16 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -3675,7 +3934,7 @@ module.exports = exports['default'];
|
|||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(2)))
|
||||
|
||||
/***/ }),
|
||||
/* 16 */
|
||||
/* 17 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -3940,7 +4199,7 @@ module.exports = exports['default'];
|
|||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(2), __webpack_require__(1)))
|
||||
|
||||
/***/ }),
|
||||
/* 17 */
|
||||
/* 18 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -4239,7 +4498,7 @@ module.exports = exports['default'];
|
|||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
|
||||
|
||||
/***/ }),
|
||||
/* 18 */
|
||||
/* 19 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -4438,7 +4697,7 @@ var UI = function (_Module) {
|
|||
/**
|
||||
* Load CSS
|
||||
*/
|
||||
var styles = __webpack_require__(19);
|
||||
var styles = __webpack_require__(20);
|
||||
|
||||
/**
|
||||
* Make tag
|
||||
|
|
@ -4856,10 +5115,10 @@ module.exports = exports['default'];
|
|||
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(2)))
|
||||
|
||||
/***/ }),
|
||||
/* 19 */
|
||||
/* 20 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(20)(undefined);
|
||||
exports = module.exports = __webpack_require__(21)(undefined);
|
||||
// imports
|
||||
|
||||
|
||||
|
|
@ -4870,7 +5129,7 @@ exports.push([module.i, ":root {\n\n /**\n * Toolbar buttons\n */\n\n
|
|||
|
||||
|
||||
/***/ }),
|
||||
/* 20 */
|
||||
/* 21 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/*
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -52,7 +52,7 @@
|
|||
* @property {String} placeholder - First Block placeholder
|
||||
* @property {Object} sanitizer - @todo fill desc
|
||||
* @property {Boolean} hideToolbar - @todo fill desc
|
||||
* @property {Object} toolsConfig - tools configuration {@link Tools#ToolsConfig}
|
||||
* @property {Object} toolsConfig - tools configuration {@link tools#ToolConfig}
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,192 +0,0 @@
|
|||
/**
|
||||
* Codex Editor Listeners module
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 1.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Module-decorator for event listeners assignment
|
||||
*/
|
||||
module.exports = function (listeners) {
|
||||
|
||||
var allListeners = [];
|
||||
|
||||
/**
|
||||
* Search methods
|
||||
*
|
||||
* byElement, byType and byHandler returns array of suitable listeners
|
||||
* one and all takes element, eventType, and handler and returns first (all) suitable listener
|
||||
*
|
||||
*/
|
||||
listeners.search = function () {
|
||||
|
||||
var byElement = function (element, context) {
|
||||
|
||||
var listenersOnElement = [];
|
||||
|
||||
context = context || allListeners;
|
||||
|
||||
for (var i = 0; i < context.length; i++) {
|
||||
|
||||
var listener = context[i];
|
||||
|
||||
if (listener.element === element) {
|
||||
|
||||
listenersOnElement.push(listener);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return listenersOnElement;
|
||||
|
||||
};
|
||||
|
||||
var byType = function (eventType, context) {
|
||||
|
||||
var listenersWithType = [];
|
||||
|
||||
context = context || allListeners;
|
||||
|
||||
for (var i = 0; i < context.length; i++) {
|
||||
|
||||
var listener = context[i];
|
||||
|
||||
if (listener.type === eventType) {
|
||||
|
||||
listenersWithType.push(listener);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return listenersWithType;
|
||||
|
||||
};
|
||||
|
||||
var byHandler = function (handler, context) {
|
||||
|
||||
var listenersWithHandler = [];
|
||||
|
||||
context = context || allListeners;
|
||||
|
||||
for (var i = 0; i < context.length; i++) {
|
||||
|
||||
var listener = context[i];
|
||||
|
||||
if (listener.handler === handler) {
|
||||
|
||||
listenersWithHandler.push(listener);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return listenersWithHandler;
|
||||
|
||||
};
|
||||
|
||||
var one = function (element, eventType, handler) {
|
||||
|
||||
var result = allListeners;
|
||||
|
||||
if (element)
|
||||
result = byElement(element, result);
|
||||
|
||||
if (eventType)
|
||||
result = byType(eventType, result);
|
||||
|
||||
if (handler)
|
||||
result = byHandler(handler, result);
|
||||
|
||||
return result[0];
|
||||
|
||||
};
|
||||
|
||||
var all = function (element, eventType, handler) {
|
||||
|
||||
var result = allListeners;
|
||||
|
||||
if (element)
|
||||
result = byElement(element, result);
|
||||
|
||||
if (eventType)
|
||||
result = byType(eventType, result);
|
||||
|
||||
if (handler)
|
||||
result = byHandler(handler, result);
|
||||
|
||||
return result;
|
||||
|
||||
};
|
||||
|
||||
return {
|
||||
byElement : byElement,
|
||||
byType : byType,
|
||||
byHandler : byHandler,
|
||||
one : one,
|
||||
all : all
|
||||
};
|
||||
|
||||
}();
|
||||
|
||||
listeners.add = function (element, eventType, handler, isCapture) {
|
||||
|
||||
element.addEventListener(eventType, handler, isCapture);
|
||||
|
||||
var data = {
|
||||
element: element,
|
||||
type: eventType,
|
||||
handler: handler
|
||||
};
|
||||
|
||||
var alreadyAddedListener = listeners.search.one(element, eventType, handler);
|
||||
|
||||
if (!alreadyAddedListener) {
|
||||
|
||||
allListeners.push(data);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
listeners.remove = function (element, eventType, handler) {
|
||||
|
||||
element.removeEventListener(eventType, handler);
|
||||
|
||||
var existingListeners = listeners.search.all(element, eventType, handler);
|
||||
|
||||
for (var i = 0; i < existingListeners.length; i++) {
|
||||
|
||||
var index = allListeners.indexOf(existingListeners[i]);
|
||||
|
||||
if (index > 0) {
|
||||
|
||||
allListeners.splice(index, 1);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
listeners.removeAll = function () {
|
||||
|
||||
allListeners.map(function (current) {
|
||||
|
||||
listeners.remove(current.element, current.type, current.handler);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
listeners.get = function (element, eventType, handler) {
|
||||
|
||||
return listeners.search.all(element, eventType, handler);
|
||||
|
||||
};
|
||||
|
||||
return listeners;
|
||||
|
||||
}({});
|
||||
|
|
@ -114,7 +114,7 @@ export default class BlockManager extends Module {
|
|||
* keydown on block
|
||||
* @todo move to the keydown module
|
||||
*/
|
||||
block.pluginsContent.addEventListener('keydown', (event) => this.keyDownOnBlock(event), false);
|
||||
this.Editor.Listeners.on(block.pluginsContent, 'keydown', (event) => this.keyDownOnBlock(event));
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -127,7 +127,7 @@ export default class BlockManager extends Module {
|
|||
switch(event.keyCode) {
|
||||
|
||||
case _.keyCodes.ENTER:
|
||||
this.enterPressedOnPluginsContent(event);
|
||||
// this.enterPressedOnPluginsContent(event);
|
||||
break;
|
||||
case _.keyCodes.DOWN:
|
||||
case _.keyCodes.RIGHT:
|
||||
|
|
|
|||
217
src/components/modules/listeners.js
Normal file
217
src/components/modules/listeners.js
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
/**
|
||||
* Codex Editor Listeners module
|
||||
*
|
||||
* @module Listeners
|
||||
*
|
||||
* Module-decorator for event listeners assignment
|
||||
*
|
||||
* @author Codex Team
|
||||
* @version 2.0.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Listeners} Listeners
|
||||
* @property {Array} allListeners
|
||||
*/
|
||||
|
||||
export default class Listeners extends Module {
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @param {EditorConfig} config
|
||||
*/
|
||||
constructor({config}) {
|
||||
|
||||
super({config});
|
||||
this.allListeners = [];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Assigns event listener on element
|
||||
*
|
||||
* @param {Element} element - DOM element that needs to be listened
|
||||
* @param {String} eventType - event type
|
||||
* @param {Function} handler - method that will be fired on event
|
||||
* @param {Boolean} useCapture - use event bubbling
|
||||
*/
|
||||
on(element, eventType, handler, useCapture = false) {
|
||||
|
||||
let assignedEventData = {
|
||||
element,
|
||||
eventType,
|
||||
handler,
|
||||
useCapture
|
||||
};
|
||||
|
||||
let alreadyExist = this.findOne(element, eventType, handler);
|
||||
|
||||
if (alreadyExist) return;
|
||||
|
||||
this.allListeners.push(assignedEventData);
|
||||
element.addEventListener(eventType, handler, useCapture);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes event listener from element
|
||||
*
|
||||
* @param {Element} element - DOM element that we removing listener
|
||||
* @param {String} eventType - event type
|
||||
* @param {Function} handler - remove handler, if element listens several handlers on the same event type
|
||||
* @param {Boolean} useCapture - use event bubbling
|
||||
*/
|
||||
off(element, eventType, handler, useCapture = false) {
|
||||
|
||||
let existingListeners = this.findAll(element, eventType, handler);
|
||||
|
||||
for (let i = 0; i < existingListeners.length; i++) {
|
||||
|
||||
let index = this.allListeners.indexOf(existingListeners[i]);
|
||||
|
||||
if (index > 0) {
|
||||
|
||||
this.allListeners.splice(index, 1);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
element.removeEventListener(eventType, handler, useCapture);
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Search method: looks for listener by passed element
|
||||
* @param {Element} element - searching element
|
||||
* @returns {Array} listeners that found on element
|
||||
*/
|
||||
findByElement(element) {
|
||||
|
||||
let listenersOnElement = [];
|
||||
|
||||
for (let i = 0; i < this.allListeners.length; i++) {
|
||||
|
||||
let listener = this.allListeners[i];
|
||||
|
||||
if (listener.element === element) {
|
||||
|
||||
listenersOnElement.push(listener);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return listenersOnElement;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Search method: looks for listener by passed event type
|
||||
* @param {String} eventType
|
||||
* @return {Array} listeners that found on element
|
||||
*/
|
||||
findByType(eventType) {
|
||||
|
||||
let listenersWithType = [];
|
||||
|
||||
for (let i = 0; i < this.allListeners.length; i++) {
|
||||
|
||||
let listener = this.allListeners[i];
|
||||
|
||||
if (listener.type === eventType) {
|
||||
|
||||
listenersWithType.push(listener);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return listenersWithType;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Search method: looks for listener by passed handler
|
||||
* @param {Function} handler
|
||||
* @return {Array} listeners that found on element
|
||||
*/
|
||||
findByHandler(handler) {
|
||||
|
||||
let listenersWithHandler = [];
|
||||
|
||||
for (let i = 0; i < this.allListeners.length; i++) {
|
||||
|
||||
let listener = this.allListeners[i];
|
||||
|
||||
if (listener.handler === handler) {
|
||||
|
||||
listenersWithHandler.push(listener);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return listenersWithHandler;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {String} eventType
|
||||
* @param {Function} handler
|
||||
* @return {Element|null}
|
||||
*/
|
||||
findOne(element, eventType, handler) {
|
||||
|
||||
let foundListeners = this.findAll(element, eventType, handler);
|
||||
|
||||
return foundListeners.length > 0 ? foundListeners[0] : null;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {String} eventType
|
||||
* @param {Function} handler
|
||||
* @return {Array}
|
||||
*/
|
||||
findAll(element, eventType, handler) {
|
||||
|
||||
let foundAllListeners,
|
||||
foundByElements = [],
|
||||
foundByEventType = [],
|
||||
foundByHandler = [];
|
||||
|
||||
if (element)
|
||||
foundByElements = this.findByElement(element);
|
||||
|
||||
if (eventType)
|
||||
foundByEventType = this.findByType(eventType);
|
||||
|
||||
if (handler)
|
||||
foundByHandler = this.findByHandler(handler);
|
||||
|
||||
foundAllListeners = foundByElements.concat(foundByEventType, foundByHandler);
|
||||
|
||||
return foundAllListeners;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes all listeners
|
||||
*/
|
||||
removeAll() {
|
||||
|
||||
this.allListeners.map( (current) => {
|
||||
|
||||
current.element.removeEventListener(current.eventType, current.handler);
|
||||
|
||||
});
|
||||
|
||||
this.allListeners = [];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue