Add also the style of the wrapper with getCss

9 years ago · 2dfa4eea3d
7 changed files with 54 additions and 49 deletions
--- a/bower.json
+++ b/bower.json
@ -1,7 +1,7 @@
 {
  "name": "grapesjs",
  "description": "Open source Web Template Editor",
-  "version": "0.4.1",
+  "version": "0.4.2",
  "author": "Artur Arseniev",
  "homepage": "http://grapesjs.com",
  "main": [
--- a/dist/grapes.min.js
+++ b/dist/grapes.min.js
--- a/index.html
+++ b/index.html
@ -7,7 +7,6 @@
 		<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
 		<link rel="stylesheet" href="node_modules/codemirror/theme/hopscotch.css">
 		<script src="private/ckeditor/ckeditor.js"></script>
-		<!-- <script src="private/tinymce/tinymce.min.js"></script> -->
 	</head>
 	<style>
 		body, html{ height: 100%; margin: 0;}
@ -15,19 +14,6 @@
 	<body>

 		<div id="gjs" style="height:0px; overflow:hidden">
-			<div class="intro" style="background-image: url(images/bg-intro.jpg)">
-      <div class="container-fluid">
-        <div class="logo">
-            <a href="#"><img src="images/logo.png" alt="image description"></a>
-        </div>
-        <div class="intro-text">
-          <h1>Your Company<span>is a long established fact</span></h1>
-          <p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing.</p>
-					<a href="#">some text<div>some block</div></a>
-          <a href="#" class="btn btn-default">Call to Action</a>
-        </div>
-      </div>
-    </div>
 			<header class="header-banner">
 				<div class="container-width">
 					<!--
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "grapesjs",
  "description": "Open source Web Template Editor",
-  "version": "0.4.1",
+  "version": "0.4.2",
  "author": "Artur Arseniev",
  "license": "BSD-3-Clause",
  "homepage": "http://grapesjs.com",
--- a/src/code_manager/model/CssGenerator.js
+++ b/src/code_manager/model/CssGenerator.js
@ -5,38 +5,55 @@ define(['backbone'],
 		 * */
 		return Backbone.Model.extend({

-			initialize: function(){
+			initialize: function() {
 				this.compCls = [];
 			},

 			/**
-			 * Get CSS from components
+			 * Get CSS from component
 			 * @param {Model} model
 			 * @return {String}
 			 */
-			buildFromComp: function(model) {
-				var coll 	= model.get('components') || model,
-					code 	= '';
-
-				coll.each(function(m){
-					var css = m.get('style'),
-						cls = m.get('classes'),
-						cln = m.get('components');
-					cls.each(function(m){
-						this.compCls.push(m.get('name'));
+			buildFromModel: function (model) {
+				var code = '';
+				var style = model.get('style');
+				var classes = model.get('classes');
+
+				// Let's know what classes I've found
+				if(classes) {
+					classes.each(function(model){
+						this.compCls.push(model.get('name'));
 					}, this);
+				}

-					if(css && Object.keys(css).length !== 0){
-						code 	+= '#' + m.cid + '{';
-						for(var prop in css){
-							if(css.hasOwnProperty(prop))
-								code += prop + ':' + css[prop] + ';';
-						}
-						code 	+= '}';
+				if(style && Object.keys(style).length !== 0) {
+					code += '#' + model.cid + '{';
+					for(var prop in style){
+						if(style.hasOwnProperty(prop))
+							code += prop + ':' + style[prop] + ';';
 					}
+					code += '}';
+				}

-					if(cln.length)
-						code 	+= this.buildFromComp(cln);
+				return code;
+			},
+
+			/**
+			 * Get CSS from components
+			 * @param {Model} model
+			 * @return {String}
+			 */
+			buildFromComp: function(model) {
+				var coll = model.get('components') || model,
+					code = '';
+
+				coll.each(function(m) {
+					var cln = m.get('components');
+					code += this.buildFromModel(m);
+
+					if(cln.length){
+						code += this.buildFromComp(cln);
+					}

 				}, this);

@ -46,7 +63,8 @@ define(['backbone'],
 			/** @inheritdoc */
 			build: function(model, cssc) {
 				this.compCls = [];
-				var code 	= this.buildFromComp(model);
+				var code = this.buildFromModel(model);
+				code += this.buildFromComp(model);
 				var compCls = this.compCls;

 				if(cssc){
--- a/src/commands/view/ExportTemplate.js
+++ b/src/commands/view/ExportTemplate.js
@ -7,6 +7,7 @@ define(function() {

 			run: function(editor, sender) {
 				this.sender = sender;
+				this.wrapper = editor.DomComponents.getWrapper();
 				this.components = editor.DomComponents.getComponents();
 				this.modal = editor.Modal || null;
 				this.cm = editor.CodeManager || null;
@ -65,7 +66,7 @@ define(function() {
 				}
 				var addCss = this.protCss || '';
 				this.htmlEditor.setContent(this.cm.getCode(this.components, 'html', this.cssc));
-				this.cssEditor.setContent(addCss + this.cm.getCode(this.components, 'css', this.cssc));
+				this.cssEditor.setContent(addCss + this.cm.getCode(this.wrapper, 'css', this.cssc));

 				if(this.sender)
 					this.sender.set('active',false);
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@ -368,7 +368,7 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
 				if(!cmp || !cm || !cssc)
 					return;

-				var wrp	= cmp.getComponent();
+				var wrp = cmp.getComponent();
 				var protCss = this.config.protectedCss;

 				return protCss + cm.getCode(wrp, 'css', cssc);