Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fix drag&drop

Browse Source
This commit is contained in:
Tautvidas Sipavičius
2017-04-12 21:01:16 +03:00
parent 0b8c787cda
commit dc8bacc27d
2 changed files with 50 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
View File

@@ -71,6 +71,7 @@ define([
markerWidth = '', markerWidth = '',
markerHeight = '', markerHeight = '',
containerOffset = element.offset(), containerOffset = element.offset(),
viewCollection = that.getCollection(),
marker, targetModel, targetView, targetElement, marker, targetModel, targetView, targetElement,
topOffset, leftOffset, isLastBlockInsertion, topOffset, leftOffset, isLastBlockInsertion,
$targetBlock, margin; $targetBlock, margin;
@@ -80,19 +81,19 @@ define([
element.find('.mailpoet_drop_marker').remove(); element.find('.mailpoet_drop_marker').remove();
// Allow empty collections to handle their own drop marking // Allow empty collections to handle their own drop marking
if (view.model.get('blocks').isEmpty()) return; if (viewCollection.isEmpty()) return;
if (view.collection.length === 0) { if (viewCollection.length === 0) {
targetElement = element.find(view.childViewContainer); targetElement = element.find(view.childViewContainer);
topOffset = targetElement.offset().top - element.offset().top; topOffset = targetElement.offset().top - element.offset().top;
leftOffset = targetElement.offset().left - element.offset().left; leftOffset = targetElement.offset().left - element.offset().left;
markerWidth = targetElement.width(); markerWidth = targetElement.width();
markerHeight = targetElement.height(); markerHeight = targetElement.height();
} else { } else {
isLastBlockInsertion = view.collection.length === dropPosition.index; isLastBlockInsertion = that.getCollection().length === dropPosition.index;
targetModel = isLastBlockInsertion ? view.collection.at(dropPosition.index - 1) : view.collection.at(dropPosition.index); targetModel = isLastBlockInsertion ? viewCollection.at(dropPosition.index - 1) : viewCollection.at(dropPosition.index);
targetView = view.children.findByModel(targetModel); targetView = that.getChildren().findByModel(targetModel);
targetElement = targetView.$el; targetElement = targetView.$el;
topOffset = targetElement.offset().top - containerOffset.top; topOffset = targetElement.offset().top - containerOffset.top;
@@ -135,10 +136,10 @@ define([
if (dropPosition.index === 0) { if (dropPosition.index === 0) {
marker.addClass('mailpoet_drop_marker_first'); marker.addClass('mailpoet_drop_marker_first');
} }
if (view.collection.length - 1 === dropPosition.index) { if (viewCollection.length - 1 === dropPosition.index) {
marker.addClass('mailpoet_drop_marker_last'); marker.addClass('mailpoet_drop_marker_last');
} }
if (dropPosition.index > 0 && view.collection.length - 1 > dropPosition.index) { if (dropPosition.index > 0 && viewCollection.length - 1 > dropPosition.index) {
marker.addClass('mailpoet_drop_marker_middle'); marker.addClass('mailpoet_drop_marker_middle');
} }
marker.addClass('mailpoet_drop_marker_' + dropPosition.position); marker.addClass('mailpoet_drop_marker_' + dropPosition.position);
@@ -147,9 +148,9 @@ define([
// compensated for to position marker right in the middle of two // compensated for to position marker right in the middle of two
// blocks // blocks
if (dropPosition.position === 'before') { if (dropPosition.position === 'before') {
$targetBlock = view.children.findByModel(view.collection.at(dropPosition.index-1)).$el; $targetBlock = that.getChildren().findByModel(viewCollection.at(dropPosition.index-1)).$el;
} else { } else {
$targetBlock = view.children.findByModel(view.collection.at(dropPosition.index)).$el; $targetBlock = that.getChildren().findByModel(viewCollection.at(dropPosition.index)).$el;
} }
margin = $targetBlock.outerHeight(true) - $targetBlock.outerHeight(); margin = $targetBlock.outerHeight(true) - $targetBlock.outerHeight();
@@ -182,6 +183,7 @@ define([
view.model.get('blocks').length view.model.get('blocks').length
), ),
droppableModel = event.draggable.getDropModel(), droppableModel = event.draggable.getDropModel(),
viewCollection = that.getCollection(),
droppedView, droppedModel, index, tempCollection, tempCollection2; droppedView, droppedModel, index, tempCollection, tempCollection2;
if (dropPosition === undefined) return; if (dropPosition === undefined) return;
@@ -196,22 +198,22 @@ define([
orientation: 'vertical', orientation: 'vertical',
}); });
tempCollection.get('blocks').add(droppableModel); tempCollection.get('blocks').add(droppableModel);
view.collection.add(tempCollection, {at: index}); viewCollection.add(tempCollection, {at: index});
} else { } else {
view.collection.add(droppableModel, {at: index}); viewCollection.add(droppableModel, {at: index});
} }
droppedView = view.children.findByModel(droppableModel); droppedView = that.getChildren().findByModel(droppableModel);
} else { } else {
// Special insertion by replacing target block with collection // Special insertion by replacing target block with collection
// and inserting dropModel into that // and inserting dropModel into that
var tempModel = view.collection.at(dropPosition.index); var tempModel = viewCollection.at(dropPosition.index);
tempCollection = new (EditorApplication.getBlockTypeModel('container'))({ tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical', orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical',
}); });
view.collection.remove(tempModel); viewCollection.remove(tempModel);
if (tempCollection.get('orientation') === 'horizontal') { if (tempCollection.get('orientation') === 'horizontal') {
if (dropPosition.position === 'before') { if (dropPosition.position === 'before') {
@@ -242,10 +244,10 @@ define([
tempCollection.get('blocks').add(droppableModel); tempCollection.get('blocks').add(droppableModel);
} }
} }
view.collection.add(tempCollection, {at: dropPosition.index}); viewCollection.add(tempCollection, {at: dropPosition.index});
// Call post add actions // Call post add actions
droppedView = view.children.findByModel(tempCollection).children.findByModel(droppableModel); droppedView = that.getChildren().findByModel(tempCollection).children.findByModel(droppableModel);
} }
// Call post add actions // Call post add actions
@@ -290,7 +292,7 @@ define([
unsafe = !!unsafe; unsafe = !!unsafe;
if (this.view.collection.length === 0) { if (this.getCollection().length === 0) {
return { return {
insertionType: 'normal', insertionType: 'normal',
index: 0, index: 0,
@@ -327,7 +329,7 @@ define([
index = indexAndPosition.index; index = indexAndPosition.index;
} }
if (!unsafe && orientation === 'vertical' && insertionType === 'special' && this.view.collection.at(index).get('orientation') === 'horizontal') { if (!unsafe && orientation === 'vertical' && insertionType === 'special' && this.getCollection().at(index).get('orientation') === 'horizontal') {
// Prevent placing horizontal container in another horizontal container, // Prevent placing horizontal container in another horizontal container,
// which would allow breaking the column limit. // which would allow breaking the column limit.
// Switch that to normal insertion // Switch that to normal insertion
@@ -356,7 +358,7 @@ define([
var index = this._computeCellIndex(eventX, eventY), var index = this._computeCellIndex(eventX, eventY),
// TODO: Handle case when there are no children, container is empty // TODO: Handle case when there are no children, container is empty
targetView = this.view.children.findByModel(this.view.collection.at(index)), targetView = this.getChildren().findByModel(this.getCollection().at(index)),
orientation = this.view.model.get('orientation'), orientation = this.view.model.get('orientation'),
element = targetView.$el, element = targetView.$el,
eventOffset, closeOffset, elementDimension; eventOffset, closeOffset, elementDimension;
@@ -391,7 +393,7 @@ define([
_computeCellIndex: function(eventX, eventY) { _computeCellIndex: function(eventX, eventY) {
var orientation = this.view.model.get('orientation'), var orientation = this.view.model.get('orientation'),
eventOffset = (orientation === 'vertical') ? eventY : eventX, eventOffset = (orientation === 'vertical') ? eventY : eventX,
resultView = this.view.children.find(function(view) { resultView = this.getChildren().find(function(view) {
var element = view.$el, var element = view.$el,
closeOffset, farOffset; closeOffset, farOffset;
@@ -414,15 +416,24 @@ define([
_canAcceptNormalInsertion: function() { _canAcceptNormalInsertion: function() {
var orientation = this.view.model.get('orientation'), var orientation = this.view.model.get('orientation'),
depth = this.view.renderOptions.depth, depth = this.view.renderOptions.depth,
childCount = this.view.children.length; childCount = this.getChildren().length;
// Note that depth is zero indexed. Root container has depth=0 // Note that depth is zero indexed. Root container has depth=0
return orientation === 'vertical' || (orientation === 'horizontal' && depth === 1 && childCount < this.options.columnLimit); return orientation === 'vertical' || (orientation === 'horizontal' && depth === 1 && childCount < this.options.columnLimit);
}, },
_canAcceptSpecialInsertion: function() { _canAcceptSpecialInsertion: function() {
var orientation = this.view.model.get('orientation'), var orientation = this.view.model.get('orientation'),
depth = this.view.renderOptions.depth, depth = this.view.renderOptions.depth,
childCount = this.view.children.length; childCount = this.getChildren().length;
return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit); return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit);
}, },
getCollectionView: function() {
return this.view.getChildView('blocks');
},
getChildren: function() {
return this.getCollectionView().children;
},
getCollection: function() {
return this.getCollectionView().collection;
}
}); });
}); });

34
webpack.config.js
View File

@@ -264,25 +264,25 @@ config.push(_.extend({}, baseConfig, {
'newsletter_editor/blocks/posts.js', 'newsletter_editor/blocks/posts.js',
'newsletter_editor/blocks/social.js', 'newsletter_editor/blocks/social.js',
//'components/config.spec.js', 'components/config.spec.js',
//'components/content.spec.js', 'components/content.spec.js',
//'components/heading.spec.js', 'components/heading.spec.js',
//'components/save.spec.js', 'components/save.spec.js',
//'components/sidebar.spec.js', 'components/sidebar.spec.js',
//'components/styles.spec.js', 'components/styles.spec.js',
//'components/communication.spec.js', 'components/communication.spec.js',
//'blocks/automatedLatestContent.spec.js', 'blocks/automatedLatestContent.spec.js',
//'blocks/button.spec.js', 'blocks/button.spec.js',
'blocks/container.spec.js', 'blocks/container.spec.js',
//'blocks/divider.spec.js', 'blocks/divider.spec.js',
//'blocks/footer.spec.js', 'blocks/footer.spec.js',
//'blocks/header.spec.js', 'blocks/header.spec.js',
//'blocks/image.spec.js', 'blocks/image.spec.js',
//'blocks/posts.spec.js', 'blocks/posts.spec.js',
//'blocks/social.spec.js', 'blocks/social.spec.js',
//'blocks/spacer.spec.js', 'blocks/spacer.spec.js',
//'blocks/text.spec.js', 'blocks/text.spec.js',
], ],
}, },
output: { output: {