https://www.construction-simulator.com/js/flickity-fullscreen.js

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