controllets/select-dataset-controllet/select-dataset-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tab.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/iron-flex-layout/iron-flex-layout.html">
<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.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-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
<dom-module id="select-dataset-controllet">
    <template>
        <style>
            :host {
            --paper-dropdown-menu-icon: {
                 color: #000000;
             };
            --paper-dropdown-menu-ripple: {
                 color: #FFFFFF;
             };
            /*--paper-tab-ink: {*/
                 /*color: #FFFFFF;*/
             /*};*/
            }
            iron-list {
            --iron-list-items-container: {
                margin:16px 16px 8px 16px;
             };
            }
            paper-textarea {
                width: 100%;
                --paper-input-container-focus-color: #2196F3;
            }
            paper-input {
                --paper-input-container-focus-color: #2196F3;
            }
            paper-dropdown-menu {
                width: 100%;
                --paper-input-container-focus-color: #2196F3;
            }
            paper-item.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }
            paper-checkbox {
                height: 24px;
                /*margin-top: 8px*/
                --paper-checkbox-checked-color: #2196F3;
                --paper-checkbox-checked-ink-color: #FFFFFF;
                --paper-checkbox-unchecked-color: #000000;
                --paper-checkbox-unchecked-ink-color: #FFFFFF;
                --paper-checkbox-label-color: #000000;
            }
            paper-icon-button{
                height: 48px;
                width: 48px;
                padding: 0px;
                --paper-icon-button-ink-color: #FFFFFF;
            }
            paper-icon-button:hover{
                color: #2196F3;
            }
            paper-icon-button[disabled]{
                color: #B6B6B6;
            }
            paper-icon-button.clear {
                width: 24px;
                height: 24px;
                padding: 0px 4px;
                color: #F44336;
                --paper-icon-button-ink-color: #FFFFFF;
            }
            paper-tabs {
                font-weight: bold;
            }
            paper-tab {
                transition: all 1.0s;
            }
            paper-tab.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }
            paper-tab:not(.iron-selected):hover {
                color: #2196F3;
            }
            .item {
                /*@apply(--layout-horizontal);*/
                display: flex;
                padding: 11px;
                border: 1px solid #B6B6B6;
                border-radius: 4px;
                cursor: pointer;
                margin-bottom: 8px;
                background-color: #E0E0E0;
            }
            .pad {
                @apply(--layout-flex);
                /*@apply(--layout-vertical);*/
            }
            .primary {
                font-weight: bold;
            }
            .item.expanded .primary {
                color: #2196F3;
            }
            .longText {
                display: none;
            }
            .item.expanded .longText {
                display: block;
            }
            #select_dataset_container {
                margin-top: 8px;
            }
            #select_dataset_container * {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 24px;
            }
            #select_dataset_container #neon_container {
                height: calc(100% - 172px);
                width: calc(100% - 8px);
            }
            #select_dataset_container #list_container {
                /*height: calc(100% - 244px);*/
                /*width: calc(100% - 8px);*/
                height: calc(100% - 48px);
                width: 100%;
                border: 4px solid #B6B6B6;
                border-top: 0px;
                border-bottom: 0px;
                position: relative;
            }
            #select_dataset_container #treemap_container {
                /*height: calc(100% - 244px);*/
                /*width: calc(100% - 8px);*/
                height: calc(100% - 48px);
                width: 100%;
                border: 4px solid #B6B6B6;
                border-top: 0px;
                border-bottom: 0px;
                position: relative;
            }
            #select_dataset_container #header {
                position: relative;
                z-index: 1;
                -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
                box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
                background-color: #B6B6B6;
                display: flex;
                padding: 0px 4px;
            }
            #select_dataset_container #footer_list {
                position: relative;
                z-index: 1;
                -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
                box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
            }
            .noshadow {
                -webkit-box-shadow: none !important;
                -moz-box-shadow: none !important;
                box-shadow: none !important;
            }
            #select_dataset_container #footer_list,
            #select_dataset_container #footer_treemap {
                width: 100%;
                background-color: #B6B6B6;
                display: flex;
                padding: 0px 4px;
            }
            #select_dataset_container #url {
                height: 76px;/*100*/
                border: 4px solid #B6B6B6;
                border-top: 0px;
                padding: 0px 16px;
                margin-top: -4px;
            }
            #header .header_block {
                width: 20%;
                height: 40px;
                padding: 4px 16px 4px 16px;
            }
            /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
                /*visibility: hidden;*/
            /*}*/
            #header .header_block:nth-child(4) {
                text-align: center;
            }
            .footer_block {
                width: calc((100% - 0px) / 3);
                height: 24px;
                padding: 12px 8px 12px 8px;
                text-align: center;
            }
            .footer_block:nth-child(2) {
                height: 48px;
                padding: 0px 8px;
            }
            #suggested_div {
                visibility: hidden;
            }
        </style>
        <paper-material id="select_dataset_container" elevation="5">
            <paper-tabs selected="{{selected}}" no-bar>
                <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>
                <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->
                <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>
            </paper-tabs>
            <div id="header">
                <div class="header_block">
                    <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
                        <paper-menu class="dropdown-content" selected="0">
                            <paper-item id="0" on-tap="_filter"></paper-item>
                            <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
                                <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
                                <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
                            </template>
                        </paper-menu>
                    </paper-dropdown-menu>
                </div>
                <div class="header_block">
                </div>
                <div class="header_block">
                </div>
                <div class="header_block">
                </div>
                <div class="header_block">
                    <paper-input id="datasets_filter" value={{filter}} no-label-float label="">
                        <iron-icon class="search" icon="search" prefix></iron-icon>
                        <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
                    </paper-input>
                </div>
            </div>
            <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
                <neon-animatable>
                    <div id="list_container">
                        <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
                            <template>
                                <div>
                                    <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
                                    <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
                                        <span style="display:none;">{{item.url}}</span>
                                        <div class="pad">
                                            <div class="primary">{{item.resource_name}}</div>
                                            <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->
                                            <div class="longText">
                                                <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">
                                                    <b>{{mata.name}}:</b>
                                                    <span inner-h-t-m-l="{{mata.value}}"></span> <br>
                                                </template>
                                            </div>
                                        </div>
                                        <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
                                        <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
                                        <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
                                    </div>
                                </div>
                            </template>
                        </iron-list>
                    </div>
                    <div id="footer_list">
                        <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
                        <div class="footer_block">
                            <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
                            <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
                        </div>
                        <div id="suggested_div" class="footer_block">
                            <!--<template is="dom-if" if={{suggestedDatasets}}>-->
                                <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
                            <!--</template>-->
                        </div>
                    </div>
                </neon-animatable>
                <neon-animatable>
                    <div id="treemap_container"></div>
                    <div id="footer_treemap">
                        <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
                        <div class="footer_block"></div>
                        <div class="footer_block"></div>
                    </div>
                </neon-animatable>
            </neon-animated-pages>
            <div id="url">
                <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
            </div>
        </paper-material>
    </template>
    <script>
        HTMLImports.whenReady(function() {
            Polymer({
                is: 'select-dataset-controllet',
                properties: {
                    datasets: {
                        type: Object,
                        value: undefined
                    },
                    filteredDatasets : {
                        type : Array,
                        value : undefined
                    },
                    shownDatasets : {
                        type : Array,
                        value : undefined
                    },
                    suggestedDatasets : {
                        type : Array,
                        value : undefined
                    },
                    providers : {
                        type : Array,
                        value : undefined
                    },
                    dataUrl : {
                        type  : String,
                        value : undefined,
                        observer : '_fireDataUrl'
                    },
                    filter : {
                        type  : String,
                        value : "",
                        observer : '_filter'
                    },
                    selected : {
                        type  : Number,
                        value : 0
                    },
                    prev : {type  : Number, value : undefined},
                    next : {type  : Number, value : undefined},
                    shownPrev : {type  : Number, value : undefined},
                    shownNext : {type  : Number, value : undefined},
                    length : {type  : Number, value : undefined},
                    tLength : {type  : Number, computed : 'treemapLength(length)'},
                    step : {type  : Number, value : 20},
                    colors : {
                        type : Array,
                        value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
                    }
                },
                listeners: {
                    'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
                },
                ready : function() {
                    $(this.$.list_container).perfectScrollbar();
//                    this.$.selected_url.invalid = true;
                },
                attached: function() {
                    this._resize();
                    var that = this;
                    window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
                    this.providers = this.datasets["result"]["providers"];
                    this.datasets = this.datasets["result"]["datasets"];
                    if(this.suggestedDatasets) {
                        this.tempDatasets = this.datasets;
                        this.datasets = this.suggestedDatasets.concat(this.datasets);
                        this.$.suggested_div.style.visibility = "visible";
                    }
                    this.filteredDatasets = this.datasets;
                    this.prev = 1;
                    this.next = this.step;
                    this.length = this.filteredDatasets.length;
                    this.shownPrev = Math.min(this.prev, this.length);
                    this.shownNext = Math.min(this.next, this.length);
                    this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next);
                    this.$.list.scrollTarget = this.ownerDocument.documentElement;
                    this._translate();
                    this._loadTreeMap();
                },
                _translate : function(){
                    this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
                    this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
                    this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
                    this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);
                    this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];
                    this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
                    this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
                    this.$.to.innerHTML = ln["to_" + ln["localization"]];
                    this.$.of.innerHTML = ln["of_" + ln["localization"]];
                    this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
                    this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];
                    this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
                    this.errorMessage = ln["wrongUrl_" + ln["localization"]];
                },
                showSuggested : function(e) {
                    if(e.target.checked)
                        this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
                    else
                        this.datasets = this.tempDatasets;
                    this._filter();
                },
                _loadTreeMap : function(){
                    var h = $("#neon_container").height() - 48;
                    var w = $("#neon_container").width();
                    var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");
                    if(this.filteredDatasets.length > 0)
                        this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,metas\"]'></datasetexplorer-datalet>";
                    else
                        this.$.treemap_container.innerHTML = "";
                },
                _filter : function() {
                    if(this.filteredDatasets) {
                        this.async(function () {
                            var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                            var name = ddl_provider.innerHTML.trim();
                            var id = this._getIdByProviderName(name);
                            this.prev = 1;
                            this.next = this.step;
                            if (id) {
                                //filtered by provider name
                                this.filteredDatasets = this.datasets.filter(function (el) {
                                    return el.provider_name == "p:" + id;
                                });
                            }
                            else {
                                this.filteredDatasets = this.datasets;
                            }
                            //filtered by filter
                            var filter = this.filter;
                            this.filteredDatasets = this.filteredDatasets.filter(function (el) {
                                return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
                            });
                            this.length = this.filteredDatasets.length;
                            this.shownPrev = Math.min(this.prev, this.length);
                            this.shownNext = Math.min(this.next, this.length);
                            this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                            $("#list_container").animate({scrollTop: 0}, 0);
                            this._loadTreeMap();
                        }, 0);
                    }
                },
                _refreshList : function() {
                    this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                    this.$.header.className = this.$.header.className.replace(" noshadow", "");
                },
                _noShadow : function() {
                    console.log(this.$.header);
                    this.$.header.className += " noshadow";
                },
                _clearInput : function() {
                    this.$.datasets_filter.value = "";
                },
                _getIdByProviderName : function(name) {
                    for(var id in this.providers) {
                        if (this.providers[id].title == name)
                            return this.providers[id].id;
                    }
                },
//                iconForItem: function(item) {
//                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
//                },
                treemapLength : function(length) {
                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                    var name = ddl_provider.innerHTML.trim();
                    var id = this._getIdByProviderName(name);
                    if(this.suggestedDatasets && !id)
                        return Math.max(length - this.suggestedDatasets.length, 0);
                    return length;
                },
                _getColorForIcon : function(item) {
                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
                    var name = ddl_provider.innerHTML.trim();
                    var id = this._getIdByProviderName(name);
                    if (id) {
                        return this.colors[0];
                    }
                    if(!item.provider_name) {
                        return "#00BCD4";
                    }
                    var id = item.provider_name.substring(2, item.provider_name.length);
                    var i = this.getProviderById(id) % this.colors.length;
                    return this.colors[i];
                },
                _getColorForItem : function(item) {
//                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
//                    var name = ddl_provider.innerHTML.trim();
//                    var id = this._getIdByProviderName(name);
//                    if (id) {
//                        return this.colors[0];
//                    }
                    if(!item.provider_name) {
                        return "#FFEB3B";
                    }
//                    var id = item.provider_name.substring(2, item.provider_name.length);
//                    var i = this.getProviderById(id) % this.colors.length;
//                    return this.colors[i];
                },
                _getIconForItem : function(item) {
                    return item.provider_name ? 'bookmark' : 'star';
                },
//                _getProviderColor: function(id) {
//                    var i = this.getProviderById(id) % this.colors.length;
//                    return this.colors[i];
//                },
                getClassForItem: function(selected) {
                    return selected ? 'item expanded' : 'item';
                },
                getProviderById: function(providerId) {
                    var i = 0;
                    for(var id in this.providers){
                        if(this.providers[id].id == providerId)
                            return i;
                        i++;
                    }
                },
                _onPrevClick : function(){
                    if(this.prev != 1) {
                        this.prev -= this.step;
                        this.next -= this.step;
                        this.shownPrev = Math.min(this.prev, this.length);
                        this.shownNext = Math.min(this.next, this.length);
                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                    }
                    $("#list_container").animate({ scrollTop: 0}, 0);
                },
                _onNextClick : function(){
                    if(this.next < this.length) {
                        this.prev += this.step;
                        this.next += this.step;
                        this.shownPrev = Math.min(this.prev, this.length);
                        this.shownNext = Math.min(this.next, this.length);
                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
                    }
                    $("#list_container").animate({ scrollTop: 0}, 0);
                },
                _stringToArray: function(obj) {
                    obj = JSON.parse(obj);
                    return Object.keys(obj).map(function(key) {
                        return {
                            name: key,
                            value: obj[key]
                        };
                    });
                },
                _toArray: function(obj) {
                    return Object.keys(obj).map(function(key) {
                        return {
                            name: key,
                            value: obj[key]
                        };
                    });
                },
                _selectDataUrl : function(){
                    this.async(function () {
                        if(this.$.list.selectedItem) {
                            var url = this.$.list.selectedItem.url;
                            // Check if CKAN
                            var strDatasetPos = url.indexOf('/dataset/');
                            var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
                            if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
                                var urlSegment1 = url.substring(0, strDatasetPos);
                                var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
                                var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
                                url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
                            }
                            // Check if OPENDATASOFT
                            var strExploreDatasetPos = url.indexOf('/explore/dataset/');
                            if (strExploreDatasetPos >= 0) {
                                var urlSegment1 = url.substring(0, strExploreDatasetPos);
                                var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
                                var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
                                url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
                            }
                            this.dataUrl = this._addlimitUrl(url);
                        }
                        else {
                            this.dataUrl = "";
                        }
                    }, 0);
                },
                _selectDataUrl_treeMap : function(e) {
                    this.dataUrl = this._addlimitUrl(e.detail.url);
                },
                _fireDataUrl : function(){
                    this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
                },
                _addlimitUrl : function(url){
                    //CKAN --> action no limit
                    if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
                    {
                        url += "&limit=99999";
                    }
                    //OpenDataSoft --> action no limit
                    if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
                        url += "&rows=10000";
                    }
                    return url;
                },
                _resize : function(){
                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                    h = h - 64 - 8; //height with page scroller
                    $("#select_dataset_container").height(h);
                }
            });
        });
    </script>
</dom-module>