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