Custom Widget followField
Hey,
I implemented a custom widget to replace the core-image-widget by another image chooser which is able to use drupals Entity Embed Browser (which is pretty cool).
I Implemented this widget as a custom H5PEditor library. Now I want to use the widget in the Library DragQuestion, which I forked for that purpose. In H5PEditor.DragQuestion.js theres the Code block
H5PEditor.followField(parent, 'settings/background', function (params) {
that.setBackground(params);
});
for watching for changes.
In the core h5peditor-image.js widget, I assume, this
// Notify listeners that image was changed to params
that.trigger('changedImage', this.params);
line is the active part notifying the followField about changes.
Sadly that trigger function is not available in my widgets js-File which looks like this (skeleton):
H5PEditor.widgets.drupalImage = H5PEditor.DrupalImage = (function ($) {
var self = this;
// Constructor
function C(parent, field, params, setValue) {
this.parent = parent;
this.field = field;
this.params = params;
this.setValue = setValue;
this.library = parent.library + '/' + field.name;
this.changes = [];
// Keep track of editing image
this.isEditing = false;
// Keep track of type of image that is being uploaded
this.isOriginalImage = false;
this.passReadies = true;
parent.ready(function () {
self.passReadies = false;
});
}
C.prototype.appendTo = function ($wrapper) {
...
};
C.prototype.updatePreview = function(JSONApiRequestResponse) {
var self = this;
...
// HERE IT SHOULD HAPPEN!
self.trigger('changedImage', this.params);
};
C.prototype.unsetPreview = function() {
var self = this;
// HERE IT SHOULD HAPPEN!
self.trigger('changedImage', this.params);
};
C.prototype.updateButtonVisibility = function() {
...
};
/**
* Remove this item.
*/
C.prototype.remove = function () {
...
};
/**
* Validate this item
*/
C.prototype.validate = function () {
return true;
};
return C;
})(H5P.jQuery);
Can someone please explain if and how I could make this triggering available of, if not, which other ways could work in order to make DnD update its Editor-Widget when I cahnge the Background Image using alternative Image-Chooser widget.
Thank you very much!
Julian
Julian Strecker
Thu, 08/23/2018 - 11:42
Permalink
Solved
I found a solution by inspirering myself on the core-Widget "dimensions". The solution is to initialize a
in the widgets contructor and later (on change of value) call all the functions in this changes-Array like
for (var i = 0; i < this.changes.length; i++) { this.changes[i](this.params); }So anyone having same issues could get a clue how to solve inter-widget-communication.
Julian
BV52
Fri, 08/24/2018 - 05:34
Permalink
Hi Julian,I'm glad you found
Hi Julian,
I'm glad you found the solution and thank you for posting it here. I'm sure a lot will benefit from it.
-BV52