General updates

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .settings/
+.sass-cache/
 .project
 
 private/

Gruntfile.js

@@ -1,6 +1,6 @@
 module.exports = function(grunt) {  
 	
-  var	appPath 	= 'bundle',
+  var	appPath 	= 'src',
   	  	buildPath 	= 'dist',
   	  	configPath 	= 'config/require-config.js';
   

LICENSE.md

@@ -1,6 +1,4 @@
-# Grapes.js
+Copyright (c) 2016, Artur Arseniev
-
-Copyright (c) Artur Arseniev
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,

README.md

@@ -1,12 +1,27 @@
-# README #
+# Grapes
 
-This README would normally document whatever steps are necessary to get your application up and running.
+Grapes is a free and open source WTE (Web Template Editor) for building HTML templates to be used inside sites, webapps, newsletters or anything else. 
+Be aware that is not a 'Website Builder' but a tool to create HTML structure and containers for contents. The great thing about Grapes is that you 
+can customize it, extend it or even integrate with other applications.
 
-### What is this repository for? ###
+<Image>
 
-* Quick summary
+### Install as stand-alone
-* Version
+
-* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
+```sh
+$ npm install
+```
+
+### Usage
+
+### API
+cooming soon - Slate
+
+### Testing
+
+### Contributing
+
+usual pull request
 
 ### How do I get set up? ###
 
@@ -16,14 +31,3 @@ This README would normally document whatever steps are necessary to get your app
 * Database configuration
 * How to run tests
 * Deployment instructions
-
-### Contribution guidelines ###
-
-* Writing tests
-* Code review
-* Other guidelines
-
-### Who do I talk to? ###
-
-* Repo owner or admin
-* Other community or team contact

bundle/dev.js

@@ -1,60 +0,0 @@
-require(['bundle/config/require-config.js'], function() {
-	
-	require(['editor/main'],function (Grapes){
-		var grapes	= new Grapes({
-			storageType: 'local',
-			remoteStorage: {
-				urlStore	: 'http://test.localhost/wte/index.php',
-				urlLoad		: 'http://test.localhost/wte/read.php',
-				paramsStore	: {	type:'homeTemplate',},
-				paramsLoad	: {	type:'homeTemplate',},
-			},
-			assetManager: {
-				storageType			: '',
-				storeOnChange		: true,
-				storeAfterUpload	: true,
-				assets				: [
-					      				   { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', date: '2015-01-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', date: '2015-02-01',height:350, width:250},
-					      				   { 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},
-				      				   ]
-			},
-			styleManager : {},
-			defaultComponents: [	{ style: {'width':'500px', 'height': '35px', 'margin':'0 auto',}, },
-			                    	{ style: {'width':'500px', 'height': '35px', 'margin':'0 auto',}, },
-			                    	{ style: {'width':'500px', 'height': '35px', 'margin':'0 auto',}, },
-			                    	{   style: {'width':'400px', 'height': '300px', 'margin':'0 auto', 'padding':'5px'}, 
-			                    		components: [{ style: {'width':'130px','height': '30px','float':'left'}}, 
-										             { style: {'width':'50px','height': '50px','float':'left'},},
-										             { style: {'width':'80px','height': '80px','float':'left'},},
-										             { style: {'width':'50px','height': '50px','float':'left'},},
-										             { style: {'width':'80px','height': '70px','float':'left'},},
-										             { style: {'width':'50px','height': '80px','float':'left'},},
-										             { style: {'width':'80px','height': '50px','float':'left'},},
-										             { style: {'width':'80px','height': '50px','float':'left'},},
-										             { style: {'width':'50px','height': '50px','float':'left'},},
-										             { style: {'width':'80px','height': '50px','float':'left'},},
-										             { style: {'width':'80px','height': '50px','float':'left'},},
-										             { style: {'width':'50px','height': '50px','float':'left'},},
-										             { style: {'width':'80px','height': '50px','float':'left'},},
-										             { style: {'width':'75px','height': '50px','clear':'both'}}]
-			                    	},
-			                    	{ 	style: {'width':'700px', 'height': '250px', 'margin':'0 auto'}, 
-										components: [{ style: {'width':'100px','height': '30px','float':'left'}}, 
-										             { style: {'width':'200px','height': '50px','float':'left'},},
-										             { style: {'width':'150px','height': '150px','float':'left'},}]
-			                    	
-			                    	},
-			                    	{ style: {'width':'500px', 'height': '150px', 'margin':'0 auto'}, }
-			                    ],
-		});
-		
-		grapes.render();
-		
-	});
-});
-

bundle/panel/config/config.js

@@ -1,48 +0,0 @@
-define(function () {
-	return {
-		stylePrefix		: 'pn-',
-		
-		defaults		: [{
-								id	: 'commands',
-								buttons	: [{ id: 'select', 	className: 'fa fa-mouse-pointer', 	command: 'select-comp', attributes: {title:'Create'}}, 
-								       	   { id: 'create', 	className: 'fa fa-plus-square-o', 	command: 'create-comp',
-								       	   		buttons: [
-								       	   		          { id: 'image2', 	className: 'fa fa-picture-o',		command: 'image-comp' 	},
-								       	   		          { id: 'move2', 		className: 'fa fa-arrows',			command: 'move-comp' 	},
-								       	   		          { id: 'text2', 	className: 'fa fa-font' ,			command: 'text-comp' 	},
-								       	   		          { id: 'var',		className: 'fa fa-hashtag',			command: 'insert-var',
-												       		   options:  {  content: '{{ VAR22 }}', terminateAfterInsert: false, },		},
-								       	   		] },
-								       	   { id: 'remove', 	className: 'fa fa-minus-square-o', 	command: 'delete-comp' 	},
-								       	   { id: 'move', 	className: 'fa fa-arrows',			command: 'move-comp' 	},
-								       	   { id: 'resize', 	className: 'fa fa-arrows-alt', 		command: 'resize-comp' 	},
-								       	   { id: 'text', 	className: 'fa fa-font' ,			command: 'text-comp' 	},
-								       	   { id: 'image', 	className: 'fa fa-picture-o',		command: 'image-comp' 	},
-								       	   { id: 'var',		className: 'fa fa-hashtag',			command: 'insert-var',
-								       		   options:  {  content: '{{ VAR11 }}', terminateAfterInsert: true, },		
-									       		buttons: [
-								       	   		          { id: 'image2', 	className: 'fa fa-picture-o',		command: 'image-comp' 	},
-								       	   		          { id: 'move2', 		className: 'fa fa-arrows',			command: 'move-comp' 	},
-								       	   		          { id: 'text2', 	className: 'fa fa-font' ,			command: 'text-comp' 	},
-								       	   		          { id: 'var',		className: 'fa fa-hashtag',			command: 'insert-var',
-												       		   options:  {  content: '{{ VAR22 }}', terminateAfterInsert: false, },		},
-								       	   		]},
-								       	   ],
-							},{
-								id	: 'options',
-								buttons	: [{ id: 'visibility', 	className: 'fa fa-eye', 	command: 'sw-visibility', active: true, context: 'sw-visibility' }, 
-								       	   //{ id: 'select2', className: 'fa fa-mouse-pointer', 	command: 'select-comp' 	}, 
-								       	   { id: 'export', 	className: 'fa fa-code', 	command: 'export-template'	},],
-							},{
-								id	: 'views',
-								buttons	: [{ id: 'open-sm', 	className: 'fa fa-paint-brush', command: 'open-sm'}, 
-								       	   { id: 'open-layers', className: 'fa fa-bars', 	command: 'open-layers'	},],
-							}],
-		
-		// Editor model
-		em				: null,
-		
-		// Delay before show children buttons (in milliseconds)
-		delayBtnsShow	: 300,			
-	};
-});

bundle/style_manager/config/config.js

@@ -1,431 +0,0 @@
-define(function () {
-	return {
-		
-		stylePrefix		: 'sm-',
-		
-		target			: null,
-		//sectors: [],
-		sectors: [{
-					name: 'Positions', 
-					properties:[{
-							name: 'Alignment',
-							property: 'float',
-							type: 'radio',
-							defaults : 'none',
-							list:	[{
-									value : 'none',
-									//icon: 'none',
-									info: 'None',
-								},{
-									value : 'left',
-									info: 'Float element to the left',
-									//icon: 'float-left',
-								},{
-									value : '0 auto',
-									//icon: 'float-center',
-									info: 'Center the element',
-									property: 'margin'
-								},{
-									value : 'right',
-									info: 'Float element to the right',
-									//icon: 'float-right',
-							}],
-						}],
-					},{ 
-						name: 'Dimension', 
-						properties:[{
-							name: 'Width',
-							property: 'width',
-							type: 'integer',
-							units: ['px','%'],
-							defaults : 'auto',
-							min: 0,
-						},{
-							name: 'Height',
-							property: 'height',
-							type: 'integer',
-							units: ['px','%'],
-							defaults : 'auto',
-							min: 0,
-						},],
-					},{
-						name: 'Typography',
-						properties:[{
-							name: 'Font',
-							property: 'font-family',
-							type: 'select',
-							defaults : 'Arial, Helvetica, sans-serif',
-							list:	[{
-										value : 'Arial, Helvetica, sans-serif',
-										name : 'Arial',
-										style: 'font-family: Arial, Helvetica, sans-serif',
-									},{
-										value : '"Arial Black", Gadget, sans-serif',
-										style: 'font-family: "Arial Black", Gadget, sans-serif',
-										name : 'Arial Black',
-									},{
-										value : '"Brush Script MT", sans-serif',
-										style: 'font-family: "Brush Script MT", sans-serif',
-										name : 'Brush Script MT',
-									},{
-										value : '"Comic Sans MS", cursive, sans-serif',
-										style: 'font-family: "Comic Sans MS", cursive, sans-serif',
-										name : 'Comica Sans',
-									},{
-										value : '"Courier New", Courier, monospace',
-										style: 'font-family: "Courier New", Courier, monospace',
-										name : 'Courier New',
-									},{
-										value : 'Georgia, serif',
-										style: 'font-family: Georgia, serif',
-										name : 'Georgia',
-									},{
-										value : 'Helvetica, serif',
-										style: 'font-family: Helvetica, serif',
-										name : 'Helvetica',
-									},{
-										value : 'Impact, Charcoal, sans-serif',
-										style: 'font-family: Impact, Charcoal, sans-serif',
-										name : 'Impact',
-									},{
-										value : '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
-										style: 'font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif',
-										name : 'Lucida Sans',
-									},{
-										value : 'Tahoma, Geneva, sans-serif',
-										style: 'font-family: Tahoma, Geneva, sans-serif',
-										name : 'Tahoma',
-									},{
-										value : '"Times New Roman", Times, serif',
-										style: 'font-family: "Times New Roman", Times, serif',
-										name : 'Times New Roman',
-									},{
-										value : '"Trebuchet MS", Helvetica, sans-serif',
-										style: 'font-family: "Trebuchet MS", Helvetica, sans-serif',
-										name : 'Trebuchet',
-									},{
-										value : 'Verdana, Geneva, sans-serif',
-										style: 'font-family: Verdana, Geneva, sans-serif',
-										name : 'Verdana',
-									}],
-						},{
-							name: 'Weight',
-							property: 'font-weight',
-							type: 'select',
-							defaults : '400',
-							list:	[{ value : '100', name : 'Thin', },
-							     	 { value : '200', name : 'Extra-Light', },
-							     	 { value : '300', name : 'Light', },
-							     	 { value : '400', name : 'Normal', },
-							     	 { value : '500', name : 'Medium',},
-							     	 { value : '600', name : 'Semi-Bold',},
-							     	 { value : '700', name : 'Bold', },
-							     	 { value : '800', name : 'Extra-Bold',},
-							     	 { value : '900', name : 'Ultra-Bold', }],
-						},{
-							name: 'Text align',
-							property: 'text-align',
-							type: 'radio',
-							defaults : 'left',
-							list:	[{ value : 'left', name : 'Left', style:"font-weight:bold", },
-							     	 { value : 'center', name : 'Center', },
-							     	 { value : 'right', name : 'Right', },
-							     	 { value : 'justify', name : 'Justify', },],
-						},{
-							name: 'Weight',
-							property: 'font-weight',
-							type: 'select',
-							defaults : '400',
-							list:	[{ value : '100', name : 'Thin', },
-							     	 { value : '200', name : 'Extra-Light', },
-							     	 { value : '300', name : 'Light', },
-							     	 { value : '400', name : 'Normal', },
-							     	 { value : '500', name : 'Medium',},
-							     	 { value : '600', name : 'Semi-Bold',},
-							     	 { value : '700', name : 'Bold', },
-							     	 { value : '800', name : 'Extra-Bold',},
-							     	 { value : '900', name : 'Ultra-Bold', }],
-						}],
-					},{ 
-						name: 'Decorations',
-						properties: [{
-											name: 'Borders radius',
-											property: 'border-radius',
-											type: 'integer',
-											units: ['px'],
-											unit: 'px',
-											defaults : '0',
-											min: 0,
-										},{
-											name: 'Borders radius',
-											property: 'border-radius',
-											type: 'composite',
-											properties:[{
-															name: 		'Top',
-															property: 	'pad-top',
-															type: 		'integer',
-															units: 		['px','%'],
-															defaults : 	0,
-															min: 		0,
-														},{
-															name: 		'Right',
-															property: 	'pad-right',
-															type: 		'integer',
-															units: 		['px','%'],
-															min: 		0,
-															defaults : 	0,
-														},{
-															name: 		'Bottom',
-															property: 	'pad-bot',
-															type: 		'integer',
-															units: 		['px','%'],
-															min: 		0,
-															defaults : 	0,
-														},{
-															name: 		'Left',
-															property: 	'pad-left',
-															type: 		'integer',
-															units: 		['px'],
-															min: 		0,
-															defaults : 	0,
-														},],
-										},
-										{
-											name: 'Box shadow',
-											property: 'box-shadow',
-											type: 'stack',
-											preview: true,
-											properties:[{
-															name: 		'Shadow type',
-															property: 	'shadow-type',
-															type: 		'select',
-															defaults: 	'',
-															list:		[ { value : '', name : 'Outside', },
-															        	  { value : 'inset', name : 'Inside', }],
-														},{
-															name: 		'X position',
-															property: 	'shadow-x',
-															type: 		'integer',
-															units: 		['px','%'],
-															defaults : 	0,
-														},{
-															name: 		'Y position',
-															property: 	'shadow-y',
-															type: 		'integer',
-															units: 		['px','%'],
-															defaults : 	0,
-														},{
-															name: 		'Blur',
-															property: 	'shadow-blur',
-															type: 		'integer',
-															units: 		['px'],
-															defaults : 	5,
-															min: 		0,
-														},{
-															name: 		'Spread',
-															property: 	'shadow-spread',
-															type: 		'integer',
-															units: 		['px'],
-															defaults : 	0,
-														},{
-															name: 		'Color',
-															property: 	'shadow-color',
-															type: 		'color',
-															defaults: 	'black',
-														},
-											],
-										},{
-											name: 'Background',
-											property: 'background',
-											type: 'stack',
-											preview: true,
-											properties:[{
-															name: 		'Image',
-															property: 	'background-image',
-															type: 		'file',
-															defaults: 	'none',
-														},
-														/*{
-															name: 		'Background position',
-															property: 	'background-position',
-															type: 		'composite',
-															properties:		[ {
-																				name: 		'BpX',
-																				property: 	'bpx',
-																				type: 		'select',
-																				defaults: 	'left',
-																				list:		[ { value : 'left', name : 'Left', },
-																				        	  { value : 'center', name : 'Center', },
-																				        	  { value : 'right', name : 'Right', }],
-																			},{
-																				name: 		'BpY',
-																				property: 	'bpy',
-																				type: 		'select',
-																				defaults: 	'top',
-																				list:		[ { value : 'top', name : 'Top', },
-																				        	  { value : 'center', name : 'Center', },
-																				        	  { value : 'bottom', name : 'Bottom', }],
-																			},
-															        	    ],
-														}*/
-														{
-															name: 		'Repeat',
-															property: 	'background-repeat',
-															type: 		'select',
-															defaults: 	'repeat',
-															list:		[{ value : 'repeat', name : 'Repeat', },
-															     		 { value : 'repeat-x', name : 'Repeat X', },
-															     		 { value : 'repeat-y', name : 'Repeat Y', },
-															     		 { value : 'no-repeat', name : 'No repeat', }],
-														},
-														{
-															name: 		'Position X',
-															property: 	'bpx',
-															type: 		'select',
-															defaults: 	'left',
-															list:		[ { value : 'left', 	name : 'Left', },
-															        	  { value : 'center',	name : 'Center', },
-															        	  { value : 'right', 	name : 'Right', }],
-														},{
-															name: 		'Position Y',
-															property: 	'bpy',
-															type: 		'select',
-															defaults: 	'top',
-															list:		[ { value : 'top', 		name : 'Top', },
-															        	  { value : 'center', 	name : 'Center', },
-															        	  { value : 'bottom', 	name : 'Bottom', }],
-														},{
-															name: 		'Attach',
-															property: 	'background-attachment',
-															type: 		'select',
-															defaults: 	'scroll',
-															list:		[{ value : 'scroll', name : 'Scroll', },
-															     		 { value : 'fixed', name : 'Fixed', },
-															     		 { value : 'local', name : 'Local', }],
-														},
-														/*{
-															name: 		'Background origin',
-															property: 	'background-origin',
-															type: 		'select',
-															defaults: 	'padding-box',
-															list:		[{ value : 'padding-box', name : 'Padding', },
-															     		 { value : 'border-box', name : 'Border', },
-															     		 { value : 'content-box', name : 'Content', }],
-														},{
-															name: 		'Background clip',
-															property: 	'background-clip',
-															type: 		'select',
-															defaults: 	'border-box',
-															list:		[{ value : 'border-box', name : 'Border', },
-															     		 { value : 'padding-box', name : 'Padding', },
-															     		 { value : 'content-box', name : 'Content', }],
-														},{
-															name: 		'Color',
-															property: 	'background-color',
-															type: 		'color',
-															defaults: 	'black',
-														},*/
-											],
-										},{
-											name: 'Transition',
-											property: 'transition',
-											type: 'stack',
-											preview: false,
-											properties:[{
-															name: 		'Property',
-															property: 	'transition-property',
-															type: 		'select',
-															defaults: 	'',
-															list:		[{ value : 'width', name : 'Width', },
-															     		 { value : 'height', name : 'Height', },
-															     		 { value : 'background-color', name : 'Background', }],
-														},{
-															name: 'Duration',
-															property: 'transition-duration',
-															type: 'integer',
-															units: ['s'],
-															defaults : '2',
-															min: 0,
-														},{
-															name: 		'Easing',
-															property: 	'transition-timing-function',
-															type: 		'select',
-															defaults: 	'ease',
-															list:		[{ value : 'linear', name : 'Linear', },
-															     		 { value : 'ease', name : 'Ease', },
-															     		 { value : 'ease-in', name : 'Ease-in', },
-															     		 { value : 'ease-out', name : 'Ease-out', },
-															     		 { value : 'ease-in-out', name : 'Ease-in-out', }],
-														}],
-										},{
-											name: 'Perspective',
-											property: 'perspective',
-											type: 'integer',
-											units: ['px'],
-											defaults : '0',
-											min:	0,
-										},{
-											name: 'Transform',
-											property: 'transform',
-											type: 'composite',
-											properties:[{
-															name: 'Rotate X',
-															property: 'transform-rotate-x',
-															type: 'integer',
-															units: ['deg'],
-															defaults : '0',
-															functionName: 'rotateX',
-														},{
-															name: 'Rotate Y',
-															property: 'transform-rotate-y',
-															type: 'integer',
-															units: ['deg'],
-															defaults : '0',
-															functionName: 'rotateY',
-														},{
-															name: 'Rotate Z',
-															property: 'transform-rotate-z',
-															type: 'integer',
-															units: ['deg'],
-															defaults : '0',
-															functionName: 'rotateZ',
-														}],
-										}/*{
-											name: 'Padding',
-											property: 'padding',
-											type: 'composite',
-											properties:[{
-															name: 		'Top',
-															property: 	'pad-top',
-															type: 		'integer',
-															units: 		['px','%'],
-															defaults : 	0,
-															min: 		0,
-														},{
-															name: 		'Right',
-															property: 	'pad-right',
-															type: 		'integer',
-															units: 		['px','%'],
-															min: 		0,
-															defaults : 	0,
-														},{
-															name: 		'Bottom',
-															property: 	'pad-bot',
-															type: 		'integer',
-															units: 		['px','%'],
-															min: 		0,
-															defaults : 	0,
-														},{
-															name: 		'Left',
-															property: 	'pad-left',
-															type: 		'integer',
-															units: 		['px'],
-															min: 		0,
-															defaults : 	0,
-														},],
-										},*/
-						],
-					}
-				],
-	};
-});

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<title>WTE</title>
+		<title>Grapes</title>
 		<link rel="stylesheet" href="styles/spectrum.css">
 		<link rel="stylesheet" href="styles/css/font-awesome.min.css">
 		<link rel="stylesheet" href="styles/css/main.css">
@@ -10,6 +10,6 @@
 	</head>
 	<body>
 		<div id="wte-app"></div>
-		<script data-main="bundle/dev" src="libs/require-min.js"></script>
+		<script data-main="src/demo" src="libs/require-min.js"></script>
 	</body>
 </html>

bundle/canvas/view/CanvasView.js → src/canvas/view/CanvasView.js

@@ -5,7 +5,7 @@ function(Backbone) {
 	 * */
 	return Backbone.View.extend({
 		
-		id: 'canvas',
+		//id: 'canvas',
 		
 		initialize: function(o) {
 			this.config		= o.config;
@@ -17,7 +17,7 @@ function(Backbone) {
 			if(this.wrapper && typeof this.wrapper.render == 'function'){
 				this.$el.append( this.wrapper.render() );
 			}
-			this.$el.attr('class', this.className);
+			this.$el.attr({class: this.className, id: this.config.canvasId});
 			return this;
 		},
 	

bundle/commands/main.js → src/commands/main.js

@@ -28,7 +28,7 @@ define(function(require) {
 		this.defaultCommands['image-comp']		= require('./view/ImageComponent');
 		this.defaultCommands['move-comp']		= require('./view/MoveComponent');
 		this.defaultCommands['text-comp']		= require('./view/TextComponent');
-		this.defaultCommands['insert-var']		= require('./view/InsertCustom');
+		this.defaultCommands['insert-custom']	= require('./view/InsertCustom');
 		this.defaultCommands['export-template']	= require('./view/ExportTemplate');
 		this.defaultCommands['sw-visibility']	= require('./view/SwitchVisibility');
 		this.defaultCommands['open-layers']		= require('./view/OpenLayers');

bundle/commands/view/CommandAbstract.js → src/commands/view/CommandAbstract.js

@@ -12,14 +12,14 @@ define(['backbone'],
 			initialize: function(o) {
 				this.editorModel 	= this.em = o.em || {};
 				this.canvasId		= o.canvasId 	|| '';
-				this.wrapperId		= o.wrapperId 	|| '';
+				this.wrapperId		= o.wrapperId 	|| 'wrapper';
 				this.pfx			= o.stylePrefix;
 				this.hoverClass		= this.pfx + 'hover';
 				this.badgeClass		= this.pfx + 'badge';
 				this.plhClass		= this.pfx + 'placeholder';
-				this.setElement('#' + this.canvasId);
+				this.setElement(this.editorModel.get('$editor').find('#'+this.canvasId));
 				this.$canvas		= this.$el;
-				this.$wrapper		= $('#' + this.wrapperId);
+				this.$wrapper		= this.$canvas.find('#'+this.wrapperId);
 				this.init(o);
 			},
 			

bundle/commands/view/CreateComponent.js → src/commands/view/CreateComponent.js

@@ -3,7 +3,7 @@ define(['backbone','./SelectPosition'],
 		/**
 		 * @class CreateComponent
 		 * */
-		return _.extend({},SelectPosition,{
+		return _.extend({}, SelectPosition, {
 			
 			newElement : null,
 			
@@ -133,7 +133,7 @@ define(['backbone','./SelectPosition'],
 				var index = posIndex || 0;
 				if(this.posTargetCollection && this.posTargetModel.get('droppable')){
 					//Check config parameters for center in wrapper
-					if(this.config.firstCentered && (this.el == this.posTargetEl.get(0)) ){
+					if(this.config.firstCentered && (this.$wrapper.get(0) == this.posTargetEl.get(0)) ){
 						component.style.margin 	= '0 auto';
 					}
 					if(this.nearToFloat())							//Set not in flow if the nearest is too
@@ -254,7 +254,9 @@ define(['backbone','./SelectPosition'],
 			
 			/** Run method 
 			 * */
-			run: function(){
+			run: function(em, sender){
+				this.sender	= sender;
+				this.$el 	= this.$wrapper;
 				this.enable();
 			},
 			
@@ -262,6 +264,7 @@ define(['backbone','./SelectPosition'],
 			 * */
 			stop: function(){
 				this.removePositionPlaceholder();											//Removes placeholder from eventSelectPosition
+				this.stopSelectPosition();
 				this.$el.css('cursor','');													//Changes back aspect of the cursor
 				this.$el.unbind();															//Removes all attached events
 			}

bundle/commands/view/DeleteComponent.js → src/commands/view/DeleteComponent.js

@@ -11,10 +11,6 @@ define(['backbone', './SelectComponent'],
 			},
 			
 			enable: function(){
-				
-				if(!this.$el.length)
-					this.$el = $('#' + this.canvasId);
-				
 				var that = this;
 				this.$el.find('*').mouseover(function (e){
 				    e.stopPropagation();

bundle/commands/view/ImageComponent.js → src/commands/view/ImageComponent.js

@@ -1,4 +1,4 @@
-define(['backbone','./InsertCustom'],
+define(['backbone', './InsertCustom'],
 	function(Backbone, InsertCustom) {
 		/** 
 		 * @class ImageComponent
@@ -9,7 +9,6 @@ define(['backbone','./InsertCustom'],
 			 * Trigger before insert
 			 * @param 	{Object}	object
 			 * 
-			 * @return 	void
 			 * */
 			beforeInsert: function(object){
 				object.type 			= 'image';
@@ -17,7 +16,7 @@ define(['backbone','./InsertCustom'],
 				if (!this.nearToFloat()) {
 					object.style.display	= 'block';
 				}
-				if (this.config.firstCentered && (this.el == this.posTargetEl.get(0)) ) {
+				if (this.config.firstCentered && (this.$wp.get(0) == this.posTargetEl.get(0)) ) {
 					object.style.margin 	= '0 auto';
 				}
 			},
@@ -26,12 +25,11 @@ define(['backbone','./InsertCustom'],
 			 * Trigger after insert
 			 * @param	{Object}	model	Model created after insert
 			 * 
-			 * @return 	void
 			 * */
 			afterInsert: function(model){
 				model.trigger('dblclick');
 				if(this.sender)
-					this.sender.set('active',false);
+					this.sender.set('active', false);
 			},
 			
 			

bundle/commands/view/InsertCustom.js → src/commands/view/InsertCustom.js

@@ -18,7 +18,8 @@ define(['backbone', './SelectPosition'],
 			enable: function(){
 				SelectPosition.enable.apply(this, arguments);
 				_.bindAll(this,'insertComponent');
-				this.$el.on('click', this.insertComponent);
+				this.$wp	= this.$wrapper;
+				this.$wp.on('click', this.insertComponent);
 			},
 			
 			/** 
@@ -27,17 +28,15 @@ define(['backbone', './SelectPosition'],
 			 * @return void
 			 * */
 			insertComponent: function(){
-				this.$el.off('click', this.insertComponent);
+				this.$wp.off('click', this.insertComponent);
 				this.stopSelectPosition();
 				this.removePositionPlaceholder();
 				var object 	= this.buildContent();
 				this.beforeInsert(object);						
 				var model = this.posTargetCollection.add(object, { at: this.posIndex, silent:false });				
-				if(this.opt.terminateAfterInsert && this.sender){
+				if(this.opt.terminateAfterInsert && this.sender)
 					this.sender.set('active',false);
-					//if(this.senderBtn.model.get('parentModel'))
+				else
-						//this.senderBtn.model.get('parentModel').set('active', false);
-				}else
 					this.enable();
 				this.afterInsert(model, this);
 			},

bundle/commands/view/MoveComponent.js → src/commands/view/MoveComponent.js

@@ -13,14 +13,8 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			},
 			
 			enable: function(){
-				
+				this.canvasTop 	= this.$canvas.offset().top;
-				if(!this.$el.length){
+				this.canvasLeft	= this.$canvas.offset().left;
-					this.$el	 	= $('#' + this.canvasId);
-					this.$canvas 	= this.$el;
-					this.canvasTop 	= this.$canvas.offset().top;
-					this.canvasLeft	= this.$canvas.offset().left;
-				}
-				
 				this.$el.css('cursor','move');
 				this.$el.on('mousedown', this.startMove);
 				this.startSelectComponent();
@@ -121,7 +115,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 					var modelTemp = targetCollection.add({css:{}}, { at: index });
 					var modelRemoved = collection.remove(model);
 					targetCollection.add(modelRemoved, { at: index });
-					targetCollection.remove(modelTemp);
+					targetCollection.remove(modelTemp);//{ avoidStore: 1 }
 				}else
 					console.warn("Invalid target position");
 			},

bundle/commands/view/ResizeComponent.js → src/commands/view/ResizeComponent.js

@@ -27,13 +27,15 @@ define(['backbone', 'jqueryUi', './MoveComponent'],
 			 * @param object Component model
 			 * */
 			updateModel: function(el){
-				var um = 'px';
+				var um 		= 'px',
-				var model = el.element.data("model");
+					model 	= el.element.data("model"),
-				delete model.get('style')['min-height'];			//resize event removes fixed measures
+					style	= _.clone(model.get('style'));
-				delete model.get('style')['min-width'];
+				delete style['min-height'];
-				model.get('style').height = el.size.height+um;	//update with new height and width
+				delete style['min-width'];
-				model.get('style').width = el.size.width+um;
+				style.height 	=  el.size.height + um;
-				model.get('style').overflow = 'auto';
+				style.width		=  el.size.width + um;
+				style.overflow	=  'auto';
+				model.set('style', style);
 			},
 			
 			/** 

bundle/commands/view/SelectComponent.js → src/commands/view/SelectComponent.js

@@ -13,10 +13,6 @@ define(function() {
 			 * */
 			startSelectComponent: function(){
 				var that = this;
-				
-				if(!this.$el.length)
-					this.$el = $('#' + this.canvasId);
-				
 				this.$el.find('*').on('mouseover',function(e){ that.highlightComponent(e,this); })
 						.on('mouseout'	 ,function(e){ that.removeHighlightComponent(e,this); })
 						.on('click'		 ,function(e){ that.selectComponent(e,this); });
@@ -60,6 +56,9 @@ define(function() {
 			 * @return void
 			 * */
 			selectComponent: function(e, el){
+				var s	= $(el).data('model').get('stylable');
+				if(!(s instanceof Array) && !s)
+					return;
 				this.onSelect(e,el);								//Callback on select
 			},
 			
@@ -67,7 +66,7 @@ define(function() {
 			 * @param Event
 			 * @param Object Selected element
 			 * */
-			onSelect: function(e,el){
+			onSelect: function(e, el){
 				e.stopPropagation();
 				if(this.$selected)																	//Check if already selected before
 					this.$selected.removeClass('selected-component');
@@ -101,7 +100,7 @@ define(function() {
 				this.updateBadgeLabel(model);
 				var $el = $(el);
 				if(!this.wrapper)
-					this.wrapper = $('#wrapper');
+					this.wrapper = this.$wrapper;
 				if(!this.wrapperTop)
 					this.wrapperTop = this.wrapper.offset() ? this.wrapper.offset().top : 0;
 				if(!this.wrapperLeft)
@@ -117,7 +116,7 @@ define(function() {
 			 * @return void
 			 * */
 			createBadge: function (){
-				this.badge = $('<div>', {class: this.badgeClass + " no-dots"}).appendTo('#' + this.wrapperId);
+				this.badge = $('<div>', {class: this.badgeClass + " no-dots"}).appendTo(this.$wrapper);
 			},
 			
 			/** Remove badge

bundle/commands/view/SelectPosition.js → src/commands/view/SelectPosition.js

@@ -5,8 +5,7 @@ define(function() {
 		return {
 			
 			init: function(opt) {
-				_.bindAll(this,'selectingPosition','itemLeft');			
+				_.bindAll(this,'selectingPosition','itemLeft');
-				this.setElement('#'+this.wrapperId);
 				this.config	= opt;
 			},
 			
@@ -30,17 +29,12 @@ define(function() {
 				this.$plh =  $('<div>', { class: this.plhClass + " no-dots" })
 					.css({'pointer-events':'none'}).data('helper',1);
 				this.$plh.append( $('<div>', { class: this.plhClass + "-int no-dots" } ) );
-				this.$plh.appendTo( this.$wp );											//Append helper to the canvas
+				this.$plh.appendTo( this.$wrapper );
 				return this.$plh;
 			},
 			
 			enable: function()
 			{
-				if(!this.$el.length){
-					this.setElement('#'+this.wrapperId);
-					this.$el = $('#'+this.wrapperId);
-				}
-				this.$el.css('cursor','pointer');												//changes aspect of the cursor
 				this.startSelectPosition();
 			},
 			
@@ -52,7 +46,7 @@ define(function() {
 			startSelectPosition: function()
 			{
 				this.isPointed = false;
-				this.$el.on('mousemove', this.selectingPosition);
+				this.$wrapper.on('mousemove', this.selectingPosition);
 			},
 			
 			/** 
@@ -61,13 +55,13 @@ define(function() {
 			 * */
 			stopSelectPosition: function()
 			{
-				this.$el.off('mousemove',this.selectingPosition);
+				this.$wrapper.off('mousemove',this.selectingPosition);
 				this.posTargetCollection = null;
 				this.posIndex 	= this.posMethod=='after' && this.cDim.length!==0 ? this.posIndex + 1 : this.posIndex; //Normalize
 				if(this.cDim){
 					this.posIsLastEl	= this.cDim.length!==0 && this.posMethod=='after' && this.posIndex==this.cDim.length;
 					this.posTargetEl 	= (this.cDim.length===0 ? $(this.outsideElem) : 
-						 (!this.posIsLastEl ? $(this.cDim[this.posIndex][5]).parent() : $(this.outsideElem) ));
+						 (!this.posIsLastEl && this.cDim[this.posIndex] ? $(this.cDim[this.posIndex][5]).parent() : $(this.outsideElem) ));
 					this.posTargetModel 		= this.posTargetEl.data("model");
 					this.posTargetCollection 	= this.posTargetEl.data("model-comp");
 				}
@@ -81,8 +75,8 @@ define(function() {
 			{
 				this.isPointed = true;
 				
-				if(!this.$wp){
+				if(!this.wp){
-					this.$wp 	= $('#' + this.wrapperId);
+					this.$wp 	= this.$wrapper;
 					this.wp		= this.$wp[0];
 				}
 				var wpO		= this.$wp.offset();
@@ -353,7 +347,7 @@ define(function() {
 			 * */
 			removePositionPlaceholder: function()
 			{
-				if(this.$plh)
+				if(this.$plh && this.$plh.length)
 					this.$plh.remove();
 				this.$plh = null;
 			},
@@ -361,15 +355,14 @@ define(function() {
 			/* Run method */
 			run: function(){
 				this.enable();
-				this.active = true;
 			},
 			
 			/* Stop method */
 			stop: function(){
 				this.removePositionPlaceholder();
-				this.$el.css('cursor','');//changes back aspect of the cursor
+				this.stopSelectPosition();
-				this.$el.unbind();//removes all attached events
+				this.$wrapper.css('cursor','');//changes back aspect of the cursor
-				this.active = false;
+				this.$wrapper.unbind();//removes all attached events
 			}
 		};
 });

bundle/commands/view/TextComponent.js → src/commands/view/TextComponent.js

@@ -9,7 +9,6 @@ define(['backbone', './CreateComponent'],
 			 * This event is triggered at the beginning of a draw operation
 			 * @param 	{Object} 	component	Object component before creation
 			 * 
-			 * @return 	void
 			 * */
 			beforeDraw: function(component){
 				component.type = 'text';
@@ -22,22 +21,13 @@ define(['backbone', './CreateComponent'],
 			 * This event is triggered at the end of a draw operation
 			 * @param 	{Object}	model	Component model created
 			 * 
-			 * @return 	void
 			 * */
 			afterDraw: function(model){
-				if(!model.set)
+				if(!model || !model.set)
 					return;
 				model.trigger('focus');
-				if(this.senderBtn)
+				if(this.sender)
-					this.senderBtn.set('active',false);
+					this.sender.set('active', false);
-			},
-			
-			/** 
-			 * Run method 
-			 * */
-			run: function(em, sender){
-				this.enable();
-				this.senderBtn	= sender;
 			},
 			
 		});

bundle/config/require-config.js → src/config/require-config.js

@@ -44,6 +44,6 @@ require.config({
 		            {  name: 'CodeManager', 	location: 'code_manager', 		},
 		            {  name: 'Commands',		location: 'commands',			},
 		            {  name: 'Canvas',			location: 'canvas',				},
-		            {  name: 'Panel',			location: 'panel',				}
+		            {  name: 'Panels',			location: 'panels',				}
 	]
 });

src/demo.js

@@ -0,0 +1,566 @@
+require(['src/config/require-config.js'], function() {
+	
+	require(['editor/main'],function (Grapes){
+		var grapes	= new Grapes({
+			
+			container	: '#wte-app',
+			
+			storageType: 'local',
+			
+			remoteStorage: {
+				urlStore	: 'http://test.localhost/wte/index.php',
+				urlLoad		: 'http://test.localhost/wte/read.php',
+				paramsStore	: {	type:'homeTemplate',},
+				paramsLoad	: {	type:'homeTemplate',},
+			},
+			assetManager: {
+				storageType			: '',
+				storeOnChange		: true,
+				storeAfterUpload	: true,
+				assets				: [
+					      				   { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', date: '2015-01-01',height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', date: '2015-02-01',height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', date: '2015-02-01',height:350, width:250},
+					      				   { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', date: '2015-02-01',height:350, width:250},
+					      				   { 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},
+				      				   ]
+			},
+			
+			panels: {
+				defaults		: [{
+					id		: 'commands',
+					buttons	: [{ 
+								id			: 'select', 	
+								className	: 'fa fa-mouse-pointer', 	
+								command		: 'select-comp', 
+								attributes	: { title	: 'Select' }
+							},{ 
+								id			: 'create', 	
+								className	: 'fa fa-plus-square-o', 	
+								command		: 'create-comp',
+								attributes	: { title	: 'Create' },
+					       	   	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' },
+					       	   	       			   options:  {
+									       			   	content					: { style: { width: '100%', 'min-height': '75px'}}, 
+									       			   	terminateAfterInsert	: false, 
+									       			},},
+					       	   	] 
+							},
+								{ 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: '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' },
+					       		  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	: 'views',
+					buttons	: [{ id: 'open-sm', 	className: 'fa fa-paint-brush', command: 'open-sm', 	active: true, attributes: { title: 'Open Style Manager' },}, 
+					       	   { id: 'open-layers', className: 'fa fa-bars', 		command: 'open-layers',	attributes	: { title: 'Open Layer Manager' }, },],
+				}],
+			},
+			
+			styleManager : {
+				sectors: [{
+					name: 'General', 
+					properties:[{
+							name		: 'Alignament',
+							property	: 'float',
+							type		: 'radio',
+							defaults 	: 'none',
+							list		:	[{
+												value 		: 'none',
+												title		: 'None',
+												className 	: 'fa fa-times',
+											},{
+												value 		: 'left',
+												className 	: 'fa fa-align-left',
+												title		: 'Float element to the left',
+											},{
+												value 		: 'right',
+												className 	: 'fa fa-align-right',
+												title		: 'Float element to the right',
+											}],
+						},{
+							name		: 'Display',
+							property	: 'display',
+							type		: 'radio',
+							defaults 	: 'block',
+							list		:	[{
+												value 		: 'block',
+												title		: 'Block',
+											},{
+												value 		: 'inline',
+												title		: 'Inline',
+											},{
+												value 		: 'inline-block',
+												title		: 'Inline-block',
+											},{
+												value 		: 'none',
+												title		: 'None',
+												className 	: 'fa fa-eye-slash',
+											}],
+						},{
+							name		: 'Position',
+							property	: 'position',
+							type		: 'radio',
+							defaults 	: 'static',
+							list		:	[{
+												value 	: 'static',
+												title	: 'Static',
+											},{
+												value 	: 'relative',
+												title	: 'Relative',
+											},{
+												value 	: 'absolute',
+												title	: 'Absolute',
+											},{
+												value 	: 'fixed',
+												title	: 'fixed',
+											}],
+						},{
+							name		: 'Top',
+							property	: 'top',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: '0',
+						},{
+							name		: 'Right',
+							property	: 'right',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: '0',
+						},{
+							name		: 'Left',
+							property	: 'left',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: '0',
+						},{
+							name		: 'Bottom',
+							property	: 'bottom',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: '0',
+						}],
+					},{ 
+						name: 'Dimension', 
+						properties:[{
+							name		: 'Width',
+							property	: 'width',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: 'auto',
+							min			: 0,
+						},{
+							name		: 'Height',
+							property	: 'height',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: 'auto',
+							min			: 0,
+						},{
+							name		: 'Max width',
+							property	: 'max-width',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: 'auto',
+							min			: 0,
+						},{
+							name		: 'Min height',
+							property	: 'min-height',
+							type		: 'integer',
+							units		: ['px','%'],
+							defaults 	: 'auto',
+							min			: 0,
+						},{
+							name		: 'Padding',
+							property	: 'padding',
+							type		: 'composite',
+							properties:[{
+											name		: 'Top',
+											property	: 'mpadding-top',
+											type		: 'integer',
+											units		: ['px','%'],
+											defaults 	: 0,
+											min			: 0,
+										},{
+											name		: 'Right',
+											property	: 'margin-right',
+											type		: 'integer',
+											units		: ['px','%'],
+											defaults 	: 0,
+											min			: 0,
+										},{
+											name		: 'Bottom',
+											property	: 'margin-bottom',
+											type		: 'integer',
+											units		: ['px','%'],
+											defaults 	: 0,
+											min			: 0,
+										},{
+											name		: 'Left',
+											property	: 'margin-Left',
+											type		: 'integer',
+											units		: ['px','%'],
+											defaults 	: 0,
+											min			: 0,
+										},],
+						},],
+					},{
+						name: 'Typography',
+						properties:[{
+							name		: 'Font',
+							property	: 'font-family',
+							type		: 'select',
+							defaults 	: 'Arial, Helvetica, sans-serif',
+							list		: [{
+											value 		: 'Arial, Helvetica, sans-serif',
+											name 		: 'Arial',
+											style		: 'font-family: Arial, Helvetica, sans-serif',
+										},{
+											value 		: '"Arial Black", Gadget, sans-serif',
+											style		: 'font-family: "Arial Black", Gadget, sans-serif',
+											name 		: 'Arial Black',
+										},{
+											value 		: '"Brush Script MT", sans-serif',
+											style		: 'font-family: "Brush Script MT", sans-serif',
+											name 		: 'Brush Script MT',
+										},{
+											value 		: '"Comic Sans MS", cursive, sans-serif',
+											style		: 'font-family: "Comic Sans MS", cursive, sans-serif',
+											name 		: 'Comica Sans',
+										},{
+											value 		: '"Courier New", Courier, monospace',
+											style		: 'font-family: "Courier New", Courier, monospace',
+											name 		: 'Courier New',
+										},{
+											value 		: 'Georgia, serif',
+											style		: 'font-family: Georgia, serif',
+											name 		: 'Georgia',
+										},{
+											value 		: 'Helvetica, serif',
+											style		: 'font-family: Helvetica, serif',
+											name 		: 'Helvetica',
+										},{
+											value 		: 'Impact, Charcoal, sans-serif',
+											style		: 'font-family: Impact, Charcoal, sans-serif',
+											name 		: 'Impact',
+										},{
+											value 		: '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
+											style		: 'font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif',
+											name 		: 'Lucida Sans',
+										},{
+											value 		: 'Tahoma, Geneva, sans-serif',
+											style		: 'font-family: Tahoma, Geneva, sans-serif',
+											name 		: 'Tahoma',
+										},{
+											value 		: '"Times New Roman", Times, serif',
+											style		: 'font-family: "Times New Roman", Times, serif',
+											name 		: 'Times New Roman',
+										},{
+											value 		: '"Trebuchet MS", Helvetica, sans-serif',
+											style		: 'font-family: "Trebuchet MS", Helvetica, sans-serif',
+											name 		: 'Trebuchet',
+										},{
+											value 		: 'Verdana, Geneva, sans-serif',
+											style		: 'font-family: Verdana, Geneva, sans-serif',
+											name 		: 'Verdana',
+										}],
+						},{
+							name		: 'Font size',
+							property	: 'font-size',
+							type		: 'integer',
+							units		: ['px','em'],
+							defaults 	: '12',
+							min			: 0,
+						},{
+							name		: 'Weight',
+							property	: 'font-weight',
+							type		: 'select',
+							defaults 	: '400',
+							list:		[{ value : '100', name : 'Thin', },
+								     	 { value : '200', name : 'Extra-Light', },
+								     	 { value : '300', name : 'Light', },
+								     	 { value : '400', name : 'Normal', },
+								     	 { value : '500', name : 'Medium',},
+								     	 { value : '600', name : 'Semi-Bold',},
+								     	 { value : '700', name : 'Bold', },
+								     	 { value : '800', name : 'Extra-Bold',},
+								     	 { value : '900', name : 'Ultra-Bold', }],
+						},{
+							name		: 'Letter spacing',
+							property	: 'letter-spacing',
+							type		: 'integer',
+							units		: ['px'],
+							defaults 	: 'normal',
+						},{
+							name: 		'Font color',
+							property: 	'color',
+							type: 		'color',
+							defaults: 	'black',
+						},{
+							name		: 'Line height',
+							property	: 'line-height',
+							type		: 'integer',
+							units		: ['px'],
+							defaults 	: 'normal',
+						},{
+							name		: 'Text align',
+							property	: 'text-align',
+							type		: 'radio',
+							defaults 	: 'left',
+							list		: [{ value : 'left', 	name : 'Left', 		className: 'fa fa-align-left'},
+							    		   { value : 'center', 	name : 'Center',	className: 'fa fa-align-center' },
+							    		   { value : 'right', 	name : 'Right', 	className: 'fa fa-align-right'},
+							    		   { value : 'justify', name : 'Justify', 	className: 'fa fa-align-justify'},],
+						}],
+					},{ 
+						name: 'Decorations',
+						properties: [{
+							name		: 'Borders radius',
+							property	: 'border-radius',
+							type		: 'integer',
+							units		: ['px'],
+							defaults 	: '0',
+							min			: 0,
+						},{
+							name		: 'Borders radius',
+							property	: 'border-radius',
+							type		: 'composite',
+							properties	: [{
+											name		: 'Top',
+											property	: 'b-top',
+											type		: 'integer',
+											units		: ['px','%'],
+											defaults 	: 0,
+											min			: 0,
+										},{
+											name		: 'Right',
+											property	: 'b-right',
+											type		: 'integer',
+											units		: ['px','%'],
+											min			: 0,
+											defaults 	: 0,
+										},{
+											name		: 'Bottom',
+											property	: 'b-bot',
+											type		: 'integer',
+											units		: ['px','%'],
+											min			: 0,
+											defaults 	: 0,
+										},{
+											name		: 'Left',
+											property	: 'b-left',
+											type		: 'integer',
+											units		: ['px'],
+											min			: 0,
+											defaults 	: 0,
+										},],
+						},{
+							name		: 'Border',
+							property	: 'border',
+							type		: 'composite',
+							properties	: [{
+											name		: 'Width',
+											property	: 'br-width',
+											type		: 'integer',
+											units		: ['px','em'],
+											defaults 	: 0,
+											min			: 0,
+										},{
+											name		: 'Style',
+											property	: 'br-style',
+											type		: 'select',
+											defaults 	: 'solid',
+											list:		[{ value : 'none', 		name : 'None', },
+											     		 { value : 'solid', 	name : 'Solid', },
+												     	 { value : 'dashed', 	name : 'Dashed', },
+												     	 { value : 'dotted',	name : 'Dotted', },],
+										},{
+											name: 		'Color',
+											property: 	'color',
+											type: 		'color',
+											defaults: 	'black',
+										}],
+						},{
+							name		: 'Box shadow',
+							property	: 'box-shadow',
+							type		: 'stack',
+							preview		: true,
+							properties	: [{
+											name: 		'Shadow type',
+											property: 	'shadow-type',
+											type: 		'select',
+											defaults: 	'',
+											list:		[ { value : '', name : 'Outside', },
+											        	  { value : 'inset', name : 'Inside', }],
+										},{
+											name: 		'X position',
+											property: 	'shadow-x',
+											type: 		'integer',
+											units: 		['px','%'],
+											defaults : 	0,
+										},{
+											name: 		'Y position',
+											property: 	'shadow-y',
+											type: 		'integer',
+											units: 		['px','%'],
+											defaults : 	0,
+										},{
+											name: 		'Blur',
+											property: 	'shadow-blur',
+											type: 		'integer',
+											units: 		['px'],
+											defaults : 	5,
+											min: 		0,
+										},{
+											name: 		'Spread',
+											property: 	'shadow-spread',
+											type: 		'integer',
+											units: 		['px'],
+											defaults : 	0,
+										},{
+											name: 		'Color',
+											property: 	'shadow-color',
+											type: 		'color',
+											defaults: 	'black',
+										},],
+						},{
+							name		: 'Background',
+							property	: 'background',
+							type		: 'stack',
+							preview		: true,
+							properties	: [{
+											name: 		'Image',
+											property: 	'background-image',
+											type: 		'file',
+											defaults: 	'none',
+										},
+										{
+											name: 		'Repeat',
+											property: 	'background-repeat',
+											type: 		'select',
+											defaults: 	'repeat',
+											list:		[{ value : 'repeat', name : 'Repeat', },
+											     		 { value : 'repeat-x', name : 'Repeat X', },
+											     		 { value : 'repeat-y', name : 'Repeat Y', },
+											     		 { value : 'no-repeat', name : 'No repeat', }],
+										},
+										{
+											name: 		'Position X',
+											property: 	'background-position',
+											type: 		'select',
+											defaults: 	'left',
+											list:		[ { value : 'left', 	name : 'Left', },
+											        	  { value : 'center',	name : 'Center', },
+											        	  { value : 'right', 	name : 'Right', }],
+										},{
+											name: 		'Position Y',
+											property: 	'background-position',
+											type: 		'select',
+											defaults: 	'top',
+											list:		[ { value : 'top', 		name : 'Top', },
+											        	  { value : 'center', 	name : 'Center', },
+											        	  { value : 'bottom', 	name : 'Bottom', }],
+										},{
+											name: 		'Attach',
+											property: 	'background-attachment',
+											type: 		'select',
+											defaults: 	'scroll',
+											list:		[{ value : 'scroll', name : 'Scroll', },
+											     		 { value : 'fixed', name : 'Fixed', },
+											     		 { value : 'local', name : 'Local', }],
+										},],
+						},],
+					},{
+						name: 'Extra',
+						properties: [{
+							name: 'Transition',
+							property: 'transition',
+							type: 'stack',
+							preview: false,
+							properties:[{
+											name: 		'Property',
+											property: 	'transition-property',
+											type: 		'select',
+											defaults: 	'',
+											list:		[{ value : 'width', name : 'Width', },
+											     		 { value : 'height', name : 'Height', },
+											     		 { value : 'background-color', name : 'Background', }],
+										},{
+											name: 'Duration',
+											property: 'transition-duration',
+											type: 'integer',
+											units: ['s'],
+											defaults : '2',
+											min: 0,
+										},{
+											name: 		'Easing',
+											property: 	'transition-timing-function',
+											type: 		'select',
+											defaults: 	'ease',
+											list:		[{ value : 'linear', name : 'Linear', },
+											     		 { value : 'ease', name : 'Ease', },
+											     		 { value : 'ease-in', name : 'Ease-in', },
+											     		 { value : 'ease-out', name : 'Ease-out', },
+											     		 { value : 'ease-in-out', name : 'Ease-in-out', }],
+										}],
+						},{
+							name: 'Perspective',
+							property: 'perspective',
+							type: 'integer',
+							units: ['px'],
+							defaults : '0',
+							min:	0,
+						},{
+							name: 'Transform',
+							property: 'transform',
+							type: 'composite',
+							properties:[{
+											name: 'Rotate X',
+											property: 'transform-rotate-x',
+											type: 'integer',
+											units: ['deg'],
+											defaults : '0',
+											functionName: 'rotateX',
+										},{
+											name: 'Rotate Y',
+											property: 'transform-rotate-y',
+											type: 'integer',
+											units: ['deg'],
+											defaults : '0',
+											functionName: 'rotateY',
+										},{
+											name: 'Rotate Z',
+											property: 'transform-rotate-z',
+											type: 'integer',
+											units: ['deg'],
+											defaults : '0',
+											functionName: 'rotateZ',
+										}],
+						}]
+					}
+				],
+				
+			},
+		});
+		
+		grapes.render();
+		
+	});
+});
+

bundle/dom_components/config/config.js → src/dom_components/config/config.js

@@ -4,13 +4,21 @@ define(function () {
 		
 		wrapperId		: 'wrapper',
 		
-		component		: {},
+		// Default wrapper configuration
+		wrapper			: {
+			removable 	: false,
+			stylable	: ['background','background-color','background-image', 'background-repeat','background-attachment','background-position'],
+			movable		: false,
+			badgable	: false,
+		},
 		
 		// Could be used for default components
 		components		: {},
 		
 		rte				: {},
 		
+		em				: {},
+		
 		// Class for new image component
 		imageCompClass	: 'fa fa-picture-o',
 		

bundle/dom_components/main.js → src/dom_components/main.js

@@ -22,7 +22,15 @@ define(function(require) {
 				c[name] = defaults[name];
 		}
 		
-		this.component		= new Component(c.component);
+		if(!c.wrapper.attributes)
+			c.wrapper.attributes 	= {};
+		c.wrapper.attributes.id		= 'wrapper';
+		
+		if(!c.wrapper.style)
+			c.wrapper.style 		= {};
+		c.wrapper.style.position	= 'relative';
+		
+		this.component		= new Component(c.wrapper);
 		var obj				= {
 				model	: this.component,
 		    	config	: c,

bundle/dom_components/model/Component.js → src/dom_components/model/Component.js

@@ -13,6 +13,7 @@ define(['backbone','./Components'],
 				movable			: true,
 				droppable		: true,
 				badgable		: true,
+				stylable		: true,
 				status			: '',
 				previousModel	: '',
 				content			: '',

bundle/dom_components/view/ComponentTextView.js → src/dom_components/view/ComponentTextView.js

@@ -26,8 +26,9 @@ define(['backbone', './ComponentView'],
 		 * */
 		enableEditing: function(e){
 			if(this.rte){
-				if(!this.$wrapper)
+				var $e	= this.config.em.get('$editor');
-					this.$wrapper	= $('#'+this.config.wrapperId);
+				if(!this.$wrapper && $e.length)
+					this.$wrapper	= $e.find('#'+this.config.wrapperId);
 				this.rte.bind(this, this.$wrapper);
 			}
 			$(document).on('mousedown', this.disableEditing);								//Close edit mode

bundle/dom_components/view/ComponentView.js → src/dom_components/view/ComponentView.js

@@ -117,36 +117,5 @@ define(['backbone', './ComponentsView'],
 				return this;
 			},
 			
-			/** TODO DELETE
-			 * Add new component to canvas 
-			 * @param Object Component added
-			 * @param Object Collection
-			 * @param Object Parameters
-			 * 
-			addComponent: function (component, collection, params) {
-				var viewObject = require('componentView'); 			//Set default view
-				if(component.get('editable'))						//If editable component, change view
-					viewObject = require('componentTextView');		//Change view in case is editable
-				if(component.get('src')){							//If editable component, change view
-					viewObject = require('componentImageView');		//Change view in case is editable
-				}
-				var view = new viewObject({ 
-					model: 			component,
-					editorModel:	this.editorModel,
-				});
-				if(params && (typeof params.at!='undefined') ){		//If i have index position change the way to append
-					if (params.at === 0){
-						this.$el.prepend(view.render().el);
-					}else{
-			        	this.$el.children().filter(function(){ 
-			        		return !$(this).data('helper');
-			        	}).eq(params.at-1).after(view.render().el);
-			        	//console.log("insert at "+params.at+" children: "+this.$el.children().filter(function() { return !$(this).data('helper');}).length);
-			        }
-				}else
-					this.$el.append(view.render().el);
-			},
-			*/
-			
 		});
 });

bundle/editor/config/config.js → src/editor/config/config.js

@@ -8,9 +8,10 @@ define(function () {
 		storagePrefix: 			'wte-',
 		
 		// Editor ID. Useful in case of multiple editors on the same page
-		id:						'',
+		id						: '',
 		
-		appContainer 			: '#wte-app',
+		// Where render the editor
+		container 				: '',
 		
 		idCanvas				: 'canvas',
 		

bundle/editor/model/Editor.js → src/editor/model/Editor.js

@@ -10,7 +10,7 @@ define([
         'Canvas',
         'RichTextEditor',
         'DomComponents',
-        'Panel'],
+        'Panels'],
 	function(
 			Backbone,
 			UndoManager,
@@ -35,7 +35,7 @@ define([
 			initialize: function(c)
 			{
 				this.config		= c;
-				this.compName	= this.config.storagePrefix + 'componentsTree' + this.config.id;
+				this.compName	= this.config.storagePrefix + 'components' + this.config.id;
 				this.set('Config', c);
 				
 				this.initStorage();
@@ -58,22 +58,12 @@ define([
 			initComponents: function()
 			{
 				var cfg			= this.config.components,
-					comps		= this.loadComponentsTree(),
+					comp		= this.loadComponentsTree(),
 					cmpStylePfx	= cfg.stylePrefix || 'comp-';
 				
-				if(!comps){
-					comps		= {
-							removable 	: false,
-							movable		: false,
-							badgable	: false,
-							attributes	: { id: this.config.idWrapper },
-							style		: { position: 'relative',},
-							components	: cfg.components,
-					};
-				}
-			
 				cfg.stylePrefix	= this.config.stylePrefix + cmpStylePfx;
-				cfg.component	= comps;
+				if(comp)
+					cfg.wrapper	= comp;
 			
 				if(this.rte)
 					cfg.rte		= this.rte;
@@ -83,7 +73,9 @@ define([
 			
 				if(this.am)
 					cfg.am		= this.am;
-			
+				
+				cfg.em			= this;
+				
 				this.cmp 		= new DomComponents(cfg);
 				
 				if(this.stm.isAutosave()){ // TODO Currently doesn't listen already created models
@@ -101,6 +93,7 @@ define([
 				var cfg				= this.config.canvas,
 					pfx				= cfg.stylePrefix || 'cv-';
 					cfg.stylePrefix	= this.config.stylePrefix + pfx;
+				cfg.canvasId	= this.config.idCanvas;
 				this.cv			= new Canvas(this.config.canvas);
 
 				if(this.cmp)
@@ -303,7 +296,6 @@ define([
 				var wrp	= this.cmp.getComponent();
 				if(wrp && this.cm){
 					var res	= this.cm.getCode(wrp, 'json');
-					console.log(res);
 					this.stm.store(this.compName, JSON.stringify(res));
 				}
 			},
@@ -321,9 +313,9 @@ define([
 
 				// Call stopListening for not creating nested listenings 
 				this.stopListening(comps, 'add', this.updateComponents);
-				this.stopListening(comps, 'remove', this.componentsUpdated);
+				this.stopListening(comps, 'remove', this.rmComponents);
 				this.listenTo(comps, 'add', this.updateComponents);
-				this.listenTo(comps, 'remove', this.componentsUpdated);
+				this.listenTo(comps, 'remove', this.rmComponents);
 				
 				this.stopListening(model, 'change:style change:content', this.updateComponents);
 				this.listenTo(model, 'change:style change:content', this.updateComponents);
@@ -332,5 +324,19 @@ define([
 					this.componentsUpdated();
 			},
 			
+			/**
+			 * Triggered when some component is removed updated
+			 * @param	{Object}	model
+			 * @param	{Mixed}		val	Value
+			 * @param	{Object}	opt	Options
+			 * 
+			 * */
+			rmComponents: function(model, val, opt){
+				var avSt	= opt ? opt.avoidStore : 0;
+				
+				if(!avSt)
+					this.componentsUpdated();
+			}
+			
 		});
 	});

bundle/editor/view/EditorView.js → src/editor/view/EditorView.js

@@ -14,6 +14,10 @@ function(Backbone){
 		render: function(){
 			this.$el.empty();
 			
+			this.$cont	= $('body ' + this.model.config.container);
+			
+			this.model.set('$editor', this.$el);
+			
 			if(this.cv)
 				this.$el.append(this.cv.render());
 			
@@ -22,7 +26,7 @@ function(Backbone){
 			
 			this.$el.attr('class', this.className);
 			
-			$('body '+this.model.config.appContainer).html(this.$el);
+			this.$cont.html(this.$el);
 			
 			if(this.pn)
 				this.pn.active();

bundle/main.js → src/main.js

@@ -1,5 +1,5 @@
 
-require(['bundle/config/require-config.js'], function() {
+require(['src/config/require-config.js'], function() {
 	
 	require(['editor/main'],function (Grapes){
 		return Grapes;

bundle/modal_dialog/view/ModalView.js → src/modal_dialog/view/ModalView.js

@@ -102,7 +102,6 @@ define(['backbone', 'text!./../template/modal.html'],
 				this.$el.attr('class', this.pfx + 'container');
 				this.updateOpen();
 				
-				console.log('Modal rendered');
 				return this;
 			},
 			

src/panels/config/config.js

@@ -0,0 +1,14 @@
+define(function () {
+	return {
+		stylePrefix		: 'pn-',
+		
+		// Default panels
+		defaults		: [],
+		
+		// Editor model
+		em				: null,
+		
+		// Delay before show children buttons (in milliseconds)
+		delayBtnsShow	: 300,			
+	};
+});

bundle/panel/view/ButtonView.js → src/panels/view/ButtonView.js

@@ -144,8 +144,6 @@ function(Backbone, require) {
 				command	= this.commands.get(this.model.get('command'));
 			
 			if(this.model.get('active')){
-				//this.$el.addClass(this.activeCls);
-				//this.model.collection.deactivateAllExceptOne(this.model);
 				
 				this.model.collection.deactivateAll(this.model.get('context'));
 				this.model.set('active', true, { silent: true }).trigger('checkActive');