|
|
|
@ -1,48 +1,41 @@ |
|
|
|
import { |
|
|
|
isUndefined, |
|
|
|
isArray, |
|
|
|
contains, |
|
|
|
toArray, |
|
|
|
keys, |
|
|
|
bindAll, |
|
|
|
} from "underscore"; |
|
|
|
import Backbone from "backbone"; |
|
|
|
import $ from "../../utils/cash-dom"; |
|
|
|
import Extender from "../../utils/extender"; |
|
|
|
import { getModel, hasWin, isEmptyObj } from "../../utils/mixins"; |
|
|
|
import { Model } from "../../common"; |
|
|
|
import Selected from "./Selected"; |
|
|
|
import FrameView from "../../canvas/view/FrameView"; |
|
|
|
import EditorModule from ".."; |
|
|
|
import EditorView from "../view/EditorView"; |
|
|
|
import { IModule } from "../../abstract/Module"; |
|
|
|
import { isUndefined, isArray, contains, toArray, keys, bindAll } from 'underscore'; |
|
|
|
import Backbone from 'backbone'; |
|
|
|
import $ from '../../utils/cash-dom'; |
|
|
|
import Extender from '../../utils/extender'; |
|
|
|
import { getModel, hasWin, isEmptyObj } from '../../utils/mixins'; |
|
|
|
import { Model } from '../../common'; |
|
|
|
import Selected from './Selected'; |
|
|
|
import FrameView from '../../canvas/view/FrameView'; |
|
|
|
import EditorModule from '..'; |
|
|
|
import EditorView from '../view/EditorView'; |
|
|
|
import { IModule } from '../../abstract/Module'; |
|
|
|
|
|
|
|
//@ts-ignore
|
|
|
|
Backbone.$ = $; |
|
|
|
|
|
|
|
const deps = [ |
|
|
|
require("utils"), |
|
|
|
require("i18n"), |
|
|
|
require("keymaps"), |
|
|
|
require("undo_manager"), |
|
|
|
require("storage_manager"), |
|
|
|
require("device_manager"), |
|
|
|
require("parser"), |
|
|
|
require("style_manager"), |
|
|
|
require("selector_manager"), |
|
|
|
require("modal_dialog"), |
|
|
|
require("code_manager"), |
|
|
|
require("panels"), |
|
|
|
require("rich_text_editor"), |
|
|
|
require("asset_manager"), |
|
|
|
require("css_composer"), |
|
|
|
require("pages"), |
|
|
|
require("trait_manager"), |
|
|
|
require("dom_components"), |
|
|
|
require("navigator"), |
|
|
|
require("canvas"), |
|
|
|
require("commands"), |
|
|
|
require("block_manager"), |
|
|
|
require('utils'), |
|
|
|
require('i18n'), |
|
|
|
require('keymaps'), |
|
|
|
require('undo_manager'), |
|
|
|
require('storage_manager'), |
|
|
|
require('device_manager'), |
|
|
|
require('parser'), |
|
|
|
require('style_manager'), |
|
|
|
require('selector_manager'), |
|
|
|
require('modal_dialog'), |
|
|
|
require('code_manager'), |
|
|
|
require('panels'), |
|
|
|
require('rich_text_editor'), |
|
|
|
require('asset_manager'), |
|
|
|
require('css_composer'), |
|
|
|
require('pages'), |
|
|
|
require('trait_manager'), |
|
|
|
require('dom_components'), |
|
|
|
require('navigator'), |
|
|
|
require('canvas'), |
|
|
|
require('commands'), |
|
|
|
require('block_manager'), |
|
|
|
]; |
|
|
|
|
|
|
|
const ts_deps: any[] = []; |
|
|
|
@ -74,7 +67,7 @@ export default class EditorModel extends Model { |
|
|
|
modules: [], |
|
|
|
toLoad: [], |
|
|
|
opened: {}, |
|
|
|
device: "", |
|
|
|
device: '', |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
@ -88,30 +81,33 @@ export default class EditorModel extends Model { |
|
|
|
view?: EditorView; |
|
|
|
|
|
|
|
get storables(): any[] { |
|
|
|
return this.get("storables"); |
|
|
|
return this.get('storables'); |
|
|
|
} |
|
|
|
|
|
|
|
get modules(): IModule[] { |
|
|
|
return this.get("modules"); |
|
|
|
return this.get('modules'); |
|
|
|
} |
|
|
|
|
|
|
|
get toLoad(): any[] { |
|
|
|
return this.get("toLoad"); |
|
|
|
return this.get('toLoad'); |
|
|
|
} |
|
|
|
get selected(): Selected { |
|
|
|
return this.get('selected'); |
|
|
|
} |
|
|
|
|
|
|
|
constructor(conf = {}) { |
|
|
|
super(); |
|
|
|
this._config = conf; |
|
|
|
const { config } = this; |
|
|
|
this.set("Config", conf); |
|
|
|
this.set("modules", []); |
|
|
|
this.set("toLoad", []); |
|
|
|
this.set("storables", []); |
|
|
|
this.set("selected", new Selected()); |
|
|
|
this.set("dmode", config.dragMode); |
|
|
|
this.set('Config', conf); |
|
|
|
this.set('modules', []); |
|
|
|
this.set('toLoad', []); |
|
|
|
this.set('storables', []); |
|
|
|
this.set('selected', new Selected()); |
|
|
|
this.set('dmode', config.dragMode); |
|
|
|
const { el, log } = config; |
|
|
|
const toLog = log === true ? keys(logs) : isArray(log) ? log : []; |
|
|
|
bindAll(this, "initBaseColorPicker"); |
|
|
|
bindAll(this, 'initBaseColorPicker'); |
|
|
|
|
|
|
|
if (el && config.fromElement) { |
|
|
|
config.components = el.innerHTML; |
|
|
|
@ -122,7 +118,7 @@ export default class EditorModel extends Model { |
|
|
|
res[next.nodeName] = next.nodeValue; |
|
|
|
return res; |
|
|
|
}, {}) |
|
|
|
: ""; |
|
|
|
: ''; |
|
|
|
|
|
|
|
// Move components to pages
|
|
|
|
if (config.components && !config.pageManager) { |
|
|
|
@ -130,35 +126,27 @@ export default class EditorModel extends Model { |
|
|
|
} |
|
|
|
|
|
|
|
// Load modules
|
|
|
|
deps.forEach((name) => this.loadModule(name)); |
|
|
|
ts_deps.forEach((name) => this.tsLoadModule(name)); |
|
|
|
this.on("change:componentHovered", this.componentHovered, this); |
|
|
|
this.on("change:changesCount", this.updateChanges, this); |
|
|
|
this.on("change:readyLoad change:readyCanvas", this._checkReady, this); |
|
|
|
toLog.forEach((e) => this.listenLog(e)); |
|
|
|
deps.forEach(name => this.loadModule(name)); |
|
|
|
ts_deps.forEach(name => this.tsLoadModule(name)); |
|
|
|
this.on('change:componentHovered', this.componentHovered, this); |
|
|
|
this.on('change:changesCount', this.updateChanges, this); |
|
|
|
this.on('change:readyLoad change:readyCanvas', this._checkReady, this); |
|
|
|
toLog.forEach(e => this.listenLog(e)); |
|
|
|
|
|
|
|
// Deprecations
|
|
|
|
[{ from: "change:selectedComponent", to: "component:toggled" }].forEach( |
|
|
|
(event) => { |
|
|
|
const eventFrom = event.from; |
|
|
|
const eventTo = event.to; |
|
|
|
this.listenTo(this, eventFrom, (...args) => { |
|
|
|
this.trigger(eventTo, ...args); |
|
|
|
this.logWarning( |
|
|
|
`The event '${eventFrom}' is deprecated, replace it with '${eventTo}'` |
|
|
|
); |
|
|
|
}); |
|
|
|
} |
|
|
|
); |
|
|
|
[{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(event => { |
|
|
|
const eventFrom = event.from; |
|
|
|
const eventTo = event.to; |
|
|
|
this.listenTo(this, eventFrom, (...args) => { |
|
|
|
this.trigger(eventTo, ...args); |
|
|
|
this.logWarning(`The event '${eventFrom}' is deprecated, replace it with '${eventTo}'`); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
_checkReady() { |
|
|
|
if ( |
|
|
|
this.get("readyLoad") && |
|
|
|
this.get("readyCanvas") && |
|
|
|
!this.get("ready") |
|
|
|
) { |
|
|
|
this.set("ready", true); |
|
|
|
if (this.get('readyLoad') && this.get('readyCanvas') && !this.get('ready')) { |
|
|
|
this.set('ready', true); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -192,15 +180,15 @@ export default class EditorModel extends Model { |
|
|
|
*/ |
|
|
|
loadOnStart() { |
|
|
|
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.
|
|
|
|
this.toLoad.forEach((mdl) => mdl.onLoad()); |
|
|
|
this.toLoad.forEach(mdl => mdl.onLoad()); |
|
|
|
|
|
|
|
// Stuff to do post load
|
|
|
|
const postLoad = () => { |
|
|
|
this.modules.forEach((mdl) => mdl.postLoad && mdl.postLoad(this)); |
|
|
|
this.set("readyLoad", 1); |
|
|
|
this.modules.forEach(mdl => mdl.postLoad && mdl.postLoad(this)); |
|
|
|
this.set('readyLoad', 1); |
|
|
|
}; |
|
|
|
|
|
|
|
if (headless) { |
|
|
|
@ -230,8 +218,8 @@ export default class EditorModel extends Model { |
|
|
|
undoManager: false, |
|
|
|
}); |
|
|
|
// We only need to load a few modules
|
|
|
|
["PageManager", "Canvas"].forEach((key) => shallow.get(key).onLoad()); |
|
|
|
this.set("shallow", shallow); |
|
|
|
['PageManager', 'Canvas'].forEach(key => shallow.get(key).onLoad()); |
|
|
|
this.set('shallow', shallow); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -240,18 +228,18 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
updateChanges() { |
|
|
|
const stm = this.get("StorageManager"); |
|
|
|
const stm = this.get('StorageManager'); |
|
|
|
const changes = this.getDirtyCount(); |
|
|
|
this.updateItr && clearTimeout(this.updateItr); |
|
|
|
//@ts-ignore
|
|
|
|
this.updateItr = setTimeout(() => this.trigger("update")); |
|
|
|
this.updateItr = setTimeout(() => this.trigger('update')); |
|
|
|
|
|
|
|
if (this.config.noticeOnUnload) { |
|
|
|
window.onbeforeunload = changes ? () => true : null; |
|
|
|
} |
|
|
|
|
|
|
|
if (stm.isAutosave() && changes >= stm.getStepsBeforeSave()) { |
|
|
|
this.store().catch((err) => this.logError(err)); |
|
|
|
this.store().catch(err => this.logError(err)); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -266,11 +254,9 @@ export default class EditorModel extends Model { |
|
|
|
const Module = moduleName.default || moduleName; |
|
|
|
const Mod = new Module(); |
|
|
|
const name = Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1); |
|
|
|
const cfgParent = !isUndefined(config[name]) |
|
|
|
? config[name] |
|
|
|
: config[Mod.name]; |
|
|
|
const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name]; |
|
|
|
const cfg = cfgParent === true ? {} : cfgParent || {}; |
|
|
|
cfg.pStylePrefix = config.pStylePrefix || ""; |
|
|
|
cfg.pStylePrefix = config.pStylePrefix || ''; |
|
|
|
|
|
|
|
if (!isUndefined(cfgParent) && !cfgParent) { |
|
|
|
cfg._disable = 1; |
|
|
|
@ -321,11 +307,11 @@ export default class EditorModel extends Model { |
|
|
|
this.initialize(opts); |
|
|
|
this.destroyed = false; |
|
|
|
} |
|
|
|
this.set("Editor", editor); |
|
|
|
this.set('Editor', editor); |
|
|
|
} |
|
|
|
|
|
|
|
getEditor() { |
|
|
|
return this.get("Editor"); |
|
|
|
return this.get('Editor'); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -338,13 +324,7 @@ export default class EditorModel extends Model { |
|
|
|
* */ |
|
|
|
handleUpdates(model: any, val: any, opt: any = {}) { |
|
|
|
// Component has been added temporarily - do not update storage or record changes
|
|
|
|
if ( |
|
|
|
this.__skip || |
|
|
|
opt.temporary || |
|
|
|
opt.noCount || |
|
|
|
opt.avoidStore || |
|
|
|
!this.get("ready") |
|
|
|
) { |
|
|
|
if (this.__skip || opt.temporary || opt.noCount || opt.avoidStore || !this.get('ready')) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
@ -353,7 +333,7 @@ export default class EditorModel extends Model { |
|
|
|
this.timedInterval = setTimeout(() => { |
|
|
|
const curr = this.getDirtyCount() || 0; |
|
|
|
const { unset, ...opts } = opt; |
|
|
|
this.set("changesCount", curr + 1, opts); |
|
|
|
this.set('changesCount', curr + 1, opts); |
|
|
|
}, 0); |
|
|
|
} |
|
|
|
|
|
|
|
@ -369,9 +349,9 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
* */ |
|
|
|
componentHovered(editor: any, component: any, options: any) { |
|
|
|
const prev = this.previous("componentHovered"); |
|
|
|
prev && this.trigger("component:unhovered", prev, options); |
|
|
|
component && this.trigger("component:hovered", component, options); |
|
|
|
const prev = this.previous('componentHovered'); |
|
|
|
prev && this.trigger('component:unhovered', prev, options); |
|
|
|
component && this.trigger('component:hovered', component, options); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -380,7 +360,7 @@ export default class EditorModel extends Model { |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
getSelected() { |
|
|
|
return this.get("selected").lastComponent(); |
|
|
|
return this.selected.lastComponent(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -388,8 +368,8 @@ export default class EditorModel extends Model { |
|
|
|
* @return {Array} |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
getSelectedAll(): any[] { |
|
|
|
return this.get("selected").allComponents(); |
|
|
|
getSelectedAll() { |
|
|
|
return this.selected.allComponents(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -402,7 +382,7 @@ export default class EditorModel extends Model { |
|
|
|
const { event } = opts; |
|
|
|
const ctrlKey = event && (event.ctrlKey || event.metaKey); |
|
|
|
const { shiftKey } = event || {}; |
|
|
|
const els = (isArray(el) ? el : [el]).map((el) => getModel(el, $)); |
|
|
|
const els = (isArray(el) ? el : [el]).map(el => getModel(el, $)); |
|
|
|
const selected = this.getSelectedAll(); |
|
|
|
const mltSel = this.getConfig().multipleSelection; |
|
|
|
let added; |
|
|
|
@ -410,20 +390,19 @@ export default class EditorModel extends Model { |
|
|
|
// If an array is passed remove all selected
|
|
|
|
// expect those yet to be selected
|
|
|
|
const multiple = isArray(el); |
|
|
|
multiple && this.removeSelected(selected.filter((s) => !contains(els, s))); |
|
|
|
multiple && this.removeSelected(selected.filter(s => !contains(els, s))); |
|
|
|
|
|
|
|
els.forEach((el) => { |
|
|
|
els.forEach(el => { |
|
|
|
let model = getModel(el, undefined); |
|
|
|
|
|
|
|
if (model) { |
|
|
|
this.trigger("component:select:before", model, opts); |
|
|
|
this.trigger('component:select:before', model, opts); |
|
|
|
|
|
|
|
// Check for valid selectable
|
|
|
|
if (!model.get("selectable") || opts.abort) { |
|
|
|
if (!model.get('selectable') || opts.abort) { |
|
|
|
if (opts.useValid) { |
|
|
|
let parent = model.parent(); |
|
|
|
while (parent && !parent.get("selectable")) |
|
|
|
parent = parent.parent(); |
|
|
|
while (parent && !parent.get('selectable')) parent = parent.parent(); |
|
|
|
model = parent; |
|
|
|
} else { |
|
|
|
return; |
|
|
|
@ -435,13 +414,13 @@ export default class EditorModel extends Model { |
|
|
|
if (ctrlKey && mltSel) { |
|
|
|
return this.toggleSelected(model); |
|
|
|
} else if (shiftKey && mltSel) { |
|
|
|
this.clearSelection(this.get("Canvas").getWindow()); |
|
|
|
this.clearSelection(this.get('Canvas').getWindow()); |
|
|
|
const coll = model.collection; |
|
|
|
const index = model.index(); |
|
|
|
let min: number | undefined, max: number | undefined; |
|
|
|
|
|
|
|
// Fin min and max siblings
|
|
|
|
this.getSelectedAll().forEach((sel) => { |
|
|
|
this.getSelectedAll().forEach(sel => { |
|
|
|
const selColl = sel.collection; |
|
|
|
const selIndex = sel.index(); |
|
|
|
if (selColl === coll) { |
|
|
|
@ -472,7 +451,7 @@ export default class EditorModel extends Model { |
|
|
|
return this.addSelected(model); |
|
|
|
} |
|
|
|
|
|
|
|
!multiple && this.removeSelected(selected.filter((s) => s !== model)); |
|
|
|
!multiple && this.removeSelected(selected.filter(s => s !== model)); |
|
|
|
this.addSelected(model, opts); |
|
|
|
added = model; |
|
|
|
}); |
|
|
|
@ -488,12 +467,12 @@ export default class EditorModel extends Model { |
|
|
|
const model = getModel(el, $); |
|
|
|
const models = isArray(model) ? model : [model]; |
|
|
|
|
|
|
|
models.forEach((model) => { |
|
|
|
if (model && !model.get("selectable")) return; |
|
|
|
const selected = this.get("selected"); |
|
|
|
models.forEach(model => { |
|
|
|
if (model && !model.get('selectable')) return; |
|
|
|
const { selected } = this; |
|
|
|
opts.forceChange && this.removeSelected(model, opts); |
|
|
|
selected.addComponent(model, opts); |
|
|
|
model && this.trigger("component:select", model, opts); |
|
|
|
model && this.trigger('component:select', model, opts); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
@ -504,7 +483,7 @@ export default class EditorModel extends Model { |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
removeSelected(el: any, opts = {}) { |
|
|
|
this.get("selected").removeComponent(getModel(el, $), opts); |
|
|
|
this.selected.removeComponent(getModel(el, $), opts); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -517,8 +496,8 @@ export default class EditorModel extends Model { |
|
|
|
const model = getModel(el, $); |
|
|
|
const models = isArray(model) ? model : [model]; |
|
|
|
|
|
|
|
models.forEach((model) => { |
|
|
|
if (this.get("selected").hasComponent(model)) { |
|
|
|
models.forEach(model => { |
|
|
|
if (this.selected.hasComponent(model)) { |
|
|
|
this.removeSelected(model, opts); |
|
|
|
} else { |
|
|
|
this.addSelected(model, opts); |
|
|
|
@ -533,21 +512,21 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
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); |
|
|
|
|
|
|
|
if (!model) return; |
|
|
|
|
|
|
|
opts.forceChange && this.set("componentHovered", ""); |
|
|
|
opts.forceChange && this.set('componentHovered', ''); |
|
|
|
this.trigger(`${ev}:before`, model, opts); |
|
|
|
|
|
|
|
// Check for valid hoverable
|
|
|
|
if (!model.get("hoverable")) { |
|
|
|
if (!model.get('hoverable')) { |
|
|
|
if (opts.useValid && !opts.abort) { |
|
|
|
let parent = model && model.parent(); |
|
|
|
while (parent && !parent.get("hoverable")) parent = parent.parent(); |
|
|
|
while (parent && !parent.get('hoverable')) parent = parent.parent(); |
|
|
|
model = parent; |
|
|
|
} else { |
|
|
|
return; |
|
|
|
@ -555,13 +534,13 @@ export default class EditorModel extends Model { |
|
|
|
} |
|
|
|
|
|
|
|
if (!opts.abort) { |
|
|
|
this.set("componentHovered", model, opts); |
|
|
|
this.set('componentHovered', model, opts); |
|
|
|
this.trigger(ev, model, opts); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
getHovered() { |
|
|
|
return this.get("componentHovered"); |
|
|
|
return this.get('componentHovered'); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -572,7 +551,7 @@ export default class EditorModel extends Model { |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
setComponents(components: any, opt = {}) { |
|
|
|
return this.get("DomComponents").setComponents(components, opt); |
|
|
|
return this.get('DomComponents').setComponents(components, opt); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -581,13 +560,13 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
getComponents() { |
|
|
|
var cmp = this.get("DomComponents"); |
|
|
|
var cm = this.get("CodeManager"); |
|
|
|
var cmp = this.get('DomComponents'); |
|
|
|
var cm = this.get('CodeManager'); |
|
|
|
|
|
|
|
if (!cmp || !cm) return; |
|
|
|
|
|
|
|
var wrp = cmp.getComponents(); |
|
|
|
return cm.getCode(wrp, "json"); |
|
|
|
return cm.getCode(wrp, 'json'); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -598,7 +577,7 @@ export default class EditorModel extends Model { |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
setStyle(style: any, opt = {}) { |
|
|
|
const cssc = this.get("CssComposer"); |
|
|
|
const cssc = this.get('CssComposer'); |
|
|
|
cssc.clear(opt); |
|
|
|
cssc.getAll().add(style, opt); |
|
|
|
return this; |
|
|
|
@ -621,7 +600,7 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
getStyle() { |
|
|
|
return this.get("CssComposer").getAll(); |
|
|
|
return this.get('CssComposer').getAll(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -630,7 +609,7 @@ export default class EditorModel extends Model { |
|
|
|
* @returns {this} |
|
|
|
*/ |
|
|
|
setState(value: string) { |
|
|
|
this.set("state", value); |
|
|
|
this.set('state', value); |
|
|
|
return this; |
|
|
|
} |
|
|
|
|
|
|
|
@ -639,7 +618,7 @@ export default class EditorModel extends Model { |
|
|
|
* @returns {String} |
|
|
|
*/ |
|
|
|
getState() { |
|
|
|
return this.get("state") || ""; |
|
|
|
return this.get('state') || ''; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -651,15 +630,15 @@ export default class EditorModel extends Model { |
|
|
|
getHtml(opts: any = {}) { |
|
|
|
const { config } = this; |
|
|
|
const { optsHtml } = config; |
|
|
|
const js = config.jsInHtml ? this.getJs(opts) : ""; |
|
|
|
const cmp = opts.component || this.get("DomComponents").getComponent(); |
|
|
|
const js = config.jsInHtml ? this.getJs(opts) : ''; |
|
|
|
const cmp = opts.component || this.get('DomComponents').getComponent(); |
|
|
|
let html = cmp |
|
|
|
? this.get("CodeManager").getCode(cmp, "html", { |
|
|
|
? this.get('CodeManager').getCode(cmp, 'html', { |
|
|
|
...optsHtml, |
|
|
|
...opts, |
|
|
|
}) |
|
|
|
: ""; |
|
|
|
html += js ? `<script>${js}</script>` : ""; |
|
|
|
: ''; |
|
|
|
html += js ? `<script>${js}</script>` : ''; |
|
|
|
return html; |
|
|
|
} |
|
|
|
|
|
|
|
@ -673,21 +652,19 @@ export default class EditorModel extends Model { |
|
|
|
const config = this.config; |
|
|
|
const { optsCss } = config; |
|
|
|
const avoidProt = opts.avoidProtected; |
|
|
|
const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) |
|
|
|
? opts.keepUnusedStyles |
|
|
|
: config.keepUnusedStyles; |
|
|
|
const cssc = this.get("CssComposer"); |
|
|
|
const wrp = opts.component || this.get("DomComponents").getComponent(); |
|
|
|
const protCss = !avoidProt ? config.protectedCss : ""; |
|
|
|
const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles; |
|
|
|
const cssc = this.get('CssComposer'); |
|
|
|
const wrp = opts.component || this.get('DomComponents').getComponent(); |
|
|
|
const protCss = !avoidProt ? config.protectedCss : ''; |
|
|
|
const css = |
|
|
|
wrp && |
|
|
|
this.get("CodeManager").getCode(wrp, "css", { |
|
|
|
this.get('CodeManager').getCode(wrp, 'css', { |
|
|
|
cssc, |
|
|
|
keepUnusedStyles, |
|
|
|
...optsCss, |
|
|
|
...opts, |
|
|
|
}); |
|
|
|
return wrp ? (opts.json ? css : protCss + css) : ""; |
|
|
|
return wrp ? (opts.json ? css : protCss + css) : ''; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -696,8 +673,8 @@ export default class EditorModel extends Model { |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
getJs(opts: any = {}) { |
|
|
|
var wrp = opts.component || this.get("DomComponents").getWrapper(); |
|
|
|
return wrp ? this.get("CodeManager").getCode(wrp, "js").trim() : ""; |
|
|
|
var wrp = opts.component || this.get('DomComponents').getWrapper(); |
|
|
|
return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : ''; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -706,7 +683,7 @@ export default class EditorModel extends Model { |
|
|
|
*/ |
|
|
|
async store(options?: any) { |
|
|
|
const data = this.storeData(); |
|
|
|
await this.get("StorageManager").store(data, options); |
|
|
|
await this.get('StorageManager').store(data, options); |
|
|
|
this.clearDirtyCount(); |
|
|
|
return data; |
|
|
|
} |
|
|
|
@ -716,7 +693,7 @@ export default class EditorModel extends Model { |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
async load(options?: any) { |
|
|
|
const result = await this.get("StorageManager").load(options); |
|
|
|
const result = await this.get('StorageManager').load(options); |
|
|
|
this.loadData(result); |
|
|
|
return result; |
|
|
|
} |
|
|
|
@ -725,9 +702,9 @@ export default class EditorModel extends Model { |
|
|
|
let result = {}; |
|
|
|
// Sync content if there is an active RTE
|
|
|
|
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) }; |
|
|
|
}); |
|
|
|
return JSON.parse(JSON.stringify(result)); |
|
|
|
@ -735,8 +712,8 @@ export default class EditorModel extends Model { |
|
|
|
|
|
|
|
loadData(data = {}) { |
|
|
|
if (!isEmptyObj(data)) { |
|
|
|
this.storables.forEach((module) => module.clear()); |
|
|
|
this.storables.forEach((module) => module.load(data)); |
|
|
|
this.storables.forEach(module => module.clear()); |
|
|
|
this.storables.forEach(module => module.load(data)); |
|
|
|
} |
|
|
|
return data; |
|
|
|
} |
|
|
|
@ -747,8 +724,8 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
getDeviceModel() { |
|
|
|
var name = this.get("device"); |
|
|
|
return this.get("DeviceManager").get(name); |
|
|
|
var name = this.get('device'); |
|
|
|
return this.get('DeviceManager').get(name); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -757,7 +734,7 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
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; |
|
|
|
command.stop(this, this, opts); |
|
|
|
command.run(this, this, opts); |
|
|
|
@ -770,7 +747,7 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
stopDefault(opts = {}) { |
|
|
|
const commands = this.get("Commands"); |
|
|
|
const commands = this.get('Commands'); |
|
|
|
const command = commands.get(this.config.defaultCommand); |
|
|
|
if (!command || !this.defaultRunning) return; |
|
|
|
command.stop(this, this, opts); |
|
|
|
@ -782,9 +759,9 @@ export default class EditorModel extends Model { |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
refreshCanvas(opts: any = {}) { |
|
|
|
this.set("canvasOffset", null); |
|
|
|
this.set("canvasOffset", this.get("Canvas").getOffset()); |
|
|
|
opts.tools && this.trigger("canvas:updateTools"); |
|
|
|
this.set('canvasOffset', null); |
|
|
|
this.set('canvasOffset', this.get('Canvas').getOffset()); |
|
|
|
opts.tools && this.trigger('canvas:updateTools'); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -807,8 +784,8 @@ export default class EditorModel extends Model { |
|
|
|
const device = this.getDeviceModel(); |
|
|
|
const condition = config.mediaCondition; |
|
|
|
const preview = config.devicePreviewMode; |
|
|
|
const width = device && device.get("widthMedia"); |
|
|
|
return device && width && !preview ? `(${condition}: ${width})` : ""; |
|
|
|
const width = device && device.get('widthMedia'); |
|
|
|
return device && width && !preview ? `(${condition}: ${width})` : ''; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -816,15 +793,15 @@ export default class EditorModel extends Model { |
|
|
|
* @return {Component} |
|
|
|
*/ |
|
|
|
getWrapper() { |
|
|
|
return this.get("DomComponents").getWrapper(); |
|
|
|
return this.get('DomComponents').getWrapper(); |
|
|
|
} |
|
|
|
|
|
|
|
setCurrentFrame(frameView: FrameView) { |
|
|
|
return this.set("currentFrame", frameView); |
|
|
|
return this.set('currentFrame', frameView); |
|
|
|
} |
|
|
|
|
|
|
|
getCurrentFrame(): FrameView { |
|
|
|
return this.get("currentFrame"); |
|
|
|
return this.get('currentFrame'); |
|
|
|
} |
|
|
|
|
|
|
|
getCurrentFrameModel() { |
|
|
|
@ -833,7 +810,7 @@ export default class EditorModel extends Model { |
|
|
|
|
|
|
|
getIcon(icon: string) { |
|
|
|
const icons = this.config.icons || {}; |
|
|
|
return icons[icon] || ""; |
|
|
|
return icons[icon] || ''; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -842,27 +819,27 @@ export default class EditorModel extends Model { |
|
|
|
* @return {number} |
|
|
|
*/ |
|
|
|
getDirtyCount(): number { |
|
|
|
return this.get("changesCount"); |
|
|
|
return this.get('changesCount'); |
|
|
|
} |
|
|
|
|
|
|
|
clearDirtyCount() { |
|
|
|
return this.set("changesCount", 0); |
|
|
|
return this.set('changesCount', 0); |
|
|
|
} |
|
|
|
|
|
|
|
getZoomDecimal() { |
|
|
|
return this.get("Canvas").getZoomDecimal(); |
|
|
|
return this.get('Canvas').getZoomDecimal(); |
|
|
|
} |
|
|
|
|
|
|
|
getZoomMultiplier() { |
|
|
|
return this.get("Canvas").getZoomMultiplier(); |
|
|
|
return this.get('Canvas').getZoomMultiplier(); |
|
|
|
} |
|
|
|
|
|
|
|
setDragMode(value: string) { |
|
|
|
return this.set("dmode", value); |
|
|
|
return this.set('dmode', value); |
|
|
|
} |
|
|
|
|
|
|
|
t(...args: any[]) { |
|
|
|
const i18n = this.get("I18n"); |
|
|
|
const i18n = this.get('I18n'); |
|
|
|
return i18n?.t(...args); |
|
|
|
} |
|
|
|
|
|
|
|
@ -871,7 +848,7 @@ export default class EditorModel extends Model { |
|
|
|
* @returns {Boolean} |
|
|
|
*/ |
|
|
|
inAbsoluteMode() { |
|
|
|
return this.get("dmode") === "absolute"; |
|
|
|
return this.get('dmode') === 'absolute'; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -881,20 +858,20 @@ export default class EditorModel extends Model { |
|
|
|
const { config, view } = this; |
|
|
|
const editor = this.getEditor(); |
|
|
|
const { editors = [] } = config.grapesjs || {}; |
|
|
|
const shallow = this.get("shallow"); |
|
|
|
const shallow = this.get('shallow'); |
|
|
|
shallow?.destroyAll(); |
|
|
|
this.stopListening(); |
|
|
|
this.stopDefault(); |
|
|
|
this.modules |
|
|
|
.slice() |
|
|
|
.reverse() |
|
|
|
.forEach((mod) => mod.destroy()); |
|
|
|
.forEach(mod => mod.destroy()); |
|
|
|
view && view.remove(); |
|
|
|
this.clear({ silent: true }); |
|
|
|
this.destroyed = true; |
|
|
|
["_config", "view", "_previousAttributes", "_events", "_listeners"].forEach( |
|
|
|
['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach( |
|
|
|
//@ts-ignore
|
|
|
|
(i) => (this[i] = {}) |
|
|
|
i => (this[i] = {}) |
|
|
|
); |
|
|
|
editors.splice(editors.indexOf(editor), 1); |
|
|
|
//@ts-ignore
|
|
|
|
@ -902,22 +879,22 @@ export default class EditorModel extends Model { |
|
|
|
} |
|
|
|
|
|
|
|
getEditing() { |
|
|
|
const res = this.get("editing"); |
|
|
|
const res = this.get('editing'); |
|
|
|
return (res && res.model) || null; |
|
|
|
} |
|
|
|
|
|
|
|
setEditing(value: boolean) { |
|
|
|
this.set("editing", value); |
|
|
|
this.set('editing', value); |
|
|
|
return this; |
|
|
|
} |
|
|
|
|
|
|
|
isEditing() { |
|
|
|
return !!this.get("editing"); |
|
|
|
return !!this.get('editing'); |
|
|
|
} |
|
|
|
|
|
|
|
log(msg: string, opts: any = {}) { |
|
|
|
const { ns, level = "debug" } = opts; |
|
|
|
this.trigger("log", msg, opts); |
|
|
|
const { ns, level = 'debug' } = opts; |
|
|
|
this.trigger('log', msg, opts); |
|
|
|
level && this.trigger(`log:${level}`, msg, opts); |
|
|
|
|
|
|
|
if (ns) { |
|
|
|
@ -928,15 +905,15 @@ export default class EditorModel extends Model { |
|
|
|
} |
|
|
|
|
|
|
|
logInfo(msg: string, opts?: any) { |
|
|
|
this.log(msg, { ...opts, level: "info" }); |
|
|
|
this.log(msg, { ...opts, level: 'info' }); |
|
|
|
} |
|
|
|
|
|
|
|
logWarning(msg: string, opts?: any) { |
|
|
|
this.log(msg, { ...opts, level: "warning" }); |
|
|
|
this.log(msg, { ...opts, level: 'warning' }); |
|
|
|
} |
|
|
|
|
|
|
|
logError(msg: string, opts?: any) { |
|
|
|
this.log(msg, { ...opts, level: "error" }); |
|
|
|
this.log(msg, { ...opts, level: 'error' }); |
|
|
|
} |
|
|
|
|
|
|
|
initBaseColorPicker(el: any, opts = {}) { |
|
|
|
@ -948,13 +925,13 @@ export default class EditorModel extends Model { |
|
|
|
//@ts-ignore
|
|
|
|
return $(el).spectrum({ |
|
|
|
containerClassName: `${ppfx}one-bg ${ppfx}two-color`, |
|
|
|
appendTo: elToAppend || "body", |
|
|
|
appendTo: elToAppend || 'body', |
|
|
|
maxSelectionSize: 8, |
|
|
|
showPalette: true, |
|
|
|
palette: [], |
|
|
|
showAlpha: true, |
|
|
|
chooseText: "Ok", |
|
|
|
cancelText: "⨯", |
|
|
|
chooseText: 'Ok', |
|
|
|
cancelText: '⨯', |
|
|
|
...opts, |
|
|
|
...colorPicker, |
|
|
|
}); |
|
|
|
@ -967,7 +944,7 @@ export default class EditorModel extends Model { |
|
|
|
*/ |
|
|
|
skip(clb: Function) { |
|
|
|
this.__skip = true; |
|
|
|
const um = this.get("UndoManager"); |
|
|
|
const um = this.get('UndoManager'); |
|
|
|
um ? um.skip(clb) : clb(); |
|
|
|
this.__skip = false; |
|
|
|
} |
|
|
|
@ -981,7 +958,7 @@ export default class EditorModel extends Model { |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
data(el: any, name: string, value: any) { |
|
|
|
const varName = "_gjs-data"; |
|
|
|
const varName = '_gjs-data'; |
|
|
|
|
|
|
|
if (!el[varName]) { |
|
|
|
el[varName] = {}; |
|
|
|
|
Alex
4 years ago