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

   1 <html><head><title>../roojs1/Roo/bootstrap/MasonryBrick.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.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 </span><span class="jsdoc-var">Roo.bootstrap.MasonryBrick </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.MasonryBrick.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 MasonryBrick is clcik
  26          * @param {Roo.bootstrap.MasonryBrick} 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.MasonryBrick</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     </span><span class="jsdoc-comment">/**
  64      * @cfg {String} (xs|sm|md) size
  65      */
  66     </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">,
  67
  68     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  69     {
  70         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'masonry-brick'</span><span class="jsdoc-syntax">;
  71
  72         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
  73             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-brick-link'</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.bgimage.length</span><span class="jsdoc-syntax">){
  77             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-brick-image'</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.size</span><span class="jsdoc-syntax">){
  81             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.size </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-brick'</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">'masonry-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">'masonry-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">'masonry-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">'masonry-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-var">this.intSize </span><span class="jsdoc-syntax">= 1;
 136
 137         </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.size</span><span class="jsdoc-syntax">) {
 138             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">:
 139                 </span><span class="jsdoc-var">this.intSize </span><span class="jsdoc-syntax">= 1;
 140                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 141             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'sm' </span><span class="jsdoc-syntax">:
 142                 </span><span class="jsdoc-var">this.intSize </span><span class="jsdoc-syntax">= 2;
 143                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 144             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md' </span><span class="jsdoc-syntax">:
 145                 </span><span class="jsdoc-var">this.intSize </span><span class="jsdoc-syntax">= 3;
 146                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 147             </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
 148                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 149         }
 150
 151         </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">);
 152         </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">);
 153         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.bricks</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.bricks </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">) {
 154             </span><span class="jsdoc-var">this.parent</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.bricks.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 155         }
 156
 157     },
 158
 159     </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">)
 160     {
 161         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 162
 163         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 164             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.masonry-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">);
 165         }
 166     },
 167
 168     </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">)
 169     {
 170         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 171
 172         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 173             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.masonry-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">);
 174         }
 175     }
 176
 177 });
 178
 179
 180
 181  </span></code></body></html>