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} cls
  49      */
  50     cls : '',
  51     /**
  52      * @cfg {String} href
  53      */
  54     href : '',
  55     /**
  56      * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
  57      */
  58     size : 'xs',
  59
  60     /**
  61      * @cfg {String} (center|bottom) placetitle
  62      */
  63     placetitle : '',
  64
  65     getAutoCreate : function()
  66     {
  67         var cls = 'masonry-brick';
  68
  69         if(this.href.length){
  70             cls += ' masonry-brick-link';
  71         }
  72
  73         if(this.bgimage.length){
  74             cls += ' masonry-brick-image';
  75         }
  76
  77         if(this.size){
  78             cls += ' masonry-' + this.size + '-brick';
  79         }
  80
  81         if(this.placetitle.length){
  82
  83             switch (this.placetitle) {
  84                 case 'center' :
  85                     cls += ' masonry-center-title';
  86                     break;
  87                 case 'bottom' :
  88                     cls += ' masonry-bottom-title';
  89                     break;
  90                 default:
  91                     break;
  92             }
  93
  94         } else {
  95             if(!this.html.length && !this.bgimage.length){
  96                 cls += ' masonry-center-title';
  97             }
  98
  99             if(!this.html.length && this.bgimage.length){
 100                 cls += ' masonry-bottom-title';
 101             }
 102         }
 103
 104         if(this.cls){
 105             cls += ' ' + this.cls;
 106         }
 107
 108         var cfg = {
 109             tag: (this.href.length) ? 'a' : 'div',
 110             cls: cls,
 111             cn: [
 112                 {
 113                     tag: 'div',
 114                     cls: 'masonry-brick-paragraph',
 115                     cn: []
 116                 }
 117             ]
 118         };
 119
 120         if(this.href.length){
 121             cfg.href = this.href;
 122         }
 123
 124         var cn = cfg.cn[0].cn;
 125
 126         if(this.title.length){
 127             cn.push({
 128                 tag: 'h4',
 129                 cls: 'masonry-brick-title',
 130                 html: this.title
 131             });
 132         }
 133
 134         if(this.html.length){
 135             cn.push({
 136                 tag: 'p',
 137                 cls: 'masonry-brick-text',
 138                 html: this.html
 139             });
 140         }
 141
 142         if(this.bgimage.length){
 143             cfg.cn.push({
 144                 tag: 'img',
 145                 cls: 'masonry-brick-image-view',
 146                 src: this.bgimage
 147             });
 148         }
 149
 150         return cfg;
 151
 152     },
 153
 154     initEvents: function()
 155     {
 156         switch (this.size) {
 157             case 'xs' :
 158 //                this.intSize = 1;
 159                 this.x = 1;
 160                 this.y = 1;
 161                 break;
 162             case 'sm' :
 163 //                this.intSize = 2;
 164                 this.x = 2;
 165                 this.y = 2;
 166                 break;
 167             case 'md' :
 168             case 'md-left' :
 169             case 'md-right' :
 170 //                this.intSize = 3;
 171                 this.x = 3;
 172                 this.y = 3;
 173                 break;
 174             case 'tall' :
 175 //                this.intSize = 3;
 176                 this.x = 2;
 177                 this.y = 3;
 178                 break;
 179             case 'wide' :
 180 //                this.intSize = 3;
 181                 this.x = 3;
 182                 this.y = 2;
 183                 break;
 184             case 'wide-thin' :
 185 //                this.intSize = 3;
 186                 this.x = 3;
 187                 this.y = 1;
 188                 break;
 189
 190             default :
 191                 break;
 192         }
 193
 194
 195
 196         if(Roo.isTouch){
 197             this.el.on('touchstart', this.onTouchStart, this);
 198             this.el.on('touchmove', this.onTouchMove, this);
 199             this.el.on('touchend', this.onTouchEnd, this);
 200         } else {
 201             this.el.on('mouseenter'  ,this.enter, this);
 202             this.el.on('mouseleave', this.leave, this);
 203         }
 204
 205         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 206             this.parent().bricks.push(this);
 207         }
 208
 209     },
 210
 211     onClick: function(e, el)
 212     {
 213         alert('click');
 214
 215         if(!Roo.isTouch){
 216             return;
 217         }
 218
 219         var time = this.endTimer - this.startTimer;
 220
 221         alert(time);
 222
 223         if(time < 1000){
 224             return;
 225         }
 226
 227         e.preventDefault();
 228     },
 229
 230     enter: function(e, el)
 231     {
 232         e.preventDefault();
 233
 234         if(this.bgimage.length && this.html.length){
 235             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 236         }
 237     },
 238
 239     leave: function(e, el)
 240     {
 241         e.preventDefault();
 242
 243         if(this.bgimage.length && this.html.length){
 244             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 245         }
 246     },
 247
 248     onTouchStart: function(e, el)
 249     {
 250 //        e.preventDefault();
 251
 252         if(!this.bgimage.length || !this.html.length){
 253             return;
 254         }
 255
 256         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 257
 258         this.timer = new Date().getTime();
 259
 260         this.touchmoved = false;
 261     },
 262
 263     onTouchMove: function(e, el)
 264     {
 265         this.touchmoved = true;
 266     },
 267
 268     onTouchEnd: function(e, el)
 269     {
 270 //        e.preventDefault();
 271
 272         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 273
 274             this.leave(e,el);
 275
 276             return;
 277         }
 278
 279         if(!this.bgimage.length || !this.html.length){
 280
 281             if(this.href.length){
 282                 window.location.href = this.href;
 283             }
 284
 285             return;
 286         }
 287
 288         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 289
 290         window.location.href = this.href;
 291     }
 292
 293 });
 294
 295
 296
 297