diff --git a/index.html b/index.html index c6f830dc4..a4fa0d501 100755 --- a/index.html +++ b/index.html @@ -11,7 +11,146 @@ body, html{ height: 100%; margin: 0;} -
+
+ +
+
+
+
+ +
+ +
+
Build your templates without coding
+
All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
+
Try it now
+
+
+ +
+
+ +
+
ASSET MANAGER
+
Manage your images with Asset Manager
+
You can create image blocks with the command from the left panel and edit them with double click
+
+
+
+
+ + + + +
diff --git a/src/demo.js b/src/demo.js index 0aeb36600..ff9ab41bb 100644 --- a/src/demo.js +++ b/src/demo.js @@ -8,8 +8,9 @@ require(['config/require-config'], function() { { container : '#gjs', height: '100%', - components: '
GrapesJS
WEB
TEMPLATE
EDITOR
Build your templates without coding
All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
Try it now
ASSET MANAGER
Manage your images with Asset Manager
You can create image blocks with the command from the left panel and edit them with double click
At the moment uploading of new images is not allowed in demo, so there is only some random images.
Blocks
Each element of the HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style
Small
Some random list
+ Small feature 1
+ Small feature 2
+ Small feature 3
+ Small feature 4
Price 1
Medium
Some random list
+ Medium feature 1
+ Medium feature 2
+ Medium feature 3
+ Medium feature 4
Price 2
Large
Some random list
+ Large feature 1
+ Large feature 2
+ Large feature 3
+ Large feature 4
Price 3
', - style: '#c63{width:100%;min-height:550px;background:url("./img/bg-gr-v.png") repeat left top scroll, url("http://www.freewhd.com/wp-content/uploads/2014/01/work-desk-14949.jpg") no-repeat center center scroll;}#c64{width:90%;max-width:1100px;min-height:75px;padding:7px 7px 7px 7px;margin:0 auto;}#c65{width:100%;padding:25px 7px 7px 7px;}#c66{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c67{padding:10px 10px 10px 10px;width:130px;min-height:50px;background-color:#ffffff;border-radius:5px;color:#4d114f;font-size:23px;text-align:center;line-height:30px;}#c68{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c69{float:right;padding:7px 7px 7px 7px;}#c70{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c71{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c72{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c73{clear:both;}#c74{padding:7px 7px 7px 7px;width:670px;min-height:57px;font-size:40px;color:#ffffff;font-family:Helvetica, serif;font-weight:100;margin:100px 0px 0px 0px;}#c75{padding:10px 10px 10px 10px;width:599px;min-height:80px;color:#c6c6c6;font-family:Helvetica, serif;font-weight:100;line-height:26px;}#c76{padding:10px 10px 10px 10px;width:190px;min-height:50px;font-weight:100;color:#ffffff;font-size:20px;text-align:center;letter-spacing:3px;line-height:30px;background-color:#d983a6;border-radius:5px;margin:15px 0px 0px 0px;}#c77{min-height:200px;background-color:#ffffff;}#c78{width:90%;max-width:1100px;min-height:75px;padding:100px 7px 7px 7px;margin:0 auto;}#c79{float:left;}#c80{float:left;margin:150px 0px 0px 100px;padding:7px 7px 7px 7px;}#c81{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;}#c82{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:25px;}#c83{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:17px;line-height:25px;font-weight:100;width:450px;}#c84{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:13px;line-height:20px;font-weight:100;width:450px;}#c85{clear:both;}#c86{min-height:500px;background-color:#222222;}#c87{width:90%;max-width:1100px;min-height:75px;padding:70px 7px 70px 7px;margin:0 auto;}#c88{padding:7px 7px 7px 7px;min-height:35px;color:#fff;font-size:25px;text-align:center;}#c89{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;text-align:center;width:700px;margin:0 auto;font-weight:100;}#c90{margin:70px 0 0 0;padding:7px 7px 7px 7px;}#c91{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c92{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d983a6;border-radius:5px;}#c93{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c94{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c95{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c96{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c97{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c98{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c99{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c100{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c101{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#da78a0;border-radius:5px;}#c102{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c103{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c104{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c105{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c106{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c107{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c108{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c109{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c110{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d66a96;border-radius:5px;}#c111{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c112{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c113{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c114{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c115{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c116{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c117{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c118{clear:both;}', + fromElement: true, + //components: '
GrapesJS
WEB
TEMPLATE
EDITOR
Build your templates without coding
All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
Try it now
ASSET MANAGER
Manage your images with Asset Manager
You can create image blocks with the command from the left panel and edit them with double click
At the moment uploading of new images is not allowed in demo, so there is only some random images.
Blocks
Each element of the HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style
Small
Some random list
+ Small feature 1
+ Small feature 2
+ Small feature 3
+ Small feature 4
Price 1
Medium
Some random list
+ Medium feature 1
+ Medium feature 2
+ Medium feature 3
+ Medium feature 4
Price 2
Large
Some random list
+ Large feature 1
+ Large feature 2
+ Large feature 3
+ Large feature 4
Price 3
', + //style: '#c63{width:100%;min-height:550px;background:url("./img/bg-gr-v.png") repeat left top scroll, url("http://www.freewhd.com/wp-content/uploads/2014/01/work-desk-14949.jpg") no-repeat center center scroll;}#c64{width:90%;max-width:1100px;min-height:75px;padding:7px 7px 7px 7px;margin:0 auto;}#c65{width:100%;padding:25px 7px 7px 7px;}#c66{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c67{padding:10px 10px 10px 10px;width:130px;min-height:50px;background-color:#ffffff;border-radius:5px;color:#4d114f;font-size:23px;text-align:center;line-height:30px;}#c68{width:50%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c69{float:right;padding:7px 7px 7px 7px;}#c70{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c71{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c72{padding:10px 10px 10px 10px;width:130px;min-height:50px;float:left;color:#ffffff;text-align:center;font-size:15px;line-height:30px;}#c73{clear:both;}#c74{padding:7px 7px 7px 7px;width:670px;min-height:57px;font-size:40px;color:#ffffff;font-family:Helvetica, serif;font-weight:100;margin:100px 0px 0px 0px;}#c75{padding:10px 10px 10px 10px;width:599px;min-height:80px;color:#c6c6c6;font-family:Helvetica, serif;font-weight:100;line-height:26px;}#c76{padding:10px 10px 10px 10px;width:190px;min-height:50px;font-weight:100;color:#ffffff;font-size:20px;text-align:center;letter-spacing:3px;line-height:30px;background-color:#d983a6;border-radius:5px;margin:15px 0px 0px 0px;}#c77{min-height:200px;background-color:#ffffff;}#c78{width:90%;max-width:1100px;min-height:75px;padding:100px 7px 7px 7px;margin:0 auto;}#c79{float:left;}#c80{float:left;margin:150px 0px 0px 100px;padding:7px 7px 7px 7px;}#c81{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;}#c82{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:25px;}#c83{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:17px;line-height:25px;font-weight:100;width:450px;}#c84{padding:7px 7px 7px 7px;min-height:35px;color:#444444;font-size:13px;line-height:20px;font-weight:100;width:450px;}#c85{clear:both;}#c86{min-height:500px;background-color:#222222;}#c87{width:90%;max-width:1100px;min-height:75px;padding:70px 7px 70px 7px;margin:0 auto;}#c88{padding:7px 7px 7px 7px;min-height:35px;color:#fff;font-size:25px;text-align:center;}#c89{padding:7px 7px 7px 7px;min-height:35px;color:#b1b1b1;font-size:15px;text-align:center;width:700px;margin:0 auto;font-weight:100;}#c90{margin:70px 0 0 0;padding:7px 7px 7px 7px;}#c91{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c92{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d983a6;border-radius:5px;}#c93{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c94{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c95{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c96{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c97{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c98{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c99{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c100{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c101{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#da78a0;border-radius:5px;}#c102{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c103{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c104{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c105{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c106{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c107{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c108{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c109{width:33.333%;min-height:75px;padding:7px 7px 7px 7px;float:left;}#c110{margin:0 auto;width:300px;min-height:350px;padding:0 20px 0 20px;background-color:#d66a96;border-radius:5px;}#c111{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:25px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:20px 20px 20px 20px;}#c112{font-weight:100;color:#ffffff;letter-spacing:3px;text-align:center;font-size:15px;margin:0 -20px 0 -20px;padding:50px 20px 50px 20px;}#c113{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c114{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c115{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.1);padding:10px 20px 10px 20px;}#c116{font-weight:100;color:rgba(255,255,255,0.5);letter-spacing:2px;font-size:15px;margin:0 -20px 0 -20px;padding:10px 20px 10px 20px;}#c117{font-weight:100;color:#ffffff;text-align:center;font-size:30px;margin:0 -20px 0 -20px;background-color:rgba(0, 0, 0, 0.2);padding:40px 20px 40px 20px;}#c118{clear:both;}', storage:{ autoload: 0 }, commands: { @@ -342,6 +343,7 @@ require(['config/require-config'], function() { }, } + ); }); diff --git a/src/editor/main.js b/src/editor/main.js index 1f44223bd..f6b0d68c9 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -47,6 +47,10 @@ define(function (require){ return { + /** + * @property {EditorModel} + * @private + */ editor: em, /** @@ -244,7 +248,7 @@ define(function (require){ }, /** - * Store data to the current storage + * Load data from the current storage * @return {Object} Stored data */ load: function(){ diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index bb3ac1434..33ea13fcb 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -39,6 +39,7 @@ define(['backbone'], case 'box-shadow-type': case 'background-repeat': case 'background-position': case 'background-attachment': case 'background-size': case 'transition-property': case 'transition-timing-function': + case 'cursor': obj.type = 'select'; break; case 'top': case 'right': case 'bottom': case 'left': @@ -109,6 +110,7 @@ define(['backbone'], case 'min-height': case 'min-width': case 'max-height': case 'max-width': case 'width': case 'height': case 'background-size': + case 'cursor': obj.defaults = 'auto'; break; case 'font-family': @@ -374,7 +376,19 @@ define(['backbone'], { value : 'ease-in-out'} ]; break; - + case 'cursor': + obj.list = [ + { value : 'auto'}, + { value : 'pointer'}, + { value : 'copy'}, + { value : 'crosshair'}, + { value : 'grab'}, + { value : 'grabbing'}, + { value : 'help'}, + { value : 'move'}, + { value : 'text'} + ]; + break; } // Properties diff --git a/styles/css/main.css b/styles/css/main.css index 60ff10e08..715f41df2 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2739,14 +2739,25 @@ ol.example li.placeholder:before { box-sizing: border-box; text-align: center; z-index: 3; } - .wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options, .wte-pn-panel#wte-pn-options2 { + .wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options2 { min-width: 35px; height: 100%; width: 3.5%; - left: 0; } + left: 0; + box-shadow: 0 0 5px #333; } .wte-pn-panel#wte-pn-options { + min-width: 35px; + height: 100%; + width: 3.5%; + left: 0; bottom: 0; height: auto; } + .wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options2 { + min-width: 35px; + height: 100%; + width: 3.5%; + left: 0; + box-shadow: 0 0 5px #333; } .wte-pn-panel#wte-pn-options2 { bottom: 150px; height: auto; } @@ -2764,7 +2775,8 @@ ol.example li.placeholder:before { padding: 52px 0 0; right: 0; width: 16.5%; - overflow: auto; } + overflow: auto; + box-shadow: 0 0 5px #333; } .wte-pn-btn { box-sizing: border-box; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 4bc419c09..ef82b4d5d 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -217,14 +217,24 @@ $leftWidth: 16.5%; min-width: 35px; height: 100%; width: 3.5%; left:0; + box-shadow: 0 0 5px #333; } &##{$pn-prefix}options{ - @extend ##{$pn-prefix}commands; + min-width: 35px; + height: 100%; + width: 3.5%; left:0; bottom: 0; height: auto; } + &##{$pn-prefix}commands{ + min-width: 35px; + height: 100%; + width: 3.5%; left:0; + box-shadow: 0 0 5px #333; + } + &##{$pn-prefix}options2{ @extend ##{$pn-prefix}commands; bottom: 150px; @@ -250,6 +260,7 @@ $leftWidth: 16.5%; right: 0; width: $leftWidth; overflow: auto; + box-shadow: 0 0 5px #333; } } diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 6ee1db9ae..ca34c4ec4 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -765,6 +765,24 @@ define([path + 'Sector', obj.build('transform').should.deep.equal([res]); }); + it('Build cursor', function() { + var res = { + type: 'select', + property: 'cursor', + defaults: 'auto', + list: [{ value : 'auto'}, + { value : 'pointer'}, + { value : 'copy'}, + { value : 'crosshair'}, + { value : 'grab'}, + { value : 'grabbing'}, + { value : 'help'}, + { value : 'move'}, + { value : 'text'}], + }; + obj.build('cursor').should.deep.equal([res]); + }); + }); }