|
|
|
@ -1,45 +1,51 @@ |
|
|
|
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[] = [ |
|
|
|
]; |
|
|
|
const ts_deps: any[] = []; |
|
|
|
|
|
|
|
Extender({ |
|
|
|
//@ts-ignore
|
|
|
|
@ -68,7 +74,7 @@ export default class EditorModel extends Model { |
|
|
|
modules: [], |
|
|
|
toLoad: [], |
|
|
|
opened: {}, |
|
|
|
device: '', |
|
|
|
device: "", |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
@ -77,36 +83,35 @@ export default class EditorModel extends Model { |
|
|
|
destroyed = false; |
|
|
|
_config: any; |
|
|
|
attrsOrig: any; |
|
|
|
timedInterval?: number; |
|
|
|
timedInterval?: number; |
|
|
|
updateItr?: number; |
|
|
|
view?: EditorView |
|
|
|
|
|
|
|
view?: EditorView; |
|
|
|
|
|
|
|
get storables(): any[]{ |
|
|
|
return this.get('storables') |
|
|
|
get storables(): any[] { |
|
|
|
return this.get("storables"); |
|
|
|
} |
|
|
|
|
|
|
|
get modules(): IModule[]{ |
|
|
|
return this.get('modules') |
|
|
|
get modules(): IModule[] { |
|
|
|
return this.get("modules"); |
|
|
|
} |
|
|
|
|
|
|
|
get toLoad(): any[]{ |
|
|
|
return this.get('toLoad') |
|
|
|
get toLoad(): any[] { |
|
|
|
return this.get("toLoad"); |
|
|
|
} |
|
|
|
|
|
|
|
constructor(conf = {}) { |
|
|
|
super() |
|
|
|
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; |
|
|
|
@ -117,7 +122,7 @@ timedInterval?: number; |
|
|
|
res[next.nodeName] = next.nodeValue; |
|
|
|
return res; |
|
|
|
}, {}) |
|
|
|
: ''; |
|
|
|
: ""; |
|
|
|
|
|
|
|
// Move components to pages
|
|
|
|
if (config.components && !config.pageManager) { |
|
|
|
@ -125,27 +130,35 @@ timedInterval?: number; |
|
|
|
} |
|
|
|
|
|
|
|
// 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); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -179,15 +192,15 @@ timedInterval?: number; |
|
|
|
*/ |
|
|
|
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) { |
|
|
|
@ -217,8 +230,8 @@ timedInterval?: number; |
|
|
|
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); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -227,18 +240,18 @@ timedInterval?: number; |
|
|
|
* @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 ? e => 1 : null; |
|
|
|
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)); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -253,9 +266,11 @@ timedInterval?: number; |
|
|
|
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; |
|
|
|
@ -281,7 +296,7 @@ timedInterval?: number; |
|
|
|
* @return {this} |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
tsLoadModule(moduleName: any) { |
|
|
|
tsLoadModule(moduleName: any) { |
|
|
|
const Module = moduleName.default || moduleName; |
|
|
|
const Mod = new Module(this); |
|
|
|
|
|
|
|
@ -306,11 +321,11 @@ timedInterval?: number; |
|
|
|
this.initialize(opts); |
|
|
|
this.destroyed = false; |
|
|
|
} |
|
|
|
this.set('Editor', editor); |
|
|
|
this.set("Editor", editor); |
|
|
|
} |
|
|
|
|
|
|
|
getEditor() { |
|
|
|
return this.get('Editor'); |
|
|
|
return this.get("Editor"); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -323,7 +338,13 @@ timedInterval?: number; |
|
|
|
* */ |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
@ -332,7 +353,7 @@ timedInterval?: number; |
|
|
|
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); |
|
|
|
} |
|
|
|
|
|
|
|
@ -348,9 +369,9 @@ timedInterval?: number; |
|
|
|
* @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); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -359,7 +380,7 @@ timedInterval?: number; |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
getSelected() { |
|
|
|
return this.get('selected').lastComponent(); |
|
|
|
return this.get("selected").lastComponent(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -368,7 +389,7 @@ timedInterval?: number; |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
getSelectedAll(): any[] { |
|
|
|
return this.get('selected').allComponents(); |
|
|
|
return this.get("selected").allComponents(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -377,31 +398,32 @@ timedInterval?: number; |
|
|
|
* @param {Object} [opts={}] Options, optional |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
setSelected(el: any, opts: any = {}) { |
|
|
|
setSelected(el: any | any[], opts: any = {}) { |
|
|
|
const { event } = opts; |
|
|
|
const ctrlKey = event && (event.ctrlKey || event.metaKey); |
|
|
|
const { shiftKey } = event || {}; |
|
|
|
const multiple = isArray(el); |
|
|
|
const els = (multiple ? 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; |
|
|
|
|
|
|
|
// If an array is passed remove all selected
|
|
|
|
// expect those yet to be selected
|
|
|
|
multiple && this.removeSelected(selected.filter(s => !contains(els, s))); |
|
|
|
const multiple = isArray(el); |
|
|
|
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; |
|
|
|
@ -413,13 +435,13 @@ timedInterval?: number; |
|
|
|
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; |
|
|
|
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) { |
|
|
|
@ -450,7 +472,7 @@ timedInterval?: number; |
|
|
|
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; |
|
|
|
}); |
|
|
|
@ -466,12 +488,12 @@ timedInterval?: number; |
|
|
|
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.get("selected"); |
|
|
|
opts.forceChange && this.removeSelected(model, opts); |
|
|
|
selected.addComponent(model, opts); |
|
|
|
model && this.trigger('component:select', model, opts); |
|
|
|
model && this.trigger("component:select", model, opts); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
@ -482,7 +504,7 @@ timedInterval?: number; |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
removeSelected(el: any, opts = {}) { |
|
|
|
this.get('selected').removeComponent(getModel(el, $), opts); |
|
|
|
this.get("selected").removeComponent(getModel(el, $), opts); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -495,8 +517,8 @@ timedInterval?: number; |
|
|
|
const model = getModel(el, $); |
|
|
|
const models = isArray(model) ? model : [model]; |
|
|
|
|
|
|
|
models.forEach(model => { |
|
|
|
if (this.get('selected').hasComponent(model)) { |
|
|
|
models.forEach((model) => { |
|
|
|
if (this.get("selected").hasComponent(model)) { |
|
|
|
this.removeSelected(model, opts); |
|
|
|
} else { |
|
|
|
this.addSelected(model, opts); |
|
|
|
@ -511,21 +533,21 @@ timedInterval?: number; |
|
|
|
* @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; |
|
|
|
@ -533,13 +555,13 @@ timedInterval?: number; |
|
|
|
} |
|
|
|
|
|
|
|
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"); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -550,7 +572,7 @@ timedInterval?: number; |
|
|
|
* @public |
|
|
|
*/ |
|
|
|
setComponents(components: any, opt = {}) { |
|
|
|
return this.get('DomComponents').setComponents(components, opt); |
|
|
|
return this.get("DomComponents").setComponents(components, opt); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -559,13 +581,13 @@ timedInterval?: number; |
|
|
|
* @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"); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -576,7 +598,7 @@ timedInterval?: number; |
|
|
|
* @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; |
|
|
|
@ -599,7 +621,7 @@ timedInterval?: number; |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
getStyle() { |
|
|
|
return this.get('CssComposer').getAll(); |
|
|
|
return this.get("CssComposer").getAll(); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -608,7 +630,7 @@ timedInterval?: number; |
|
|
|
* @returns {this} |
|
|
|
*/ |
|
|
|
setState(value: string) { |
|
|
|
this.set('state', value); |
|
|
|
this.set("state", value); |
|
|
|
return this; |
|
|
|
} |
|
|
|
|
|
|
|
@ -617,7 +639,7 @@ timedInterval?: number; |
|
|
|
* @returns {String} |
|
|
|
*/ |
|
|
|
getState() { |
|
|
|
return this.get('state') || ''; |
|
|
|
return this.get("state") || ""; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -629,15 +651,15 @@ timedInterval?: number; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
@ -651,19 +673,21 @@ timedInterval?: number; |
|
|
|
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) : ""; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -672,8 +696,8 @@ timedInterval?: number; |
|
|
|
* @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() : ""; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -682,7 +706,7 @@ timedInterval?: number; |
|
|
|
*/ |
|
|
|
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; |
|
|
|
} |
|
|
|
@ -692,7 +716,7 @@ timedInterval?: number; |
|
|
|
* @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; |
|
|
|
} |
|
|
|
@ -701,9 +725,9 @@ timedInterval?: number; |
|
|
|
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)); |
|
|
|
@ -711,8 +735,8 @@ timedInterval?: number; |
|
|
|
|
|
|
|
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; |
|
|
|
} |
|
|
|
@ -723,8 +747,8 @@ timedInterval?: number; |
|
|
|
* @private |
|
|
|
*/ |
|
|
|
getDeviceModel() { |
|
|
|
var name = this.get('device'); |
|
|
|
return this.get('DeviceManager').get(name); |
|
|
|
var name = this.get("device"); |
|
|
|
return this.get("DeviceManager").get(name); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -733,7 +757,7 @@ timedInterval?: number; |
|
|
|
* @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); |
|
|
|
@ -746,7 +770,7 @@ timedInterval?: number; |
|
|
|
* @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); |
|
|
|
@ -758,9 +782,9 @@ timedInterval?: number; |
|
|
|
* @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"); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -783,8 +807,8 @@ timedInterval?: number; |
|
|
|
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})` : ""; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -792,15 +816,15 @@ timedInterval?: number; |
|
|
|
* @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() { |
|
|
|
@ -809,7 +833,7 @@ timedInterval?: number; |
|
|
|
|
|
|
|
getIcon(icon: string) { |
|
|
|
const icons = this.config.icons || {}; |
|
|
|
return icons[icon] || ''; |
|
|
|
return icons[icon] || ""; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -817,28 +841,28 @@ timedInterval?: number; |
|
|
|
* This count resets at any `store()` |
|
|
|
* @return {number} |
|
|
|
*/ |
|
|
|
getDirtyCount() { |
|
|
|
return this.get('changesCount'); |
|
|
|
getDirtyCount(): number { |
|
|
|
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); |
|
|
|
} |
|
|
|
|
|
|
|
@ -847,7 +871,7 @@ timedInterval?: number; |
|
|
|
* @returns {Boolean} |
|
|
|
*/ |
|
|
|
inAbsoluteMode() { |
|
|
|
return this.get('dmode') === 'absolute'; |
|
|
|
return this.get("dmode") === "absolute"; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -857,41 +881,43 @@ timedInterval?: number; |
|
|
|
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; |
|
|
|
//@ts-ignore
|
|
|
|
['_config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(i => (this[i] = {})); |
|
|
|
["_config", "view", "_previousAttributes", "_events", "_listeners"].forEach( |
|
|
|
//@ts-ignore
|
|
|
|
(i) => (this[i] = {}) |
|
|
|
); |
|
|
|
editors.splice(editors.indexOf(editor), 1); |
|
|
|
//@ts-ignore
|
|
|
|
hasWin() && $(config.el).empty().attr(this.attrsOrig); |
|
|
|
} |
|
|
|
|
|
|
|
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) { |
|
|
|
@ -902,15 +928,15 @@ timedInterval?: number; |
|
|
|
} |
|
|
|
|
|
|
|
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' }); |
|
|
|
logWarning(msg: string, opts?: any) { |
|
|
|
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 = {}) { |
|
|
|
@ -922,13 +948,13 @@ timedInterval?: number; |
|
|
|
//@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, |
|
|
|
}); |
|
|
|
@ -941,7 +967,7 @@ timedInterval?: number; |
|
|
|
*/ |
|
|
|
skip(clb: Function) { |
|
|
|
this.__skip = true; |
|
|
|
const um = this.get('UndoManager'); |
|
|
|
const um = this.get("UndoManager"); |
|
|
|
um ? um.skip(clb) : clb(); |
|
|
|
this.__skip = false; |
|
|
|
} |
|
|
|
@ -955,7 +981,7 @@ timedInterval?: number; |
|
|
|
* @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