Handling bootstrap4 modals in Dart

Question

I need to call bootstrap modals from Dart code and this is what I've tried (using the js library):

@JS('jQuery')
class jQuery {

  @JS()
  jQuery(obj);

  @JS('modal')
  external dynamic modal(func);
}

class Modal extends jQuery {

  Modal(obj) : super(obj);

  dynamic toggle() => super.modal('toggle');
  dynamic show() => super.modal('show');
  dynamic hide() => super.modal('hide');
  dynamic handleUpdate() => super.modal('handleUpdate');
  dynamic dispose() => super.modal('dispose');

}

in that code if I use the jQuery class directly I get no issues (jQuery.modal('show')) but if I use the Modal methods i.e.:

Modal modal = Modal('#myModal');
modal.toggle();

I will get a TypeError: Cannot read property 'call' of undefined (NullError) .

The javascript the code is jQuery('#myModal').modal(func)

My second issue is how to hook a custom event for example: show.bs.modal in jQuery I would use .on(...) but in Dart I have no clue, I've used element.addEventListener('show.bs.modal', onModalShown) but it isn't triggered and I don't get any errors.

Answer 1

you defined the jquery class but you need to get it from the window and you also need to defined you modal using @JS annotation, I don't think you can extend the jQuery class

I would have done like that

@JS('\$')
external dynamic jQuery(query);

@JS()
@anonymous
class ModalElement {
  external modal(String call);
  external on(String event, Function callback);
  ...
}

final modal = jQuery('#myModal') as ModalElement;
modal.modal('toggle');

modal.on('event', allowInterop((event) {}));