From 28daeab03a16da88e5b362c2213aa13851cf4c2b Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 28 Jul 2016 01:22:57 +0200 Subject: [PATCH] Update block manager --- src/block_manager/view/BlockView.js | 1 + src/block_manager/view/BlocksView.js | 18 +++++++++++++++++- src/commands/view/OpenStyleManager.js | 7 +++++-- src/demo.js | 6 ++++-- src/device_manager/view/DevicesView.js | 17 ++++++++++++++++- src/editor/config/config.js | 5 ++++- src/editor/main.js | 1 + src/editor/model/Editor.js | 25 +++++++++++++++++++++++++ src/editor/view/EditorView.js | 3 ++- src/panels/model/Button.js | 2 ++ src/panels/view/ButtonView.js | 13 ++++++++++++- src/utils/Sorter.js | 16 ++++++++++++++++ styles/css/main.css | 14 +++++++++++++- styles/scss/main.scss | 14 ++++++++++++++ 14 files changed, 132 insertions(+), 10 deletions(-) diff --git a/src/block_manager/view/BlockView.js b/src/block_manager/view/BlockView.js index af870b37d..5e3666185 100644 --- a/src/block_manager/view/BlockView.js +++ b/src/block_manager/view/BlockView.js @@ -23,6 +23,7 @@ function(Backbone) { if(!this.config.getSorter) return; var sorter = this.config.getSorter(); + //this.config.dragHelper(this.el.cloneNode(1)); sorter.startSort(this.el); sorter.setDropContent(this.model.get('content')); this.doc.on('mouseup', this.onDrop); diff --git a/src/block_manager/view/BlocksView.js b/src/block_manager/view/BlocksView.js index b069daf4b..56046ffe4 100644 --- a/src/block_manager/view/BlocksView.js +++ b/src/block_manager/view/BlocksView.js @@ -4,13 +4,14 @@ function(Backbone, BlockView) { return Backbone.View.extend({ initialize: function(opts, config) { - _.bindAll(this, 'getSorter', 'onDrag', 'onDrop'); + _.bindAll(this, 'getSorter', 'onDrag', 'onDrop', 'dragHelper', 'moveHelper'); this.config = config || {}; this.ppfx = this.config.pStylePrefix || ''; this.listenTo(this.collection, 'add', this.addTo); this.em = this.config.em; this.tac = 'test-tac'; this.config.getSorter = this.getSorter; + this.config.dragHelper = this.dragHelper; }, /** @@ -49,15 +50,30 @@ function(Backbone, BlockView) { * @private */ onDrag: function(){ + this.em.stopDefault(); this.em.get('Canvas').getBody().style.cursor = 'grabbing'; document.body.style.cursor = 'grabbing'; }, + dragHelper: function(el){ + el.className += ' ' + this.ppfx + 'bdrag'; + this.helper = el; + document.body.appendChild(el); + $(this.em.get('Canvas').getBody()).on('mousemove', this.moveHelper); + $(document).on('mousemove', this.moveHelper); + }, + + moveHelper: function(e){ + this.helper.style.left = e.pageX + 'px'; + this.helper.style.top = e.pageY + 'px'; + }, + /** * Callback when block is dropped * @private */ onDrop: function(){ + this.em.runDefault(); this.em.get('Canvas').getBody().style.cursor = ''; document.body.style.cursor = ''; }, diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js index e29b2d5d1..d2a0e8c34 100644 --- a/src/commands/view/OpenStyleManager.js +++ b/src/commands/view/OpenStyleManager.js @@ -19,8 +19,11 @@ define(['StyleManager'], function(StyleManager) { // Device Manager var dvm = em.DeviceManager; - if(dvm && config.showDevices) - this.$cn2.append(dvm.render()); + if(dvm && config.showDevices){ + var devicePanel = panels.addPanel({ id: 'devices-c'}); + devicePanel.set('appendContent', dvm.render()).trigger('change:appendContent'); + //this.$cn2.append(dvm.render()); + } // Class Manager container var clm = em.ClassManager; diff --git a/src/demo.js b/src/demo.js index 4670173a4..5c895e623 100644 --- a/src/demo.js +++ b/src/demo.js @@ -61,19 +61,21 @@ require(['config/require-config'], function() { panels: { defaults : [{ id : 'commands', - buttons : [{ + buttons : [/*{ id : 'selcomp', className : 'fa fa fa-mouse-pointer', command : 'select-comp', active: 1, - },{ + },*/{ id : 'create', className : 'fa fa-plus-square-o icon-add-comp', command : 'create-comp', + stopDefaultCommand: 1, },{ id: 'image-comp', className: 'fa fa-picture-o', dragDrop: 1, + stopDefaultCommand: 1, options: { content: '
'+ '
' + diff --git a/src/device_manager/view/DevicesView.js b/src/device_manager/view/DevicesView.js index 1e80d64ac..51fd7da6a 100644 --- a/src/device_manager/view/DevicesView.js +++ b/src/device_manager/view/DevicesView.js @@ -11,8 +11,10 @@ function(Backbone, devicesTemplate) { initialize: function(o) { this.config = o.config || {}; + this.em = this.config.em; this.ppfx = this.config.pStylePrefix || ''; this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd; + this.listenTo(this.em, 'change:device', this.updateSelect); this.delegateEvents(); }, @@ -27,7 +29,7 @@ function(Backbone, devicesTemplate) { * @private */ updateDevice: function(){ - var em = this.config.em; + var em = this.em; if(em){ var devEl = this.devicesEl; var val = devEl ? devEl.val() : ''; @@ -35,6 +37,19 @@ function(Backbone, devicesTemplate) { } }, + /** + * Update select value on device update + * @private + */ + updateSelect: function(){ + var em = this.em; + if(em){ + var device = this.em.getDeviceModel(); + var name = device ? device.get('name') : ''; + this.devicesEl.val(name); + } + }, + /** * Return devices options * @return {string} String of options diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 0003fe054..c8fbf3fef 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -38,7 +38,7 @@ define(function () { storageType: 'local', // The css that could only be seen (for instance, inside the code viewer) - protectedCss: 'body{margin:0;height:100%}#wrapper{height:100%}', + protectedCss: 'body{margin:0;height:100%}#wrapper{min-height:100%; overflow:auto}', //Configurations for Asset Manager assetManager : {}, @@ -114,6 +114,9 @@ define(function () { }], }, + // Default command + defaultCommand: 'select-comp', + // If true render a select of available devices showDevices: 1, diff --git a/src/editor/main.js b/src/editor/main.js index 46202c0f3..f1d00aad7 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -40,6 +40,7 @@ * @param {Object} [config.domComponents={}] Components configuration, see the relative documentation * @param {Object} [config.panels={}] Panels configuration, see the relative documentation * @param {Object} [config.showDevices=true] If true render a select of available devices inside style manager panel + * @param {string} [config.defaultCommand='select-comp'] Command to execute when no other command is running * @example * var editor = grapesjs.init({ * container : '#gjs', diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 5102cf966..332b694e0 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -776,5 +776,30 @@ define([ return this.get('DeviceManager').get(name); }, + /** + * Run default command if setted + * @private + */ + runDefault: function(){ + var command = this.get('Commands').get(this.config.defaultCommand); + if(!command || this.defaultRunning) + return; + command.stop(this, this); + command.run(this, this); + this.defaultRunning = 1; + }, + + /** + * Stop default command + * @private + */ + stopDefault: function(){ + var command = this.get('Commands').get(this.config.defaultCommand); + if(!command) + return; + command.stop(this, this); + this.defaultRunning = 0; + }, + }); }); diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index afd62d9b7..37b154e5d 100644 --- a/src/editor/view/EditorView.js +++ b/src/editor/view/EditorView.js @@ -9,7 +9,8 @@ function(Backbone){ this.className = this.conf.stylePrefix + 'editor'; this.model.on('loaded', function(){ this.pn.active(); - }); + this.model.runDefault(); + }, this); }, render: function(){ diff --git a/src/panels/model/Button.js b/src/panels/model/Button.js index cf5065df5..e01169545 100644 --- a/src/panels/model/Button.js +++ b/src/panels/model/Button.js @@ -15,6 +15,8 @@ define([ 'backbone','require'], options: {}, active: false, dragDrop: false, + runDefaultCommand: true, + stopDefaultCommand: false, }, initialize: function(options) { diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js index a10a64217..e4ae0a0ba 100644 --- a/src/panels/view/ButtonView.js +++ b/src/panels/view/ButtonView.js @@ -260,8 +260,19 @@ function(Backbone, require) { if(this.parentM) this.swapParent(); + var active = this.model.get('active'); + this.model.set('active', !active); - this.model.set('active', !this.model.get('active')); + // If the stop is requested + var command = this.em.get('Commands').get('select-comp'); + + if(active){ + if(this.model.get('runDefaultCommand')) + this.em.runDefault(); + }else{ + if(this.model.get('stopDefaultCommand')) + this.em.stopDefault(); + } }, /** diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 01b250593..1a3255aba 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -30,6 +30,7 @@ define(['backbone'], this.offleft = o.offsetLeft || 0; this.document = o.document || document; this.dropContent = ''; + this.helper = ''; }, /** @@ -123,6 +124,12 @@ define(['backbone'], $(this.document).on('mouseup',this.endMove); } + if(this.helper){ + this.helperEl = this.helper; + this.helperEl.className += ' ' + this.ppfx + 'bdrag'; + document.body.appendChild(this.helperEl); + } + this.$el.on('mousemove',this.onMove); $(document).on('keypress',this.rollback); @@ -165,6 +172,12 @@ define(['backbone'], this.lastPos = pos; } + if(this.helperEl){ + var helperS = this.helperEl.style; + helperS.left = this.rX + 'px'; + helperS.top = this.rY + 'px'; + } + if(typeof this.onMoveClb === 'function') this.onMoveClb(e); }, @@ -459,6 +472,9 @@ define(['backbone'], this.move(this.target, this.eV, this.lastPos); if(this.plh) this.plh.style.display = 'none'; + this.helperEl = ''; + if(this.helper) + this.helper.parentNode.removeChild(this.helper); if(typeof this.onEndMove === 'function') this.onEndMove(); }, diff --git a/styles/css/main.css b/styles/css/main.css index fdb93e8e5..0a6f4c05d 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2594,6 +2594,11 @@ $fontColorActive: #4f8ef7; .wte-color-active, .wte-pn-btn.wte-pn-active, .wte-btnt.wte-pn-active { color: #f8f8f8; } +.wte-bdrag { + position: absolute; + z-index: 10; + width: auto; } + /********************* MAIN ************************/ .clear { clear: both; } @@ -3073,9 +3078,12 @@ ol.example li.placeholder:before { .wte-devices-c { display: flex; align-items: center; + padding: 4px; + /* padding: 10px 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); - margin-bottom: 10px; } + margin-bottom: 10px; + */ } .wte-devices-c .wte-device-label { flex-grow: 2; font-size: 0.7em; @@ -3413,6 +3421,10 @@ ol.example li.placeholder:before { cursor: all-scroll; margin: 2.5%; } +.wte-block.wte-bdrag { + width: auto; + padding: 0; } + /********* END Block manager **********/ /********* Class manager **********/ .wte-clm-tags { diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 6eca497a6..57c1047d7 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -96,6 +96,12 @@ $imageCompDim: 50px; color: $fontColorActive; } +.#{$app-prefix}bdrag{ + position: absolute; + z-index: 10; + width: auto; +} + /********************* MAIN ************************/ .clear{ clear:both } .no-select{ @@ -608,9 +614,12 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/ .#{$app-prefix}devices-c{ display: flex; align-items: center; + padding: 4px; + /* padding: 10px 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 10px; + */ .#{$app-prefix}device-label { flex-grow: 2; @@ -993,6 +1002,11 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/ margin: 2.5%; } +.#{$app-prefix}block.#{$app-prefix}bdrag{ + width: auto; + padding: 0; +} + /********* END Block manager **********/