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.html.length){
  91             cls += ' masonry-brick-mask';
  92         }
  93
  94         if(this.size){
  95             cls += ' masonry-' + this.size + '-brick';
  96         }
  97
  98         if(this.placetitle.length){
  99
 100             switch (this.placetitle) {
 101                 case 'center' :
 102                     cls += ' masonry-center-title';
 103                     break;
 104                 case 'bottom' :
 105                     cls += ' masonry-bottom-title';
 106                     break;
 107                 default:
 108                     break;
 109             }
 110
 111         } else {
 112             if(!this.html.length && !this.bgimage.length){
 113                 cls += ' masonry-center-title';
 114             }
 115
 116             if(!this.html.length && this.bgimage.length){
 117                 cls += ' masonry-bottom-title';
 118             }
 119         }
 120
 121         if(this.cls){
 122             cls += ' ' + this.cls;
 123         }
 124
 125         var cfg = {
 126             tag: (this.href.length) ? 'a' : 'div',
 127             cls: cls,
 128             cn: [
 129                 {
 130                     tag: 'div',
 131                     cls: 'masonry-brick-paragraph',
 132                     cn: []
 133                 }
 134             ]
 135         };
 136
 137         if(this.href.length){
 138             cfg.href = this.href;
 139         }
 140
 141         var cn = cfg.cn[0].cn;
 142
 143         if(this.title.length){
 144             cn.push({
 145                 tag: 'h4',
 146                 cls: 'masonry-brick-title',
 147                 html: this.title
 148             });
 149         }
 150
 151         if(this.html.length){
 152             cn.push({
 153                 tag: 'p',
 154                 cls: 'masonry-brick-text',
 155                 html: this.html
 156             });
 157         }
 158         if (!this.title.length && !this.html.length) {
 159             cfg.cn[0].cls += ' hide';
 160         }
 161
 162         if(this.bgimage.length){
 163             cfg.cn.push({
 164                 tag: 'img',
 165                 cls: 'masonry-brick-image-view',
 166                 src: this.bgimage
 167             });
 168         }
 169         if(this.videourl.length){
 170             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 171             // youtube support only?
 172             cfg.cn.push({
 173                 tag: 'iframe',
 174                 cls: 'masonry-brick-image-view',
 175                 src: vurl,
 176                 frameborder : 0,
 177                 allowfullscreen : true
 178             });
 179
 180
 181         }
 182
 183         cfg.cn.push({
 184             tag: 'div',
 185             cls: 'masonry-brick-mask'
 186         });
 187
 188         return cfg;
 189
 190     },
 191
 192     getSplitAutoCreate : function()
 193     {
 194         var cls = 'masonry-brick masonry-brick-split';
 195
 196         if(this.href.length){
 197             cls += ' masonry-brick-link';
 198         }
 199
 200         if(this.bgimage.length){
 201             cls += ' masonry-brick-image';
 202         }
 203
 204         if(this.size){
 205             cls += ' masonry-' + this.size + '-brick';
 206         }
 207
 208         switch (this.placetitle) {
 209             case 'center' :
 210                 cls += ' masonry-center-title';
 211                 break;
 212             case 'bottom' :
 213                 cls += ' masonry-bottom-title';
 214                 break;
 215             default:
 216                 if(!this.bgimage.length){
 217                     cls += ' masonry-center-title';
 218                 }
 219
 220                 if(this.bgimage.length){
 221                     cls += ' masonry-bottom-title';
 222                 }
 223                 break;
 224         }
 225
 226         if(this.cls){
 227             cls += ' ' + this.cls;
 228         }
 229
 230         var cfg = {
 231             tag: (this.href.length) ? 'a' : 'div',
 232             cls: cls,
 233             cn: [
 234                 {
 235                     tag: 'div',
 236                     cls: 'masonry-brick-split-head',
 237                     cn: [
 238                         {
 239                             tag: 'div',
 240                             cls: 'masonry-brick-paragraph',
 241                             cn: []
 242                         }
 243                     ]
 244                 },
 245                 {
 246                     tag: 'div',
 247                     cls: 'masonry-brick-split-body',
 248                     cn: []
 249                 }
 250             ]
 251         };
 252
 253         if(this.href.length){
 254             cfg.href = this.href;
 255         }
 256
 257         if(this.title.length){
 258             cfg.cn[0].cn[0].cn.push({
 259                 tag: 'h4',
 260                 cls: 'masonry-brick-title',
 261                 html: this.title
 262             });
 263         }
 264
 265         if(this.html.length){
 266             cfg.cn[1].cn.push({
 267                 tag: 'p',
 268                 cls: 'masonry-brick-text',
 269                 html: this.html
 270             });
 271         }
 272
 273         if(this.bgimage.length){
 274             cfg.cn[0].cn.push({
 275                 tag: 'img',
 276                 cls: 'masonry-brick-image-view',
 277                 src: this.bgimage
 278             });
 279         }
 280
 281         if(this.videourl.length){
 282             var vurl = this.videourl.replace(/https:\/\/youtu\.be/, 'https://www.youtube.com/embed/');
 283             // youtube support only?
 284             cfg.cn[0].cn.cn.push({
 285                 tag: 'iframe',
 286                 cls: 'masonry-brick-image-view',
 287                 src: vurl,
 288                 frameborder : 0,
 289                 allowfullscreen : true
 290             });
 291         }
 292
 293         return cfg;
 294     },
 295
 296     initEvents: function()
 297     {
 298         switch (this.size) {
 299             case 'xs' :
 300                 this.x = 1;
 301                 this.y = 1;
 302                 break;
 303             case 'sm' :
 304                 this.x = 2;
 305                 this.y = 2;
 306                 break;
 307             case 'md' :
 308             case 'md-left' :
 309             case 'md-right' :
 310                 this.x = 3;
 311                 this.y = 3;
 312                 break;
 313             case 'tall' :
 314                 this.x = 2;
 315                 this.y = 3;
 316                 break;
 317             case 'wide' :
 318                 this.x = 3;
 319                 this.y = 2;
 320                 break;
 321             case 'wide-thin' :
 322                 this.x = 3;
 323                 this.y = 1;
 324                 break;
 325
 326             default :
 327                 break;
 328         }
 329
 330
 331
 332         if(Roo.isTouch){
 333             this.el.on('touchstart', this.onTouchStart, this);
 334             this.el.on('touchmove', this.onTouchMove, this);
 335             this.el.on('touchend', this.onTouchEnd, this);
 336             this.el.on('contextmenu', this.onContextMenu, this);
 337         } else {
 338             this.el.on('mouseenter'  ,this.enter, this);
 339             this.el.on('mouseleave', this.leave, this);
 340         }
 341
 342         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 343             this.parent().bricks.push(this);
 344         }
 345
 346     },
 347
 348     onClick: function(e, el)
 349     {
 350         if(!Roo.isTouch){
 351             return;
 352         }
 353
 354         var time = this.endTimer - this.startTimer;
 355
 356         //alert(time);
 357
 358         if(time < 1000){
 359             return;
 360         }
 361
 362         e.preventDefault();
 363     },
 364
 365     enter: function(e, el)
 366     {
 367         e.preventDefault();
 368
 369         if(!this.isFitContainer){
 370             return;
 371         }
 372
 373         if(this.bgimage.length && this.html.length){
 374             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 375         }
 376     },
 377
 378     leave: function(e, el)
 379     {
 380         e.preventDefault();
 381
 382         if(!this.isFitContainer){
 383             return;
 384         }
 385
 386         if(this.bgimage.length && this.html.length){
 387             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 388         }
 389     },
 390
 391     onTouchStart: function(e, el)
 392     {
 393 //        e.preventDefault();
 394
 395         this.touchmoved = false;
 396
 397         if(!this.isFitContainer){
 398             return;
 399         }
 400
 401         if(!this.bgimage.length || !this.html.length){
 402             return;
 403         }
 404
 405         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 406
 407         this.timer = new Date().getTime();
 408
 409     },
 410
 411     onTouchMove: function(e, el)
 412     {
 413         this.touchmoved = true;
 414     },
 415
 416     onContextMenu : function(e,el)
 417     {
 418         e.preventDefault();
 419         e.stopPropagation();
 420         return false;
 421     },
 422
 423     onTouchEnd: function(e, el)
 424     {
 425 //        e.preventDefault();
 426
 427         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 428
 429             this.leave(e,el);
 430
 431             return;
 432         }
 433
 434         if(!this.bgimage.length || !this.html.length){
 435
 436             if(this.href.length){
 437                 window.location.href = this.href;
 438             }
 439
 440             return;
 441         }
 442
 443         if(!this.isFitContainer){
 444             return;
 445         }
 446
 447         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 448
 449         window.location.href = this.href;
 450     }
 451
 452 });
 453
 454
 455
 456