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
 179         cfg.cn.push({
 180             tag: 'div',
 181             cls: 'masonry-brick-mask'
 182         });
 183
 184         return cfg;
 185
 186     },
 187
 188     getSplitAutoCreate : function()
 189     {
 190         var cls = 'masonry-brick masonry-brick-split';
 191
 192         if(this.href.length){
 193             cls += ' masonry-brick-link';
 194         }
 195
 196         if(this.bgimage.length){
 197             cls += ' masonry-brick-image';
 198         }
 199
 200         if(this.size){
 201             cls += ' masonry-' + this.size + '-brick';
 202         }
 203
 204         switch (this.placetitle) {
 205             case 'center' :
 206                 cls += ' masonry-center-title';
 207                 break;
 208             case 'bottom' :
 209                 cls += ' masonry-bottom-title';
 210                 break;
 211             default:
 212                 if(!this.bgimage.length){
 213                     cls += ' masonry-center-title';
 214                 }
 215
 216                 if(this.bgimage.length){
 217                     cls += ' masonry-bottom-title';
 218                 }
 219                 break;
 220         }
 221
 222         if(this.cls){
 223             cls += ' ' + this.cls;
 224         }
 225
 226         var cfg = {
 227             tag: (this.href.length) ? 'a' : 'div',
 228             cls: cls,
 229             cn: [
 230                 {
 231                     tag: 'div',
 232                     cls: 'masonry-brick-split-head',
 233                     cn: [
 234                         {
 235                             tag: 'div',
 236                             cls: 'masonry-brick-paragraph',
 237                             cn: []
 238                         }
 239                     ]
 240                 },
 241                 {
 242                     tag: 'div',
 243                     cls: 'masonry-brick-split-body',
 244                     cn: []
 245                 }
 246             ]
 247         };
 248
 249         if(this.href.length){
 250             cfg.href = this.href;
 251         }
 252
 253         if(this.title.length){
 254             cfg.cn[0].cn[0].cn.push({
 255                 tag: 'h4',
 256                 cls: 'masonry-brick-title',
 257                 html: this.title
 258             });
 259         }
 260
 261         if(this.html.length){
 262             cfg.cn[1].cn.push({
 263                 tag: 'p',
 264                 cls: 'masonry-brick-text',
 265                 html: this.html
 266             });
 267         }
 268
 269         if(this.bgimage.length){
 270             cfg.cn[0].cn.push({
 271                 tag: 'img',
 272                 cls: 'masonry-brick-image-view',
 273                 src: this.bgimage
 274             });
 275         }
 276
 277         if(this.videourl.length){
 278             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 279             // youtube support only?
 280             cfg.cn[0].cn.cn.push({
 281                 tag: 'iframe',
 282                 cls: 'masonry-brick-image-view',
 283                 src: vurl,
 284                 frameborder : 0,
 285                 allowfullscreen : true
 286             });
 287         }
 288
 289         return cfg;
 290     },
 291
 292     initEvents: function()
 293     {
 294         switch (this.size) {
 295             case 'xs' :
 296                 this.x = 1;
 297                 this.y = 1;
 298                 break;
 299             case 'sm' :
 300                 this.x = 2;
 301                 this.y = 2;
 302                 break;
 303             case 'md' :
 304             case 'md-left' :
 305             case 'md-right' :
 306                 this.x = 3;
 307                 this.y = 3;
 308                 break;
 309             case 'tall' :
 310                 this.x = 2;
 311                 this.y = 3;
 312                 break;
 313             case 'wide' :
 314                 this.x = 3;
 315                 this.y = 2;
 316                 break;
 317             case 'wide-thin' :
 318                 this.x = 3;
 319                 this.y = 1;
 320                 break;
 321
 322             default :
 323                 break;
 324         }
 325
 326
 327
 328         if(Roo.isTouch){
 329             this.el.on('touchstart', this.onTouchStart, this);
 330             this.el.on('touchmove', this.onTouchMove, this);
 331             this.el.on('touchend', this.onTouchEnd, this);
 332             this.el.on('contextmenu', this.onContextMenu, this);
 333         } else {
 334             this.el.on('mouseenter'  ,this.enter, this);
 335             this.el.on('mouseleave', this.leave, this);
 336         }
 337
 338         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 339             this.parent().bricks.push(this);
 340         }
 341
 342     },
 343
 344     onClick: function(e, el)
 345     {
 346         if(!Roo.isTouch){
 347             return;
 348         }
 349
 350         var time = this.endTimer - this.startTimer;
 351
 352         //alert(time);
 353
 354         if(time < 1000){
 355             return;
 356         }
 357
 358         e.preventDefault();
 359     },
 360
 361     enter: function(e, el)
 362     {
 363         e.preventDefault();
 364
 365         if(!this.isFitContainer){
 366             return;
 367         }
 368
 369         if(this.bgimage.length && this.html.length){
 370             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 371         }
 372     },
 373
 374     leave: 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, true);
 384         }
 385     },
 386
 387     onTouchStart: function(e, el)
 388     {
 389 //        e.preventDefault();
 390
 391         this.touchmoved = false;
 392
 393         if(!this.isFitContainer){
 394             return;
 395         }
 396
 397         if(!this.bgimage.length || !this.html.length){
 398             return;
 399         }
 400
 401         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 402
 403         this.timer = new Date().getTime();
 404
 405     },
 406
 407     onTouchMove: function(e, el)
 408     {
 409         this.touchmoved = true;
 410     },
 411
 412     onContextMenu : function(e,el)
 413     {
 414         e.preventDefault();
 415         e.stopPropagation();
 416         return false;
 417     },
 418
 419     onTouchEnd: function(e, el)
 420     {
 421 //        e.preventDefault();
 422
 423         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 424
 425             this.leave(e,el);
 426
 427             return;
 428         }
 429
 430         if(!this.bgimage.length || !this.html.length){
 431
 432             if(this.href.length){
 433                 window.location.href = this.href;
 434             }
 435
 436             return;
 437         }
 438
 439         if(!this.isFitContainer){
 440             return;
 441         }
 442
 443         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 444
 445         window.location.href = this.href;
 446     }
 447
 448 });
 449
 450
 451
 452