Completed
Push — master ( bca88f...074f85 )
by Thomas
12:45 queued 10s
created

Controls._rotationCup   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 8

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
c 0
b 0
f 0
dl 0
loc 8
rs 9.4285
cc 1
nc 1
nop 0
1
/* global OC, SlideShow */
2
(function ($, SlideShow) {
3
	"use strict";
4
	/**
5
	 * Button and key controls for the slideshow
6
	 *
7
	 * @param {Object} slideshow
8
	 * @param {*} container
9
	 * @param {Object} zoomablePreview
10
	 * @param {number} interval
11
	 * @param {Array} features
12
	 * @constructor
13
	 */
14
	var Controls = function (slideshow, container, zoomablePreview, interval, features) {
15
		this.slideshow = slideshow;
16
		this.container = container;
17
		this.zoomablePreview = zoomablePreview;
18
		this.progressBar = container.find('.progress');
19
		this.interval = interval || 5000;
20
		if (features.indexOf('background_colour_toggle') > -1) {
21
			this.backgroundToggle = true;
22
		}
23
	};
24
	var value = 0;
25
	Controls.prototype = {
26
		current: 0,
27
		errorLoadingImage: false,
28
		playTimeout: 0,
29
		playing: false,
30
		active: false,
31
		backgroundToggle: false,
32
33
		/**
34
		 * Initialises the controls
35
		 */
36
		init: function () {
37
			var makeCallBack = function (handler) {
38
				return function (evt) {
39
					if (!this.active) {
40
						return;
41
					}
42
					evt.stopPropagation();
43
					evt.preventDefault();
44
					handler.call(this);
45
				}.bind(this);
46
			}.bind(this);
47
48
			this._buttonSetup(makeCallBack);
49
			this._specialButtonSetup(makeCallBack);
50
			this._keyCodeSetup(makeCallBack);
51
		},
52
53
		/**
54
		 * Updates the controls
55
		 *
56
		 * @param {{name:string, url: string, path: string, fallBack: string}[]} images
57
		 * @param {boolean} autoPlay
58
		 */
59
		update: function (images, autoPlay) {
60
			this.images = images;
61
			this.active = true;
62
			this.showButton('.play');
63
			this.hideButton('.pause, .progress');
64
			this.playing = false;
65
66
			// Hide prev/next and play buttons when we only have one pic
67
			this.container.find('.next, .previous, .play').toggle(this.images.length > 1);
68
69
			// Hide the action buttons until we have something to show
70
			this.hideActionButtons();
71
72
			if (autoPlay) {
73
				this._playPauseToggle();
74
			}
75
		},
76
77
		/**
78
		 * Initialises local variables when the show starts
79
		 *
80
		 * @param {number} currentImageId
81
		 */
82
		show: function (currentImageId) {
83
			var currentImage = this.images[currentImageId];
84
			this.current = currentImageId;
85
			this.errorLoadingImage = false;
86
			if (this.playing) {
87
				this._setTimeout();
88
			}
89
			this._setName(currentImage.name);
90
		},
91
92
		/**
93
		 * Stops and hides the slideshow
94
		 */
95
		stop: function () {
96
			this._setName('');
97
			this.playing = false;
98
			this.slideshow.stop();
99
			this.zoomablePreview.stop();
100
101
			this._clearTimeout();
102
			this.container.hide();
103
			this.active = false;
104
		},
105
106
		/**
107
		 * Updates the private variables in case of problems loading an image
108
		 *
109
		 * @param {Array} images
110
		 * @param {boolean} errorLoadingImage
111
		 */
112
		updateControls: function (images, errorLoadingImage) {
113
			this.images = images;
114
			this.errorLoadingImage = errorLoadingImage;
115
		},
116
117
		/**
118
		 * Shows the action buttons
119
		 *
120
		 * @param {boolean} transparent
121
		 * @param {boolean} isPublic
122
		 * @param {number} permissions
123
		 */
124
		showActionButtons: function (transparent, isPublic, permissions) {
125
			if (transparent) {
126
				this._showBackgroundToggle();
127
			}
128
			this.showButton('.downloadImage');
129
			var canDelete = ((permissions & OC.PERMISSION_DELETE) !== 0);
130
			if (!isPublic && canDelete) {
131
				this.showButton('.deleteImage');
132
				this.showButton('.rotationCup');
133
			}
134
		},
135
136
		/**
137
		 * Hides the action buttons
138
		 */
139
		hideActionButtons: function () {
140
			this.hideButton('.changeBackground');
141
			this.hideButton('.downloadImage');
142
			this.hideButton('.deleteImage');
143
			this.showButton('.rotationCup');
144
		},
145
146
		/**
147
		 * Shows a button which has been hidden
148
		 */
149
		showButton: function (button) {
150
			this.container.find(button).removeClass('hidden');
151
		},
152
153
		/**
154
		 * Hides a button
155
		 *
156
		 * @param button
157
		 */
158
		hideButton: function (button) {
159
			this.container.find(button).addClass('hidden');
160
		},
161
162
		/**
163
		 * Removes a button
164
		 *
165
		 * @param button
166
		 */
167
		removeButton: function (button) {
168
			this.container.find(button).remove();
169
		},
170
171
		/**
172
		 * Sets up the button based navigation
173
		 *
174
		 * @param {Function} makeCallBack
175
		 * @private
176
		 */
177
		_buttonSetup: function (makeCallBack) {
178
			this.container.children('.next').click(makeCallBack(this._next));
179
			this.container.children('.previous').click(makeCallBack(this._previous));
180
			this.container.children('.exit').click(makeCallBack(this._exit));
181
			this.container.children('.pause, .play').click(makeCallBack(this._playPauseToggle));
182
			this.progressBar.click(makeCallBack(this._playPauseToggle));
183
			this.container.children('.previous, .next, .menu, .name').on(
184
				'mousewheel DOMMouseScroll mousemove', function (evn) {
185
					this.container.children('.bigshotContainer')[0].dispatchEvent(
186
						new WheelEvent(evn.originalEvent.type, evn.originalEvent));
0 ignored issues
show
Bug introduced by
The variable WheelEvent seems to be never declared. If this is a global, consider adding a /** global: WheelEvent */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
Bug introduced by
WheelEvent does not seem to be defined.
Loading history...
187
				}.bind(this));
188
		},
189
190
		/**
191
		 * Sets up additional buttons
192
		 *
193
		 * @param {Function} makeCallBack
194
		 * @private
195
		 */
196
		_specialButtonSetup: function (makeCallBack) {
197
			this.container.find('.downloadImage').click(makeCallBack(this._getImageDownload));
198
			this.container.find('.deleteImage').click(makeCallBack(this._deleteImage));
199
			this.container.find('.rotationCup').click(makeCallBack(this._rotationCup));
200
			this.container.find('.menu').width = 52;
201
			if (this.backgroundToggle) {
202
				this.container.find('.changeBackground').click(
203
					makeCallBack(this._toggleBackground));
204
				this.container.find('.menu').width += 52;
205
			} else {
206
				this.hideButton('.changeBackground');
207
			}
208
209
210
		},
211
212
		/**
213
		 * Shows the background colour switcher, if activated in the configuration
214
		 */
215
		_showBackgroundToggle: function () {
216
			if (this.backgroundToggle) {
217
				this.showButton('.changeBackground');
218
			}
219
		},
220
221
		/**
222
		 * Sets up the key based controls
223
		 *
224
		 * @param {Function} makeCallBack
225
		 * @private
226
		 */
227
		_keyCodeSetup: function (makeCallBack) {
228
			$(document).keyup(function (evt) {
229
				var escKey = 27;
230
				var leftKey = 37;
231
				var rightKey = 39;
232
				var spaceKey = 32;
233
				var fKey = 70;
234
				var zoomOutKeys = [48, 96, 79, 40]; // zero, o or down key
235
				var zoomInKeys = [57, 105, 73, 38]; // 9, i or up key
236
				if (evt.keyCode === escKey) {
237
					makeCallBack(this._exit)(evt);
238
				} else if (evt.keyCode === leftKey) {
239
					makeCallBack(this._previous)(evt);
240
				} else if (evt.keyCode === rightKey) {
241
					makeCallBack(this._next)(evt);
242
				} else if (evt.keyCode === spaceKey) {
243
					makeCallBack(this._playPauseToggle)(evt);
244
				} else if (evt.keyCode === fKey) {
245
					makeCallBack(this._fullScreenToggle)(evt);
246
				} else if (this._hasKeyBeenPressed(evt, zoomOutKeys)) {
247
					makeCallBack(this._zoomToOriginal)(evt);
248
				} else if (this._hasKeyBeenPressed(evt, zoomInKeys)) {
249
					makeCallBack(this._zoomToFit)(evt);
250
				}
251
			}.bind(this));
252
		},
253
254
		/**
255
		 * Determines if a key has been pressed by comparing the event and the key
256
		 *
257
		 * @param evt
258
		 * @param {Array} keys
259
		 *
260
		 * @returns {boolean}
261
		 * @private
262
		 */
263
		_hasKeyBeenPressed: function (evt, keys) {
264
			var i, keysLength = keys.length;
265
			for (i = 0; i < keysLength; i++) {
266
				if (evt.keyCode === keys[i]) {
267
					return true;
268
				}
269
			}
270
			return false;
271
		},
272
273
		/**
274
		 * Starts the slideshow timer
275
		 *
276
		 * @private
277
		 */
278
		_setTimeout: function () {
279
			this._clearTimeout();
280
			this.playTimeout = setTimeout(this._next.bind(this), this.interval);
281
			this.progressBar.stop();
282
			this.progressBar.css('height', '6px');
283
			this.progressBar.animate({'height': '26px'}, this.interval, 'linear');
284
		},
285
286
		/**
287
		 * Stops the slideshow timer
288
		 *
289
		 * @private
290
		 */
291
		_clearTimeout: function () {
292
			if (this.playTimeout) {
293
				clearTimeout(this.playTimeout);
294
			}
295
			this.progressBar.stop();
296
			this.progressBar.css('height', '6px');
297
			this.playTimeout = 0;
298
		},
299
300
		/**
301
		 * Starts/stops autoplay and shows/hides the play/pause buttons
302
		 *
303
		 * @private
304
		 */
305
		_playPauseToggle: function () {
306
			if (this.playing === true) {
307
				this.playing = false;
308
				this._clearTimeout();
309
			} else {
310
				this.playing = true;
311
				this._setTimeout();
312
			}
313
314
			this.container.find('.play, .pause, .progress').toggleClass('hidden');
315
		},
316
317
		/**
318
		 * Shows the next slide
319
		 *
320
		 * @private
321
		 */
322
		_next: function () {
323
			value = 0;
324
			this._setName('');
325
			this.slideshow.hideErrorNotification();
326
			this.zoomablePreview.reset();
327
328
			if (this.errorLoadingImage) {
329
				this.current -= 1;
330
			}
331
			this.current = (this.current + 1) % this.images.length;
332
			var next = (this.current + 1) % this.images.length;
333
			this._updateSlideshow(next);
334
		},
335
336
		/**
337
		 * Shows the previous slide
338
		 *
339
		 * @private
340
		 */
341
		_previous: function () {
342
			value = 0;
343
			this._setName('');
344
			this.slideshow.hideErrorNotification();
345
			this.zoomablePreview.reset();
346
347
			this.current = (this.current - 1 + this.images.length) % this.images.length;
348
			var previous = (this.current - 1 + this.images.length) % this.images.length;
349
			this._updateSlideshow(previous);
350
		},
351
352
		/**
353
		 * Asks the slideshow for the next image
354
		 *
355
		 * @param {number} imageId
356
		 * @private
357
		 */
358
		_updateSlideshow: function (imageId) {
359
			value = 0;
360
			this._rotationCupClean();
361
			this.slideshow.next(this.current, this.images[imageId]);
362
		},
363
364
		/**
365
		 * Exits the slideshow by going back in history
366
		 *
367
		 * @private
368
		 */
369
		_exit: function () {
370
			value = 0;
371
			this._rotationCupClean();
372
			// Only modern browsers can manipulate history
373
			if (history && history.replaceState) {
0 ignored issues
show
Best Practice introduced by
If you intend to check if the variable history is declared in the current environment, consider using typeof history === "undefined" instead. This is safe if the variable is not actually declared.
Loading history...
374
				// We simulate a click on the back button in order to be consistent
375
				window.history.back();
376
			} else {
377
				// For ancient browsers supported in core
378
				this.stop();
379
			}
380
		},
381
382
		/**
383
		 * Launches fullscreen mode if the browser supports it
384
		 *
385
		 * @private
386
		 */
387
		_fullScreenToggle: function () {
388
			this.zoomablePreview.fullScreenToggle();
389
		},
390
391
		/**
392
		 * Resizes the image to its original size
393
		 *
394
		 * @private
395
		 */
396
		_zoomToOriginal: function () {
397
			this.zoomablePreview.zoomToOriginal();
398
		},
399
400
		/**
401
		 * Fits the image in the browser window
402
		 *
403
		 * @private
404
		 */
405
		_zoomToFit: function () {
406
			this.zoomablePreview.zoomToFit();
407
		},
408
409
		/**
410
		 * Sends the current image as a download
411
		 *
412
		 * @returns {boolean}
413
		 * @private
414
		 */
415
		_getImageDownload: function () {
416
			var downloadUrl = this.images[this.current].downloadUrl;
417
418
			return this.slideshow.getImageDownload(downloadUrl);
419
		},
420
421
		/**
422
		 * Changes the colour of the background of the image
423
		 *
424
		 * @private
425
		 */
426
		_toggleBackground: function () {
427
			this.slideshow.toggleBackground();
428
		},
429
430
		/**
431
		 * Shows the filename of the current image
432
		 * @param {string} imageName
433
		 * @private
434
		 */
435
		_setName: function (imageName) {
436
			var nameElement = this.container.find('.title');
437
			nameElement.text(imageName);
438
		},
439
		//Rotation Cup
440
		/**
441
		 * Rotate Picture
442
		 * @private
443
		 */
444
		_rotationCup: function () {
445
				value +=90;
446
				console.log(value);
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
447
			$('.bigshotContainer img:first').rotate({
448
				
449
				animateTo: value
450
				});
451
		},
452
		//Rotation Cup Clean
453
		/**
454
		 * Rotate Picture
455
		 * @private
456
		 */
457
		_rotationCupClean: function () {
458
			
459
		$('.bigshotContainer img:first').rotate({
460
			
461
			animateTo: 0,
462
			});
463
		},
464
		/**
465
		 * Delete the image from the slideshow
466
		 * @private
467
		 */
468
		_deleteImage: function () {
469
			var image = this.images[this.current];
470
			var self = this;
471
			$.ajax({
472
				type: 'DELETE',
473
				url: OC.getRootPath() + '/remote.php/webdav/' + image.path,
474
				success: function () {
475
					self.slideshow.deleteImage(image, self.current);
476
					self.images.splice(self.current, 1);
477
					if (self.images.length === 0) {
478
						self._exit();
479
					}
480
					else {
481
						self.current = self.current % self.images.length;
482
						self._updateSlideshow(self.current);
483
					}
484
				}
485
			});
486
		}
487
	};
488
489
	SlideShow.Controls = Controls;
490
})(jQuery, SlideShow);
491