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

eslint fix

pull/4313/head
Artur Arseniev 4 years ago
parent
04bc2876a7
commit
28937a2af7
10 changed files with 269 additions and 269 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. 32
      src/abstract/Module.ts
  2. 8
      src/abstract/index.ts
  3. 32
      src/canvas/model/Canvas.ts
  4. 80
      src/canvas/model/Frame.ts
  5. 18
      src/canvas/model/Frames.ts
  6. 32
      src/editor/index.ts
  7. 262
      src/editor/model/Editor.ts
  8. 44
      src/pages/index.ts
  9. 22
      src/pages/model/Page.ts
  10. 8
      src/pages/model/Pages.ts

32
src/abstract/Module.ts
View File

@ -1,7 +1,7 @@
import { isElement, isUndefined } from "underscore"; import { isElement, isUndefined } from 'underscore';
import { Collection } from "../common"; import { Collection } from '../common';
import EditorModel from "../editor/model/Editor"; import EditorModel from '../editor/model/Editor';
import { createId, isDef } from "../utils/mixins"; import { createId, isDef } from '../utils/mixins';
export interface IModule<TConfig extends any = any> export interface IModule<TConfig extends any = any>
extends IBaseModule<TConfig> { extends IBaseModule<TConfig> {
@ -48,7 +48,7 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig>
? em.config[name] ? em.config[name]
: em.config[this.name]; : em.config[this.name];
const cfg = cfgParent === true ? {} : cfgParent || {}; const cfg = cfgParent === true ? {} : cfgParent || {};
cfg.pStylePrefix = em.config.pStylePrefix || ""; cfg.pStylePrefix = em.config.pStylePrefix || '';
if (!isUndefined(cfgParent) && !cfgParent) { if (!isUndefined(cfgParent) && !cfgParent) {
cfg._disable = 1; cfg._disable = 1;
@ -120,15 +120,15 @@ export abstract class ItemManagerModule<
) { ) {
const { all, onResult, reset } = param; const { all, onResult, reset } = param;
const key = this.storageKey; const key = this.storageKey;
const opts: any = { action: "load" }; const opts: any = { action: 'load' };
const coll = all || this.all; const coll = all || this.all;
let result = data[key]; let result = data[key];
if (typeof result == "string") { if (typeof result == 'string') {
try { try {
result = JSON.parse(result); result = JSON.parse(result);
} catch (err) { } catch (err) {
this.__logWarn("Data parsing failed", { input: result }); this.__logWarn('Data parsing failed', { input: result });
} }
} }
@ -167,19 +167,19 @@ export abstract class ItemManagerModule<
all && all &&
em && em &&
all all
.on("add", (m: any, c: any, o: any) => em.trigger(events.add, m, o)) .on('add', (m: any, c: any, o: any) => em.trigger(events.add, m, o))
.on("remove", (m: any, c: any, o: any) => .on('remove', (m: any, c: any, o: any) =>
em.trigger(events.remove, m, o) em.trigger(events.remove, m, o)
) )
.on("change", (p: any, c: any) => .on('change', (p: any, c: any) =>
em.trigger(events.update, p, p.changedAttributes(), c) em.trigger(events.update, p, p.changedAttributes(), c)
) )
.on("all", this.__catchAllEvent, this); .on('all', this.__catchAllEvent, this);
// Register collections // Register collections
this.cls = [all].concat(opts.collections || []); this.cls = [all].concat(opts.collections || []);
// Propagate events // Propagate events
((opts.propagate as any[]) || []).forEach(({ entity, event }) => { ((opts.propagate as any[]) || []).forEach(({ entity, event }) => {
entity.on("all", (ev: any, model: any, coll: any, opts: any) => { entity.on('all', (ev: any, model: any, coll: any, opts: any) => {
const options = opts || coll; const options = opts || coll;
const opt = { event: ev, ...options }; const opt = { event: ev, ...options };
[em, all].map((md) => md.trigger(event, model, opt)); [em, all].map((md) => md.trigger(event, model, opt));
@ -233,15 +233,15 @@ export abstract class ItemManagerModule<
} }
__listenAdd(model: TCollection, event: string) { __listenAdd(model: TCollection, event: string) {
model.on("add", (m, c, o) => this.em.trigger(event, m, o)); model.on('add', (m, c, o) => this.em.trigger(event, m, o));
} }
__listenRemove(model: TCollection, event: string) { __listenRemove(model: TCollection, event: string) {
model.on("remove", (m, c, o) => this.em.trigger(event, m, o)); model.on('remove', (m, c, o) => this.em.trigger(event, m, o));
} }
__listenUpdate(model: TCollection, event: string) { __listenUpdate(model: TCollection, event: string) {
model.on("change", (p, c) => model.on('change', (p, c) =>
this.em.trigger(event, p, p.changedAttributes(), c) this.em.trigger(event, p, p.changedAttributes(), c)
); );
} }

8
src/abstract/index.ts
View File

@ -1,4 +1,4 @@
export { default as Model } from "./Model"; export { default as Model } from './Model';
export { default as Collection } from "./Collection"; export { default as Collection } from './Collection';
export { default as View } from "./View"; export { default as View } from './View';
export { default as Module } from "./Module"; export { default as Module } from './Module';

32
src/canvas/model/Canvas.ts
View File

@ -1,14 +1,14 @@
import { Model } from "../../common"; import { Model } from '../../common';
import Backbone from "backbone"; import Backbone from 'backbone';
import { evPageSelect } from "../../pages"; import { evPageSelect } from '../../pages';
import Frames from "./Frames"; import Frames from './Frames';
import EditorModel from "../../editor/model/Editor"; import EditorModel from '../../editor/model/Editor';
import Page from "../../pages/model/Page"; import Page from '../../pages/model/Page';
export default class Canvas extends Backbone.Model { export default class Canvas extends Backbone.Model {
defaults() { defaults() {
return { return {
frame: "", frame: '',
frames: new Frames(), frames: new Frames(),
rulers: false, rulers: false,
zoom: 100, zoom: 100,
@ -28,29 +28,29 @@ export default class Canvas extends Backbone.Model {
const { em } = config; const { em } = config;
this.config = config; this.config = config;
this.em = em; this.em = em;
this.listenTo(this, "change:zoom", this.onZoomChange); this.listenTo(this, 'change:zoom', this.onZoomChange);
this.listenTo(em, "change:device", this.updateDevice); this.listenTo(em, 'change:device', this.updateDevice);
this.listenTo(em, evPageSelect, this._pageUpdated); this.listenTo(em, evPageSelect, this._pageUpdated);
} }
get frames(): Frames { get frames(): Frames {
return this.get("frames"); return this.get('frames');
} }
init() { init() {
const { em } = this; const { em } = this;
const mainPage = em.get("PageManager").getMain(); const mainPage = em.get('PageManager').getMain();
const frame = mainPage.getMainFrame(); const frame = mainPage.getMainFrame();
this.set("frames", mainPage.getFrames()); this.set('frames', mainPage.getFrames());
this.updateDevice({ frame }); this.updateDevice({ frame });
} }
_pageUpdated(page: Page, prev?: Page) { _pageUpdated(page: Page, prev?: Page) {
const { em } = this; const { em } = this;
em.setSelected(); em.setSelected();
em.get("readyCanvas") && em.stopDefault(); // We have to stop before changing current frames em.get('readyCanvas') && em.stopDefault(); // We have to stop before changing current frames
//@ts-ignore //@ts-ignore
prev?.getFrames().map((frame) => frame.disable()); prev?.getFrames().map((frame) => frame.disable());
this.set("frames", page.getFrames()); this.set('frames', page.getFrames());
} }
updateDevice(opts: any = {}) { updateDevice(opts: any = {}) {
@ -65,7 +65,7 @@ export default class Canvas extends Backbone.Model {
} }
onZoomChange() { onZoomChange() {
const zoom = this.get("zoom"); const zoom = this.get('zoom');
zoom < 1 && this.set("zoom", 1); zoom < 1 && this.set('zoom', 1);
} }
} }

80
src/canvas/model/Frame.ts
View File

@ -1,15 +1,15 @@
import { result, forEach, isEmpty, isString } from "underscore"; import { result, forEach, isEmpty, isString } from 'underscore';
import { Model } from "../../common"; import { Model } from '../../common';
import { Component } from "../../dom_components/model/Component"; import { Component } from '../../dom_components/model/Component';
import Components from "../../dom_components/model/Components"; import Components from '../../dom_components/model/Components';
import ComponentWrapper from "../../dom_components/model/ComponentWrapper"; import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
import EditorModel from "../../editor/model/Editor"; import EditorModel from '../../editor/model/Editor';
import { isComponent, isObject } from "../../utils/mixins"; import { isComponent, isObject } from '../../utils/mixins';
import FrameView from "../view/FrameView"; import FrameView from '../view/FrameView';
import Frames from "./Frames"; import Frames from './Frames';
const keyAutoW = "__aw"; const keyAutoW = '__aw';
const keyAutoH = "__ah"; const keyAutoH = '__ah';
/** /**
* @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component. * @property {Object|String} component Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.
@ -29,10 +29,10 @@ export default class Frame extends Model {
width: null, width: null,
height: null, height: null,
head: [], head: [],
component: "", component: '',
styles: "", styles: '',
_undo: true, _undo: true,
_undoexc: ["changesCount"], _undoexc: ['changesCount'],
}; };
} }
em: EditorModel; em: EditorModel;
@ -42,22 +42,22 @@ export default class Frame extends Model {
super(props); super(props);
const { em } = opts; const { em } = opts;
const { styles, component } = this.attributes; const { styles, component } = this.attributes;
const domc = em.get("DomComponents"); const domc = em.get('DomComponents');
const conf = domc.getConfig(); const conf = domc.getConfig();
const allRules = em.get("CssComposer").getAll(); const allRules = em.get('CssComposer').getAll();
const idMap: any = {}; const idMap: any = {};
this.em = em; this.em = em;
const modOpts = { em, config: conf, frame: this, idMap }; const modOpts = { em, config: conf, frame: this, idMap };
if (!isComponent(component)) { if (!isComponent(component)) {
const wrp = isObject(component) ? component : { components: component }; const wrp = isObject(component) ? component : { components: component };
!wrp.type && (wrp.type = "wrapper"); !wrp.type && (wrp.type = 'wrapper');
const Wrapper = domc.getType("wrapper").model; const Wrapper = domc.getType('wrapper').model;
this.set("component", new Wrapper(wrp, modOpts)); this.set('component', new Wrapper(wrp, modOpts));
} }
if (!styles) { if (!styles) {
this.set("styles", allRules); this.set('styles', allRules);
} else if (!isObject(styles)) { } else if (!isObject(styles)) {
// Avoid losing styles on remapped components // Avoid losing styles on remapped components
const idMapKeys = Object.keys(idMap); const idMapKeys = Object.keys(idMap);
@ -69,7 +69,7 @@ export default class Frame extends Model {
const idSel = sSel.name && sSel.type === 2 && sSel; const idSel = sSel.name && sSel.type === 2 && sSel;
if (idSel && idMap[idSel.name]) { if (idSel && idMap[idSel.name]) {
idSel.name = idMap[idSel.name]; idSel.name = idMap[idSel.name];
} else if (isString(sSel) && sSel[0] === "#") { } else if (isString(sSel) && sSel[0] === '#') {
const prevId = sSel.substring(1); const prevId = sSel.substring(1);
if (prevId && idMap[prevId]) { if (prevId && idMap[prevId]) {
sel[0] = `#${idMap[prevId]}`; sel[0] = `#${idMap[prevId]}`;
@ -80,7 +80,7 @@ export default class Frame extends Model {
} }
allRules.add(styles); allRules.add(styles);
this.set("styles", allRules); this.set('styles', allRules);
} }
!props.width && this.set(keyAutoW, 1); !props.width && this.set(keyAutoW, 1);
@ -95,19 +95,19 @@ export default class Frame extends Model {
if (opt.temporary || opt.noCount || opt.avoidStore) { if (opt.temporary || opt.noCount || opt.avoidStore) {
return; return;
} }
this.set("changesCount", this.get("changesCount") + 1); this.set('changesCount', this.get('changesCount') + 1);
} }
getComponent(): ComponentWrapper { getComponent(): ComponentWrapper {
return this.get("component"); return this.get('component');
} }
getStyles() { getStyles() {
return this.get("styles"); return this.get('styles');
} }
disable() { disable() {
this.trigger("disable"); this.trigger('disable');
} }
remove() { remove() {
@ -117,12 +117,12 @@ export default class Frame extends Model {
} }
getHead() { getHead() {
const head = this.get("head") || []; const head = this.get('head') || [];
return [...head]; return [...head];
} }
setHead(value: any) { setHead(value: any) {
return this.set("head", [...value]); return this.set('head', [...value]);
} }
addHeadItem(item: any) { addHeadItem(item: any) {
@ -153,24 +153,24 @@ export default class Frame extends Model {
} }
addLink(href: string) { addLink(href: string) {
const tag = "link"; const tag = 'link';
!this.getHeadByAttr("href", href, tag) && !this.getHeadByAttr('href', href, tag) &&
this.addHeadItem({ this.addHeadItem({
tag, tag,
attributes: { attributes: {
href, href,
rel: "stylesheet", rel: 'stylesheet',
}, },
}); });
} }
removeLink(href: string) { removeLink(href: string) {
this.removeHeadByAttr("href", href, "link"); this.removeHeadByAttr('href', href, 'link');
} }
addScript(src: string) { addScript(src: string) {
const tag = "script"; const tag = 'script';
!this.getHeadByAttr("src", src, tag) && !this.getHeadByAttr('src', src, tag) &&
this.addHeadItem({ this.addHeadItem({
tag, tag,
attributes: { src }, attributes: { src },
@ -178,7 +178,7 @@ export default class Frame extends Model {
} }
removeScript(src: string) { removeScript(src: string) {
this.removeHeadByAttr("src", src, "script"); this.removeHeadByAttr('src', src, 'script');
} }
getPage() { getPage() {
@ -186,12 +186,12 @@ export default class Frame extends Model {
} }
_emitUpdated(data = {}) { _emitUpdated(data = {}) {
this.em.trigger("frame:updated", { frame: this, ...data }); this.em.trigger('frame:updated', { frame: this, ...data });
} }
toJSON(opts: any = {}) { toJSON(opts: any = {}) {
const obj = Model.prototype.toJSON.call(this, opts); const obj = Model.prototype.toJSON.call(this, opts);
const defaults = result(this, "defaults"); const defaults = result(this, 'defaults');
if (opts.fromUndo) delete obj.component; if (opts.fromUndo) delete obj.component;
delete obj.styles; delete obj.styles;
@ -201,14 +201,14 @@ export default class Frame extends Model {
// Remove private keys // Remove private keys
forEach(obj, (value, key) => { forEach(obj, (value, key) => {
key.indexOf("_") === 0 && delete obj[key]; key.indexOf('_') === 0 && delete obj[key];
}); });
forEach(defaults, (value, key) => { forEach(defaults, (value, key) => {
if (obj[key] === value) delete obj[key]; if (obj[key] === value) delete obj[key];
}); });
forEach(["attributes", "head"], (prop) => { forEach(['attributes', 'head'], (prop) => {
if (isEmpty(obj[prop])) delete obj[prop]; if (isEmpty(obj[prop])) delete obj[prop];
}); });

18
src/canvas/model/Frames.ts
View File

@ -1,7 +1,7 @@
import { bindAll } from "underscore"; import { bindAll } from 'underscore';
import { Collection } from "../../common"; import { Collection } from '../../common';
import Page from "../../pages/model/Page"; import Page from '../../pages/model/Page';
import Frame from "./Frame"; import Frame from './Frame';
export default class Frames extends Collection<Frame> { export default class Frames extends Collection<Frame> {
loadedItems = 0; loadedItems = 0;
@ -10,9 +10,9 @@ export default class Frames extends Collection<Frame> {
constructor(models?: Frame[]) { constructor(models?: Frame[]) {
super(models); super(models);
bindAll(this, "itemLoaded"); bindAll(this, 'itemLoaded');
this.on("reset", this.onReset); this.on('reset', this.onReset);
this.on("remove", this.onRemove); this.on('remove', this.onRemove);
} }
onReset(m: Frame, opts?: { previousModels?: Frame[] }) { onReset(m: Frame, opts?: { previousModels?: Frame[] }) {
@ -28,7 +28,7 @@ export default class Frames extends Collection<Frame> {
this.loadedItems++; this.loadedItems++;
if (this.loadedItems >= this.itemsToLoad) { if (this.loadedItems >= this.itemsToLoad) {
this.trigger("loaded:all"); this.trigger('loaded:all');
this.listenToLoadItems(false); this.listenToLoadItems(false);
} }
} }
@ -40,6 +40,6 @@ export default class Frames extends Collection<Frame> {
} }
listenToLoadItems(on: boolean) { listenToLoadItems(on: boolean) {
this.forEach((item) => item[on ? "on" : "off"]("loaded", this.itemLoaded)); this.forEach((item) => item[on ? 'on' : 'off']('loaded', this.itemLoaded));
} }
} }

32
src/editor/index.ts
View File

@ -54,14 +54,14 @@
* ## Methods * ## Methods
* @module Editor * @module Editor
*/ */
import { EventHandler } from "backbone"; import { EventHandler } from 'backbone';
import { isUndefined } from "underscore"; import { isUndefined } from 'underscore';
import { IBaseModule } from "../abstract/Module"; import { IBaseModule } from '../abstract/Module';
import cash from "../utils/cash-dom"; import cash from '../utils/cash-dom';
import html from "../utils/html"; 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';
export default class EditorModule implements IBaseModule<typeof defaults> { export default class EditorModule implements IBaseModule<typeof defaults> {
constructor(config = {}, opts: any = {}) { constructor(config = {}, opts: any = {}) {
@ -264,7 +264,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* @return {Components} * @return {Components}
*/ */
getComponents() { getComponents() {
return this.em.get("DomComponents").getComponents(); return this.em.get('DomComponents').getComponents();
} }
/** /**
@ -272,7 +272,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* @return {Component} * @return {Component}
*/ */
getWrapper() { getWrapper() {
return this.em.get("DomComponents").getWrapper(); return this.em.get('DomComponents').getWrapper();
} }
/** /**
@ -320,7 +320,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* @return {Object} * @return {Object}
*/ */
getStyle() { getStyle() {
return this.em.get("CssComposer").getAll(); return this.em.get('CssComposer').getAll();
} }
/** /**
@ -458,7 +458,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* editor.setDevice('Tablet'); * editor.setDevice('Tablet');
*/ */
setDevice(name: string) { setDevice(name: string) {
this.em.set("device", name); this.em.set('device', name);
return this; return this;
} }
@ -471,7 +471,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* // 'Tablet' * // 'Tablet'
*/ */
getDevice() { getDevice() {
return this.em.get("device"); return this.em.get('device');
} }
/** /**
@ -483,7 +483,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* editor.runCommand('myCommand', {someValue: 1}); * editor.runCommand('myCommand', {someValue: 1});
*/ */
runCommand(id: string, options = {}) { runCommand(id: string, options = {}) {
return this.em.get("Commands").run(id, options); return this.em.get('Commands').run(id, options);
} }
/** /**
@ -495,7 +495,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* editor.stopCommand('myCommand', {someValue: 1}); * editor.stopCommand('myCommand', {someValue: 1});
*/ */
stopCommand(id: string, options = {}) { stopCommand(id: string, options = {}) {
return this.em.get("Commands").stop(id, options); return this.em.get('Commands').stop(id, options);
} }
/** /**
@ -784,7 +784,7 @@ export default class EditorModule implements IBaseModule<typeof defaults> {
* }); * });
*/ */
onReady(clb: EventHandler) { onReady(clb: EventHandler) {
this.em.get("ready") ? clb(this) : this.em.on("load", clb); this.em.get('ready') ? clb(this) : this.em.on('load', clb);
} }
/** /**

262
src/editor/model/Editor.ts
View File

@ -5,44 +5,44 @@ import {
toArray, toArray,
keys, keys,
bindAll, bindAll,
} from "underscore"; } 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, isEmptyObj } from "../../utils/mixins"; import { getModel, hasWin, isEmptyObj } from '../../utils/mixins';
import { Model } from "../../common"; import { Model } from '../../common';
import Selected from "./Selected"; import Selected from './Selected';
import FrameView from "../../canvas/view/FrameView"; import FrameView from '../../canvas/view/FrameView';
import EditorModule from ".."; import EditorModule from '..';
import EditorView from "../view/EditorView"; import EditorView from '../view/EditorView';
import { IModule } from "../../abstract/Module"; import { IModule } from '../../abstract/Module';
//@ts-ignore //@ts-ignore
Backbone.$ = $; Backbone.$ = $;
const deps = [ const deps = [
require("utils"), require('utils'),
require("i18n"), require('i18n'),
require("keymaps"), require('keymaps'),
require("undo_manager"), require('undo_manager'),
require("storage_manager"), require('storage_manager'),
require("device_manager"), require('device_manager'),
require("parser"), require('parser'),
require("style_manager"), require('style_manager'),
require("selector_manager"), require('selector_manager'),
require("modal_dialog"), require('modal_dialog'),
require("code_manager"), require('code_manager'),
require("panels"), require('panels'),
require("rich_text_editor"), require('rich_text_editor'),
require("asset_manager"), require('asset_manager'),
require("css_composer"), require('css_composer'),
require("pages"), require('pages'),
require("trait_manager"), require('trait_manager'),
require("dom_components"), require('dom_components'),
require("navigator"), require('navigator'),
require("canvas"), require('canvas'),
require("commands"), require('commands'),
require("block_manager"), require('block_manager'),
]; ];
const ts_deps: any[] = []; const ts_deps: any[] = [];
@ -74,7 +74,7 @@ export default class EditorModel extends Model {
modules: [], modules: [],
toLoad: [], toLoad: [],
opened: {}, opened: {},
device: "", device: '',
}; };
} }
@ -106,15 +106,15 @@ export default class EditorModel extends Model {
super(); super();
this._config = conf; this._config = conf;
const { config } = this; const { config } = this;
this.set("Config", conf); this.set('Config', conf);
this.set("modules", []); this.set('modules', []);
this.set("toLoad", []); this.set('toLoad', []);
this.set("storables", []); this.set('storables', []);
this.set("selected", new Selected()); this.set('selected', new Selected());
this.set("dmode", config.dragMode); this.set('dmode', config.dragMode);
const { el, log } = config; const { el, log } = config;
const toLog = log === true ? keys(logs) : isArray(log) ? log : []; const toLog = log === true ? keys(logs) : isArray(log) ? log : [];
bindAll(this, "initBaseColorPicker"); bindAll(this, 'initBaseColorPicker');
if (el && config.fromElement) { if (el && config.fromElement) {
config.components = el.innerHTML; config.components = el.innerHTML;
@ -125,7 +125,7 @@ export default class EditorModel extends Model {
res[next.nodeName] = next.nodeValue; res[next.nodeName] = next.nodeValue;
return res; return res;
}, {}) }, {})
: ""; : '';
// Move components to pages // Move components to pages
if (config.components && !config.pageManager) { if (config.components && !config.pageManager) {
@ -135,13 +135,13 @@ export default class EditorModel extends Model {
// Load modules // Load modules
deps.forEach((name) => this.loadModule(name)); deps.forEach((name) => this.loadModule(name));
ts_deps.forEach((name) => this.tsLoadModule(name)); ts_deps.forEach((name) => this.tsLoadModule(name));
this.on("change:componentHovered", this.componentHovered, this); this.on('change:componentHovered', this.componentHovered, this);
this.on("change:changesCount", this.updateChanges, this); this.on('change:changesCount', this.updateChanges, this);
this.on("change:readyLoad change:readyCanvas", this._checkReady, this); this.on('change:readyLoad change:readyCanvas', this._checkReady, this);
toLog.forEach((e) => this.listenLog(e)); toLog.forEach((e) => this.listenLog(e));
// Deprecations // Deprecations
[{ from: "change:selectedComponent", to: "component:toggled" }].forEach( [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(
(event) => { (event) => {
const eventFrom = event.from; const eventFrom = event.from;
const eventTo = event.to; const eventTo = event.to;
@ -157,11 +157,11 @@ export default class EditorModel extends Model {
_checkReady() { _checkReady() {
if ( if (
this.get("readyLoad") && this.get('readyLoad') &&
this.get("readyCanvas") && this.get('readyCanvas') &&
!this.get("ready") !this.get('ready')
) { ) {
this.set("ready", true); this.set('ready', true);
} }
} }
@ -195,7 +195,7 @@ export default class EditorModel extends Model {
*/ */
loadOnStart() { loadOnStart() {
const { projectData, headless } = this.config; const { projectData, headless } = this.config;
const sm = this.get("StorageManager"); const sm = this.get('StorageManager');
// In `onLoad`, the module will try to load the data from its configurations. // In `onLoad`, the module will try to load the data from its configurations.
this.toLoad.forEach((mdl) => mdl.onLoad()); this.toLoad.forEach((mdl) => mdl.onLoad());
@ -203,7 +203,7 @@ export default class EditorModel extends Model {
// Stuff to do post load // Stuff to do post load
const postLoad = () => { const postLoad = () => {
this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this)); this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this));
this.set("readyLoad", 1); this.set('readyLoad', 1);
}; };
if (headless) { if (headless) {
@ -233,8 +233,8 @@ export default class EditorModel extends Model {
undoManager: false, undoManager: false,
}); });
// We only need to load a few modules // We only need to load a few modules
["PageManager", "Canvas"].forEach((key) => shallow.get(key).onLoad()); ['PageManager', 'Canvas'].forEach((key) => shallow.get(key).onLoad());
this.set("shallow", shallow); this.set('shallow', shallow);
} }
/** /**
@ -243,11 +243,11 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
updateChanges() { updateChanges() {
const stm = this.get("StorageManager"); const stm = this.get('StorageManager');
const changes = this.getDirtyCount(); const changes = this.getDirtyCount();
this.updateItr && clearTimeout(this.updateItr); this.updateItr && clearTimeout(this.updateItr);
//@ts-ignore //@ts-ignore
this.updateItr = setTimeout(() => this.trigger("update")); this.updateItr = setTimeout(() => this.trigger('update'));
if (this.config.noticeOnUnload) { if (this.config.noticeOnUnload) {
window.onbeforeunload = changes ? () => true : null; window.onbeforeunload = changes ? () => true : null;
@ -273,7 +273,7 @@ export default class EditorModel extends Model {
? config[name] ? config[name]
: config[Mod.name]; : config[Mod.name];
const cfg = cfgParent === true ? {} : cfgParent || {}; const cfg = cfgParent === true ? {} : cfgParent || {};
cfg.pStylePrefix = config.pStylePrefix || ""; cfg.pStylePrefix = config.pStylePrefix || '';
if (!isUndefined(cfgParent) && !cfgParent) { if (!isUndefined(cfgParent) && !cfgParent) {
cfg._disable = 1; cfg._disable = 1;
@ -324,11 +324,11 @@ export default class EditorModel extends Model {
this.initialize(opts); this.initialize(opts);
this.destroyed = false; this.destroyed = false;
} }
this.set("Editor", editor); this.set('Editor', editor);
} }
getEditor() { getEditor() {
return this.get("Editor"); return this.get('Editor');
} }
/** /**
@ -346,7 +346,7 @@ export default class EditorModel extends Model {
opt.temporary || opt.temporary ||
opt.noCount || opt.noCount ||
opt.avoidStore || opt.avoidStore ||
!this.get("ready") !this.get('ready')
) { ) {
return; return;
} }
@ -356,7 +356,7 @@ export default class EditorModel extends Model {
this.timedInterval = setTimeout(() => { this.timedInterval = setTimeout(() => {
const curr = this.getDirtyCount() || 0; const curr = this.getDirtyCount() || 0;
const { unset, ...opts } = opt; const { unset, ...opts } = opt;
this.set("changesCount", curr + 1, opts); this.set('changesCount', curr + 1, opts);
}, 0); }, 0);
} }
@ -372,9 +372,9 @@ export default class EditorModel extends Model {
* @private * @private
* */ * */
componentHovered(editor: any, component: any, options: any) { componentHovered(editor: any, component: any, options: any) {
const prev = this.previous("componentHovered"); const prev = this.previous('componentHovered');
prev && this.trigger("component:unhovered", prev, options); prev && this.trigger('component:unhovered', prev, options);
component && this.trigger("component:hovered", component, options); component && this.trigger('component:hovered', component, options);
} }
/** /**
@ -419,13 +419,13 @@ export default class EditorModel extends Model {
let model = getModel(el, undefined); let model = getModel(el, undefined);
if (model) { if (model) {
this.trigger("component:select:before", model, opts); this.trigger('component:select:before', model, opts);
// Check for valid selectable // Check for valid selectable
if (!model.get("selectable") || opts.abort) { if (!model.get('selectable') || opts.abort) {
if (opts.useValid) { if (opts.useValid) {
let parent = model.parent(); let parent = model.parent();
while (parent && !parent.get("selectable")) while (parent && !parent.get('selectable'))
parent = parent.parent(); parent = parent.parent();
model = parent; model = parent;
} else { } else {
@ -438,7 +438,7 @@ export default class EditorModel extends Model {
if (ctrlKey && mltSel) { if (ctrlKey && mltSel) {
return this.toggleSelected(model); return this.toggleSelected(model);
} else if (shiftKey && mltSel) { } else if (shiftKey && mltSel) {
this.clearSelection(this.get("Canvas").getWindow()); this.clearSelection(this.get('Canvas').getWindow());
const coll = model.collection; const coll = model.collection;
const index = model.index(); const index = model.index();
let min: number | undefined, max: number | undefined; let min: number | undefined, max: number | undefined;
@ -496,7 +496,7 @@ export default class EditorModel extends Model {
const { selected } = this; const { selected } = this;
opts.forceChange && this.removeSelected(model, opts); opts.forceChange && this.removeSelected(model, opts);
selected.addComponent(model, opts); selected.addComponent(model, opts);
model && this.trigger("component:select", model, opts); model && this.trigger('component:select', model, opts);
}); });
} }
@ -536,21 +536,21 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
setHovered(el: any, opts: any = {}) { setHovered(el: any, opts: any = {}) {
if (!el) return this.set("componentHovered", ""); if (!el) return this.set('componentHovered', '');
const ev = "component:hover"; const ev = 'component:hover';
let model = getModel(el, undefined); let model = getModel(el, undefined);
if (!model) return; if (!model) return;
opts.forceChange && this.set("componentHovered", ""); opts.forceChange && this.set('componentHovered', '');
this.trigger(`${ev}:before`, model, opts); this.trigger(`${ev}:before`, model, opts);
// Check for valid hoverable // Check for valid hoverable
if (!model.get("hoverable")) { if (!model.get('hoverable')) {
if (opts.useValid && !opts.abort) { if (opts.useValid && !opts.abort) {
let parent = model && model.parent(); let parent = model && model.parent();
while (parent && !parent.get("hoverable")) parent = parent.parent(); while (parent && !parent.get('hoverable')) parent = parent.parent();
model = parent; model = parent;
} else { } else {
return; return;
@ -558,13 +558,13 @@ export default class EditorModel extends Model {
} }
if (!opts.abort) { if (!opts.abort) {
this.set("componentHovered", model, opts); this.set('componentHovered', model, opts);
this.trigger(ev, model, opts); this.trigger(ev, model, opts);
} }
} }
getHovered() { getHovered() {
return this.get("componentHovered"); return this.get('componentHovered');
} }
/** /**
@ -575,7 +575,7 @@ export default class EditorModel extends Model {
* @public * @public
*/ */
setComponents(components: any, opt = {}) { setComponents(components: any, opt = {}) {
return this.get("DomComponents").setComponents(components, opt); return this.get('DomComponents').setComponents(components, opt);
} }
/** /**
@ -584,13 +584,13 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
getComponents() { getComponents() {
var cmp = this.get("DomComponents"); var cmp = this.get('DomComponents');
var cm = this.get("CodeManager"); var cm = this.get('CodeManager');
if (!cmp || !cm) return; if (!cmp || !cm) return;
var wrp = cmp.getComponents(); var wrp = cmp.getComponents();
return cm.getCode(wrp, "json"); return cm.getCode(wrp, 'json');
} }
/** /**
@ -601,7 +601,7 @@ export default class EditorModel extends Model {
* @public * @public
*/ */
setStyle(style: any, opt = {}) { setStyle(style: any, opt = {}) {
const cssc = this.get("CssComposer"); const cssc = this.get('CssComposer');
cssc.clear(opt); cssc.clear(opt);
cssc.getAll().add(style, opt); cssc.getAll().add(style, opt);
return this; return this;
@ -624,7 +624,7 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
getStyle() { getStyle() {
return this.get("CssComposer").getAll(); return this.get('CssComposer').getAll();
} }
/** /**
@ -633,7 +633,7 @@ export default class EditorModel extends Model {
* @returns {this} * @returns {this}
*/ */
setState(value: string) { setState(value: string) {
this.set("state", value); this.set('state', value);
return this; return this;
} }
@ -642,7 +642,7 @@ export default class EditorModel extends Model {
* @returns {String} * @returns {String}
*/ */
getState() { getState() {
return this.get("state") || ""; return this.get('state') || '';
} }
/** /**
@ -654,15 +654,15 @@ export default class EditorModel extends Model {
getHtml(opts: any = {}) { getHtml(opts: any = {}) {
const { config } = this; const { config } = this;
const { optsHtml } = config; const { optsHtml } = config;
const js = config.jsInHtml ? this.getJs(opts) : ""; const js = config.jsInHtml ? this.getJs(opts) : '';
const cmp = opts.component || this.get("DomComponents").getComponent(); const cmp = opts.component || this.get('DomComponents').getComponent();
let html = cmp let html = cmp
? this.get("CodeManager").getCode(cmp, "html", { ? this.get('CodeManager').getCode(cmp, 'html', {
...optsHtml, ...optsHtml,
...opts, ...opts,
}) })
: ""; : '';
html += js ? `<script>${js}</script>` : ""; html += js ? `<script>${js}</script>` : '';
return html; return html;
} }
@ -679,18 +679,18 @@ export default class EditorModel extends Model {
const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles)
? opts.keepUnusedStyles ? opts.keepUnusedStyles
: config.keepUnusedStyles; : config.keepUnusedStyles;
const cssc = this.get("CssComposer"); const cssc = this.get('CssComposer');
const wrp = opts.component || this.get("DomComponents").getComponent(); const wrp = opts.component || this.get('DomComponents').getComponent();
const protCss = !avoidProt ? config.protectedCss : ""; const protCss = !avoidProt ? config.protectedCss : '';
const css = const css =
wrp && wrp &&
this.get("CodeManager").getCode(wrp, "css", { this.get('CodeManager').getCode(wrp, 'css', {
cssc, cssc,
keepUnusedStyles, keepUnusedStyles,
...optsCss, ...optsCss,
...opts, ...opts,
}); });
return wrp ? (opts.json ? css : protCss + css) : ""; return wrp ? (opts.json ? css : protCss + css) : '';
} }
/** /**
@ -699,8 +699,8 @@ export default class EditorModel extends Model {
* @public * @public
*/ */
getJs(opts: any = {}) { getJs(opts: any = {}) {
var wrp = opts.component || this.get("DomComponents").getWrapper(); var wrp = opts.component || this.get('DomComponents').getWrapper();
return wrp ? this.get("CodeManager").getCode(wrp, "js").trim() : ""; return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : '';
} }
/** /**
@ -709,7 +709,7 @@ export default class EditorModel extends Model {
*/ */
async store(options?: any) { async store(options?: any) {
const data = this.storeData(); const data = this.storeData();
await this.get("StorageManager").store(data, options); await this.get('StorageManager').store(data, options);
this.clearDirtyCount(); this.clearDirtyCount();
return data; return data;
} }
@ -719,7 +719,7 @@ export default class EditorModel extends Model {
* @public * @public
*/ */
async load(options?: any) { async load(options?: any) {
const result = await this.get("StorageManager").load(options); const result = await this.get('StorageManager').load(options);
this.loadData(result); this.loadData(result);
return result; return result;
} }
@ -728,7 +728,7 @@ export default class EditorModel extends Model {
let result = {}; let result = {};
// Sync content if there is an active RTE // Sync content if there is an active RTE
const editingCmp = this.getEditing(); const editingCmp = this.getEditing();
editingCmp && editingCmp.trigger("sync:content", { noCount: true }); editingCmp && editingCmp.trigger('sync:content', { noCount: true });
this.storables.forEach((m) => { this.storables.forEach((m) => {
result = { ...result, ...m.store(1) }; result = { ...result, ...m.store(1) };
@ -750,8 +750,8 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
getDeviceModel() { getDeviceModel() {
var name = this.get("device"); var name = this.get('device');
return this.get("DeviceManager").get(name); return this.get('DeviceManager').get(name);
} }
/** /**
@ -760,7 +760,7 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
runDefault(opts = {}) { runDefault(opts = {}) {
var command = this.get("Commands").get(this.config.defaultCommand); var command = this.get('Commands').get(this.config.defaultCommand);
if (!command || this.defaultRunning) return; if (!command || this.defaultRunning) return;
command.stop(this, this, opts); command.stop(this, this, opts);
command.run(this, this, opts); command.run(this, this, opts);
@ -773,7 +773,7 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
stopDefault(opts = {}) { stopDefault(opts = {}) {
const commands = this.get("Commands"); const commands = this.get('Commands');
const command = commands.get(this.config.defaultCommand); const command = commands.get(this.config.defaultCommand);
if (!command || !this.defaultRunning) return; if (!command || !this.defaultRunning) return;
command.stop(this, this, opts); command.stop(this, this, opts);
@ -785,9 +785,9 @@ export default class EditorModel extends Model {
* @public * @public
*/ */
refreshCanvas(opts: any = {}) { refreshCanvas(opts: any = {}) {
this.set("canvasOffset", null); this.set('canvasOffset', null);
this.set("canvasOffset", this.get("Canvas").getOffset()); this.set('canvasOffset', this.get('Canvas').getOffset());
opts.tools && this.trigger("canvas:updateTools"); opts.tools && this.trigger('canvas:updateTools');
} }
/** /**
@ -810,8 +810,8 @@ export default class EditorModel extends Model {
const device = this.getDeviceModel(); const device = this.getDeviceModel();
const condition = config.mediaCondition; const condition = config.mediaCondition;
const preview = config.devicePreviewMode; const preview = config.devicePreviewMode;
const width = device && device.get("widthMedia"); const width = device && device.get('widthMedia');
return device && width && !preview ? `(${condition}: ${width})` : ""; return device && width && !preview ? `(${condition}: ${width})` : '';
} }
/** /**
@ -819,15 +819,15 @@ export default class EditorModel extends Model {
* @return {Component} * @return {Component}
*/ */
getWrapper() { getWrapper() {
return this.get("DomComponents").getWrapper(); return this.get('DomComponents').getWrapper();
} }
setCurrentFrame(frameView: FrameView) { setCurrentFrame(frameView: FrameView) {
return this.set("currentFrame", frameView); return this.set('currentFrame', frameView);
} }
getCurrentFrame(): FrameView { getCurrentFrame(): FrameView {
return this.get("currentFrame"); return this.get('currentFrame');
} }
getCurrentFrameModel() { getCurrentFrameModel() {
@ -836,7 +836,7 @@ export default class EditorModel extends Model {
getIcon(icon: string) { getIcon(icon: string) {
const icons = this.config.icons || {}; const icons = this.config.icons || {};
return icons[icon] || ""; return icons[icon] || '';
} }
/** /**
@ -849,23 +849,23 @@ export default class EditorModel extends Model {
} }
clearDirtyCount() { clearDirtyCount() {
return this.set("changesCount", 0); return this.set('changesCount', 0);
} }
getZoomDecimal() { getZoomDecimal() {
return this.get("Canvas").getZoomDecimal(); return this.get('Canvas').getZoomDecimal();
} }
getZoomMultiplier() { getZoomMultiplier() {
return this.get("Canvas").getZoomMultiplier(); return this.get('Canvas').getZoomMultiplier();
} }
setDragMode(value: string) { setDragMode(value: string) {
return this.set("dmode", value); return this.set('dmode', value);
} }
t(...args: any[]) { t(...args: any[]) {
const i18n = this.get("I18n"); const i18n = this.get('I18n');
return i18n?.t(...args); return i18n?.t(...args);
} }
@ -874,7 +874,7 @@ export default class EditorModel extends Model {
* @returns {Boolean} * @returns {Boolean}
*/ */
inAbsoluteMode() { inAbsoluteMode() {
return this.get("dmode") === "absolute"; return this.get('dmode') === 'absolute';
} }
/** /**
@ -884,7 +884,7 @@ export default class EditorModel extends Model {
const { config, view } = this; const { config, view } = this;
const editor = this.getEditor(); const editor = this.getEditor();
const { editors = [] } = config.grapesjs || {}; const { editors = [] } = config.grapesjs || {};
const shallow = this.get("shallow"); const shallow = this.get('shallow');
shallow?.destroyAll(); shallow?.destroyAll();
this.stopListening(); this.stopListening();
this.stopDefault(); this.stopDefault();
@ -905,22 +905,22 @@ export default class EditorModel extends Model {
} }
getEditing() { getEditing() {
const res = this.get("editing"); const res = this.get('editing');
return (res && res.model) || null; return (res && res.model) || null;
} }
setEditing(value: boolean) { setEditing(value: boolean) {
this.set("editing", value); this.set('editing', value);
return this; return this;
} }
isEditing() { isEditing() {
return !!this.get("editing"); return !!this.get('editing');
} }
log(msg: string, opts: any = {}) { log(msg: string, opts: any = {}) {
const { ns, level = "debug" } = opts; const { ns, level = 'debug' } = opts;
this.trigger("log", msg, opts); this.trigger('log', msg, opts);
level && this.trigger(`log:${level}`, msg, opts); level && this.trigger(`log:${level}`, msg, opts);
if (ns) { if (ns) {
@ -931,7 +931,7 @@ export default class EditorModel extends Model {
} }
logInfo(msg: string, opts?: any) { logInfo(msg: string, opts?: any) {
this.log(msg, { ...opts, level: "info" }); this.log(msg, { ...opts, level: 'info' });
} }
logWarning(msg: string, opts?: any) { logWarning(msg: string, opts?: any) {
@ -939,7 +939,7 @@ export default class EditorModel extends Model {
} }
logError(msg: string, opts?: any) { logError(msg: string, opts?: any) {
this.log(msg, { ...opts, level: "error" }); this.log(msg, { ...opts, level: 'error' });
} }
initBaseColorPicker(el: any, opts = {}) { initBaseColorPicker(el: any, opts = {}) {
@ -951,13 +951,13 @@ export default class EditorModel extends Model {
//@ts-ignore //@ts-ignore
return $(el).spectrum({ return $(el).spectrum({
containerClassName: `${ppfx}one-bg ${ppfx}two-color`, containerClassName: `${ppfx}one-bg ${ppfx}two-color`,
appendTo: elToAppend || "body", appendTo: elToAppend || 'body',
maxSelectionSize: 8, maxSelectionSize: 8,
showPalette: true, showPalette: true,
palette: [], palette: [],
showAlpha: true, showAlpha: true,
chooseText: "Ok", chooseText: 'Ok',
cancelText: "⨯", cancelText: '⨯',
...opts, ...opts,
...colorPicker, ...colorPicker,
}); });
@ -970,7 +970,7 @@ export default class EditorModel extends Model {
*/ */
skip(clb: Function) { skip(clb: Function) {
this.__skip = true; this.__skip = true;
const um = this.get("UndoManager"); const um = this.get('UndoManager');
um ? um.skip(clb) : clb(); um ? um.skip(clb) : clb();
this.__skip = false; this.__skip = false;
} }
@ -984,7 +984,7 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
data(el: any, name: string, value: any) { data(el: any, name: string, value: any) {
const varName = "_gjs-data"; const varName = '_gjs-data';
if (!el[varName]) { if (!el[varName]) {
el[varName] = {}; el[varName] = {};

44
src/pages/index.ts
View File

@ -44,15 +44,15 @@
* @module Pages * @module Pages
*/ */
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 "../abstract"; import { Model, Module } from '../abstract';
import { ItemManagerModule, ModuleConfig } from "../abstract/Module"; import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
import Pages from "./model/Pages"; import Pages from './model/Pages';
import Page from "./model/Page"; import Page from './model/Page';
import EditorModel from "../editor/model/Editor"; import EditorModel from '../editor/model/Editor';
export const evAll = "page"; export const evAll = 'page';
export const evPfx = `${evAll}:`; export const evPfx = `${evAll}:`;
export const evPageSelect = `${evPfx}select`; export const evPageSelect = `${evPfx}select`;
export const evPageSelectBefore = `${evPageSelect}:before`; export const evPageSelectBefore = `${evPageSelect}:before`;
@ -61,8 +61,8 @@ export const evPageAdd = `${evPfx}add`;
export const evPageAddBefore = `${evPageAdd}:before`; export const evPageAddBefore = `${evPageAdd}:before`;
export const evPageRemove = `${evPfx}remove`; export const evPageRemove = `${evPfx}remove`;
export const evPageRemoveBefore = `${evPageRemove}:before`; export const evPageRemoveBefore = `${evPageRemove}:before`;
const chnSel = "change:selected"; const chnSel = 'change:selected';
const typeMain = "main"; const typeMain = 'main';
const events = { const events = {
all: evAll, all: evAll,
select: evPageSelect, select: evPageSelect,
@ -78,7 +78,7 @@ interface Config extends ModuleConfig {
pages?: string[]; pages?: string[];
} }
export default class PageManager extends ItemManagerModule<Config, Pages> { export default class PageManager extends ItemManagerModule<Config, Pages> {
storageKey = "pages"; storageKey = 'pages';
get pages() { get pages() {
return this.all; return this.all;
@ -91,12 +91,12 @@ export default class PageManager extends ItemManagerModule<Config, Pages> {
* @private * @private
*/ */
constructor(em: EditorModel) { constructor(em: EditorModel) {
super(em, "PageManager", new Pages([]), events); super(em, 'PageManager', new Pages([]), events);
bindAll(this, "_onPageChange"); bindAll(this, '_onPageChange');
const model = new Model({ _undo: true } as any); const model = new Model({ _undo: true } as any);
this.model = model; this.model = model;
this.pages.on("reset", (coll) => coll.at(0) && this.select(coll.at(0))); this.pages.on('reset', (coll) => coll.at(0) && this.select(coll.at(0)));
this.pages.on("all", this.__onChange, this); this.pages.on('all', this.__onChange, this);
model.on(chnSel, this._onPageChange); model.on(chnSel, this._onPageChange);
return this; return this;
@ -124,16 +124,16 @@ export default class PageManager extends ItemManagerModule<Config, Pages> {
_onPageChange(m: any, page: Page, opts: any) { _onPageChange(m: any, page: Page, opts: any) {
const { em } = this; const { em } = this;
const lm = em.get("LayerManager"); const lm = em.get('LayerManager');
const mainComp = page.getMainComponent(); const mainComp = page.getMainComponent();
lm && mainComp && lm.setRoot(mainComp); lm && mainComp && lm.setRoot(mainComp);
em.trigger(evPageSelect, page, m.previous("selected")); em.trigger(evPageSelect, page, m.previous('selected'));
this.__onChange(chnSel, page, opts); this.__onChange(chnSel, page, opts);
} }
postLoad() { postLoad() {
const { em, model } = this; const { em, model } = this;
const um = em.get("UndoManager"); const um = em.get('UndoManager');
um && um.add(model); um && um.add(model);
um && um.add(this.pages); um && um.add(this.pages);
} }
@ -208,7 +208,7 @@ export default class PageManager extends ItemManagerModule<Config, Pages> {
*/ */
getMain() { getMain() {
const { pages } = this; const { pages } = this;
return pages.filter((p) => p.get("type") === typeMain)[0] || pages.at(0); return pages.filter((p) => p.get('type') === typeMain)[0] || pages.at(0);
} }
/** /**
@ -244,7 +244,7 @@ export default class PageManager extends ItemManagerModule<Config, Pages> {
const pg = isString(page) ? this.get(page) : page; const pg = isString(page) ? this.get(page) : page;
if (pg) { if (pg) {
this.em.trigger(evPageSelectBefore, pg, opts); this.em.trigger(evPageSelectBefore, pg, opts);
this.model.set("selected", pg, opts); this.model.set('selected', pg, opts);
} }
return this; return this;
} }
@ -256,7 +256,7 @@ export default class PageManager extends ItemManagerModule<Config, Pages> {
* const selectedPage = pageManager.getSelected(); * const selectedPage = pageManager.getSelected();
*/ */
getSelected() { getSelected() {
return this.model.get("selected"); return this.model.get('selected');
} }
destroy() { destroy() {
@ -264,7 +264,7 @@ export default class PageManager extends ItemManagerModule<Config, Pages> {
this.model.stopListening(); this.model.stopListening();
this.model.clear({ silent: true }); this.model.clear({ silent: true });
//@ts-ignore //@ts-ignore
["selected", "model"].map((i) => (this[i] = 0)); ['selected', 'model'].map((i) => (this[i] = 0));
} }
store() { store() {

22
src/pages/model/Page.ts
View File

@ -1,8 +1,8 @@
import { result, forEach } from "underscore"; import { result, forEach } from 'underscore';
import { Model } from "../../common"; import { Model } from '../../common';
import Frames from "../../canvas/model/Frames"; import Frames from '../../canvas/model/Frames';
import Frame from "../../canvas/model/Frame"; import Frame from '../../canvas/model/Frame';
import EditorModel from "../../editor/model/Editor"; import EditorModel from '../../editor/model/Editor';
export default class Page extends Model { export default class Page extends Model {
defaults() { defaults() {
@ -22,7 +22,7 @@ export default class Page extends Model {
if (!props.frames) { if (!props.frames) {
defFrame.component = props.component; defFrame.component = props.component;
defFrame.styles = props.styles; defFrame.styles = props.styles;
["component", "styles"].map((i) => this.unset(i)); ['component', 'styles'].map((i) => this.unset(i));
} }
const frms: any[] = props.frames || [defFrame]; const frms: any[] = props.frames || [defFrame];
const frames = new Frames( const frames = new Frames(
@ -37,11 +37,11 @@ export default class Page extends Model {
} }
onRemove() { onRemove() {
this.get("frames").reset(); this.get('frames').reset();
} }
getFrames(): Frames { getFrames(): Frames {
return this.get("frames"); return this.get('frames');
} }
/** /**
@ -57,7 +57,7 @@ export default class Page extends Model {
* @returns {String} * @returns {String}
*/ */
getName(): string { getName(): string {
return this.get("name"); return this.get('name');
} }
/** /**
@ -106,11 +106,11 @@ export default class Page extends Model {
toJSON(opts = {}) { toJSON(opts = {}) {
const obj = Model.prototype.toJSON.call(this, opts); const obj = Model.prototype.toJSON.call(this, opts);
const defaults = result(this, "defaults"); const defaults = result(this, 'defaults');
// Remove private keys // Remove private keys
forEach(obj, (value, key) => { forEach(obj, (value, key) => {
key.indexOf("_") === 0 && delete obj[key]; key.indexOf('_') === 0 && delete obj[key];
}); });
forEach(defaults, (value, key) => { forEach(defaults, (value, key) => {

8
src/pages/model/Pages.ts
View File

@ -1,11 +1,11 @@
import { Collection } from "../../common"; import { Collection } from '../../common';
import Page from "./Page"; import Page from './Page';
export default class Pages extends Collection<Page> { export default class Pages extends Collection<Page> {
constructor(models: any) { constructor(models: any) {
super(models); super(models);
this.on("reset", this.onReset); this.on('reset', this.onReset);
this.on("remove", this.onRemove); this.on('remove', this.onRemove);
} }
onReset(m: Page, opts?: { previousModels?: Pages }) { onReset(m: Page, opts?: { previousModels?: Pages }) {

Write Preview
Loading…
Cancel
Save