tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Convert PanelManager into class

pull/4431/head
Alex Ritter 4 years ago
parent
22fb44ba99
commit
18859fc986
2 changed files with 209 additions and 213 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 415
      src/panels/index.js
  2. 7
      test/specs/panels/index.js

415
src/panels/index.js
View File

@ -30,216 +30,211 @@ import Panel from './model/Panel';
import Panels from './model/Panels'; import Panels from './model/Panels';
import PanelsView from './view/PanelsView'; import PanelsView from './view/PanelsView';
export default () => { export default class PanelsManager {
var c = {}; /**
var panels, PanelsViewObj; * Name of the module
* @type {String}
return { * @private
/** */
* Name of the module name = 'Panels';
* @type {String}
* @private config = {};
*/
name: 'Panels', /**
* Initialize module. Automatically called with a new instance of the editor
/** * @param {Object} config Configurations
* Initialize module. Automatically called with a new instance of the editor * @private
* @param {Object} config Configurations */
* @private init(config) {
*/ this.config = config || {};
init(config) { for (var name in defaults) {
c = config || {}; if (!(name in this.config)) this.config[name] = defaults[name];
for (var name in defaults) { }
if (!(name in c)) c[name] = defaults[name];
} var ppfx = this.config.pStylePrefix;
if (ppfx) this.config.stylePrefix = ppfx + this.config.stylePrefix;
var ppfx = c.pStylePrefix;
if (ppfx) c.stylePrefix = ppfx + c.stylePrefix; this.panels = new Panels(this.config.defaults);
return this;
panels = new Panels(c.defaults); }
return this;
}, /**
* Returns the collection of panels
/** * @return {Collection} Collection of panel
* Returns the collection of panels */
* @return {Collection} Collection of panel getPanels() {
*/ return this.panels;
getPanels() { }
return panels;
}, /**
* Returns panels element
/** * @return {HTMLElement}
* Returns panels element */
* @return {HTMLElement} getPanelsEl() {
*/ return this.PanelsViewObj && this.PanelsViewObj.el;
getPanelsEl() { }
return PanelsViewObj && PanelsViewObj.el;
}, /**
* Add new panel to the collection
/** * @param {Object|Panel} panel Object with right properties or an instance of Panel
* Add new panel to the collection * @return {Panel} Added panel. Useful in case passed argument was an Object
* @param {Object|Panel} panel Object with right properties or an instance of Panel * @example
* @return {Panel} Added panel. Useful in case passed argument was an Object * var newPanel = panelManager.addPanel({
* @example * id: 'myNewPanel',
* var newPanel = panelManager.addPanel({ * visible : true,
* id: 'myNewPanel', * buttons : [...],
* visible : true, * });
* buttons : [...], */
* }); addPanel(panel) {
*/ return this.panels.add(panel);
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
* Remove a panel from the collection * @return {Panel} Removed panel. Useful in case passed argument was an Object
* @param {Object|Panel|String} panel Object with right properties or an instance of Panel or Painel id * @example
* @return {Panel} Removed panel. Useful in case passed argument was an Object * const newPanel = panelManager.removePanel({
* @example * id: 'myNewPanel',
* const newPanel = panelManager.removePanel({ * visible : true,
* id: 'myNewPanel', * buttons : [...],
* visible : true, * });
* buttons : [...], *
* }); * const newPanel = panelManager.removePanel('myNewPanel');
* *
* const newPanel = panelManager.removePanel('myNewPanel'); */
* removePanel(panel) {
*/ return this.panels.remove(panel);
removePanel(panel) { }
return panels.remove(panel);
}, /**
* Get panel by ID
/** * @param {string} id Id string
* Get panel by ID * @return {Panel|null}
* @param {string} id Id string * @example
* @return {Panel|null} * var myPanel = panelManager.getPanel('myNewPanel');
* @example */
* var myPanel = panelManager.getPanel('myNewPanel'); getPanel(id) {
*/ var res = this.panels.where({ id });
getPanel(id) { return res.length ? res[0] : null;
var res = panels.where({ id }); }
/**
* 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 res.length ? res[0] : null;
}, }
return null;
/** }
* Add button to the panel
* @param {string} panelId Panel's ID /**
* @param {Object|Button} button Button object or instance of Button * Render panels and buttons
* @return {Button|null} Added button. Useful in case passed button was an Object * @return {HTMLElement}
* @example * @private
* var newButton = panelManager.addButton('myNewPanel',{ */
* id: 'myNewButton', render() {
* className: 'someClass', this.PanelsViewObj && this.PanelsViewObj.remove();
* command: 'someCommand', this.PanelsViewObj = new PanelsView({
* attributes: { title: 'Some title'}, collection: this.panels,
* active: false, config: this.config,
* }); });
* // It's also possible to pass the command as an object return this.PanelsViewObj.render().el;
* // with .run and .stop methods }
* ...
* command: { /**
* run: function(editor) { * Active activable buttons
* ... * @private
* }, */
* stop: function(editor) { active() {
* ... this.getPanels().each(p => {
* } p.get('buttons').each(btn => {
* }, btn.get('active') && btn.trigger('updateActive');
* // 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 PanelsViewObj.render().el; });
}, }
/** /**
* Active activable buttons * Disable buttons flagged as disabled
* @private * @private
*/ */
active() { disableButtons() {
this.getPanels().each(p => { this.getPanels().each(p => {
p.get('buttons').each(btn => { p.get('buttons').each(btn => {
btn.get('active') && btn.trigger('updateActive'); if (btn.get('disable')) btn.trigger('change:disable');
});
}); });
}, });
}
/**
* Disable buttons flagged as disabled destroy() {
* @private this.panels.reset();
*/ this.panels.stopListening();
disableButtons() { this.PanelsViewObj && this.PanelsViewObj.remove();
this.getPanels().each(p => { [this.config, this.panels, this.PanelsViewObj].forEach(i => (i = {}));
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,
};
};

7
test/specs/panels/index.js
View File

@ -1,4 +1,5 @@
import Panels from 'panels'; import Panels from 'panels';
import Panel from 'panels/model/Panel';
describe('Panels', () => { describe('Panels', () => {
describe('Main', () => { describe('Main', () => {
@ -31,7 +32,7 @@ describe('Panels', () => {
}); });
test('Adds new panel correctly via Panel instance', () => { 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); var panel = obj.addPanel(oPanel);
expect(panel).toEqual(oPanel); expect(panel).toEqual(oPanel);
expect(panel.get('id')).toEqual('test'); expect(panel.get('id')).toEqual('test');
@ -127,7 +128,7 @@ describe('Panels', () => {
}); });
test('Removes panel correctly via Panel instance', () => { 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); var panel = obj.addPanel(oPanel);
expect(panel).toEqual(oPanel); expect(panel).toEqual(oPanel);
expect(panel.get('id')).toEqual('test'); expect(panel.get('id')).toEqual('test');
@ -136,7 +137,7 @@ describe('Panels', () => {
}); });
test('Removes panel correctly via id', () => { test('Removes panel correctly via id', () => {
var oPanel = new obj.Panel({ id: 'test' }); var oPanel = new Panel({ id: 'test' });
var panel = obj.addPanel(oPanel); var panel = obj.addPanel(oPanel);
expect(panel).toEqual(oPanel); expect(panel).toEqual(oPanel);
expect(panel.get('id')).toEqual('test'); expect(panel.get('id')).toEqual('test');

Write Preview
Loading…
Cancel
Save