javascriptaviary

Multiple Aviary Feather


I've a issue on the integration of the Aviary Feather. In my javascript I need to use Feathers like this:

// Aviary init
var featherProductEditor = new Aviary.Feather({
  apiKey: 'myapykey',
  apiVersion: 3,
  theme: 'dark',
  tools: 'all',
  appendTo: '',
  onSave: function(imageID, newURL) {
    // Do things for featherProductEditor
    console.log('featherProductEditor');
    // Close the editor
    featherProductEditor.close();
  }
});

// Aviary init
var featherContentBlockEditor = new Aviary.Feather({
  apiKey: 'myapykey',
  apiVersion: 3,
  theme: 'light',
  tools: 'all',
  appendTo: '',
  onSave: function(imageID, newURL) {
    // Do things for featherContentBlockEditor
    console.log('featherContentBlockEditor');
    // Close the editor
    featherContentBlockEditor.close();
  }
});

Then I call the two Feather

featherProductEditor.launch({ ....

and

featherContentBlockEditor.launch({ ....

but the only "onSave*:" callback called is the second one of the "featherContentBlockEditor" var

Why? How can I solve this?


Solution

  • For your first question, why only the second onSave is called ?

    Internally, the Aviary Web SDK stores the feather config in AV.launchData, and AV is an alias of the Aviary global variable. This is the code snippet from the Aviary.Feather function:

    AV.Feather = function (config) {
        ...
        AV.launchData = AV.util.extend(AV.baseConfig, config);
        ...
    }
    

    So, that means featherContentBlockEditor's configuration will override the featherProductEditor's configuration.

    You can verify this by adding AV.launchData.onSave() after the creation of each feather.

    For your second question, How can I solve this ?

    No, you can't without hacking into the SDK. This is how Aviary Web SDK works, only define one instance of Aviary.Feather per page.