Roo/bootstrap/MasonryBrick.js
[roojs1] / Roo / bootstrap / MasonryBrick.js
1 /*
2  * - LGPL
3  *
4  * element
5  * 
6  */
7
8 /**
9  * @class Roo.bootstrap.MasonryBrick
10  * @extends Roo.bootstrap.Component
11  * Bootstrap MasonryBrick class
12  * 
13  * @constructor
14  * Create a new MasonryBrick
15  * @param {Object} config The config object
16  */
17
18 Roo.bootstrap.MasonryBrick = function(config){
19     Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
20     
21     this.addEvents({
22         // raw events
23         /**
24          * @event click
25          * When a MasonryBrick is clcik
26          * @param {Roo.bootstrap.MasonryBrick} this
27          * @param {Roo.EventObject} e
28          */
29         "click" : true
30     });
31 };
32
33 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
34     
35     /**
36      * @cfg {String} title
37      */   
38     title : '',
39     /**
40      * @cfg {String} html
41      */   
42     html : '',
43     /**
44      * @cfg {String} bgimage
45      */   
46     bgimage : '',
47     /**
48      * @cfg {String} videourl
49      */   
50     videourl : '',
51     /**
52      * @cfg {String} cls
53      */   
54     cls : '',
55     /**
56      * @cfg {String} href
57      */   
58     href : '',
59     /**
60      * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
61      */   
62     size : 'xs',
63     
64     /**
65      * @cfg {String} (center|bottom) placetitle
66      */   
67     placetitle : '',
68     
69     /**
70      * @cfg {Boolean} isFitContainer defalut true
71      */   
72     isFitContainer : true, 
73     
74     getAutoCreate : function()
75     {
76         if(!this.isFitContainer){
77             return this.getSplitAutoCreate();
78         }
79         
80         var cls = 'masonry-brick';
81         
82         if(this.href.length){
83             cls += ' masonry-brick-link';
84         }
85         
86         if(this.bgimage.length){
87             cls += ' masonry-brick-image';
88         }
89         
90         if(this.size){
91             cls += ' masonry-' + this.size + '-brick';
92         }
93         
94         if(this.placetitle.length){
95             
96             switch (this.placetitle) {
97                 case 'center' :
98                     cls += ' masonry-center-title';
99                     break;
100                 case 'bottom' :
101                     cls += ' masonry-bottom-title';
102                     break;
103                 default:
104                     break;
105             }
106             
107         } else {
108             if(!this.html.length && !this.bgimage.length){
109                 cls += ' masonry-center-title';
110             }
111
112             if(!this.html.length && this.bgimage.length){
113                 cls += ' masonry-bottom-title';
114             }
115         }
116         
117         if(this.cls){
118             cls += ' ' + this.cls;
119         }
120         
121         var cfg = {
122             tag: (this.href.length) ? 'a' : 'div',
123             cls: cls,
124             cn: [
125                 {
126                     tag: 'div',
127                     cls: 'masonry-brick-paragraph',
128                     cn: []
129                 }
130             ]
131         };
132         
133         if(this.href.length){
134             cfg.href = this.href;
135         }
136         
137         var cn = cfg.cn[0].cn;
138         
139         if(this.title.length){
140             cn.push({
141                 tag: 'h4',
142                 cls: 'masonry-brick-title',
143                 html: this.title
144             });
145         }
146         
147         if(this.html.length){
148             cn.push({
149                 tag: 'p',
150                 cls: 'masonry-brick-text',
151                 html: this.html
152             });
153         }  
154         if (!this.title.length && !this.html.length) {
155             cfg.cn[0].cls += ' hide';
156         }
157         
158         if(this.bgimage.length){
159             cfg.cn.push({
160                 tag: 'img',
161                 cls: 'masonry-brick-image-view',
162                 src: this.bgimage
163             });
164         }
165         if(this.videourl.length){
166             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
167             // youtube support only?
168             cfg.cn.push({
169                 tag: 'iframe',
170                 cls: 'masonry-brick-image-view',
171                 src: vurl,
172                 frameborder : 0,
173                 allowfullscreen : true
174             });
175             
176             
177         }
178         return cfg;
179         
180     },
181     
182     getSplitAutoCreate : function()
183     {
184         var cls = 'masonry-brick masonry-brick-split';
185         
186         if(this.href.length){
187             cls += ' masonry-brick-link';
188         }
189         
190         if(this.bgimage.length){
191             cls += ' masonry-brick-image';
192         }
193         
194         if(this.size){
195             cls += ' masonry-' + this.size + '-brick';
196         }
197         
198         switch (this.placetitle) {
199             case 'center' :
200                 cls += ' masonry-center-title';
201                 break;
202             case 'bottom' :
203                 cls += ' masonry-bottom-title';
204                 break;
205             default:
206                 if(!this.bgimage.length){
207                     cls += ' masonry-center-title';
208                 }
209
210                 if(this.bgimage.length){
211                     cls += ' masonry-bottom-title';
212                 }
213                 break;
214         }
215         
216         if(this.cls){
217             cls += ' ' + this.cls;
218         }
219         
220         var cfg = {
221             tag: (this.href.length) ? 'a' : 'div',
222             cls: cls,
223             cn: [
224                 {
225                     tag: 'div',
226                     cls: 'masonry-brick-split-head',
227                     cn: [
228                         {
229                             tag: 'div',
230                             cls: 'masonry-brick-paragraph',
231                             cn: []
232                         }
233                     ]
234                 },
235                 {
236                     tag: 'div',
237                     cls: 'masonry-brick-split-body',
238                     cn: []
239                 }
240             ]
241         };
242         
243         if(this.href.length){
244             cfg.href = this.href;
245         }
246         
247         if(this.title.length){
248             cfg.cn[0].cn[0].cn.push({
249                 tag: 'h4',
250                 cls: 'masonry-brick-title',
251                 html: this.title
252             });
253         }
254         
255         if(this.html.length){
256             cfg.cn[1].cn.push({
257                 tag: 'p',
258                 cls: 'masonry-brick-text',
259                 html: this.html
260             });
261         }  
262 //        
263 //        if (!this.title.length && !this.html.length) {
264 //            cfg.cn[0].cls += ' hide';
265 //        }
266         
267         if(this.bgimage.length){
268             cfg.cn[0].cn.push({
269                 tag: 'img',
270                 cls: 'masonry-brick-image-view',
271                 src: this.bgimage
272             });
273         }
274         
275         if(this.videourl.length){
276             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
277             // youtube support only?
278             cfg.cn[0].cn.cn.push({
279                 tag: 'iframe',
280                 cls: 'masonry-brick-image-view',
281                 src: vurl,
282                 frameborder : 0,
283                 allowfullscreen : true
284             });
285         }
286         
287         return cfg;
288     },
289     
290     initEvents: function() 
291     {
292         switch (this.size) {
293             case 'xs' :
294                 this.x = 1;
295                 this.y = 1;
296                 break;
297             case 'sm' :
298                 this.x = 2;
299                 this.y = 2;
300                 break;
301             case 'md' :
302             case 'md-left' :
303             case 'md-right' :
304                 this.x = 3;
305                 this.y = 3;
306                 break;
307             case 'tall' :
308                 this.x = 2;
309                 this.y = 3;
310                 break;
311             case 'wide' :
312                 this.x = 3;
313                 this.y = 2;
314                 break;
315             case 'wide-thin' :
316                 this.x = 3;
317                 this.y = 1;
318                 break;
319                         
320             default :
321                 break;
322         }
323         
324         
325         
326         if(Roo.isTouch){
327             this.el.on('touchstart', this.onTouchStart, this);
328             this.el.on('touchmove', this.onTouchMove, this);
329             this.el.on('touchend', this.onTouchEnd, this);
330             this.el.on('contextmenu', this.onContextMenu, this);
331         } else {
332             this.el.on('mouseenter'  ,this.enter, this);
333             this.el.on('mouseleave', this.leave, this);
334         }
335         
336         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
337             this.parent().bricks.push(this);   
338         }
339         
340     },
341     
342     onClick: function(e, el)
343     {
344         if(!Roo.isTouch){
345             return;
346         }
347         
348         var time = this.endTimer - this.startTimer;
349         
350         //alert(time);
351         
352         if(time < 1000){
353             return;
354         }
355         
356         e.preventDefault();
357     },
358     
359     enter: function(e, el)
360     {
361         e.preventDefault();
362         
363         if(this.bgimage.length && this.html.length){
364             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
365         }
366     },
367     
368     leave: function(e, el)
369     {
370         e.preventDefault();
371         
372         if(this.bgimage.length && this.html.length){
373             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
374         }
375     },
376     
377     onTouchStart: function(e, el)
378     {
379 //        e.preventDefault();
380         
381         this.touchmoved = false;
382         
383         if(!this.bgimage.length || !this.html.length){
384             return;
385         }
386         
387         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
388         
389         this.timer = new Date().getTime();
390         
391     },
392     
393     onTouchMove: function(e, el)
394     {
395         this.touchmoved = true;
396     },
397     
398     onContextMenu : function(e,el)
399     {
400         e.preventDefault();
401         e.stopPropagation();
402         return false;
403     },
404     
405     onTouchEnd: function(e, el)
406     {
407 //        e.preventDefault();
408         
409         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
410         
411             this.leave(e,el);
412             
413             return;
414         }
415         
416         if(!this.bgimage.length || !this.html.length){
417             
418             if(this.href.length){
419                 window.location.href = this.href;
420             }
421             
422             return;
423         }
424         
425         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
426         
427         window.location.href = this.href;
428     }
429     
430 });
431
432  
433
434