ICMS 2.0 – Widgets

In my previous post I discussed the future of ICMS javascript architecture, specifically the new router system that I implemented. I also mentioned that this was not the only way to leverage assets in the new core.

Widgets in core is another initiative rolled into the new architecture, and I wish I could take credit for it – but the meat of the script that powers the functionality comes from the greater backbone community with some modifications to suit the needs of the project.

Widgets are deployed from your markup as needed by leveraging a data-module property on your container.

var exports = {};
  exports.execute = function (element) {
    $("[data-module-cssonly]", element).each(function () {
      var item = $(this)
      , css = item.data("module-cssonly");

      tools.loadCSS(css);
    });

    $("[data-module]", element).each(function () {
      var item = $(this)
      , module = item.data("module")
      , parameters = item.data("module-parameters");

      require([module], function (mod) {
        if (mod.css) {
          tools.loadCSS(mod.css);
        }

        if (mod.initialize) {
          mod.initialize(item, parameters);
        }
      });
    });
  };
  return exports;
});

In the above segment of code you can see that we have two tasks occurring in this module. The first loads css if given a path to a css file.

This will load only this css file whenever it is needed by the widget. The second chunk of code is a little more powerful – it allows you to load a javascript module by providing its path or url.

Please notice that no extension was placed on the path to the javascript file, this is a specification of requirejs. This path will be loaded and if the module has a method called initialize – it will instantiated and have the object that called it passed as an object in the first argument and an optional third data parameter passed as the second argument.

This is a very powerful system that allows module authors for example to widgetize their blocks instead of passing scripts and css to the module header.

There is a practical example of widgets in action in the core theme skin v1 Here.

As you can see in the link the data-module attribute contains the url to the module I wanted to deploy.

I hope this functionality gives more flexibility to everyone working with the next version of ICMS.