Add frame to the canvas

src/canvas/main.js

@@ -2,7 +2,7 @@ define(function(require) {
 	/**
 	 * @class 	Canvas
 	 * @param 	{Object} Configurations
-	 * 
+	 *
 	 * @return	{Object}
  	 * */
 	var Canvas	= function(config)
@@ -16,45 +16,56 @@ define(function(require) {
 			if (!(name in c))
 				c[name] = defaults[name];
 		}
-		
+
 		this.canvas		= new Canvas(config);
 		var obj			= {
 				model	: this.canvas,
-		    	config	: c,
+		    config	: c,
 		};
-		
+
 		this.CanvasView	= new CanvasView(obj);
 	};
-	
+
 	Canvas.prototype	= {
+
 			/**
 			 * Add wrapper
 			 * @param	{Object}	wrp Wrapper
-			 * 
+			 *
 			 * */
-			setWrapper	: function(wrp)
-			{
+			setWrapper: function(wrp) {
 				this.canvas.set('wrapper', wrp);
 			},
-			
+
 			/**
 			 * Get wrapper
-			 * 
+			 *
 			 * @return	{Object}
 			 * */
-			getWrapper	: function()
-			{
+			getWrapper: function() {
 				return this.canvas.get('wrapper').getComponent();
 			},
-			
+
+
+			getFrameWrapperEl: function(){
+				return this.CanvasView.frame.getWrapper();
+			},
+
+			/**
+			 * Returns body element of the frame
+			 * @return {[type]} [description]
+			 */
+			getBody: function(){
+				return this.CanvasView.frame.el.contentDocument.body;
+			},
+
 			/**
 			 * Render canvas
 			 * */
-			render		: function()
-			{
-				return	this.CanvasView.render().$el;
+			render: function() {
+				return	this.CanvasView.render().el;
 			},
 	};
-	
+
 	return Canvas;
 });

src/canvas/model/Canvas.js

@@ -1,12 +1,18 @@
-define(['backbone'],
-	function(Backbone){
+define(['backbone', './Frame'],
+	function(Backbone, Frame){
 
 		return Backbone.Model.extend({
 
 			defaults :{
+        frame: '',
 				wrapper: '',
 				rulers: false,
 			},
 
+      initialize: function(config) {
+        var conf = this.conf || {};
+        this.set('frame', new Frame(conf.frame));
+      },
+
 		});
 	});

src/canvas/model/Frame.js

@@ -0,0 +1,14 @@
+define(['backbone'],
+  function(Backbone){
+
+    return Backbone.Model.extend({
+
+      defaults :{
+        wrapper: '',
+        width: '',
+        height: '',
+        attributes: {},
+      },
+
+    });
+  });

src/canvas/view/CanvasView.js

@@ -1,25 +1,32 @@
-define(['backbone'],
-function(Backbone) {
+define(['backbone','./FrameView'],
+function(Backbone, FrameView) {
 	/**
 	 * @class CanvasView
 	 * */
 	return Backbone.View.extend({
-		
-		//id: 'canvas',
-		
+
 		initialize: function(o) {
 			this.config		= o.config;
 			this.className	= this.config.stylePrefix + 'canvas';
+			this.frame = new FrameView({
+				model: this.model.get('frame')
+			});
 		},
-		
+
 		render: function() {
 			this.wrapper	= this.model.get('wrapper');
+
 			if(this.wrapper && typeof this.wrapper.render == 'function'){
-				this.$el.append( this.wrapper.render() );
+				this.model.get('frame').set('wrapper', this.wrapper);
+				var wrap = this.wrapper.render();
+				this.$el.append(this.frame.render().el);
+				var frame = this.frame;
+				frame.el.onload = function(){ frame.renderWrapper(); };
 			}
+
 			this.$el.attr({class: this.className, id: this.config.canvasId});
 			return this;
 		},
-	
+
 	});
 });

src/canvas/view/FrameView.js

@@ -0,0 +1,40 @@
+define(['backbone'],
+function(Backbone) {
+  /**
+   * @class CanvasView
+   * */
+  return Backbone.View.extend({
+
+    tagName: 'iframe',
+
+    attributes: {
+      src: 'about:blank'
+    },
+
+    getBody: function(){
+      this.$el.contents().find('body');
+    },
+
+    getWrapper: function(){
+      return this.$el.contents().find('body div');
+    },
+
+    renderWrapper: function(){
+      var wrap = this.model.get('wrapper');
+
+      if(wrap){
+        var body = this.$el.contents().find('body');
+        body.append(wrap.render());
+      }
+    },
+
+    render: function() {
+      this.$el.attr({
+        class: 'testframe',
+        style: 'width: 50%; display: block; height: 80%; border: medium none; margin: 50px auto 0; background-color: white',
+      });
+      return this;
+    },
+
+  });
+});

src/commands/view/CommandAbstract.js

@@ -22,10 +22,20 @@ define(['backbone'],
 				this.badgeClass		= this.pfx + 'badge';
 				this.plhClass			= this.pfx + 'placeholder';
 				this.freezClass		= this.ppfx + 'freezed';
+
 				if(this.editorModel.get)
 					this.setElement(this.editorModel.get('$editor').find('#'+this.canvasId));
+
+				//TODO refactor
+				var fbody = this.editorModel.Canvas.getBody();
+				this.setElement(fbody);
+
 				this.$canvas			= this.$el;
 				this.$wrapper			= this.$canvas.find('#'+this.wrapperId);
+
+				//TODO refactor
+				this.$wrapper			= $(fbody.querySelector('#wrapper'));
+
 				this.init(this.config);
 			},
 

src/commands/view/SelectComponent.js

@@ -50,6 +50,9 @@ define(function() {
 			 * */
 			startSelectComponent: function() {
 				var that = this;
+				// TODO
+				//this.setElement(this.editorModel.Canvas.getFrameWrapperEl());
+				//$el should be "canvas"
 				this.$el.find('*')
 						.on('mouseover',this.onHover)
 						.on('mouseout', this.onOut)

src/editor/view/EditorView.js

@@ -23,6 +23,8 @@ function(Backbone){
 
 			this.model.set('$editor', this.$el);
 
+			this.$cont.html(this.$el);
+
 			// Canvas
 			if(this.cv)
 				this.$el.append(this.cv.render());
@@ -37,8 +39,6 @@ function(Backbone){
 
 			this.$el.attr('class', this.className);
 
-			this.$cont.html(this.$el);
-
 			if(this.pn)
 				this.pn.active();
 

styles/css/main.css

@@ -2630,6 +2630,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 /*************  CANVAS  ****************/
 .wte-cv-canvas {
+  background-color: rgba(0, 0, 0, 0.15);
   position: absolute;
   width: 80%;
   height: 100%;
@@ -2778,7 +2779,7 @@ ol.example li.placeholder:before {
     height: 100%;
     width: 3.5%;
     left: 0;
-    box-shadow: 0 0 5px #333; }
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
   .wte-pn-panel#wte-pn-options {
     min-width: 35px;
     height: 100%;
@@ -2786,12 +2787,6 @@ ol.example li.placeholder:before {
     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; }
@@ -2810,7 +2805,7 @@ ol.example li.placeholder:before {
     right: 0;
     width: 16.5%;
     overflow: auto;
-    box-shadow: 0 0 5px #333; }
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
 
 .wte-pn-btn, .wte-btnt {
   box-sizing: border-box;
@@ -2994,11 +2989,11 @@ ol.example li.placeholder:before {
   font-size: 11px;
   font-weight: lighter;
   padding: 10px;
-  text-shadow: 0 1px 0 #252525; }
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
 
 .wte-sm-sector, .wte-clm-tags {
   clear: both;
-  border-bottom: 1px solid #303030;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   color: #eee;
   font-weight: lighter;
   text-align: left;
@@ -3010,13 +3005,13 @@ ol.example li.placeholder:before {
     padding-right: 5px;
     font-size: 11px; }
   .wte-sm-sector .wte-sm-title, .wte-clm-tags .wte-sm-title {
-    background-color: #3a3a3a;
+    background-color: rgba(0, 0, 0, 0.15);
     font-size: 13px;
     letter-spacing: 1px;
     padding: 12px 10px 12px 20px;
-    text-shadow: 0 1px 0 #252525;
-    border-bottom: 1px solid #303030;
-    border-top: 1px solid #414141;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
     cursor: pointer; }
   .wte-sm-sector .wte-sm-label, .wte-clm-tags .wte-sm-label {
     margin: 5px 5px 2px 0; }
@@ -3121,7 +3116,7 @@ ol.example li.placeholder:before {
       color: transparent; }
   .wte-sm-sector .wte-sm-list .wte-sm-el, .wte-clm-tags .wte-sm-list .wte-sm-el {
     float: left;
-    border-left: 1px solid #252525;
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
     text-shadow: 0 1px 0 #232323;
     /*232323*/ }
     .wte-sm-sector .wte-sm-list .wte-sm-el:first-child, .wte-clm-tags .wte-sm-list .wte-sm-el:first-child {
@@ -3162,13 +3157,13 @@ ol.example li.placeholder:before {
       width: 100%;
       padding: 0 5px; }
     .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box {
-      background-color: #414141;
+      background-color: rgba(255, 255, 255, 0.05);
       border-radius: 2px;
       margin-top: 5px;
       position: relative;
       overflow: hidden; }
       .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show {
-        border: 1px solid #3f3f3f;
+        border: 1px solid rgba(252, 252, 252, 0.05);
         padding: 3px 5px; }
       .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
         display: block; }

styles/scss/main.scss

@@ -118,6 +118,7 @@ $imageCompDim:	50px;
 }
 /*************  CANVAS  ****************/
 .#{$cv-prefix}canvas {
+  background-color: rgba(0, 0, 0, 0.15);
   position: absolute;
   width: 80%;
   height: 100%;
@@ -254,7 +255,7 @@ $leftWidth: 16.5%;
   	min-width: 35px;
     height: 100%;
     width: 3.5%; left:0;
-    box-shadow: 0 0 5px #333;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   }
 
   &##{$pn-prefix}options{
@@ -265,13 +266,6 @@ $leftWidth: 16.5%;
   	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;
@@ -297,7 +291,7 @@ $leftWidth: 16.5%;
     right: 0;
     width: $leftWidth;
     overflow: auto;
-    box-shadow: 0 0 5px #333;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   }
 }
 
@@ -473,9 +467,9 @@ $leftWidth: 16.5%;
 
 /********* Style Manager **********/
 
-$darkBorder:		darken($mainDkColor,4%); /*303030*/
-$lightBorder:		lighten($mainDkColor,3%); /*414141*/
-$darkTextShadow:	darken($mainDkColor,8%); /*#252525*/
+$darkBorder:		rgba(0, 0, 0, 0.15); /*303030*/
+$lightBorder:		rgba(255, 255, 255, 0.05); /*414141*/
+$darkTextShadow:	rgba(0, 0, 0, 0.3); /*#252525*/
 $inputFontColor:	darken($fontColor,10%); /*#d5d5d5*/
 $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 
@@ -510,7 +504,7 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 	}
 
 	.#{$sm-prefix}title{
-	  background-color: $mainDkColor;
+	  background-color: $darkBorder;
 	  font-size: 13px;
 	  letter-spacing: 1px;
 	  padding: 12px 10px 12px 20px;