0.6.0 • Published 8 years ago

angular-aviary v0.6.0

Weekly downloads
3
License
MIT
Repository
github
Last release
8 years ago

Angular Aviary SDK

AngularJS directive for Aviary SDK.

Copyright © 2016, Massimiliano Sartoretto

Find me on: alt text alt text alt text

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.

<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']);

Configuration

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

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:

AttributeDescriptionRequired
targetSelectorA string containing one or more CSS selector to query target image:heavy_check_mark:
targetSrcA string containing the url of the target image:heavy_multiplication_x:
onLoadPass a function to run once the widget has all resources ready for a launch.:heavy_multiplication_x:
onReadyPass a function to be called once the editor has finished launching and is ready for user input.:heavy_multiplication_x:
onSaveButtonClickedPass a function to be called before an image save happens, but after a user has clicked the save button, intending to save.:heavy_multiplication_x:
onSavePass a function to be called when the image save is complete.:heavy_multiplication_x:
onClosePass a function to be called when the editor is closed. isDirty parameter tells whether the editor was closed with unsaved changes.:heavy_multiplication_x:
onErrorThe API can notify you of errors and you have the option to notify the user. They are otherwise silent.:heavy_multiplication_x:
0.6.0

8 years ago

0.5.1

9 years ago

0.5.0

9 years ago

0.4.0

9 years ago

0.3.2

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.0

9 years ago

0.1.0

9 years ago