Mosaico Plugins

Introduction.

Mosaico currently supports 2 types of plugins:

• widget plugins which allow to add custom property editor to Mosaico.
• viewModel plugins which allow to implement or expand Moscaio' overall behavior

In addition to this it supports "init"/"dispose" lifecycle. This allows plugins to specifiy custom specific actions to be performed when Mosaico starts up respectively when it is disposed.

A plugin is an object (or a function) that you can pass to Mosaico.init or to Mosaico.start by passing it in an array. For example:

  plugins = [function(vm) {window.viewModel = vm;}];  // this is a plugin
  var ok = Mosaico.init({
    imgProcessorBackend: basePath+'/img/',
    emailProcessorBackend: basePath+'/dl/',
    titleToken: "MOSAICO Responsive Email Designer",
    fileuploadConfig: {
      url: basePath+'/upload/',
      // messages??
    }
  }, 
  plugins         // here we pass the plugins to Mosaico.init
);

viewModel plugins

A viewModel plugin exists in 2 forms:

• function(viewModel) { ... plugin action here ...; return { init: function(), dispose: function() } : plugin as function
• { viewModel: function(viewModel) {... plugin action here ...}, init: function(), dispose: function() } : plugin as object

TODO: when is the plugin action executed?

Bothe are equivalent and can be mutually converted (see ??)

In all forms init/dispose are optional depending if the plugin has contributions to Mosaico init or dispose.

The simplest plugin is the plugin that expose mosaico viewModel to the window:

function(viewModel) { window.viewModel = viewModel }

You may want to start adding this one when you develop and this way you can have a look at the "viewModel" core object using your browser console.

Let's say you want to override the way Mosaico deals with translations, you can override the "viewModel.t" method.

function(viewModel) { viewModel.t = function() { return 'FOO' } }

This plugin will replace every UI string with "FOO".

app.js:initFromLocalStorage (https://github.com/voidlabs/mosaico/blob/master/src/js/app.js#L105) is a function that could have been written outside from mosaico that simply instantiate a plugin (the localstorage plugin) and calls Mosaico.start passing this plugin.

widget plugins

A widget plugin is something new that you can use to provide custom property editor to mosaico.

var mosaicoWidgetPlugin = {
    widget: function($, ko, kojqui) {
      return {
        widget: 'mypropertytype',
        parameters: { param: true },
        html: function(propAccessor, onfocusbinding, parameters) {
          return '<input size="7" type="text" data-bind="value: ' + propAccessor + ', ' + onfocusbinding + '" />';
        }
      };
    },
    viewModel: function(vm) {
      // of course you can also define helper functions in the viewModel (you can access them in the widget code as $root.function()
    }
  };