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

Refactor more files to classes

pull/4234/head
Artur Arseniev 4 years ago
parent
f0e4dbd17e
commit
29c2b7fcdf
30 changed files with 213 additions and 236 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. 10
      src/device_manager/index.js
  2. 10
      src/device_manager/model/Device.js
  3. 2
      src/device_manager/model/Devices.js
  4. 6
      src/device_manager/view/DevicesView.js
  5. 4
      src/domain_abstract/model/Styleable.js
  6. 5
      src/domain_abstract/model/TypeableCollection.js
  7. 2
      src/domain_abstract/ui/InputColor.js
  8. 2
      src/domain_abstract/ui/InputNumber.js
  9. 2
      src/editor/index.js
  10. 8
      src/editor/model/Editor.js
  11. 6
      src/editor/model/Selected.js
  12. 4
      src/editor/view/EditorView.js
  13. 2
      src/i18n/index.js
  14. 4
      src/keymaps/index.js
  15. 4
      src/modal_dialog/model/Modal.js
  16. 9
      src/modal_dialog/view/ModalView.js
  17. 6
      src/navigator/index.js
  18. 103
      src/navigator/view/ItemView.js
  19. 35
      src/navigator/view/ItemsView.js
  20. 4
      src/pages/index.js
  21. 6
      src/pages/model/Page.js
  22. 2
      src/pages/model/Pages.js
  23. 42
      src/panels/model/Button.js
  24. 22
      src/panels/model/Buttons.js
  25. 22
      src/panels/model/Panel.js
  26. 8
      src/panels/model/Panels.js
  27. 53
      src/panels/view/ButtonView.js
  28. 18
      src/panels/view/ButtonsView.js
  29. 32
      src/panels/view/PanelView.js
  30. 16
      src/panels/view/PanelsView.js

10
src/device_manager/index.js
View File

@ -33,7 +33,7 @@
* @module Devices * @module Devices
*/ */
import { isString } from 'underscore'; import { isString } from 'underscore';
import Module from 'common/module'; import Module from '../common/module';
import defaults from './config/config'; import defaults from './config/config';
import Device from './model/Device'; import Device from './model/Device';
import Devices from './model/Devices'; import Devices from './model/Devices';
@ -72,7 +72,7 @@ export default () => {
add: evAdd, add: evAdd,
// addBefore: evAddBefore, // addBefore: evAddBefore,
remove: evRemove, remove: evRemove,
removeBefore: evRemoveBefore removeBefore: evRemoveBefore,
}, },
init(config = {}) { init(config = {}) {
@ -130,7 +130,7 @@ export default () => {
...opts, ...opts,
id: props, id: props,
name: opts.name || props, name: opts.name || props,
width width,
}; };
} else { } else {
result = props; result = props;
@ -217,7 +217,7 @@ export default () => {
view && view.remove(); view && view.remove();
view = new DevicesView({ view = new DevicesView({
collection: devices, collection: devices,
config: c config: c,
}); });
return view.render().el; return view.render().el;
}, },
@ -228,6 +228,6 @@ export default () => {
view && view.remove(); view && view.remove();
[devices, view].forEach(i => (i = null)); [devices, view].forEach(i => (i = null));
c = {}; c = {};
} },
}; };
}; };

10
src/device_manager/model/Device.js
View File

@ -1,4 +1,4 @@
import { Model } from 'backbone'; import { Model } from '../../common';
/** /**
* @typedef Device * @typedef Device
@ -15,16 +15,14 @@ export default class Device extends Model {
width: null, width: null,
height: '', height: '',
widthMedia: null, widthMedia: null,
priority: null priority: null,
}; };
} }
initialize() { initialize() {
this.get('widthMedia') === null && this.get('widthMedia') === null && this.set('widthMedia', this.get('width'));
this.set('widthMedia', this.get('width'));
this.get('width') === null && this.set('width', this.get('widthMedia')); this.get('width') === null && this.set('width', this.get('widthMedia'));
!this.get('priority') && !this.get('priority') && this.set('priority', parseFloat(this.get('widthMedia')) || 0);
this.set('priority', parseFloat(this.get('widthMedia')) || 0);
const toCheck = ['width', 'height', 'widthMedia']; const toCheck = ['width', 'height', 'widthMedia'];
toCheck.forEach(prop => this.checkUnit(prop)); toCheck.forEach(prop => this.checkUnit(prop));
} }

2
src/device_manager/model/Devices.js
View File

@ -1,4 +1,4 @@
import { Collection } from 'backbone'; import { Collection } from '../../common';
import Device from './Device'; import Device from './Device';
export default class Devices extends Collection { export default class Devices extends Collection {

6
src/device_manager/view/DevicesView.js
View File

@ -1,5 +1,5 @@
import { View } from 'backbone'; import { View } from '../../common';
import html from 'utils/html'; import html from '../../utils/html';
export default class DevicesView extends View { export default class DevicesView extends View {
template({ ppfx, label }) { template({ ppfx, label }) {
@ -19,7 +19,7 @@ export default class DevicesView extends View {
events() { events() {
return { return {
change: 'updateDevice' change: 'updateDevice',
}; };
} }

4
src/domain_abstract/model/Styleable.js
View File

@ -1,6 +1,6 @@
import { isString, isArray, keys, isUndefined } from 'underscore'; import { isString, isArray, keys, isUndefined } from 'underscore';
import { shallowDiff } from 'utils/mixins'; import { shallowDiff } from '../../utils/mixins';
import ParserHtml from 'parser/model/ParserHtml'; import ParserHtml from '../../parser/model/ParserHtml';
const parseStyle = ParserHtml().parseStyle; const parseStyle = ParserHtml().parseStyle;

5
src/domain_abstract/model/TypeableCollection.js
View File

@ -1,8 +1,5 @@
import { isFunction } from 'underscore'; import { isFunction } from 'underscore';
import Backbone from 'backbone'; import { View, Model } from '../../common';
const Model = Backbone.Model;
const View = Backbone.View;
export default { export default {
types: [], types: [],

2
src/domain_abstract/ui/InputColor.js
View File

@ -1,6 +1,6 @@
import Backbone from 'backbone'; import Backbone from 'backbone';
import { isUndefined } from 'underscore'; import { isUndefined } from 'underscore';
import ColorPicker from 'utils/ColorPicker'; import ColorPicker from '../../utils/ColorPicker';
import Input from './Input'; import Input from './Input';
const { $ } = Backbone; const { $ } = Backbone;

2
src/domain_abstract/ui/InputNumber.js
View File

@ -1,6 +1,6 @@
import Backbone from 'backbone'; import Backbone from 'backbone';
import { bindAll, isUndefined, indexOf } from 'underscore'; import { bindAll, isUndefined, indexOf } from 'underscore';
import { on, off } from 'utils/mixins'; import { on, off } from '../../utils/mixins';
import Input from './Input'; import Input from './Input';
const $ = Backbone.$; const $ = Backbone.$;

2
src/editor/index.js
View File

@ -54,10 +54,10 @@
* ## Methods * ## Methods
* @module Editor * @module Editor
*/ */
import html from '../utils/html';
import defaults from './config/config'; import defaults from './config/config';
import EditorModel from './model/Editor'; import EditorModel from './model/Editor';
import EditorView from './view/EditorView'; import EditorView from './view/EditorView';
import html from 'utils/html';
export default (config = {}, opts = {}) => { export default (config = {}, opts = {}) => {
const { $ } = opts; const { $ } = opts;

8
src/editor/model/Editor.js
View File

@ -1,9 +1,9 @@
import { isUndefined, isArray, contains, toArray, keys, bindAll } from 'underscore'; import { isUndefined, isArray, contains, toArray, keys, bindAll } from 'underscore';
import Backbone from 'backbone'; import Backbone from 'backbone';
import $ from 'utils/cash-dom'; import $ from '../../utils/cash-dom';
import Extender from 'utils/extender'; import Extender from '../../utils/extender';
import { getModel, hasWin } from 'utils/mixins'; import { getModel, hasWin } from '../../utils/mixins';
import { Model } from 'common'; import { Model } from '../../common';
import Selected from './Selected'; import Selected from './Selected';
Backbone.$ = $; Backbone.$ = $;

6
src/editor/model/Selected.js
View File

@ -1,5 +1,5 @@
import { Collection, Model } from 'backbone';
import { isArray } from 'underscore'; import { isArray } from 'underscore';
import { Collection, Model } from '../../common';
export class Selectable extends Model {} export class Selectable extends Model {}
@ -34,9 +34,7 @@ export default class Selected extends Collection {
} }
removeComponent(component, opts) { removeComponent(component, opts) {
const toRemove = (isArray(component) ? component : [component]).map(c => const toRemove = (isArray(component) ? component : [component]).map(c => this.getByComponent(c));
this.getByComponent(c)
);
return this.remove(toRemove, opts); return this.remove(toRemove, opts);
} }
} }

4
src/editor/view/EditorView.js
View File

@ -1,6 +1,6 @@
import Backbone from 'backbone'; import Backbone from 'backbone';
import { View } from 'common'; import { View } from '../../common';
import { appendStyles } from 'utils/mixins'; import { appendStyles } from '../../utils/mixins';
const $ = Backbone.$; const $ = Backbone.$;

2
src/i18n/index.js
View File

@ -27,7 +27,7 @@
* @module I18n * @module I18n
*/ */
import { isUndefined, isString } from 'underscore'; import { isUndefined, isString } from 'underscore';
import { hasWin } from 'utils/mixins'; import { hasWin } from '../utils/mixins';
import config from './config'; import config from './config';
const isObj = el => !Array.isArray(el) && el !== null && typeof el === 'object'; const isObj = el => !Array.isArray(el) && el !== null && typeof el === 'object';

4
src/keymaps/index.js
View File

@ -44,8 +44,8 @@
*/ */
import { isString } from 'underscore'; import { isString } from 'underscore';
import { hasWin } from 'utils/mixins'; import { hasWin } from '../utils/mixins';
import keymaster from 'utils/keymaster'; import keymaster from '../utils/keymaster';
hasWin() && keymaster.init(window); hasWin() && keymaster.init(window);

4
src/modal_dialog/model/Modal.js
View File

@ -1,4 +1,4 @@
import { Model } from 'backbone'; import { Model } from '../../common';
export default class Modal extends Model { export default class Modal extends Model {
defaults() { defaults() {
@ -6,7 +6,7 @@ export default class Modal extends Model {
title: '', title: '',
content: '', content: '',
attributes: {}, attributes: {},
open: false open: false,
}; };
} }

9
src/modal_dialog/view/ModalView.js
View File

@ -1,4 +1,4 @@
import { View } from 'backbone'; import { View } from '../../common';
export default class ModalView extends View { export default class ModalView extends View {
template({ pfx, ppfx, content, title }) { template({ pfx, ppfx, content, title }) {
@ -18,7 +18,7 @@ export default class ModalView extends View {
events() { events() {
return { return {
click: 'onClick', click: 'onClick',
'click [data-close-modal]': 'hide' 'click [data-close-modal]': 'hide',
}; };
} }
@ -45,8 +45,7 @@ export default class ModalView extends View {
* @private * @private
*/ */
getCollector() { getCollector() {
if (!this.$collector) if (!this.$collector) this.$collector = this.$el.find('.' + this.pfx + 'collector');
this.$collector = this.$el.find('.' + this.pfx + 'collector');
return this.$collector; return this.$collector;
} }
@ -127,7 +126,7 @@ export default class ModalView extends View {
$el.removeAttr(currAttr.join(' ')); $el.removeAttr(currAttr.join(' '));
$el.attr({ $el.attr({
...(attr || {}), ...(attr || {}),
class: `${pfx}container ${(attr && attr.class) || ''}`.trim() class: `${pfx}container ${(attr && attr.class) || ''}`.trim(),
}); });
} }

6
src/navigator/index.js
View File

@ -1,6 +1,6 @@
import { isElement } from 'underscore';
import defaults from './config/config'; import defaults from './config/config';
import View from './view/ItemView'; import View from './view/ItemView';
import { isElement } from 'underscore';
export default () => { export default () => {
let em; let em;
@ -95,7 +95,7 @@ export default () => {
level: 0, level: 0,
config, config,
opened: config.opened || {}, opened: config.opened || {},
model: em.get('DomComponents').getWrapper() model: em.get('DomComponents').getWrapper(),
}); });
return layers.render().el; return layers.render().el;
}, },
@ -103,6 +103,6 @@ export default () => {
destroy() { destroy() {
layers && layers.remove(); layers && layers.remove();
[em, layers, config].forEach(i => (i = {})); [em, layers, config].forEach(i => (i = {}));
} },
}; };
}; };

103
src/navigator/view/ItemView.js
View File

@ -1,30 +1,31 @@
import { isUndefined, isString, bindAll } from 'underscore'; import { isUndefined, isString, bindAll } from 'underscore';
import { getModel, isEscKey, isEnterKey } from 'utils/mixins'; import { View } from '../../common';
import Backbone from 'backbone'; import { getModel, isEscKey, isEnterKey } from '../../utils/mixins';
import ComponentView from 'dom_components/view/ComponentView'; import ComponentView from '../../dom_components/view/ComponentView';
import { eventDrag } from 'dom_components/model/Component'; import { eventDrag } from '../../dom_components/model/Component';
const inputProp = 'contentEditable'; const inputProp = 'contentEditable';
const styleOpts = { mediaText: '' }; const styleOpts = { mediaText: '' };
const $ = Backbone.$;
const isStyleHidden = (style = {}) => { const isStyleHidden = (style = {}) => {
return (style.display || '').trim().indexOf('none') === 0; return (style.display || '').trim().indexOf('none') === 0;
}; };
let ItemsView; let ItemsView;
export default Backbone.View.extend({ export default class ItemView extends View {
events: { events() {
'mousedown [data-toggle-move]': 'startSort', return {
'touchstart [data-toggle-move]': 'startSort', 'mousedown [data-toggle-move]': 'startSort',
'click [data-toggle-visible]': 'toggleVisibility', 'touchstart [data-toggle-move]': 'startSort',
'click [data-toggle-open]': 'toggleOpening', 'click [data-toggle-visible]': 'toggleVisibility',
'click [data-toggle-select]': 'handleSelect', 'click [data-toggle-open]': 'toggleOpening',
'mouseover [data-toggle-select]': 'handleHover', 'click [data-toggle-select]': 'handleSelect',
'mouseout [data-toggle-select]': 'handleHoverOut', 'mouseover [data-toggle-select]': 'handleHover',
'dblclick [data-name]': 'handleEdit', 'mouseout [data-toggle-select]': 'handleHoverOut',
'keydown [data-name]': 'handleEditKey', 'dblclick [data-name]': 'handleEdit',
'focusout [data-name]': 'handleEditEnd', 'keydown [data-name]': 'handleEditKey',
}, 'focusout [data-name]': 'handleEditEnd',
};
}
template(model) { template(model) {
const { pfx, ppfx, config, clsNoEdit } = this; const { pfx, ppfx, config, clsNoEdit } = this;
@ -61,7 +62,7 @@ export default Backbone.View.extend({
<i class="fa fa-arrows"></i> <i class="fa fa-arrows"></i>
</div> </div>
<div class="${this.clsChildren}"></div>`; <div class="${this.clsChildren}"></div>`;
}, }
initialize(o = {}) { initialize(o = {}) {
bindAll(this, '__render'); bindAll(this, '__render');
@ -109,11 +110,11 @@ export default Backbone.View.extend({
render: this.__render, render: this.__render,
listenTo: this.listenTo, listenTo: this.listenTo,
}); });
}, }
updateName() { updateName() {
this.getInputName().innerText = this.model.getName(); this.getInputName().innerText = this.model.getName();
}, }
getVisibilityEl() { getVisibilityEl() {
if (!this.eyeEl) { if (!this.eyeEl) {
@ -121,7 +122,7 @@ export default Backbone.View.extend({
} }
return this.eyeEl; return this.eyeEl;
}, }
updateVisibility() { updateVisibility() {
const pfx = this.pfx; const pfx = this.pfx;
@ -132,7 +133,7 @@ export default Backbone.View.extend({
const method = hidden ? 'addClass' : 'removeClass'; const method = hidden ? 'addClass' : 'removeClass';
this.$el[method](hClass); this.$el[method](hClass);
this.getVisibilityEl()[method](hideIcon); this.getVisibilityEl()[method](hideIcon);
}, }
/** /**
* Toggle visibility * Toggle visibility
@ -163,7 +164,7 @@ export default Backbone.View.extend({
model.setStyle(style, styleOpts); model.setStyle(style, styleOpts);
em && em.trigger('component:toggled'); // Updates Style Manager #2938 em && em.trigger('component:toggled'); // Updates Style Manager #2938
}, }
/** /**
* Handle the edit of the component name * Handle the edit of the component name
@ -177,12 +178,12 @@ export default Backbone.View.extend({
document.execCommand('selectAll', false, null); document.execCommand('selectAll', false, null);
em && em.setEditing(1); em && em.setEditing(1);
$el.find(`.${this.inputNameCls}`).removeClass(clsNoEdit).addClass(clsEdit); $el.find(`.${this.inputNameCls}`).removeClass(clsNoEdit).addClass(clsEdit);
}, }
handleEditKey(ev) { handleEditKey(ev) {
ev.stopPropagation(); ev.stopPropagation();
(isEscKey(ev) || isEnterKey(ev)) && this.handleEditEnd(ev); (isEscKey(ev) || isEnterKey(ev)) && this.handleEditEnd(ev);
}, }
/** /**
* Handle with the end of editing of the component name * Handle with the end of editing of the component name
@ -197,11 +198,11 @@ export default Backbone.View.extend({
this.setName(name, { component: this.model, propName: 'custom-name' }); this.setName(name, { component: this.model, propName: 'custom-name' });
em && em.setEditing(0); em && em.setEditing(0);
$el.find(`.${this.inputNameCls}`).addClass(clsNoEdit).removeClass(clsEdit); $el.find(`.${this.inputNameCls}`).addClass(clsNoEdit).removeClass(clsEdit);
}, }
setName(name, { propName }) { setName(name, { propName }) {
this.model.set(propName, name); this.model.set(propName, name);
}, }
/** /**
* Get the input containing the name of the component * Get the input containing the name of the component
@ -212,7 +213,7 @@ export default Backbone.View.extend({
this.inputName = this.el.querySelector(`.${this.inputNameCls}`); this.inputName = this.el.querySelector(`.${this.inputNameCls}`);
} }
return this.inputName; return this.inputName;
}, }
/** /**
* Update item opening * Update item opening
@ -233,7 +234,7 @@ export default Backbone.View.extend({
this.getCaret().removeClass(chvDown); this.getCaret().removeClass(chvDown);
delete opened[model.cid]; delete opened[model.cid];
} }
}, }
/** /**
* Toggle item opening * Toggle item opening
@ -248,7 +249,7 @@ export default Backbone.View.extend({
if (!model.get('components').length) return; if (!model.get('components').length) return;
model.set('open', !model.get('open')); model.set('open', !model.get('open'));
}, }
/** /**
* Handle component selection * Handle component selection
@ -262,7 +263,7 @@ export default Backbone.View.extend({
const scroll = config.scrollCanvas; const scroll = config.scrollCanvas;
scroll && model.views.forEach(view => view.scrollIntoView(scroll)); scroll && model.views.forEach(view => view.scrollIntoView(scroll));
} }
}, }
/** /**
* Handle component selection * Handle component selection
@ -271,13 +272,13 @@ export default Backbone.View.extend({
e.stopPropagation(); e.stopPropagation();
const { em, config, model } = this; const { em, config, model } = this;
em && config.showHover && em.setHovered(model, { fromLayers: 1 }); em && config.showHover && em.setHovered(model, { fromLayers: 1 });
}, }
handleHoverOut(ev) { handleHoverOut(ev) {
ev.stopPropagation(); ev.stopPropagation();
const { em, config } = this; const { em, config } = this;
em && config.showHover && em.setHovered(0, { fromLayers: 1 }); em && config.showHover && em.setHovered(0, { fromLayers: 1 });
}, }
/** /**
* Delegate to sorter * Delegate to sorter
@ -294,7 +295,7 @@ export default Backbone.View.extend({
sorter.onMoveClb = data => em.trigger(eventDrag, data); sorter.onMoveClb = data => em.trigger(eventDrag, data);
sorter.startSort(e.target); sorter.startSort(e.target);
} }
}, }
/** /**
* Freeze item * Freeze item
@ -303,7 +304,7 @@ export default Backbone.View.extend({
freeze() { freeze() {
this.$el.addClass(this.pfx + 'opac50'); this.$el.addClass(this.pfx + 'opac50');
this.model.set('open', 0); this.model.set('open', 0);
}, }
/** /**
* Unfreeze item * Unfreeze item
@ -311,7 +312,7 @@ export default Backbone.View.extend({
* */ * */
unfreeze() { unfreeze() {
this.$el.removeClass(this.pfx + 'opac50'); this.$el.removeClass(this.pfx + 'opac50');
}, }
/** /**
* Update item on status change * Update item on status change
@ -324,7 +325,7 @@ export default Backbone.View.extend({
noExtHl: 1, noExtHl: 1,
}, },
]); ]);
}, }
/** /**
* Check if component is visible * Check if component is visible
@ -333,7 +334,7 @@ export default Backbone.View.extend({
* */ * */
isVisible() { isVisible() {
return !isStyleHidden(this.model.getStyle()); return !isStyleHidden(this.model.getStyle());
}, }
/** /**
* Update item aspect after children changes * Update item aspect after children changes
@ -354,7 +355,7 @@ export default Backbone.View.extend({
title[count ? 'removeClass' : 'addClass'](clsNoChild); title[count ? 'removeClass' : 'addClass'](clsNoChild);
if (cnt) cnt.innerHTML = count || ''; if (cnt) cnt.innerHTML = count || '';
!count && model.set('open', 0); !count && model.set('open', 0);
}, }
/** /**
* Count children inside model * Count children inside model
@ -371,7 +372,7 @@ export default Backbone.View.extend({
count++; count++;
}, this); }, this);
return count; return count;
}, }
getCaret() { getCaret() {
if (!this.caret || !this.caret.length) { if (!this.caret || !this.caret.length) {
@ -380,33 +381,33 @@ export default Backbone.View.extend({
} }
return this.caret; return this.caret;
}, }
setRoot(el) { setRoot(el) {
el = isString(el) ? this.em.getWrapper().find(el)[0] : el; el = isString(el) ? this.em.getWrapper().find(el)[0] : el;
const model = getModel(el, $); const model = getModel(el);
if (!model) return; if (!model) return;
this.stopListening(); this.stopListening();
this.model = model; this.model = model;
this.initialize(this.opt); this.initialize(this.opt);
this._rendered && this.render(); this._rendered && this.render();
}, }
updateLayerable() { updateLayerable() {
const { parentView } = this; const { parentView } = this;
const toRerender = parentView || this; const toRerender = parentView || this;
toRerender.render(); toRerender.render();
}, }
__clearItems() { __clearItems() {
const { items } = this; const { items } = this;
items && items.remove(); items && items.remove();
}, }
remove() { remove() {
Backbone.View.prototype.remove.apply(this, arguments); View.prototype.remove.apply(this, arguments);
this.__clearItems(); this.__clearItems();
}, }
render() { render() {
const { model, config, pfx, ppfx, opt } = this; const { model, config, pfx, ppfx, opt } = this;
@ -454,7 +455,7 @@ export default Backbone.View.extend({
this.__render(); this.__render();
this._rendered = 1; this._rendered = 1;
return this; return this;
}, }
__render() { __render() {
const { model, config, el } = this; const { model, config, el } = this;
@ -462,5 +463,5 @@ export default Backbone.View.extend({
const opt = { component: model, el }; const opt = { component: model, el };
onRender.bind(this)(opt); onRender.bind(this)(opt);
this.em.trigger('layer:render', opt); this.em.trigger('layer:render', opt);
}, }
}); }

35
src/navigator/view/ItemsView.js
View File

@ -1,7 +1,7 @@
import { View } from 'backbone'; import { View } from '../../common';
import { eventDrag } from 'dom_components/model/Component'; import { eventDrag } from '../../dom_components/model/Component';
export default View.extend({ export default class ItemsView extends View {
initialize(o = {}) { initialize(o = {}) {
this.items = []; this.items = [];
this.opt = o; this.opt = o;
@ -38,7 +38,7 @@ export default View.extend({
avoidSelectOnEnd: 1, avoidSelectOnEnd: 1,
nested: 1, nested: 1,
ppfx, ppfx,
pfx pfx,
}); });
} }
@ -47,14 +47,14 @@ export default View.extend({
// For the sorter // For the sorter
this.$el.data('collection', coll); this.$el.data('collection', coll);
parent && this.$el.data('model', parent); parent && this.$el.data('model', parent);
}, }
removeChildren(removed) { removeChildren(removed) {
const view = removed.viewLayer; const view = removed.viewLayer;
if (!view) return; if (!view) return;
view.remove(); view.remove();
removed.viewLayer = 0; removed.viewLayer = 0;
}, }
/** /**
* Add to collection * Add to collection
@ -65,7 +65,7 @@ export default View.extend({
addTo(model) { addTo(model) {
var i = this.collection.indexOf(model); var i = this.collection.indexOf(model);
this.addToCollection(model, null, i); this.addToCollection(model, null, i);
}, }
/** /**
* Add new object to collection * Add new object to collection
@ -87,7 +87,7 @@ export default View.extend({
config: this.config, config: this.config,
sorter: this.sorter, sorter: this.sorter,
isCountable: this.isCountable, isCountable: this.isCountable,
opened: this.opt.opened opened: this.opt.opened,
}); });
const rendered = item.render().el; const rendered = item.render().el;
@ -105,21 +105,17 @@ export default View.extend({
// In case the added is new in the collection index will be -1 // In case the added is new in the collection index will be -1
if (index < 0) { if (index < 0) {
this.$el.append(rendered); this.$el.append(rendered);
} else } else this.$el.children().eq(index)[method](rendered);
this.$el
.children()
.eq(index)
[method](rendered);
} else this.$el.append(rendered); } else this.$el.append(rendered);
} }
this.items.push(item); this.items.push(item);
return rendered; return rendered;
}, }
remove() { remove() {
View.prototype.remove.apply(this, arguments); View.prototype.remove.apply(this, arguments);
this.items.map(i => i.remove()); this.items.map(i => i.remove());
}, }
/** /**
* Check if the model could be count by the navigator * Check if the model could be count by the navigator
@ -130,14 +126,11 @@ export default View.extend({
isCountable(model, hide) { isCountable(model, hide) {
var type = model.get('type'); var type = model.get('type');
var tag = model.get('tagName'); var tag = model.get('tagName');
if ( if (((type == 'textnode' || tag == 'br') && hide) || !model.get('layerable')) {
((type == 'textnode' || tag == 'br') && hide) ||
!model.get('layerable')
) {
return false; return false;
} }
return true; return true;
}, }
render() { render() {
const frag = document.createDocumentFragment(); const frag = document.createDocumentFragment();
@ -148,4 +141,4 @@ export default View.extend({
el.className = this.className; el.className = this.className;
return this; return this;
} }
}); }

4
src/pages/index.js
View File

@ -45,8 +45,8 @@
*/ */
import { isString, bindAll, unique, flatten } from 'underscore'; import { isString, bindAll, unique, flatten } from 'underscore';
import { createId } from 'utils/mixins'; import { createId } from '../utils/mixins';
import { Model, Module } from 'common'; import { Model, Module } from '../common';
import Pages from './model/Pages'; import Pages from './model/Pages';
import Page from './model/Page'; import Page from './model/Page';

6
src/pages/model/Page.js
View File

@ -1,12 +1,12 @@
import { Model } from 'common';
import { result, forEach } from 'underscore'; import { result, forEach } from 'underscore';
import Frames from 'canvas/model/Frames'; import { Model } from '../../common';
import Frames from '../../canvas/model/Frames';
export default class Page extends Model { export default class Page extends Model {
defaults() { defaults() {
return { return {
frames: [], frames: [],
_undo: true _undo: true,
}; };
} }

2
src/pages/model/Pages.js
View File

@ -1,4 +1,4 @@
import { Collection } from 'backbone'; import { Collection } from '../../common';
import Page from './Page'; import Page from './Page';
export default class Pages extends Collection { export default class Pages extends Collection {

42
src/panels/model/Button.js
View File

@ -1,23 +1,25 @@
import Backbone from 'backbone'; import { Model } from '../../common';
export default Backbone.Model.extend({ export default class Button extends Model {
defaults: { defaults() {
id: '', return {
label: '', id: '',
tagName: 'span', label: '',
className: '', tagName: 'span',
command: '', className: '',
context: '', command: '',
buttons: [], context: '',
attributes: {}, buttons: [],
options: {}, attributes: {},
active: false, options: {},
dragDrop: false, active: false,
togglable: true, dragDrop: false,
runDefaultCommand: true, togglable: true,
stopDefaultCommand: false, runDefaultCommand: true,
disable: false stopDefaultCommand: false,
}, disable: false,
};
}
initialize(options) { initialize(options) {
if (this.get('buttons').length) { if (this.get('buttons').length) {
@ -25,4 +27,4 @@ export default Backbone.Model.extend({
this.set('buttons', new Buttons(this.get('buttons'))); this.set('buttons', new Buttons(this.get('buttons')));
} }
} }
}); }

22
src/panels/model/Buttons.js
View File

@ -1,9 +1,7 @@
import Backbone from 'backbone'; import { Collection } from '../../common';
import Button from './Button'; import Button from './Button';
export default Backbone.Collection.extend({ export default class Buttons extends Collection {
model: Button,
/** /**
* Deactivate all buttons, except one passed * Deactivate all buttons, except one passed
* @param {Object} except Model to ignore * @param {Object} except Model to ignore
@ -15,11 +13,10 @@ export default Backbone.Collection.extend({
this.forEach((model, index) => { this.forEach((model, index) => {
if (model !== except) { if (model !== except) {
model.set('active', false); model.set('active', false);
if (r && model.get('buttons').length) if (r && model.get('buttons').length) model.get('buttons').deactivateAllExceptOne(except, r);
model.get('buttons').deactivateAllExceptOne(except, r);
} }
}); });
}, }
/** /**
* Deactivate all buttons * Deactivate all buttons
@ -34,7 +31,7 @@ export default Backbone.Collection.extend({
model.set('active', false, { fromCollection: 1 }); model.set('active', false, { fromCollection: 1 });
} }
}); });
}, }
/** /**
* Disables all buttons * Disables all buttons
@ -49,7 +46,7 @@ export default Backbone.Collection.extend({
model.set('disable', true); model.set('disable', true);
} }
}); });
}, }
/** /**
* Disables all buttons, except one passed * Disables all buttons, except one passed
@ -62,9 +59,10 @@ export default Backbone.Collection.extend({
this.forEach((model, index) => { this.forEach((model, index) => {
if (model !== except) { if (model !== except) {
model.set('disable', true); model.set('disable', true);
if (r && model.get('buttons').length) if (r && model.get('buttons').length) model.get('buttons').disableAllButtonsExceptOne(except, r);
model.get('buttons').disableAllButtonsExceptOne(except, r);
} }
}); });
} }
}); }
Buttons.prototype.model = Button;

22
src/panels/model/Panel.js
View File

@ -1,18 +1,20 @@
import Backbone from 'backbone'; import { Model } from '../../common';
import Buttons from './Buttons'; import Buttons from './Buttons';
export default Backbone.Model.extend({ export default class Panel extends Model {
defaults: { defaults() {
id: '', return {
content: '', id: '',
visible: true, content: '',
buttons: [], visible: true,
attributes: {} buttons: [],
}, attributes: {},
};
}
initialize(options) { initialize(options) {
this.btn = this.get('buttons') || []; this.btn = this.get('buttons') || [];
this.buttons = new Buttons(this.btn); this.buttons = new Buttons(this.btn);
this.set('buttons', this.buttons); this.set('buttons', this.buttons);
} }
}); }

8
src/panels/model/Panels.js
View File

@ -1,6 +1,6 @@
import Backbone from 'backbone'; import { Collection } from '../../common';
import Panel from './Panel'; import Panel from './Panel';
export default Backbone.Collection.extend({ export default class Panels extends Collection {}
model: Panel
}); Panels.prototype.model = Panel;

53
src/panels/view/ButtonView.js
View File

@ -1,16 +1,16 @@
import Backbone from 'backbone';
import { isString, isObject, isFunction } from 'underscore'; import { isString, isObject, isFunction } from 'underscore';
import { View } from '../../common';
const $ = Backbone.$; export default class ButtonView extends View {
export default Backbone.View.extend({
tagName() { tagName() {
return this.model.get('tagName'); return this.model.get('tagName');
}, }
events: { events() {
click: 'clicked' return {
}, click: 'clicked',
};
}
initialize(o) { initialize(o) {
const { model } = this; const { model } = this;
@ -39,16 +39,12 @@ export default Backbone.View.extend({
if (em && isString(command) && listen) { if (em && isString(command) && listen) {
const chnOpt = { fromListen: 1 }; const chnOpt = { fromListen: 1 };
this.listenTo(em, `run:${command}`, () => this.listenTo(em, `run:${command}`, () => model.set('active', true, chnOpt));
model.set('active', true, chnOpt) this.listenTo(em, `stop:${command}`, () => model.set('active', false, chnOpt));
);
this.listenTo(em, `stop:${command}`, () =>
model.set('active', false, chnOpt)
);
} }
if (em && em.get) this.commands = em.get('Commands'); if (em && em.get) this.commands = em.get('Commands');
}, }
/** /**
* Updates class name of the button * Updates class name of the button
@ -61,7 +57,7 @@ export default Backbone.View.extend({
const attrCls = model.get('attributes').class; const attrCls = model.get('attributes').class;
const classStr = `${attrCls ? attrCls : ''} ${pfx}btn ${cls ? cls : ''}`; const classStr = `${attrCls ? attrCls : ''} ${pfx}btn ${cls ? cls : ''}`;
this.$el.attr('class', classStr.trim()); this.$el.attr('class', classStr.trim());
}, }
/** /**
* Updates attributes of the button * Updates attributes of the button
@ -76,7 +72,7 @@ export default Backbone.View.extend({
title && $el.attr({ title }); title && $el.attr({ title });
this.updateClassName(); this.updateClassName();
}, }
/** /**
* Updates visibility of children buttons * Updates visibility of children buttons
@ -88,7 +84,7 @@ export default Backbone.View.extend({
if (this.model.get('bntsVis')) this.$buttons.addClass(this.btnsVisCls); if (this.model.get('bntsVis')) this.$buttons.addClass(this.btnsVisCls);
else this.$buttons.removeClass(this.btnsVisCls); else this.$buttons.removeClass(this.btnsVisCls);
}, }
/** /**
* Update active status of the button * Update active status of the button
@ -116,23 +112,21 @@ export default Backbone.View.extend({
if (model.get('active')) { if (model.get('active')) {
!fromCollection && model.collection.deactivateAll(context, model); !fromCollection && model.collection.deactivateAll(context, model);
model.set('active', true, { silent: true }).trigger('checkActive'); model.set('active', true, { silent: true }).trigger('checkActive');
!fromListen && !fromListen && commands.runCommand(command, { ...options, sender: model });
commands.runCommand(command, { ...options, sender: model });
// Disable button if the command has no stop method // Disable button if the command has no stop method
command.noStop && model.set('active', false); command.noStop && model.set('active', false);
} else { } else {
$el.removeClass(activeCls); $el.removeClass(activeCls);
!fromListen && !fromListen && commands.stopCommand(command, { ...options, sender: model, force: 1 });
commands.stopCommand(command, { ...options, sender: model, force: 1 });
} }
}, }
updateDisable() { updateDisable() {
const { disableCls, model } = this; const { disableCls, model } = this;
const disable = model.get('disable'); const disable = model.get('disable');
this.$el[disable ? 'addClass' : 'removeClass'](disableCls); this.$el[disable ? 'addClass' : 'removeClass'](disableCls);
}, }
/** /**
* Update active style status * Update active style status
@ -142,7 +136,7 @@ export default Backbone.View.extend({
checkActive() { checkActive() {
const { model, $el, activeCls } = this; const { model, $el, activeCls } = this;
model.get('active') ? $el.addClass(activeCls) : $el.removeClass(activeCls); model.get('active') ? $el.addClass(activeCls) : $el.removeClass(activeCls);
}, }
/** /**
* Triggered when button is clicked * Triggered when button is clicked
@ -153,11 +147,10 @@ export default Backbone.View.extend({
clicked(e) { clicked(e) {
const { model } = this; const { model } = this;
if (model.get('bntsVis') || model.get('disable') || !model.get('command')) if (model.get('bntsVis') || model.get('disable') || !model.get('command')) return;
return;
this.toggleActive(); this.toggleActive();
}, }
toggleActive() { toggleActive() {
const { model, em } = this; const { model, em } = this;
@ -173,7 +166,7 @@ export default Backbone.View.extend({
} else { } else {
if (model.get('stopDefaultCommand')) em.stopDefault(); if (model.get('stopDefaultCommand')) em.stopDefault();
} }
}, }
render() { render() {
const { model } = this; const { model } = this;
@ -187,4 +180,4 @@ export default Backbone.View.extend({
return this; return this;
} }
}); }

18
src/panels/view/ButtonsView.js
View File

@ -1,8 +1,8 @@
import Backbone from 'backbone';
import ButtonView from './ButtonView';
import { result } from 'underscore'; import { result } from 'underscore';
import { View } from '../../common';
import ButtonView from './ButtonView';
export default Backbone.View.extend({ export default class ButtonsView extends View {
initialize(o) { initialize(o) {
this.opt = o || {}; this.opt = o || {};
this.config = this.opt.config || {}; this.config = this.opt.config || {};
@ -11,7 +11,7 @@ export default Backbone.View.extend({
this.listenTo(this.collection, 'add', this.addTo); this.listenTo(this.collection, 'add', this.addTo);
this.listenTo(this.collection, 'reset remove', this.render); this.listenTo(this.collection, 'reset remove', this.render);
this.className = this.pfx + 'buttons'; this.className = this.pfx + 'buttons';
}, }
/** /**
* Add to collection * Add to collection
@ -21,7 +21,7 @@ export default Backbone.View.extend({
* */ * */
addTo(model) { addTo(model) {
this.addToCollection(model); this.addToCollection(model);
}, }
/** /**
* Add new object to collection * Add new object to collection
@ -38,7 +38,7 @@ export default Backbone.View.extend({
el, el,
model, model,
config: this.config, config: this.config,
parentM: this.parentM parentM: this.parentM,
}); });
const rendered = view.render().el; const rendered = view.render().el;
@ -49,13 +49,13 @@ export default Backbone.View.extend({
} }
return rendered; return rendered;
}, }
render() { render() {
var fragment = document.createDocumentFragment(); var fragment = document.createDocumentFragment();
this.$el.empty(); this.$el.empty();
this.collection.each(function(model) { this.collection.each(function (model) {
this.addToCollection(model, fragment); this.addToCollection(model, fragment);
}, this); }, this);
@ -63,4 +63,4 @@ export default Backbone.View.extend({
this.$el.attr('class', result(this, 'className')); this.$el.attr('class', result(this, 'className'));
return this; return this;
} }
}); }

32
src/panels/view/PanelView.js
View File

@ -1,7 +1,7 @@
import Backbone from 'backbone'; import { View } from '../../common';
import ButtonsView from './ButtonsView'; import ButtonsView from './ButtonsView';
export default Backbone.View.extend({ export default class PanelView extends View {
initialize(o) { initialize(o) {
const config = o.config || {}; const config = o.config || {};
const model = this.model; const model = this.model;
@ -15,21 +15,21 @@ export default Backbone.View.extend({
this.listenTo(model, 'change:content', this.updateContent); this.listenTo(model, 'change:content', this.updateContent);
this.listenTo(model, 'change:visible', this.toggleVisible); this.listenTo(model, 'change:visible', this.toggleVisible);
model.view = this; model.view = this;
}, }
/** /**
* Append content of the panel * Append content of the panel
* */ * */
appendContent() { appendContent() {
this.$el.append(this.model.get('appendContent')); this.$el.append(this.model.get('appendContent'));
}, }
/** /**
* Update content * Update content
* */ * */
updateContent() { updateContent() {
this.$el.html(this.model.get('content')); this.$el.html(this.model.get('content'));
}, }
toggleVisible() { toggleVisible() {
if (!this.model.get('visible')) { if (!this.model.get('visible')) {
@ -37,11 +37,11 @@ export default Backbone.View.extend({
return; return;
} }
this.$el.removeClass(`${this.ppfx}hidden`); this.$el.removeClass(`${this.ppfx}hidden`);
}, }
attributes() { attributes() {
return this.model.get('attributes'); return this.model.get('attributes');
}, }
initResize() { initResize() {
const em = this.config.em; const em = this.config.em;
@ -94,25 +94,21 @@ export default Backbone.View.extend({
const forContainer = target == 'container'; const forContainer = target == 'container';
const styleWidth = style[keyWidth]; const styleWidth = style[keyWidth];
const styleHeight = style[keyHeight]; const styleHeight = style[keyHeight];
const width = const width = styleWidth && !forContainer ? parseFloat(styleWidth) : rect.width;
styleWidth && !forContainer ? parseFloat(styleWidth) : rect.width; const height = styleHeight && !forContainer ? parseFloat(styleHeight) : rect.height;
const height =
styleHeight && !forContainer
? parseFloat(styleHeight)
: rect.height;
return { return {
left: 0, left: 0,
top: 0, top: 0,
width, width,
height height,
}; };
}, },
...resizable ...resizable,
}); });
resizer.blur = () => {}; resizer.blur = () => {};
resizer.focus(this.el); resizer.focus(this.el);
} }
}, }
render() { render() {
const $el = this.$el; const $el = this.$el;
@ -125,7 +121,7 @@ export default Backbone.View.extend({
if (this.buttons.length) { if (this.buttons.length) {
var buttons = new ButtonsView({ var buttons = new ButtonsView({
collection: this.buttons, collection: this.buttons,
config: this.config config: this.config,
}); });
$el.append(buttons.render().el); $el.append(buttons.render().el);
} }
@ -133,4 +129,4 @@ export default Backbone.View.extend({
$el.append(this.model.get('content')); $el.append(this.model.get('content'));
return this; return this;
} }
}); }

16
src/panels/view/PanelsView.js
View File

@ -1,7 +1,7 @@
import Backbone from 'backbone'; import { View } from '../../common';
import PanelView from './PanelView'; import PanelView from './PanelView';
export default Backbone.View.extend({ export default class PanelsView extends View {
initialize(o) { initialize(o) {
this.opt = o || {}; this.opt = o || {};
this.config = this.opt.config || {}; this.config = this.opt.config || {};
@ -11,12 +11,12 @@ export default Backbone.View.extend({
this.listenTo(items, 'reset', this.render); this.listenTo(items, 'reset', this.render);
this.listenTo(items, 'remove', this.onRemove); this.listenTo(items, 'remove', this.onRemove);
this.className = this.pfx + 'panels'; this.className = this.pfx + 'panels';
}, }
onRemove(model) { onRemove(model) {
const view = model.view; const view = model.view;
view && view.remove(); view && view.remove();
}, }
/** /**
* Add to collection * Add to collection
@ -27,7 +27,7 @@ export default Backbone.View.extend({
* */ * */
addTo(model) { addTo(model) {
this.addToCollection(model); this.addToCollection(model);
}, }
/** /**
* Add new object to collection * Add new object to collection
@ -45,7 +45,7 @@ export default Backbone.View.extend({
const view = new PanelView({ const view = new PanelView({
el, el,
model, model,
config config,
}); });
const rendered = view.render().el; const rendered = view.render().el;
const appendTo = model.get('appendTo'); const appendTo = model.get('appendTo');
@ -65,7 +65,7 @@ export default Backbone.View.extend({
view.initResize(); view.initResize();
return rendered; return rendered;
}, }
render() { render() {
const $el = this.$el; const $el = this.$el;
@ -76,4 +76,4 @@ export default Backbone.View.extend({
$el.attr('class', this.className); $el.attr('class', this.className);
return this; return this;
} }
}); }

Write Preview
Loading…
Cancel
Save