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