https://gaegames.com/wp-content/themes/coinslot/assets/js/gallery.js?ver=0.1.0

1/**
2 * Screenshot lightbox built on <dialog>. Without JS the links open the full image.
3 */
4( function () {
5	'use strict';
6
7	var gallery = document.querySelector( '[data-cs-gallery]' );
8	if ( ! gallery || typeof HTMLDialogElement !== 'function' ) {
9		return;
10	}
11	var l10n = window.coinslotGallery || {};
12	var links = Array.prototype.slice.call( gallery.querySelectorAll( '[data-cs-shot]' ) );
13	var index = 0;
14	var opener = null;
15
16	function icon( path ) {
17		return '<svg class="cs-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="' + path + '"/></svg>';
18	}
19	// Phosphor arrow-left, arrow-right and x (regular), MIT.
20	var ARROW_LEFT = 'M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z';
21	var ARROW_RIGHT = 'M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z';
22	var CLOSE = 'M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z';
23
24	var dialog = document.createElement( 'dialog' );
25	dialog.className = 'cs-lightbox';
26	dialog.innerHTML =
27		'<img class="cs-lightbox__img" alt="">' +
28		'<div class="cs-lightbox__bar">' +
29		'<span class="cs-lightbox__count" aria-live="polite"></span>' +
30		'<button type="button" class="cs-iconbtn" data-dir="-1">' + icon( ARROW_LEFT ).replace( 'cs-icon', 'cs-icon cs-flip' ) + '</button>' +
31		'<button type="button" class="cs-iconbtn" data-dir="1">' + icon( ARROW_RIGHT ).replace( 'cs-icon', 'cs-icon cs-flip' ) + '</button>' +
32		'<button type="button" class="cs-iconbtn" data-close>' + icon( CLOSE ) + '</button>' +
33		'</div>';
34	document.body.appendChild( dialog );
35
36	var img = dialog.querySelector( 'img' );
37	var count = dialog.querySelector( '.cs-lightbox__count' );
38	var prev = dialog.querySelector( '[data-dir="-1"]' );
39	var next = dialog.querySelector( '[data-dir="1"]' );
40	prev.setAttribute( 'aria-label', l10n.previous || 'Previous' );
41	next.setAttribute( 'aria-label', l10n.next || 'Next' );
42	dialog.querySelector( '[data-close]' ).setAttribute( 'aria-label', l10n.close || 'Close' );
43	if ( links.length < 2 ) {
44		prev.hidden = true;
45		next.hidden = true;
46	}
47
48	function show( i ) {
49		index = ( i + links.length ) % links.length;
50		var link = links[ index ];
51		img.src = link.href;
52		img.alt = link.querySelector( 'img' ).alt;
53		count.textContent = ( l10n.counter || '%1$d of %2$d' ).replace( '%1$d', index + 1 ).replace( '%2$d', links.length );
54	}
55
56	gallery.addEventListener( 'click', function ( event ) {
57		var link = event.target.closest( '[data-cs-shot]' );
58		if ( ! link || event.metaKey || event.ctrlKey || event.shiftKey ) {
59			return;
60		}
61		event.preventDefault();
62		opener = link;
63		show( links.indexOf( link ) );
64		dialog.showModal();
65	} );
66
67	dialog.addEventListener( 'click', function ( event ) {
68		var button = event.target.closest( 'button' );
69		if ( button && button.hasAttribute( 'data-close' ) ) {
70			dialog.close();
71		} else if ( button ) {
72			show( index + parseInt( button.dataset.dir, 10 ) );
73		} else if ( event.target === dialog ) {
74			dialog.close(); // Backdrop click.
75		}
76	} );
77
78	dialog.addEventListener( 'keydown', function ( event ) {
79		var rtl = getComputedStyle( dialog ).direction === 'rtl';
80		if ( event.key === 'ArrowRight' || event.key === 'ArrowLeft' ) {
81			event.preventDefault();
82			var forward = ( event.key === 'ArrowRight' ) !== rtl;
83			show( index + ( forward ? 1 : -1 ) );
84		}
85	} );
86
87	dialog.addEventListener( 'close', function () {
88		img.removeAttribute( 'src' );
89		if ( opener ) {
90			opener.focus();
91		}
92	} );
93}() );