header-view.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-list/iron-list.html">

<dom-module id="header-view">   

<style>
.header_item{
font-weight: bold;
font-size: 14px;
padding-top: 10px;
border-bottom: 1px solid #948A8A;
}
.item_key,
.item_value{
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
}
.not_showing{
display: none;
}
.entry_item{
white-space: nowrap;
cursor: default;
}
.item_key{
font-weight: bold;
width: 40%;
background: rgba(106, 119, 130, 0.18);
}
.item_value{
background: rgba(106, 119, 130, 0.08);  
width: 60%;
}
iron-list {
height:500px;
overflow-x: hidden !important;
width: 100%;
--iron-list-items-container: {
  };
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}
.file_name{
font-size: 10px;
display: inline-block;
margin-left: 3px;
font-weight: initial;
color: #1A64A5;
}
.row{
padding-top: 2px;
}
:host{
width: 100%;
}
</style>
<template>
    <iron-list id="the_list" items="{{_build_array(set_header, pos_header, tet_header, cut_header, header_filter, is_showing)}}" as="item">
        <template><div class="row">
            <div class$="[[item.class_a]]">
                [[item.name]]
                <div class="file_name">[[item.value]]</div>
            </div>
            <div class$="[[item.class_b]]">
                <div class="item_key" title="[[item.name]]">[[item.name]]</div>
                <div class="item_value" title="[[item.value]]">[[item.value]]&nbsp;</div>
            </div>
        </div></template>
    </iron-list>
</template>

<script>


Polymer({
    is: 'header-view',
    behaviors: [Polymer.IronResizableBehavior],
    listeners: {
        'iron-resize': '_on_resize'
    },
    properties: {
        header_filter: {
            type: String,
            value: "",
            notify: true
        },
        pos_header: {
            type: Object,
            value: function(){ return {};},
            notify: true
        },
        set_header: {
            type: Object,
            value: function(){ return {};},
            notify: true
        },
        tet_header: {
            type: Object,
            value: function(){ return {};},
            notify: true
        },
        cut_header: {
            type: Object,
            value: function(){ return {};},
            notify: true
        },
        is_showing: {
            type: Boolean,
            value: false,
            notify: true,
            readOnly: true
        }
    }, observers: [
        "_clear_cache('pos', pos_header)",
        "_clear_cache('set', set_header)",
        "_clear_cache('tet', tet_header)",
        "_clear_cache('cut', cut_header)"
    ], created: function(){
        this._cache = {};
        this._cached_for = {}; // if _clear_cache was guaranteed to be called before _build_array we wouldn't need this
    }, _on_resize: function(){
        let showing = true;
        let node = this.parentNode;
        while(node){
            if(node.hidden){
                showing = false;
                break;
            }
            node = node.parentNode;
        }
        this._setIs_showing(showing);
    }, _clear_cache: function(t, ignored){
        this._cache[t] = undefined;
        this._cached_for[t] = undefined;
    }, _build_array: function(set_header, pos_header, tet_header, cut_header, header_filter, is_showing) {
            if(!this.is_showing){
                return [];
            }
            var a = [];         
            for(let t of new Set(['tet', 'cut', 'pos', 'set'])){
                let header = this[t + '_header'];
                if(!header || !Object.keys(header).length){
                    continue;
                }
                if (this._cache[t] && this._cached_for[t] === header){
                    a = a.concat(this._cache[t]);
                    continue;
                } 
                let arr = Object.keys(header).map(function(key){
                    return {
                        is: 'item',
                        class_a: 'not_showing',
                        class_b: 'entry_item',
                        name: key + "",
                        value: header[key] + ""
                    };
                }).sort(function(a,b){
                    return a.name > b.name ? 1 : -1;
                });
                arr.splice(0, 0, {
                    is: 'header',
                    class_a: 'header_item',
                    class_b: 'not_showing',
                    name: "." + t,
                    value: header.file
                });
                this._cache[t] = arr;
                this._cached_for[t] = header;
                a = a.concat(arr);

            }
            if(header_filter){
                header_filter = header_filter.toLowerCase();
                a = a.filter(function(item){
                    return item.is==='header' || item.name.toLowerCase().indexOf(header_filter) !== -1 || item.value.toLowerCase().indexOf(header_filter) !== -1;
                });         
            }
            return a;
        }
});


</script>
</dom-module>