room-controllet.html
2.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="room-controllet">
<template>
<style is="custom-style">
.room {
cursor: pointer;
}
.room-body {
}
.room-subject {
}
.room-timestamp {
}
</style>
<div id={{roomId}} class="grid-item room" on-mouseover="_showTooltip">
<div class="room-body"><span>{{body}}</span></div>
<div class="room-subject"><span>{{subject}}</span></div>
<div class="room-timestamp">{{timestamp}}</div>
</div>
<paper-dialog id="dialog_info_input">
<h2 id="dialog_name"></h2>
<p id="dialog_description"></p>
</paper-dialog>
</template>
<script>
Polymer({
is : 'room-controllet',
properties : {
roomId : {
type : Number,
value : undefined
},
roomColor : {
type : String,
value : ""
},
roomHeight : {
type : Number,
value : undefined
},
roomWidth : {
type : Number,
value : undefined
},
body : {
type : String,
value : ""
},
subject : {
type : String,
value : ""
},
timestamp : {
type : String,
value : ""
},
openData : {
type : Number,
value : undefined
},
comments : {
type : Number,
value : undefined
}
},
attached : function() {
var room = document.getElementById(this.roomId);
console.log(room);
$(room).height(this.roomHeight);
$(room).width(this.roomWidth);
$(room).css('background', this.roomColor)
// $(this.$.room).height(this.roomHeight);
// $(this.$.room).width(this.roomWidth);
// $(this.$.room).css('background', this.color)
},
_showTooltip: function() {
console.log("weeeeeeeeeeee");
}
});
</script>
</dom-module>