javascriptnode.jscoffeescripthallo-js

How to make custom Hallo.js plugin/button call a js function (toggle a modal)


I need to have a custom button in the Hallo toolbar that will toggle a modal to open. I thought that it should be fairly simple to do, but there is not a lot of documentation for Hallo yet, and my knowledge of coffee script is not the best.

I've been able to create a basic plugin, by using the template given on their github page, but can not figure out how to have it call a js function to toggle the modal.

Any help is greatly appreciated. Thank you!


Solution

  • So this is what I ended up using... A lot of it was copied from the "Link" widget that came with hallo. It's very messy, and I wish I took the time to make it look better, but it works and I was in a hurry. I hope it may be useful for anyone else that needed the same customization. Just change the return value to be whatever function you want it to be.

    (function(jQuery) {
    return jQuery.widget("IKS.hallocustomimage", {
      options: {
        editable: null,
        uuid: "",
        link: true,
        image: true,
        dialogOpts: {
          autoOpen: false,
          width: 540,
          height: 95,
          modal: true,
          resizable: false,
          draggable: false,
          dialogClass: 'hallolink-dialog'
        },
        buttonCssClass: null
      },
      populateToolbar: function(toolbar) {
        var buttonize, buttonset, dialog, dialogSubmitCb, isEmptyLink, urlInput, widget,
          _this = this;
        widget = this;
        dialog = jQuery("<div id=\"" +  "\"><form action=\"#\" method=\"post\" class=\"linkForm\"><input class=\"url\" type=\"text\" name=\"url\"value=\"" + "\" /><input type=\"submit\" id=\"addlinkButton\" value=\"" + "\"/></form></div>");
        buttonset = jQuery("<span class=\"" + widget.widgetName + "\"></span>");
        buttonize = function(type) {
          var button, buttonHolder, id;
          id = "" + _this.options.uuid + "-" + type;
          buttonHolder = jQuery('<span></span>');
          buttonHolder.hallobutton({
            label: 'Image',
            icon: 'icon-picture',
            editable: _this.options.editable,
            command: null,
            queryState: false,
            uuid: _this.options.uuid,
            cssClass: _this.options.buttonCssClass
          });
          buttonset.append(buttonHolder);
          button = buttonHolder;
          button.on("click", function(event) {
            var button_selector, selectionParent;
            widget.options.editable.keepActivated(true);
            return jQuery(function(){$('#gallery').modal();});
          });
        };
        if (this.options.link) {
          buttonize("A");
        }
        if (this.options.link) {
          toolbar.append(buttonset);
          buttonset.hallobuttonset();
          return dialog.dialog(this.options.dialogOpts);
        }
      }
    });})(jQuery);