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