diff --git a/src/commands/view/InsertCustom.js b/src/commands/view/InsertCustom.js index 16710d798..374e7099f 100644 --- a/src/commands/view/InsertCustom.js +++ b/src/commands/view/InsertCustom.js @@ -10,12 +10,11 @@ define(['backbone', './SelectPosition'], * Run method * @private * */ - run: function(em, sender){ + run: function(em, sender, options){ this.enable(); - this.em = em; - this.sender = sender; - this.opt = sender.get('options') || {}; - this.content = this.opt.content; + this.em = em; + this.sender = sender; + this.opt = options || {}; }, enable: function(){ @@ -42,7 +41,7 @@ define(['backbone', './SelectPosition'], this.enable(); if(this.em) - this.em.initChildrenComp(model); + this.em.editor.initChildrenComp(model); this.afterInsert(model, this); }, @@ -68,16 +67,7 @@ define(['backbone', './SelectPosition'], * @private * */ buildContent: function(){ - var result = {}; - if(typeof this.content === 'string'){ - result = { - content : this.content, - tagName : 'span', - }; - }else if(typeof this.content === 'object'){ - result = this.content; - } - return result; + return this.opt.content; }, }); }); \ No newline at end of file diff --git a/src/demo.js b/src/demo.js index ff9ab41bb..b977949ac 100644 --- a/src/demo.js +++ b/src/demo.js @@ -9,41 +9,35 @@ require(['config/require-config'], function() { container : '#gjs', height: '100%', fromElement: true, - //components: '
GrapesJS
WEB
TEMPLATE
EDITOR
Build your templates without coding
All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
Try it now
ASSET MANAGER
Manage your images with Asset Manager
You can create image blocks with the command from the left panel and edit them with double click
At the moment uploading of new images is not allowed in demo, so there is only some random images.
Blocks
Each element of the HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style
Small
Some random list
+ Small feature 1
+ Small feature 2
+ Small feature 3
+ Small feature 4
Price 1
Medium
Some random list
+ Medium feature 1
+ Medium feature 2
+ Medium feature 3
+ Medium feature 4
Price 2
Large
Some random list
+ Large feature 1
+ Large feature 2
+ Large feature 3
+ Large feature 4
Price 3
', - //style: '#c63{width:100%;min-height:550px;background:url("./img/bg-gr-v.png") repeat left top scroll, url("http://www.freewhd.com/wp-content/uploads/2014/01/work-desk-14949.jpg") no-repeat center center scroll;}#c64{width:90%;max-width:1100px;min-height:75px;padding:7px 7px 7px 7px;margin:0 auto;}#c65{width:100%;padding:25px 7px 7px 7px;}#c66{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c67{padding:10px 10px 10px 10px;width:130px;min-height:50px;background-color:#ffffff;border-radius:5px;color:#4d114f;font-size:23px;text-align:center;line-height:30px;}#c68{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c69{float:right;padding:7px 7px 7px 7px;}#c70{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c71{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c72{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c73{clear:both;}#c74{padding:7px 7px 7px 7px;width:670px;min-height:57px;font-size:40px;color:#ffffff;font-family:Helvetica, serif;font-weight:100;margin:100px 0px 0px 0px;}#c75{padding:10px 10px 10px 10px;width:599px;min-height:80px;color:#c6c6c6;font-family:Helvetica, serif;font-weight:100;line-height:26px;}#c76{padding:10px 10px 10px 10px;width:190px;min-height:50px;font-weight:100;color:#ffffff;font-size:20px;text-align:center;letter-spacing:3px;line-height:30px;background-color:#d983a6;border-radius:5px;margin:15px 0px 0px 0px;}#c77{min-height:200px;background-color:#ffffff;}#c78{width:90%;max-width:1100px;min-height:75px;padding:100px 7px 7px 7px;margin:0 auto;}#c79{float:left;}#c80{float:left;margin:150px 0px 0px 100px;padding:7px 7px 7px 7px;}#c81{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;}#c82{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:25px;}#c83{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:17px;line-height:25px;font-weight:100;width:450px;}#c84{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:13px;line-height:20px;font-weight:100;width:450px;}#c85{clear:both;}#c86{min-height:500px;background-color:#222222;}#c87{width:90%;max-width:1100px;min-height:75px;padding:70px 7px 70px 7px;margin:0 auto;}#c88{padding:7px 7px 7px 7px;min-height:35px;color:#fff;font-size:25px;text-align:center;}#c89{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;text-align:center;width:700px;margin:0 auto;font-weight:100;}#c90{margin:70px 0 0 0;padding:7px 7px 7px 7px;}#c91{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c92{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d983a6;border-radius:5px;}#c93{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c94{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c95{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c96{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c97{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c98{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c99{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c100{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c101{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#da78a0;border-radius:5px;}#c102{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c103{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c104{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c105{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c106{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c107{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c108{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c109{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c110{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d66a96;border-radius:5px;}#c111{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c112{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c113{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c114{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c115{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c116{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c117{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c118{clear:both;}', - storage:{ autoload: 0 }, + commands: { defaults : [{ id: 'open-github', - run: function(em, sender){ + run: function(editor, sender){ sender.set('active',false); window.open('https://github.com/artf/grapesjs','_blank'); - }, - stop: function(){} + } },{ id: 'undo', - run: function(em, sender){ + run: function(editor, sender){ sender.set('active',false); - em.UndoManager.undo(); - }, - stop: function(){} + editor.UndoManager.undo(); + } },{ id: 'redo', - run: function(em, sender){ + run: function(editor, sender){ sender.set('active',false); - em.UndoManager.redo(); - }, - stop: function(){} + editor.UndoManager.redo(); + } },{ id: 'clean-all', - run: function(em, sender){ + run: function(editor, sender){ sender.set('active',false); if(confirm('Are you sure to clean the canvas?')){ - var comps = em.DomComponents.clear(); + var comps = editor.DomComponents.clear(); } - }, - stop: function(){} + } }], }, assetManager: { @@ -68,52 +62,52 @@ require(['config/require-config'], function() { defaults : [{ id : 'commands', buttons : [{ + id : 'selcomp', + className : 'fa fa fa-mouse-pointer', + command : 'select-comp', + },{ id : 'create', className : 'fa fa-plus-square-o icon-add-comp', command : 'create-comp', attributes : { title : 'Create element' }, buttons : [ { id: 'create2', className: 'fa fa-plus-square-o icon-add-comp', command: 'create-comp', attributes: { title: 'Create element' },}, - { id: 'comp100', className: 'fa fa-square-o icon-comp100', command: 'insert-custom', - attributes : { title : 'Create all-width element' }, + { id: 'comp100', className: 'fa fa-square-o icon-comp100', attributes : { title : 'Create all-width element' }, + command: 'insert-custom', options: { - content : { style: { width: '100%', 'min-height': '75px', 'padding': '7px'}}, - terminateAfterInsert : false, - }, + content: '
', + terminateAfterInsert: false, + }, },{ id: 'comp50', className: 'fa fa-square-o icon-comp50', command: 'insert-custom', attributes : { title : 'Create 2 columns element' }, options: { - content : { style: { width: '100%', 'padding': '7px'},//, 'display': 'table' - components: [ - {style: {width: '50%', 'min-height': '75px', 'padding': '7px', 'float':'left' }}, - {style: {width: '50%', 'min-height': '75px', 'padding': '7px', 'float':'left' }}, - {style: {clear:'both'}}, - ] - }, + content: '
'+ + '
' + + '
' + + '
' + + '
', }, },{ id: 'comp30', className: 'fa fa-square-o icon-comp30', command: 'insert-custom', attributes : { title : 'Create 3 columns element' }, options: { - content : { style: { width: '100%', 'padding': '7px'},//, 'display': 'table' - components: [ - {style: {width: '33.333%', 'min-height': '75px', 'padding': '7px', 'float':'left' }}, - {style: {width: '33.333%', 'min-height': '75px', 'padding': '7px', 'float':'left' }}, - {style: {width: '33.333%', 'min-height': '75px', 'padding': '7px', 'float':'left' }}, - {style: {clear:'both'}}, - ] - }, + content: '
'+ + '
' + + '
' + + '
' + + '
' + + '
', }, }, ] }, //{ id: 'remove', className: 'fa fa-trash-o icon-rm', command: 'delete-comp', attributes : { title: 'Remove element' }, }, //{ id: 'resize', className: 'fa fa-arrows-alt', command: 'resize-comp', attributes : { title: 'Resize' }, }, - /*{ - id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' }, - options: { content: '{{ VAR11 }}', terminateAfterInsert: true, }, - },*/ + //{ + //id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' }, + //options: { content: '{{ VAR11 }}', terminateAfterInsert: true, }, + //}, + - /* ], },{ id : 'options', @@ -201,7 +195,6 @@ require(['config/require-config'], function() { },{ name: 'Flex Parent', property: 'label-parent-flex', - type: 'integer', },{ name : 'Direction', property : 'flex-direction', @@ -228,6 +221,21 @@ require(['config/require-config'], function() { title : 'Column reverse', className : 'icons-flex icon-dir-col-rev', }], + },{ + name : 'Wrap', + property : 'flex-wrap', + type : 'radio', + defaults : 'nowrap', + list : [{ + value : 'nowrap', + title : 'Single line', + },{ + value : 'wrap', + title : 'Multiple lines', + },{ + value : 'wrap-reverse', + title : 'Multiple lines reverse', + }], },{ name : 'Justify', property : 'justify-content', @@ -279,7 +287,6 @@ require(['config/require-config'], function() { },{ name: 'Flex Children', property: 'label-parent-flex', - type: 'integer', },{ name: 'Order', property: 'order', diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js index 869e0ff44..0c10ae6c0 100644 --- a/src/panels/view/ButtonView.js +++ b/src/panels/view/ButtonView.js @@ -155,7 +155,7 @@ function(Backbone, require) { this.parentM.set('active', true, { silent: true }).trigger('checkActive'); if(command) - command.run(editor, this.model); + command.run(editor, this.model, this.model.get('options')); }else{ this.$el.removeClass(this.activeCls); @@ -165,7 +165,7 @@ function(Backbone, require) { this.parentM.set('active', false, { silent: true }).trigger('checkActive'); if(command) - command.stop(editor, this.model); + command.stop(editor, this.model, this.model.get('options')); } },