https://plainecommune.fr/_assets/cffc4cc2cab56e8b9611d2e1ccda4d2e/Plaine/JavaScript/Tabs.js?1765808892

1/***************************************************************
2 *  Copyright notice
3 *
4 *  (c) 2012 Alexander Kellner <[email protected]>, in2code
5 *
6 *  All rights reserved
7 *
8 *  This script is part of the TYPO3 project. The TYPO3 project is
9 *  free software; you can redistribute it and/or modify
10 *  it under the terms of the GNU General Public License as published by
11 *  the Free Software Foundation; either version 3 of the License, or
12 *  (at your option) any later version.
13 *
14 *  The GNU General Public License can be found at
15 *  http://www.gnu.org/copyleft/gpl.html.
16 *
17 *  This script is distributed in the hope that it will be useful,
18 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
19 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
20 *  GNU General Public License for more details.
21 *
22 *  This copyright notice MUST APPEAR in all copies of the script!
23 ***************************************************************/
24
25jQuery(document).ready(function($) {
26	$.fn.powermailTabs = function(options) {
27		'use strict';
28		var $form = jQuery(this);
29		options = jQuery.extend({
30			container: 'fieldset',
31			header: 'legend',
32			tabs: true,
33			navigation: true,
34			openTabOnError: true,
35			tabIndex: true,
36			tabMenuClassName: 'btn-group',
37			tabMenuItemActiveClassName: 'btn-primary',
38			tabMenuItemErrorClassName: 'btn-danger'
39		}, options);
40
41		showOnlyFirstFieldset($form, options);
42		generateTabNavigation($form, options);
43		generateButtonNavigation($form, options);
44		cleanAndAddErrorClassToTabs($form, options);
45		openTabWithError($form, options);
46	};
47
48	/**
49	 * initial show first fieldset
50	 *
51	 * @param {object} $form Complete form object
52	 * @param {array} options
53	 * @returns {void}
54	 */
55	function showOnlyFirstFieldset($form, options) {
56		hideAllFieldsets($form, options);
57		$form.find(options.container).first().show();
58	}
59
60	/**
61	 * Generate Tabs
62	 *
63	 * @param {jQuery} $form Complete form object
64	 * @param {array} options
65	 * @return {void}
66	 */
67
68	//Maj de la tab navigation 
69	function generateTabNavigation($form, options) {
70		if (!options.tabs) {
71			return;
72		}
73
74		// generate menu
75		var $tabMenu = $('<div />', {
76			'id':'powermail_tabmenu',
77			'class': options.tabMenuClassName
78		}).insertBefore(
79			$form.children(options.container).filter(':first')
80		);
81
82		// all containers
83		$form.children(options.container).each(function(i, $fieldset) {
84			//tab_menu
85			//<button type="button" class="btn btn-default">Left</button>
86			var div = $('<div/>')
87				.html($(this).children(options.header).html())
88				.addClass((i==0) ? options.tabMenuItemActiveClassName : '')
89				.addClass('item' + i)
90				.addClass('btn-default')
91				.on('click keypress', {
92					container: $form.children(options.container),
93					fieldset: $($fieldset)
94				}, function() {
95					var $listItem = $(this);
96					var indexTab = $listItem.parent().children().index($listItem);
97					showTab($form, options, $listItem, indexTab);
98				});
99			div.prop('tabindex', 0);
100			var mySecondDiv='';
101			var iplusun = i+1;
102	        mySecondDiv = '<hr><div class="item_inscription"><p>'+iplusun+'</p></div>';
103	        div.wrapInner("<p class='txt'></p>");
104	        div.prepend(mySecondDiv);
105			$tabMenu.append(div);
106		});
107	}
108
109	/**
110	 * Generate Button Navigation
111	 *
112	 * @param {object} $form Complete form object
113	 * @param {array} options
114	 * @return {void}
115	 */
116	function generateButtonNavigation($form, options) {
117		if (!options.navigation) {
118			return;
119		}
120
121		// buttons
122		$form.children(options.container).each(function(i) {

123			var navigationContainer = $('<div />')
124				.addClass('powermail_fieldwrap')
125				.addClass('powermail_tab_navigation')
126				.appendTo($(this));
127			if (i > 0) {
128				navigationContainer.append(createPreviousButton($form, options));
129			}
130			if (i < ($form.children(options.container).length - 1)) {
131				navigationContainer.append(createNextButton($form, options));
132			}
133		});
134	}
135
136	/**
137	 * Add error class to tab and show first if Parsley.js is active
138	 *
139	 * @param {object} $form Complete form object
140	 * @param {array} options
141	 * @return {void}
142	 */
143	function cleanAndAddErrorClassToTabs($form, options) {
144		if ($.fn.parsley && $form.data('parsley-validate') === 'data-parsley-validate') {
145			$form.parsley().subscribe('parsley:field:validated', function() {
146				removeErrorClassFromTabs($form, options);
147				addErrorClassToTabs($form, options);
148			});
149		}
150	}
151
152	/**
153	 * Open Tab with error
154	 *
155	 * @param {object} $form Complete form object
156	 * @param {array} options
157	 * @return {void}
158	 */
159	function openTabWithError($form, options) {
160		if (options.openTabOnError) {
161			$.listen('parsley:field:error', function() {
162				setTimeout(function() {
163					$form
164						.find('.' + options.tabMenuClassName + ' > .' + options.tabMenuItemErrorClassName + ':first')
165						.click();
166				}, 50);
167			});
168		}
169	}
170
171	/**
172	 ************* Internal *************
173	 */
174
175	/**
176	 * Show Tab by index
177	 *
178	 * @param {object} $form Complete form object
179	 * @param {array} options
180	 * @param {object} $listItem
181	 * @param {int} clickedIndex
182	 * @return {void}
183	 */
184	//Ajout / suppr class pour avancement formulaire
185	function showTab($form, options, $listItem, clickedIndex) {
186		$activeTab = getActiveTabMenuListItem($form, options);
187		$activeTab.removeClass(options.tabMenuItemActiveClassName);
188		$listItem.addClass(options.tabMenuItemActiveClassName);
189		$listItem.prevAll().addClass("previous");
190		$listItem.nextAll().removeClass("previous");
191		hideAllFieldsets($form, options);
192		$('.powermail_fieldset', $form).slice(clickedIndex, clickedIndex + 1).show();
193	}
194
195	/**
196	 * Hide all fieldsets
197	 *
198	 * @param {object} $form Complete form object
199	 * @param {array} options
200	 * @return {void}
201	 */
202	function hideAllFieldsets($form, options) {
203		$form.children(options.container).hide();
204	}
205
206	/**
207	 * Create next button
208	 *
209	 * @param {object} $form Complete form object
210	 * @param {array} options
211	 * @return {object}
212	 */
213	function createPreviousButton($form, options) {
214		return $('<a />')
215			.prop('href', '#')
216			.addClass('btn btn-warning')
217			.html('<')
218			.click(function(e) {
219				e.preventDefault();
220				showPreviousTab($form, options);
221			});
222	}
223
224	/**
225	 * Create next button
226	 *
227	 * @param {object} $form Complete form object
228	 * @param {array} options
229	 * @return {object}
230	 */
231	function createNextButton($form, options) {
232		return $('<a />')
233			.prop('href', '#')
234			.addClass('btn btn-primary pull-right')
235			.html('>')
236			.click(function(e) {
237				e.preventDefault();
238				showNextTab($form, options);
239			});
240	}
241
242	/**
243	 * Show next Tab
244	 *
245	 * @param {object} $form Complete form object
246	 * @param {array} options
247	 * @return {void}
248	 */
249	//Ajout class pour avancement formulaire
250	function showNextTab($form, options) {
251		var currentActiveTabIndex = getIndexOfCurrentActiveTab($form, options);
252		$activeTab = getActiveTabMenuListItem($form, options);
253		$activeTab.removeClass(options.tabMenuItemActiveClassName).next().addClass(options.tabMenuItemActiveClassName);
254		$activeTab.removeClass(options.tabMenuItemActiveClassName).next().prevAll().addClass("previous");
255		showFieldsetByIndex($form, options, currentActiveTabIndex + 1);
256	}
257
258	/**
259	 * Show previous Tab
260	 *
261	 * @param {object} $form Complete form object
262	 * @param {array} options
263	 * @return {void}
264	 */
265	//Suppr class pour avancement formulaire
266	function showPreviousTab($form, options) {
267		var currentActiveTabIndex = getIndexOfCurrentActiveTab($form, options);
268		$activeTab = getActiveTabMenuListItem($form, options);
269		$activeTab.removeClass(options.tabMenuItemActiveClassName).prev().addClass(options.tabMenuItemActiveClassName);
270		$activeTab.removeClass(options.tabMenuItemActiveClassName).prev().nextAll().removeClass("previous");
271		showFieldsetByIndex($form, options, currentActiveTabIndex - 1);
272	}
273
274	/**
275	 * Show a powermail fieldset by given index
276	 *
277	 * @param {object} $form Complete form object
278	 * @param {array} options
279	 * @param {int} index
280	 * @return {void}
281	 */
282

283	//Go top formulaire on next step
284	function showFieldsetByIndex($form, options, index) {
285		hideAllFieldsets($form, options);
286		$form.find('.powermail_fieldset').slice(index, index + 1).show();
287		$('html, body').animate({
288	        scrollTop: $form.offset().top
289	    }, 500);
290	}
291
292	/**
293	 * Get index of current active tab
294	 *
295	 * @param {object} $form Complete form object
296	 * @param {array} options
297	 * @returns {int}
298	 */
299	function getIndexOfCurrentActiveTab($form, options) {
300		var $listItems = getCurrentTabMenuListItems($form, options);
301		var currentActiveTabIndex = $listItems.index(getActiveTabMenuListItem($form, options));
302		return parseInt(currentActiveTabIndex);
303	}
304
305	/**
306	 * Get all list items from tabmenu
307	 *
308	 * @param {object} $form Complete form object
309	 * @param {array} options
310	 * @returns {jQuery}
311	 */
312	function getCurrentTabMenuListItems($form, options) {
313		return $form.find('.' + options.tabMenuClassName).children();
314	}
315
316	/**
317	 * Get active list item in tabmenu
318	 *
319	 * @param {object} $form Complete form object
320	 * @param {array} options
321	 * @returns {jQuery}
322	 */
323	function getActiveTabMenuListItem($form, options) {
324		var $listItems = getCurrentTabMenuListItems($form, options);
325		return $listItems.filter('.' + options.tabMenuItemActiveClassName);
326	}
327
328	/**
329	 * Remove error classes from tab navigation
330	 *
331	 * @param {object} $form Complete form object
332	 * @param {array} options
333	 * @returns {void}
334	 */
335	function removeErrorClassFromTabs($form, options) {
336		var $tabMenuListItems = getCurrentTabMenuListItems($form, options);
337		$tabMenuListItems.removeClass(options.tabMenuItemErrorClassName);
338	}
339
340	/**
341	 * Add error classes to tab navigation
342	 *
343	 * @param {object} $form Complete form object
344	 * @param {array} options
345	 * @returns {void}
346	 */
347	function addErrorClassToTabs($form, options) {
348		if (!$form.parsley().isValid()) {
349			// iterate through all fields with errors
350			$form.find('.parsley-error').each(function() {
351				var errorIndex = $form.find('.powermail_fieldset').index($(this).closest('.powermail_fieldset'));
352				var $tabMenuListItems = getCurrentTabMenuListItems($form, options);
353				var $tabWithError = $tabMenuListItems.slice(errorIndex, errorIndex + 1);
354				$tabWithError.addClass(options.tabMenuItemErrorClassName);
355			});
356		}
357	}
358});