https://masereel.art/wp-content/themes/masereel/js/fullscreen.js?ver=1.2

1/*!
2 * Flickity fullscreen v2.0.0
3 * Enable fullscreen view for Flickity
4 */
5
6( function( window, factory ) {
7  // universal module definition
8  if ( typeof module == 'object' && module.exports ) {
9	// CommonJS
10	module.exports = factory( require('flickity') );
11  } else {
12	// browser global
13	factory( window.Flickity );
14  }
15
16}( typeof window != 'undefined' ? window : this, function factory( Flickity ) {
17
18Flickity.createMethods.push('createFullscreen');
19
20let proto = Flickity.prototype;
21
22proto.createFullscreen = function() {
23  this.isFullscreen = false;
24
25  if ( !this.options.fullscreen ) return;
26  // buttons
27  this.viewFullscreenButton = new FullscreenButton( 'view', this );
28  this.exitFullscreenButton = new FullscreenButton( 'exit', this );
29
30  this.on( 'activate', this._changeFullscreenActive );
31  this.on( 'deactivate', this._changeFullscreenActive );
32};
33
34// ----- activation ----- //
35
36proto._changeFullscreenActive = function() {
37  let childMethod = this.isActive ? 'appendChild' : 'removeChild';
38  this.element[ childMethod ]( this.viewFullscreenButton.element );
39  this.element[ childMethod ]( this.exitFullscreenButton.element );
40  // activate or deactivate buttons
41  let activeMethod = this.isActive ? 'activate' : 'deactivate';
42  this.viewFullscreenButton[ activeMethod ]();
43  this.exitFullscreenButton[ activeMethod ]();
44};
45
46// ----- view, exit, toggle ----- //
47
48proto.viewFullscreen = function() {
49  this._changeFullscreen( true );
50  this.focus();
51};
52
53proto.exitFullscreen = function() {
54  this._changeFullscreen( false );
55};
56
57proto._changeFullscreen = function( isView ) {
58  if ( this.isFullscreen === isView ) return;
59
60  this.isFullscreen = isView;
61  let classMethod = isView ? 'add' : 'remove';
62  document.documentElement.classList[ classMethod ]('is-flickity-fullscreen');
63  if ( document.body && document.body.classList ) {
64	document.body.classList[ classMethod ]('fullscreen');
65  }
66  this.element.classList[ classMethod ]('is-fullscreen');
67  this.resize();
68  // HACK extra reposition on fullscreen for images
69  if ( this.isFullscreen ) this.reposition();
70  this.dispatchEvent( 'fullscreenChange', null, [ isView ] );
71  // trigger global resize so other listeners can react
72  if ( typeof window !== 'undefined' && window.dispatchEvent ) {
73	try { window.dispatchEvent( new Event('resize') ); } catch (e) {}
74  }
75};
76
77proto.toggleFullscreen = function() {
78  this._changeFullscreen( !this.isFullscreen );
79};
80
81// ----- setGallerySize ----- //
82
83// overwrite so fullscreen cells are full height
84let setGallerySize = proto.setGallerySize;
85proto.setGallerySize = function() {
86  if ( !this.options.setGallerySize ) {
87	return;
88  }
89  if ( this.isFullscreen ) {
90	// remove height style on fullscreen
91	this.viewport.style.height = '';
92  } else {
93	// otherwise, do normal
94	setGallerySize.call( this );
95  }
96};
97
98// ----- keyboard ----- //
99
100// ESC key closes full screen
101Flickity.keyboardHandlers[27] = function() {
102  this.exitFullscreen();
103};
104
105// ----- FullscreenButton ----- //
106
107function FullscreenButton( name, flickity ) {
108  this.name = name;
109  this.createButton();
110  this.createIcon();
111  // events
112  // trigger viewFullscreen or exitFullscreen on click
113  this.onClick = function() {
114	flickity[ name + 'Fullscreen' ]();
115  };
116  this.clickHandler = this.onClick.bind( this );
117}
118
119FullscreenButton.prototype.createButton = function() {
120  let element = this.element = document.createElement('button');
121  element.className = 'flickity-button flickity-fullscreen-button ' +
122	'flickity-fullscreen-button-' + this.name;
123  // prevent button from submitting form
124  element.setAttribute( 'type', 'button' );
125  // set label
126  let label = capitalize( this.name + ' full-screen' );
127  element.setAttribute( 'aria-label', label );
128  element.title = label;
129};
130
131function capitalize( text ) {
132  return text[0].toUpperCase() + text.slice( 1 );
133}
134
135const svgURI = 'http://www.w3.org/2000/svg';
136
137const pathDirections = {
138  view: 'M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z',
139  exit: 'M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z',
140};
141
142FullscreenButton.prototype.createIcon = function() {
143  let svg = document.createElementNS( svgURI, 'svg' );
144  svg.setAttribute( 'class', 'flickity-button-icon' );
145  svg.setAttribute( 'viewBox', '0 0 32 32' );
146  // path & direction
147  let path = document.createElementNS( svgURI, 'path' );
148  let direction = pathDirections[ this.name ];
149  path.setAttribute( 'd', direction );
150  // put it together
151  svg.appendChild( path );
152  this.element.appendChild( svg );
153};
154
155FullscreenButton.prototype.activate = function() {
156  this.element.addEventListener( 'click', this.clickHandler );
157};
158
159FullscreenButton.prototype.deactivate = function() {
160  this.element.removeEventListener( 'click', this.clickHandler );
161};
162
163Flickity.FullscreenButton = FullscreenButton;
164
165// ----- fin ----- //
166
167return Flickity;
168
169} ) );