controllets/room-controllet/room-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
<link rel="import" href="../../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<script src="../../locales/room_controllet_ln.js"></script>
<dom-module id="room-controllet">
    <template>
        <style is="custom-style">
            iron-icon {
                padding: 0px;
                margin: 0px;
            }
            iron-icon.this {
                position: absolute;
                top: -3px;
                left: -3px;
                -moz-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
                filter: FlipH;
                -ms-filter: "FlipH";
            }
            paper-dialog {
                margin: 0px;
            }
            .room-tooltip {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                position: absolute;
                min-width: 250px;
                top: 49px;
                left: 98px;
                padding: 16px;
            }
            .div_icon{
                display: inline-block;
                height: 20px;
                width: 20px;
                margin:4px 6px 4px 2px;
            }
            p {
                margin: 0px;
                padding: 8px 0px 0px 0px;
                white-space: nowrap;
            }
            .ptop{
                padding-top: 0px;
            }
        </style>
        <div id={{roomId}} class$="grid-item {{roomHeight}} {{roomWidth}}" on-mouseover="_showTooltip" on-mouseout="_hideTooltip" style$="background-color: {{roomColor}};">
            <div class="room-body">{{body}}</div>
            <div class="room-subject"><span>{{subject}}</span></div>
            <div class="room-timestamp">{{timestamp}}</div>
            <paper-dialog id="room_info" class="room-tooltip">
                <iron-icon icon="communication:call-made" class="this" style="color: #2196F3;"></iron-icon>
                <p class="ptop">{{_thisRoom}} <b style="color: #2196F3;">{{subject}}</b>,</p>
                <p>{{_createdBy}} <b style="color: #2196F3;">{{roomOwner}}</b> {{_has}}:</p>
                <p><iron-icon class="div_icon" style$="background-color: {{roomColor}};"></iron-icon><b style$="color: {{roomColor}};">{{_howManyViews}} {{_views}}</b> (<b style$="color: {{roomColor}};">{{roomViews}}</b>),</p>
                <p><iron-icon icon="editor:border-left"></iron-icon> <b>{{_howManyComments}} {{_comments}}</b> (<b>{{comments}}</b>) {{_and}}</p>
                <p><iron-icon icon="editor:border-bottom"></iron-icon> <b>{{_howManyDatasets}} {{_datasets}}</b> (<b>{{datasets}}</b>).</p>
            </paper-dialog>
        </div>
    </template>
    <script>
        Polymer({
            is : 'room-controllet',
            properties : {
                roomId : {
                    type  : Number,
                    value : undefined
                },
                roomColor : {
                    type  : String,
                    value : ""
                },
                roomHeight : {
                    type  : String,
                    value : ""
                },
                roomWidth : {
                    type  : String,
                    value : ""
                },
                roomOwner : {
                    type  : String,
                    value : ""
                },
                roomShape : {
                    type  : Array,
                    value : undefined
                },
                body : {
                    type  : String,
                    value : ""
                },
                subject  : {
                    type  : String,
                    value : ""
                },
                timestamp : {
                    type  : String,
                    value : ""
                },
                roomViews : {
                    type  : Number,
                    value : undefined
                },
                comments : {
                    type  : Number,
                    value : undefined
                },
                datasets : {
                    type  : Number,
                    value : undefined
                },
                //LN
                _thisRoom : { type : String },
                _createdBy : { type : String },
                _has : { type : String },
                _views : { type : String },
                _comments : { type : String },
                _datasets : { type : String },
                _and : { type : String },
                _howManyViews : { type : String },
                _howManyComments : { type : String },
                _howManyDatasets : { type : String }
            },
            attached : function() {
                this._translate();
            },
            _translate : function() {
                room_ln["ln"] = ODE.user_language;
                this._thisRoom = room_ln["thisRoom_" + room_ln["ln"]];
                this._createdBy = room_ln["createdBy_" + room_ln["ln"]];
                this._has = room_ln["has_" + room_ln["ln"]];
                this._views = room_ln["views_" + room_ln["ln"]];
                this._comments = room_ln["comments_" + room_ln["ln"]];
                this._datasets = room_ln["datasets_" + room_ln["ln"]];
                this._and = room_ln["and_" + room_ln["ln"]];
                this._howManyViews = room_ln[this.roomShape[0] + "_" + room_ln["ln"]];
                this._howManyComments = room_ln[this.roomShape[1] + "_" + room_ln["ln"]];
                this._howManyDatasets = room_ln[this.roomShape[2] + "_" + room_ln["ln"]];
            },
            _showTooltip: function() {
                this.$.room_info.open();
            },
            _hideTooltip: function() {
                this.$.room_info.close();
            }
        });
    </script>
</dom-module>