git.roojs.org Git - roojs1/blob - 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     /**
  75      * @cfg {Boolean} preventDefault defalut false
  76      */
  77     preventDefault : true,
  78
  79     getAutoCreate : function()
  80     {
  81         if(!this.isFitContainer){
  82             return this.getSplitAutoCreate();
  83         }
  84
  85         var cls = 'masonry-brick masonry-brick-full';
  86
  87         if(this.href.length){
  88             cls += ' masonry-brick-link';
  89         }
  90
  91         if(this.bgimage.length){
  92             cls += ' masonry-brick-image';
  93         }
  94
  95         if(!this.html.length){
  96             cls += ' enable-mask';
  97         }
  98
  99         if(this.size){
 100             cls += ' masonry-' + this.size + '-brick';
 101         }
 102
 103         if(this.placetitle.length){
 104
 105             switch (this.placetitle) {
 106                 case 'center' :
 107                     cls += ' masonry-center-title';
 108                     break;
 109                 case 'bottom' :
 110                     cls += ' masonry-bottom-title';
 111                     break;
 112                 default:
 113                     break;
 114             }
 115
 116         } else {
 117             if(!this.html.length && !this.bgimage.length){
 118                 cls += ' masonry-center-title';
 119             }
 120
 121             if(!this.html.length && this.bgimage.length){
 122                 cls += ' masonry-bottom-title';
 123             }
 124         }
 125
 126         if(this.cls){
 127             cls += ' ' + this.cls;
 128         }
 129
 130         var cfg = {
 131             tag: (this.href.length) ? 'a' : 'div',
 132             cls: cls,
 133             cn: [
 134                 {
 135                     tag: 'div',
 136                     cls: 'masonry-brick-paragraph',
 137                     cn: []
 138                 }
 139             ]
 140         };
 141
 142         if(this.href.length){
 143             cfg.href = this.href;
 144         }
 145
 146         var cn = cfg.cn[0].cn;
 147
 148         if(this.title.length){
 149             cn.push({
 150                 tag: 'h4',
 151                 cls: 'masonry-brick-title',
 152                 html: this.title
 153             });
 154         }
 155
 156         if(this.html.length){
 157             cn.push({
 158                 tag: 'p',
 159                 cls: 'masonry-brick-text',
 160                 html: this.html
 161             });
 162         }
 163         if (!this.title.length && !this.html.length) {
 164             cfg.cn[0].cls += ' hide';
 165         }
 166
 167         if(this.bgimage.length){
 168             cfg.cn.push({
 169                 tag: 'img',
 170                 cls: 'masonry-brick-image-view',
 171                 src: this.bgimage
 172             });
 173         }
 174
 175         if(this.videourl.length){
 176             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 177             // youtube support only?
 178             cfg.cn.push({
 179                 tag: 'iframe',
 180                 cls: 'masonry-brick-image-view',
 181                 src: vurl,
 182                 frameborder : 0,
 183                 allowfullscreen : true
 184             });
 185
 186
 187         }
 188
 189         cfg.cn.push({
 190             tag: 'div',
 191             cls: 'masonry-brick-mask'
 192         });
 193
 194         return cfg;
 195
 196     },
 197
 198     getSplitAutoCreate : function()
 199     {
 200         var cls = 'masonry-brick masonry-brick-split';
 201
 202         if(this.href.length){
 203             cls += ' masonry-brick-link';
 204         }
 205
 206         if(this.bgimage.length){
 207             cls += ' masonry-brick-image';
 208         }
 209
 210         if(this.size){
 211             cls += ' masonry-' + this.size + '-brick';
 212         }
 213
 214         switch (this.placetitle) {
 215             case 'center' :
 216                 cls += ' masonry-center-title';
 217                 break;
 218             case 'bottom' :
 219                 cls += ' masonry-bottom-title';
 220                 break;
 221             default:
 222                 if(!this.bgimage.length){
 223                     cls += ' masonry-center-title';
 224                 }
 225
 226                 if(this.bgimage.length){
 227                     cls += ' masonry-bottom-title';
 228                 }
 229                 break;
 230         }
 231
 232         if(this.cls){
 233             cls += ' ' + this.cls;
 234         }
 235
 236         var cfg = {
 237             tag: (this.href.length) ? 'a' : 'div',
 238             cls: cls,
 239             cn: [
 240                 {
 241                     tag: 'div',
 242                     cls: 'masonry-brick-split-head',
 243                     cn: [
 244                         {
 245                             tag: 'div',
 246                             cls: 'masonry-brick-paragraph',
 247                             cn: []
 248                         }
 249                     ]
 250                 },
 251                 {
 252                     tag: 'div',
 253                     cls: 'masonry-brick-split-body',
 254                     cn: []
 255                 }
 256             ]
 257         };
 258
 259         if(this.href.length){
 260             cfg.href = this.href;
 261         }
 262
 263         if(this.title.length){
 264             cfg.cn[0].cn[0].cn.push({
 265                 tag: 'h4',
 266                 cls: 'masonry-brick-title',
 267                 html: this.title
 268             });
 269         }
 270
 271         if(this.html.length){
 272             cfg.cn[1].cn.push({
 273                 tag: 'p',
 274                 cls: 'masonry-brick-text',
 275                 html: this.html
 276             });
 277         }
 278
 279         if(this.bgimage.length){
 280             cfg.cn[0].cn.push({
 281                 tag: 'img',
 282                 cls: 'masonry-brick-image-view',
 283                 src: this.bgimage
 284             });
 285         }
 286
 287         if(this.videourl.length){
 288             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 289             // youtube support only?
 290             cfg.cn[0].cn.cn.push({
 291                 tag: 'iframe',
 292                 cls: 'masonry-brick-image-view',
 293                 src: vurl,
 294                 frameborder : 0,
 295                 allowfullscreen : true
 296             });
 297         }
 298
 299         return cfg;
 300     },
 301
 302     initEvents: function()
 303     {
 304         switch (this.size) {
 305             case 'xs' :
 306                 this.x = 1;
 307                 this.y = 1;
 308                 break;
 309             case 'sm' :
 310                 this.x = 2;
 311                 this.y = 2;
 312                 break;
 313             case 'md' :
 314             case 'md-left' :
 315             case 'md-right' :
 316                 this.x = 3;
 317                 this.y = 3;
 318                 break;
 319             case 'tall' :
 320                 this.x = 2;
 321                 this.y = 3;
 322                 break;
 323             case 'wide' :
 324                 this.x = 3;
 325                 this.y = 2;
 326                 break;
 327             case 'wide-thin' :
 328                 this.x = 3;
 329                 this.y = 1;
 330                 break;
 331
 332             default :
 333                 break;
 334         }
 335
 336         if(Roo.isTouch){
 337             this.el.on('touchstart', this.onTouchStart, this);
 338             this.el.on('touchmove', this.onTouchMove, this);
 339             this.el.on('touchend', this.onTouchEnd, this);
 340             this.el.on('contextmenu', this.onContextMenu, this);
 341         } else {
 342             this.el.on('mouseenter'  ,this.enter, this);
 343             this.el.on('mouseleave', this.leave, this);
 344             this.el.on('click', this.onClick, this);
 345         }
 346
 347         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 348             this.parent().bricks.push(this);
 349         }
 350
 351     },
 352
 353     onClick: function(e, el)
 354     {
 355         Roo.log('click');
 356
 357         var time = this.endTimer - this.startTimer;
 358
 359         if(Roo.isTouch){
 360             if(time > 1000){
 361                 e.preventDefault();
 362                 return;
 363             }
 364         }
 365
 366         if(!this.preventDefault){
 367             return;
 368         }
 369
 370         e.preventDefault();
 371         this.fireEvent('click', this);
 372     },
 373
 374     enter: function(e, el)
 375     {
 376         e.preventDefault();
 377
 378         if(!this.isFitContainer){
 379             return;
 380         }
 381
 382         if(this.bgimage.length && this.html.length){
 383             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 384         }
 385     },
 386
 387     leave: function(e, el)
 388     {
 389         e.preventDefault();
 390
 391         if(!this.isFitContainer){
 392             return;
 393         }
 394
 395         if(this.bgimage.length && this.html.length){
 396             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 397         }
 398     },
 399
 400     onTouchStart: function(e, el)
 401     {
 402 //        e.preventDefault();
 403
 404         this.touchmoved = false;
 405
 406         if(!this.isFitContainer){
 407             return;
 408         }
 409
 410         if(!this.bgimage.length || !this.html.length){
 411             return;
 412         }
 413
 414         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 415
 416         this.timer = new Date().getTime();
 417
 418     },
 419
 420     onTouchMove: function(e, el)
 421     {
 422         this.touchmoved = true;
 423     },
 424
 425     onContextMenu : function(e,el)
 426     {
 427         e.preventDefault();
 428         e.stopPropagation();
 429         return false;
 430     },
 431
 432     onTouchEnd: function(e, el)
 433     {
 434 //        e.preventDefault();
 435
 436         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 437
 438             this.leave(e,el);
 439
 440             return;
 441         }
 442
 443         if(!this.bgimage.length || !this.html.length){
 444
 445             if(this.href.length){
 446                 window.location.href = this.href;
 447             }
 448
 449             return;
 450         }
 451
 452         if(!this.isFitContainer){
 453             return;
 454         }
 455
 456         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 457
 458         window.location.href = this.href;
 459     }
 460
 461 });
 462
 463
 464
 465