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

   1 <html><head><title>Roo/bootstrap/DocumentSlider.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">
   2 <span class="jsdoc-comment">/*
   3 * Licence: LGPL
   4 */
   5
   6 /**
   7  * @class Roo.bootstrap.DocumentSlider
   8  * @extends Roo.bootstrap.Component
   9  * Bootstrap DocumentSlider class
  10  *
  11  * @constructor
  12  * Create a new DocumentViewer
  13  * @param {Object} config The config object
  14  */
  15
  16 </span><span class="jsdoc-var">Roo.bootstrap.DocumentSlider </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">){
  17     </span><span class="jsdoc-var">Roo.bootstrap.DocumentSlider.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">);
  18
  19     </span><span class="jsdoc-var">this.files </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">/**
  23          * @event initial
  24          * Fire after initEvent
  25          * @param {Roo.bootstrap.DocumentSlider} this
  26          */
  27         </span><span class="jsdoc-string">&quot;initial&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  28         </span><span class="jsdoc-comment">/**
  29          * @event update
  30          * Fire after update
  31          * @param {Roo.bootstrap.DocumentSlider} this
  32          */
  33         </span><span class="jsdoc-string">&quot;update&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  34         </span><span class="jsdoc-comment">/**
  35          * @event click
  36          * Fire after click
  37          * @param {Roo.bootstrap.DocumentSlider} this
  38          */
  39         </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  40     </span><span class="jsdoc-syntax">});
  41 };
  42
  43 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.DocumentSlider</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  44
  45     </span><span class="jsdoc-var">files </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  46
  47     </span><span class="jsdoc-var">indicator </span><span class="jsdoc-syntax">: 0,
  48
  49     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  50     {
  51         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  52             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  53             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider'</span><span class="jsdoc-syntax">,
  54             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  55                 {
  56                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  57                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider-header'</span><span class="jsdoc-syntax">,
  58                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  59                         {
  60                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  61                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider-header-title'
  62                         </span><span class="jsdoc-syntax">}
  63                     ]
  64                 },
  65                 {
  66                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  67                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider-body'</span><span class="jsdoc-syntax">,
  68                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  69                         {
  70                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  71                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider-prev'</span><span class="jsdoc-syntax">,
  72                             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  73                                 {
  74                                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  75                                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa fa-chevron-left'
  76                                 </span><span class="jsdoc-syntax">}
  77                             ]
  78                         },
  79                         {
  80                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  81                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider-thumb'</span><span class="jsdoc-syntax">,
  82                             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  83                                 {
  84                                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
  85                                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider-image'
  86                                 </span><span class="jsdoc-syntax">}
  87                             ]
  88                         },
  89                         {
  90                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  91                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-document-slider-next'</span><span class="jsdoc-syntax">,
  92                             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  93                                 {
  94                                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  95                                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa fa-chevron-right'
  96                                 </span><span class="jsdoc-syntax">}
  97                             ]
  98                         }
  99                     ]
 100                 }
 101             ]
 102         };
 103
 104         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 105     },
 106
 107     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 108     {
 109         </span><span class="jsdoc-var">this.headerEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-document-slider-header'</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">();
 110         </span><span class="jsdoc-var">this.headerEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 111
 112         </span><span class="jsdoc-var">this.titleEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-document-slider-header .roo-document-slider-header-title'</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">();
 113         </span><span class="jsdoc-var">this.titleEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 114
 115         </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-document-slider-body'</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">();
 116         </span><span class="jsdoc-var">this.bodyEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 117
 118         </span><span class="jsdoc-var">this.thumbEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-document-slider-thumb'</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">();
 119         </span><span class="jsdoc-var">this.thumbEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 120
 121         </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-document-slider-image'</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">();
 122         </span><span class="jsdoc-var">this.imageEl.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 123
 124         </span><span class="jsdoc-var">this.prevIndicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-document-slider-prev i'</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">();
 125         </span><span class="jsdoc-var">this.prevIndicator.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 126
 127         </span><span class="jsdoc-var">this.nextIndicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-document-slider-next i'</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">();
 128         </span><span class="jsdoc-var">this.nextIndicator.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 129
 130         </span><span class="jsdoc-var">this.thumbEl.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">);
 131
 132         </span><span class="jsdoc-var">this.prevIndicator.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.prev</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 133
 134         </span><span class="jsdoc-var">this.nextIndicator.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.next</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 135
 136     },
 137
 138     </span><span class="jsdoc-var">initial </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 139     {
 140         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.files.length</span><span class="jsdoc-syntax">){
 141             </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">= 1;
 142             </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">()
 143         }
 144
 145         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'initial'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 146     },
 147
 148     </span><span class="jsdoc-var">update </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 149     {
 150         </span><span class="jsdoc-var">this.imageEl.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.files</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">- 1]);
 151
 152         </span><span class="jsdoc-var">this.titleEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0} / {1}'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.indicator</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.files.length</span><span class="jsdoc-syntax">);
 153
 154         </span><span class="jsdoc-var">this.prevIndicator.show</span><span class="jsdoc-syntax">();
 155
 156         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">== 1){
 157             </span><span class="jsdoc-var">this.prevIndicator.hide</span><span class="jsdoc-syntax">();
 158         }
 159
 160         </span><span class="jsdoc-var">this.nextIndicator.show</span><span class="jsdoc-syntax">();
 161
 162         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.files.length</span><span class="jsdoc-syntax">){
 163             </span><span class="jsdoc-var">this.nextIndicator.hide</span><span class="jsdoc-syntax">();
 164         }
 165
 166         </span><span class="jsdoc-var">this.thumbEl.scrollTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">);
 167
 168         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'update'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 169     },
 170
 171     </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">)
 172     {
 173         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 174
 175         </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">);
 176     },
 177
 178     </span><span class="jsdoc-var">prev </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">)
 179     {
 180         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 181
 182         </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(1, </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">- 1);
 183
 184         </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">();
 185     },
 186
 187     </span><span class="jsdoc-var">next </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">)
 188     {
 189         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 190
 191         </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.files.length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.indicator </span><span class="jsdoc-syntax">+ 1);
 192
 193         </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">();
 194     }
 195 });
 196 </span></code></body></html>