source: extensions/GrumPluginClasses/js/ui.inputPages.js @ 19373

Last change on this file since 19373 was 17861, checked in by grum, 12 years ago

version 3.5.4
inputPage

. fix bug on page number & total page calculation

CSS

. fix some bugs & improve clear theme
File size: 22.2 KB
RevLine 
[16012]1/**
2 * -----------------------------------------------------------------------------
3 * file: ui.inputPages.js
4 * file version: 1.0.0
5 * date: 2012-06-18
6 *
7 * A jQuery plugin provided by the piwigo's plugin "GrumPluginClasses"
8 *
9 * -----------------------------------------------------------------------------
10 * Author     : Grum
11 *   email    : grum@piwigo.com
12 *   website  : http://photos.grum.fr
13 *
14 *   << May the Little SpaceFrog be with you ! >>
15 * -----------------------------------------------------------------------------
16 *
17 *
18 *
19 *
20 * :: HISTORY ::
21 *
22 * | release | date       |
23 * | 1.0.0   | 2010/11/04 | * first release
24 * |         |            |
25 * |         |            |
26 * |         |            |
27 * |         |            |
28 * |         |            |
29 * |         |            |
30 * |         |            |
31 * |         |            |
32 *
33 */
34
35
36
37(
38  function($)
39  {
40    /*
41     * plugin 'public' functions
42     */
43    var publicMethods =
44    {
45      init : function (opt)
46        {
47          return this.each(function()
48            {
49              // default values for the plugin
50              var $this=$(this),
51                  data = $this.data('options'),
52                  objects = $this.data('objects'),
53                  properties = $this.data('properties'),
54                  options =
55                    {
56                      nbItems:0,
[17861]57                      nbItemsPage:50,
[16012]58                      currentPage:1,
59                      displayedPages:7,
60                      showButtons:{
61                        first:'auto',
62                        last:'auto',
63                        previous:'auto',
64                        next:'auto',
65                        more:'auto'
66                      },
67                      chars:{
68                        first:'&nbsp;', // <<
69                        previous:'&nbsp;', // <
70                        next:'&nbsp;', // >
71                        last:'&nbsp;', // >>
72                        more:'...'
73                      },
74                      change:null
75                    };
76
77              // if options given, merge it
78              // if(opt) $.extend(options, opt); ==> options are set by setters
79
80              $this.data('options', options);
81
82              if(!properties)
83              {
84                $this.data('properties',
85                  {
86                    initialized:false,
87                    nbPages:0
88                  }
89                );
90                properties=$this.data('properties');
91              }
92
93              if(!objects)
94              {
95                objects =
96                  {
97                    container:$('<ul/>', { 'class':'ui-inputPages' } ),
98                    buttonFirst:$('<li/>', { 'class':'ui-inputPagesButton-first-inactive', oValue:':first' } ),
99                    buttonLast:$('<li/>', { 'class':'ui-inputPagesButton-last-inactive', oValue:':last' } ),
100                    buttonPrevious:$('<li/>', { 'class':'ui-inputPagesButton-previous-inactive', oValue:':previous' } ),
101                    buttonNext:$('<li/>', { 'class':'ui-inputPagesButton-next-inactive', oValue:':next' } )
102                  };
103
104                $this
105                  .html('')
106                  .append(
107                    objects.container
108                      .append(objects.buttonFirst)
109                      .append(objects.buttonPrevious)
110                      .append(objects.buttonNext)
111                      .append(objects.buttonLast)
112                  );
113
114                $this.data('objects', objects);
115              }
116
117              privateMethods.setOptions($this, opt);
118            }
119          );
120        }, // init
121      destroy : function ()
122        {
123          return this.each(
124            function()
125            {
126              // default values for the plugin
127              var $this=$(this),
128                  objects = $this.data('objects');
129              objects.container.unbind().remove();
130              $this
131                .unbind('.inputPages')
132                .removeData()
133                .css(
134                  {
135                    width:'',
136                    height:''
137                  }
138                );
139              delete $this;
140            }
141          );
142        }, // destroy
143
144      options: function (value)
145        {
146          return(
147            this.each(
148              function()
149              {
150                privateMethods.setOptions($(this), value);
151              }
152            )
153          );
154        }, // options
155
156      nbItems: function (value)
157        {
158          if(value!=null)
159          {
160            return(
161              this.each(
162                function()
163                {
164                  privateMethods.setNbItems($(this), value);
165                }
166              )
167            );
168          }
169          else
170          {
171            var options = this.data('options');
172
173            if(options)
174            {
175              return(options.nbItems);
176            }
177            else
178            {
179              return('');
180            }
181          }
182        }, // nbItems
183
184      nbItemsPage: function (value)
185        {
186          if(value!=null)
187          {
188            return(
189              this.each(
190                function()
191                {
192                  privateMethods.setNbItemsPage($(this), value);
193                }
194              )
195            );
196          }
197          else
198          {
199            var options = this.data('options');
200
201            if(options)
202            {
203              return(options.nbItemsPage);
204            }
205            else
206            {
207              return('');
208            }
209          }
210        }, // nbItemsPage
211
212      currentPage: function (value)
213        {
214          if(value!=null)
215          {
216            return(
217              this.each(
218                function()
219                {
220                  privateMethods.setCurrentPage($(this), value);
221                }
222              )
223            );
224          }
225          else
226          {
227            var options = this.data('options');
228
229            if(options)
230            {
231              return(options.currentPage);
232            }
233            else
234            {
235              return('');
236            }
237          }
238        }, // currentPage
239
240      displayedPages: function (value)
241        {
242          if(value!=null)
243          {
244            return(
245              this.each(
246                function()
247                {
248                  privateMethods.setDisplayedPages($(this), value);
249                }
250              )
251            );
252          }
253          else
254          {
255            var options = this.data('options');
256
257            if(options)
258            {
259              return(options.displayedPages);
260            }
261            else
262            {
263              return('');
264            }
265          }
266        }, // displayedPages
267
268      nbPages: function (value)
269        {
270          var properties = this.data('properties');
271
272          if(properties)
273          {
274            return(properties.nbPages);
275          }
276          return(0);
277        }, // nbPages
278
279      change: function (value)
280        {
281          if(value!=null && $.isFunction(value))
282          {
283            // set selected value
284            return(
285              this.each(
286                function()
287                {
288                  privateMethods.setEventChange($(this), value);
289                }
290              )
291            );
292          }
293          else
294          {
295            // return the selected value
296            var options=this.data('options');
297
298            if(options)
299            {
300              return(options.change);
301            }
302            else
303            {
304              return(null);
305            }
306          }
307        } // change
308
309
310    }; // methods
311
312
313    /*
314     * plugin 'private' methods
315     */
316    var privateMethods =
317    {
318      /**
319       * return true is given value is a valid numeric value, according to the
320       * rules defined by the object
321       * @param Object object
322       * @param value
323       * @return Bool
324       */
325      isValid : function (object, value)
326        {
327          var properties=object.data('properties');
328
329          return(properties.re.test(value));
330        },
331
332      setOptions : function (object, value)
333        {
334          var properties=object.data('properties'),
335              options=object.data('options');
336
337          if(!$.isPlainObject(value)) return(false);
338
339          properties.initialized=false;
340
341          privateMethods.setChars(object, (value.chars!=null)?value.chars:options.chars);
342          privateMethods.setShowButtons(object, (value.showButtons!=null)?value.showButtons:options.showButtons);
343          privateMethods.setNbItems(object, (value.nbItems!=null)?value.nbItems:options.nbItems);
344          privateMethods.setNbItemsPage(object, (value.nbItemsPage!=null)?value.nbItemsPage:options.nbItemsPage);
345          privateMethods.setCurrentPage(object, (value.currentPage!=null)?value.currentPage:options.currentPage);
346          privateMethods.setDisplayedPages(object, (value.displayedPages!=null)?value.displayedPages:options.displayedPages);
347
348          privateMethods.setEventChange(object, (value.change!=null)?value.change:options.change);
349
350          properties.initialized=true;
351
352          privateMethods.refreshPages(object);
353        },
354
355
356      setChars : function (object, value)
357        {
358          var options=object.data('options'),
359              objects=object.data('objects'),
360              properties=object.data('properties');
361
362          if(!properties.initialized && value!=null)
363          {
364            if(value.first)
365            {
366              options.chars.first=value.first;
367              objects.buttonFirst.html(options.chars.first);
368            }
369
370            if(value.previous)
371            {
372              options.chars.previous=value.previous;
373              objects.buttonPrevious.html(options.chars.previous);
374            }
375
376            if(value.next)
377            {
378              options.chars.next=value.next;
379              objects.buttonNext.html(options.chars.next);
380            }
381
382            if(value.last)
383            {
384              options.chars.last=value.last;
385              objects.buttonLast.html(options.chars.last);
386            }
387
388            if(value.more)
389            {
390              options.chars.more=value.more;
391            }
392          }
393          return(options.chars);
394        }, //setChars
395
396
397      setShowButtons : function (object, value)
398        {
399          var options=object.data('options'),
400              objects=object.data('objects'),
401              properties=object.data('properties');
402
403          if(!properties.initialized && value!=null)
404          {
405            if(value.first && (value.first=='always' || value.first=='never' || value.first=='auto'))
406              options.showButtons.first=value.first;
407
408            if(value.previous && (value.previous=='always' || value.previous=='never' || value.previous=='auto'))
409              options.showButtons.previous=value.previous;
410
411            if(value.next && (value.next=='always' || value.next=='never' || value.next=='auto'))
412              options.showButtons.next=value.next;
413
414            if(value.last && (value.last=='always' || value.last=='never' || value.last=='auto'))
415              options.showButtons.last=value.last;
416
417            if(value.more && (value.more=='always' || value.more=='never' || value.more=='auto'))
418              options.showButtons.more=value.more;
419
420            if(options.showButtons.first=='never')
421              objects.buttonFirst.css('display', 'none');
422            if(options.showButtons.previous=='never')
423              objects.buttonPrevious.css('display', 'none');
424            if(options.showButtons.next=='never')
425              objects.buttonNext.css('display', 'none');
426            if(options.showButtons.last=='never')
427              objects.buttonLast.css('display', 'none');
428
429            if(options.showButtons.first=='always')
430              objects.buttonFirst.css('display', 'inline-block');
431            if(options.showButtons.previous=='always')
432              objects.buttonPrevious.css('display', 'inline-block');
433            if(options.showButtons.next=='always')
434              objects.buttonNext.css('display', 'inline-block');
435            if(options.showButtons.last=='always')
436              objects.buttonLast.css('display', 'inline-block');
437          }
438          return(options.showButtons);
439        }, //setShowButtons
440
441
442      setNbItems: function (object, value)
443        {
444          var options=object.data('options'),
445              properties=object.data('properties');
446
447          if((!properties.initialized || options.nbItems!=value) && value>0)
448          {
449            options.nbItems=value;
450            options.currentPage=1;
451            privateMethods.calculateNbPages(object);
452            privateMethods.refreshPages(object);
453          }
454          return(options.nbItems);
455        }, //setNbItems
456
457      setNbItemsPage: function (object, value)
458        {
459          var options=object.data('options'),
460              properties=object.data('properties');
461
462          if((!properties.initialized || options.nbItemsPage!=value) && value>0)
463          {
464            options.nbItemsPage=value;
465            options.currentPage=1;
466            privateMethods.calculateNbPages(object);
467            privateMethods.refreshPages(object);
468          }
469          return(options.nbItemsPage);
470        }, //setNbItemsPage
471
472      setDisplayedPages: function (object, value)
473        {
474          var options=object.data('options'),
475              properties=object.data('properties');
476
477          if((!properties.initialized || options.displayedPages!=value) && value>0)
478          {
479            options.displayedPages=value;
480            privateMethods.refreshPages(object);
481          }
482          return(options.displayedPages);
483        }, //setDisplayedPages
484
485      setCurrentPage: function (object, value)
486        {
487          var options=object.data('options'),
488              properties=object.data('properties'),
489              askedPage=0;
490
491          if((!properties.initialized || options.currentPage!=value) &&
492              (value==':first' ||
493              value==':previous' ||
494              value==':next' ||
495              value==':last' ||
496              value==':pp' ||
497              value==':ps' ||
498              $.isNumeric(value) && value>0))
499          {
500            switch(value)
501            {
502              case ':first':
503                askedPage=1;
504                break;
505              case ':previous':
506                askedPage=options.currentPage-1;
507                break;
508              case ':next':
509                askedPage=options.currentPage+1;
510                break;
511              case ':last':
512                askedPage=properties.nbPages
513                break;
514              case ':pp':
515                askedPage=options.currentPage-options.displayedPages;
516                if(askedPage<1) askedPage=1;
517                break;
518              case ':ps':
519                askedPage=options.currentPage+options.displayedPages;
520                if(askedPage>properties.nbPages) askedPage=properties.nbPages;
521                break;
522              default:
523                askedPage=value;
524            }
525
526            if(askedPage>=1 && askedPage<=properties.nbPages)
527            {
528              options.currentPage=askedPage*1;
529              privateMethods.refreshPages(object);
530
531              if(options.change) object.trigger('inputPageChange', options.currentPage);
532            }
533
534          }
535          return(options.currentPage);
536        }, //setCurrentPage
537
538      setEventChange : function (object, value)
539        {
540          var options=object.data('options');
541
542          options.change=value;
543          object.unbind('inputPageChange');
544          if(value) object.bind('inputPageChange', options.change);
545          return(options.change);
546        }, //setEventChange
547
548      calculateNbPages : function (object)
549        {
550          var options=object.data('options'),
551              properties=object.data('properties');
552
[17861]553          properties.nbPages=Math.ceil(options.nbItems/options.nbItemsPage);
[16012]554        }, // calculateNbPages
555
556      refreshPages : function (object)
557        {
558          var options=object.data('options'),
559              objects=object.data('objects'),
560              properties=object.data('properties'),
561              itemClass='';
562
563          if(options.currentPage==1)
564          {
565            objects.buttonFirst
566              .removeClass('ui-inputPagesButton-first-active ui-inputPagesButton-active')
567              .addClass('ui-inputPagesButton-first-inactive');
568            objects.buttonPrevious
569              .removeClass('ui-inputPagesButton-previous-active ui-inputPagesButton-active')
570              .addClass('ui-inputPagesButton-previous-inactive');
571          }
572          else if(options.currentPage==properties.nbPages)
573          {
574            objects.buttonLast
575              .removeClass('ui-inputPagesButton-last-active ui-inputPagesButton-active')
576              .addClass('ui-inputPagesButton-last-inactive');
577            objects.buttonNext
578              .removeClass('ui-inputPagesButton-next-active ui-inputPagesButton-active')
579              .addClass('ui-inputPagesButton-next-inactive');
580          }
581
582          if(options.currentPage<properties.nbPages)
583          {
584            objects.buttonLast
585              .removeClass('ui-inputPagesButton-last-inactive')
586              .addClass('ui-inputPagesButton-last-active ui-inputPagesButton-active');
587            objects.buttonNext
588              .removeClass('ui-inputPagesButton-next-inactive')
589              .addClass('ui-inputPagesButton-next-active ui-inputPagesButton-active');
590          }
591          if(options.currentPage>1)
592          {
593            objects.buttonFirst
594              .removeClass('ui-inputPagesButton-first-inactive')
595              .addClass('ui-inputPagesButton-first-active ui-inputPagesButton-active');
596            objects.buttonPrevious
597              .removeClass('ui-inputPagesButton-previous-inactive')
598              .addClass('ui-inputPagesButton-previous-active ui-inputPagesButton-active');
599          }
600
601          if(properties.nbPages<=1 || properties.nbPages<=options.displayedPages)
602          {
603            if(options.showButtons.first=='auto')
604              objects.buttonFirst.css('display', 'none');
605            if(options.showButtons.previous=='auto')
606              objects.buttonPrevious.css('display', 'none');
607            if(options.showButtons.next=='auto')
608              objects.buttonNext.css('display', 'none');
609            if(options.showButtons.last=='auto')
610              objects.buttonLast.css('display', 'none');
611          }
612          else
613          {
614            if(options.showButtons.first=='auto')
615              objects.buttonFirst.css('display', 'inline-block');
616            if(options.showButtons.previous=='auto')
617              objects.buttonPrevious.css('display', 'inline-block');
618            if(options.showButtons.next=='auto')
619              objects.buttonNext.css('display', 'inline-block');
620            if(options.showButtons.last=='auto')
621              objects.buttonLast.css('display', 'inline-block');
622          }
623
624          objects.container.children().unbind('click.inputPages');
625          objects.container.children('.ui-inputPages-pageNum').remove();
626
627          if(properties.nbPages>1)
628          {
629            if(options.displayedPages==0 || options.nbPages<=options.displayedPages)
630            {
631              for(var i=1;i<=properties.nbPages;i++)
632              {
633                if(i==options.currentPage)
634                {
635                  itemClass='ui-inputPagesButton-selected ui-inputPages-pageNum';
636                }
637                else
638                {
639                  itemClass='ui-inputPagesButton-active ui-inputPages-pageNum';
640                }
641                objects.buttonNext.before(
642                  $('<li/>',
643                    {
644                      'class':itemClass,
645                      oValue:i
646                    }
647                  ).html(i)
648                );
649              }
650            }
651            else
652            {
653              var firstPage=0,
654                  lastPage=0;
655
656              firstPage=options.currentPage-Math.floor(options.displayedPages/2);
657
658              if((firstPage+options.displayedPages)>properties.nbPages)
659              {
660                firstPage=properties.nbPages-options.displayedPages+1;
661              }
662
663              if(firstPage<1)
664              {
665                firstPage=1;
666              }
667
668              lastPage=Math.min(firstPage+options.displayedPages-1, properties.nbPages);
669
670              if(firstPage>1 && options.showButtons.more=='auto')
671                objects.buttonNext.before(
672                  $('<li/>',
673                    {
674                      'class':'ui-inputPagesButton-active ui-inputPages-pageNum',
675                      oValue:':pp'
676                    }
677                  ).html(options.chars.more)
678                );
679
680              for(var i=firstPage;i<=lastPage;i++)
681              {
682                if(i==options.currentPage)
683                {
684                  itemClass='ui-inputPagesButton-selected ui-inputPages-pageNum';
685                }
686                else
687                {
688                  itemClass='ui-inputPagesButton-active ui-inputPages-pageNum';
689                }
690                objects.buttonNext.before(
691                  $('<li/>',
692                    {
693                      'class':itemClass,
694                      oValue:i
695                    }
696                  ).html(i)
697                );
698              }
699
700              if(lastPage<properties.nbPages && options.showButtons.more=='auto')
701                objects.buttonNext.before(
702                  $('<li/>',
703                    {
704                      'class':itemClass,
705                      oValue:':ps'
706                    }
707                  ).html(options.chars.more)
708                );
709            }
710          }
711
712          objects.container
713            .children('.ui-inputPagesButton-active')
714              .bind('click.inputPages',
715                function (event)
716                {
717                  privateMethods.setCurrentPage(object, $(this).attr('oValue'));
718                }
719              );
720
721        } // refreshPages
722
723
724    };
725
726
727    $.fn.inputPages = function(method)
728    {
729      if(publicMethods[method])
730      {
731        return publicMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
732      }
733      else if(typeof method === 'object' || ! method)
734      {
735        return publicMethods.init.apply(this, arguments);
736      }
737      else
738      {
739        $.error( 'Method ' +  method + ' does not exist on jQuery.inputPages' );
740      }
741    } // $.fn.inputPages
742
743  }
744)(jQuery);
745
746
Note: See TracBrowser for help on using the repository browser.