controllets/animated-button-container-controllet/animated-button-container-controllet.html


<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="../../controllets/items-list-controllet/item-list-controllet.html">
<link rel="import" href="../../controllets/search-panel-controllet/search-panel-controllet.html">

<dom-module id="animated-button-container-controllet">

    <style>

        :host {
        @apply(--layout-horizontal);
        @apply(--layout-center-center);
        }
        #pages{
            position: absolute;
            top: -38px;
            left: 113px;
        }

        .window {
            width: 30vw;
            height: 50vh;
            background: #e8e8e8;
            position: absolute;
            top: 64px;
            left: 0px;
            z-index: 1000;
        }

        .hidden{
            display: none;
        }

        #close{
            position: absolute;
            top: 8px;
            left: 28.5vw;
            --iron-icon-height: 20px;
            --iron-icon-width: 20px;
            width: 24px;
            height: 24px;
            --paper-fab-background:#9e9e9e;
            z-index: 1001;
        }

        #open{
            --paper-fab-background:transparent;
            background: transparent;
        }

        #selected_item{
            margin-left: 25px;
            margin-top: -5px;
            padding: 0;
            ms-transform: scale(0.60);
            -moz-transform: scale(0.60);
            -o-transform: scale(0.60);
            -webkit-transform: scale(0.60);
            transform: scale(0.60);
            -ms-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            max-height: 64px;
            max-width: 64px;
        }

        #container_content{
            z-index: 1000;
            position: relative;
            overflow: auto;
        }
        #toolbar{
            background: #2196F3;
            height: 45px;
        }

        search-panel-controllet{
            position: relative;
            top: -5px;
            left: 80px;
        }

        .button-container{
            color: #fff;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

            position: relative;
        }

        .button-container:hover{
            color: #fff;
            box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
            -webkit-transition: 0.2s ease-out;
            -moz-transition: 0.2s ease-out;
            -o-transition: 0.2s ease-out;
            -ms-transition: 0.2s ease-out;
            transition: 0.2s ease-out;
            cursor: pointer;
        }

        .button-container::before{
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
        }


        .button-container:hover::before{
            background-color: rgba(0, 0, 0, .15);
            -webkit-transition: 0.2s ease-out;
            -moz-transition: 0.2s ease-out;
            -o-transition: 0.2s ease-out;
            -ms-transition: 0.2s ease-out;
            transition: 0.2s ease-out;
        }


    </style>

    <template>
        <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
            <neon-animatable><div id="hidden"></div></neon-animatable>
            <neon-animatable>
                <paper-material elevation="3" id="window" class="window">
                   <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
                    <paper-toolbar id="toolbar">
                        <search-panel-controllet id="search_from_animated_button_container"></search-panel-controllet>
                    </paper-toolbar>
                   <div id="container_content"><content></content></div>
                </paper-material>
            </neon-animatable>
        </neon-animated-pages>

        <div class="horizontal layout" style="height: 64px;">
            <!--<paper-fab mini icon="{{icon}}" id="open" on-click="_onOpenClick"></paper-fab>-->
           <span class="button-container" id="open" on-click="_onOpenClick">
              <iron-icon id="button" icon="{{icon}}"></iron-icon>
           </span>
           <div id="selected_item"></div>
        </div>

    </template>

    <script type="text/javascript" src="../shared_js/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>

    <script>

        Polymer({

            is: 'animated-button-container-controllet',

            listeners:{
                'animated-button-container-controllet_element-selected' : '_elementSelected',
                'search-panel-controllet_content-changed' : '_handleSearch'
            },

            properties: {
                selected : {
                    type  : Number,
                    value : 0
                },
                height:{
                    type: String,
                    value: "30vh"
                },
                width:{
                    type: String,
                    value: "30vh"
                },
                entryAnimation : {
                    type  : String,
                    value : ""
                },
                icon:{
                    type: String,
                    value: "assessment"
                },
                iconHeight:{
                    type: String,
                    value: "64"
                },
                iconWidth:{
                    type: String,
                    value: "64"
                },
                backgroundButtonColor:{
                    type: String,
                    value: undefined

                },
                exitAnimation  : {
                    type  : String,
                    value : ""
                },
                searchFunction: {
                    type: String,
                    notify: true
                }
            },

            ready: function(){
                this.$.window.style.height = this.height + "vh";
                this.$.window.style.width  = (this.width - 0.5) + "vw";
                this.$.close.style.left    = (this.width - 3.5) + "vw";

                this.$.container_content.style.height = (this.height - (22 * 0.65)) + "vh";
                $(this.$.container_content).perfectScrollbar();

                this.$.open.style.height           = this.iconHeight + "px";
                this.$.open.style.width            = this.iconWidth  + "px";
                this.$.open.style.backgroundColor  = this.backgroundButtonColor;
                this.$.button.style.width          = this.iconWidth  + "px";
                this.$.button.style.height         = this.iconHeight + "px";
            },

            _onOpenClick: function() {
                this.entryAnimation = 'fade-in-animation';
                this.exitAnimation  = 'fade-out-animation';
                this.selected = 1;
            },

            _onCloseClick: function(){
                /*this.entryAnimation = 'fade-out-animation';
                this.exitAnimation  = 'fade-in-animation';*/
                this.selected = 0;
            },

            _elementSelected: function(e){
                this.$.selected_item.innerHTML = "";
                this.$.selected_item.appendChild(e.detail.selectedElement);
            },
            _handleSearch: function(e){
                if(this.$.container_content.children[0]._handleSearch != undefined) {
                    this.$.container_content.children[0]._handleSearch(e);
                }else{
                    if(this.searchFunction != undefined){
                        this.searchFunction = new Function('e','return '+ this.searchFunction);
                        this.searchFunction(e);
                    }
                }
            }

        });

    </script>
</dom-module>