angularMemo

http://www.angularmemo.com

###Requirements

1. jQuery
2. $sce service for icon HTML ("on" by default with Angular 1.2.x)

##How to Use:

1. Include the angular-memo.js file in your page.
2. Add "memo" to your main app module.
3. Choose and add the directive attribute to your button (see the Directives section), like:

memo-top-right={OPTIONS}

From this point, you can add the options object via inline JSON, like:

<buttonmemo-top-left='{"ease" : "easeOutQuart","content" : "I say HEYY YEAH","title" : "Whats Going on?","width" : "600px", "attachment" : "#wrap"}')></button>

or in your controller, add a model to the scope:

$scope.coolThang={"ease" : "easeOutQuart","content" : "Check me ouut","title" : "Heck Yeaaah","width" : "600px","eventType" : "click","theme" : "dark","fadeOut" : 1000};<divmemo-top-right='coolThang'>Click me!</div>

###Directives

angularMemo has been split into readable directives for explicit functionality.

memo-right

memo-left

memo-top-right

memo-top-left

memo-bottom-right

memo-bottom-left

memo-web-notify

##Options:

easestring Ease type. easeOutSine and easeOutQuart currently supported

contentstring Content of notification, can be html

attachstring jQuery selector for where to append the notification

titlestring Title of notification, can be html

eventTypestring Defaults to click

widthstring The width of the notification, 100% for full screen

fadeOutint In milliseconds, If false, notification requires user close.

toggleboolean When you click the button again, does it go away, or redisplay?

themestring Either dark or light at the moment

iconstring A url to an image. ONLY FOR THE WEB NOTIFICATION DIRECTIVE

##Classes for Styling:

memo-outer
memo-shell
memo-title
memo-x
memo-content

####Notes:

The web notification aspect isn't totally standardized. It works fine in FF and Chrome, though.

Two memos can't occupy the same space.. and will overlap.. I would suggest using fadeOut if you are planning on doing that sort of thing.

If you want a full screen memo, make width 100%.

Beware of using certain event types. hover won't work for instance, and mousedown is buggy.

icon is only used for the memo-web-notify directive

html is allowed in both the title and the content

License

This project is licensed under the MIT license.