1 <html><head><title>../roojs1/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">/*
7 * @class Roo.bootstrap.DocumentSlider
8 * @extends Roo.bootstrap.Component
9 * Bootstrap DocumentSlider class
12 * Create a new DocumentViewer
13 * @param {Object} config The config object
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">);
19 </span><span class="jsdoc-var">this.files </span><span class="jsdoc-syntax">= [];
21 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
22 </span><span class="jsdoc-comment">/**
24 * Fire after initEvent
25 * @param {Roo.bootstrap.DocumentSlider} this
27 </span><span class="jsdoc-string">"initial" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
28 </span><span class="jsdoc-comment">/**
31 * @param {Roo.bootstrap.DocumentSlider} this
33 </span><span class="jsdoc-string">"update" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
34 </span><span class="jsdoc-comment">/**
37 * @param {Roo.bootstrap.DocumentSlider} this
39 </span><span class="jsdoc-string">"click" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
40 </span><span class="jsdoc-syntax">});
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">, {
45 </span><span class="jsdoc-var">files </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
47 </span><span class="jsdoc-var">indicator </span><span class="jsdoc-syntax">: 0,
49 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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">: [
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">: [
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">}
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">: [
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">: [
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">}
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">: [
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">}
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">: [
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">}
104 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
107 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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">);
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">);
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">);
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">);
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">);
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">);
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">);
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">);
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">);
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">);
138 </span><span class="jsdoc-var">initial </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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">()
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">);
148 </span><span class="jsdoc-var">update </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
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]);
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">);
154 </span><span class="jsdoc-var">this.prevIndicator.show</span><span class="jsdoc-syntax">();
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">();
160 </span><span class="jsdoc-var">this.nextIndicator.show</span><span class="jsdoc-syntax">();
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">();
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">);
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">);
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">)
173 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
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">);
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">)
180 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
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);
184 </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">();
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">)
189 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
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);
193 </span><span class="jsdoc-var">this.update</span><span class="jsdoc-syntax">();
196 </span></code></body></html>