urban-input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../core-icon/core-icon.html">

<!--
Copyright (c) 2014 Matt Styles @personalurban
Element providing a ripple on focussing an input box.

##### Example

    <urban-input></urban-input>

@element urban-input
@blurb Element providing a ripple on focussing an input box.
@status alpha
@homepage http://mattstyles.github.io/urban-input
-->
<polymer-element
    name="urban-input"
    extends="core-input"
    attributes="icon iconRight label rippleColor center password">

    <template>

        <link rel="stylesheet" href="urban-input.css" />

        <div id="container">
            <template if="{{ icon }}">
                <core-icon id="icon" icon="{{ icon }}"></core-icon>
            </template>
            <template if="{{ label }}">
                <span id="label" class="fit">{{ label }}</span>
            </template>
            <shadow></shadow>
        </div>
        <paper-ripple id="ripple" fit></paper-ripple>

    </template>

<script>

Polymer( 'urban-input', {

    icon: null,
    iconRight: false,
    center: false,
    password: false,

    bounds: null,


    /**
     * Event delegation
     */
    eventDelegates: {
        down: 'downAction',
        up: 'upAction'
    },

    /**
     * Fired when ready
     */
    ready: function() {
        this.super();

        if ( this.rippleColor ) {
            this.$.ripple.style.color = ( /^\#/.test( this.rippleColor ) ? '' : '' ) + this.rippleColor;
        }

        if ( this.center ) {
            this.classList.add( 'center' );
        }

        if ( this.password ) {
            this.$.input.type = 'password';
        }

        if ( this.icon ) {
            this.classList.add( 'icon' );
        }

        if (this.iconRight ) {
            this.classList.add( 'right' );
        }
    },


    /**
     * onDomReady
     */
    domReady: function() {
        this.bounds = this.getBoundingClientRect();
    },


    /**
     * Fired when the input changes
     */
    inputValueChanged: function() {
        this.super();
        this.fire( 'inputChange', this.inputValue );

        if ( this.label ) {
            this.$.label.classList.toggle( 'hidden', this.inputValue );
        }
    },


    downAction: function( e ) {
        this.$.ripple.downAction({
            x: e.x,
            y: e.y
        });

        this.pressed = true;
    },


    upAction: function( e ) {
        this.$.ripple.upAction();
        this.$.input.focus();
        this.pressed = false;
    },


    focusAction: function() {
        this.focussed = true;

        if ( !this.pressed ) {
            // Make sure bounds are correct
            this.bounds = this.getBoundingClientRect();

            // Perform ripple
            this.$.ripple.downAction({
                x: this.clientWidth / 2 + this.bounds.left,
                y: this.clientHeight / 2 + this.bounds.top
            });

            // End ripple
            setTimeout( function() {
                this.$.ripple.upAction();
            }.bind( this ), 100 );
        }
    },


    blurAction: function() {
        if ( this.pressed ) {
            return;
        }
        this.focussed = false;
    }


});

</script>

</polymer-element>