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             default :
 185                 break;
 186         }
 187
 188
 189
 190         if(Roo.isTouch){
 191             this.el.on('touchstart', this.onTouchStart, this);
 192             this.el.on('touchmove', this.onTouchMove, this);
 193             this.el.on('touchend', this.onTouchEnd, this);
 194         } else {
 195             this.el.on('mouseenter'  ,this.enter, this);
 196             this.el.on('mouseleave', this.leave, this);
 197         }
 198
 199         if (typeof(this.parent().bricks) == 'object' && this.parent().bricks != null) {
 200             this.parent().bricks.push(this);
 201         }
 202
 203     },
 204
 205     onClick: function(e, el)
 206     {
 207         alert('click');
 208
 209         if(!Roo.isTouch){
 210             return;
 211         }
 212
 213         var time = this.endTimer - this.startTimer;
 214
 215         alert(time);
 216
 217         if(time < 1000){
 218             return;
 219         }
 220
 221         e.preventDefault();
 222     },
 223
 224     enter: function(e, el)
 225     {
 226         e.preventDefault();
 227
 228         if(this.bgimage.length && this.html.length){
 229             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 230         }
 231     },
 232
 233     leave: function(e, el)
 234     {
 235         e.preventDefault();
 236
 237         if(this.bgimage.length && this.html.length){
 238             this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 239         }
 240     },
 241
 242     onTouchStart: function(e, el)
 243     {
 244 //        e.preventDefault();
 245
 246         if(!this.bgimage.length || !this.html.length){
 247             return;
 248         }
 249
 250         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0.9, true);
 251
 252         this.timer = new Date().getTime();
 253
 254         this.touchmoved = false;
 255     },
 256
 257     onTouchMove: function(e, el)
 258     {
 259         this.touchmoved = true;
 260     },
 261
 262     onTouchEnd: function(e, el)
 263     {
 264 //        if(!this.touchmoved){
 265             e.preventDefault();
 266 //        }
 267
 268         if(!this.bgimage.length || !this.html.length){
 269
 270             if(this.href.length){
 271                 window.location.href = this.href;
 272             }
 273
 274             return;
 275         }
 276
 277         this.el.select('.masonry-brick-paragraph', true).first().setOpacity(0, true);
 278
 279         alert(this.touchmoved ? 'yes' : 'no');
 280
 281         if((new Date().getTime() - this.timer > 1000) || !this.href.length || this.touchmoved){
 282             return;
 283         }
 284
 285         window.location.href = this.href;
 286     }
 287
 288 });
 289
 290
 291
 292