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     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.bgimage.length){
 264             cfg.cn[0].cn.push({
 265                 tag: 'img',
 266                 cls: 'masonry-brick-image-view',
 267                 src: this.bgimage
 268             });
 269         }
 270
 271         if(this.videourl.length){
 272             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 273             // youtube support only?
 274             cfg.cn[0].cn.cn.push({
 275                 tag: 'iframe',
 276                 cls: 'masonry-brick-image-view',
 277                 src: vurl,
 278                 frameborder : 0,
 279                 allowfullscreen : true
 280             });
 281         }
 282
 283         return cfg;
 284     },
 285
 286     initEvents: function()
 287     {
 288         switch (this.size) {
 289             case 'xs' :
 290                 this.x = 1;
 291                 this.y = 1;
 292                 break;
 293             case 'sm' :
 294                 this.x = 2;
 295                 this.y = 2;
 296                 break;
 297             case 'md' :
 298             case 'md-left' :
 299             case 'md-right' :
 300                 this.x = 3;
 301                 this.y = 3;
 302                 break;
 303             case 'tall' :
 304                 this.x = 2;
 305                 this.y = 3;
 306                 break;
 307             case 'wide' :
 308                 this.x = 3;
 309                 this.y = 2;
 310                 break;
 311             case 'wide-thin' :
 312                 this.x = 3;
 313                 this.y = 1;
 314                 break;
 315
 316             default :
 317                 break;
 318         }
 319
 320
 321
 322         if(Roo.isTouch){
 323             this.el.on('touchstart', this.onTouchStart, this);
 324             this.el.on('touchmove', this.onTouchMove, this);
 325             this.el.on('touchend', this.onTouchEnd, this);
 326             this.el.on('contextmenu', this.onContextMenu, this);
 327         } else {
 328             this.el.on('mouseenter'  ,this.enter, this);
 329             this.el.on('mouseleave', this.leave, this);
 330         }
 331
 332         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 333             this.parent().bricks.push(this);
 334         }
 335
 336     },
 337
 338     onClick: function(e, el)
 339     {
 340         if(!Roo.isTouch){
 341             return;
 342         }
 343
 344         var time = this.endTimer - this.startTimer;
 345
 346         //alert(time);
 347
 348         if(time < 1000){
 349             return;
 350         }
 351
 352         e.preventDefault();
 353     },
 354
 355     enter: function(e, el)
 356     {
 357         e.preventDefault();
 358
 359         if(!this.isFitContainer){
 360             return;
 361         }
 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.isFitContainer){
 373             return;
 374         }
 375
 376         if(this.bgimage.length && this.html.length){
 377             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 378         }
 379     },
 380
 381     onTouchStart: function(e, el)
 382     {
 383 //        e.preventDefault();
 384
 385         this.touchmoved = false;
 386
 387         if(!this.isFitContainer){
 388             return;
 389         }
 390
 391         if(!this.bgimage.length || !this.html.length){
 392             return;
 393         }
 394
 395         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 396
 397         this.timer = new Date().getTime();
 398
 399     },
 400
 401     onTouchMove: function(e, el)
 402     {
 403         this.touchmoved = true;
 404     },
 405
 406     onContextMenu : function(e,el)
 407     {
 408         e.preventDefault();
 409         e.stopPropagation();
 410         return false;
 411     },
 412
 413     onTouchEnd: function(e, el)
 414     {
 415 //        e.preventDefault();
 416
 417         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 418
 419             this.leave(e,el);
 420
 421             return;
 422         }
 423
 424         if(!this.bgimage.length || !this.html.length){
 425
 426             if(this.href.length){
 427                 window.location.href = this.href;
 428             }
 429
 430             return;
 431         }
 432
 433         if(!this.isFitContainer){
 434             return;
 435         }
 436
 437         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 438
 439         window.location.href = this.href;
 440     }
 441
 442 });
 443
 444
 445
 446