git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_Brick.js.html

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/bootstrap/Brick.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   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 </span><span class="jsdoc-var">Roo.bootstrap.Brick </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  19     </span><span class="jsdoc-var">Roo.bootstrap.Brick.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  20
  21     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  22         </span><span class="jsdoc-comment">// 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         </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  30     </span><span class="jsdoc-syntax">});
  31 };
  32
  33 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Brick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  34
  35     </span><span class="jsdoc-comment">/**
  36      * @cfg {String} title
  37      */
  38     </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  39     </span><span class="jsdoc-comment">/**
  40      * @cfg {String} html
  41      */
  42     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  43     </span><span class="jsdoc-comment">/**
  44      * @cfg {String} bgimage
  45      */
  46     </span><span class="jsdoc-var">bgimage </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  47     </span><span class="jsdoc-comment">/**
  48      * @cfg {String} cls
  49      */
  50     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  51     </span><span class="jsdoc-comment">/**
  52      * @cfg {String} href
  53      */
  54     </span><span class="jsdoc-var">href </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  55     </span><span class="jsdoc-comment">/**
  56      * @cfg {String} video
  57      */
  58     </span><span class="jsdoc-var">video </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  59     </span><span class="jsdoc-comment">/**
  60      * @cfg {Boolean} square
  61      */
  62     </span><span class="jsdoc-var">square </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  63
  64     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  65     {
  66         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'roo-brick'</span><span class="jsdoc-syntax">;
  67
  68         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
  69             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' roo-brick-link'</span><span class="jsdoc-syntax">;
  70         }
  71
  72         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
  73             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' roo-brick-image'</span><span class="jsdoc-syntax">;
  74         }
  75
  76         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.html.length </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
  77             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' roo-brick-center-title'</span><span class="jsdoc-syntax">;
  78         }
  79
  80         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.html.length </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
  81             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' roo-brick-bottom-title'</span><span class="jsdoc-syntax">;
  82         }
  83
  84         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
  85             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
  86         }
  87
  88         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  89             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-string">'a' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  90             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
  91             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  92                 {
  93                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  94                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-brick-paragraph'</span><span class="jsdoc-syntax">,
  95                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
  96                 }
  97             ]
  98         };
  99
 100         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
 101             </span><span class="jsdoc-var">cfg.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">;
 102         }
 103
 104         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn</span><span class="jsdoc-syntax">;
 105
 106         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title.length</span><span class="jsdoc-syntax">){
 107             </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
 108                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'h4'</span><span class="jsdoc-syntax">,
 109                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-brick-title'</span><span class="jsdoc-syntax">,
 110                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title
 111             </span><span class="jsdoc-syntax">});
 112         }
 113
 114         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 115             </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
 116                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'p'</span><span class="jsdoc-syntax">,
 117                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-brick-text'</span><span class="jsdoc-syntax">,
 118                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html
 119             </span><span class="jsdoc-syntax">});
 120         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 121             </span><span class="jsdoc-var">cn.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' hide'</span><span class="jsdoc-syntax">;
 122         }
 123
 124         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 125             </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
 126                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
 127                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-brick-image-view'</span><span class="jsdoc-syntax">,
 128                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bgimage
 129             </span><span class="jsdoc-syntax">});
 130         }
 131
 132         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 133     },
 134
 135     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 136     {
 137         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title.length </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 138             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseenter'  </span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.enter</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 139             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseleave'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.leave</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 140         }
 141
 142         </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 143
 144         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 145             </span><span class="jsdoc-var">this.imageEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-brick-image-view'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 146             </span><span class="jsdoc-var">this.imageEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'load'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onImageLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 147             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 148         }
 149
 150         </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
 151     },
 152
 153     </span><span class="jsdoc-var">onImageLoad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 154     {
 155         </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
 156     },
 157
 158     </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 159     {
 160         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">paragraph </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-brick-paragraph'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 161
 162         </span><span class="jsdoc-var">paragraph.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">paragraph.getWidth</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">paragraph.getPadding</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">));
 163
 164         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 165             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">image </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-brick-image-view'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 166
 167             </span><span class="jsdoc-var">image.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">paragraph.getWidth</span><span class="jsdoc-syntax">());
 168
 169             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.square</span><span class="jsdoc-syntax">){
 170                 </span><span class="jsdoc-var">image.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">paragraph.getWidth</span><span class="jsdoc-syntax">());
 171             }
 172
 173             </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">image.getHeight</span><span class="jsdoc-syntax">());
 174             </span><span class="jsdoc-var">paragraph.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">image.getHeight</span><span class="jsdoc-syntax">());
 175
 176         }
 177
 178     },
 179
 180     </span><span class="jsdoc-var">enter</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)
 181     {
 182         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 183
 184         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 185             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-brick-paragraph'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setOpacity</span><span class="jsdoc-syntax">(0.9, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 186             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-brick-image-view'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setOpacity</span><span class="jsdoc-syntax">(0.1, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 187         }
 188     },
 189
 190     </span><span class="jsdoc-var">leave</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)
 191     {
 192         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 193
 194         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 195             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-brick-paragraph'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setOpacity</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 196             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-brick-image-view'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setOpacity</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 197         }
 198     }
 199
 200 });
 201
 202
 203
 204  </span></code></body></html>