jQuery.Book/jquery-book.js at main · phaelax/jQuery.Book · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/*
 * jQuery Book v2 - A multi-step form
 * https://github.com/phaelax/jQuery.Book
 *
 * Copyright 2025, Dustin Zimnox
 * http://zimnox.com
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */

(function($){
	$.fn.book = function(options){

		var defaults = {
			onPageChange: function(){},
			speed: 400
		};

		var settings = $.extend(defaults, options);


		if (this.length > 1){
			this.each(function(){ $(this).book(options) });
			return this;
		}

		var pageIndex = 0;

		var $this = $(this);
		var self = this;

		var pages = $this.children('section');


		// Add events to next and previous buttons found in the form
		this.initialize = function(){

			pages.find('.book-page-next').on('click', this.nextPage);
			pages.find('.book-page-prev').on('click', this.prevPage);

			// Enter key moves to next page except on last page
			$this.on('keypress', (e)=> {
				if (e.key === "Enter"){
					if (pageIndex < pages.length-2){
						e.preventDefault();
						self.nextPage();
					}
				}
			});

			return this;
		}


		// Get current page number
		this.getPageIndex = function(){
			return pageIndex;
		}


		// Returns number of pages in this book
		this.getPageCount = function(){
			return pages.length;
		}


		// Set to a specific page
		this.setPage = function(i){

			return changePage(i);
		}


		function changePage(index){

			if (index >= 0 && index < pages.length && index != pageIndex){

				// Only check validation if moving forward. Exit early if validation fails.
				if ((index > pageIndex) && (typeof $this.valid === 'function')){

					if (!pages.eq(pageIndex).find(":input").valid()){
						return this;
					}
				}

				oldPageIndex = pageIndex;
				$newPage     = pages.eq(index);
				pageName     = ($newPage[0].hasAttribute("name")) ? $newPage.attr('name') : null;

				if (typeof settings.onPageChange == 'function'){
					settings.onPageChange.call(this, oldPageIndex, index, pages.length, pageName );
				}


				startX = pageIndex * 100;
				endX = index*100;


				$({x:startX}).animate({x:endX}, {
					duration: settings.speed,
					step: function(now){
						$this.find('section').css("transform", "translateX(-"+now+"%)" );
					},
					complete: function(){
						pageIndex = index;
					}
				});

			}

			return this;
		}


		// Moves forward to the next page, if one is available
		this.nextPage = function(){
			if (pageIndex >= pages.length-1) return this;
			return changePage(pageIndex+1);
		};


		// Moves back to the previous page. If on first page already, does nothing
		this.prevPage = function(){
			if (pageIndex == 0) return this;
			return changePage(pageIndex-1);

		};


		return this.initialize();
	};


}(jQuery));