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