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

- Updated demo scripts 

- Fixed image 'ghosts' on drag
- Fixed unit select inside composite properties
- Added new way to manage default components
pull/4/head
Artur Arseniev 10 years ago
parent
bc223d9bf6
commit
85a45db92d
30 changed files with 638 additions and 385 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 3
      README.md
  3. 2
      bower.json
  4. 2
      dist/css/grapes.min.css
  5. 14
      dist/grapes.min.js
  6. 2
      package.json
  7. 8
      src/asset_manager/main.js
  8. 13
      src/code_manager/model/HtmlGenerator.js
  9. 7
      src/commands/main.js
  10. 3
      src/commands/view/ImageComponent.js
  11. 5
      src/commands/view/InsertCustom.js
  12. 1
      src/commands/view/OpenLayers.js
  13. 22
      src/commands/view/SelectComponent.js
  14. 265
      src/demo.js
  15. 3
      src/dom_components/config/config.js
  16. 6
      src/dom_components/main.js
  17. 2
      src/dom_components/view/ComponentImageView.js
  18. 21
      src/dom_components/view/ComponentView.js
  19. 43
      src/editor/model/Editor.js
  20. 26
      src/navigator/view/ItemView.js
  21. 2
      src/style_manager/config/config.js
  22. 4
      src/style_manager/templates/sector.html
  23. 5
      src/style_manager/view/PropertyView.js
  24. 16
      src/style_manager/view/SectorView.js
  25. 63
      styles/css/main.css
  26. 2
      styles/css/main.css.map
  27. 58
      styles/scss/main.scss

1
.gitignore
View File

@ -6,6 +6,7 @@ style/.sass-cache/
grapes.sublime-project
grapes.sublime-workspace
img/
private/
vendor/
node_modules/

3
README.md
View File

@ -104,6 +104,9 @@ var config = {
// Where to render editor (eg. #myId)
container: '',
// Enable/Disable the possibility to copy (ctrl + c) and paste (ctrl + v) elements
copyPaste : true,
// Enable/Disable undo manager
undoManager: true,

2
bower.json
View File

@ -1,7 +1,7 @@
{
"name": "grapesjs",
"description": "Open source Web Template Editor",
"version": "0.0.51",
"version": "0.1.0",
"author": "Artur Arseniev",
"homepage": "http://grapesjs.com",
"main": [

2
dist/css/grapes.min.css
View File

File diff suppressed because one or more lines are too long

14
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "grapesjs",
"description": "Open source Web Template Editor",
"version": "0.0.51",
"version": "0.1.0",
"author": "Artur Arseniev",
"license": "BSD-3-Clause",
"homepage": "http://grapesjs.com",

8
src/asset_manager/main.js
View File

@ -59,8 +59,12 @@ define(function(require) {
this.am.collection.onSelect = f;
},
render : function(){
if(!this.rendered)
/**
* Render
* @param {Boolean} f Force to render
*/
render : function(f){
if(!this.rendered || f)
this.rendered = this.am.render().$el.add(this.fu.render().$el);
return this.rendered;
},

13
src/code_manager/model/HtmlGenerator.js
View File

@ -17,19 +17,30 @@ define(['backbone'],
coll.each(function(m){
var tag = m.get('tagName'), // Tag name
sTag = 0, // Single tag
attr = '', // Attributes string
cln = m.get('components'); // Children
_.each(m.get('attributes'),function(value, prop){
if(prop == 'onmousedown')
return;
attr += value && prop!='style' ? ' ' + prop + '="' + value + '" ' : '';
});
code += '<'+tag+' id="'+m.cid+'"' + attr + '>' + m.get('content');
if(m.get('type') == 'image'){
tag = 'img';
sTag = 1;
attr += 'src="' + m.get('src') + '"';
}
code += '<'+tag+' id="'+m.cid+'"' + attr + (sTag ? '/' : '') + '>' + m.get('content');
if(cln.length)
code += this.build(cln);
if(!sTag)
code += '</'+tag+'>';
}, this);
return code;

7
src/commands/main.js
View File

@ -20,6 +20,13 @@ define(function(require) {
this.config = c;
this.Abstract = AbsCommands;
// Load commands passed by configuration
for( var k in c.defaults){
var obj = c.defaults[k];
if(obj.id)
this.add(obj.id, obj);
}
this.defaultCommands = {};
this.defaultCommands['select-comp'] = require('./view/SelectComponent');
this.defaultCommands['create-comp'] = require('./view/CreateComponent');

3
src/commands/view/ImageComponent.js
View File

@ -13,9 +13,12 @@ define(['backbone', './InsertCustom'],
beforeInsert: function(object){
object.type = 'image';
object.style = {};
object.attributes = {};
if (!this.nearToFloat()) {
object.style.display = 'block';
}
// This allow to avoid 'ghosts' on drag
object.attributes.onmousedown = 'return false';
if (this.config.firstCentered && (this.$wp.get(0) == this.posTargetEl.get(0)) ) {
object.style.margin = '0 auto';
}

5
src/commands/view/InsertCustom.js
View File

@ -10,6 +10,7 @@ define(['backbone', './SelectPosition'],
* */
run: function(em, sender){
this.enable();
this.em = em;
this.sender = sender;
this.opt = sender.get('options') || {};
this.content = this.opt.content;
@ -38,6 +39,10 @@ define(['backbone', './SelectPosition'],
this.sender.set('active',false);
else
this.enable();
if(this.em)
this.em.initChildrenComp(model);
this.afterInsert(model, this);
},

1
src/commands/view/OpenLayers.js
View File

@ -13,6 +13,7 @@ define(['Navigator'], function(Layers) {
lyStylePfx = config.layers.stylePrefix || 'nv-';
config.layers.stylePrefix = config.stylePrefix + lyStylePfx;
config.layers.em = em;
var layers = new Layers(collection, config.layers);
this.$layers = layers.render();

22
src/commands/view/SelectComponent.js
View File

@ -109,14 +109,13 @@ define(function() {
onSelect: function(e, el)
{
e.stopPropagation();
if(this.$selected) //Check if already selected before
this.$selected.removeClass('selected-component');
this.$selected = $(el).addClass('selected-component');
if(this.$selected.data('model')){
// Generates too much recursions with JsonGenerator
//this.$selected.data('model').set('previousModel',this.editorModel.get('selectedComponent'));
this.editorModel.set('selectedComponent',this.$selected.data('model')); //Update selected component
this.$selected.data('model').set('status','selected');
var md = this.editorModel.get('selectedComponent');
if(md)
md.set('status','');
var nMd = $(el).data('model');
if(nMd){
this.editorModel.set('selectedComponent', nMd);
nMd.set('status','selected');
}
},
@ -191,11 +190,10 @@ define(function() {
* Stop method
* */
stop: function(){
if(this.editorModel.get('selectedComponent'))
this.editorModel.get('selectedComponent').set('status','');
var sel = this.editorModel.get('selectedComponent');
if(sel)
sel.set('status','');
this.$el.unbind(); //removes all attached events
if(this.$selected) //check if already selected before
this.$selected.removeClass('selected-component');
this.removeBadge();
this.clean();
this.$el.find('*').unbind('mouseover').unbind('mouseout').unbind('click');

265
src/demo.js
View File

@ -15,6 +15,185 @@ require(['src/config/require-config.js'], function() {
paramsStore : { type:'homeTemplate',},
paramsLoad : { type:'homeTemplate',},
},
components: {
defaults : [
//padding:10px;width:130px;min-height:50px;background-color:#ffffff;border-radius:5px;color:#4d114f;font-size:23px;text-align:center;line-height:30px;
{
style: {'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'},
components: [
{
style: {'width':'90%', 'max-width':'1100px', 'min-height':'75px', 'padding':'7px 7px 7px 7px', 'margin':'0 auto'},
components: [
{
style: {'width':'100%','padding':'25px 7px 7px 7px'},
components: [
{
style: {'width':'50%','min-height':'75px','padding':'7px 7px 7px 7px','float':'left'},
components:[
{ type: 'text', content: 'GrapesJS', style:{'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'}}
]
},
{
style: {'width':'50%','min-height':'75px','padding':'7px 7px 7px 7px','float':'left'},
components: [
{
style: {'float':'right', 'padding':'7px 7px 7px 7px'},
components: [
{ type: 'text', content: 'WEB', style:{'padding': '10px 10px 10px 10px', 'width': '130px', 'min-height': '50px', 'float': 'left', 'color': '#ffffff', 'text-align': 'center', 'font-size': '15px', 'line-height':'30px'} },
{ type: 'text', content: 'TEMPLATE', style:{'padding': '10px 10px 10px 10px', 'width': '130px', 'min-height': '50px', 'float': 'left', 'color': '#ffffff', 'text-align': 'center', 'font-size': '15px', 'line-height':'30px'} },
{ type: 'text', content: 'EDITOR', style:{'padding': '10px 10px 10px 10px', 'width': '130px', 'min-height': '50px', 'float': 'left', 'color': '#ffffff', 'text-align': 'center', 'font-size': '15px', 'line-height':'30px'} },
]
},
]
},
{style: {'clear':'both'}}
]
},
{
type: 'text',
content: 'Build your templates without coding',
style: { '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'}
},
{
type: 'text',
content: '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',
style: { 'padding':'10px 10px 10px 10px', 'width':'599px', 'min-height':'80px', 'color':'#c6c6c6', 'font-family':'Helvetica, serif', 'font-weight':100, 'line-height':'26px'}
},
{
type: 'text',
content: 'Try it now',
style: {'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'}
}
]
},
]
},
{
style: {'min-height': '200px', 'background-color':'#ffffff'},
components:[
{
style: {'width':'90%', 'max-width':'1100px', 'min-height':'75px', 'padding':'100px 7px 7px 7px', 'margin':'0 auto'},
components: [
{ type: 'image', src: './img/phone-app.png', attributes: {'onmousedown': 'return false'}, style: { 'float': 'left'}},
{
style: { 'float': 'left', 'margin':'150px 0px 0px 100px', 'padding':'7px 7px 7px 7px' },
components: [
{
type: 'text', content: 'ASSET MANAGER',
style: {'padding':'7px 7px 7px 7px', 'min-height':'35px', 'color':'#b1b1b1', 'font-size':'15px'}
},
{
type: 'text', content: 'Manage your images with Asset Manager',
style: {'padding':'7px 7px 7px 7px', 'min-height':'35px', 'color':'#444444', 'font-size':'25px'}
},
{
type: 'text', content: 'You can create image blocks with the command from the left panel and edit them with double click',
style: {'padding':'7px 7px 7px 7px', 'min-height':'35px', 'color':'#444444', 'font-size':'17px', 'line-height':'25px','font-weight':100, 'width':'450px'}
},
{
type: 'text', content: 'At the moment uploading of new images is not allowed in demo, so there is only some random images.',
style: {'padding':'7px 7px 7px 7px', 'min-height':'35px', 'color':'#444444', 'font-size':'13px', 'line-height':'20px','font-weight':100, 'width':'450px'}
}
]
},
{style: {'clear':'both'}}
]
}
]
},
{
style: {'min-height': '500px', 'background-color':'#222222'},
components: [
{
style: {'width':'90%', 'max-width':'1100px', 'min-height':'75px', 'padding':'70px 7px 70px 7px', 'margin':'0 auto'},
components: [
{
type: 'text', content: 'Blocks',
style: {'padding':'7px 7px 7px 7px', 'min-height':'35px', 'color':'#fff', 'font-size':'25px','text-align':'center'}
},
{
type: 'text', content: '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',
style: {'padding':'7px 7px 7px 7px', 'min-height':'35px', 'color':'#b1b1b1', 'font-size':'15px', 'text-align':'center', 'width':'700px', 'margin':'0 auto', 'font-weight':100 }
},
{
style: {'margin':'70px 0 0 0','padding':'7px 7px 7px 7px'},
components: [
{
style: {'width':'33%','min-height':'75px','padding':'7px 7px 7px 7px','float':'left'},
components:[
{
style: {'margin': '0 auto', 'width':'300px', 'min-height':'350px','padding':'0 20px 0 20px','background-color':'#d983a6','border-radius':'5px'},
components: [
{ type: 'text', content:'Small', style:{ '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'}},
{ type: 'text', content:'Some random list', style:{ 'font-weight':100, 'color':'#ffffff', 'letter-spacing':'3px', 'text-align':'center', 'font-size':'15px', 'margin':'0 -20px 0 -20px','padding':'50px 20px 50px 20px'}},
{ type: 'text', content:'+ Small feature 1', style:{ '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'}},
{ type: 'text', content:'+ Small feature 2', style:{ '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'}},
{ type: 'text', content:'+ Small feature 3', style:{ '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'}},
{ type: 'text', content:'+ Small feature 4', style:{ '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'}},
{ type: 'text', content:'Price 1', style:{ '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'}},
]
}
]
},
{
style: {'width':'33%','min-height':'75px','padding':'7px 7px 7px 7px','float':'left'},
components:[
{
style: {'margin': '0 auto', 'width':'300px', 'min-height':'350px','padding':'0 20px 0 20px','background-color':'#da78a0','border-radius':'5px'},
components: [
{ type: 'text', content:'Medium', style:{ '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'}},
{ type: 'text', content:'Some random list', style:{ 'font-weight':100, 'color':'#ffffff', 'letter-spacing':'3px', 'text-align':'center', 'font-size':'15px', 'margin':'0 -20px 0 -20px','padding':'50px 20px 50px 20px'}},
{ type: 'text', content:'+ Medium feature 1', style:{ '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'}},
{ type: 'text', content:'+ Medium feature 2', style:{ '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'}},
{ type: 'text', content:'+ Medium feature 3', style:{ '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'}},
{ type: 'text', content:'+ Medium feature 4', style:{ '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'}},
{ type: 'text', content:'Price 2', style:{ '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'}},
]
}
]
},
{
style: {'width':'33%','min-height':'75px','padding':'7px 7px 7px 7px','float':'left'},
components:[
{
style: {'margin': '0 auto', 'width':'300px', 'min-height':'350px','padding':'0 20px 0 20px','background-color':'#d66a96','border-radius':'5px'},
components: [
{ type: 'text', content:'Large', style:{ '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'}},
{ type: 'text', content:'Some random list', style:{ 'font-weight':100, 'color':'#ffffff', 'letter-spacing':'3px', 'text-align':'center', 'font-size':'15px', 'margin':'0 -20px 0 -20px','padding':'50px 20px 50px 20px'}},
{ type: 'text', content:'+ Large feature 1', style:{ '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'}},
{ type: 'text', content:'+ Large feature 2', style:{ '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'}},
{ type: 'text', content:'+ Large feature 3', style:{ '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'}},
{ type: 'text', content:'+ Large feature 4', style:{ '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'}},
{ type: 'text', content:'Price 3', style:{ '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'}},
]
}
]
},//#d8779e #d86895
{style: {'clear':'both'}}
]
},
]
}
]
}
],
},
commands: {
defaults : [{
id: 'open-github',
run: function(em, sender){
sender.set('active',false);
window.open('https://github.com/artf/grapesjs','_blank');
},
stop: function(){}
}],
},
assetManager: {
storageType : '',
storeOnChange : true,
@ -27,6 +206,9 @@ require(['src/config/require-config.js'], function() {
{ type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', date: '2015-02-01',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', date: '2015-02-01',height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', date: '2015-02-01',height:350, width:250},
{ type: 'image', src : 'http://www.freewhd.com/wp-content/uploads/2014/01/work-desk-14949.jpg', date: '2015-02-01',height:1080, width:1728},
{ type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320},
{ type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
]
},
@ -37,36 +219,61 @@ require(['src/config/require-config.js'], function() {
id : 'select',
className : 'fa fa-mouse-pointer',
command : 'select-comp',
attributes : { title : 'Select' }
attributes : { title : 'Select elements' }
},{
id : 'create',
className : 'fa fa-plus-square-o',
className : 'fa fa-plus-square-o icon-add-comp',
command : 'create-comp',
attributes : { title : 'Create' },
attributes : { title : 'Create element' },
buttons : [
{ id: 'create2', className: 'fa fa-plus-square-o', command: 'create-comp', attributes: { title: 'Create' },},
{ id: 'box100', className: 'fa fa-square-o', command: 'insert-custom',
attributes : { title : 'Create all-width box' },
{ 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' },
options: {
content : { style: { width: '100%', 'min-height': '75px', 'padding': '7px'}},
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'}},
]
},
{ id: 'remove', className: 'fa fa-trash-o', command: 'delete-comp', attributes : { title: 'Remove' }, },
{ id: 'move', className: 'fa fa-arrows', command: 'move-comp', attributes : { title: 'Move' }, },
},
},{ 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'}},
]
},
},
},
]
},
{ id: 'remove', className: 'fa fa-trash-o icon-rm', command: 'delete-comp', attributes : { title: 'Remove element' }, },
{ id: 'move', className: 'fa fa-arrows', command: 'move-comp', attributes : { title: 'Move elements' }, },
//{ id: 'resize', className: 'fa fa-arrows-alt', command: 'resize-comp', attributes : { title: 'Resize' }, },
{ id: 'text', className: 'fa fa-font' , command: 'text-comp', attributes : { title: 'Text' }, },
{ id: 'image', className: 'fa fa-picture-o', command: 'image-comp', attributes : { title: 'Image' }, },
{ id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' },
{ id: 'text', className: 'fa fa-font' , command: 'text-comp', attributes : { title: 'Create text element' }, },
{ id: 'image', className: 'fa fa-picture-o', command: 'image-comp', attributes : { title: 'Create image element' }, },
/*{ id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' },
options: { content: '{{ VAR11 }}', terminateAfterInsert: true, },
},
},*/
],
},{
id : 'options',
buttons : [
{ id: 'visibility', className: 'fa fa-eye', command: 'sw-visibility', active: true, context: 'sw-visibility', attributes: { title: 'View components' }, },
{ id: 'export', className: 'fa fa-code', command: 'export-template', attributes: { title: 'View code' }, },
{ id: 'view-github', className: 'fa fa-github', command: 'open-github', attributes: { title: 'View on Github' }, },
],
},{
id : 'views',
@ -275,61 +482,61 @@ require(['src/config/require-config.js'], function() {
list : [{
value : 'Arial, Helvetica, sans-serif',
name : 'Arial',
style : 'font-family: Arial, Helvetica, sans-serif',
style : 'font-family: Arial, Helvetica, sans-serif; font-size:15px;',
},{
value : '"Arial Black", Gadget, sans-serif',
style : 'font-family: "Arial Black", Gadget, sans-serif',
style : 'font-family: "Arial Black", Gadget, sans-serif; font-size:15px;',
name : 'Arial Black',
},{
value : '"Brush Script MT", sans-serif',
style : 'font-family: "Brush Script MT", sans-serif',
style : 'font-family: "Brush Script MT", sans-serif; font-size:15px;',
name : 'Brush Script MT',
},{
value : '"Comic Sans MS", cursive, sans-serif',
style : 'font-family: "Comic Sans MS", cursive, sans-serif',
style : 'font-family: "Comic Sans MS", cursive, sans-serif; font-size:15px;',
name : 'Comica Sans',
},{
value : '"Courier New", Courier, monospace',
style : 'font-family: "Courier New", Courier, monospace',
style : 'font-family: "Courier New", Courier, monospace; font-size:15px;',
name : 'Courier New',
},{
value : 'Georgia, serif',
style : 'font-family: Georgia, serif',
style : 'font-family: Georgia, serif; font-size:15px;',
name : 'Georgia',
},{
value : 'Helvetica, serif',
style : 'font-family: Helvetica, serif',
style : 'font-family: Helvetica, serif; font-size:15px;',
name : 'Helvetica',
},{
value : 'Impact, Charcoal, sans-serif',
style : 'font-family: Impact, Charcoal, sans-serif',
style : 'font-family: Impact, Charcoal, sans-serif; font-size:15px;',
name : 'Impact',
},{
value : '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
style : 'font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif',
style : 'font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;',
name : 'Lucida Sans',
},{
value : 'Tahoma, Geneva, sans-serif',
style : 'font-family: Tahoma, Geneva, sans-serif',
style : 'font-family: Tahoma, Geneva, sans-serif; font-size:15px;',
name : 'Tahoma',
},{
value : '"Times New Roman", Times, serif',
style : 'font-family: "Times New Roman", Times, serif',
style : 'font-family: "Times New Roman", Times, serif; font-size:15px;',
name : 'Times New Roman',
},{
value : '"Trebuchet MS", Helvetica, sans-serif',
style : 'font-family: "Trebuchet MS", Helvetica, sans-serif',
style : 'font-family: "Trebuchet MS", Helvetica, sans-serif; font-size:15px;',
name : 'Trebuchet',
},{
value : 'Verdana, Geneva, sans-serif',
style : 'font-family: Verdana, Geneva, sans-serif',
style : 'font-family: Verdana, Geneva, sans-serif; font-size:15px;',
name : 'Verdana',
}],
},{
name : 'Font size',
property : 'font-size',
type : 'integer',
units : ['px','em'],
units : ['px','em', 'rem', '%'],
defaults : '12',
min : 0,
},{
@ -350,7 +557,7 @@ require(['src/config/require-config.js'], function() {
name : 'Letter spacing',
property : 'letter-spacing',
type : 'integer',
units : ['px'],
units : ['px','em','%'],
defaults : 'normal',
},{
name: 'Font color',
@ -361,7 +568,7 @@ require(['src/config/require-config.js'], function() {
name : 'Line height',
property : 'line-height',
type : 'integer',
units : ['px'],
units : ['px','em','%'],
defaults : 'normal',
},{
name : 'Text align',

3
src/dom_components/config/config.js
View File

@ -11,10 +11,11 @@ define(function () {
stylable : ['background','background-color','background-image', 'background-repeat','background-attachment','background-position'],
movable : false,
badgable : false,
components: [],
},
// Could be used for default components
components : {},
defaults : [],
rte : {},

6
src/dom_components/main.js
View File

@ -26,6 +26,12 @@ define(function(require) {
c.wrapper.attributes = {};
c.wrapper.attributes.id = 'wrapper';
// If there is no components try to append defaults
if(!c.wrapper.components.length && c.defaults.length){
console.log('Set defaults');
c.wrapper.components = c.defaults;
}
if(!c.wrapper.style)
c.wrapper.style = {};
c.wrapper.style.position = 'relative';

2
src/dom_components/view/ComponentImageView.js
View File

@ -47,7 +47,7 @@ define(['backbone', './ComponentView'],
var that = this;
if(this.modal && this.am){
this.modal.setTitle('Select image');
this.modal.setContent(this.am.render());
this.modal.setContent(this.am.render(1));
this.am.setTarget(this.model);
this.modal.show();
this.am.onSelect(function(){

21
src/dom_components/view/ComponentView.js
View File

@ -15,16 +15,37 @@ define(['backbone', './ComponentsView'],
initialize: function(opt){
this.config = opt.config;
this.pfx = this.config.stylePrefix;
this.components = this.model.get('components');
this.attr = this.model.get("attributes");
this.classe = this.attr.class || [];
this.listenTo(this.model, 'destroy remove', this.remove);
this.listenTo(this.model, 'change:style', this.updateStyle);
this.listenTo(this.model, 'change:attributes', this.updateAttributes);
this.listenTo(this.model, 'change:status', this.updateStatus);
this.$el.data("model", this.model);
this.$el.data("model-comp", this.components);
},
/**
* Update item on status change
* @param Event
* */
updateStatus: function(e)
{
var s = this.model.get('status'),
pfx = this.pfx;
switch(s) {
case 'selected':
this.$el.addClass(pfx + 'selected');
break;
case 'moving':
break;
default:
this.$el.removeClass(pfx + 'selected');
}
},
/**
* Get classes from attributes.
* This method is called before initialize

43
src/editor/model/Editor.js
View File

@ -30,6 +30,7 @@ define([
defaults:{
clipboard : null,
selectedComponent : null,
previousModel : null,
changesCount : 0,
},
@ -59,10 +60,11 @@ define([
initComponents: function()
{
var cfg = this.config.components,
comp = this.loadComponentsTree(),
comp = this.loadComponents(),
cmpStylePfx = cfg.stylePrefix || 'comp-';
cfg.stylePrefix = this.config.stylePrefix + cmpStylePfx;
if(comp)
cfg.wrapper = comp;
@ -79,8 +81,13 @@ define([
this.cmp = new DomComponents(cfg);
if(this.stm.isAutosave()){ // TODO Currently doesn't listen already created models
this.updateComponents( this.cmp.getComponent(), null, { avoidStore : 1 });
if(this.stm.isAutosave()){
var md = this.cmp.getComponent();
this.updateComponents( md, null, { avoidStore : 1 });
// Call UndoManager here so it's possible to call it also for children inside
this.initUndoManager();
this.initChildrenComp(md);
}
this.set('Components', this.cmp);
@ -200,7 +207,10 @@ define([
/**
* Initialize Undo manager
* */
initUndoManager: function(){
initUndoManager: function()
{
if(this.um)
return;
if(this.cmp && this.config.undoManager){
var that = this;
this.um = new Backbone.UndoManager({
@ -256,7 +266,7 @@ define([
if(this.stm.isAutosave() && updatedCount < this.stm.getChangesBeforeSave()){
return;
}
this.storeComponentsTree();
this.storeComponents();
this.set('changesCount', 0 );
},
@ -280,7 +290,7 @@ define([
*
* @return {Object}
* */
loadComponentsTree: function(){
loadComponents: function(){
var result = null;
try{
result = JSON.parse(this.stm.load(this.compName));
@ -295,7 +305,7 @@ define([
*
* @return void
* */
storeComponentsTree: function(){
storeComponents: function(){
var wrp = this.cmp.getComponent();
if(wrp && this.cm){
var res = this.cm.getCode(wrp, 'json');
@ -316,7 +326,7 @@ define([
// Observe component with Undo Manager
if(this.um)
this.um.register(model.get('components'));
this.um.register(comps);
// Call stopListening for not creating nested listenings
this.stopListening(comps, 'add', this.updateComponents);
@ -331,6 +341,23 @@ define([
this.componentsUpdated();
},
/**
* Init stuff like storage for already existing elements
* @param {Object} model
*/
initChildrenComp: function(model)
{
var comps = model.get('components');
if(comps.length){
comps.each(function(md){
this.updateComponents(md, null, { avoidStore : 1 });
this.initChildrenComp(md);
if(this.um)
this.um.register(md);
}, this);
}
},
/**
* Triggered when some component is removed updated
* @param {Object} model

26
src/navigator/view/ItemView.js
View File

@ -11,12 +11,14 @@ define(['backbone', 'text!./../template/item.html','require'],
initialize: function(o){
this.opt = o;
this.config = o.config;
this.em = o.config.em;
this.sorter = o.sorter || {};
this.pfx = this.config.stylePrefix;
if(typeof this.model.get('open') == 'undefined')
this.model.set('open',false);
this.listenTo(this.model.components, 'remove add change reset', this.checkChildren);
this.listenTo(this.model, 'destroy remove', this.remove);
this.listenTo(this.model, 'change:status', this.updateStatus);
this.listenTo(this.model, 'change:open', this.updateOpening);
this.className = this.pfx + 'item no-select';
this.events = {};
@ -24,6 +26,8 @@ define(['backbone', 'text!./../template/item.html','require'],
this.events['click .'+this.pfx+'title'] = 'toggleOpening';
this.$el.data("model", this.model);
//TODO listen
if(o.config.sortable)
this.events['mousedown > #'+this.pfx+'move'] = 'startSort';
@ -53,6 +57,17 @@ define(['backbone', 'text!./../template/item.html','require'],
* */
toggleOpening: function(e){
e.stopPropagation();
// Selection
if(this.em){
var md = this.em.get('selectedComponent');
if(md){
md.set('status','');
this.model.set('status','selected');
this.em.set('selectedComponent', this.model);
}
}
if(!this.model.components.length)
return;
this.model.set('open', !this.model.get('open') );
@ -87,12 +102,10 @@ define(['backbone', 'text!./../template/item.html','require'],
/**
* Update item on status change
* @param Event
*
* @return void
* */
updateStatus: function(e){
updateStatus: function(e)
{
var s = this.model.get('status'),
pr = this.model.get('previousModel'),
pfx = this.pfx;
switch(s) {
case 'selected':
@ -103,10 +116,6 @@ define(['backbone', 'text!./../template/item.html','require'],
default:
this.$el.removeClass(pfx + 'selected');
}
if(pr){
pr.set('previousModel','');
pr.set('status','');
}
},
/**
@ -193,6 +202,7 @@ define(['backbone', 'text!./../template/item.html','require'],
if(!vis)
this.className += ' ' + pfx + 'hide';
this.$el.attr('class', _.result(this, 'className'));
this.updateOpening();
return this;
},

2
src/style_manager/config/config.js
View File

@ -20,7 +20,7 @@ define(function () {
sectors : [],
// Text to show in case no element selected
textNoElement : 'Select element before using Style Manager',
textNoElement : 'Select an element before using Style Manager',
};
});

4
src/style_manager/templates/sector.html
View File

@ -0,0 +1,4 @@
<div class="<%= pfx %>title">
<i id="<%= pfx %>caret" class="fa"></i>
<%= label %>
</div>

5
src/style_manager/view/PropertyView.js
View File

@ -127,7 +127,8 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
if( (stylable instanceof Array && _.indexOf(stylable, this.property) < 0) || !stylable )
return;
var v = e && e.currentTarget ? this.$input.val() : this.model.get('value'),
value = v + (this.$unit ? this.$unit.val() : ''),
u = this.$unit ? this.$unit.val() : '',
value = v + u,
avSt = opt ? opt.avoidStore : 0;
//The easiest way to deal with radio inputs
@ -136,7 +137,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
if(this.$input)
this.$input.val(v);
this.model.set({ value : v },{ silent : true });
this.model.set({ value : v, unit: u },{ silent : true });
if(this.func)
value = this.func + '(' + value + ')';

16
src/style_manager/view/SectorView.js
View File

@ -1,10 +1,12 @@
define(['backbone','./PropertiesView'],
function (Backbone,PropertiesView) {
define(['backbone', './PropertiesView', 'text!./../templates/sector.html'],
function (Backbone, PropertiesView, sectorTemplate) {
/**
* @class SectorView
* */
return Backbone.View.extend({
template: _.template(sectorTemplate),
events:{},
initialize: function(o) {
@ -12,6 +14,8 @@ define(['backbone','./PropertiesView'],
this.pfx = this.config.stylePrefix;
this.target = o.target || {};
this.open = this.model.get('open');
this.caretR = 'fa-caret-right';
this.caretD = 'fa-caret-down';
this.listenTo( this.model ,'change:open', this.updateOpen);
this.events['click .' + this.pfx + 'title'] = 'toggle';
this.delegateEvents();
@ -35,6 +39,7 @@ define(['backbone','./PropertiesView'],
{
this.$el.addClass(this.pfx + "open");
this.$el.find('.' + this.pfx + 'properties').show();
this.$caret.removeClass(this.caretR).addClass(this.caretD);
},
/**
@ -44,6 +49,7 @@ define(['backbone','./PropertiesView'],
{
this.$el.removeClass(this.pfx + "open");
this.$el.find('.' + this.pfx + 'properties').hide();
this.$caret.removeClass(this.caretD).addClass(this.caretR);
},
/**
@ -57,7 +63,11 @@ define(['backbone','./PropertiesView'],
render : function()
{
this.$el.html('<div class="' + this.pfx + 'title">'+this.model.get('name')+'</div>');
this.$el.html(this.template({
pfx : this.pfx,
label : this.model.get('name'),
}));
this.$caret = this.$el.find('#' + this.pfx + 'caret');
this.renderProperties();
this.$el.attr('class', this.pfx + 'sector no-select');
this.updateOpen();

63
styles/css/main.css
View File

@ -2579,7 +2579,7 @@ html, body, #wte-app, .wte-editor {
.clear {
clear: both; }
.no-select, .wte-com-no-select {
.no-select, .wte-com-no-select, .wte-com-no-select img {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
@ -2683,8 +2683,8 @@ ol.example li.placeholder:before {
outline-offset: -2px;
box-sizing: border-box; }
body .wte-cv-canvas .selected-component {
outline: 3px solid #3b97e3; }
.wte-cv-canvas .wte-comp-selected {
outline: 3px solid #3b97e3 !important; }
div.wte-com-hover {
outline: 1px solid #3b97e3; }
@ -2746,7 +2746,7 @@ div.wte-com-hover-move {
z-index: 4; }
.wte-pn-panel#wte-pn-views-container {
height: 100%;
padding: 50px 0 0;
padding: 52px 0 0;
right: 0;
width: 16.5%;
overflow: auto; }
@ -2945,11 +2945,14 @@ div.wte-com-hover-move {
/*------------------END Field--------------------*/
/*------------------Property--------------------*/
/*------------------END Property--------------------*/ }
.wte-sm-sector #wte-sm-caret {
padding-right: 5px;
font-size: 11px; }
.wte-sm-sector .wte-sm-title {
background-color: #3a3a3a;
font-size: 13px;
letter-spacing: 1px;
padding: 12px 10px 12px 25px;
padding: 12px 10px 12px 20px;
text-shadow: 0 1px 0 #252525;
border-bottom: 1px solid #303030;
border-top: 1px solid #414141;
@ -3149,7 +3152,8 @@ div.wte-com-hover-move {
.wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview {
background-color: white;
height: 100%;
width: 100%; }
width: 100%;
background-size: cover !important; }
.wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-active {
background-color: #4c4c4c; }
.wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box {
@ -3317,6 +3321,8 @@ div.wte-com-hover-move {
float: left;
box-sizing: border-box;
width: 50%; }
.wte-cm-editor-c .CodeMirror {
height: 450px; }
.wte-cm-editor {
font-size: 12px; }
@ -3427,49 +3433,4 @@ div.wte-com-hover-move {
box-shadow: none;
padding: 3px 5px; }
/*********JQuery-UI**********/
.ui-sortable-helper {
opacity: 0.7;
filter: alpha(opacity=70); }
.ui-sort-highlight {
/*ui-sortable-placeholder*/
background: #123;
height: 20px; }
.ui-resizable {
position: relative; }
.ui-resizable-se, .ui-resizable-s, .ui-resizable-e {
position: absolute;
right: 0;
bottom: 0;
cursor: nwse-resize;
height: 15px;
width: 15px;
outline: none !important; }
.ui-resizable-se {
opacity: 0;
filter: alpha(opacity=0);
font-size: 10px;
font-family: FontAwesome; }
.ui-resizable-se::before {
content: "\f065"; }
.ui-resizable:hover > .ui-resizable-se {
opacity: 0.3;
filter: alpha(opacity=30); }
.ui-resizable-s {
height: 10px;
width: 100%;
cursor: ns-resize; }
.ui-resizable-e {
width: 10px;
height: 100%;
cursor: ew-resize; }
/*# sourceMappingURL=main.css.map */

2
styles/css/main.css.map
View File

File diff suppressed because one or more lines are too long

58
styles/scss/main.scss
View File

@ -149,12 +149,12 @@ ol.example li.placeholder:before {position: absolute;}
box-sizing: border-box;
}
.#{$com-prefix}no-select{
.#{$com-prefix}no-select, .#{$com-prefix}no-select img{
@extend .no-select;
}
body .#{$cv-prefix}canvas .selected-component{//TODO
outline: 3px solid $colorBlue;
.#{$cv-prefix}canvas .#{$comp-prefix}selected{//TODO
outline: 3px solid $colorBlue !important;
}
div.#{$com-prefix}hover { outline: 1px solid $colorBlue; }
@ -226,7 +226,7 @@ $leftWidth: 16.5%;
&##{$pn-prefix}views-container{
height: 100%;
padding: 50px 0 0;
padding: 52px 0 0;
right: 0;
width: $leftWidth;
overflow: auto;
@ -436,11 +436,16 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
font-weight: lighter;
text-align:left;
##{$sm-prefix}caret{
padding-right: 5px;
font-size: 11px;
}
.#{$sm-prefix}title{
background-color: $mainDkColor;
font-size: 13px;
letter-spacing: 1px;
padding: 12px 10px 12px 25px;
padding: 12px 10px 12px 20px;
text-shadow: 0 1px 0 $darkTextShadow;
border-bottom: 1px solid $darkBorder;
border-top: 1px solid $lightBorder;
@ -662,6 +667,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
background-color: white;
height: 100%;
width: 100%;
background-size: cover !important;
}
&.#{$sm-prefix}active {
background-color: lighten($mainDkColor, 7%);
@ -862,6 +868,10 @@ $uploadPadding: 150px 10px;
float:left;
box-sizing: border-box;
width:50%;
.CodeMirror{
height: 450px;
}
}
.#{$cm-prefix}editor{
font-size: 12px;
@ -959,41 +969,3 @@ $uploadPadding: 150px 10px;
box-shadow: none;
padding: 3px 5px;
}
/*********JQuery-UI**********/
.ui-sortable-helper{
opacity: 0.7; filter: alpha(opacity=70);
}
.ui-sort-highlight{/*ui-sortable-placeholder*/
background:#123;
height:20px;
}
.ui-resizable{ position:relative;}
.ui-resizable-se, .ui-resizable-s,.ui-resizable-e{
position:absolute;
right: 0;
bottom:0;
cursor: nwse-resize;
height:15px;
width:15px;
outline: none !important;
}
.ui-resizable-se{
opacity: 0; filter: alpha(opacity=0);
font-size: 10px;
font-family: FontAwesome;
}
.ui-resizable-se::before{
content: "\f065";
}
.ui-resizable:hover > .ui-resizable-se{ opacity: 0.3; filter: alpha(opacity=30); }
.ui-resizable-s{
height:10px;
width:100%;
cursor: ns-resize;
}
.ui-resizable-e{
width:10px;
height:100%;
cursor: ew-resize;
}
Write Preview
Loading…
Cancel
Save