tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add possibility to remove components with backspace

pull/36/head
Artur Arseniev 10 years ago
parent
967a5f2d18
commit
4b910cccbb
2 changed files with 48 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      src/commands/view/SelectComponent.js
  2. 18
      src/demo.js

65
src/commands/view/SelectComponent.js
View File

@ -6,11 +6,10 @@ define(function() {
return { return {
init: function(o){ init: function(o){
_.bindAll(this, 'onHover', 'onOut', 'onClick'); _.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
}, },
enable: function() enable: function() {
{
_.bindAll(this,'copyComp','pasteComp'); _.bindAll(this,'copyComp','pasteComp');
var confMain = this.config.em.get('Config'); var confMain = this.config.em.get('Config');
this.startSelectComponent(); this.startSelectComponent();
@ -24,8 +23,7 @@ define(function() {
* Copy component to clipboard * Copy component to clipboard
* @private * @private
*/ */
copyComp: function() copyComp: function() {
{
var sel = this.editorModel.get('selectedComponent'); var sel = this.editorModel.get('selectedComponent');
if(sel && sel.get('copyable')) if(sel && sel.get('copyable'))
@ -36,8 +34,7 @@ define(function() {
* Paste component from clipboard * Paste component from clipboard
* @private * @private
*/ */
pasteComp: function() pasteComp: function() {
{
var clp = this.editorModel.get('clipboard'), var clp = this.editorModel.get('clipboard'),
sel = this.editorModel.get('selectedComponent'); sel = this.editorModel.get('selectedComponent');
if(clp && sel && sel.collection){ if(clp && sel && sel.collection){
@ -51,13 +48,32 @@ define(function() {
* Start select component event * Start select component event
* @private * @private
* */ * */
startSelectComponent: function(){ startSelectComponent: function() {
var that = this; var that = this;
this.$el.find('*') this.$el.find('*')
.on('mouseover',this.onHover) .on('mouseover',this.onHover)
.on('mouseout', this.onOut) .on('mouseout', this.onOut)
.on('click', this.onClick); .on('click', this.onClick);
this.selEl = this.$el.find('*'); 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 * @param {Object} e
* @private * @private
*/ */
onHover: function(e) onHover: function(e) {
{
e.stopPropagation(); e.stopPropagation();
$(e.target).addClass(this.hoverClass); $(e.target).addClass(this.hoverClass);
this.attachBadge(e.target); this.attachBadge(e.target);
@ -77,8 +92,7 @@ define(function() {
* @param {Object} e * @param {Object} e
* @private * @private
*/ */
onOut: function(e) onOut: function(e) {
{
e.stopPropagation(); e.stopPropagation();
$(e.target).removeClass(this.hoverClass); $(e.target).removeClass(this.hoverClass);
if(this.badge) if(this.badge)
@ -90,8 +104,7 @@ define(function() {
* @param {Object} e * @param {Object} e
* @private * @private
*/ */
onClick: function(e) onClick: function(e) {
{
var s = $(e.target).data('model').get('stylable'); var s = $(e.target).data('model').get('stylable');
if(!(s instanceof Array) && !s) if(!(s instanceof Array) && !s)
return; return;
@ -102,7 +115,7 @@ define(function() {
* @param Event * @param Event
* @private * @private
* */ * */
stopSelectComponent: function(e){ stopSelectComponent: function(e) {
if(this.selEl) if(this.selEl)
this.selEl.trigger('mouseout').off('mouseover mouseout click'); this.selEl.trigger('mouseout').off('mouseover mouseout click');
this.selEl = null; this.selEl = null;
@ -114,8 +127,7 @@ define(function() {
* @param {Object} el * @param {Object} el
* @private * @private
* */ * */
onSelect: function(e, el) onSelect: function(e, el) {
{
e.stopPropagation(); e.stopPropagation();
var md = this.editorModel.get('selectedComponent'); var md = this.editorModel.get('selectedComponent');
if(md) if(md)
@ -131,7 +143,7 @@ define(function() {
* Removes all highlighting effects on components * Removes all highlighting effects on components
* @private * @private
* */ * */
clean: function(){ clean: function() {
this.$el.find('*').removeClass(this.hoverClass); this.$el.find('*').removeClass(this.hoverClass);
}, },
@ -139,7 +151,7 @@ define(function() {
* @param Object Component * @param Object Component
* @private * @private
* */ * */
attachBadge: function(el){ attachBadge: function(el) {
var model = $(el).data("model"); var model = $(el).data("model");
if(!model || !model.get('badgable')) if(!model || !model.get('badgable'))
return; return;
@ -165,7 +177,7 @@ define(function() {
* Create badge for the component * Create badge for the component
* @private * @private
* */ * */
createBadge: function (){ createBadge: function () {
this.badge = $('<div>', {class: this.badgeClass + " no-dots"}).appendTo(this.$wrapper); this.badge = $('<div>', {class: this.badgeClass + " no-dots"}).appendTo(this.$wrapper);
}, },
@ -173,7 +185,7 @@ define(function() {
* Remove badge * Remove badge
* @private * @private
* */ * */
removeBadge: function (){ removeBadge: function () {
if(this.badge){ if(this.badge){
this.badge.remove(); this.badge.remove();
delete this.badge; delete this.badge;
@ -185,7 +197,7 @@ define(function() {
* @param Object Model * @param Object Model
* @private * @private
* */ * */
updateBadgeLabel: function (model){ updateBadgeLabel: function (model) {
if(model) if(model)
this.badge.html( model.getName() ); this.badge.html( model.getName() );
}, },
@ -195,20 +207,20 @@ define(function() {
* @param {Component} model * @param {Component} model
* @private * @private
*/ */
cleanPrevious: function(model){ cleanPrevious: function(model) {
model.set({ model.set({
status: '', status: '',
state: '', state: '',
}); });
}, },
run: function(em, sender){ run: function(em, sender) {
this.enable(); this.enable();
this.render(); this.render();
}, },
stop: function(){ stop: function() {
var sel = this.editorModel.get('selectedComponent'); var sel = this.editorModel.get('selectedComponent');
if(sel) if(sel)
this.cleanPrevious(sel); this.cleanPrevious(sel);
this.$el.unbind(); //removes all attached events this.$el.unbind(); //removes all attached events
@ -218,6 +230,7 @@ define(function() {
this.editorModel.set('selectedComponent',null); this.editorModel.set('selectedComponent',null);
key.unbind('⌘+c, ctrl+c'); key.unbind('⌘+c, ctrl+c');
key.unbind('⌘+v, ctrl+v'); key.unbind('⌘+v, ctrl+v');
$(document).off('keypress', this.onKeyPress);
} }
}; };
}); });

18
src/demo.js
View File

@ -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: '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: '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: '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: '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' }, /*{ id: 'var', className: 'fa fa-hashtag', command: 'insert-custom',attributes : { title: 'Some variable' },
options: { content: '{{ VAR11 }}', terminateAfterInsert: true, }, options: { content: '{{ VAR11 }}', terminateAfterInsert: true, },
},*/ },*/
], ],
},{ },{
id : 'options', id : 'options',
buttons : [ buttons : [

Write Preview
Loading…
Cancel
Save