From 18859fc98655cb425bd0270cd488a2966fb56da2 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Fri, 8 Jul 2022 11:29:00 +0200 Subject: [PATCH 1/6] Convert PanelManager into class --- src/panels/index.js | 415 ++++++++++++++++++------------------- test/specs/panels/index.js | 7 +- 2 files changed, 209 insertions(+), 213 deletions(-) diff --git a/src/panels/index.js b/src/panels/index.js index 11ef50db1..f4f55dfa2 100644 --- a/src/panels/index.js +++ b/src/panels/index.js @@ -30,216 +30,211 @@ import Panel from './model/Panel'; import Panels from './model/Panels'; import PanelsView from './view/PanelsView'; -export default () => { - var c = {}; - var panels, PanelsViewObj; - - return { - /** - * Name of the module - * @type {String} - * @private - */ - name: 'Panels', - - /** - * Initialize module. Automatically called with a new instance of the editor - * @param {Object} config Configurations - * @private - */ - init(config) { - c = config || {}; - for (var name in defaults) { - if (!(name in c)) c[name] = defaults[name]; - } - - var ppfx = c.pStylePrefix; - if (ppfx) c.stylePrefix = ppfx + c.stylePrefix; - - panels = new Panels(c.defaults); - return this; - }, - - /** - * Returns the collection of panels - * @return {Collection} Collection of panel - */ - getPanels() { - return panels; - }, - - /** - * Returns panels element - * @return {HTMLElement} - */ - getPanelsEl() { - return PanelsViewObj && PanelsViewObj.el; - }, - - /** - * Add new panel to the collection - * @param {Object|Panel} panel Object with right properties or an instance of Panel - * @return {Panel} Added panel. Useful in case passed argument was an Object - * @example - * var newPanel = panelManager.addPanel({ - * id: 'myNewPanel', - * visible : true, - * buttons : [...], - * }); - */ - addPanel(panel) { - return panels.add(panel); - }, - - /** - * Remove a panel from the collection - * @param {Object|Panel|String} panel Object with right properties or an instance of Panel or Painel id - * @return {Panel} Removed panel. Useful in case passed argument was an Object - * @example - * const newPanel = panelManager.removePanel({ - * id: 'myNewPanel', - * visible : true, - * buttons : [...], - * }); - * - * const newPanel = panelManager.removePanel('myNewPanel'); - * - */ - removePanel(panel) { - return panels.remove(panel); - }, - - /** - * Get panel by ID - * @param {string} id Id string - * @return {Panel|null} - * @example - * var myPanel = panelManager.getPanel('myNewPanel'); - */ - getPanel(id) { - var res = panels.where({ id }); +export default class PanelsManager { + /** + * Name of the module + * @type {String} + * @private + */ + name = 'Panels'; + + config = {}; + + /** + * Initialize module. Automatically called with a new instance of the editor + * @param {Object} config Configurations + * @private + */ + init(config) { + this.config = config || {}; + for (var name in defaults) { + if (!(name in this.config)) this.config[name] = defaults[name]; + } + + var ppfx = this.config.pStylePrefix; + if (ppfx) this.config.stylePrefix = ppfx + this.config.stylePrefix; + + this.panels = new Panels(this.config.defaults); + return this; + } + + /** + * Returns the collection of panels + * @return {Collection} Collection of panel + */ + getPanels() { + return this.panels; + } + + /** + * Returns panels element + * @return {HTMLElement} + */ + getPanelsEl() { + return this.PanelsViewObj && this.PanelsViewObj.el; + } + + /** + * Add new panel to the collection + * @param {Object|Panel} panel Object with right properties or an instance of Panel + * @return {Panel} Added panel. Useful in case passed argument was an Object + * @example + * var newPanel = panelManager.addPanel({ + * id: 'myNewPanel', + * visible : true, + * buttons : [...], + * }); + */ + addPanel(panel) { + return this.panels.add(panel); + } + + /** + * Remove a panel from the collection + * @param {Object|Panel|String} panel Object with right properties or an instance of Panel or Painel id + * @return {Panel} Removed panel. Useful in case passed argument was an Object + * @example + * const newPanel = panelManager.removePanel({ + * id: 'myNewPanel', + * visible : true, + * buttons : [...], + * }); + * + * const newPanel = panelManager.removePanel('myNewPanel'); + * + */ + removePanel(panel) { + return this.panels.remove(panel); + } + + /** + * Get panel by ID + * @param {string} id Id string + * @return {Panel|null} + * @example + * var myPanel = panelManager.getPanel('myNewPanel'); + */ + getPanel(id) { + var res = this.panels.where({ id }); + return res.length ? res[0] : null; + } + + /** + * Add button to the panel + * @param {string} panelId Panel's ID + * @param {Object|Button} button Button object or instance of Button + * @return {Button|null} Added button. Useful in case passed button was an Object + * @example + * var newButton = panelManager.addButton('myNewPanel',{ + * id: 'myNewButton', + * className: 'someClass', + * command: 'someCommand', + * attributes: { title: 'Some title'}, + * active: false, + * }); + * // It's also possible to pass the command as an object + * // with .run and .stop methods + * ... + * command: { + * run: function(editor) { + * ... + * }, + * stop: function(editor) { + * ... + * } + * }, + * // Or simply like a function which will be evaluated as a single .run command + * ... + * command: function(editor) { + * ... + * } + */ + addButton(panelId, button) { + var pn = this.getPanel(panelId); + return pn ? pn.get('buttons').add(button) : null; + } + + /** + * Remove button from the panel + * @param {String} panelId Panel's ID + * @param {String} buttonId Button's ID + * @return {Button|null} Removed button. + * @example + * const removedButton = panelManager.addButton('myNewPanel',{ + * id: 'myNewButton', + * className: 'someClass', + * command: 'someCommand', + * attributes: { title: 'Some title'}, + * active: false, + * }); + * + * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton'); + * + */ + removeButton(panelId, button) { + var pn = this.getPanel(panelId); + return pn && pn.get('buttons').remove(button); + } + + /** + * Get button from the panel + * @param {string} panelId Panel's ID + * @param {string} id Button's ID + * @return {Button|null} + * @example + * var button = panelManager.getButton('myPanel','myButton'); + */ + getButton(panelId, id) { + var pn = this.getPanel(panelId); + if (pn) { + var res = pn.get('buttons').where({ id }); return res.length ? res[0] : null; - }, - - /** - * Add button to the panel - * @param {string} panelId Panel's ID - * @param {Object|Button} button Button object or instance of Button - * @return {Button|null} Added button. Useful in case passed button was an Object - * @example - * var newButton = panelManager.addButton('myNewPanel',{ - * id: 'myNewButton', - * className: 'someClass', - * command: 'someCommand', - * attributes: { title: 'Some title'}, - * active: false, - * }); - * // It's also possible to pass the command as an object - * // with .run and .stop methods - * ... - * command: { - * run: function(editor) { - * ... - * }, - * stop: function(editor) { - * ... - * } - * }, - * // Or simply like a function which will be evaluated as a single .run command - * ... - * command: function(editor) { - * ... - * } - */ - addButton(panelId, button) { - var pn = this.getPanel(panelId); - return pn ? pn.get('buttons').add(button) : null; - }, - - /** - * Remove button from the panel - * @param {String} panelId Panel's ID - * @param {String} buttonId Button's ID - * @return {Button|null} Removed button. - * @example - * const removedButton = panelManager.addButton('myNewPanel',{ - * id: 'myNewButton', - * className: 'someClass', - * command: 'someCommand', - * attributes: { title: 'Some title'}, - * active: false, - * }); - * - * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton'); - * - */ - removeButton(panelId, button) { - var pn = this.getPanel(panelId); - return pn && pn.get('buttons').remove(button); - }, - - /** - * Get button from the panel - * @param {string} panelId Panel's ID - * @param {string} id Button's ID - * @return {Button|null} - * @example - * var button = panelManager.getButton('myPanel','myButton'); - */ - getButton(panelId, id) { - var pn = this.getPanel(panelId); - if (pn) { - var res = pn.get('buttons').where({ id }); - return res.length ? res[0] : null; - } - return null; - }, - - /** - * Render panels and buttons - * @return {HTMLElement} - * @private - */ - render() { - PanelsViewObj && PanelsViewObj.remove(); - PanelsViewObj = new PanelsView({ - collection: panels, - config: c, + } + return null; + } + + /** + * Render panels and buttons + * @return {HTMLElement} + * @private + */ + render() { + this.PanelsViewObj && this.PanelsViewObj.remove(); + this.PanelsViewObj = new PanelsView({ + collection: this.panels, + config: this.config, + }); + return this.PanelsViewObj.render().el; + } + + /** + * Active activable buttons + * @private + */ + active() { + this.getPanels().each(p => { + p.get('buttons').each(btn => { + btn.get('active') && btn.trigger('updateActive'); }); - return PanelsViewObj.render().el; - }, - - /** - * Active activable buttons - * @private - */ - active() { - this.getPanels().each(p => { - p.get('buttons').each(btn => { - btn.get('active') && btn.trigger('updateActive'); - }); + }); + } + + /** + * Disable buttons flagged as disabled + * @private + */ + disableButtons() { + this.getPanels().each(p => { + p.get('buttons').each(btn => { + if (btn.get('disable')) btn.trigger('change:disable'); }); - }, - - /** - * Disable buttons flagged as disabled - * @private - */ - disableButtons() { - this.getPanels().each(p => { - p.get('buttons').each(btn => { - if (btn.get('disable')) btn.trigger('change:disable'); - }); - }); - }, - - destroy() { - panels.reset(); - panels.stopListening(); - PanelsViewObj && PanelsViewObj.remove(); - [c, panels, PanelsViewObj].forEach(i => (i = {})); - }, - - Panel, - }; -}; + }); + } + + destroy() { + this.panels.reset(); + this.panels.stopListening(); + this.PanelsViewObj && this.PanelsViewObj.remove(); + [this.config, this.panels, this.PanelsViewObj].forEach(i => (i = {})); + } +} diff --git a/test/specs/panels/index.js b/test/specs/panels/index.js index d1dc52ca9..a1b33d799 100644 --- a/test/specs/panels/index.js +++ b/test/specs/panels/index.js @@ -1,4 +1,5 @@ import Panels from 'panels'; +import Panel from 'panels/model/Panel'; describe('Panels', () => { describe('Main', () => { @@ -31,7 +32,7 @@ describe('Panels', () => { }); test('Adds new panel correctly via Panel instance', () => { - var oPanel = new obj.Panel({ id: 'test' }); + var oPanel = new Panel({ id: 'test' }); var panel = obj.addPanel(oPanel); expect(panel).toEqual(oPanel); expect(panel.get('id')).toEqual('test'); @@ -127,7 +128,7 @@ describe('Panels', () => { }); test('Removes panel correctly via Panel instance', () => { - var oPanel = new obj.Panel({ id: 'test' }); + var oPanel = new Panel({ id: 'test' }); var panel = obj.addPanel(oPanel); expect(panel).toEqual(oPanel); expect(panel.get('id')).toEqual('test'); @@ -136,7 +137,7 @@ describe('Panels', () => { }); test('Removes panel correctly via id', () => { - var oPanel = new obj.Panel({ id: 'test' }); + var oPanel = new Panel({ id: 'test' }); var panel = obj.addPanel(oPanel); expect(panel).toEqual(oPanel); expect(panel.get('id')).toEqual('test'); From 5579dc1edf8db49ce263a7f9d2bafcdcc311bad4 Mon Sep 17 00:00:00 2001 From: Alex Ritter Date: Fri, 8 Jul 2022 13:05:30 +0200 Subject: [PATCH 2/6] Convert Panel model into ts --- src/panels/{index.js => index.ts} | 42 ++++++++++----------- src/panels/model/{Button.js => Button.ts} | 5 ++- src/panels/model/{Buttons.js => Buttons.ts} | 13 ++++--- src/panels/model/{Panel.js => Panel.ts} | 15 ++++++-- src/panels/model/{Panels.js => Panels.ts} | 2 +- src/panels/view/ButtonView.js | 2 +- test/specs/panels/index.js | 5 ++- 7 files changed, 47 insertions(+), 37 deletions(-) rename src/panels/{index.js => index.ts} (90%) rename src/panels/model/{Button.js => Button.ts} (87%) rename src/panels/model/{Buttons.js => Buttons.ts} (81%) rename src/panels/model/{Panel.js => Panel.ts} (52%) rename src/panels/model/{Panels.js => Panels.ts} (65%) diff --git a/src/panels/index.js b/src/panels/index.ts similarity index 90% rename from src/panels/index.js rename to src/panels/index.ts index f4f55dfa2..97ba4287c 100644 --- a/src/panels/index.js +++ b/src/panels/index.ts @@ -25,36 +25,30 @@ * * @module Panels */ +import { Module } from '../abstract'; +import EditorModel from '../editor/model/Editor'; import defaults from './config/config'; import Panel from './model/Panel'; import Panels from './model/Panels'; import PanelsView from './view/PanelsView'; -export default class PanelsManager { - /** - * Name of the module - * @type {String} - * @private - */ - name = 'Panels'; - - config = {}; +export default class PanelsManager extends Module { + //config = {}; + panels: Panels; + PanelsViewObj?: PanelsView; /** * Initialize module. Automatically called with a new instance of the editor * @param {Object} config Configurations * @private */ - init(config) { - this.config = config || {}; + constructor(em: EditorModel) { + super(em, 'Panels', defaults); + this.panels = new Panels(this.config.defaults); for (var name in defaults) { + //@ts-ignore if (!(name in this.config)) this.config[name] = defaults[name]; } - - var ppfx = this.config.pStylePrefix; - if (ppfx) this.config.stylePrefix = ppfx + this.config.stylePrefix; - - this.panels = new Panels(this.config.defaults); return this; } @@ -85,7 +79,7 @@ export default class PanelsManager { * buttons : [...], * }); */ - addPanel(panel) { + addPanel(panel: Panel) { return this.panels.add(panel); } @@ -103,7 +97,7 @@ export default class PanelsManager { * const newPanel = panelManager.removePanel('myNewPanel'); * */ - removePanel(panel) { + removePanel(panel: Panel) { return this.panels.remove(panel); } @@ -114,7 +108,7 @@ export default class PanelsManager { * @example * var myPanel = panelManager.getPanel('myNewPanel'); */ - getPanel(id) { + getPanel(id: string) { var res = this.panels.where({ id }); return res.length ? res[0] : null; } @@ -149,7 +143,7 @@ export default class PanelsManager { * ... * } */ - addButton(panelId, button) { + addButton(panelId: string, button: any) { var pn = this.getPanel(panelId); return pn ? pn.get('buttons').add(button) : null; } @@ -171,7 +165,7 @@ export default class PanelsManager { * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton'); * */ - removeButton(panelId, button) { + removeButton(panelId: string, button: any) { var pn = this.getPanel(panelId); return pn && pn.get('buttons').remove(button); } @@ -184,7 +178,7 @@ export default class PanelsManager { * @example * var button = panelManager.getButton('myPanel','myButton'); */ - getButton(panelId, id) { + getButton(panelId: string, id: string) { var pn = this.getPanel(panelId); if (pn) { var res = pn.get('buttons').where({ id }); @@ -202,6 +196,7 @@ export default class PanelsManager { this.PanelsViewObj && this.PanelsViewObj.remove(); this.PanelsViewObj = new PanelsView({ collection: this.panels, + //@ts-ignore config: this.config, }); return this.PanelsViewObj.render().el; @@ -213,6 +208,7 @@ export default class PanelsManager { */ active() { this.getPanels().each(p => { + //@ts-ignore p.get('buttons').each(btn => { btn.get('active') && btn.trigger('updateActive'); }); @@ -225,6 +221,7 @@ export default class PanelsManager { */ disableButtons() { this.getPanels().each(p => { + //@ts-ignore p.get('buttons').each(btn => { if (btn.get('disable')) btn.trigger('change:disable'); }); @@ -235,6 +232,5 @@ export default class PanelsManager { this.panels.reset(); this.panels.stopListening(); this.PanelsViewObj && this.PanelsViewObj.remove(); - [this.config, this.panels, this.PanelsViewObj].forEach(i => (i = {})); } } diff --git a/src/panels/model/Button.js b/src/panels/model/Button.ts similarity index 87% rename from src/panels/model/Button.js rename to src/panels/model/Button.ts index efd6885d3..71c6e3967 100644 --- a/src/panels/model/Button.js +++ b/src/panels/model/Button.ts @@ -1,4 +1,5 @@ import { Model } from '../../common'; +import Buttons from './Buttons'; export default class Button extends Model { defaults() { @@ -21,9 +22,9 @@ export default class Button extends Model { }; } - initialize(options) { + constructor(options: any) { + super(options); if (this.get('buttons').length) { - var Buttons = require('./Buttons').default; this.set('buttons', new Buttons(this.get('buttons'))); } } diff --git a/src/panels/model/Buttons.js b/src/panels/model/Buttons.ts similarity index 81% rename from src/panels/model/Buttons.js rename to src/panels/model/Buttons.ts index 50535666a..ff430a352 100644 --- a/src/panels/model/Buttons.js +++ b/src/panels/model/Buttons.ts @@ -1,7 +1,7 @@ import { Collection } from '../../common'; import Button from './Button'; -export default class Buttons extends Collection { +export default class Buttons extends Collection