58 this.html += '</div>'; |
58 this.html += '</div>'; |
59 this.html += pg_control; |
59 this.html += pg_control; |
60 pagin_objects[this.random_id] = this; |
60 pagin_objects[this.random_id] = this; |
61 } |
61 } |
62 |
62 |
|
63 /** |
|
64 * Yet another demonstration of the fact that with the right tools, any amount of Javascript can be ported from PHP. |
|
65 * @access private |
|
66 */ |
|
67 |
63 function _build_paginator(this_page) |
68 function _build_paginator(this_page) |
64 { |
69 { |
65 var begin = '<div class="tblholder" style="display: table; margin: 10px 0 0 auto;"><table border="0" cellspacing="1" cellpadding="4"><tr><th>Page:</th>'; |
70 var div_styling = ( IE ) ? 'width: 1px; margin: 10px auto 10px 0;' : 'display: table; margin: 10px 0 0 auto;'; |
66 var block = '<td class="row1" style="text-align: center;">{LINK}</td>'; |
71 var begin = '<div class="tblholder" style="'+div_styling+'"><table border="0" cellspacing="1" cellpadding="4"><tr><th>Page:</th>'; |
|
72 var block = '<td class="row1" style="text-align: center; white-space: nowrap;">{LINK}</td>'; |
67 var end = '</tr></table></div>'; |
73 var end = '</tr></table></div>'; |
68 var blk = new templateParser(block); |
74 var blk = new templateParser(block); |
69 var inner = ''; |
75 var inner = ''; |
70 var cls = 'row2'; |
76 var cls = 'row2'; |
71 |
77 |
72 if ( this.offset > 0 ) |
78 if ( this_page > 0 ) |
73 { |
79 { |
74 var url = '#'; |
80 var url = '#page_'+(this_page); |
75 var link = "<a href=\""+url+"\" style='text-decoration: none;'>« Prev</a>"; |
81 var link = "<a href=\""+url+"\" onclick=\"jspaginator_goto('"+this.random_id+"', "+(this_page-1)+"); return false;\" style='text-decoration: none;'>« Prev</a>"; |
76 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
82 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
77 blk.assign_vars({ |
83 blk.assign_vars({ |
78 CLASS: cls, |
84 CLASS: cls, |
79 LINK: link |
85 LINK: link |
80 }); |
86 }); |
98 else |
104 else |
99 { |
105 { |
100 if ( this_page + 5 > this.num_pages ) |
106 if ( this_page + 5 > this.num_pages ) |
101 { |
107 { |
102 var list = new Array(); |
108 var list = new Array(); |
103 var tp = this_page; |
109 var tp = this_page; // The vectors below used to be 3, 2, and 1 |
104 if ( this_page + 0 == this.num_pages ) tp = tp - 3; |
110 if ( this_page + 0 == this.num_pages ) tp = tp - 2; |
105 if ( this_page + 1 == this.num_pages ) tp = tp - 2; |
111 if ( this_page + 1 == this.num_pages ) tp = tp - 1; |
106 if ( this_page + 2 == this.num_pages ) tp = tp - 1; |
112 if ( this_page + 2 == this.num_pages ) tp = tp - 0; |
107 for ( var i = tp - 1; i <= tp + 1; i++ ) |
113 for ( var i = tp - 1; i <= tp + 1; i++ ) |
108 { |
114 { |
109 list.push(i); |
115 list.push(i); |
110 } |
116 } |
111 } |
117 } |
138 { |
144 { |
139 var i = list[k]; |
145 var i = list[k]; |
140 if ( i == this.num_pages ) |
146 if ( i == this.num_pages ) |
141 break; |
147 break; |
142 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
148 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
143 var offset = i * this_page; |
|
144 var url = '#'; |
|
145 var j = i + 1; |
149 var j = i + 1; |
146 var link = ( offset == this.offset ) ? "<b>"+j+"</b>" : "<a href=\""+url+"\" style='text-decoration: none;'>"+j+"</a>"; |
150 var url = '#page_'+j; |
|
151 var link = ( i == this_page ) ? "<b>"+j+"</b>" : "<a href=\""+url+"\" onclick=\"jspaginator_goto('"+this.random_id+"', "+i+"); return false;\" style='text-decoration: none;'>"+j+"</a>"; |
147 blk.assign_vars({ |
152 blk.assign_vars({ |
148 CLASS: cls, |
153 CLASS: cls, |
149 LINK: link |
154 LINK: link |
150 }); |
155 }); |
151 inner += blk.run(); |
156 inner += blk.run(); |
152 } |
157 } |
153 |
158 |
154 var total = num_pages * perpage - perpage; |
|
155 |
|
156 if ( this_page < this.num_pages ) |
159 if ( this_page < this.num_pages ) |
157 { |
160 { |
158 // $cls = ( $cls == 'row1' ) ? 'row2' : 'row1'; |
161 // $cls = ( $cls == 'row1' ) ? 'row2' : 'row1'; |
159 // $blk->assign_vars(array('CLASS'=>$cls,'LINK'=>'...')); |
162 // $blk->assign_vars(array('CLASS'=>$cls,'LINK'=>'...')); |
160 // $inner .= $blk->run(); |
163 // $inner .= $blk->run(); |
161 |
164 |
162 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
165 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
163 var url = '#'; |
166 var url = '#page_' + String( this.num_pages-1 ); |
164 var j = i + 1; |
167 var link = ( ( this.num_pages - 1 ) == this_page ) ? "<b>Last</b>" : "<a href=\""+url+"\" onclick=\"jspaginator_goto('"+this.random_id+"', "+(this.num_pages-1)+"); return false;\" style='text-decoration: none;'>Last »</a>"; |
165 var link = ( total == this.offset ) ? "<b>Last</b>" : "<a href=\""+url+"\" style='text-decoration: none;'>Last »</a>"; |
|
166 blk.assign_vars({ |
168 blk.assign_vars({ |
167 CLASS: cls, |
169 CLASS: cls, |
168 LINK: link |
170 LINK: link |
169 }); |
171 }); |
170 inner += blk.run(); |
172 inner += blk.run(); |
171 } |
173 } |
172 |
174 |
173 } |
175 } |
174 |
176 |
175 if ( this.offset < total ) |
177 if ( this_page < ( this.num_pages - 1 ) ) |
176 { |
178 { |
177 var url = '#page_' + abs(this.offset + this.perpage); |
179 var url = '#page_' + String(this_page + 2); |
178 var link = "<a href=\""+url+"\" style='text-decoration: none;'>Next »</a>"; |
180 var link = "<a href=\""+url+"\" onclick=\"jspaginator_goto('"+this.random_id+"', "+(this_page+1)+"); return false;\" style='text-decoration: none;'>Next »</a>"; |
179 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
181 cls = ( cls == 'row1' ) ? 'row2' : 'row1'; |
180 blk.assign_vars({ |
182 blk.assign_vars({ |
181 CLASS: cls, |
183 CLASS: cls, |
182 LINK: link |
184 LINK: link |
183 }); |
185 }); |
192 } |
194 } |
193 |
195 |
194 function jspaginator_goto(pagin_id, jump_to) |
196 function jspaginator_goto(pagin_id, jump_to) |
195 { |
197 { |
196 var theobj = pagin_objects[pagin_id]; |
198 var theobj = pagin_objects[pagin_id]; |
|
199 var current_div = false; |
|
200 var new_div = false; |
197 for ( var i = 0; i < theobj.num_pages; i++ ) |
201 for ( var i = 0; i < theobj.num_pages; i++ ) |
198 { |
202 { |
199 var display = ( i == jump_to ) ? 'block' : 'none'; |
|
200 var thediv = document.getElementById(pagin_id + '_' + i); |
203 var thediv = document.getElementById(pagin_id + '_' + i); |
201 if ( thediv ) |
204 if ( !thediv ) |
202 thediv.style.display = display; |
205 { |
203 } |
206 // if ( window.console ) |
|
207 // window.console.error('jspaginator_goto(): got a bad DOM object in loop'); |
|
208 return false; |
|
209 } |
|
210 // window.console.debug("Div "+i+' of '+(theobj.num_pages-1)+': ', thediv); |
|
211 if ( thediv.style.display != 'none' ) |
|
212 current_div = thediv; |
|
213 else if ( i == jump_to ) |
|
214 new_div = thediv; |
|
215 } |
|
216 |
|
217 if ( !new_div ) |
|
218 { |
|
219 // if ( window.console ) |
|
220 // window.console.error('jspaginator_goto(): didn\'t get new div'); |
|
221 return false; |
|
222 } |
|
223 if ( !current_div ) |
|
224 { |
|
225 // if ( window.console ) |
|
226 // window.console.error('jspaginator_goto(): didn\'t get current div'); |
|
227 return false; |
|
228 } |
|
229 |
|
230 // window.console.debug(current_div); |
|
231 // window.console.debug(new_div); |
|
232 |
|
233 // White-out the old div and fade in the new one |
|
234 |
|
235 if ( IE || is_Safari ) |
|
236 { |
|
237 current_div.style.display = 'none'; |
|
238 new_div.style.display = 'block'; |
|
239 } |
|
240 else |
|
241 { |
|
242 var fade_time = 375; |
|
243 var code = 'var old = \'' + current_div.id + '\';'; |
|
244 code += 'var newer = \'' + new_div.id + '\';'; |
|
245 code += 'document.getElementById(old).style.display = "none";'; |
|
246 code += 'changeOpac(0, newer);'; |
|
247 code += 'document.getElementById(newer).style.display = "block";'; |
|
248 code += 'opacity(newer, 0, 100, '+fade_time+');'; |
|
249 // if ( window.console ) |
|
250 // window.console.debug('metacode for fader: ', code); |
|
251 opacity(current_div.id, 100, 0, fade_time); |
|
252 setTimeout(code, (fade_time + 50)); |
|
253 } |
|
254 |
|
255 |
204 var pg_control = theobj._build_control(jump_to); |
256 var pg_control = theobj._build_control(jump_to); |
205 var divs = getElementsByClassName(document, 'div', pagin_id + '_control'); |
257 var divs = getElementsByClassName(document, 'div', pagin_id + '_control'); |
206 for ( var i = 0; i < divs.length; i++ ) |
258 for ( var i = 0; i < divs.length; i++ ) |
207 { |
259 { |
208 divs[i].innerHTML = pg_control; |
260 divs[i].innerHTML = pg_control; |