https://www.visitvarmland.com/app/themes/a-theme/inc/gutenberg-blocks-scripts.js?ver=6.9.9

1/**
2 * Gutenberg scripts mostly for the public side but if necessary also for the editor
3 */
4
5
6/**
7 * Block: Collage 1 - X
8 * Toggle infobox.
9 */
10function aToggleInfoBox(id) {
11
12	let element = document.getElementById(id);
13	let check = element.classList.contains('atheme-collage--visible');
14
15	if(check) {
16		element.classList.remove('atheme-collage--visible');
17	} else {
18		element.classList.add('atheme-collage--visible');
19	}
20
21}
22
23
24
25
26
27
28/************************
29 * (Turid) News
30 ***********************/
31
32
33/**
34 * Block: News
35 * When user click on navigation we show next or previous post.
36 * @param id
37 * @param postId
38 */
39function aNewsShowBtn( id, postId ) {
40
41	let tmpId = id.split("_"); // ex: amkxv4MyjeBXLYD5I_next
42	id = tmpId[0]; // ex: amkxv4MyjeBXLYD5I
43	let dir = tmpId[1]; // ex: next ( prev, next, this )
44
45	if( ! postId) {
46		let postId = '';
47	}
48
49	// Get all image and news elements.
50	let imageParent = document.getElementById(id + "_images");
51	let images = imageParent.getElementsByClassName('atheme-components-news--content-images-image');
52	let postsParent = document.getElementById(id + "_items");
53	let posts = postsParent.getElementsByClassName('atheme-components-news--content-list-items');
54
55	// Get index of current element.
56	let nrOfImages = images.length; // Work both for images and posts.
57	let currentIndex = 0;
58	for(let i=0;i<nrOfImages;i++) {
59
60		// If we navigate via navigation buttons.
61		if( dir === 'prev' || dir === 'next') {
62			// If current element has class "ac-display--block", it´s the active one.
63			if( images[i].classList.contains('ac-display--block') ) {
64				currentIndex = i;
65			}
66		}
67
68		// If we navigate via the list of news items.
69		if( dir === 'this' ) {
70			let itemId = posts[i].id;
71			if( itemId === 'acnPost-' + postId ) {
72				currentIndex = i;
73			}
74		}
75
76	}
77
78	// Hide all images.
79	aNewsHideAllImages(id);
80
81	// Remove active class on news post.
82	aNewsInactivatePost(id);
83
84	// Add active class to news image.
85	aNewsShowImage( id, currentIndex, dir, nrOfImages );
86
87	// Add active class to news post.
88	aNewsShowPost( id, currentIndex, dir, nrOfImages );
89
90}
91
92/**
93 * Block: News
94 * Hide all images in news list.
95 * @param id
96 */
97function aNewsHideAllImages( id ) {
98
99	if( id ) {
100		let parent = document.getElementById(id + "_images")
101		let items = parent.getElementsByClassName('atheme-components-news--content-images-image');
102		for ( var i = 0; i < items.length; i++ ) {
103			items[i].classList.remove( 'ac-display--block' );
104		}
105	}
106
107}
108
109/**
110 * Block: News
111 * Remove class "ac-active--block" for current active post.
112 * @param id
113 */
114function aNewsInactivatePost( id ) {
115
116	if( id ) {
117		let parent = document.getElementById( id + "_items" )
118		let items = parent.getElementsByClassName( 'atheme-components-news--content-list-items' );
119		for ( var i = 0; i < items.length; i++ ) {
120
121			items[i].classList.remove( 'ac-active--block' );
122
123			// Hide span with news text.
124			let span = items[i].querySelectorAll( 'span.atheme-components-news--content-list-content.ac-display--block' );
125			if(span[0]) {
126				span[0].classList.remove( 'ac-display--block' );
127			}
128
129		}
130	}
131
132}
133
134/**
135 * Block: News
136 * Show this, previus or next news image.
137 * @param id
138 * @param index
139 * @param dir
140 * @param nrOfImages
141 */
142function aNewsShowImage( id, index, dir, nrOfImages ) {
143
144	// If dir is 'this' we show current post.
145
146	// Adjust index down.
147	if( dir === 'prev' ) {
148		index--;
149		if( index < 0 ) { index = nrOfImages - 1 }
150	}
151
152	// Adjust index up.
153	if( dir === 'next' ) {
154		index++;
155		if( index > ( nrOfImages - 1 ) ) { index = 0 }
156	}
157
158	// Show image.
159	if( id ) {
160		let parent = document.getElementById( id + "_images" )
161		let items = parent.getElementsByClassName( 'atheme-components-news--content-images-image' );
162		items[index].classList.add( 'ac-display--block' );
163	}
164
165}
166
167/**
168 * Block: News
169 * Show this, previous or next news post.
170 * @param id
171 * @param index
172 * @param dir
173 * @param nrOfPosts
174 */
175function aNewsShowPost( id, index, dir, nrOfPosts ) {
176
177	// If dir is 'this' (user clicked on list with title and preamble) we show current post. No need to adjust index.
178
179	// Adjust index down.
180	if( dir === 'prev' ) {
181		index--;
182		if( index < 0 ) { index = nrOfPosts - 1 }
183	}
184
185	// Adjust index up.
186	if( dir === 'next' ) {
187		index++;
188		if( index > (nrOfPosts - 1) ) { index = 0 }
189	}
190
191	// Show post.
192	if( id ) {
193		let parent = document.getElementById( id + "_items" )
194
195		// Add class to show li element.
196		let items = parent.getElementsByClassName('atheme-components-news--content-list-items');
197		items[index].classList.add( 'ac-active--block' );
198
199		// Add class to show span element.
200		let span = items[index].querySelectorAll( 'span.atheme-components-news--content-list-content' );
201		if(span[0]) {
202			span[0].classList.add( 'ac-display--block' );
203		}
204
205	}
206
207}