I would like to trigger a custom javascript function after an element in a matrix block was moved in the matrix but I'm not sure how to attach the event without changing the MatrixInput.js
.
So far I've tried the easy way with attaching element handler in my plugins init()
function
Garnish.$doc.on('dragStop', '.matrixblock > .actions > .move', this.onMoveEnd.bind(this))
But of course that did not work. The Craft.MatrixInput
contains a the function
this.blockSort = new Garnish.DragSort($blocks, {
handle: '> .actions > .move',
axis: 'y',
filter: $.proxy(function() {
// Only return all the selected items if the target item is selected
if (this.blockSort.$targetItem.hasClass('sel')) {
return this.blockSelect.getSelectedItems();
}
else {
return this.blockSort.$targetItem;
}
}, this),
collapseDraggees: true,
magnetStrength: 4,
helperLagBase: 1.5,
helperOpacity: 0.9,
onSortChange: $.proxy(function() {
this.blockSelect.resetItemOrder();
}, this)
});
Can anyone please tell me how to extend this without breaking Craft updates?
Accessing this event with Craft.MatrixInput.blockSort
to attach something does not work either and I'm not sure how I can make use of the this.trigger('dragStop');
event.
I've tried to dig into Garnish events to attach the handlers, but I'm not sure how. Garnish.on
does not work, Garnish.Drag.on
either, Garnish.Base
returns a function but Garnish.Base()
returns undefined.