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

   1 <html><head><title>../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         }
 121
 122         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 123             </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
 124                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
 125                 </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">,
 126                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bgimage
 127             </span><span class="jsdoc-syntax">});
 128         }
 129
 130         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 131     },
 132
 133     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 134     {
 135         </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">){
 136             </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">);
 137             </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">);
 138         }
 139
 140
 141         </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">);
 142
 143         </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
 144     },
 145
 146     </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 147     {
 148         </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">();
 149
 150         </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">));
 151 </span><span class="jsdoc-comment">//        paragraph.setHeight(paragraph.getWidth());
 152
 153         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 154             </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">();
 155             </span><span class="jsdoc-var">image.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">paragraph.getWidth</span><span class="jsdoc-syntax">());
 156             </span><span class="jsdoc-var">image.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">paragraph.getWidth</span><span class="jsdoc-syntax">());
 157         }
 158
 159     },
 160
 161     </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">)
 162     {
 163         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 164
 165         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 166             </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">);
 167             </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">);
 168         }
 169     },
 170
 171     </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">)
 172     {
 173         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 174
 175         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 176             </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">);
 177             </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">);
 178         }
 179     }
 180
 181 });
 182
 183
 184
 185  </span></code></body></html>