← All changes | resources/backend/js/tabs.js +86 -85 2.2.7 → 3.4.3 View file →

		@@ -2,62 +2,61 @@
2	2	* Provides functionality for tabbed interfaces.
3	3	*
4	4	* @since 2.2.5
5	5	*
6		- * @package ConvertKit
7		- * @author ConvertKit
	6	+ * @author ConvertKit
8	7	*/
9	8
	9	+/* eslint-disable no-unused-vars */
10	10	/**
11		- * Initializes tabbed interfaces
	11	+ * Initializes tabbed interfaces.
12	12	*
13		- * @since 2.2.5
	13	+ * @since 2.2.5
14	14	*/
15	15	function convertKitTabsInit() {
	16	+ // eslint-disable-line no-unused-vars
	17	+ // Safely call this function by destroying any previously initialized instances.
	18	+ convertKitTabsDestroy();
16	19
17		- ( function( $ ) {
	20	+ // Iterate through all JS tab instances, initializing each one.
	21	+ document
	22	+ .querySelectorAll('.convertkit-js-tabs')
	23	+ .forEach(function (navTabContainer) {
	24	+ const navTabPanelsContainer =
	25	+ navTabContainer.dataset.panelsContainer;
	26	+ const navTabPanel = navTabContainer.dataset.panel;
	27	+ const navTabActive = navTabContainer.dataset.active;
18	28
19		- // Safely call this function by destroying any previously initialized instances.
20		- convertKitTabsDestroy();
	29	+ // Call update.
	30	+ const activeTabElement = navTabContainer.querySelector(
	31	+ 'a.' + navTabActive
	32	+ );
	33	+ convertKitTabsUpdate(
	34	+ navTabContainer,
	35	+ navTabPanelsContainer,
	36	+ navTabPanel,
	37	+ navTabActive,
	38	+ activeTabElement ? activeTabElement.getAttribute('href') : null
	39	+ );
21	40
22		- // Iterate through all JS tab instances, initializing each one.
23		- $( '.convertkit-js-tabs' ).each(
24		- function() {
	41	+ // Register a listener when a tab is clicked.
	42	+ navTabContainer.addEventListener('click', function (e) {
	43	+ if (e.target.tagName === 'A') {
	44	+ e.preventDefault();
25	45
26		- const nav_tab_container = $( this ),
27		- nav_tab_panels_container = $( nav_tab_container ).data( 'panels-container' ),
28		- nav_tab_panel = $( nav_tab_container ).data( 'panel' ),
29		- nav_tab_active = $( nav_tab_container ).data( 'active' ),
30		- match_height = $( nav_tab_container ).data( 'match-height' );
31		-
32		- // Call update.
33		- convertKitTabsUpdate( nav_tab_container, nav_tab_panels_container, nav_tab_panel, nav_tab_active, $( 'a.' + nav_tab_active, $( nav_tab_container ) ).attr( 'href' ) );
34		-
35		- // If fix height is set, define the height of the content areas to match the parent of the nav tab container.
36		- if ( typeof match_height !== 'undefined' ) {
37		- $( nav_tab_panels_container ).height( $( match_height ).innerHeight() );
	46	+ // Update the UI to show the active tab and content associated with it.
	47	+ convertKitTabsUpdate(
	48	+ navTabContainer,
	49	+ navTabPanelsContainer,
	50	+ navTabPanel,
	51	+ navTabActive,
	52	+ e.target.getAttribute('href')
	53	+ );
38	54	}
39		-
40		- // Register a listener when a tab is clicked.
41		- $( nav_tab_container ).on(
42		- 'click.convertkit_tabs',
43		- 'a',
44		- function( e ) {
45		-
46		- e.preventDefault();
47		-
48		- // Update the UI to show the active tab and content associated with it.
49		- convertKitTabsUpdate( nav_tab_container, nav_tab_panels_container, nav_tab_panel, nav_tab_active, $( this ).attr( 'href' ) );
50		-
51		- }
52		- );
53		-
54		- }
55		- );
56		-
57		- } )( jQuery );
58		-
	55	+ });
	56	+ });
59	57	}
	58	+/* eslint-enable no-unused-vars */
60	59
61	60	/**
62	61	* For the given active tab:
63	62	* - Hides all other content in the group
		@@ -62,42 +61,49 @@
62	61	* For the given active tab:
63	62	* - Hides all other content in the group
64	63	* - Shows content associated with the active tab
65	64	*
66		- * @since 1.0.0
	65	+ * @since 1.0.0
67	66	*
68		- * @param object nav_tab_container <ul> Navigation Tab Container
69		- * @param string nav_tab_panels_container ID of element containing content panel, to display, which associate with the navigation tabs
70		- * @param string nav_tab_panel Class of elements containing content panels, to hide, which associate with the navigation tabs
71		- * @param string nav_tab_active Class to apply to the clicked active_tab element
72		- * @param string active_tab ID of <a> tab which has been selected / clicked
	67	+ * @param {Object} navTabContainer <ul> Navigation Tab Container.
	68	+ * @param {string} navTabPanelsContainer ID of element containing content panel, to display, which associate with the navigation tabs.
	69	+ * @param {string} navTabPanel Class of elements containing content panels, to hide, which associate with the navigation tabs.
	70	+ * @param {string} navTabActive Class to apply to the clicked activeTab element.
	71	+ * @param {string} activeTab ID of <a> tab which has been selected / clicked.
73	72	*/
74		-function convertKitTabsUpdate( nav_tab_container, nav_tab_panels_container, nav_tab_panel, nav_tab_active, active_tab ) {
	73	+function convertKitTabsUpdate(
	74	+ navTabContainer,
	75	+ navTabPanelsContainer,
	76	+ navTabPanel,
	77	+ navTabActive,
	78	+ activeTab
	79	+) {
	80	+ // If we don't have an active tab at this point, we don't have any tabs, so bail.
	81	+ if (
	82	+ typeof activeTab === 'undefined' ||
	83	+ activeTab === null ||
	84	+ activeTab.length === 0
	85	+ ) {
	86	+ return;
	87	+ }
75	88
76		- ( function( $ ) {
	89	+ // Deactivate all tabs in this container.
	90	+ navTabContainer
	91	+ .querySelectorAll('a')
	92	+ .forEach((tab) => tab.classList.remove(navTabActive));
77	93
78		- // If we don't have an active tab at this point, we don't have any tabs, so bail.
79		- if ( typeof active_tab === 'undefined' ) {
80		- return;
81		- }
82		- if ( active_tab.length === 0 ) {
83		- return;
84		- }
	94	+ // Hide all panels in this container.
	95	+ document
	96	+ .querySelectorAll(navTabPanelsContainer + ' ' + navTabPanel)
	97	+ .forEach((panel) => (panel.style.display = 'none'));
85	98
86		- // Deactivate all tabs in this container.
87		- $( 'a', $( nav_tab_container ) ).removeClass( nav_tab_active );
	99	+ // Activate the clicked / selected tab in this container.
	100	+ navTabContainer
	101	+ .querySelector('a[href="' + activeTab + '"]')
	102	+ .classList.add(navTabActive);
88	103
89		- // Hide all panels in this container.
90		- $( nav_tab_panel, $( nav_tab_panels_container ) ).hide();
91		-
92		- // Activate the clicked / selected tab in this container.
93		- $( 'a[href="' + active_tab + '"]', $( nav_tab_container ) ).addClass( nav_tab_active );
94		-
95		- // Show the active tab's panels in this container.
96		- $( active_tab ).show();
97		-
98		- } )( jQuery );
99		-
	104	+ // Show the active tab's panels in this container.
	105	+ document.querySelector(activeTab).style.display = 'block';
100	106	}
101	107
102	108	/**
103	109	* Destroys previously initialized tabbed interfaces, no longer
		@@ -102,22 +108,17 @@
102	108	/**
103	109	* Destroys previously initialized tabbed interfaces, no longer
104	110	* listening to events.
105	111	*
106		- * @since 1.0.0
	112	+ * @since 1.0.0
107	113	*/
108	114	function convertKitTabsDestroy() {
109		-
110		- ( function( $ ) {
111		-
112		- // Iterate through all JS tab instances, destroying each one.
113		- $( '.convertkit-js-tabs' ).each(
114		- function() {
115		-
116		- $( this ).off( 'click.convertkit_tabs', 'a' );
117		-
118		- }
119		- );
120		-
121		- } )( jQuery );
122		-
	115	+ // Iterate through all JS tab instances, destroying each one.
	116	+ document
	117	+ .querySelectorAll('.convertkit-js-tabs')
	118	+ .forEach(function (tabInstance) {
	119	+ // Remove the click event listener.
	120	+ tabInstance.removeEventListener('click', tabInstance.clickHandler);
	121	+ // Remove the clickHandler property.
	122	+ delete tabInstance.clickHandler;
	123	+ });
123	124	}