mirror of https://github.com/artf/grapesjs.git
Browse Source
- Fixed sector view - Added Style Manager switcher that hides it in case no element selected - Added possibility to copy & paste components. It also possible to disable this featurepull/4/head
Artur Arseniev
10 years ago
19 changed files with 465 additions and 284 deletions
@ -1,25 +1,25 @@ |
|||
define(function () { |
|||
return { |
|||
|
|||
|
|||
ESCAPE_KEY : 27, |
|||
|
|||
|
|||
stylePrefix : 'com-', |
|||
|
|||
|
|||
defaults : [], |
|||
|
|||
|
|||
// Editor model
|
|||
em : null, |
|||
|
|||
|
|||
// If true center new first-level components
|
|||
firstCentered : true, |
|||
|
|||
|
|||
// If true the new component will created with 'height', else 'min-height'
|
|||
newFixedH : false, |
|||
|
|||
newFixedH : false, |
|||
|
|||
// Minimum height (in px) of new component
|
|||
minComponentH : 50, |
|||
|
|||
// Minimum width (in px) of component on creation
|
|||
minComponentW : 50, |
|||
|
|||
// Minimum width (in px) of component on creation
|
|||
minComponentW : 50, |
|||
}; |
|||
}); |
|||
@ -1,55 +1,83 @@ |
|||
define(['backbone', './SelectComponent'], |
|||
function(Backbone, SelectComponent) { |
|||
/** |
|||
/** |
|||
* @class DeleteComponent |
|||
* */ |
|||
return _.extend({},SelectComponent,{ |
|||
|
|||
|
|||
init: function(o){ |
|||
_.bindAll(this, 'startDelete', 'stopDelete', 'onDelete'); |
|||
this.hoverClass = this.pfx + 'hover-delete'; |
|||
this.badgeClass = this.pfx + 'badge-red'; |
|||
}, |
|||
|
|||
enable: function(){ |
|||
|
|||
enable: function() |
|||
{ |
|||
var that = this; |
|||
this.$el.find('*').mouseover(function (e){ |
|||
e.stopPropagation(); |
|||
if($(this).data('model').get('removable')){ //Show badge if possible
|
|||
$(this).addClass(that.hoverClass); |
|||
that.attachBadge(this); |
|||
} |
|||
}).mouseout(function (e){ //hover out
|
|||
e.stopPropagation(); |
|||
$(this).removeClass(that.hoverClass); |
|||
if(that.badge) //Hide badge if possible
|
|||
that.badge.css({ left: -1000, top:-1000 }); |
|||
}).click(function(e){ |
|||
that.onSelect(e,this); //Callback on select
|
|||
}); |
|||
this.$el.find('*') |
|||
.mouseover(this.startDelete) |
|||
.mouseout(this.stopDelete) |
|||
.click(this.onDelete); |
|||
}, |
|||
|
|||
/** |
|||
* Say what to do after the component was selected |
|||
* @param Event |
|||
* @param Object Selected element |
|||
* */ |
|||
onSelect: function(e, el){ |
|||
|
|||
/** |
|||
* Start command |
|||
* @param {Object} e |
|||
*/ |
|||
startDelete: function(e) |
|||
{ |
|||
e.stopPropagation(); |
|||
var $this = $(e.target); |
|||
|
|||
// Show badge if possible
|
|||
if($this.data('model').get('removable')){ |
|||
$this.addClass(this.hoverClass); |
|||
this.attachBadge($this.get(0)); |
|||
} |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* Stop command |
|||
* @param {Object} e |
|||
*/ |
|||
stopDelete: function(e) |
|||
{ |
|||
e.stopPropagation(); |
|||
var $this = $(e.target); |
|||
$this.removeClass(this.hoverClass); |
|||
|
|||
// Hide badge if possible
|
|||
if(this.badge) |
|||
this.badge.css({ left: -1000, top:-1000 }); |
|||
}, |
|||
|
|||
/** |
|||
* Delete command |
|||
* @param {Object} e |
|||
*/ |
|||
onDelete: function(e) |
|||
{ |
|||
e.stopPropagation(); |
|||
var $selected = $(el); |
|||
if(!$selected.data('model').get('removable')) //Do nothing in case can't remove
|
|||
var $this = $(e.target); |
|||
|
|||
// Do nothing in case can't remove
|
|||
if(!$this.data('model').get('removable')) |
|||
return; |
|||
$selected.data('model').destroy(); |
|||
|
|||
$this.data('model').destroy(); |
|||
this.removeBadge(); |
|||
this.clean(); |
|||
}, |
|||
|
|||
/** |
|||
|
|||
/** |
|||
* Updates badge label |
|||
* @param Object Model |
|||
* @return void |
|||
* @param {Object} model |
|||
* */ |
|||
updateBadgeLabel: function (model){ |
|||
this.badge.html( 'Remove '+model.getName() ); |
|||
updateBadgeLabel: function (model) |
|||
{ |
|||
this.badge.html( 'Remove ' + model.getName() ); |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
@ -1,36 +1,65 @@ |
|||
define(['StyleManager'], function(StyleManager) { |
|||
/** |
|||
/** |
|||
* @class OpenStyleManager |
|||
* */ |
|||
return { |
|||
|
|||
|
|||
run: function(em, sender) |
|||
{ |
|||
this.sender = sender; |
|||
if(!this.$sm){ |
|||
var config = em.get('Config'), |
|||
panels = em.get('Panels'), |
|||
smStylePfx = config.styleManager.stylePrefix || 'sm-'; |
|||
|
|||
config.styleManager.stylePrefix = config.stylePrefix + smStylePfx; |
|||
panels = em.get('Panels'), |
|||
pfx = config.styleManager.stylePrefix || 'sm-'; |
|||
|
|||
config.styleManager.stylePrefix = config.stylePrefix + pfx; |
|||
config.styleManager.target = em; |
|||
|
|||
|
|||
var sm = new StyleManager(config.styleManager); |
|||
this.$sm = sm.render(); |
|||
|
|||
|
|||
if(!panels.getPanel('views-container')) |
|||
this.panel = panels.addPanel({ id: 'views-container'}); |
|||
else |
|||
this.panel = panels.getPanel('views-container'); |
|||
|
|||
this.panel.set('appendContent', this.$sm).trigger('change:appendContent'); |
|||
|
|||
// Create header
|
|||
this.$header = $('<div>', { |
|||
class : config.styleManager.stylePrefix + 'header', |
|||
text : config.styleManager.textNoElement, |
|||
}); |
|||
|
|||
// Add all to the panel
|
|||
this.panel.set('appendContent', this.$sm.add(this.$header) ).trigger('change:appendContent'); |
|||
|
|||
this.target = em; |
|||
this.listenTo( this.target ,'change:selectedComponent', this.toggleSm); |
|||
} |
|||
this.$sm.show(); |
|||
this.toggleSm(); |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* Toggle Style Manager visibility |
|||
*/ |
|||
toggleSm: function() |
|||
{ |
|||
if(!this.sender.get('active')) |
|||
return; |
|||
if(this.target.get('selectedComponent')){ |
|||
this.$sm.show(); |
|||
this.$header.hide(); |
|||
}else{ |
|||
this.$sm.hide(); |
|||
this.$header.show(); |
|||
} |
|||
}, |
|||
|
|||
stop: function() |
|||
{ |
|||
if(this.$sm) |
|||
this.$sm.hide(); |
|||
if(this.$header) |
|||
this.$header.hide(); |
|||
} |
|||
}; |
|||
}); |
|||
@ -1,27 +1,28 @@ |
|||
define(function () { |
|||
return { |
|||
stylePrefix : 'comp-', |
|||
|
|||
|
|||
wrapperId : 'wrapper', |
|||
|
|||
|
|||
// Default wrapper configuration
|
|||
wrapper : { |
|||
removable : false, |
|||
removable : false, |
|||
copyable : false, |
|||
stylable : ['background','background-color','background-image', 'background-repeat','background-attachment','background-position'], |
|||
movable : false, |
|||
badgable : false, |
|||
}, |
|||
|
|||
|
|||
// Could be used for default components
|
|||
components : {}, |
|||
|
|||
|
|||
rte : {}, |
|||
|
|||
|
|||
em : {}, |
|||
|
|||
|
|||
// Class for new image component
|
|||
imageCompClass : 'fa fa-picture-o', |
|||
|
|||
|
|||
// Open assets manager on create of image component
|
|||
oAssetsOnCreate : true, |
|||
}; |
|||
|
|||
@ -1,11 +1,26 @@ |
|||
define(function () { |
|||
return { |
|||
|
|||
stylePrefix : 'sm-', |
|||
|
|||
target : null, |
|||
|
|||
sectors : [], |
|||
|
|||
|
|||
stylePrefix : 'sm-', |
|||
|
|||
// Default sectors, which could include also properties
|
|||
//
|
|||
// Example:
|
|||
// sectors: [{
|
|||
// name: 'Some sector name',
|
|||
// properties:[{
|
|||
// name : 'Width',
|
|||
// property : 'width',
|
|||
// type : 'integer',
|
|||
// units : ['px','%'],
|
|||
// defaults : 'auto',
|
|||
// min : 0,
|
|||
// }],
|
|||
// }]
|
|||
sectors : [], |
|||
|
|||
// Text to show in case no element selected
|
|||
textNoElement : 'Select element before using Style Manager', |
|||
|
|||
}; |
|||
}); |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue