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
  20     Roo.bootstrap.MasonryBrick.superclass.constructor.call(this, config);
  21
  22     Roo.bootstrap.MasonryBrick.register(this);
  23
  24     this.addEvents({
  25         // raw events
  26         /**
  27          * @event click
  28          * When a MasonryBrick is clcik
  29          * @param {Roo.bootstrap.MasonryBrick} this
  30          * @param {Roo.EventObject} e
  31          */
  32         "click" : true
  33     });
  34 };
  35
  36 Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
  37
  38     /**
  39      * @cfg {String} title
  40      */
  41     title : '',
  42     /**
  43      * @cfg {String} html
  44      */
  45     html : '',
  46     /**
  47      * @cfg {String} bgimage
  48      */
  49     bgimage : '',
  50     /**
  51      * @cfg {String} videourl
  52      */
  53     videourl : '',
  54     /**
  55      * @cfg {String} cls
  56      */
  57     cls : '',
  58     /**
  59      * @cfg {String} href
  60      */
  61     href : '',
  62     /**
  63      * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
  64      */
  65     size : 'xs',
  66
  67     /**
  68      * @cfg {String} placetitle (center|bottom)
  69      */
  70     placetitle : '',
  71
  72     /**
  73      * @cfg {Boolean} isFitContainer defalut true
  74      */
  75     isFitContainer : true,
  76
  77     /**
  78      * @cfg {Boolean} preventDefault defalut false
  79      */
  80     preventDefault : false,
  81
  82     /**
  83      * @cfg {Boolean} inverse defalut false
  84      */
  85     maskInverse : false,
  86
  87     getAutoCreate : function()
  88     {
  89         if(!this.isFitContainer){
  90             return this.getSplitAutoCreate();
  91         }
  92
  93         var cls = 'masonry-brick masonry-brick-full';
  94
  95         if(this.href.length){
  96             cls += ' masonry-brick-link';
  97         }
  98
  99         if(this.bgimage.length){
 100             cls += ' masonry-brick-image';
 101         }
 102
 103         if(this.maskInverse){
 104             cls += ' mask-inverse';
 105         }
 106
 107         if(!this.html.length && !this.maskInverse && !this.videourl.length){
 108             cls += ' enable-mask';
 109         }
 110
 111         if(this.size){
 112             cls += ' masonry-' + this.size + '-brick';
 113         }
 114
 115         if(this.placetitle.length){
 116
 117             switch (this.placetitle) {
 118                 case 'center' :
 119                     cls += ' masonry-center-title';
 120                     break;
 121                 case 'bottom' :
 122                     cls += ' masonry-bottom-title';
 123                     break;
 124                 default:
 125                     break;
 126             }
 127
 128         } else {
 129             if(!this.html.length && !this.bgimage.length){
 130                 cls += ' masonry-center-title';
 131             }
 132
 133             if(!this.html.length && this.bgimage.length){
 134                 cls += ' masonry-bottom-title';
 135             }
 136         }
 137
 138         if(this.cls){
 139             cls += ' ' + this.cls;
 140         }
 141
 142         var cfg = {
 143             tag: (this.href.length) ? 'a' : 'div',
 144             cls: cls,
 145             cn: [
 146                 {
 147                     tag: 'div',
 148                     cls: 'masonry-brick-mask'
 149                 },
 150                 {
 151                     tag: 'div',
 152                     cls: 'masonry-brick-paragraph',
 153                     cn: []
 154                 }
 155             ]
 156         };
 157
 158         if(this.href.length){
 159             cfg.href = this.href;
 160         }
 161
 162         var cn = cfg.cn[1].cn;
 163
 164         if(this.title.length){
 165             cn.push({
 166                 tag: 'h4',
 167                 cls: 'masonry-brick-title',
 168                 html: this.title
 169             });
 170         }
 171
 172         if(this.html.length){
 173             cn.push({
 174                 tag: 'p',
 175                 cls: 'masonry-brick-text',
 176                 html: this.html
 177             });
 178         }
 179
 180         if (!this.title.length && !this.html.length) {
 181             cfg.cn[1].cls += ' hide';
 182         }
 183
 184         if(this.bgimage.length){
 185             cfg.cn.push({
 186                 tag: 'img',
 187                 cls: 'masonry-brick-image-view',
 188                 src: this.bgimage
 189             });
 190         }
 191
 192         if(this.videourl.length){
 193             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 194             // youtube support only?
 195             cfg.cn.push({
 196                 tag: 'iframe',
 197                 cls: 'masonry-brick-image-view',
 198                 src: vurl,
 199                 frameborder : 0,
 200                 allowfullscreen : true,
 201                 style: 'order: 5px dotted green;'
 202             });
 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         }
 311
 312         return cfg;
 313     },
 314
 315     initEvents: function()
 316     {
 317         switch (this.size) {
 318             case 'xs' :
 319                 this.x = 1;
 320                 this.y = 1;
 321                 break;
 322             case 'sm' :
 323                 this.x = 2;
 324                 this.y = 2;
 325                 break;
 326             case 'md' :
 327             case 'md-left' :
 328             case 'md-right' :
 329                 this.x = 3;
 330                 this.y = 3;
 331                 break;
 332             case 'tall' :
 333                 this.x = 2;
 334                 this.y = 3;
 335                 break;
 336             case 'wide' :
 337                 this.x = 3;
 338                 this.y = 2;
 339                 break;
 340             case 'wide-thin' :
 341                 this.x = 3;
 342                 this.y = 1;
 343                 break;
 344
 345             default :
 346                 break;
 347         }
 348
 349         if(Roo.isTouch){
 350             this.el.on('touchstart', this.onTouchStart, this);
 351             this.el.on('touchmove', this.onTouchMove, this);
 352             this.el.on('touchend', this.onTouchEnd, this);
 353             this.el.on('contextmenu', this.onContextMenu, this);
 354         } else {
 355             this.el.on('mouseenter'  ,this.enter, this);
 356             this.el.on('mouseleave', this.leave, this);
 357             this.el.on('click', this.onClick, this);
 358         }
 359
 360         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 361             this.parent().bricks.push(this);
 362         }
 363
 364     },
 365
 366     onClick: function(e, el)
 367     {
 368         var time = this.endTimer - this.startTimer;
 369         // Roo.log(e.preventDefault());
 370         if(Roo.isTouch){
 371             if(time > 1000){
 372                 e.preventDefault();
 373                 return;
 374             }
 375         }
 376
 377         if(!this.preventDefault){
 378             return;
 379         }
 380
 381         e.preventDefault();
 382
 383         if (this.activeClass != '') {
 384             this.selectBrick();
 385         }
 386
 387         this.fireEvent('click', this, e);
 388     },
 389
 390     enter: function(e, el)
 391     {
 392         e.preventDefault();
 393
 394         if(!this.isFitContainer || this.maskInverse || this.videourl.length){
 395             return;
 396         }
 397
 398         if(this.bgimage.length && this.html.length){
 399             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 400         }
 401     },
 402
 403     leave: function(e, el)
 404     {
 405         e.preventDefault();
 406
 407         if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
 408             return;
 409         }
 410
 411         if(this.bgimage.length && this.html.length){
 412             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 413         }
 414     },
 415
 416     onTouchStart: function(e, el)
 417     {
 418 //        e.preventDefault();
 419
 420         this.touchmoved = false;
 421
 422         if(!this.isFitContainer){
 423             return;
 424         }
 425
 426         if(!this.bgimage.length || !this.html.length){
 427             return;
 428         }
 429
 430         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 431
 432         this.timer = new Date().getTime();
 433
 434     },
 435
 436     onTouchMove: function(e, el)
 437     {
 438         this.touchmoved = true;
 439     },
 440
 441     onContextMenu : function(e,el)
 442     {
 443         e.preventDefault();
 444         e.stopPropagation();
 445         return false;
 446     },
 447
 448     onTouchEnd: function(e, el)
 449     {
 450 //        e.preventDefault();
 451
 452         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 453
 454             this.leave(e,el);
 455
 456             return;
 457         }
 458
 459         if(!this.bgimage.length || !this.html.length){
 460
 461             if(this.href.length){
 462                 window.location.href = this.href;
 463             }
 464
 465             return;
 466         }
 467
 468         if(!this.isFitContainer){
 469             return;
 470         }
 471
 472         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 473
 474         window.location.href = this.href;
 475     },
 476
 477     //selection on single brick only
 478     selectBrick : function() {
 479
 480         if (!this.parentId) {
 481             return;
 482         }
 483
 484         var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
 485         var index = m.selectedBrick.indexOf(this.id);
 486
 487         if ( index > -1) {
 488             m.selectedBrick.splice(index,1);
 489             this.el.removeClass(this.activeClass);
 490             return;
 491         }
 492
 493         for(var i = 0; i < m.selectedBrick.length; i++) {
 494             var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
 495             b.el.removeClass(b.activeClass);
 496         }
 497
 498         m.selectedBrick = [];
 499
 500         m.selectedBrick.push(this.id);
 501         this.el.addClass(this.activeClass);
 502         return;
 503     },
 504
 505     isSelected : function(){
 506         return this.el.hasClass(this.activeClass);
 507
 508     }
 509 });
 510
 511 Roo.apply(Roo.bootstrap.MasonryBrick, {
 512
 513     //groups: {},
 514     groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
 515      /**
 516     * register a Masonry Brick
 517     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
 518     */
 519
 520     register : function(brick)
 521     {
 522         //this.groups[brick.id] = brick;
 523         this.groups.add(brick.id, brick);
 524     },
 525     /**
 526     * fetch a  masonry brick based on the masonry brick ID
 527     * @param {string} the masonry brick to add
 528     * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
 529     */
 530
 531     get: function(brick_id)
 532     {
 533         // if (typeof(this.groups[brick_id]) == 'undefined') {
 534         //     return false;
 535         // }
 536         // return this.groups[brick_id] ;
 537
 538         if(this.groups.key(brick_id)) {
 539             return this.groups.key(brick_id);
 540         }
 541
 542         return false;
 543     }
 544
 545
 546
 547 });
 548
 549