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