From 4b910cccbb946f8d95e4e0ab2c3476d41fcfd12a Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 7 Jun 2016 14:54:28 +0200 Subject: [PATCH] Add possibility to remove components with backspace --- src/commands/view/SelectComponent.js | 65 +++++++++++++++++----------- src/demo.js | 18 ++++---- 2 files changed, 48 insertions(+), 35 deletions(-) diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 92867fa61..b54c03919 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -6,11 +6,10 @@ define(function() { return { init: function(o){ - _.bindAll(this, 'onHover', 'onOut', 'onClick'); + _.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress'); }, - enable: function() - { + enable: function() { _.bindAll(this,'copyComp','pasteComp'); var confMain = this.config.em.get('Config'); this.startSelectComponent(); @@ -24,8 +23,7 @@ define(function() { * Copy component to clipboard * @private */ - copyComp: function() - { + copyComp: function() { var sel = this.editorModel.get('selectedComponent'); if(sel && sel.get('copyable')) @@ -36,8 +34,7 @@ define(function() { * Paste component from clipboard * @private */ - pasteComp: function() - { + pasteComp: function() { var clp = this.editorModel.get('clipboard'), sel = this.editorModel.get('selectedComponent'); if(clp && sel && sel.collection){ @@ -51,13 +48,32 @@ define(function() { * Start select component event * @private * */ - startSelectComponent: function(){ + startSelectComponent: function() { var that = this; this.$el.find('*') .on('mouseover',this.onHover) .on('mouseout', this.onOut) .on('click', this.onClick); this.selEl = this.$el.find('*'); + $(document).on('keypress', this.onKeyPress); + }, + + /** + * On key press event + * @private + * */ + onKeyPress: function(e) { + var key = e.which || e.keyCode; + var comp = this.editorModel.get('selectedComponent'); + if((key == 8 || key == 46) && comp) { + if(!comp.get('removable')) + return; + comp.set('status',''); + comp.destroy(); + this.removeBadge(); + this.clean(); + this.editorModel.set('selectedComponent',null); + } }, /** @@ -65,8 +81,7 @@ define(function() { * @param {Object} e * @private */ - onHover: function(e) - { + onHover: function(e) { e.stopPropagation(); $(e.target).addClass(this.hoverClass); this.attachBadge(e.target); @@ -77,8 +92,7 @@ define(function() { * @param {Object} e * @private */ - onOut: function(e) - { + onOut: function(e) { e.stopPropagation(); $(e.target).removeClass(this.hoverClass); if(this.badge) @@ -90,8 +104,7 @@ define(function() { * @param {Object} e * @private */ - onClick: function(e) - { + onClick: function(e) { var s = $(e.target).data('model').get('stylable'); if(!(s instanceof Array) && !s) return; @@ -102,7 +115,7 @@ define(function() { * @param Event * @private * */ - stopSelectComponent: function(e){ + stopSelectComponent: function(e) { if(this.selEl) this.selEl.trigger('mouseout').off('mouseover mouseout click'); this.selEl = null; @@ -114,8 +127,7 @@ define(function() { * @param {Object} el * @private * */ - onSelect: function(e, el) - { + onSelect: function(e, el) { e.stopPropagation(); var md = this.editorModel.get('selectedComponent'); if(md) @@ -131,7 +143,7 @@ define(function() { * Removes all highlighting effects on components * @private * */ - clean: function(){ + clean: function() { this.$el.find('*').removeClass(this.hoverClass); }, @@ -139,7 +151,7 @@ define(function() { * @param Object Component * @private * */ - attachBadge: function(el){ + attachBadge: function(el) { var model = $(el).data("model"); if(!model || !model.get('badgable')) return; @@ -165,7 +177,7 @@ define(function() { * Create badge for the component * @private * */ - createBadge: function (){ + createBadge: function () { this.badge = $('
', {class: this.badgeClass + " no-dots"}).appendTo(this.$wrapper); }, @@ -173,7 +185,7 @@ define(function() { * Remove badge * @private * */ - removeBadge: function (){ + removeBadge: function () { if(this.badge){ this.badge.remove(); delete this.badge; @@ -185,7 +197,7 @@ define(function() { * @param Object Model * @private * */ - updateBadgeLabel: function (model){ + updateBadgeLabel: function (model) { if(model) this.badge.html( model.getName() ); }, @@ -195,20 +207,20 @@ define(function() { * @param {Component} model * @private */ - cleanPrevious: function(model){ + cleanPrevious: function(model) { model.set({ status: '', state: '', }); }, - run: function(em, sender){ + run: function(em, sender) { this.enable(); this.render(); }, - stop: function(){ - var sel = this.editorModel.get('selectedComponent'); + stop: function() { + var sel = this.editorModel.get('selectedComponent'); if(sel) this.cleanPrevious(sel); this.$el.unbind(); //removes all attached events @@ -218,6 +230,7 @@ define(function() { this.editorModel.set('selectedComponent',null); key.unbind('⌘+c, ctrl+c'); key.unbind('⌘+v, ctrl+v'); + $(document).off('keypress', this.onKeyPress); } }; }); \ No newline at end of file diff --git a/src/demo.js b/src/demo.js index 0f1ef0927..05e8ce6a8 100644 --- a/src/demo.js +++ b/src/demo.js @@ -283,15 +283,15 @@ require(['config/require-config'], function() { }, ] }, - { id: 'remove', className: 'fa fa-trash-o icon-rm', command: 'delete-comp', attributes : { title: 'Remove element' }, }, - { id: 'move', className: 'fa fa-arrows', command: 'move-comp', attributes : { title: 'Move elements' }, }, - //{ id: 'resize', className: 'fa fa-arrows-alt', command: 'resize-comp', attributes : { title: 'Resize' }, }, - { id: 'text', className: 'fa fa-font' , command: 'text-comp', attributes : { title: 'Create text element' }, }, - { id: 'image', className: 'fa fa-picture-o', command: 'image-comp', attributes : { title: 'Create image element' }, }, - /*{ id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' }, - options: { content: '{{ VAR11 }}', terminateAfterInsert: true, }, - },*/ - ], + { id: 'move', className: 'fa fa-arrows', command: 'move-comp', attributes : { title: 'Move elements' }, }, + //{ id: 'remove', className: 'fa fa-trash-o icon-rm', command: 'delete-comp', attributes : { title: 'Remove element' }, }, + //{ id: 'resize', className: 'fa fa-arrows-alt', command: 'resize-comp', attributes : { title: 'Resize' }, }, + { id: 'text', className: 'fa fa-font' , command: 'text-comp', attributes : { title: 'Create text element' }, }, + { id: 'image', className: 'fa fa-picture-o', command: 'image-comp', attributes : { title: 'Create image element' }, }, + /*{ id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' }, + options: { content: '{{ VAR11 }}', terminateAfterInsert: true, }, + },*/ + ], },{ id : 'options', buttons : [