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