diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 700c8b90e..7548917f9 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -36,7 +36,8 @@ function(Backbone, FrameView) { body.append(wrap.render()).append(cssc.render()); var protCss = conf.protectedCss; var frameCss = '.' + this.ppfx + 'dashed *{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' + - '.' + this.ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}'; + '.' + this.ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}' + + '.' + this.ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'; if(protCss) body.append(''); } diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index c481c02a7..64a53606c 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -1,25 +1,23 @@ define(['backbone', './SelectComponent','./SelectPosition'], function(Backbone, SelectComponent, SelectPosition) { - /** - * @class MoveComponent - * @private - * */ - return _.extend({},SelectComponent, SelectPosition, { + + return _.extend({}, SelectPosition, SelectComponent, { init: function(o){ SelectComponent.init.apply(this, arguments); - _.bindAll(this,'initSorter','rollback','selectingPosition','itemLeft', 'onEndMove'); + _.bindAll(this, 'initSorter','rollback', 'onEndMove'); this.opt = o; - this.hoverClass = this.pfx + 'hover-move'; - this.badgeClass = this.pfx + 'badge-yellow'; - this.noSelClass = this.pfx + 'no-select'; + this.hoverClass = this.ppfx + 'highlighter-warning'; + this.badgeClass = this.ppfx + 'badge-warning'; + this.noSelClass = this.ppfx + 'no-select'; }, enable: function(){ + this.frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this); this.$el.css('cursor','move'); this.$el.on('mousedown', this.initSorter); this.startSelectComponent(); - //Avoid strange moving behavior + // Avoid strange moving behavior this.$el.addClass(this.noSelClass); }, @@ -31,8 +29,10 @@ define(['backbone', './SelectComponent','./SelectPosition'], var el = $(e.target).data('model'); if(!el.get('draggable')) return; - if(this.sorter) - this.sorter.startSort(e.target); + // Avoid badge showing on move + this.cacheEl = null; + this.startSelectPosition(e.target, this.frameEl.contentDocument); + this.sorter.onEndMove = this.onEndMove.bind(this); this.stopSelectComponent(e); this.$el.off('mousedown', this.initSorter); }, @@ -44,21 +44,6 @@ define(['backbone', './SelectComponent','./SelectPosition'], this.enable(); }, - /** - * Hover command. Helps to avoid selecting not movable elements, eg. wrapper - * @param {Object} e - * @private - */ - onHover: function(e) { - e.stopPropagation(); - - var $this = $(e.target); - if($this.data('model').get('draggable')){ - $this.addClass(this.hoverClass); - this.attachBadge(e.target); - } - }, - /** Say what to do after the component was selected (selectComponent) * @param Event * @param Object Selected element @@ -82,25 +67,21 @@ define(['backbone', './SelectComponent','./SelectPosition'], run: function(editor, sender, opts){ this.editor = editor; - - // Activate sorter, at any run? In layers, is called once at any stack - var utils = this.editor.Utils; - if(utils && utils.Sorter) - this.sorter = new utils.Sorter({ - container: this.$el.get(0), - containerSel: '*', - itemSel: '*', - pfx: this.ppfx, - onEndMove: this.onEndMove, - direction: 'a', - nested: 1, - }); - + this.$el = this.$wrapper; + this.$badge = $(this.getBadge()); + this.$badge.addClass(this.badgeClass); + this.$hl = $(this.canvas.getHighlighter()); + this.$hl.addClass(this.hoverClass); this.enable(); }, stop: function(){ this.stopSelectComponent(); + this.$badge = $(this.getBadge()); + this.$badge.removeClass(this.badgeClass); + this.$hl = $(this.canvas.getHighlighter()); + this.$hl.removeClass(this.hoverClass); + this.frameEl.contentWindow.onscroll = null; this.$el.css('cursor','');//changes back aspect of the cursor this.$el.unbind();//removes all attached events this.$el.removeClass(this.noSelClass); diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js index 1d1799cc3..6c5b5a999 100644 --- a/src/commands/view/SelectPosition.js +++ b/src/commands/view/SelectPosition.js @@ -4,9 +4,10 @@ define(function() { /** * Start select position event + * @param {HTMLElement} trg * @private * */ - startSelectPosition: function() { + startSelectPosition: function(trg, doc) { this.isPointed = false; var utils = this.editorModel.Utils; if(utils && !this.sorter) @@ -17,12 +18,13 @@ define(function() { itemSel: '*', pfx: this.ppfx, direction: 'a', + document: doc, nested: 1, }); var offDim = this.getOffsetDim(); this.sorter.offTop = offDim.top; this.sorter.offLeft = offDim.left; - this.sorter.startSort(); + this.sorter.startSort(trg); }, /** diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index c2833c000..a66928415 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -26,6 +26,7 @@ define(['backbone'], // Frame offset this.offTop = o.offsetTop || 0; this.offleft = o.offsetLeft || 0; + this.document = o.document || document; this.dropContent = ''; }, @@ -117,11 +118,11 @@ define(['backbone'], if(this.eV){ this.eV.className += ' ' + this.freezeClass; - $(document).on('mouseup',this.endMove); + $(this.document).on('mouseup',this.endMove); } this.$el.on('mousemove',this.onMove); - $(document).on('keypress',this.rollback); + $(this.document).on('keypress',this.rollback); }, /** @@ -397,7 +398,7 @@ define(['backbone'], method = pos.method; var elDim = dims[pos.index]; plh.style.borderColor = 'transparent ' + brdCol; - plh.style.borderWidth = brd + ' ' + (brd + 2); + plh.style.borderWidth = brd + un + ' ' + (brd + 2) + un; plh.style.margin = '-' + brd + 'px 0 0'; if(elDim){ // If it's not in flow (like 'float' element) @@ -407,7 +408,7 @@ define(['backbone'], t = elDim[0] + marg; l = (method == 'before') ? (elDim[1] - marg) : (elDim[1] + elDim[3] - marg); plh.style.borderColor = brdCol + ' transparent'; - plh.style.borderWidth = (brd + 2) + ' ' + brd; + plh.style.borderWidth = (brd + 2) + un + ' ' + brd + un; plh.style.margin = '0 0 0 -' + brd + 'px'; }else{ w = elDim[3] + un; @@ -443,8 +444,8 @@ define(['backbone'], * */ endMove: function(e){ this.$el.off('mousemove', this.onMove); - $(document).off('mouseup', this.endMove); - $(document).off('keypress', this.rollback); + $(this.document).off('mouseup', this.endMove); + $(this.document).off('keypress', this.rollback); this.plh.style.display = 'none'; var clsReg = new RegExp('(?:^|\\s)'+this.freezeClass+'(?!\\S)', 'gi'); if(this.eV) diff --git a/styles/css/main.css b/styles/css/main.css index e4844a8ef..4540b3774 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2658,6 +2658,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. position: absolute; outline: 1px solid #3b97e3; pointer-events: none; } + .wte-cv-canvas .wte-highlighter-warning { + outline: 3px solid #ffca6f; } .wte-cv-canvas .wte-highlighter-sel { outline: 3px solid #3b97e3; } .wte-cv-canvas #wte-tools { @@ -2758,7 +2760,7 @@ ol.example li.placeholder:before { *.wte-com-hover-move, div.wte-com-hover-move { outline: 3px solid #ffca6f; } -.wte-com-badge, .wte-com-badge-red, .wte-com-badge-yellow, .wte-badge { +.wte-com-badge, .wte-com-badge-red, .wte-badge { pointer-events: none; background-color: #3b97e3; color: #fff; @@ -2772,7 +2774,7 @@ ol.example li.placeholder:before { .wte-com-badge-red { background-color: #DD3636; } -.wte-com-badge-yellow { +.wte-badge-warning { background-color: #ffca6f; } .wte-placeholder, .wte-com-placeholder { diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 53d721595..32b693430 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -150,6 +150,10 @@ $imageCompDim: 50px; pointer-events: none; } + .#{$app-prefix}highlighter-warning{ + outline: 3px solid $colorYell; + } + .#{$app-prefix}highlighter-sel{ outline: 3px solid $colorBlue; } @@ -253,8 +257,7 @@ ol.example li.placeholder:before {position: absolute;} @extend .#{$com-prefix}badge; background-color: $colorRed; } -.#{$com-prefix}badge-yellow{ - @extend .#{$com-prefix}badge; +.#{$app-prefix}badge-warning{ background-color: $colorYell; } .#{$app-prefix}placeholder, .#{$com-prefix}placeholder{