angular-aviary

Angular Aviary SDK

An AngularJS directive for the Creative SDK Image Editor UI component.

Live Demo

Copyright 2016, Massimiliano Sartoretto

Find me on:

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

Setup

1. Include the scripts:

   1. the Creative SDK Image Editor script (http and https versions available here)
   2. angular-aviary.min.js

   Example:

   <script src="http://feather.aviary.com/imaging/v3/editor.js"></script>
   <script src="bower_components/angular-aviary/angular-aviary.min.js"></script>

2. Add the module ngAviary as a dependency to your app module:

   var myApp = angular.module('myapp', ['ngAviary']);

Configuration

To configure the Image Editor, 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.

ngAviary directive

Use the ngAviary directive to create a toggle that triggers the Image Editor.

Example:

<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 the onClick event. (For a list of supported elements, refer to the onClick docs)

Options that allow you to handle the Creative SDK Image Editor 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
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.