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