select-datalet-options.html 8.84 KB
<link rel="import" href="../../bower_components/polymer/polymer.html" />

<link rel="import" href="../../bower_components/paper-material/paper-material.html" />

<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.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-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">

<dom-module id="select-datalet-options">

    <template>

        <style is="custom-style">
            :host {
            --paper-dropdown-menu-icon: {
                 color: #2196F3;
             };
            }

            #select_datalet_options_container {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;

                /*height: 100vh;*/
                height: 100%;
                width: 258px;
            }

            .inputs{
                position: relative;
            }

            .input_header {
                height: 32px;
                padding-top: 16px;
                text-align: center;
                font-weight: 700;
                background-color: #B6B6B6;
            }

            .info_button {
                position: absolute;
                top: 18px;
                right: 0px;
            }

            #dialog_info_input {
                display: flex;
                flex-direction: column;
                color: #000000;
                border: 2px solid #2196F3;
                background-color: #E0E0E0;
                min-width: 244px;
                padding: 8px;
            }

            #dialog_name{
                font-size: 24px;
                line-height: 24px;
                font-weight: 700;
                padding: 0px;
                margin: 0px;
            }

            #dialog_description{

                font-size: 16px;
                line-height: 16px;
                font-weight: normal;
                padding: 0px;
                margin: 8px 0px 0px 0px;
            }

            paper-dropdown-menu {
                height: 48px;
                width: 210px;;
                padding-left: 8px;
                padding-bottom: 8px;
                --paper-input-container-focus-color: #2196F3;
            }

            paper-item.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }

            paper-icon-button {
                color: #2196F3;
                --paper-icon-button-ink-color: #2196F3;
                margin: 0px;
            }

            paper-input {
                display: inline-block;
                height: 48px;
                /*padding: 0px 8px;*/
                width: 210px;
                padding-left: 8px;
                padding-bottom: 8px;
                --paper-input-container-focus-color: #2196F3;
            }

            paper-input.base_input {
                width: 242px;
            }

            paper-textarea {
                width: 242px;
                padding-left: 8px;
                padding-bottom: 4px;
                --paper-input-container-focus-color: #2196F3;
            }
        </style>

        <paper-material id="select_datalet_options_container" elevation="5">

            <div class="input_header"><span id="baseInfo"></span></div>

            <div class="inputs">
                <paper-input id="base_title" maxlength="32" class="base_input" on-change="_updateParams"></paper-input>
            </div>

            <div class="inputs">
                <paper-textarea id="base_description" maxlength="100" class="base_input" on-change="_updateParams" value=""></paper-textarea>
            </div>

            <div class="input_header"><span id="layouts"></span></div>

            <template is="dom-repeat" items={{options}} index-as="index">
                <div class="inputs">
                    <template is="dom-if" if="{{_checkType(item.type, 'text')}}">
                        <paper-input label={{_getLabelName(item.name)}} on-change="_updateParams"></paper-input>
                    </template>

                    <template is="dom-if" if="{{_checkType(item.type, 'list')}}">
                        <paper-dropdown-menu label={{_getLabelName(item.name)}}>
                            <paper-menu class="dropdown-content" selected = 0>
                                <!--<paper-item on-tap="_updateParams"></paper-item>-->
                                <template is="dom-repeat" items={{item.list.item}}>
                                    <paper-item id={{index}} on-tap="_updateParams">{{item}}</paper-item>
                                </template>
                            </paper-menu>
                        </paper-dropdown-menu>
                    </template>

                    <div class="info_button">
                        <paper-icon-button id={{item.name}} on-click="_showInfo" icon="info-outline" title="{{_getLabelName(item.name)}} info"></paper-icon-button>
                    </div>
                </div>
            </template>

        </paper-material>

        <paper-dialog id="dialog_info_input">
            <span id="dialog_name"></span>
            <span id="dialog_description"></span>
        </paper-dialog>

    </template>

    <script>

        Polymer({

            is : 'select-datalet-options',

            properties : {

                options : {
                    type : Array,
                    value : []
                },

                params : {
                    type : Object,
                    value : {}
                }

            },

            ready : function() {
                $(this.$.select_datalet_options_container).perfectScrollbar();
            },

            attached : function() {
                this._translate();
            },

            setOptions : function(options) {
                this.options = [];
                this.async(function() {
                    this.options = options;
                }, 0);

                this.params["title"] = "";
                this.params["description"] = "";
            },

            ceckOptions : function(options) {
                if(options.length != this.options.length)
                    this.setOptions(options);
            },

            getParams : function() {
                return this.params;
            },

            _reset : function() {
                this.options = [];
                this.params = [];
            },

            _updateParams : function() {
                this.async(function() {
                    var textarea = this.$.select_datalet_options_container.querySelectorAll("paper-textarea");
                    this.params["description"] = textarea[0].value;

                    var inputs = this.$.select_datalet_options_container.querySelectorAll("paper-input");
                    this.params["title"] = inputs[0].value;

                    for (var i = 1; i < inputs.length; i++)
                        this.params[this.options[i-1].name] = inputs[i].value;

                    this.fire('select_visualization_options_changed');
                }, 0);
            },

            _translate : function(){
                this.$.baseInfo.innerHTML = ln["baseInfo_" + ln["localization"]];
                this.$.layouts.innerHTML = ln["layouts_" + ln["localization"]];

                this.$.base_title.label = ln["title_" + ln["localization"]];
                this.$.base_description.label = ln["description_" + ln["localization"]];
            },

            _checkType: function(type, check){
                return (type == check);
            },

            _getLabelName: function(key) {
                return ln[key + "_" +ln["localization"]];
            },

            _showInfo : function(e){
                var t = e.target;
                if(t.tagName.indexOf("IRON-ICON") != -1)
                    t = $(e.target).parents("paper-icon-button")[0];

                var name = t.getAttribute("id");

                this.$.dialog_name.innerHTML = ln[name + "_" +  ln["localization"]];
                this.$.dialog_description.innerHTML = ln[name + "_description_" +  ln["localization"]];
                this.$.dialog_info_input.open();

                var pos = t.getBoundingClientRect();
                $("#dialog_info_input").css("top", pos.top - 4);
                $("#dialog_info_input").css("left", pos.left - 4);
            },

        });

    </script>

</dom-module>