This package has been deprecated

    Author message:

    Package no longer supported. Use github.com/abcum/ascua instead.

    @abcum/ember-popups

    0.2.1 • Public • Published

    ember-popups

    A utility for adding tooltips and popup items to an in Ember.js app.

    Usage

    Installation

    ember install @abcum/ember-popups

    Introduction

    The ember-popups addon adds functionality for adding tooltip popups and item popups to an Ember.js app. A popup item can be created by embedding within the target item, and becomes visible on either click or hover events.

    Examples

    Add the popup-outlet component to your application template.

    {{!-- app/templates/application.hbs --}}
    {{popup-outlet}}

    Display a tooltip on an element.

    <div id="info">
    	Click for more information
    	{{#popup-info side='n'}}
    		Here is some more information.
    	{{/popup-item}}
    </div>

    Or show a popup when clicking on an element.

    <div>
    	Click for more information
    	{{#popup-item show='click' hide='click'}}
    		Here is some more information.
    	{{/popup-item}}
    </div>

    Or show a popup when hovering over an element.

    <div>
    	Hover for more information
    	{{#popup-item show='hover' hide='hover'}}
    		Here is some more information.
    	{{/popup-item}}
    </div>

    Or enable pressing the escape key to hide a popup.

    <div>
    	Hover for more information
    	{{#popup-item show='hover' hide='hover escape'}}
    		Here is some more information.
    	{{/popup-item}}
    </div>

    Or to specify a custom class for the popup item.

    <div>
    	Hover for more information
    	{{#popup-item show='hover' hide='hover' itemClass='tooltip'}}
    		Here is some more information.
    	{{/popup-item}}
    </div>

    Or use a separate template for the popup item content.

    <div>
    	Click for more information
    	{{popup-item show='click' hide='click' itemName='popups/info'}}
    </div>

    To show a popup item on anchored to a particular side. Valid sides are n, ne, e, se, s, sw, w, nw.

    <div>
    	Click for more information
    	{{popup-item show='click' hide='click' itemName='popups/info' side='e'}}
    </div>

    Or to attach the popup item to another element on the page specify a target element.

    <div id="info">Click for more information</div>
    
    {{popup-item show='click' hide='click' itemName='popups/info' side='e' target="#info"}}

    To style the popup area and the popup item itself, follow the css styling code below.

    popup-item {
    	opacity:0;
    	@include box-shadow(0 0 15px rgba(0,0,0,0.6));
    }
    
    popup-item[visible] {
    	opacity:1;
    	@include box-shadow(0 0 15px rgba(0,0,0,0.6));
    	@include animation(ghost 0.3s ease-in-out 0.2s normal both);
    }

    Development

    • make install (install bower and ember-cli dependencies)
    • make upgrade (upgrade ember-cli to the specified version)
    • make tests (run all tests defined in the package)

    Keywords

    Install

    npm i @abcum/ember-popups

    DownloadsWeekly Downloads

    34

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    18.6 kB

    Total Files

    21

    Last publish

    Collaborators

    • tobiemh