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">
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.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;
            }
            paper-tooltip {
                --paper-tooltip-background: black;
            }
            paper-tooltip p {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 24px;
                margin: 0;
                padding: 0;
            }
            .header{
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                width: 100%;
                line-height: normal;
                /*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 id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="arrow-back"></paper-icon-button>
            <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="arrow-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>
        <paper-tooltip for="slider_chevron_left" position="right" offset="0"><p><span id="back"></span></p></paper-tooltip>
        <paper-tooltip for="slider_chevron_right" position="left" offset="-16"><p><span id="forward"></span></p></paper-tooltip>
        <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 : ""
                },
                prevEntryAnimation : {type  : String, value : 'slide-from-left-animation'},
                prevExitAnimation : {type  : String, value : 'slide-right-animation'},
                nextEntryAnimation : {type  : String, value : 'slide-from-right-animation'},
                nextExitAnimation : {type  : String, value : 'slide-left-animation'},
                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});
//                this.$.slider_chevron_left.setAttribute("title", ln["back_" + ln["localization"]]);
//                this.$.slider_chevron_right.setAttribute("title", ln["forward_" + ln["localization"]]);
                this.$.back.innerHTML = ln["back_" + ln["localization"]];
                this.$.forward.innerHTML = ln["forward_" + ln["localization"]];
            },
            setTitle : function(title, subtitle) {
                this.title = title;
                this.subtitle = subtitle;
            },
            setAvatar : function(innerText) {
                this.avatar = innerText;
            },
            chevronLeft : function(flag) {
                if(flag == "invisible") {
                    this.$.slider_chevron_left.style.visibility = "hidden";
                    return;
                }
                else
                    this.$.slider_chevron_left.style.visibility = "visible";
                if(flag)
                    this.$.slider_chevron_left.removeAttribute("disabled");
                else
                    this.$.slider_chevron_left.setAttribute("disabled", "true");
            },
            chevronRight : function(flag) {
                if(flag == "invisible") {
                    this.$.slider_chevron_right.style.visibility = "hidden";
                    return;
                }
                else
                    this.$.slider_chevron_right.style.visibility = "visible";
                if(flag)
                    this.$.slider_chevron_right.removeAttribute("disabled");
                else
                    this.$.slider_chevron_right.setAttribute("disabled", "true");
            },
            getPrevSelected : function() {
                return this.prevSelected;
            },
            setPrevAnimation  : function(entryAnimation, exitAnimation) {
                this.prevEntryAnimation = entryAnimation;
                this.prevExitAnimation  = exitAnimation;
            },
            setNextAnimation  : function(entryAnimation, exitAnimation) {
                this.nextEntryAnimation = entryAnimation;
                this.nextExitAnimation  = exitAnimation;
            },
            _onPrevClick : function() {
                this.$.slider_chevron_left.setAttribute("disabled", "true");
                this.$.slider_chevron_right.setAttribute("disabled", "true");
                this.entryAnimation = this.prevEntryAnimation;
                this.exitAnimation  = this.prevExitAnimation;
                this.prevSelected = this.selected;
                this.selected = this.selected === 0 ? (this.pages-1) : (this.selected - 1);
            },
            _onNextClick : function() {
                this.$.slider_chevron_left.setAttribute("disabled", "true");
                this.$.slider_chevron_right.setAttribute("disabled", "true");
                this.entryAnimation = this.nextEntryAnimation;
                this.exitAnimation  = this.nextExitAnimation;
                this.prevSelected = this.selected;
                this.selected = this.selected === (this.pages-1) ? 0 : (this.selected + 1);
            },
            _onNeonAnimationFinish: function() {
                this.$.slider_chevron_left.removeAttribute("disabled");
                this.$.slider_chevron_right.removeAttribute("disabled");
                this.avatar = this.selected+1;
                this.fire('page-slider-controllet_selected', {selected : this.selected});
            }
        });
    </script>
</dom-module>