https://sajjadpsavoji.github.io/assets/js/jquery.easyPaginate.js

1/*
2* jQuery easyShare plugin
3* Update on 04 april 2017
4* Version 1.2
5*
6* Licensed under GPL <http://en.wikipedia.org/wiki/GNU_General_Public_License>
7* Copyright (c) 2008, St?hane Litou <[email protected]>
8* All rights reserved.
9*
10    This program is free software: you can redistribute it and/or modify
11    it under the terms of the GNU General Public License as published by
12    the Free Software Foundation, either version 3 of the License, or
13    (at your option) any later version.
14
15    This program is distributed in the hope that it will be useful,
16    but WITHOUT ANY WARRANTY; without even the implied warranty of
17    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
18    GNU General Public License for more details.
19
20    You should have received a copy of the GNU General Public License
21    along with this program.  If not, see <http://www.gnu.org/licenses/>.
22*/
23
24(function($){
25$.fn.easyPaginate = function (options) {
26    var defaults = {
27        paginateElement: 'li',
28        hashPage: 'page',
29        elementsPerPage: 10,
30        effect: 'default',
31        slideOffset: 200,
32        firstButton: true,
33        firstButtonText: '<<',
34        lastButton: true,
35        lastButtonText: '>>',        
36        prevButton: true,
37        prevButtonText: '<',        
38        nextButton: true,
39        nextButtonText: '>'
40    }
41        
42    return this.each (function (instance) {        
43        
44        var plugin = {};
45        plugin.el = $(this);
46        plugin.el.addClass('easyPaginateList');
47
48        plugin.settings = {
49            pages: 0,
50            objElements: Object,
51            currentPage: 1
52        }
53        
54        var getNbOfPages = function() {
55            return Math.ceil(plugin.settings.objElements.length / plugin.settings.elementsPerPage);         
56        };
57
58        var displayNav = function() {
59            htmlNav = '<div class="easyPaginateNav">';
60            htmlNav += '<ul class="pagination">';
61            
62            if(plugin.settings.firstButton) {
63                htmlNav += '<li><span class="button">';
64                htmlNav += '<a href="#'+plugin.settings.hashPage+':1" title="First page" rel="1" class="first">'+plugin.settings.firstButtonText+'</a>';
65                htmlNav += '</span></li>';
66            }
67
68            if(plugin.settings.prevButton) {
69                htmlNav += '<li><span class="button">';
70                htmlNav += '<a href="" title="Previous" rel="" class="prev">'+plugin.settings.prevButtonText+'</a>';
71                htmlNav += '</span></li>';
72            }
73            
74            for(i = 1;i <= plugin.settings.pages;i++) {
75                htmlNav += '<li><span class="page">';
76                htmlNav += '<a href="#'+plugin.settings.hashPage+':'+i+'" title="Page '+i+'" rel="'+i+'" class="page">'+i+'</a>';
77                htmlNav += '</span></li>';
78            };
79            
80
81            if(plugin.settings.nextButton) {
82                htmlNav += '<li><span class="button">';
83                htmlNav += '<a href="" title="Next" rel="" class="next">'+plugin.settings.nextButtonText+'</a>';
84                htmlNav += '</span></li>';
85            }
86            
87            if(plugin.settings.lastButton) {
88                htmlNav += '<li><span class="button">';
89                htmlNav += '<a href="#'+plugin.settings.hashPage+':'+plugin.settings.pages+'" title="Last page" rel="'+plugin.settings.pages+'" class="last">'+plugin.settings.lastButtonText+'</a>';
90                htmlNav += '</span></li>';
91            }
92            htmlNav += '</ul>';
93            htmlNav += '</div>';
94            plugin.nav = $(htmlNav);
95            plugin.nav.css({
96                'width': plugin.el.width()
97            });
98            plugin.el.after(plugin.nav);
99
100            var elSelector = '#' + plugin.el.get(0).id + ' + ';
101            $(elSelector + ' .easyPaginateNav a.page,'
102                + elSelector + ' .easyPaginateNav a.first,'
103                + elSelector + ' .easyPaginateNav a.last').on('click', function(e) {
104                e.preventDefault();
105                displayPage($(this).attr('rel'));                
106            });
107
108            $(elSelector + ' .easyPaginateNav a.prev').on('click', function(e) {
109                e.preventDefault();
110                page = plugin.settings.currentPage > 1?parseInt(plugin.settings.currentPage) - 1:1;
111                displayPage(page);
112            });
113
114            $(elSelector + ' .easyPaginateNav a.next').on('click', function(e) {
115                e.preventDefault();
116                page = plugin.settings.currentPage < plugin.settings.pages?parseInt(plugin.settings.currentPage) + 1:plugin.settings.pages;
117                displayPage(page);
118            });
119        };
120        
121        var displayPage = function(page, forceEffect) {
122            if(plugin.settings.currentPage != page) {
123                plugin.settings.currentPage = parseInt(page);
124                offsetStart = (page - 1) * plugin.settings.elementsPerPage;
125                offsetEnd = page * plugin.settings.elementsPerPage;
126                if(typeof(forceEffect) != 'undefined') {
127                    eval("transition_"+forceEffect+"("+offsetStart+", "+offsetEnd+")");
128                }else {
129                    eval("transition_"+plugin.settings.effect+"("+offsetStart+", "+offsetEnd+")");
130                }
131                
132                plugin.nav.find('.current').removeClass('current');
133                plugin.nav.find('a.page:eq('+(page - 1)+')').addClass('current');
134                
135                switch(plugin.settings.currentPage) {
136                    case 1:
137                        $('.easyPaginateNav a', plugin).removeClass('disabled');
138                        $('.easyPaginateNav a.first, .easyPaginateNav a.prev', plugin).addClass('disabled');
139                        break;
140                    case plugin.settings.pages:
141                        $('.easyPaginateNav a', plugin).removeClass('disabled');
142                        $('.easyPaginateNav a.last, .easyPaginateNav a.next', plugin).addClass('disabled');
143                        break;
144                    default:
145                        $('.easyPaginateNav a', plugin).removeClass('disabled');
146                        break;
147                }
148            }
149        };
150        
151        var transition_default = function(offsetStart, offsetEnd) {
152            plugin.currentElements.hide();
153            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
154            plugin.el.html(plugin.currentElements);
155            plugin.currentElements.show();
156        };
157        
158        var transition_fade = function(offsetStart, offsetEnd) {
159            plugin.currentElements.fadeOut();
160            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
161            plugin.el.html(plugin.currentElements);
162            plugin.currentElements.fadeIn();
163        };
164        
165        var transition_slide = function(offsetStart, offsetEnd) {
166            plugin.currentElements.animate({
167                'margin-left': plugin.settings.slideOffset * -1,
168                'opacity': 0
169            }, function() {
170                $(this).remove();
171            });
172            
173            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
174            plugin.currentElements.css({
175                'margin-left': plugin.settings.slideOffset,
176                'display': 'block',
177                'opacity': 0,
178                'min-width': plugin.el.width() / 2
179            });
180            plugin.el.html(plugin.currentElements);
181            plugin.currentElements.animate({
182                'margin-left': 0,
183                'opacity': 1
184            });
185        };
186                
187        var transition_climb = function(offsetStart, offsetEnd) {            
188            plugin.currentElements.each(function(i) {
189                var $objThis = $(this);
190                setTimeout(function() {
191                    $objThis.animate({
192                        'margin-left': plugin.settings.slideOffset * -1,
193                        'opacity': 0
194                    }, function() {
195                        $(this).remove();
196                    });
197                }, i * 200);
198            });
199            
200            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
201            plugin.currentElements.css({
202                'margin-left': plugin.settings.slideOffset,
203                'display': 'block',
204                'opacity': 0,
205                'min-width': plugin.el.width() / 2
206            });
207            plugin.el.html(plugin.currentElements);
208            plugin.currentElements.each(function(i) {
209                var $objThis = $(this);
210                setTimeout(function() {
211                    $objThis.animate({
212                        'margin-left': 0,
213                        'opacity': 1
214                    });
215                }, i * 200);
216            });
217        };
218                
219        plugin.settings = $.extend({}, defaults, options);
220        
221        plugin.currentElements = $([]);
222        plugin.settings.objElements = plugin.el.find(plugin.settings.paginateElement);
223        plugin.settings.pages = getNbOfPages();
224        if(plugin.settings.pages > 1) {
225            plugin.el.html();
226    
227            // Here we go
228            displayNav();
229            
230            page = 1;
231            if(document.location.hash.indexOf('#'+plugin.settings.hashPage+':') != -1) {
232                page = parseInt(document.location.hash.replace('#'+plugin.settings.hashPage+':', ''));
233                if(page.length <= 0 || page < 1 || page > plugin.settings.pages) {
234                    page = 1;
235                }
236            }
237            
238            displayPage(page, 'default');
239        }
240    });
241};
242})(jQuery);