Blame view

controllets/create-card-controllet/create-card-controllet.html 10.6 KB
bf28e75e   Luigi Serra   selection control...
1
2
3
4
5
6
  <link rel="import" href="../../bower_components/polymer/polymer.html"/>

  <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"/>

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

  

037d8ec8   Luigi Serra   selection control...
7
  <link rel="import" href="../../datalets/preview-datalet/preview-datalet.html" />

49cc918f   Luigi Serra   selection control...
8
9
  <link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/>

  

bf28e75e   Luigi Serra   selection control...
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  <dom-module id="create-card-controllet">

  

      <template>

          <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;

                  padding-bottom: 30px;

49cc918f   Luigi Serra   selection control...
25
                  width: 100%;

bf28e75e   Luigi Serra   selection control...
26
27
28
29
30
              }

  

              paper-material {

                  background-color: white;

                  border-width: 1em;

49cc918f   Luigi Serra   selection control...
31
32
                  padding: 5px;

                  margin-bottom: 20px;

bf28e75e   Luigi Serra   selection control...
33
34
35
              }

  

              paper-fab {

49cc918f   Luigi Serra   selection control...
36
37
                  position: relative;

                  left: 90%;

bf28e75e   Luigi Serra   selection control...
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
                  --paper-fab-background:#2196F3;

              }

  

              #content ::content {

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

                  padding: 0 16px 8px;

                  font-weight: 300;

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

                  line-height: 24px;

                  max-height: 400px;

                  position:relative;

                  overflow: auto;

              }

              ::content.buttons {

                  margin-top: 8px;

              }

              ::content paper-button, ::content paper-icon-button {

                  font-weight: 500;

                  color: var(--accent-color);

              }

  

              .avatar

              {

                  display: inline-block;

49cc918f   Luigi Serra   selection control...
62
63
                  height: 0.7em;

                  width: 0.7em;

bf28e75e   Luigi Serra   selection control...
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
                  border-radius: 50%;

                  background: var(--paper-blue-500);

                  color: white;

                  line-height: 2em;

                  font-size: 1.87em;

                  text-align: center;

              }

  

              .title

              {

                  position: relative;

                  left: 0px;

                  /*top: 0.60vh;

                  margin-left: 20px;*/

              }

  

              .big

              {

                  font-size: 1.37em;

                  color: var(--google-grey-500);

              }

  

              .medium

              {

                  font-size: 1em;

                  padding-bottom: 0.5em;

                  color : #000000;

                  font-weight: bold;

              }

  

              .small

              {

                  font-size: 0.8em;

                  padding-top: 10px;

                  color: var(--paper-blue-500);

                  font-weight: bold;

              }

  

49cc918f   Luigi Serra   selection control...
102
103
              paper-textarea.custom_textarea{

                 /*max-width:40vw;*/

bf28e75e   Luigi Serra   selection control...
104
105
              }

  

49cc918f   Luigi Serra   selection control...
106
107
108
              div.vertical{

                  margin: 20px;

              }

bf28e75e   Luigi Serra   selection control...
109
  

15509ec7   Luigi Serra   controllets and b...
110
              ::content #card_preview .modify{

7c6897cd   Luigi Serra   controllets and b...
111
112
113
                  display: none;

              }

  

15509ec7   Luigi Serra   controllets and b...
114
              ::content #card_preview .delete{

7c6897cd   Luigi Serra   controllets and b...
115
116
117
                  display: none;

              }

  

c76a9f85   Luigi Serra   card and controll...
118
119
120
121
              ::content #card_preview .fullscreen{

                  display: none;

              }

  

bf28e75e   Luigi Serra   selection control...
122
  

49cc918f   Luigi Serra   selection control...
123
          </style>

bf28e75e   Luigi Serra   selection control...
124
125
126
  

          <div class="horizontal layout">

  

49cc918f   Luigi Serra   selection control...
127
              <div class="vertical layout" style="width: 60%;">

bf28e75e   Luigi Serra   selection control...
128
  

49cc918f   Luigi Serra   selection control...
129
130
                  <div class="horizontal layout">

                      <div class="avatar"></div>

bf28e75e   Luigi Serra   selection control...
131
                      <div class="title">

49cc918f   Luigi Serra   selection control...
132
                          <div class="big">Title</div>

1496e6e8   Luigi Serra   create card contr...
133
                          <div class="small">This is the title for your new card. It'll be visualized in the bottom black section.</div>

bf28e75e   Luigi Serra   selection control...
134
                      </div>

49cc918f   Luigi Serra   selection control...
135
                  </div>

bf28e75e   Luigi Serra   selection control...
136
  

49cc918f   Luigi Serra   selection control...
137
                  <paper-material animated elevation="2">

b12826f9   Luigi Serra   controllets and b...
138
                     <paper-textarea class="custom_textarea" id="cardTitle"

49cc918f   Luigi Serra   selection control...
139
140
                                                             label=""

                                                             char-counter

86c67be6   Luigi Serra   create card updates
141
                                                             maxlength="25"

49cc918f   Luigi Serra   selection control...
142
                                                             rows="1"

b12826f9   Luigi Serra   controllets and b...
143
                                                             value="{{cardTitle}}">

49cc918f   Luigi Serra   selection control...
144
145
146
147
148
149
150
151
  

                     </paper-textarea>

                  </paper-material>

  

                  <template is="dom-if" if="{{checkType(type, 'link')}}">

  

                      <div class="horizontal layout">

                          <div class="avatar"></div>

bf28e75e   Luigi Serra   selection control...
152
                          <div class="title">

49cc918f   Luigi Serra   selection control...
153
154
                              <div class="big">Link</div>

                              <div class="small">This is the link you want to share.</div>

bf28e75e   Luigi Serra   selection control...
155
                          </div>

49cc918f   Luigi Serra   selection control...
156
                      </div>

bf28e75e   Luigi Serra   selection control...
157
  

49cc918f   Luigi Serra   selection control...
158
159
160
161
162
163
164
165
166
167
                      <paper-material animated elevation="2">

                          <paper-textarea class="custom_textarea" id="link"

                                                                  label=""

                                                                  auto-validate

                                                                  pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"

                                                                  error-message="Urls only!"

                                                                  value="{{link}}">

  

                          </paper-textarea>

                      </paper-material>

bf28e75e   Luigi Serra   selection control...
168
  

49cc918f   Luigi Serra   selection control...
169
                  </template>

bf28e75e   Luigi Serra   selection control...
170
171
  

  

49cc918f   Luigi Serra   selection control...
172
                  <template is="dom-if" if="{{checkType(type, 'text')}}">

bf28e75e   Luigi Serra   selection control...
173
  

49cc918f   Luigi Serra   selection control...
174
175
                      <div class="horizontal layout">

                          <div class="avatar"></div>

bf28e75e   Luigi Serra   selection control...
176
                          <div class="title">

49cc918f   Luigi Serra   selection control...
177
178
                              <div class="big">Text content</div>

                              <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>

bf28e75e   Luigi Serra   selection control...
179
                          </div>

49cc918f   Luigi Serra   selection control...
180
                      </div>

bf28e75e   Luigi Serra   selection control...
181
  

49cc918f   Luigi Serra   selection control...
182
183
184
185
186
                      <paper-material animated elevation="2">

                          <paper-textarea class="custom_textarea" id="text"

                                                                  label=""

                                                                  char-counter

                                                                  max-rows="6"

49cc918f   Luigi Serra   selection control...
187
188
189
190
191
192
193
                                                                  maxlength="1024"

                                                                  value="{{text}}">

  

                          </paper-textarea>

                      </paper-material>

  

                  </template>

bf28e75e   Luigi Serra   selection control...
194
  

49cc918f   Luigi Serra   selection control...
195
196
197
198
                  <div class="horizontal layout">

                      <div class="avatar"></div>

                      <div class="title">

                          <div class="big">Comment</div>

1496e6e8   Luigi Serra   create card contr...
199
                          <div class="small">This is a comment you'll see on the bottom of the card.</div>

49cc918f   Luigi Serra   selection control...
200
                      </div>

bf28e75e   Luigi Serra   selection control...
201
202
                  </div>

  

49cc918f   Luigi Serra   selection control...
203
204
205
206
207
208
209
210
211
212
213
214
215
216
                  <paper-material animated elevation="2">

                      <paper-textarea class="custom_textarea" id="comment"

                                      label=""

                                      char-counter

                                      maxlength="100"

                                      value="{{comment}}">

  

                      </paper-textarea>

                  </paper-material>

  

              </div>

  

              <div class="vertical layout" style="width: 40%;">

  

e71c3328   Luigi Serra   selection control...
217
                  <paper-fab mini icon="add-circle" on-click="_handleAddClick"></paper-fab>

49cc918f   Luigi Serra   selection control...
218
  

037d8ec8   Luigi Serra   selection control...
219
                  <div id="card_preview"></div>

49cc918f   Luigi Serra   selection control...
220
221
              </div>

  

bf28e75e   Luigi Serra   selection control...
222
223
224
225
226
227
228
229
230
231
232
233
234
235
  

          </div>

  

      </template>

  

      <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>

  

      <script>

          Polymer({

              is: "create-card-controllet",

              properties: {

                  type:{

                      type: String,

                      value: "text"

49cc918f   Luigi Serra   selection control...
236
237
                  },

  

b12826f9   Luigi Serra   controllets and b...
238
                  cardTitle:{

49cc918f   Luigi Serra   selection control...
239
                      type: String,

037d8ec8   Luigi Serra   selection control...
240
241
242
243
244
245
246
                      value: "Title",

                      observer : '_valueChanged'

                  },

                  text:{

                      type: String,

                      value: "Text content",

                      observer : '_valueChanged'

49cc918f   Luigi Serra   selection control...
247
248
249
                  },

                  content:{

                      type: String,

037d8ec8   Luigi Serra   selection control...
250
251
                      value: undefined,

                      observer : '_valueChanged'

49cc918f   Luigi Serra   selection control...
252
253
254
                  },

                  comment:{

                      type: String,

037d8ec8   Luigi Serra   selection control...
255
256
257
258
259
260
261
                      value: "comment",

                      observer : '_valueChanged'

                  },

  

                  timer :{

                      type: Number,

                      value : 0

bf28e75e   Luigi Serra   selection control...
262
263
264
265
                  }

              },

  

              ready: function(){

172c4387   Luigi Serra   controllets and b...
266
267
  

                  this._valueChanged('','');

bf28e75e   Luigi Serra   selection control...
268
269
270
271
272
273
274
              },

  

  

              checkType: function(type, check){

                  return (type == check);

              },

  

e71c3328   Luigi Serra   selection control...
275
276
              _handleAddClick: function(e){

                  this.fire('create-card-controllet_add-clicked', {data : this});

037d8ec8   Luigi Serra   selection control...
277
278
279
280
281
282
283
              },

  

              _valueChanged: function(oldvalue, newValue) {

                 var card = '<paper-card-controllet'   +

                                ' class="grid-item"'    +

                                ' width="300"'          +

                                ' height="300"'         +

b7101429   Luigi Serra   paper-card-contro...
284
                                ' card-type="'+ this.type    + '"' +

59190a9b   Luigi Serra   update
285
                                ' comment="'+ this.comment + '"' +

b12826f9   Luigi Serra   controllets and b...
286
                                ' card-title="'+ this.cardTitle + '">';

037d8ec8   Luigi Serra   selection control...
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
                 if(this.type == 'link'){

                     card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';

                 }else{

                     card += this.text;

                 }

  

                 card += '</paper-card-controllet>';

  

                  clearTimeout (this.timer);

                  //Firefox stuff

                  var _this = this;

                  this.timer = setTimeout(function(){

                      _this.$.card_preview.innerHTML = card;

                  }, 1000);

  

  

bf28e75e   Luigi Serra   selection control...
303
304
305
306
307
              }

          })

      </script>

  

  </dom-module>