Blame view

controllets/paper-card-controllet/paper-card-controllet.html 9.27 KB
eb240478   Luigi Serra   public room cards...
1
  <link rel="import" href="../../bower_components/polymer/polymer.html"/>

1b49624d   isisadmin   paper-card-contro...
2
3
4
5
  <link rel="import" href="../../bower_components/paper-material/paper-material.html"/>

  <link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>

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

  

1b49624d   isisadmin   paper-card-contro...
6
7
  <dom-module id="paper-card-controllet">

  

1b49624d   isisadmin   paper-card-contro...
8
      <template>

eb240478   Luigi Serra   public room cards...
9
10
11
12
13
14
15
16
17
18
19
          <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">

          <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

          <style>

              :host {

                  display: inline-block;

                  margin: 0 8px 8px ;

                  font-size: 14px;

                  text-align: justify;

                  line-height: 10px;

                  --paper-fab-background: var(--accent-color);

                  font-family: 'Roboto', sans-serif;

6f8e74f7   Luigi Serra   card update
20
                  padding-bottom: 30px;

eb240478   Luigi Serra   public room cards...
21
22
23
              }

  

              paper-material {

eb240478   Luigi Serra   public room cards...
24
                  background-color: white;

7383b38e   Luigi Serra   paper-card-contro...
25
                  border-width: 1em;

eb240478   Luigi Serra   public room cards...
26
27
              }

  

7383b38e   Luigi Serra   paper-card-contro...
28
              .footer {

eb240478   Luigi Serra   public room cards...
29
                  position: relative;

36f13d09   Luigi Serra   selection control...
30
                  height: 21px;

eb240478   Luigi Serra   public room cards...
31
              }

7383b38e   Luigi Serra   paper-card-contro...
32
  

0fc2aafe   Luigi Serra   updates
33
              .legend {

7383b38e   Luigi Serra   paper-card-contro...
34
35
36
37
                  position: relative;

                  top: -50px;

                  background: rgba(0,0,0,0.8);

                  bottom: 0;

eb240478   Luigi Serra   public room cards...
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
                  color: white;

                  height: 50px;

                  padding: 0 16px;

                  left: 0; right: 0;

                  z-index: 1;

              }

              paper-fab {

                  position: absolute;

                  right: 10px;

                  bottom: -18px;

                  z-index: 10;

                  --paper-fab-background:#2196F3;

              }

  

              #content ::content {

                  /*padding: 0 16px 8px;*/

7383b38e   Luigi Serra   paper-card-contro...
54
                  padding: 0 16px 8px;

eb240478   Luigi Serra   public room cards...
55
56
57
58
59
                  font-weight: 300;

                  color: var(--secondary-text-color);

                  line-height: 24px;

                  max-height: 400px;

                  position:relative;

7383b38e   Luigi Serra   paper-card-contro...
60
                  overflow: auto;

eb240478   Luigi Serra   public room cards...
61
              }

c76a9f85   Luigi Serra   card and controll...
62
  

eb240478   Luigi Serra   public room cards...
63
64
65
              ::content.buttons {

                  margin-top: 8px;

              }

c76a9f85   Luigi Serra   card and controll...
66
  

eb240478   Luigi Serra   public room cards...
67
68
69
70
              ::content paper-button, ::content paper-icon-button {

                  font-weight: 500;

                  color: var(--accent-color);

              }

7383b38e   Luigi Serra   paper-card-contro...
71
  

b047d169   Luigi Serra   updates
72
              #comment{

7383b38e   Luigi Serra   paper-card-contro...
73
74
                  position:relative;

                  top: -50px;

6f8e74f7   Luigi Serra   card update
75
                  min-height: 50px;

7383b38e   Luigi Serra   paper-card-contro...
76
77
78
79
80
                  height: auto;

                  padding: 8px 8px 8px 8px;

                  font-size: 10px;

                  color: rgba(0,0,0,0.4);

                  font-family: 'Roboto', sans-serif;

5d6adad4   Luigi Serra   card and controll...
81
                  word-wrap: break-word;

7383b38e   Luigi Serra   paper-card-contro...
82
              }

36f13d09   Luigi Serra   selection control...
83
  

15509ec7   Luigi Serra   controllets and b...
84
              .delete{

36f13d09   Luigi Serra   selection control...
85
86
87
88
89
90
91
92
93
                  position: absolute;

                  top: -12px;

                  left: -12px;

                  --iron-icon-height: 18px;

                  --iron-icon-width: 18px;

                  width: 24px;

                  height: 24px;

                  --paper-fab-background:#cccccc;

              }

c76a9f85   Luigi Serra   card and controll...
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
  

              .fullscreen{

                  position: absolute;

                  top: 36px;

                  right: 54px;

                  --iron-icon-height: 18px;

                  --iron-icon-width: 18px;

                  width: 24px;

                  height: 24px;

                  --paper-fab-background:#cccccc;

              }

  

              #fullscreen_container{

                  position: fixed;

                  width: 80%;

                  height: 75%;

                  right: 0;

                  left: 0;

                  top: 5%;

                  margin-right: auto;

                  margin-left: auto;

                  z-index: 1000;

                  display: none;

                  padding: 20px;

              }

  

              .close_fullscreen{

                  position: absolute;

                  top: 5px;

                  right: 1vw;

                  --iron-icon-height: 18px;

                  --iron-icon-width: 18px;

                  width: 24px;

                  height: 24px;

                  --paper-fab-background:#cccccc;

              }

  

              #fullscreen_content{

                  position: relative;

                  height: 100%;

                  width: 100%;

              }

  

eb240478   Luigi Serra   public room cards...
137
138
139
140
          </style>

  

  

          <paper-material animated elevation="{{elevation}}" flex>

7383b38e   Luigi Serra   paper-card-contro...
141
  

15509ec7   Luigi Serra   controllets and b...
142
              <paper-fab class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab>

36f13d09   Luigi Serra   selection control...
143
  

1b49624d   isisadmin   paper-card-contro...
144
              <div class="vertical layout">

7383b38e   Luigi Serra   paper-card-contro...
145
146
147
                  <div id="content">

                      <content></content>

                  </div>

eb240478   Luigi Serra   public room cards...
148
  

0fc2aafe   Luigi Serra   updates
149
                  <template is="dom-if" if="{{cardTitle}}">

eb240478   Luigi Serra   public room cards...
150
  

0fc2aafe   Luigi Serra   updates
151
152
                      <div class="legend horizontal layout center">

                          <span>{{cardTitle}}</span>

c76a9f85   Luigi Serra   card and controll...
153
154
155
  

                          <paper-fab class="fullscreen" mini icon="fullscreen" on-click="_handleFullscreenClick"></paper-fab>

  

6f8e74f7   Luigi Serra   card update
156
                          <!-- Adding icon based on card type -->

7383b38e   Luigi Serra   paper-card-contro...
157
  

4b412909   Luigi Serra   paper-card-contro...
158
                          <template is="dom-if" if="{{checkType(cardType, 'text')}}">

7383b38e   Luigi Serra   paper-card-contro...
159
  

15509ec7   Luigi Serra   controllets and b...
160
                              <paper-fab class="modify" mini icon="create" on-click="_handleDetailsClick"></paper-fab>

7383b38e   Luigi Serra   paper-card-contro...
161
  

6f8e74f7   Luigi Serra   card update
162
                          </template>

7383b38e   Luigi Serra   paper-card-contro...
163
  

4b412909   Luigi Serra   paper-card-contro...
164
                          <template is="dom-if" if="{{checkType(cardType, 'image')}}">

7383b38e   Luigi Serra   paper-card-contro...
165
  

15509ec7   Luigi Serra   controllets and b...
166
                              <paper-fab class="modify" mini icon="perm-media" on-click="_handleDetailsClick"></paper-fab>

7383b38e   Luigi Serra   paper-card-contro...
167
  

6f8e74f7   Luigi Serra   card update
168
                          </template>

7383b38e   Luigi Serra   paper-card-contro...
169
  

4b412909   Luigi Serra   paper-card-contro...
170
                          <template is="dom-if" if="{{checkType(cardType, 'datalet')}}">

7383b38e   Luigi Serra   paper-card-contro...
171
  

15509ec7   Luigi Serra   controllets and b...
172
                              <paper-fab class="modify" mini icon="assessment" on-click="_handleDetailsClick"></paper-fab>

7383b38e   Luigi Serra   paper-card-contro...
173
  

6f8e74f7   Luigi Serra   card update
174
                          </template>

7383b38e   Luigi Serra   paper-card-contro...
175
  

4b412909   Luigi Serra   paper-card-contro...
176
                          <template is="dom-if" if="{{checkType(cardType, 'link')}}">

7383b38e   Luigi Serra   paper-card-contro...
177
  

15509ec7   Luigi Serra   controllets and b...
178
                              <paper-fab class="modify" mini icon="link" on-click="_handleDetailsClick"></paper-fab>

7383b38e   Luigi Serra   paper-card-contro...
179
  

6f8e74f7   Luigi Serra   card update
180
                          </template>

7383b38e   Luigi Serra   paper-card-contro...
181
  

6f8e74f7   Luigi Serra   card update
182
                      </div>

7383b38e   Luigi Serra   paper-card-contro...
183
  

6f8e74f7   Luigi Serra   card update
184
                  </template>

7383b38e   Luigi Serra   paper-card-contro...
185
  

6f8e74f7   Luigi Serra   card update
186
                  <div class="footer">

59190a9b   Luigi Serra   update
187
188
                      <template is="dom-if" if="{{comment}}">

                         <div id="comment">{{comment}}</div>

eb240478   Luigi Serra   public room cards...
189
                      </template>

1b49624d   isisadmin   paper-card-contro...
190
                  </div>

eb240478   Luigi Serra   public room cards...
191
  

c76a9f85   Luigi Serra   card and controll...
192
193
194
195
196
                  <paper-material elevation="4" id="fullscreen_container">

                      <paper-fab class="close_fullscreen" mini icon="close" on-click="_handleCloseFullscreenClick"></paper-fab>

                      <div id="fullscreen_content"></div>

                  </paper-material>

  

1b49624d   isisadmin   paper-card-contro...
197
198
              </div>

          </paper-material>

eb240478   Luigi Serra   public room cards...
199
  

1b49624d   isisadmin   paper-card-contro...
200
201
      </template>

  

eb240478   Luigi Serra   public room cards...
202
203
      <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>

  

1b49624d   isisadmin   paper-card-contro...
204
205
      <script>

          Polymer({

eb240478   Luigi Serra   public room cards...
206
              is: "paper-card-controllet",

1b49624d   isisadmin   paper-card-contro...
207
208
209
              properties: {

                  width: {

                      type: Number,

1b49624d   isisadmin   paper-card-contro...
210
211
                      observer: "_changeWidth",

                  },

eb240478   Luigi Serra   public room cards...
212
213
214
215
                  height: {

                      type: Number,

                      observer: "_changeHeight",

                  },

4b412909   Luigi Serra   paper-card-contro...
216
                  cardType:{

eb240478   Luigi Serra   public room cards...
217
218
                      type: String,

                      value: "text"

6f8e74f7   Luigi Serra   card update
219
                  },

59190a9b   Luigi Serra   update
220
                  comment:{

b7101429   Luigi Serra   paper-card-contro...
221
                      cardType: String,

67b280f4   Luigi Serra   search feature
222
                      value: ""

6f8e74f7   Luigi Serra   card update
223
                  },

0fc2aafe   Luigi Serra   updates
224
                  cardTitle:{

6f8e74f7   Luigi Serra   card update
225
                      type: String,

67b280f4   Luigi Serra   search feature
226
                      value: ""

b9dd9495   Luigi Serra   selection control...
227
228
229
230
                  },

                  elevation:{

                      type: Number,

                      value: 3

6f8e74f7   Luigi Serra   card update
231
232
233
234
235
                  }

  

              },

  

              ready: function(){

4b412909   Luigi Serra   paper-card-contro...
236
                  if(this.cardType == "text"){

6f8e74f7   Luigi Serra   card update
237
                      this.$.content.style.backgroundColor = "#ffc";

eb240478   Luigi Serra   public room cards...
238
                  }

1b49624d   isisadmin   paper-card-contro...
239
              },

eb240478   Luigi Serra   public room cards...
240
  

1b49624d   isisadmin   paper-card-contro...
241
242
              _changeWidth: function(data){

                  this.style.width = data + "px";

7383b38e   Luigi Serra   paper-card-contro...
243
                  //this.$.content.style.width = data + "px";

eb240478   Luigi Serra   public room cards...
244
245
246
247
                  //$(this.$.content).perfectScrollbar();

              },

  

              _changeHeight: function(data){

6f8e74f7   Luigi Serra   card update
248
                  this.style.height = (data) + "px";

7383b38e   Luigi Serra   paper-card-contro...
249
                  this.$.content.style.height = data + "px";

6f8e74f7   Luigi Serra   card update
250
251
                  this.style.height = (this.height + ((this.text != "") ? 50 : 0)) + "px";

                  $(this.$.content).perfectScrollbar();

1b49624d   isisadmin   paper-card-contro...
252
              },

eb240478   Luigi Serra   public room cards...
253
254
255
  

              checkType: function(type, check){

                  return (type == check);

9d4a34db   Luigi Serra   selection control...
256
257
              },

  

e71c3328   Luigi Serra   selection control...
258
259
              _handleDetailsClick: function(e){

                  this.fire('paper-card-controllet_details-clicked', {data : this});

36f13d09   Luigi Serra   selection control...
260
261
262
              },

  

              _handleDeleteClick: function(e){

c76a9f85   Luigi Serra   card and controll...
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
                  this.fire('paper-card-controllet_delete-clicked', {data : this});

              },

  

              _handleFullscreenClick: function(e){

  

                  switch(this.cardType){

                      case 'text':

                          this.$.fullscreen_content.style.backgroundColor = "#ffc";

                          break;

                      case 'link':

                          window.open(this.getAttribute('card-link'),'_blank');

                          return;

                  }

  

                  this.$.fullscreen_container.style.display = "inline-block";

                  this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;

              },

  

              _handleCloseFullscreenClick: function(e){

  

                  this.$.fullscreen_container.style.display = "none";

              }

1b49624d   isisadmin   paper-card-contro...
285
286
287
          })

      </script>

  

1b49624d   isisadmin   paper-card-contro...
288
  </dom-module>