page-slider-controllet.html 6.15 KB
<link rel="import" href="../../bower_components/polymer/polymer.html" />

<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">

<dom-module id="page-slider-controllet">

    <template>

        <style is="custom-style">
            paper-icon-button{
                color: #00BCD4;
                height: 48px;
                width: 48px;
                --paper-icon-button-ink-color: #00BCD4;
            }

            paper-icon-button:hover{
            }

            .header{
                width: 100%;
                padding-bottom: 8px;
            }

            .chevron-left{
                float: left;
                margin-top: 8px;
            }

            .chevron-right{
                float: right;
                margin-top: 8px;
            }

            .box{
                overflow: auto;
            }

            .avatar {
                display: inline-block;
                height: 64px;
                width: 64px;
                border-radius: 50%;
                background: #2196F3;
                color: #FFFFFF;
                line-height: 64px;
                font-size: 32px;
                vertical-align: middle;
                text-align: center;
            }

            .text {
                display: inline-block;
                height: 64px;
                vertical-align: middle;
                padding-left: 20px;
            }

            .title {
                font-size: 32px;
                color: #2196F3;
            }

            .subtitle {
                font-size: 16px;
                color: #727272;
            }
        </style>

        <div class="header">
            <paper-icon-button class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
            <paper-icon-button class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>

            <div class="box">
                <div class="avatar">[[avatar]]</div>
                <div class="text">
                    <div class="title">[[title]]</div>
                    <div class="subtitle">[[subtitle]]</div>
                </div>
            </div>
        </div>

        <neon-animated-pages on-neon-animation-finish="_onNeonAnimationFinish" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
            <content></content>
        </neon-animated-pages>

    </template>

    <script>

        Polymer({

            is : 'page-slider-controllet',

            properties : {

                entryAnimation : {
                    type  : String,
                    value : ""
                },

                exitAnimation  : {
                    type  : String,
                    value : ""
                },

                selected : {
                    type  : Number,
                    value : 0
                },

                pages : {
                    type  : Number,
                    value : document.querySelectorAll('neon-animatable').length
                },

                title : {
                    type  : String,
                    value : ""
                },

                subtitle : {
                    type  : String,
                    value : ""
                },

                avatar : {
                    type  : String,
                    value : "1"
                },

            },

            attached : function() {
                this.fire('page-slider-controllet_selected', {selected : this.selected});
            },

            setTitle : function(title, subtitle) {
                this.title = title;
                this.subtitle = subtitle;
            },

            setAvatar : function(innerText) {
                this.avatar = innerText;
            },

            chevronLeft : function(flag) {
                var buttons = document.getElementsByTagName("paper-icon-button");
                if(flag)
                    buttons[0].removeAttribute("disabled");
                else
                    buttons[0].setAttribute("disabled", "true");
            },

            chevronRight : function(flag) {
                var buttons = document.getElementsByTagName("paper-icon-button");
                if(flag)
                    buttons[1].removeAttribute("disabled");
                else
                    buttons[1].setAttribute("disabled", "true");
            },

            _onPrevClick : function() {
                var buttons = document.getElementsByTagName("paper-icon-button");
                buttons[0].setAttribute("disabled", "true");
                buttons[1].setAttribute("disabled", "true");

                this.entryAnimation = 'slide-from-left-animation';
                this.exitAnimation  = 'slide-right-animation';

                this.selected = this.selected === 0 ? (this.pages-1) : (this.selected - 1);
            },

            _onNextClick : function() {
                var buttons = document.getElementsByTagName("paper-icon-button");
                buttons[0].setAttribute("disabled", "true");
                buttons[1].setAttribute("disabled", "true");

                this.entryAnimation = 'slide-from-right-animation';
                this.exitAnimation  = 'slide-left-animation';

                this.selected = this.selected === (this.pages-1) ? 0 : (this.selected + 1);
            },

            _onNeonAnimationFinish: function() {
                var buttons = document.getElementsByTagName("paper-icon-button");
                buttons[0].removeAttribute("disabled");
                buttons[1].removeAttribute("disabled");

                this.avatar = this.selected+1;

                this.fire('page-slider-controllet_selected', {selected : this.selected});
            }

        });

    </script>

</dom-module>