<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" value=""></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(); }, _preselectOptions : function(params) { var textarea = this.$.select_datalet_options_container.querySelectorAll("paper-textarea"); textarea[0].value = params["description"]; var inputs = this.$.select_datalet_options_container.querySelectorAll("paper-input"); inputs[0].value = params["title"]; for (var i = 1; i < inputs.length; i++) if(params[this.options[i - 1].name]) inputs[i].value = params[this.options[i - 1].name]; this._updateParams(); // var menus = this.$.select_datalet_options_container.querySelectorAll("paper-menu"); // var ddls = this.$.select_datalet_options_container.querySelectorAll("paper-dropdown-menu"); // for (var i = 0; i < ddls.length; i++) { // var menu = $(ddls[i]).find("paper-menu")[0]; // if(params[ddls[i].label]) // menu.select(1);//select item con nome params[ddls[i].label] // } }, setOptions : function(options) { this.options = []; this.params = []; this.async(function() { this.options = options; }, 0); // this.params["title"] = ""; // this.params["description"] = ""; }, checkOptions : 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>