0.6.0 • Published 9 years ago

angular-aviary v0.6.0

Weekly downloads
3
License
MIT
Repository
github
Last release
9 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

9 years ago

0.5.1

10 years ago

0.5.0

10 years ago

0.4.0

10 years ago

0.3.2

10 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.0

10 years ago