controllets/page-slider-controllet/page-slider-controllet.html

<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: 64px;
                width: 64px;
                padding: 0px;
                margin: 0px;
                --paper-icon-button-ink-color: #00BCD4;
            }
            paper-icon-button:hover{
                color: #00AABF;
            }
            paper-icon-button[disabled]{
                color: #B6B6B6;
            }
            .header{
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                width: 100%;
                /*padding-bottom: 8px;*/
                /*border-bottom: 2px solid #B6B6B6;*/
            }
            .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;/*#00BCD4*/
            }
        </style>
        <div class="header">
            <paper-icon-button class="chevron-left" on-click="_onPrevClick" icon="arrow-back" title="back"></paper-icon-button>
            <paper-icon-button class="chevron-right" on-click="_onNextClick" icon="arrow-forward" title="forward"></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
                },
                prevSelected : {
                    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});
                var buttons = document.getElementsByTagName("paper-icon-button");
                buttons[0].setAttribute("title", ln["back_" + ln["localization"]]);
                buttons[1].setAttribute("title", ln["forward_" + ln["localization"]]);
            },
            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 == "invisible") {
                    buttons[0].style.visibility = "hidden";
//                    buttons[0].style.width = "0px";
                    return;
                }
                else
                    buttons[0].style.visibility = "visible";
//                    buttons[0].style.width = "64px";
                if(flag)
                    buttons[0].removeAttribute("disabled");
                else
                    buttons[0].setAttribute("disabled", "true");
            },
            chevronRight : function(flag) {
                var buttons = document.getElementsByTagName("paper-icon-button");
                if(flag == "invisible") {
                    buttons[1].style.visibility = "hidden";
                    return;
                }
                else
                    buttons[1].style.visibility = "visible";
                if(flag)
                    buttons[1].removeAttribute("disabled");
                else
                    buttons[1].setAttribute("disabled", "true");
            },
            getPrevSelected : function() {
                return this.prevSelected;
            },
            _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.prevSelected = this.selected;
                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.prevSelected = this.selected;
                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>