From 31dd50c377f67f94cd17ce38a5e23b504572efc0 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 4 Jul 2016 09:35:17 +0200 Subject: [PATCH] Add frame to the canvas --- src/canvas/main.js | 45 +++++++++++++++++----------- src/canvas/model/Canvas.js | 10 +++++-- src/canvas/model/Frame.js | 14 +++++++++ src/canvas/view/CanvasView.js | 23 +++++++++----- src/canvas/view/FrameView.js | 40 +++++++++++++++++++++++++ src/commands/view/CommandAbstract.js | 10 +++++++ src/commands/view/SelectComponent.js | 3 ++ src/editor/view/EditorView.js | 4 +-- styles/css/main.css | 29 ++++++++---------- styles/scss/main.scss | 20 +++++-------- 10 files changed, 139 insertions(+), 59 deletions(-) create mode 100644 src/canvas/model/Frame.js create mode 100644 src/canvas/view/FrameView.js diff --git a/src/canvas/main.js b/src/canvas/main.js index 318a33bb5..32cc9f411 100644 --- a/src/canvas/main.js +++ b/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; }); \ No newline at end of file diff --git a/src/canvas/model/Canvas.js b/src/canvas/model/Canvas.js index 18fe5a9f3..9ca966b80 100644 --- a/src/canvas/model/Canvas.js +++ b/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)); + }, + }); }); diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js new file mode 100644 index 000000000..cc89f8c4d --- /dev/null +++ b/src/canvas/model/Frame.js @@ -0,0 +1,14 @@ +define(['backbone'], + function(Backbone){ + + return Backbone.Model.extend({ + + defaults :{ + wrapper: '', + width: '', + height: '', + attributes: {}, + }, + + }); + }); diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 56338385f..b1ced97a3 100644 --- a/src/canvas/view/CanvasView.js +++ b/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; }, - + }); }); \ No newline at end of file diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js new file mode 100644 index 000000000..a52b30113 --- /dev/null +++ b/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; + }, + + }); +}); \ No newline at end of file diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index ef849ec9d..5631767af 100644 --- a/src/commands/view/CommandAbstract.js +++ b/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); }, diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index d05100f8e..25885a0a4 100644 --- a/src/commands/view/SelectComponent.js +++ b/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) diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index 50510f0b7..f327a1d90 100644 --- a/src/editor/view/EditorView.js +++ b/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(); diff --git a/styles/css/main.css b/styles/css/main.css index f54188a61..52ef46ab1 100644 --- a/styles/css/main.css +++ b/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; } diff --git a/styles/scss/main.scss b/styles/scss/main.scss index c6b87a792..07736c644 100644 --- a/styles/scss/main.scss +++ b/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;