Angular Aviary SDK
AngularJS directive for Aviary SDK.
Copyright © 2016, Massimiliano Sartoretto
Installation
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
Usage
Include both Aviary and angular-aviary.min.js
in your application.
Add the module ngAviary
as a dependency to your app module:
var myApp = angular;
Configuration
To configure the module call the ngAviaryProvider.configure()
method (e.g. inside your app's config() callback):
myApp;
For the full list of config options please refer to the official docs
ngAviary directive
Use the ngAviary directive to create a toggle that trigger Fetcher editor.
<a href="#" target-selector='<selector>' target-src='./image.png' 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 | ✔️ |
targetSrc | A string containing the url of the 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. | ✖️ |