').append(
19 | ``
20 | );
21 | this.$cn.append(this.$header);
22 | this.$cn2.append(
23 | `
${confTm.labelContainer}
`
24 | );
25 | this.$cn2.append(tmView.render().el);
26 | var panels = editor.Panels;
27 |
28 | if (!panels.getPanel('views-container'))
29 | panelC = panels.addPanel({ id: 'views-container' });
30 | else panelC = panels.getPanel('views-container');
31 |
32 | panelC
33 | .set('appendContent', this.$cn.get(0))
34 | .trigger('change:appendContent');
35 |
36 | this.target = editor.getModel();
37 | this.listenTo(this.target, 'change:selectedComponent', this.toggleTm);
38 | }
39 |
40 | this.toggleTm();
41 | },
42 |
43 | /**
44 | * Toggle Trait Manager visibility
45 | * @private
46 | */
47 | toggleTm() {
48 | const sender = this.sender;
49 | if (sender && sender.get && !sender.get('active')) return;
50 |
51 | if (this.target.get('selectedComponent')) {
52 | this.$cn2.show();
53 | this.$header.hide();
54 | } else {
55 | this.$cn2.hide();
56 | this.$header.show();
57 | }
58 | },
59 |
60 | stop() {
61 | this.$cn2 && this.$cn2.hide();
62 | this.$header && this.$header.hide();
63 | }
64 | };
65 |
--------------------------------------------------------------------------------
/grapesjs/src/commands/view/Preview.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | getPanels(editor) {
3 | if (!this.panels) this.panels = editor.Panels.getPanelsEl();
4 | return this.panels;
5 | },
6 |
7 | tglPointers(editor, v) {
8 | var elP = editor.Canvas.getBody().querySelectorAll(
9 | '.' + this.ppfx + 'no-pointer'
10 | );
11 | _.each(elP, item => {
12 | item.style.pointerEvents = v ? '' : 'all';
13 | });
14 | },
15 |
16 | run(editor, sender) {
17 | if (sender && sender.set) sender.set('active', false);
18 | editor.stopCommand('sw-visibility');
19 | editor.getModel().stopDefault();
20 | var that = this;
21 | var panels = this.getPanels(editor);
22 | var canvas = editor.Canvas.getElement();
23 | var editorEl = editor.getEl();
24 | var pfx = editor.Config.stylePrefix;
25 | if (!this.helper) {
26 | this.helper = document.createElement('span');
27 | this.helper.className = pfx + 'off-prv fa fa-eye-slash';
28 | editorEl.appendChild(this.helper);
29 | this.helper.onclick = () => {
30 | editor.stopCommand('preview');
31 | };
32 | }
33 | this.helper.style.display = 'inline-block';
34 | this.tglPointers(editor);
35 |
36 | /*
37 | editor.Canvas.getBody().querySelectorAll('.' + pfx + 'no-pointer').forEach(function(){
38 | this.style.pointerEvents = 'all';
39 | });*/
40 |
41 | panels.style.display = 'none';
42 | var canvasS = canvas.style;
43 | canvasS.width = '100%';
44 | canvasS.height = '100%';
45 | canvasS.top = '0';
46 | canvasS.left = '0';
47 | canvasS.padding = '0';
48 | canvasS.margin = '0';
49 | editor.trigger('change:canvasOffset');
50 | },
51 |
52 | stop(editor, sender) {
53 | var panels = this.getPanels(editor);
54 | editor.runCommand('sw-visibility');
55 | editor.getModel().runDefault();
56 | panels.style.display = 'block';
57 | var canvas = editor.Canvas.getElement();
58 | canvas.setAttribute('style', '');
59 | if (this.helper) {
60 | this.helper.style.display = 'none';
61 | }
62 | editor.trigger('change:canvasOffset');
63 | this.tglPointers(editor, 1);
64 | }
65 | };
66 |
--------------------------------------------------------------------------------
/grapesjs/src/commands/view/Resize.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | run(editor, sender, opts) {
3 | var opt = opts || {};
4 | var el = opt.el || '';
5 | var canvas = editor.Canvas;
6 | var canvasResizer = this.canvasResizer;
7 | var options = opt.options || {};
8 | var canvasView = canvas.getCanvasView();
9 | options.ratioDefault = 1;
10 | options.appendTo = canvas.getResizerEl();
11 | options.prefix = editor.getConfig().stylePrefix;
12 | options.posFetcher = canvasView.getElementPos.bind(canvasView);
13 | options.mousePosFetcher = canvas.getMouseRelativePos;
14 |
15 | // Create the resizer for the canvas if not yet created
16 | if (!canvasResizer || opt.forceNew) {
17 | this.canvasResizer = editor.Utils.Resizer.init(options);
18 | canvasResizer = this.canvasResizer;
19 | }
20 |
21 | canvasResizer.setOptions(options);
22 | canvasResizer.blur();
23 | canvasResizer.focus(el);
24 | return canvasResizer;
25 | },
26 |
27 | stop() {
28 | const resizer = this.canvasResizer;
29 | resizer && resizer.blur();
30 | }
31 | };
32 |
--------------------------------------------------------------------------------
/grapesjs/src/commands/view/SelectParent.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | run(editor) {
3 | const sel = editor.getSelected();
4 | let comp = sel && sel.parent();
5 |
6 | // Recurse through the parent() chain until a selectable parent is found
7 | while (comp && !comp.get('selectable')) {
8 | comp = comp.parent();
9 | }
10 |
11 | comp && editor.select(comp);
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/grapesjs/src/commands/view/SwitchVisibility.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | run(ed) {
3 | ed.Canvas.getBody().className = this.ppfx + 'dashed';
4 | },
5 |
6 | stop(ed) {
7 | ed.Canvas.getBody().className = '';
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/grapesjs/src/commands/view/TextComponent.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var CreateComponent = require('./CreateComponent');
3 |
4 | module.exports = _.extend({}, CreateComponent, {
5 | /**
6 | * This event is triggered at the beginning of a draw operation
7 | * @param {Object} component Object component before creation
8 | * @private
9 | * */
10 | beforeDraw(component) {
11 | component.type = 'text';
12 | if (!component.style) component.style = {};
13 | component.style.padding = '10px';
14 | },
15 |
16 | /**
17 | * This event is triggered at the end of a draw operation
18 | * @param {Object} model Component model created
19 | * @private
20 | * */
21 | afterDraw(model) {
22 | if (!model || !model.set) return;
23 | model.trigger('focus');
24 | if (this.sender) this.sender.set('active', false);
25 | }
26 | });
27 |
--------------------------------------------------------------------------------
/grapesjs/src/css_composer/config/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // Style prefix
3 | stylePrefix: 'css-',
4 |
5 | // Custom CSS string to render on top
6 | staticRules: '',
7 |
8 | // Default CSS style
9 | rules: []
10 | };
11 |
--------------------------------------------------------------------------------
/grapesjs/src/css_composer/model/CssRules.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var CssRule = require('./CssRule');
3 |
4 | module.exports = Backbone.Collection.extend({
5 | initialize(models, opt) {
6 | // Inject editor
7 | if (opt && opt.em) this.editor = opt.em;
8 |
9 | // Not used
10 | this.model = (attrs, options) => {
11 | var model;
12 |
13 | if (!options.em && opt && opt.em) options.em = opt.em;
14 |
15 | switch (1) {
16 | default:
17 | model = new CssRule(attrs, options);
18 | }
19 |
20 | return model;
21 | };
22 | },
23 |
24 | add(models, opt = {}) {
25 | if (typeof models === 'string') {
26 | models = this.editor.get('Parser').parseCss(models);
27 | }
28 | opt.em = this.editor;
29 | return Backbone.Collection.prototype.add.apply(this, [models, opt]);
30 | }
31 | });
32 |
--------------------------------------------------------------------------------
/grapesjs/src/css_composer/view/CssGroupRuleView.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./CssRuleView').extend({
2 | _createElement: function(tagName) {
3 | return document.createTextNode('');
4 | },
5 |
6 | render() {
7 | const model = this.model;
8 | const important = model.get('important');
9 | this.el.textContent = model.getDeclaration({ important });
10 | return this;
11 | }
12 | });
13 |
--------------------------------------------------------------------------------
/grapesjs/src/css_composer/view/CssRuleView.js:
--------------------------------------------------------------------------------
1 | module.exports = require('backbone').View.extend({
2 | tagName: 'style',
3 |
4 | initialize(o = {}) {
5 | this.config = o.config || {};
6 | const model = this.model;
7 | const toTrack = 'change:style change:state change:mediaText';
8 | this.listenTo(model, toTrack, this.render);
9 | this.listenTo(model, 'destroy remove', this.remove);
10 | this.listenTo(model.get('selectors'), 'change', this.render);
11 | },
12 |
13 | render() {
14 | const model = this.model;
15 | const important = model.get('important');
16 | this.el.innerHTML = this.model.toCSS({ important });
17 | return this;
18 | }
19 | });
20 |
--------------------------------------------------------------------------------
/grapesjs/src/device_manager/config/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | devices: [],
3 |
4 | deviceLabel: 'Device'
5 | };
6 |
--------------------------------------------------------------------------------
/grapesjs/src/device_manager/model/Device.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 |
3 | module.exports = Backbone.Model.extend({
4 | idAttribute: 'name',
5 |
6 | defaults: {
7 | name: '',
8 |
9 | // Width to set for the editor iframe
10 | width: '',
11 |
12 | // Height to set for the editor iframe
13 | height: '',
14 |
15 | // The width which will be used in media queries,
16 | // If empty the width will be used
17 | widthMedia: null
18 | },
19 |
20 | initialize() {
21 | if (this.get('widthMedia') == null) {
22 | this.set('widthMedia', this.get('width'));
23 | }
24 | }
25 | });
26 |
--------------------------------------------------------------------------------
/grapesjs/src/device_manager/model/Devices.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var Device = require('./Device');
3 |
4 | module.exports = Backbone.Collection.extend({
5 | model: Device
6 | });
7 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/config/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stylePrefix: 'comp-',
3 |
4 | wrapperId: 'wrapper',
5 |
6 | wrapperName: 'Body',
7 |
8 | // Default wrapper configuration
9 | wrapper: {
10 | removable: false,
11 | copyable: false,
12 | draggable: false,
13 | components: [],
14 | traits: [],
15 | stylable: [
16 | 'background',
17 | 'background-color',
18 | 'background-image',
19 | 'background-repeat',
20 | 'background-attachment',
21 | 'background-position',
22 | 'background-size'
23 | ]
24 | },
25 |
26 | // Could be used for default components
27 | components: [],
28 |
29 | // Class for new image component
30 | imageCompClass: 'fa fa-picture-o',
31 |
32 | // Open assets manager on create of image component
33 | oAssetsOnCreate: true,
34 |
35 | // TODO to remove
36 | // Editor should also store the wrapper informations, but as this change might
37 | // break stuff I set ii as an opt-in option, for now.
38 | storeWrapper: 0,
39 |
40 | // List of void elements
41 | voidElements: [
42 | 'area',
43 | 'base',
44 | 'br',
45 | 'col',
46 | 'embed',
47 | 'hr',
48 | 'img',
49 | 'input',
50 | 'keygen',
51 | 'link',
52 | 'menuitem',
53 | 'meta',
54 | 'param',
55 | 'source',
56 | 'track',
57 | 'wbr'
58 | ]
59 | };
60 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentLink.js:
--------------------------------------------------------------------------------
1 | const Component = require('./ComponentText');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: {
6 | ...Component.prototype.defaults,
7 | type: 'link',
8 | tagName: 'a',
9 | traits: ['title', 'href', 'target']
10 | },
11 |
12 | /**
13 | * Returns object of attributes for HTML
14 | * @return {Object}
15 | * @private
16 | */
17 | getAttrToHTML(...args) {
18 | const attr = Component.prototype.getAttrToHTML.apply(this, args);
19 | delete attr.onmousedown;
20 | return attr;
21 | }
22 | },
23 | {
24 | isComponent(el) {
25 | let result;
26 | let avoidEdit;
27 |
28 | if (el.tagName == 'A') {
29 | result = {
30 | type: 'link',
31 | editable: 0
32 | };
33 |
34 | // The link is editable only if, at least, one of its
35 | // children is a text node (not empty one)
36 | const children = el.childNodes;
37 | const len = children.length;
38 | if (!len) delete result.editable;
39 |
40 | for (let i = 0; i < len; i++) {
41 | const child = children[i];
42 |
43 | if (child.nodeType == 3 && child.textContent.trim() != '') {
44 | delete result.editable;
45 | break;
46 | }
47 | }
48 | }
49 |
50 | return result;
51 | }
52 | }
53 | );
54 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentScript.js:
--------------------------------------------------------------------------------
1 | var Component = require('./Component');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: _.extend({}, Component.prototype.defaults, {
6 | type: 'script',
7 | droppable: false,
8 | draggable: false,
9 | layerable: false
10 | })
11 | },
12 | {
13 | isComponent(el) {
14 | if (el.tagName == 'SCRIPT') {
15 | var result = { type: 'script' };
16 |
17 | if (el.src) {
18 | result.src = el.src;
19 | result.onload = el.onload;
20 | }
21 |
22 | return result;
23 | }
24 | }
25 | }
26 | );
27 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentSvg.js:
--------------------------------------------------------------------------------
1 | var Component = require('./Component');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: {
6 | ...Component.prototype.defaults,
7 | highlightable: 0
8 | },
9 |
10 | getName() {
11 | let name = this.get('tagName');
12 | let customName = this.get('custom-name');
13 | name = name.charAt(0).toUpperCase() + name.slice(1);
14 | return customName || name;
15 | }
16 | },
17 | {
18 | isComponent(el) {
19 | if (SVGElement && el instanceof SVGElement) {
20 | // Some SVG elements require uppercase letters (eg.
)
21 | const tagName = el.tagName;
22 | // Make the root resizable
23 | const resizable = tagName == 'svg' ? true : false;
24 |
25 | return {
26 | tagName,
27 | type: 'svg',
28 | resizable
29 | };
30 | }
31 | }
32 | }
33 | );
34 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentTable.js:
--------------------------------------------------------------------------------
1 | const Component = require('./Component');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: {
6 | ...Component.prototype.defaults,
7 | type: 'table',
8 | tagName: 'table',
9 | droppable: ['tbody', 'thead', 'tfoot']
10 | },
11 |
12 | initialize(o, opt) {
13 | Component.prototype.initialize.apply(this, arguments);
14 | const components = this.get('components');
15 | !components.length && components.add({ type: 'tbody' });
16 | }
17 | },
18 | {
19 | isComponent(el) {
20 | let result = '';
21 |
22 | if (el.tagName == 'TABLE') {
23 | result = { type: 'table' };
24 | }
25 |
26 | return result;
27 | }
28 | }
29 | );
30 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentTableBody.js:
--------------------------------------------------------------------------------
1 | const Component = require('./Component');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: {
6 | ...Component.prototype.defaults,
7 | type: 'tbody',
8 | tagName: 'tbody',
9 | draggable: ['table'],
10 | droppable: ['tr'],
11 | columns: 1,
12 | rows: 1
13 | },
14 |
15 | initialize(o, opt) {
16 | Component.prototype.initialize.apply(this, arguments);
17 | const components = this.get('components');
18 | let columns = this.get('columns');
19 | let rows = this.get('rows');
20 |
21 | // Init components if empty
22 | if (!components.length) {
23 | const rowsToAdd = [];
24 |
25 | while (rows--) {
26 | const columnsToAdd = [];
27 | let clm = columns;
28 |
29 | while (clm--) {
30 | columnsToAdd.push({
31 | type: 'cell',
32 | classes: ['cell']
33 | });
34 | }
35 |
36 | rowsToAdd.push({
37 | type: 'row',
38 | classes: ['row'],
39 | components: columnsToAdd
40 | });
41 | }
42 |
43 | components.add(rowsToAdd);
44 | }
45 | }
46 | },
47 | {
48 | isComponent(el) {
49 | let result = '';
50 |
51 | if (el.tagName == 'TBODY') {
52 | result = { type: 'tbody' };
53 | }
54 |
55 | return result;
56 | }
57 | }
58 | );
59 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentTableCell.js:
--------------------------------------------------------------------------------
1 | const Component = require('./Component');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: {
6 | ...Component.prototype.defaults,
7 | type: 'cell',
8 | tagName: 'td',
9 | draggable: ['tr']
10 | }
11 | },
12 | {
13 | isComponent(el) {
14 | let result = '';
15 | const tag = el.tagName;
16 |
17 | if (tag == 'TD' || tag == 'TH') {
18 | result = {
19 | type: 'cell',
20 | tagName: tag.toLowerCase()
21 | };
22 | }
23 |
24 | return result;
25 | }
26 | }
27 | );
28 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentTableFoot.js:
--------------------------------------------------------------------------------
1 | const ComponentTableBody = require('./ComponentTableBody');
2 |
3 | module.exports = ComponentTableBody.extend(
4 | {
5 | defaults: {
6 | ...ComponentTableBody.prototype.defaults,
7 | type: 'tfoot',
8 | tagName: 'tfoot'
9 | }
10 | },
11 | {
12 | isComponent(el) {
13 | let result = '';
14 |
15 | if (el.tagName == 'TFOOT') {
16 | result = { type: 'tfoot' };
17 | }
18 |
19 | return result;
20 | }
21 | }
22 | );
23 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentTableHead.js:
--------------------------------------------------------------------------------
1 | const ComponentTableBody = require('./ComponentTableBody');
2 |
3 | module.exports = ComponentTableBody.extend(
4 | {
5 | defaults: {
6 | ...ComponentTableBody.prototype.defaults,
7 | type: 'thead',
8 | tagName: 'thead'
9 | }
10 | },
11 | {
12 | isComponent(el) {
13 | let result = '';
14 |
15 | if (el.tagName == 'THEAD') {
16 | result = { type: 'thead' };
17 | }
18 |
19 | return result;
20 | }
21 | }
22 | );
23 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentTableRow.js:
--------------------------------------------------------------------------------
1 | const Component = require('./Component');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: {
6 | ...Component.prototype.defaults,
7 | type: 'row',
8 | tagName: 'tr',
9 | draggable: ['thead', 'tbody', 'tfoot'],
10 | droppable: ['th', 'td']
11 | },
12 |
13 | initialize(o, opt) {
14 | Component.prototype.initialize.apply(this, arguments);
15 |
16 | // Clean the row from non cell components
17 | const cells = [];
18 | const components = this.get('components');
19 | components.each(model => model.is('cell') && cells.push(model));
20 | components.reset(cells);
21 | }
22 | },
23 | {
24 | isComponent(el) {
25 | let result = '';
26 |
27 | if (el.tagName == 'TR') {
28 | result = { type: 'row' };
29 | }
30 |
31 | return result;
32 | }
33 | }
34 | );
35 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentText.js:
--------------------------------------------------------------------------------
1 | const Component = require('./Component');
2 |
3 | module.exports = Component.extend({
4 | defaults: {
5 | ...Component.prototype.defaults,
6 | type: 'text',
7 | droppable: false,
8 | editable: true
9 | }
10 | });
11 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ComponentTextNode.js:
--------------------------------------------------------------------------------
1 | var Component = require('./Component');
2 |
3 | module.exports = Component.extend(
4 | {
5 | defaults: _.extend({}, Component.prototype.defaults, {
6 | droppable: false,
7 | editable: true
8 | }),
9 |
10 | toHTML() {
11 | return this.get('content');
12 | }
13 | },
14 | {
15 | isComponent(el) {
16 | var result = '';
17 | if (el.nodeType === 3) {
18 | result = {
19 | type: 'textnode',
20 | content: el.textContent
21 | };
22 | }
23 | return result;
24 | }
25 | }
26 | );
27 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/Components.js:
--------------------------------------------------------------------------------
1 | import { isEmpty } from 'underscore';
2 |
3 | const Backbone = require('backbone');
4 |
5 | module.exports = Backbone.Collection.extend({
6 | initialize(models, opt = {}) {
7 | this.listenTo(this, 'add', this.onAdd);
8 | this.config = opt.config;
9 | this.em = opt.em;
10 |
11 | this.model = (attrs, options) => {
12 | var model;
13 | var df = opt.componentTypes;
14 | options.em = opt.em;
15 | options.config = opt.config;
16 | options.componentTypes = df;
17 |
18 | for (var it = 0; it < df.length; it++) {
19 | var dfId = df[it].id;
20 | if (dfId == attrs.type) {
21 | model = df[it].model;
22 | break;
23 | }
24 | }
25 |
26 | if (!model) {
27 | // get the last one
28 | model = df[df.length - 1].model;
29 | }
30 |
31 | return new model(attrs, options);
32 | };
33 | },
34 |
35 | add(models, opt = {}) {
36 | if (typeof models === 'string') {
37 | const cssc = this.em.get('CssComposer');
38 | const parsed = this.em.get('Parser').parseHtml(models);
39 | models = parsed.html;
40 |
41 | if (parsed.css && cssc) {
42 | const { avoidUpdateStyle } = opt;
43 | const added = cssc.addCollection(parsed.css, {
44 | extend: 1,
45 | avoidUpdateStyle
46 | });
47 | }
48 | }
49 |
50 | return Backbone.Collection.prototype.add.apply(this, [models, opt]);
51 | },
52 |
53 | onAdd(model, c, opts) {
54 | const em = this.em;
55 | const style = model.getStyle();
56 | const avoidInline = em && em.getConfig('avoidInlineStyle');
57 |
58 | if (
59 | !isEmpty(style) &&
60 | !avoidInline &&
61 | em &&
62 | em.get &&
63 | em.getConfig('forceClass')
64 | ) {
65 | const name = model.cid;
66 | const rule = em.get('CssComposer').setClassRule(name, style);
67 | model.setStyle({});
68 | model.addClass(name);
69 | }
70 | }
71 | });
72 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/Toolbar.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ToolbarButton = require('./ToolbarButton');
3 |
4 | module.exports = Backbone.Collection.extend({ model: ToolbarButton });
5 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/model/ToolbarButton.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 |
3 | module.exports = Backbone.Model.extend({
4 | defaults: {
5 | command: '',
6 | attributes: {}
7 | }
8 | });
9 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentLinkView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentTextView');
3 |
4 | module.exports = ComponentView.extend({
5 | render(...args) {
6 | ComponentView.prototype.render.apply(this, args);
7 |
8 | // I need capturing instead of bubbling as bubbled clicks from other
9 | // children will execute the link event
10 | this.el.addEventListener('click', this.prevDef, true);
11 |
12 | return this;
13 | }
14 | });
15 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentMapView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentImageView');
3 |
4 | module.exports = ComponentView.extend({
5 | tagName: 'div',
6 |
7 | events: {},
8 |
9 | initialize(o) {
10 | ComponentView.prototype.initialize.apply(this, arguments);
11 | this.classEmpty = this.ppfx + 'plh-map';
12 | },
13 |
14 | /**
15 | * Update the map on the canvas
16 | * @private
17 | */
18 | updateSrc() {
19 | this.getIframe().src = this.model.get('src');
20 | },
21 |
22 | getIframe() {
23 | if (!this.iframe) {
24 | var ifrm = document.createElement('iframe');
25 | ifrm.src = this.model.get('src');
26 | ifrm.frameBorder = 0;
27 | ifrm.style.height = '100%';
28 | ifrm.style.width = '100%';
29 | ifrm.className = this.ppfx + 'no-pointer';
30 | this.iframe = ifrm;
31 | }
32 | return this.iframe;
33 | },
34 |
35 | render(...args) {
36 | ComponentView.prototype.render.apply(this, args);
37 | this.updateClasses();
38 | this.el.appendChild(this.getIframe());
39 | return this;
40 | }
41 | });
42 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentScriptView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentImageView');
3 |
4 | module.exports = ComponentView.extend({
5 | tagName: 'script',
6 |
7 | events: {},
8 |
9 | render() {
10 | var model = this.model;
11 | var src = model.get('src');
12 | var em = this.em;
13 | var scriptCount = em && em.get('scriptCount') ? em.get('scriptCount') : 0;
14 | var content = '';
15 |
16 | // If it's an external script
17 | if (src) {
18 | var onload = model.get('onload');
19 | var svar = 'script' + scriptCount;
20 | var svarNext = 'script' + (scriptCount + 1);
21 | content =
22 | 'var ' +
23 | svar +
24 | " = document.createElement('script');\n" +
25 | svar +
26 | '.onload = function(){\n' +
27 | (onload ? onload + '();\n' : '') +
28 | 'typeof ' +
29 | svarNext +
30 | "Start == 'function' && " +
31 | svarNext +
32 | 'Start();\n' +
33 | '};\n' +
34 | svar +
35 | ".src = '" +
36 | src +
37 | "';\n" +
38 | 'function ' +
39 | svar +
40 | 'Start() { document.body.appendChild(' +
41 | svar +
42 | '); };\n' +
43 | (!scriptCount ? svar + 'Start();' : '');
44 | if (em) {
45 | em.set('scriptCount', scriptCount + 1);
46 | }
47 | } else {
48 | content = model.get('content');
49 | }
50 |
51 | this.el.innerHTML = content;
52 | return this;
53 | }
54 | });
55 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentSvgView.js:
--------------------------------------------------------------------------------
1 | const ComponentView = require('./ComponentView');
2 |
3 | module.exports = ComponentView.extend({
4 | _createElement: function(tagName) {
5 | return document.createElementNS('http://www.w3.org/2000/svg', tagName);
6 | }
7 | });
8 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentTableBodyView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentView');
3 |
4 | module.exports = ComponentView.extend({});
5 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentTableCellView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentView');
3 |
4 | module.exports = ComponentView.extend({});
5 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentTableFootView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentView');
3 |
4 | module.exports = ComponentView.extend({});
5 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentTableHeadView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentView');
3 |
4 | module.exports = ComponentView.extend({});
5 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentTableRowView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentView');
3 |
4 | module.exports = ComponentView.extend({});
5 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentTableView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ComponentView = require('./ComponentView');
3 |
4 | module.exports = ComponentView.extend({
5 | events: {}
6 | });
7 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ComponentTextNodeView.js:
--------------------------------------------------------------------------------
1 | module.exports = require('backbone').View.extend({});
2 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ToolbarButtonView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 |
3 | module.exports = Backbone.View.extend({
4 | events() {
5 | return (
6 | this.model.get('events') || {
7 | mousedown: 'handleClick'
8 | }
9 | );
10 | },
11 |
12 | attributes() {
13 | return this.model.get('attributes');
14 | },
15 |
16 | initialize(opts) {
17 | this.editor = opts.config.editor;
18 | },
19 |
20 | handleClick(event) {
21 | event.preventDefault();
22 | event.stopPropagation();
23 | this.execCommand(event);
24 | },
25 |
26 | execCommand(event) {
27 | const opts = { event };
28 | const command = this.model.get('command');
29 | const editor = this.editor;
30 |
31 | if (typeof command === 'function') {
32 | command(editor, null, opts);
33 | }
34 |
35 | if (typeof command === 'string') {
36 | editor.runCommand(command, opts);
37 | }
38 | },
39 |
40 | render() {
41 | var config = this.editor.getConfig();
42 | this.el.className += ' ' + config.stylePrefix + 'toolbar-item';
43 | return this;
44 | }
45 | });
46 |
--------------------------------------------------------------------------------
/grapesjs/src/dom_components/view/ToolbarView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var DomainViews = require('domain_abstract/view/DomainViews');
3 | var ToolbarButtonView = require('./ToolbarButtonView');
4 |
5 | module.exports = DomainViews.extend({
6 | itemView: ToolbarButtonView,
7 |
8 | initialize(opts) {
9 | this.config = { editor: opts.editor || '' };
10 | this.listenTo(this.collection, 'reset', this.render);
11 | }
12 | });
13 |
--------------------------------------------------------------------------------
/grapesjs/src/domain_abstract/ui/Input.js:
--------------------------------------------------------------------------------
1 | const $ = Backbone.$;
2 |
3 | module.exports = Backbone.View.extend({
4 | events: {
5 | change: 'handleChange'
6 | },
7 |
8 | template() {
9 | return ``;
10 | },
11 |
12 | inputClass() {
13 | return `${this.ppfx}field`;
14 | },
15 |
16 | holderClass() {
17 | return `${this.ppfx}input-holder`;
18 | },
19 |
20 | initialize(opts = {}) {
21 | const ppfx = opts.ppfx || '';
22 | this.opts = opts;
23 | this.ppfx = ppfx;
24 | this.em = opts.target || {};
25 | this.listenTo(this.model, 'change:value', this.handleModelChange);
26 | },
27 |
28 | /**
29 | * Fired when the element of the property is updated
30 | */
31 | elementUpdated() {
32 | this.model.trigger('el:change');
33 | },
34 |
35 | /**
36 | * Set value to the input element
37 | * @param {string} value
38 | */
39 | setValue(value) {
40 | const model = this.model;
41 | let val = value || model.get('defaults');
42 | const input = this.getInputEl();
43 | input && (input.value = val);
44 | },
45 |
46 | /**
47 | * Updates the view when the model is changed
48 | * */
49 | handleModelChange(model, value, opts) {
50 | this.setValue(value, opts);
51 | },
52 |
53 | /**
54 | * Handled when the view is changed
55 | */
56 | handleChange(e) {
57 | e.stopPropagation();
58 | this.model.set('value', this.getInputEl().value);
59 | this.elementUpdated();
60 | },
61 |
62 | /**
63 | * Get the input element
64 | * @return {HTMLElement}
65 | */
66 | getInputEl() {
67 | if (!this.inputEl) {
68 | const plh = this.model.get('defaults');
69 | this.inputEl = $(``);
70 | }
71 |
72 | return this.inputEl.get(0);
73 | },
74 |
75 | render() {
76 | const el = this.$el;
77 | el.addClass(this.inputClass());
78 | el.html(this.template());
79 | el.find(`.${this.holderClass()}`).append(this.getInputEl());
80 | return this;
81 | }
82 | });
83 |
--------------------------------------------------------------------------------
/grapesjs/src/domain_abstract/view/DomainViews.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 |
3 | module.exports = Backbone.View.extend({
4 | // Default view
5 | itemView: '',
6 |
7 | // Defines the View per type
8 | itemsView: '',
9 |
10 | itemType: 'type',
11 |
12 | initialize(opts, config) {
13 | this.config = config || {};
14 | },
15 |
16 | /**
17 | * Add new model to the collection
18 | * @param {Model} model
19 | * @private
20 | * */
21 | addTo(model) {
22 | this.add(model);
23 | },
24 |
25 | /**
26 | * Render new model inside the view
27 | * @param {Model} model
28 | * @param {Object} fragment Fragment collection
29 | * @private
30 | * */
31 | add(model, fragment) {
32 | var frag = fragment || null;
33 | var itemView = this.itemView;
34 | var typeField = model.get(this.itemType);
35 | if (this.itemsView && this.itemsView[typeField]) {
36 | itemView = this.itemsView[typeField];
37 | }
38 | var view = new itemView(
39 | {
40 | model,
41 | config: this.config
42 | },
43 | this.config
44 | );
45 | var rendered = view.render().el;
46 |
47 | if (frag) frag.appendChild(rendered);
48 | else this.$el.append(rendered);
49 | },
50 |
51 | render() {
52 | var frag = document.createDocumentFragment();
53 | this.$el.empty();
54 |
55 | if (this.collection.length)
56 | this.collection.each(function(model) {
57 | this.add(model, frag);
58 | }, this);
59 |
60 | this.$el.append(frag);
61 | return this;
62 | }
63 | });
64 |
--------------------------------------------------------------------------------
/grapesjs/src/editor/view/EditorView.js:
--------------------------------------------------------------------------------
1 | const $ = Backbone.$;
2 |
3 | module.exports = Backbone.View.extend({
4 | initialize() {
5 | const model = this.model;
6 | model.view = this;
7 | this.conf = model.config;
8 | this.pn = model.get('Panels');
9 | model.on('loaded', () => {
10 | this.pn.active();
11 | this.pn.disableButtons();
12 | model.runDefault();
13 | setTimeout(() => model.trigger('load'), 0);
14 | });
15 | },
16 |
17 | render() {
18 | const model = this.model;
19 | const el = this.$el;
20 | const conf = this.conf;
21 | const contEl = $(conf.el || `body ${conf.container}`);
22 | const pfx = conf.stylePrefix;
23 | el.empty();
24 |
25 | if (conf.width) contEl.css('width', conf.width);
26 |
27 | if (conf.height) contEl.css('height', conf.height);
28 |
29 | el.append(model.get('Canvas').render());
30 | el.append(this.pn.render());
31 | el.attr('class', `${pfx}editor ${pfx}one-bg ${pfx}two-color`);
32 | contEl
33 | .addClass(`${pfx}editor-cont`)
34 | .empty()
35 | .append(el);
36 |
37 | return this;
38 | }
39 | });
40 |
--------------------------------------------------------------------------------
/grapesjs/src/modal_dialog/config/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stylePrefix: 'mdl-',
3 |
4 | title: '',
5 |
6 | content: '',
7 |
8 | backdrop: true
9 | };
10 |
--------------------------------------------------------------------------------
/grapesjs/src/modal_dialog/model/Modal.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 |
3 | module.exports = Backbone.Model.extend({
4 | defaults: {
5 | title: '',
6 | content: '',
7 | open: false
8 | }
9 | });
10 |
--------------------------------------------------------------------------------
/grapesjs/src/navigator/config/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | stylePrefix: '',
3 |
4 | // Specify the element to use as a container, string (query) or HTMLElement
5 | // With the empty value, nothing will be rendered
6 | appendTo: '',
7 |
8 | // Enable/Disable globally the possibility to sort layers
9 | sortable: 1,
10 |
11 | // Enable/Disable globally the possibility to hide layers
12 | hidable: 1,
13 |
14 | // Hide textnodes
15 | hideTextnode: 1,
16 |
17 | // Indicates if the wrapper is visible in layers
18 | showWrapper: 1
19 | };
20 |
--------------------------------------------------------------------------------
/grapesjs/src/navigator/index.js:
--------------------------------------------------------------------------------
1 | import defaults from './config/config';
2 | import ItemView from './view/ItemView';
3 | import ItemsView from './view/ItemsView';
4 | import { isElement } from 'underscore';
5 |
6 | module.exports = () => {
7 | let em;
8 | let layers;
9 | let config = {};
10 | let View = ItemsView;
11 |
12 | return {
13 | name: 'LayerManager',
14 |
15 | init(opts = {}) {
16 | config = { ...defaults, ...opts };
17 | config.stylePrefix = opts.pStylePrefix;
18 | em = config.em;
19 |
20 | return this;
21 | },
22 |
23 | onLoad() {
24 | const collection = em.get('DomComponents').getComponents();
25 | const parent = collection.parent;
26 | const options = {
27 | level: 0,
28 | config,
29 | opened: config.opened || {}
30 | };
31 |
32 | // Show wrapper if requested
33 | if (config.showWrapper && parent) {
34 | View = ItemView;
35 | options.model = parent;
36 | } else {
37 | options.collection = collection;
38 | }
39 |
40 | layers = new View(options);
41 | em && em.on('component:selected', this.componentChanged);
42 | this.componentChanged();
43 | },
44 |
45 | postRender() {
46 | const elTo = config.appendTo;
47 |
48 | if (elTo) {
49 | const el = isElement(elTo) ? elTo : document.querySelector(elTo);
50 | el.appendChild(this.render());
51 | }
52 | },
53 |
54 | /**
55 | * Return the view of layers
56 | * @return {View}
57 | */
58 | getAll() {
59 | return layers;
60 | },
61 |
62 | /**
63 | * Triggered when the selected component is changed
64 | * @private
65 | */
66 | componentChanged(e, md, opts = {}) {
67 | if (opts.fromLayers) return;
68 | const opened = em.get('opened');
69 | const model = em.getSelected();
70 | let parent = model && model.collection ? model.collection.parent : null;
71 | for (let cid in opened) opened[cid].set('open', 0);
72 |
73 | while (parent) {
74 | parent.set('open', 1);
75 | opened[parent.cid] = parent;
76 | parent = parent.collection ? parent.collection.parent : null;
77 | }
78 | },
79 |
80 | render() {
81 | return layers.render().el;
82 | }
83 | };
84 | };
85 |
--------------------------------------------------------------------------------
/grapesjs/src/panels/config/config.js:
--------------------------------------------------------------------------------
1 | var crc = 'create-comp';
2 | var mvc = 'move-comp';
3 | var swv = 'sw-visibility';
4 | var expt = 'export-template';
5 | var osm = 'open-sm';
6 | var otm = 'open-tm';
7 | var ola = 'open-layers';
8 | var obl = 'open-blocks';
9 | var ful = 'fullscreen';
10 | var prv = 'preview';
11 |
12 | module.exports = {
13 | stylePrefix: 'pn-',
14 |
15 | // Default panels fa-sliders for features
16 | defaults: [
17 | {
18 | id: 'commands',
19 | buttons: [{}]
20 | },
21 | {
22 | id: 'options',
23 | buttons: [
24 | {
25 | active: true,
26 | id: swv,
27 | className: 'fa fa-square-o',
28 | command: swv,
29 | context: swv,
30 | attributes: { title: 'View components' }
31 | },
32 | {
33 | id: prv,
34 | className: 'fa fa-eye',
35 | command: prv,
36 | context: prv,
37 | attributes: { title: 'Preview' }
38 | },
39 | {
40 | id: ful,
41 | className: 'fa fa-arrows-alt',
42 | command: ful,
43 | context: ful,
44 | attributes: { title: 'Fullscreen' }
45 | },
46 | {
47 | id: expt,
48 | className: 'fa fa-code',
49 | command: expt,
50 | attributes: { title: 'View code' }
51 | }
52 | ]
53 | },
54 | {
55 | id: 'views',
56 | buttons: [
57 | {
58 | id: osm,
59 | className: 'fa fa-paint-brush',
60 | command: osm,
61 | active: true,
62 | attributes: { title: 'Open Style Manager' }
63 | },
64 | {
65 | id: otm,
66 | className: 'fa fa-cog',
67 | command: otm,
68 | attributes: { title: 'Settings' }
69 | },
70 | {
71 | id: ola,
72 | className: 'fa fa-bars',
73 | command: ola,
74 | attributes: { title: 'Open Layer Manager' }
75 | },
76 | {
77 | id: obl,
78 | className: 'fa fa-th-large',
79 | command: obl,
80 | attributes: { title: 'Open Blocks' }
81 | }
82 | ]
83 | }
84 | ],
85 |
86 | // Editor model
87 | em: null,
88 |
89 | // Delay before show children buttons (in milliseconds)
90 | delayBtnsShow: 300
91 | };
92 |
--------------------------------------------------------------------------------
/grapesjs/src/panels/model/Button.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 |
3 | module.exports = Backbone.Model.extend({
4 | defaults: {
5 | id: '',
6 | label: '',
7 | className: '',
8 | command: '',
9 | context: '',
10 | buttons: [],
11 | attributes: {},
12 | options: {},
13 | active: false,
14 | dragDrop: false,
15 | runDefaultCommand: true,
16 | stopDefaultCommand: false,
17 | disable: false
18 | },
19 |
20 | initialize(options) {
21 | if (this.get('buttons').length) {
22 | var Buttons = require('./Buttons');
23 | this.set('buttons', new Buttons(this.get('buttons')));
24 | }
25 | }
26 | });
27 |
--------------------------------------------------------------------------------
/grapesjs/src/panels/model/Buttons.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var Button = require('./Button');
3 |
4 | module.exports = Backbone.Collection.extend({
5 | model: Button,
6 |
7 | /**
8 | * Deactivate all buttons, except one passed
9 | * @param {Object} except Model to ignore
10 | * @param {Boolean} r Recursive flag
11 | *
12 | * @return void
13 | * */
14 | deactivateAllExceptOne(except, r) {
15 | this.forEach((model, index) => {
16 | if (model !== except) {
17 | model.set('active', false);
18 | if (r && model.get('buttons').length)
19 | model.get('buttons').deactivateAllExceptOne(except, r);
20 | }
21 | });
22 | },
23 |
24 | /**
25 | * Deactivate all buttons
26 | * @param {String} ctx Context string
27 | *
28 | * @return void
29 | * */
30 | deactivateAll(ctx) {
31 | var context = ctx || '';
32 | this.forEach((model, index) => {
33 | if (model.get('context') == context) {
34 | model.set('active', false);
35 | if (model.get('buttons').length)
36 | model.get('buttons').deactivateAll(context);
37 | }
38 | });
39 | },
40 |
41 | /**
42 | * Disables all buttons
43 | * @param {String} ctx Context string
44 | *
45 | * @return void
46 | * */
47 | disableAllButtons(ctx) {
48 | var context = ctx || '';
49 | this.forEach((model, index) => {
50 | if (model.get('context') == context) {
51 | model.set('disable', true);
52 | if (model.get('buttons').length)
53 | model.get('buttons').disableAllButtons(context);
54 | }
55 | });
56 | },
57 |
58 | /**
59 | * Disables all buttons, except one passed
60 | * @param {Object} except Model to ignore
61 | * @param {Boolean} r Recursive flag
62 | *
63 | * @return void
64 | * */
65 | disableAllButtonsExceptOne(except, r) {
66 | this.forEach((model, index) => {
67 | if (model !== except) {
68 | model.set('disable', true);
69 | if (r && model.get('buttons').length)
70 | model.get('buttons').disableAllButtonsExceptOne(except, r);
71 | }
72 | });
73 | }
74 | });
75 |
--------------------------------------------------------------------------------
/grapesjs/src/panels/model/Panel.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var Buttons = require('./Buttons');
3 |
4 | module.exports = Backbone.Model.extend({
5 | defaults: {
6 | id: '',
7 | content: '',
8 | visible: true,
9 | buttons: [],
10 | attributes: {}
11 | },
12 |
13 | initialize(options) {
14 | this.btn = this.get('buttons') || [];
15 | this.buttons = new Buttons(this.btn);
16 | this.set('buttons', this.buttons);
17 | }
18 | });
19 |
--------------------------------------------------------------------------------
/grapesjs/src/panels/model/Panels.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var Panel = require('./Panel');
3 |
4 | module.exports = Backbone.Collection.extend({
5 | model: Panel
6 | });
7 |
--------------------------------------------------------------------------------
/grapesjs/src/panels/view/ButtonsView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var ButtonView = require('./ButtonView');
3 |
4 | module.exports = Backbone.View.extend({
5 | initialize(o) {
6 | this.opt = o || {};
7 | this.config = this.opt.config || {};
8 | this.pfx = this.config.stylePrefix || '';
9 | this.parentM = this.opt.parentM || null;
10 | this.listenTo(this.collection, 'add', this.addTo);
11 | this.listenTo(this.collection, 'reset remove', this.render);
12 | this.className = this.pfx + 'buttons';
13 | },
14 |
15 | /**
16 | * Add to collection
17 | * @param Object Model
18 | *
19 | * @return Object
20 | * */
21 | addTo(model) {
22 | this.addToCollection(model);
23 | },
24 |
25 | /**
26 | * Add new object to collection
27 | * @param Object Model
28 | * @param Object Fragment collection
29 | *
30 | * @return Object Object created
31 | * */
32 | addToCollection(model, fragmentEl) {
33 | var fragment = fragmentEl || null;
34 | var viewObject = ButtonView;
35 |
36 | var view = new viewObject({
37 | model,
38 | config: this.config,
39 | parentM: this.parentM
40 | });
41 | var rendered = view.render().el;
42 |
43 | if (fragment) {
44 | fragment.appendChild(rendered);
45 | } else {
46 | this.$el.append(rendered);
47 | }
48 |
49 | return rendered;
50 | },
51 |
52 | render() {
53 | var fragment = document.createDocumentFragment();
54 | this.$el.empty();
55 |
56 | this.collection.each(function(model) {
57 | this.addToCollection(model, fragment);
58 | }, this);
59 |
60 | this.$el.append(fragment);
61 | this.$el.attr('class', _.result(this, 'className'));
62 | return this;
63 | }
64 | });
65 |
--------------------------------------------------------------------------------
/grapesjs/src/panels/view/PanelsView.js:
--------------------------------------------------------------------------------
1 | var Backbone = require('backbone');
2 | var PanelView = require('./PanelView');
3 |
4 | module.exports = Backbone.View.extend({
5 | initialize(o) {
6 | this.opt = o || {};
7 | this.config = this.opt.config || {};
8 | this.pfx = this.config.stylePrefix || '';
9 | this.listenTo(this.collection, 'add', this.addTo);
10 | this.listenTo(this.collection, 'reset', this.render);
11 | this.className = this.pfx + 'panels';
12 | },
13 |
14 | /**
15 | * Add to collection
16 | * @param Object Model
17 | *
18 | * @return Object
19 | * @private
20 | * */
21 | addTo(model) {
22 | this.addToCollection(model);
23 | },
24 |
25 | /**
26 | * Add new object to collection
27 | * @param Object Model
28 | * @param Object Fragment collection
29 | * @param integer Index of append
30 | *
31 | * @return Object Object created
32 | * @private
33 | * */
34 | addToCollection(model, fragmentEl) {
35 | const fragment = fragmentEl || null;
36 | const config = this.config;
37 | const el = model.get('el');
38 | const view = new PanelView({
39 | el,
40 | model,
41 | config
42 | });
43 | const rendered = view.render().el;
44 | const appendTo = model.get('appendTo');
45 |
46 | // Do nothing if the panel was requested to be another element
47 | if (el) {
48 | } else if (appendTo) {
49 | var appendEl = document.querySelector(appendTo);
50 | appendEl.appendChild(rendered);
51 | } else {
52 | if (fragment) {
53 | fragment.appendChild(rendered);
54 | } else {
55 | this.$el.append(rendered);
56 | }
57 | }
58 |
59 | view.initResize();
60 | return rendered;
61 | },
62 |
63 | render() {
64 | const $el = this.$el;
65 | const frag = document.createDocumentFragment();
66 | $el.empty();
67 | this.collection.each(model => this.addToCollection(model, frag));
68 | $el.append(frag);
69 | $el.attr('class', this.className);
70 | return this;
71 | }
72 | });
73 |
--------------------------------------------------------------------------------
/grapesjs/src/parser/config/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | textTags: ['br', 'b', 'i', 'u', 'a', 'ul', 'ol']
3 | };
4 |
--------------------------------------------------------------------------------
/grapesjs/src/parser/index.js:
--------------------------------------------------------------------------------
1 | module.exports = () => {
2 | var c = {},
3 | defaults = require('./config/config'),
4 | parserCss = require('./model/ParserCss'),
5 | parserHtml = require('./model/ParserHtml');
6 | var pHtml, pCss;
7 |
8 | return {
9 | compTypes: '',
10 |
11 | /**
12 | * Name of the module
13 | * @type {String}
14 | * @private
15 | */
16 | name: 'Parser',
17 |
18 | /**
19 | * Initialize module. Automatically called with a new instance of the editor
20 | * @param {Object} config Configurations
21 | * @param {Array