AngularJS directive for Aviary SDK.
Copyright © 2015, Massimiliano Sartoretto
Find me on:
You can choose your preferred method of installation:
- Through bower:
bower install angular-aviary --save - Through npm:
npm install angular-aviary --save - Download from github: angular-aviary.min.js
Include both Aviary and angular-aviary.min.js in your application.
<script src="http://feather.aviary.com/imaging/v2/editor.js"></script>
<script src="bower_components/angular-aviary/angular-aviary.min.js"></script>Add the module ngAviary as a dependency to your app module:
var myApp = angular.module('myapp', ['ngAviary']);To configure the module call the ngAviaryProvider.configure() method (e.g. inside your app's config() callback):
myApp.config(function(ngAviaryProvider) {
ngAviaryProvider.configure({
apiKey: 'my-awesome-api-key',
theme: 'light',
tools: 'all'
})
});For the full list of config options please refer to the official docs
Use the ngAviary directive to create a toggle that trigger Fetcher editor.
<a href="#"
target='<selector>'
on-save-button-clicked='onSaveButtonClicked(id)'
on-save='onSave(id, newURL)'
ng-aviary> Edit photo </a>You can use the HTML element you prefer as long as it supports onClick event. (For a list of supported elements refer to the onCLick docs)
Options that allow you to handle the Aviary flow:
| Attribute | Description | Required |
|---|---|---|
| targetSelector | A string containing one or more CSS selector to query target image | ✔️ |
| onLoad | Pass a function to run once the widget has all resources ready for a launch. | ✖️ |
| onReady | Pass a function to be called once the editor has finished launching and is ready for user input. | ✖️ |
| onSaveButtonClicked | Pass a function to be called before an image save happens, but after a user has clicked the save button, intending to save. | ✖️ |
| onSave | Pass a function to be called when the image save is complete. | ✖️ |
| onClose | Pass a function to be called when the editor is closed. isDirty parameter tells whether the editor was closed with unsaved changes. |
✖️ |
| onError | The API can notify you of errors and you have the option to notify the user. They are otherwise silent. | ✖️ |