WebCompDev / COMPONENTS

Commit 282651082dec0dc06e611f47bd8e7880f4ebc2ec

Authored by Renato De Donato
1 parent 7be24196

new link-text controllet

Inline Side-by-side
Showing 4 changed files with 461 additions and 220 deletions
controllets/create-card-controllet/create-card-controllet.html
  View file @2826510
1 -<link rel="import" href="../../bower_components/polymer/polymer.html"/>  
2 -<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>  
3 -<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>  
4 -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>  
5 -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/> 1 +<link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  2 +<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
6 3
7 -<link rel="import" href="../../datalets/preview-datalet/preview-datalet.html" />  
8 -<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/> 4 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  5 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  6 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  7 +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  8 +<link rel="import" href="../../bower_components/paper-button/paper-button.html">
  9 +
  10 +<!--per la lingua inportare nell' HEADER-->
  11 +<!--<link rel="localization" href="locales/{ln}.l20n">-->
  12 +<!--<script defer src="/dist/compat/web/l20n.js"></script>-->
  13 +<!--<card_Info "BASE INFO">-->
  14 +<!--<card_Text "TEXT">-->
  15 +<!--<card_Link "LINK">-->
  16 +<!--<card_Preview "PREVIEW">-->
9 17
10 <dom-module id="create-card-controllet"> 18 <dom-module id="create-card-controllet">
11 19
12 <template> 20 <template>
13 - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">  
14 - <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>  
15 - <style>  
16 - :host {  
17 - display: inline-block;  
18 - margin: 0 8px 8px ;  
19 - font-size: 14px;  
20 - text-align: justify;  
21 - line-height: 10px;  
22 - --paper-fab-background: var(--accent-color);  
23 - font-family: 'Roboto', sans-serif;  
24 - padding-bottom: 30px; 21 +
  22 + <style is="custom-style">
  23 + #create_card_container {
  24 + display: flex;
  25 + height: 100%;
25 width: 100%; 26 width: 100%;
26 - }  
27 27
28 - paper-material {  
29 - background-color: white;  
30 - border-width: 1em;  
31 - padding: 5px;  
32 - margin-bottom: 20px; 28 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  29 + font-size: 16px;
33 } 30 }
34 31
35 - paper-fab {  
36 - position: relative;  
37 - left: 90%;  
38 - --paper-fab-background:#2196F3; 32 + #create_card_info {
  33 + height: calc(100% - 16px);
  34 + width: 50%;
  35 + margin: 8px 16px 8px 8px;
39 } 36 }
40 37
41 - #content ::content {  
42 - /*padding: 0 16px 8px;*/  
43 - padding: 0 16px 8px;  
44 - font-weight: 300;  
45 - color: var(--secondary-text-color);  
46 - line-height: 24px;  
47 - max-height: 400px;  
48 - position:relative;  
49 - overflow: auto;  
50 - }  
51 - ::content.buttons {  
52 - margin-top: 8px;  
53 - }  
54 - ::content paper-button, ::content paper-icon-button {  
55 - font-weight: 500;  
56 - color: var(--accent-color); 38 + #create_card_content {
  39 + height: calc(100% - 16px);
  40 + width: 50%;
  41 + margin: 8px 8px 8px 16px;
57 } 42 }
58 43
59 - .avatar  
60 - {  
61 - display: inline-block;  
62 - height: 0.7em;  
63 - width: 0.7em;  
64 - border-radius: 50%;  
65 - background: var(--paper-blue-500);  
66 - color: white;  
67 - line-height: 2em;  
68 - font-size: 1.87em; 44 + .input_header {
  45 + height: 32px;
  46 + padding-top: 16px;
  47 + background-color: #B6B6B6;
69 text-align: center; 48 text-align: center;
  49 + font-weight: 700;
70 } 50 }
71 51
72 - .title  
73 - {  
74 - position: relative;  
75 - left: 0px;  
76 - /*top: 0.60vh;  
77 - margin-left: 20px;*/  
78 - }  
79 -  
80 - .big  
81 - {  
82 - font-size: 1.37em;  
83 - color: var(--google-grey-500); 52 + p {
  53 + margin: 16px 8px 0px 8px;
84 } 54 }
85 55
86 - .medium  
87 - {  
88 - font-size: 1em;  
89 - padding-bottom: 0.5em;  
90 - color : #000000; 56 + #create_card_title {
91 font-weight: bold; 57 font-weight: bold;
  58 + color: #2196F3;
  59 + text-align: center;
92 } 60 }
93 61
94 - .small  
95 - {  
96 - font-size: 0.8em;  
97 - padding-top: 10px;  
98 - color: var(--paper-blue-500);  
99 - font-weight: bold; 62 + #create_card_description {
  63 + font-style: italic;
  64 + color: #727272;
  65 + text-align: center;
100 } 66 }
101 67
102 - paper-textarea.custom_textarea{  
103 - /*max-width:40vw;*/ 68 + #create_card_text {
  69 +
104 } 70 }
105 71
106 - div.vertical{  
107 - margin: 20px; 72 + paper-input, paper-textarea {
  73 + height: 48px;
  74 + width: calc(100% - 16px);
  75 + margin: 0px 0px 8px 8px;
  76 + --paper-input-container-focus-color: #2196F3;
108 } 77 }
109 78
110 - ::content #card_preview .modify{  
111 - display: none; 79 + paper-button {
  80 + position: absolute;
  81 + bottom: 16px;
  82 + right: 11px;
  83 +
  84 + height: 48px;
  85 + width: 172px;
  86 + background-color: #00BCD4;
  87 + color: white;
  88 + font-weight: 700;
  89 + padding: 16px;
112 } 90 }
113 91
114 - ::content #card_preview .delete{  
115 - display: none; 92 + paper-button:hover {
  93 + background-color: #00AABF;
  94 +
  95 + box-shadow: 0px 8px 12px #888;
  96 + -webkit-box-shadow: 0px 8px 12px #888;
  97 + -moz-box-shadow: 0px 8px 12px #888;
116 } 98 }
117 99
118 - ::content #card_preview .fullscreen{  
119 - display: none; 100 + paper-button[disabled] {
  101 + background-color: #B6B6B6;
120 } 102 }
  103 + </style>
121 104
  105 + <div id="create_card_container">
122 106
123 - </style> 107 + <paper-material id="create_card_info" elevation="5">
  108 + <div class="input_header">BASE INFO</div>
124 109
125 - <div class="horizontal layout">  
126 -  
127 - <div class="vertical layout" style="width: 60%;">  
128 -  
129 - <div class="horizontal layout">  
130 - <div class="avatar"></div>  
131 - <div class="title">  
132 - <div class="big">Title</div>  
133 - <div class="small">This is the title for your new card. It'll be visualized in the bottom black section.</div>  
134 - </div>  
135 - </div>  
136 -  
137 - <paper-material animated elevation="2">  
138 - <paper-textarea class="custom_textarea" id="cardTitle"  
139 - label=""  
140 - char-counter  
141 - maxlength="25"  
142 - rows="1"  
143 - value="{{cardTitle}}">  
144 -  
145 - </paper-textarea>  
146 - </paper-material>  
147 -  
148 - <template is="dom-if" if="{{checkType(type, 'link')}}">  
149 -  
150 - <div class="horizontal layout">  
151 - <div class="avatar"></div>  
152 - <div class="title">  
153 - <div class="big">Link</div>  
154 - <div class="small">This is the link you want to share.</div>  
155 - </div>  
156 - </div>  
157 -  
158 - <paper-material animated elevation="2">  
159 - <paper-textarea class="custom_textarea" id="link"  
160 - label=""  
161 - auto-validate  
162 - pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"  
163 - error-message="Urls only!"  
164 - value="{{link}}">  
165 -  
166 - </paper-textarea>  
167 - </paper-material> 110 + <paper-input value="{{title}}" maxlength="32" label="title"></paper-input>
168 111
169 - </template> 112 + <paper-input value="{{description}}" maxlength="100" label="description"></paper-input>
  113 +
  114 + <template is="dom-if" if="{{_checkType(type, 'link')}}">
170 115
  116 + <div class="input_header" style="margin-top: 16px;">LINK</div>
171 117
172 - <template is="dom-if" if="{{checkType(type, 'text')}}"> 118 + <paper-input
  119 + id="create_card_link"
  120 + value="{{link}}"
  121 + label="link"
  122 + auto-validate
  123 + pattern="^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$"
  124 + error-message="Invalid link">
  125 + </paper-input>
  126 +
  127 + </template>
173 128
174 - <div class="horizontal layout">  
175 - <div class="avatar"></div>  
176 - <div class="title">  
177 - <div class="big">Text content</div>  
178 - <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>  
179 - </div>  
180 - </div> 129 + <template is="dom-if" if="{{_checkType(type, 'text')}}">
181 130
182 - <paper-material animated elevation="2">  
183 - <paper-textarea class="custom_textarea" id="text"  
184 - label=""  
185 - char-counter  
186 - max-rows="50"  
187 - maxlength="1024"  
188 - value="{{text}}"> 131 + <div class="input_header" style="margin-top: 16px;">TEXT</div>
189 132
190 - </paper-textarea>  
191 - </paper-material> 133 + <paper-textarea value="{{text}}" label="text"></paper-textarea>
192 134
193 </template> 135 </template>
194 136
195 - <div class="horizontal layout">  
196 - <div class="avatar"></div>  
197 - <div class="title">  
198 - <div class="big">Comment</div>  
199 - <div class="small">This is a comment you'll see on the bottom of the card.</div>  
200 - </div>  
201 - </div> 137 + <paper-button id="add_button" raised on-click="_addCard">SAVE</paper-button>
  138 + </paper-material>
202 139
203 - <paper-material animated elevation="2">  
204 - <paper-textarea class="custom_textarea" id="comment"  
205 - label=""  
206 - char-counter  
207 - maxlength="100"  
208 - value="{{comment}}"> 140 + <paper-material id="create_card_content" elevation="5">
  141 + <div class="input_header">PREVIEW</div>
209 142
210 - </paper-textarea>  
211 - </paper-material> 143 + <template is="dom-if" if="{{_checkType(type, 'link')}}">
212 144
213 - </div> 145 + <iframe id="create_card_iframe"></iframe>
214 146
215 - <div class="vertical layout" style="width: 40%;"> 147 + </template>
  148 +
  149 + <template is="dom-if" if="{{_checkType(type, 'text')}}">
216 150
217 - <paper-fab mini icon="add-circle" on-click="_handleAddClick"></paper-fab> 151 + <p id ="create_card_title">{{title}}</p>
  152 + <p id ="create_card_description">{{description}}</p>
  153 + <p id ="create_card_text">{{text}}</p>
218 154
219 - <div id="card_preview"></div>  
220 - </div> 155 + </template>
221 156
  157 + </paper-material>
222 158
223 </div> 159 </div>
224 160
225 </template> 161 </template>
226 162
227 - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>  
228 -  
229 <script> 163 <script>
230 Polymer({ 164 Polymer({
231 is: "create-card-controllet", 165 is: "create-card-controllet",
232 properties: { 166 properties: {
233 type:{ 167 type:{
234 type: String, 168 type: String,
235 - value: "text" 169 + value: undefined//text or link
236 }, 170 },
237 171
238 - cardTitle:{ 172 + title:{//cardTitle
239 type: String, 173 type: String,
240 - value: "Title",  
241 - observer : '_valueChanged' 174 + value: ""
242 }, 175 },
243 - text:{  
244 - type: String,  
245 - value: "Text content",  
246 - observer : '_valueChanged'  
247 - },  
248 - content:{ 176 +
  177 + description:{//comment
249 type: String, 178 type: String,
250 - value: undefined,  
251 - observer : '_valueChanged' 179 + value: ""
252 }, 180 },
253 - comment:{ 181 +
  182 + text:{
254 type: String, 183 type: String,
255 - value: "comment",  
256 - observer : '_valueChanged' 184 + value: ""
257 }, 185 },
258 186
259 - timer :{  
260 - type: Number,  
261 - value : 0 187 + link:{
  188 + type: String,
  189 + value: "",
  190 + observer : '_load'
262 } 191 }
  192 +
263 }, 193 },
264 194
265 - ready: function(){ 195 + ready : function() {
  196 + $(this.$.create_card_info).perfectScrollbar();
  197 + $(this.$.create_card_content).perfectScrollbar();
266 198
267 - this._valueChanged('',''); 199 + var that = this;
  200 + window.addEventListener("resize", function() { that._resize(); });
268 }, 201 },
269 202
270 -  
271 - checkType: function(type, check){  
272 - return (type == check); 203 + attached : function() {
  204 + this.async(function(){this._load();},100);
273 }, 205 },
274 206
275 - _handleAddClick: function(e){  
276 - this.fire('create-card-controllet_add-clicked', {data : this}); 207 + _load : function() {
  208 + var link = this.$$("#create_card_link");
  209 + var iframe = this.$$("#create_card_iframe");
  210 +
  211 + if(link){
  212 + var value = link.value;
  213 +
  214 + if (value.indexOf("http") != 0)
  215 + value = "http://" + value;
  216 +
  217 + if(!link.invalid && value.length > 16) {
  218 + iframe.setAttribute("src", value);
  219 + this._resize();
  220 + }
  221 + }
277 }, 222 },
278 223
279 - _valueChanged: function(oldvalue, newValue) {  
280 - var card = '<paper-card-controllet' +  
281 - ' class="grid-item"' +  
282 - ' width="300"' +  
283 - ' height="300"' +  
284 - ' card-type="'+ this.type + '"' +  
285 - ' comment="'+ this.comment + '"' +  
286 - ' card-title="'+ this.cardTitle + '">';  
287 - if(this.type == 'link'){  
288 - card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';  
289 - }else{  
290 - card += this.text;  
291 - }  
292 -  
293 - card += '</paper-card-controllet>';  
294 -  
295 - clearTimeout (this.timer);  
296 - //Firefox stuff  
297 - var _this = this;  
298 - this.timer = setTimeout(function(){  
299 - _this.$.card_preview.innerHTML = card;  
300 - }, 1000); 224 + _checkType: function(type, check){
  225 + return (type == check);
  226 + },
301 227
  228 + _addCard: function(){
  229 + this.fire('create-card-controllet_add-clicked', {data : this});//create-card-controllet_data
  230 + },
302 231
  232 + _resize : function(){
  233 + var h = $("#create_card_info").height() -64;
  234 + $("#create_card_iframe").height(h);
303 } 235 }
  236 +
304 }) 237 })
305 </script> 238 </script>
306 239
controllets/create-card-controllet/create-card-controllet_old.html 0 → 100755
  View file @2826510
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"/>
  6 +
  7 +<link rel="import" href="../../datalets/preview-datalet/preview-datalet.html" />
  8 +<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/>
  9 +
  10 +<dom-module id="create-card-controllet">
  11 +
  12 + <template>
  13 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15 + <style>
  16 + :host {
  17 + display: inline-block;
  18 + margin: 0 8px 8px ;
  19 + font-size: 14px;
  20 + text-align: justify;
  21 + line-height: 10px;
  22 + --paper-fab-background: var(--accent-color);
  23 + font-family: 'Roboto', sans-serif;
  24 + padding-bottom: 30px;
  25 + width: 100%;
  26 + }
  27 +
  28 + paper-material {
  29 + background-color: white;
  30 + border-width: 1em;
  31 + padding: 5px;
  32 + margin-bottom: 20px;
  33 + }
  34 +
  35 + paper-fab {
  36 + position: relative;
  37 + left: 90%;
  38 + --paper-fab-background:#2196F3;
  39 + }
  40 +
  41 + #content ::content {
  42 + /*padding: 0 16px 8px;*/
  43 + padding: 0 16px 8px;
  44 + font-weight: 300;
  45 + color: var(--secondary-text-color);
  46 + line-height: 24px;
  47 + max-height: 400px;
  48 + position:relative;
  49 + overflow: auto;
  50 + }
  51 + ::content.buttons {
  52 + margin-top: 8px;
  53 + }
  54 + ::content paper-button, ::content paper-icon-button {
  55 + font-weight: 500;
  56 + color: var(--accent-color);
  57 + }
  58 +
  59 + .avatar
  60 + {
  61 + display: inline-block;
  62 + height: 0.7em;
  63 + width: 0.7em;
  64 + border-radius: 50%;
  65 + background: var(--paper-blue-500);
  66 + color: white;
  67 + line-height: 2em;
  68 + font-size: 1.87em;
  69 + text-align: center;
  70 + }
  71 +
  72 + .title
  73 + {
  74 + position: relative;
  75 + left: 0px;
  76 + /*top: 0.60vh;
  77 + margin-left: 20px;*/
  78 + }
  79 +
  80 + .big
  81 + {
  82 + font-size: 1.37em;
  83 + color: var(--google-grey-500);
  84 + }
  85 +
  86 + .medium
  87 + {
  88 + font-size: 1em;
  89 + padding-bottom: 0.5em;
  90 + color : #000000;
  91 + font-weight: bold;
  92 + }
  93 +
  94 + .small
  95 + {
  96 + font-size: 0.8em;
  97 + padding-top: 10px;
  98 + color: var(--paper-blue-500);
  99 + font-weight: bold;
  100 + }
  101 +
  102 + paper-textarea.custom_textarea{
  103 + /*max-width:40vw;*/
  104 + }
  105 +
  106 + div.vertical{
  107 + margin: 20px;
  108 + }
  109 +
  110 + ::content #card_preview .modify{
  111 + display: none;
  112 + }
  113 +
  114 + ::content #card_preview .delete{
  115 + display: none;
  116 + }
  117 +
  118 + ::content #card_preview .fullscreen{
  119 + display: none;
  120 + }
  121 +
  122 +
  123 + </style>
  124 +
  125 + <div class="horizontal layout">
  126 +
  127 + <div class="vertical layout" style="width: 60%;">
  128 +
  129 + <div class="horizontal layout">
  130 + <div class="avatar"></div>
  131 + <div class="title">
  132 + <div class="big">Title</div>
  133 + <div class="small">This is the title for your new card. It'll be visualized in the bottom black section.</div>
  134 + </div>
  135 + </div>
  136 +
  137 + <paper-material animated elevation="2">
  138 + <paper-textarea class="custom_textarea" id="cardTitle"
  139 + label=""
  140 + char-counter
  141 + maxlength="25"
  142 + rows="1"
  143 + value="{{cardTitle}}">
  144 +
  145 + </paper-textarea>
  146 + </paper-material>
  147 +
  148 + <template is="dom-if" if="{{checkType(type, 'link')}}">
  149 +
  150 + <div class="horizontal layout">
  151 + <div class="avatar"></div>
  152 + <div class="title">
  153 + <div class="big">Link</div>
  154 + <div class="small">This is the link you want to share.</div>
  155 + </div>
  156 + </div>
  157 +
  158 + <paper-material animated elevation="2">
  159 + <paper-textarea class="custom_textarea" id="link"
  160 + label=""
  161 + auto-validate
  162 + pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"
  163 + error-message="Urls only!"
  164 + value="{{link}}">
  165 +
  166 + </paper-textarea>
  167 + </paper-material>
  168 +
  169 + </template>
  170 +
  171 +
  172 + <template is="dom-if" if="{{checkType(type, 'text')}}">
  173 +
  174 + <div class="horizontal layout">
  175 + <div class="avatar"></div>
  176 + <div class="title">
  177 + <div class="big">Text content</div>
  178 + <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>
  179 + </div>
  180 + </div>
  181 +
  182 + <paper-material animated elevation="2">
  183 + <paper-textarea class="custom_textarea" id="text"
  184 + label=""
  185 + char-counter
  186 + max-rows="50"
  187 + maxlength="1024"
  188 + value="{{text}}">
  189 +
  190 + </paper-textarea>
  191 + </paper-material>
  192 +
  193 + </template>
  194 +
  195 + <div class="horizontal layout">
  196 + <div class="avatar"></div>
  197 + <div class="title">
  198 + <div class="big">Comment</div>
  199 + <div class="small">This is a comment you'll see on the bottom of the card.</div>
  200 + </div>
  201 + </div>
  202 +
  203 + <paper-material animated elevation="2">
  204 + <paper-textarea class="custom_textarea" id="comment"
  205 + label=""
  206 + char-counter
  207 + maxlength="100"
  208 + value="{{comment}}">
  209 +
  210 + </paper-textarea>
  211 + </paper-material>
  212 +
  213 + </div>
  214 +
  215 + <div class="vertical layout" style="width: 40%;">
  216 +
  217 + <paper-fab mini icon="add-circle" on-click="_handleAddClick"></paper-fab>
  218 +
  219 + <div id="card_preview"></div>
  220 + </div>
  221 +
  222 +
  223 + </div>
  224 +
  225 + </template>
  226 +
  227 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  228 +
  229 + <script>
  230 + Polymer({
  231 + is: "create-card-controllet",
  232 + properties: {
  233 + type:{
  234 + type: String,
  235 + value: "text"
  236 + },
  237 +
  238 + cardTitle:{
  239 + type: String,
  240 + value: "Title",
  241 + observer : '_valueChanged'
  242 + },
  243 + text:{
  244 + type: String,
  245 + value: "Text content",
  246 + observer : '_valueChanged'
  247 + },
  248 + content:{
  249 + type: String,
  250 + value: undefined,
  251 + observer : '_valueChanged'
  252 + },
  253 + comment:{
  254 + type: String,
  255 + value: "comment",
  256 + observer : '_valueChanged'
  257 + },
  258 +
  259 + timer :{
  260 + type: Number,
  261 + value : 0
  262 + }
  263 + },
  264 +
  265 + ready: function(){
  266 +
  267 + this._valueChanged('','');
  268 + },
  269 +
  270 +
  271 + checkType: function(type, check){
  272 + return (type == check);
  273 + },
  274 +
  275 + _handleAddClick: function(e){
  276 + this.fire('create-card-controllet_add-clicked', {data : this});
  277 + },
  278 +
  279 + _valueChanged: function(oldvalue, newValue) {
  280 + var card = '<paper-card-controllet' +
  281 + ' class="grid-item"' +
  282 + ' width="300"' +
  283 + ' height="300"' +
  284 + ' card-type="'+ this.type + '"' +
  285 + ' comment="'+ this.comment + '"' +
  286 + ' card-title="'+ this.cardTitle + '">';
  287 + if(this.type == 'link'){
  288 + card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';
  289 + }else{
  290 + card += this.text;
  291 + }
  292 +
  293 + card += '</paper-card-controllet>';
  294 +
  295 + clearTimeout (this.timer);
  296 + //Firefox stuff
  297 + var _this = this;
  298 + this.timer = setTimeout(function(){
  299 + _this.$.card_preview.innerHTML = card;
  300 + }, 1000);
  301 +
  302 +
  303 + }
  304 + })
  305 + </script>
  306 +
  307 +</dom-module>
0 \ No newline at end of file 308 \ No newline at end of file
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
  View file @2826510
@@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div> 38 <div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
39 <div id="card" class="card" style$="background-color:{{color}}"> 39 <div id="card" class="card" style$="background-color:{{color}}">
40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}"> 40 <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
41 - <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe> 41 + <iframe id="public_room_iframe" src="public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
42 </template> 42 </template>
43 </div> 43 </div>
44 44
datalets/base-datalet/base-datalet.html
  View file @2826510
@@ -96,6 +96,7 @@ Example : @@ -96,6 +96,7 @@ Example :
96 } 96 }
97 97
98 #span_description{ 98 #span_description{
  99 + font-style: italic;
99 color: #727272; 100 color: #727272;
100 } 101 }
101 </style> 102 </style>