Custom Widget followField

Forums: 

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

Content types: 

I found a solution by inspirering myself on the core-Widget "dimensions". The solution is to initialize a

this.changes = [];

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's picture

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