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                 width: 530,
 202                 height: 348
 203             });
 204         }
 205
 206         return cfg;
 207
 208     },
 209
 210     getSplitAutoCreate : function()
 211     {
 212         var cls = 'masonry-brick masonry-brick-split';
 213
 214         if(this.href.length){
 215             cls += ' masonry-brick-link';
 216         }
 217
 218         if(this.bgimage.length){
 219             cls += ' masonry-brick-image';
 220         }
 221
 222         if(this.size){
 223             cls += ' masonry-' + this.size + '-brick';
 224         }
 225
 226         switch (this.placetitle) {
 227             case 'center' :
 228                 cls += ' masonry-center-title';
 229                 break;
 230             case 'bottom' :
 231                 cls += ' masonry-bottom-title';
 232                 break;
 233             default:
 234                 if(!this.bgimage.length){
 235                     cls += ' masonry-center-title';
 236                 }
 237
 238                 if(this.bgimage.length){
 239                     cls += ' masonry-bottom-title';
 240                 }
 241                 break;
 242         }
 243
 244         if(this.cls){
 245             cls += ' ' + this.cls;
 246         }
 247
 248         var cfg = {
 249             tag: (this.href.length) ? 'a' : 'div',
 250             cls: cls,
 251             cn: [
 252                 {
 253                     tag: 'div',
 254                     cls: 'masonry-brick-split-head',
 255                     cn: [
 256                         {
 257                             tag: 'div',
 258                             cls: 'masonry-brick-paragraph',
 259                             cn: []
 260                         }
 261                     ]
 262                 },
 263                 {
 264                     tag: 'div',
 265                     cls: 'masonry-brick-split-body',
 266                     cn: []
 267                 }
 268             ]
 269         };
 270
 271         if(this.href.length){
 272             cfg.href = this.href;
 273         }
 274
 275         if(this.title.length){
 276             cfg.cn[0].cn[0].cn.push({
 277                 tag: 'h4',
 278                 cls: 'masonry-brick-title',
 279                 html: this.title
 280             });
 281         }
 282
 283         if(this.html.length){
 284             cfg.cn[1].cn.push({
 285                 tag: 'p',
 286                 cls: 'masonry-brick-text',
 287                 html: this.html
 288             });
 289         }
 290
 291         if(this.bgimage.length){
 292             cfg.cn[0].cn.push({
 293                 tag: 'img',
 294                 cls: 'masonry-brick-image-view',
 295                 src: this.bgimage
 296             });
 297         }
 298
 299         if(this.videourl.length){
 300             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 301             // youtube support only?
 302             cfg.cn[0].cn.cn.push({
 303                 tag: 'iframe',
 304                 cls: 'masonry-brick-image-view',
 305                 src: vurl,
 306                 frameborder : 0,
 307                 allowfullscreen : true
 308             });
 309         }
 310
 311         return cfg;
 312     },
 313
 314     initEvents: function()
 315     {
 316         switch (this.size) {
 317             case 'xs' :
 318                 this.x = 1;
 319                 this.y = 1;
 320                 break;
 321             case 'sm' :
 322                 this.x = 2;
 323                 this.y = 2;
 324                 break;
 325             case 'md' :
 326             case 'md-left' :
 327             case 'md-right' :
 328                 this.x = 3;
 329                 this.y = 3;
 330                 break;
 331             case 'tall' :
 332                 this.x = 2;
 333                 this.y = 3;
 334                 break;
 335             case 'wide' :
 336                 this.x = 3;
 337                 this.y = 2;
 338                 break;
 339             case 'wide-thin' :
 340                 this.x = 3;
 341                 this.y = 1;
 342                 break;
 343
 344             default :
 345                 break;
 346         }
 347
 348         if(Roo.isTouch){
 349             this.el.on('touchstart', this.onTouchStart, this);
 350             this.el.on('touchmove', this.onTouchMove, this);
 351             this.el.on('touchend', this.onTouchEnd, this);
 352             this.el.on('contextmenu', this.onContextMenu, this);
 353         } else {
 354             this.el.on('mouseenter'  ,this.enter, this);
 355             this.el.on('mouseleave', this.leave, this);
 356             this.el.on('click', this.onClick, this);
 357         }
 358
 359         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 360             this.parent().bricks.push(this);
 361         }
 362
 363     },
 364
 365     onClick: function(e, el)
 366     {
 367         var time = this.endTimer - this.startTimer;
 368         // Roo.log(e.preventDefault());
 369         if(Roo.isTouch){
 370             if(time > 1000){
 371                 e.preventDefault();
 372                 return;
 373             }
 374         }
 375
 376         if(!this.preventDefault){
 377             return;
 378         }
 379
 380         e.preventDefault();
 381
 382         if (this.activeClass != '') {
 383             this.selectBrick();
 384         }
 385
 386         this.fireEvent('click', this, e);
 387     },
 388
 389     enter: function(e, el)
 390     {
 391         e.preventDefault();
 392
 393         if(!this.isFitContainer || this.maskInverse || this.videourl.length){
 394             return;
 395         }
 396
 397         if(this.bgimage.length && this.html.length){
 398             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 399         }
 400     },
 401
 402     leave: function(e, el)
 403     {
 404         e.preventDefault();
 405
 406         if(!this.isFitContainer || this.maskInverse  || this.videourl.length){
 407             return;
 408         }
 409
 410         if(this.bgimage.length && this.html.length){
 411             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 412         }
 413     },
 414
 415     onTouchStart: function(e, el)
 416     {
 417 //        e.preventDefault();
 418
 419         this.touchmoved = false;
 420
 421         if(!this.isFitContainer){
 422             return;
 423         }
 424
 425         if(!this.bgimage.length || !this.html.length){
 426             return;
 427         }
 428
 429         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 430
 431         this.timer = new Date().getTime();
 432
 433     },
 434
 435     onTouchMove: function(e, el)
 436     {
 437         this.touchmoved = true;
 438     },
 439
 440     onContextMenu : function(e,el)
 441     {
 442         e.preventDefault();
 443         e.stopPropagation();
 444         return false;
 445     },
 446
 447     onTouchEnd: function(e, el)
 448     {
 449 //        e.preventDefault();
 450
 451         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 452
 453             this.leave(e,el);
 454
 455             return;
 456         }
 457
 458         if(!this.bgimage.length || !this.html.length){
 459
 460             if(this.href.length){
 461                 window.location.href = this.href;
 462             }
 463
 464             return;
 465         }
 466
 467         if(!this.isFitContainer){
 468             return;
 469         }
 470
 471         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 472
 473         window.location.href = this.href;
 474     },
 475
 476     //selection on single brick only
 477     selectBrick : function() {
 478
 479         if (!this.parentId) {
 480             return;
 481         }
 482
 483         var m = Roo.bootstrap.LayoutMasonry.get(this.parentId);
 484         var index = m.selectedBrick.indexOf(this.id);
 485
 486         if ( index > -1) {
 487             m.selectedBrick.splice(index,1);
 488             this.el.removeClass(this.activeClass);
 489             return;
 490         }
 491
 492         for(var i = 0; i < m.selectedBrick.length; i++) {
 493             var b = Roo.bootstrap.MasonryBrick.get(m.selectedBrick[i]);
 494             b.el.removeClass(b.activeClass);
 495         }
 496
 497         m.selectedBrick = [];
 498
 499         m.selectedBrick.push(this.id);
 500         this.el.addClass(this.activeClass);
 501         return;
 502     },
 503
 504     isSelected : function(){
 505         return this.el.hasClass(this.activeClass);
 506
 507     }
 508 });
 509
 510 Roo.apply(Roo.bootstrap.MasonryBrick, {
 511
 512     //groups: {},
 513     groups : new Roo.util.MixedCollection(false, function(o) { return o.el.id; }),
 514      /**
 515     * register a Masonry Brick
 516     * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
 517     */
 518
 519     register : function(brick)
 520     {
 521         //this.groups[brick.id] = brick;
 522         this.groups.add(brick.id, brick);
 523     },
 524     /**
 525     * fetch a  masonry brick based on the masonry brick ID
 526     * @param {string} the masonry brick to add
 527     * @returns {Roo.bootstrap.MasonryBrick} the masonry brick
 528     */
 529
 530     get: function(brick_id)
 531     {
 532         // if (typeof(this.groups[brick_id]) == 'undefined') {
 533         //     return false;
 534         // }
 535         // return this.groups[brick_id] ;
 536
 537         if(this.groups.key(brick_id)) {
 538             return this.groups.key(brick_id);
 539         }
 540
 541         return false;
 542     }
 543
 544
 545
 546 });
 547
 548