diff --git a/src/canvas/main.js b/src/canvas/main.js index 14d0debbd..f402971d4 100644 --- a/src/canvas/main.js +++ b/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} diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 8a6958574..776c8f8c9 100644 --- a/src/canvas/view/CanvasView.js +++ b/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 = $('
', { id: this.ppfx + 'tools' }).get(0); this.hlEl = $('
', { class: this.ppfx + 'highlighter' }).get(0); this.hlSelEl = $('
', { 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); diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 27112a838..10c555163 100644 --- a/src/commands/view/SelectComponent.js +++ b/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); } }; }); \ No newline at end of file diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 46f2a999e..379cbadd5 100644 --- a/src/editor/model/Editor.js +++ b/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); diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index f327a1d90..8f1f5f169 100644 --- a/src/editor/view/EditorView.js +++ b/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) diff --git a/styles/css/main.css b/styles/css/main.css index 42b040dc5..f15b82fd7 100644 --- a/styles/css/main.css +++ b/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; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index a4b04a06c..98fb9ba9c 100644 --- a/styles/scss/main.scss +++ b/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;