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} videourl
  49      */
  50     </span><span class="jsdoc-var">videourl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  51     </span><span class="jsdoc-comment">/**
  52      * @cfg {String} cls
  53      */
  54     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  55     </span><span class="jsdoc-comment">/**
  56      * @cfg {String} href
  57      */
  58     </span><span class="jsdoc-var">href </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  59     </span><span class="jsdoc-comment">/**
  60      * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
  61      */
  62     </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">,
  63
  64     </span><span class="jsdoc-comment">/**
  65      * @cfg {String} (center|bottom) placetitle
  66      */
  67     </span><span class="jsdoc-var">placetitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  68
  69     </span><span class="jsdoc-comment">/**
  70      * @cfg {Boolean} isFitContainer defalut true
  71      */
  72     </span><span class="jsdoc-var">isFitContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  73
  74     </span><span class="jsdoc-comment">/**
  75      * @cfg {Boolean} preventDefault defalut false
  76      */
  77     </span><span class="jsdoc-var">preventDefault </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  78
  79     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  80     {
  81         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isFitContainer</span><span class="jsdoc-syntax">){
  82             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getSplitAutoCreate</span><span class="jsdoc-syntax">();
  83         }
  84
  85         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'masonry-brick masonry-brick-full'</span><span class="jsdoc-syntax">;
  86
  87         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
  88             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-brick-link'</span><span class="jsdoc-syntax">;
  89         }
  90
  91         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
  92             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-brick-image'</span><span class="jsdoc-syntax">;
  93         }
  94
  95         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
  96             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' enable-mask'</span><span class="jsdoc-syntax">;
  97         }
  98
  99         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.size</span><span class="jsdoc-syntax">){
 100             </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">;
 101         }
 102
 103         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.placetitle.length</span><span class="jsdoc-syntax">){
 104
 105             </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.placetitle</span><span class="jsdoc-syntax">) {
 106                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">:
 107                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-center-title'</span><span class="jsdoc-syntax">;
 108                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 109                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'bottom' </span><span class="jsdoc-syntax">:
 110                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-bottom-title'</span><span class="jsdoc-syntax">;
 111                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 112                 </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
 113                     </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 114             }
 115
 116         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 117             </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">){
 118                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-center-title'</span><span class="jsdoc-syntax">;
 119             }
 120
 121             </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">){
 122                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-bottom-title'</span><span class="jsdoc-syntax">;
 123             }
 124         }
 125
 126         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
 127             </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">;
 128         }
 129
 130         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
 131             </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">,
 132             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
 133             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 134                 {
 135                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 136                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-paragraph'</span><span class="jsdoc-syntax">,
 137                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
 138                 }
 139             ]
 140         };
 141
 142         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
 143             </span><span class="jsdoc-var">cfg.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">;
 144         }
 145
 146         </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">;
 147
 148         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title.length</span><span class="jsdoc-syntax">){
 149             </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
 150                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'h4'</span><span class="jsdoc-syntax">,
 151                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-title'</span><span class="jsdoc-syntax">,
 152                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title
 153             </span><span class="jsdoc-syntax">});
 154         }
 155
 156         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 157             </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
 158                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'p'</span><span class="jsdoc-syntax">,
 159                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-text'</span><span class="jsdoc-syntax">,
 160                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html
 161             </span><span class="jsdoc-syntax">});
 162         }
 163         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.title.length </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">) {
 164             </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' hide'</span><span class="jsdoc-syntax">;
 165         }
 166
 167         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 168             </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
 169                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
 170                 </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">,
 171                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bgimage
 172             </span><span class="jsdoc-syntax">});
 173         }
 174
 175         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.videourl.length</span><span class="jsdoc-syntax">){
 176             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vurl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.videourl.replace</span><span class="jsdoc-syntax">(/https:\/\/youtu\.be/, </span><span class="jsdoc-string">'https://www.youtube.com/embed/'</span><span class="jsdoc-syntax">);
 177             </span><span class="jsdoc-comment">// youtube support only?
 178             </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
 179                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'iframe'</span><span class="jsdoc-syntax">,
 180                 </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">,
 181                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">vurl</span><span class="jsdoc-syntax">,
 182                 </span><span class="jsdoc-var">frameborder </span><span class="jsdoc-syntax">: 0,
 183                 </span><span class="jsdoc-var">allowfullscreen </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 184             </span><span class="jsdoc-syntax">});
 185
 186
 187         }
 188
 189         </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
 190             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 191             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-mask'
 192         </span><span class="jsdoc-syntax">});
 193
 194         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 195
 196     },
 197
 198     </span><span class="jsdoc-var">getSplitAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 199     {
 200         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'masonry-brick masonry-brick-split'</span><span class="jsdoc-syntax">;
 201
 202         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
 203             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-brick-link'</span><span class="jsdoc-syntax">;
 204         }
 205
 206         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 207             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-brick-image'</span><span class="jsdoc-syntax">;
 208         }
 209
 210         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.size</span><span class="jsdoc-syntax">){
 211             </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">;
 212         }
 213
 214         </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.placetitle</span><span class="jsdoc-syntax">) {
 215             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">:
 216                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-center-title'</span><span class="jsdoc-syntax">;
 217                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 218             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'bottom' </span><span class="jsdoc-syntax">:
 219                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-bottom-title'</span><span class="jsdoc-syntax">;
 220                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 221             </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
 222                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 223                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-center-title'</span><span class="jsdoc-syntax">;
 224                 }
 225
 226                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 227                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' masonry-bottom-title'</span><span class="jsdoc-syntax">;
 228                 }
 229                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 230         }
 231
 232         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
 233             </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">;
 234         }
 235
 236         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
 237             </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">,
 238             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">,
 239             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 240                 {
 241                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 242                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-split-head'</span><span class="jsdoc-syntax">,
 243                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 244                         {
 245                             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 246                             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-paragraph'</span><span class="jsdoc-syntax">,
 247                             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
 248                         }
 249                     ]
 250                 },
 251                 {
 252                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 253                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-split-body'</span><span class="jsdoc-syntax">,
 254                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
 255                 }
 256             ]
 257         };
 258
 259         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
 260             </span><span class="jsdoc-var">cfg.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">;
 261         }
 262
 263         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title.length</span><span class="jsdoc-syntax">){
 264             </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">({
 265                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'h4'</span><span class="jsdoc-syntax">,
 266                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-title'</span><span class="jsdoc-syntax">,
 267                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title
 268             </span><span class="jsdoc-syntax">});
 269         }
 270
 271         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 272             </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[1]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">({
 273                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'p'</span><span class="jsdoc-syntax">,
 274                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'masonry-brick-text'</span><span class="jsdoc-syntax">,
 275                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html
 276             </span><span class="jsdoc-syntax">});
 277         }
 278
 279         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length</span><span class="jsdoc-syntax">){
 280             </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">({
 281                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
 282                 </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">,
 283                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.bgimage
 284             </span><span class="jsdoc-syntax">});
 285         }
 286
 287         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.videourl.length</span><span class="jsdoc-syntax">){
 288             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">vurl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.videourl.replace</span><span class="jsdoc-syntax">(/https:\/\/youtu\.be/, </span><span class="jsdoc-string">'https://www.youtube.com/embed/'</span><span class="jsdoc-syntax">);
 289             </span><span class="jsdoc-comment">// youtube support only?
 290             </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.cn.push</span><span class="jsdoc-syntax">({
 291                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'iframe'</span><span class="jsdoc-syntax">,
 292                 </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">,
 293                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">vurl</span><span class="jsdoc-syntax">,
 294                 </span><span class="jsdoc-var">frameborder </span><span class="jsdoc-syntax">: 0,
 295                 </span><span class="jsdoc-var">allowfullscreen </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 296             </span><span class="jsdoc-syntax">});
 297         }
 298
 299         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 300     },
 301
 302     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 303     {
 304         </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.size</span><span class="jsdoc-syntax">) {
 305             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'xs' </span><span class="jsdoc-syntax">:
 306                 </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= 1;
 307                 </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= 1;
 308                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 309             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'sm' </span><span class="jsdoc-syntax">:
 310                 </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= 2;
 311                 </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= 2;
 312                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 313             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md' </span><span class="jsdoc-syntax">:
 314             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md-left' </span><span class="jsdoc-syntax">:
 315             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'md-right' </span><span class="jsdoc-syntax">:
 316                 </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= 3;
 317                 </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= 3;
 318                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 319             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'tall' </span><span class="jsdoc-syntax">:
 320                 </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= 2;
 321                 </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= 3;
 322                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 323             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'wide' </span><span class="jsdoc-syntax">:
 324                 </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= 3;
 325                 </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= 2;
 326                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 327             </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'wide-thin' </span><span class="jsdoc-syntax">:
 328                 </span><span class="jsdoc-var">this.x </span><span class="jsdoc-syntax">= 3;
 329                 </span><span class="jsdoc-var">this.y </span><span class="jsdoc-syntax">= 1;
 330                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 331
 332             </span><span class="jsdoc-keyword">default </span><span class="jsdoc-syntax">:
 333                 </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
 334         }
 335
 336         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
 337             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouchStart</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 338             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchmove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouchMove</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 339             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouchEnd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 340             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'contextmenu'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onContextMenu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 341         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 342             </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">);
 343             </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">);
 344             </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 345         }
 346
 347         </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">) {
 348             </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">);
 349         }
 350
 351     },
 352
 353     </span><span class="jsdoc-var">onClick</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">)
 354     {
 355         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">time </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.endTimer </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">this.startTimer</span><span class="jsdoc-syntax">;
 356
 357         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
 358             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">time </span><span class="jsdoc-syntax">&gt; 1000){
 359                 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 360                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 361             }
 362         }
 363
 364         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.preventDefault</span><span class="jsdoc-syntax">){
 365             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 366         }
 367
 368         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 369         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 370     },
 371
 372     </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">)
 373     {
 374         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 375
 376         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isFitContainer</span><span class="jsdoc-syntax">){
 377             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 378         }
 379
 380         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 381             </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">);
 382         }
 383     },
 384
 385     </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">)
 386     {
 387         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 388
 389         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isFitContainer</span><span class="jsdoc-syntax">){
 390             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 391         }
 392
 393         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bgimage.length </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 394             </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">);
 395         }
 396     },
 397
 398     </span><span class="jsdoc-var">onTouchStart</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">)
 399     {
 400 </span><span class="jsdoc-comment">//        e.preventDefault();
 401
 402         </span><span class="jsdoc-var">this.touchmoved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 403
 404         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isFitContainer</span><span class="jsdoc-syntax">){
 405             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 406         }
 407
 408         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bgimage.length </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 409             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 410         }
 411
 412         </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">);
 413
 414         </span><span class="jsdoc-var">this.timer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">();
 415
 416     },
 417
 418     </span><span class="jsdoc-var">onTouchMove</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">)
 419     {
 420         </span><span class="jsdoc-var">this.touchmoved </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 421     },
 422
 423     </span><span class="jsdoc-var">onContextMenu </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">)
 424     {
 425         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 426         </span><span class="jsdoc-var">e.stopPropagation</span><span class="jsdoc-syntax">();
 427         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 428     },
 429
 430     </span><span class="jsdoc-var">onTouchEnd</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">)
 431     {
 432 </span><span class="jsdoc-comment">//        e.preventDefault();
 433
 434         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Date</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getTime</span><span class="jsdoc-syntax">() - </span><span class="jsdoc-var">this.timer </span><span class="jsdoc-syntax">&gt; 1000) || !</span><span class="jsdoc-var">this.href.length </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.touchmoved</span><span class="jsdoc-syntax">){
 435
 436             </span><span class="jsdoc-var">this.leave</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">);
 437
 438             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 439         }
 440
 441         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bgimage.length </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">){
 442
 443             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length</span><span class="jsdoc-syntax">){
 444                 </span><span class="jsdoc-var">window.location.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">;
 445             }
 446
 447             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 448         }
 449
 450         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.isFitContainer</span><span class="jsdoc-syntax">){
 451             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 452         }
 453
 454         </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">);
 455
 456         </span><span class="jsdoc-var">window.location.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">;
 457     }
 458
 459 });
 460
 461
 462
 463  </span></code></body></html>