WP Ultimate Post Grid / 4.0.1

WP Ultimate Post Grid v4.0.1

wp-ultimate-post-grid / assets / js / public / grid / responsive.js

responsive.js in WP Ultimate Post Grid 4.0.1, at assets/js/public/grid/responsive.js

170 lines 7.0 KB

Raw Download Zip

1	export default ( elemId, args ) => {
2	return {
3	currentDevice: false,
4	checkDevice() {
5	const device = this.getDevice();
6
7	if ( device !== this.currentDevice ) {
8	this.updateDevice( device );
9
10	// Only need to reinit toggles if device changes.
11	this.initToggles();
12	}
13	},
14	updateDevice( device ) {
15	this.currentDevice = device;
16
17	// Update grid.
18	let elemsToUpdate = [ this.elem ];
19
20	// And filters.
21	for ( let filter of this.filters ) {
22	if ( filter.hasOwnProperty( 'elem' ) && filter.elem ) {
23	// Check for parent first.
24	const filterParent = filter.elem.parentElement;
25
26	if ( filterParent.classList.contains( 'wpupg-filter-container' ) ) {
27	elemsToUpdate.push( filterParent );
28	} else {
29	elemsToUpdate.push( filter.elem );
30	}
31	}
32	}
33
34	for ( let elem of elemsToUpdate ) {
35	// Remove existing classes.
36	elem.classList.remove( 'wpupg-responsive-desktop' );
37	elem.classList.remove( 'wpupg-responsive-tablet' );
38	elem.classList.remove( 'wpupg-responsive-mobile' );
39
40	// Add new device class.
41	elem.classList.add( `wpupg-responsive-${device}` );
42	}
43	},
44	getDevice() {
45	let device = 'desktop';
46
47	if ( this.isPreview ) {
48	// Check what preview mode is enabled.
49	const activePreview = document.querySelector( '.wpupg-admin-modal-grid-preview-device.active' );
50
51	if ( activePreview ) {
52	device = activePreview.dataset.device;
53	}
54	} else {
55	// Use viewport on actual site.
56	const viewport = this.getViewport();
57
58	if ( viewport.width <= wpupg_public.breakpoints.tablet ) {
59	device = 'tablet';
60	}
61	if ( viewport.width <= wpupg_public.breakpoints.mobile ) {
62	device = 'mobile';
63	}
64	}
65
66	return device;
67	},
68	getViewport() {
69	// Source: https://stackoverflow.com/questions/19291873/window-width-not-the-same-as-media-query/19292035#19292035
70	var e = window, a = 'inner';
71	if (!('innerWidth' in window )) {
72	a = 'client';
73	e = document.documentElement \|\| document.body;
74	}
75	return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
76	},
77	initToggles() {
78	if ( this.currentDevice ) {
79	// Loop all filters.
80	for ( let filter of this.filters ) {
81	if ( filter.hasOwnProperty( 'elem' ) && filter.elem ) {
82	const filterContainer = filter.elem.parentElement;
83	const filterLabel = filterContainer.querySelector( '.wpupg-filter-label' );
84
85	// Remove any existing toggle result.
86	filter.elem.style.display = '';
87	if ( filterContainer.querySelector( '.wpupg-filter-toggle-closed' ) ) {
88	filterContainer.querySelector( '.wpupg-filter-toggle-closed' ).style.display = '';
89	}
90	if ( filterContainer.querySelector( '.wpupg-filter-toggle-open' ) ) {
91	filterContainer.querySelector( '.wpupg-filter-toggle-open' ).style.display = '';
92	}
93
94	if ( filterLabel ) {
95	// Remove existing event.
96	filterLabel.removeEventListener( 'click', this.clickedToggle, false );
97	filterLabel.removeEventListener( 'keydown', this.clickedToggle, false );
98
99	// Add click event if filter is toggleable on current device.
100	if ( filterContainer.classList.contains( `wpupg-filter-container-${ this.currentDevice }-toggle` ) ) {
101	filterLabel.addEventListener( 'click', this.clickedToggle );
102	filterLabel.addEventListener( 'keydown', this.clickedToggle );
103
104	filterContainer.dataset.toggle = filterContainer.classList.contains( `wpupg-filter-container-${ this.currentDevice }-toggle_open` ) ? 'open' : 'closed';
105	}
106	}
107	}
108	}
109	}
110	},
111	clickedToggle( e ) {
112
113	// Allow click or keypress (accessibility).
114	const key = e.which \|\| e.keyCode \|\| 0;
115
116	if ( 'click' === e.type \|\| ( 13 === key \|\| 32 === key ) ) {
117	e.preventDefault();
118
119	// Get container.
120	let filterContainer = false;
121
122	for ( var target = e.target; target; target = target.parentNode ) {
123	if ( target.matches( '.wpupg-filter-container' ) ) {
124	filterContainer = target;
125	break;
126	}
127	}
128
129	if ( filterContainer ) {
130	const currentState = filterContainer.dataset.toggle;
131
132	if ( 'closed' === currentState ) {
133	// Toggle icons.
134	filterContainer.querySelector( '.wpupg-filter-toggle-closed' ).style.display = 'none';
135	filterContainer.querySelector( '.wpupg-filter-toggle-open' ).style.display = 'inline';
136
137	filterContainer.querySelector( '.wpupg-filter' ).style.display = 'block';
138
139	filterContainer.dataset.toggle = 'open';
140	} else {
141	filterContainer.querySelector( '.wpupg-filter-toggle-open' ).style.display = 'none';
142	filterContainer.querySelector( '.wpupg-filter-toggle-closed' ).style.display = 'inline';
143
144	filterContainer.querySelector( '.wpupg-filter' ).style.display = 'none';
145
146	filterContainer.dataset.toggle = 'closed';
147	}
148	}
149	}
150	},
151	initResponsive() {
152	this.checkDevice();
153
154	this.isotope.on( 'layoutComplete', () => {
155	this.checkDevice();
156	} );
157
158	// When previewing, update device immediately after clicking on a preview link.
159	if ( this.isPreview ) {
160	const previewDevices = document.querySelectorAll( '.wpupg-admin-modal-grid-preview-device' );
161
162	for ( let previewDevice of previewDevices ) {
163	previewDevice.addEventListener( 'click', (e) => {
164	this.updateDevice( e.target.dataset.device );
165	} );
166	}
167	}
168	}
169	}
170	};