Add css to the frame

src/canvas/main.js

@@ -36,16 +36,6 @@ define(function(require) {
 				this.canvas.set('wrapper', wrp);
 			},
 
-			/**
-			 * Get wrapper
-			 *
-			 * @return	{Object}
-			 * *
-			getWrapper: function() {
-				return this.canvas.get('wrapper').getComponent();
-			},
-			*/
-
 			/**
 			 * Returns canvas element
 			 * @return {HTMLElement}

src/canvas/view/CanvasView.js

@@ -9,9 +9,7 @@ function(Backbone, FrameView) {
 			this.config = o.config || {};
 			this.ppfx	= this.config.pStylePrefix || '';
 			this.className	= this.config.stylePrefix + 'canvas';
-			this.frame = new FrameView({
-				model: this.model.get('frame')
-			});
+			this.frame = new FrameView({ model: this.model.get('frame')});
 			this.toolsEl = $('<div>', { id: this.ppfx + 'tools' }).get(0);
 			this.hlEl = $('<div>', { class: this.ppfx + 'highlighter' }).get(0);
 			this.hlSelEl = $('<div>', { class: this.ppfx + 'highlighter-sel' }).get(0);
@@ -21,6 +19,19 @@ function(Backbone, FrameView) {
 			this.toolsEl.appendChild(this.badgeEl);
 		},
 
+		/**
+		 * Render inside frame's body
+		 * @private
+		 */
+		renderBody: function(){
+			var wrap = this.model.get('frame').get('wrapper');
+      if(wrap){
+        var body = this.frame.$el.contents().find('body');
+        var cssc = this.config.em.get('CssComposer');
+        body.append(wrap.render()).append(cssc.render());
+      }
+		},
+
 		render: function() {
 			this.wrapper	= this.model.get('wrapper');
 
@@ -29,7 +40,7 @@ function(Backbone, FrameView) {
 				var wrap = this.wrapper.render();
 				this.$el.append(this.frame.render().el);
 				var frame = this.frame;
-				frame.el.onload = function(){ frame.renderWrapper(); };
+				frame.el.onload = this.renderBody.bind(this);
 			}
 
 			this.$el.append(this.toolsEl);

src/commands/view/SelectComponent.js

@@ -16,6 +16,7 @@ define(function() {
 				var config	= this.config.em.get('Config');
 				this.startSelectComponent();
 
+				// TODO refactor
 				if(config.copyPaste){
 					key('⌘+c, ctrl+c', this.copyComp);
 					key('⌘+v, ctrl+v', this.pasteComp);
@@ -23,14 +24,13 @@ define(function() {
 			},
 
 			/**
-			 * Copy component to clipboard
+			 * Copy component to the clipboard
 			 * @private
 			 */
 			copyComp: function() {
-					var el = this.editorModel.get('selectedComponent');
-
-					if(el && el.get('copyable'))
-						 this.editorModel.set('clipboard', el);
+				var el = this.editorModel.get('selectedComponent');
+				if(el && el.get('copyable'))
+					this.editorModel.set('clipboard', el);
 			},
 
 			/**
@@ -38,13 +38,13 @@ define(function() {
 			 * @private
 			 */
 			pasteComp: function() {
-					var clp = this.editorModel.get('clipboard'),
-							sel = this.editorModel.get('selectedComponent');
-					if(clp && sel && sel.collection){
-						var index = sel.collection.indexOf(sel),
-								clone = clp.clone();
-						sel.collection.add(clone, { at: index + 1 });
-					}
+				var clp = this.editorModel.get('clipboard'),
+						sel = this.editorModel.get('selectedComponent');
+				if(clp && sel && sel.collection){
+					var index = sel.collection.indexOf(sel),
+							clone = clp.clone();
+					sel.collection.add(clone, { at: index + 1 });
+				}
 			},
 
 			/**
@@ -54,8 +54,8 @@ define(function() {
 			startSelectComponent: function() {
 				this.selEl = $(this.getCanvasBody()).find('*');
 				this.selEl.on('mouseover',this.onHover)
-						.on('mouseout', this.onOut)
-						.on('click', this.onClick);
+					.on('mouseout', this.onOut)
+					.on('click', this.onClick);
 				$(this.frameEl.contentWindow).on('keydown', this.onKeyPress);
 			},
 
@@ -126,6 +126,7 @@ define(function() {
 			/**
 			 * Update highlighter element
 			 * @param {HTMLElement} el
+			 * @private
 			 */
 			updateHighlighter: function(el){
 				if(!this.hl)
@@ -211,9 +212,8 @@ define(function() {
 			 */
 			onFrameScroll: function(e){
 				this.canvasTool.style.top = '-' + this.bodyEl.scrollTop + 'px';
-				if(this.cacheEl){
+				if(this.cacheEl)
 					this.updateBadge(this.cacheEl);
-				}
 			},
 
 			/**
@@ -235,10 +235,7 @@ define(function() {
 				var left = eo.left + this.frameOff.left - bodyEl.scrollLeft - this.canvasOff.left;
 				var topScroll = this.frameOff.top + bodyEl.scrollTop;
 				var topP = top;
-				if( (top - badgeH) < topScroll)
-					top = topScroll;
-				else
-					top -= badgeH;
+				top = (top - badgeH) < topScroll ? topScroll : top - badgeH;
 				return {topP: topP, top: top, left: left, height: el.outerHeight(), width: el.outerWidth() };
 			},
 
@@ -247,9 +244,6 @@ define(function() {
 			 * @private
 			 * */
 			hideBadge: function () {
-				//var st = this.getBadge().style;
-				//st.left = -10000;
-				//st.top = -10000;
 				this.getBadge().style.display = 'none';
 			},
 
@@ -289,7 +283,7 @@ define(function() {
 				this.editorModel.set('selectedComponent',null);
 				key.unbind('⌘+c, ctrl+c');
 				key.unbind('⌘+v, ctrl+v');
-				$(document).off('keydown', this.onKeyPress);
+				$(this.frameEl.contentWindow).off('keydown', this.onKeyPress);
 			}
 		};
 });

src/editor/model/Editor.js

@@ -256,7 +256,8 @@ define([
 				cfg.pStylePrefix	= this.config.stylePrefix;
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
 				cfg.canvasId	= this.config.idCanvas;
-				this.cv = new Canvas(this.config.canvas);
+				cfg.em = this;
+				this.cv = new Canvas(cfg);
 
 				if(this.cmp)
 					this.cv.setWrapper(this.cmp);

src/editor/view/EditorView.js

@@ -6,7 +6,6 @@ function(Backbone){
 		initialize: function() {
 			this.cv = this.model.get('Canvas');
 			this.pn = this.model.get('Panels');
-			this.css = this.model.get('CssComposer');
 			this.className = this.model.config.stylePrefix + 'editor';
 		},
 
@@ -33,10 +32,6 @@ function(Backbone){
 			if(this.pn)
 				this.$el.append(this.pn.render());
 
-			// CSS Rules
-			if(this.css)
-				this.$el.append(this.css.render());
-
 			this.$el.attr('class', this.className);
 
 			if(this.pn)

styles/css/main.css

@@ -2639,6 +2639,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   overflow: hidden;
   z-index: 1;
   /* This simulate body behaviour */ }
+  .wte-cv-canvas > iframe {
+    background-color: #fff;
+    height: 100%;
+    outline: medium none;
+    width: 100%;
+    border: none; }
   .wte-cv-canvas .wte-highlighter, .wte-cv-canvas .wte-highlighter-sel {
     position: absolute;
     outline: 1px solid #3b97e3;

styles/scss/main.scss

@@ -126,6 +126,14 @@ $imageCompDim:	50px;
   overflow: hidden;
   z-index:1;
 
+  > iframe {
+    background-color: #fff;
+    height: 100%;
+    outline: medium none;
+    width: 100%;
+    border: none;
+  }
+
   .#{$app-prefix}highlighter, .#{$app-prefix}highlighter-sel{
     position: absolute;
     outline: 1px solid $colorBlue;