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

Fix drag and drop buttons

pull/36/head
Artur Arseniev 10 years ago
parent
5a6dae3b47
commit
6790be28ba
7 changed files with 123 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/canvas/main.js
  2. 1
      src/commands/view/SelectComponent.js
  3. 42
      src/demo.js
  4. 32
      src/panels/view/ButtonView.js
  5. 6
      src/utils/Sorter.js
  6. 28
      styles/css/main.css
  7. 25
      styles/scss/main.scss

28
src/canvas/main.js
View File

@ -116,6 +116,34 @@ define(function(require) {
return this.CanvasView.render().el;
},
/**
* Get frame position
* @return {Object}
* @private
*/
getOffset: function() {
var frameOff = this.offset(this.getFrameEl());
var canvasOff = this.offset(this.getElement());
return {
top: frameOff.top - canvasOff.top,
left: frameOff.left - canvasOff.left
};
},
/**
* Get the offset of the element
* @param {HTMLElement} el
* @return {Object}
* @private
*/
offset: function(el){
var rect = el.getBoundingClientRect();
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
};
},
/**
* Returns wrapper element
* @return {HTMLElement}

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

@ -222,7 +222,6 @@ define(function() {
* @private
*/
onFrameScroll: function(e){
console.log('scrolling');
if(this.cacheEl)
this.updateBadge(this.cacheEl);
},

42
src/demo.js
View File

@ -22,13 +22,13 @@ require(['config/require-config'], function() {
id: 'undo',
run: function(editor, sender){
sender.set('active',false);
editor.UndoManager.undo();
editor.UndoManager.undo(true);
}
},{
id: 'redo',
run: function(editor, sender){
sender.set('active',false);
editor.UndoManager.redo();
editor.UndoManager.redo(true);
}
},{
id: 'clean-all',
@ -57,7 +57,7 @@ require(['config/require-config'], function() {
{ type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
]
},
/*
panels: {
defaults : [{
id : 'commands',
@ -65,8 +65,38 @@ panels: {
id : 'selcomp',
className : 'fa fa fa-mouse-pointer',
command : 'select-comp',
}]}]},
*/
},{
id : 'create',
className : 'fa fa-plus-square-o icon-add-comp',
command : 'create-comp',
},{
id: 'image-comp',
className: 'fa fa-picture-o',
dragDrop: 1,
options: {
content: '<div style="width:100%; padding:7px">'+
'<div class="redbg" style="width:33.333%; min-height:75px; padding:7px; float:left;"></div>' +
'<div style="width:33.333%; min-height:75px; padding:7px; float:left; background:blue"></div>' +
'<div style="width:33.333%; min-height:75px; padding:7px; float:left; background:blue"></div>' +
'<div style="clear:both"></div>' +
'</div>'
},
}]
},{
id : 'options',
buttons : [
{ id: 'visibility', className: 'fa fa-eye', command: 'sw-visibility', active: true, context: 'sw-visibility', attributes: { title: 'View components' }, },
{ id: 'export', className: 'fa fa-code', command: 'export-template', attributes: { title: 'View code' }, },
{ id: 'view-github', className: 'fa fa-github', command: 'open-github', attributes: { title: 'View on Github' }, },
],
},{
id : 'views',
buttons : [{ id: 'open-sm', className: 'fa fa-paint-brush', command: 'open-sm', active: true, attributes: { title: 'Open Style Manager' },},
{ id: 'open-layers', className: 'fa fa-bars', command: 'open-layers', attributes : { title: 'Open Layer Manager' }, },
{ id: 'open-blocks', className: 'fa fa-th-large', command: 'open-blocks', attributes : { title: 'Open Blocks' }, }],
}]},
/*
panels: {
defaults : [{
@ -155,9 +185,9 @@ panels: {
{ id: 'open-layers', className: 'fa fa-bars', command: 'open-layers', attributes : { title: 'Open Layer Manager' }, },],
}],
},
*/
styleManager : {
sectors: [{
name: 'General',

32
src/panels/view/ButtonView.js
View File

@ -8,7 +8,7 @@ function(Backbone, require) {
tagName: 'span',
initialize: function(o){
_.bindAll(this, 'startTimer', 'stopTimer', 'showButtons', 'hideButtons','closeOnKeyPress','onDrop');
_.bindAll(this, 'startTimer', 'stopTimer', 'showButtons', 'hideButtons','closeOnKeyPress','onDrop', 'initSorter', 'stopDrag');
var cls = this.model.get('className');
this.config = o.config || {};
this.em = this.config.em || {};
@ -35,24 +35,34 @@ function(Backbone, require) {
this.events = {};
if(this.model.get('dragDrop'))
if(this.model.get('dragDrop')){
this.events.mousedown = 'initDrag';
else
this.em.on('loaded', this.initSorter);
}else
this.events.click = 'clicked';
this.delegateEvents();
},
initSorter: function(){
if(this.em.Canvas){
this.canvasEl = this.em.Canvas.getElement();
var canvas = this.em.Canvas;
this.canvasEl = canvas.getBody();
this.sorter = new this.em.Utils.Sorter({
container: this.canvasEl,
placer: canvas.getPlacerEl(),
containerSel: '*',
itemSel: '*',
pfx: this.ppfx,
onMove: this.onDrag,
onEndMove: this.onDrop,
direction: 'auto',
document: canvas.getFrameEl().contentDocument,
direction: 'a',
wmargin: 1,
nested: 1,
});
var offDim = canvas.getOffset();
this.sorter.offTop = offDim.top;
this.sorter.offLeft = offDim.left;
}
},
@ -65,6 +75,16 @@ function(Backbone, require) {
this.sorter.startSort(this.el);
this.sorter.setDropContent(this.model.get('options').content);
this.canvasEl.style.cursor = 'grabbing';
$(document).on('mouseup', this.stopDrag);
},
/**
* Stop dragging
* @private
*/
stopDrag: function(){
$(document).off('mouseup', this.stopDrag);
this.sorter.endMove();
},
/**
@ -126,7 +146,7 @@ function(Backbone, require) {
startTimer: function()
{
this.timeout = setTimeout(this.showButtons, this.config.delayBtnsShow);
$(document).on('mouseup', this.stopTimer);
$(document).on('mouseup', this.stopTimer);
},
/**

6
src/utils/Sorter.js
View File

@ -123,7 +123,7 @@ define(['backbone'],
}
this.$el.on('mousemove',this.onMove);
$(this.document).on('keypress',this.rollback);
$(document).on('keypress',this.rollback);
},
/**
@ -479,7 +479,8 @@ define(['backbone'],
var opts = {at: index, noIncrement: 1};
if(!this.dropContent){
modelTemp = targetCollection.add({}, opts);
modelToDrop = model.collection.remove(model);
if(model)
modelToDrop = model.collection.remove(model);
}else{
modelToDrop = this.dropContent;
@ -503,6 +504,7 @@ define(['backbone'],
* @param {Bool} Indicates if rollback in anycase
* */
rollback: function(e){
$(document).off('keypress',this.rollback);
var key = e.which || e.keyCode;
if(key == 27){
this.moved = false;

28
styles/css/main.css
View File

@ -2642,12 +2642,14 @@ $fontColorActive: #4f8ef7;
/************* CANVAS ****************/
.wte-cv-canvas {
background-color: rgba(0, 0, 0, 0.15);
box-sizing: border-box;
position: absolute;
width: 83%;
width: 85%;
height: 100%;
top: 0;
left: 2%;
bottom: 0;
left: 0;
overflow: hidden;
padding-top: 40px;
z-index: 1;
/* This simulate body behaviour */ }
.wte-cv-canvas > iframe {
@ -2823,18 +2825,13 @@ ol.example li.placeholder:before {
text-align: center;
z-index: 3; }
.wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options2 {
min-width: 35px;
height: 100%;
width: 2%;
width: 85%;
left: 0;
top: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.wte-pn-panel#wte-pn-options {
min-width: 35px;
height: 100%;
width: 2%;
left: 0;
bottom: 0;
height: auto; }
right: 15%;
top: 0; }
.wte-pn-panel#wte-pn-options2 {
bottom: 150px;
height: auto; }
@ -2855,6 +2852,11 @@ ol.example li.placeholder:before {
overflow: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.wte-pn-buttons {
align-items: center;
display: flex;
justify-content: center; }
.wte-pn-btn, .wte-btnt {
box-sizing: border-box;
height: 30px;
@ -2863,7 +2865,7 @@ ol.example li.placeholder:before {
background-color: transparent;
border: none;
font-size: 18px;
margin-bottom: 5px;
margin-right: 5px;
border-radius: 2px;
cursor: pointer;
padding: 5px;

25
styles/scss/main.scss
View File

@ -138,11 +138,13 @@ $imageCompDim: 50px;
/************* CANVAS ****************/
.#{$cv-prefix}canvas {
background-color: rgba(0, 0, 0, 0.15);
box-sizing: border-box;
position: absolute;
width: 83%;
width: 85%;
height: 100%;
top: 0; left: 2%;
bottom: 0; left: 0;
overflow: hidden;
padding-top: 40px;
z-index:1;
> iframe {
@ -321,18 +323,13 @@ $leftWidth: 15%;
z-index:3;
&##{$pn-prefix}commands{
min-width: 35px;
height: 100%;
width: 2%; left:0;
width: 85%;
left:0; top: 0;
box-shadow: 0 0 5px $mainDkColor;
}
&##{$pn-prefix}options{
min-width: 35px;
height: 100%;
width: 2%; left:0;
bottom: 0;
height: auto;
right: 15%; top: 0;
}
&##{$pn-prefix}options2{
@ -364,6 +361,12 @@ $leftWidth: 15%;
}
}
.#{$pn-prefix}buttons{
align-items: center;
display: flex;
justify-content: center;
}
.#{$pn-prefix}btn, .#{$app-prefix}btnt{
@extend .#{$app-prefix}color-main;
box-sizing: border-box;
@ -372,7 +375,7 @@ $leftWidth: 15%;
background-color: transparent;
border:none;
font-size: 18px;
margin-bottom: 5px;
margin-right: 5px;
border-radius: 2px;
cursor: pointer;
padding: 5px;

Write Preview
Loading…
Cancel
Save