git.roojs.org Git - roojs1/blob - Roo/bootstrap/Brick.js

   1 /*
   2  * - LGPL
   3  *
   4  * element
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Brick
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Brick class
  12  *
  13  * @constructor
  14  * Create a new Brick
  15  * @param {Object} config The config object
  16  */
  17
  18 Roo.bootstrap.Brick = function(config){
  19     Roo.bootstrap.Brick.superclass.constructor.call(this, config);
  20
  21     this.addEvents({
  22         // raw events
  23         /**
  24          * @event click
  25          * When a Brick is click
  26          * @param {Roo.bootstrap.Brick} this
  27          * @param {Roo.EventObject} e
  28          */
  29         "click" : true
  30     });
  31 };
  32
  33 Roo.extend(Roo.bootstrap.Brick, 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} video
  57      */
  58     video : '',
  59     /**
  60      * @cfg {Boolean} square
  61      */
  62     square : true,
  63
  64     getAutoCreate : function()
  65     {
  66         var cls = 'roo-brick';
  67
  68         if(this.href.length){
  69             cls += ' roo-brick-link';
  70         }
  71
  72         if(this.bgimage.length){
  73             cls += ' roo-brick-image';
  74         }
  75
  76         if(!this.html.length && !this.bgimage.length){
  77             cls += ' roo-brick-center-title';
  78         }
  79
  80         if(!this.html.length && this.bgimage.length){
  81             cls += ' roo-brick-bottom-title';
  82         }
  83
  84         if(this.cls){
  85             cls += ' ' + this.cls;
  86         }
  87
  88         var cfg = {
  89             tag: (this.href.length) ? 'a' : 'div',
  90             cls: cls,
  91             cn: [
  92                 {
  93                     tag: 'div',
  94                     cls: 'roo-brick-paragraph',
  95                     cn: []
  96                 }
  97             ]
  98         };
  99
 100         if(this.href.length){
 101             cfg.href = this.href;
 102         }
 103
 104         var cn = cfg.cn[0].cn;
 105
 106         if(this.title.length){
 107             cn.push({
 108                 tag: 'h4',
 109                 cls: 'roo-brick-title',
 110                 html: this.title
 111             });
 112         }
 113
 114         if(this.html.length){
 115             cn.push({
 116                 tag: 'p',
 117                 cls: 'roo-brick-text',
 118                 html: this.html
 119             });
 120         } else {
 121             cn.cls += ' hide';
 122         }
 123
 124         if(this.bgimage.length){
 125             cfg.cn.push({
 126                 tag: 'img',
 127                 cls: 'roo-brick-image-view',
 128                 src: this.bgimage
 129             });
 130         }
 131
 132         return cfg;
 133     },
 134
 135     initEvents: function()
 136     {
 137         if(this.title.length || this.html.length){
 138             this.el.on('mouseenter'  ,this.enter, this);
 139             this.el.on('mouseleave', this.leave, this);
 140         }
 141
 142         Roo.EventManager.onWindowResize(this.resize, this);
 143
 144         if(this.bgimage.length){
 145             this.imageEl = this.el.select('.roo-brick-image-view', true).first();
 146             this.imageEl.on('load', this.onImageLoad, this);
 147             return;
 148         }
 149
 150         this.resize();
 151     },
 152
 153     onImageLoad : function()
 154     {
 155         this.resize();
 156     },
 157
 158     resize : function()
 159     {
 160         var paragraph = this.el.select('.roo-brick-paragraph', true).first();
 161
 162         paragraph.setHeight(paragraph.getWidth() + paragraph.getPadding('tb'));
 163
 164         if(this.bgimage.length){
 165             var image = this.el.select('.roo-brick-image-view', true).first();
 166
 167             image.setWidth(paragraph.getWidth());
 168
 169             if(this.square){
 170                 image.setHeight(paragraph.getWidth());
 171             }
 172
 173             this.el.setHeight(image.getHeight());
 174             paragraph.setHeight(image.getHeight());
 175
 176         }
 177
 178     },
 179
 180     enter: function(e, el)
 181     {
 182         e.preventDefault();
 183
 184         if(this.bgimage.length){
 185             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0.9, true);
 186             this.el.select('.roo-brick-image-view', true).first().setOpacity(0.1, true);
 187         }
 188     },
 189
 190     leave: function(e, el)
 191     {
 192         e.preventDefault();
 193
 194         if(this.bgimage.length){
 195             this.el.select('.roo-brick-paragraph', true).first().setOpacity(0, true);
 196             this.el.select('.roo-brick-image-view', true).first().setOpacity(1, true);
 197         }
 198     }
 199
 200 });
 201
 202
 203
 204