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
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