PHP Classes

File: assets/gallerytypes/viewerjs/src/js/handlers.js

Recommend this page to a friend!
  Classes of Goffy G   wgGallery   assets/gallerytypes/viewerjs/src/js/handlers.js   Download  
File: assets/gallerytypes/viewerjs/src/js/handlers.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: wgGallery
Image gallery module for XOOPS CMS
Author: By
Last change:
Date: 3 years ago
Size: 8,412 bytes
 

Contents

Class file image Download
import { ACTION_MOVE, ACTION_SWITCH, ACTION_ZOOM, CLASS_INVISIBLE, CLASS_LOADING, CLASS_MOVE, CLASS_TRANSITION, EVENT_LOAD, EVENT_VIEWED, } from './constants'; import { addClass, addListener, assign, dispatchEvent, forEach, getData, getImageNaturalSizes, getPointer, getTransforms, hasClass, isFunction, removeClass, setStyle, toggleClass, } from './utilities'; export default { click({ target }) { const { options, imageData } = this; const action = getData(target, 'action'); switch (action) { case 'mix': if (this.played) { this.stop(); } else if (options.inline) { if (this.fulled) { this.exit(); } else { this.full(); } } else { this.hide(); } break; case 'hide': this.hide(); break; case 'view': this.view(getData(target, 'index')); break; case 'zoom-in': this.zoom(0.1, true); break; case 'zoom-out': this.zoom(-0.1, true); break; case 'one-to-one': this.toggle(); break; case 'reset': this.reset(); break; case 'prev': this.prev(options.loop); break; case 'play': this.play(options.fullscreen); break; case 'next': this.next(options.loop); break; case 'rotate-left': this.rotate(-90); break; case 'rotate-right': this.rotate(90); break; case 'flip-horizontal': this.scaleX(-imageData.scaleX || -1); break; case 'flip-vertical': this.scaleY(-imageData.scaleY || -1); break; default: if (this.played) { this.stop(); } } }, load() { if (this.timeout) { clearTimeout(this.timeout); this.timeout = false; } const { element, options, image, index, viewerData, } = this; removeClass(image, CLASS_INVISIBLE); if (options.loading) { removeClass(this.canvas, CLASS_LOADING); } image.style.cssText = ( 'height:0;' + `margin-left:${viewerData.width / 2}px;` + `margin-top:${viewerData.height / 2}px;` + 'max-width:none!important;' + 'position:absolute;' + 'width:0;' ); this.initImage(() => { toggleClass(image, CLASS_MOVE, options.movable); toggleClass(image, CLASS_TRANSITION, options.transition); this.renderImage(() => { this.viewed = true; this.viewing = false; if (isFunction(options.viewed)) { addListener(element, EVENT_VIEWED, options.viewed, { once: true, }); } dispatchEvent(element, EVENT_VIEWED, { originalImage: this.images[index], index, image, }); }); }); }, loadImage(e) { const image = e.target; const parent = image.parentNode; const parentWidth = parent.offsetWidth || 30; const parentHeight = parent.offsetHeight || 50; const filled = !!getData(image, 'filled'); getImageNaturalSizes(image, (naturalWidth, naturalHeight) => { const aspectRatio = naturalWidth / naturalHeight; let width = parentWidth; let height = parentHeight; if (parentHeight * aspectRatio > parentWidth) { if (filled) { width = parentHeight * aspectRatio; } else { height = parentWidth / aspectRatio; } } else if (filled) { height = parentWidth / aspectRatio; } else { width = parentHeight * aspectRatio; } setStyle(image, assign({ width, height, }, getTransforms({ translateX: (parentWidth - width) / 2, translateY: (parentHeight - height) / 2, }))); }); }, keydown(e) { const { options } = this; if (!this.fulled || !options.keyboard) { return; } switch (e.keyCode || e.which || e.charCode) { // Escape case 27: if (this.played) { this.stop(); } else if (options.inline) { if (this.fulled) { this.exit(); } } else { this.hide(); } break; // Space case 32: if (this.played) { this.stop(); } break; // ArrowLeft case 37: this.prev(options.loop); break; // ArrowUp case 38: // Prevent scroll on Firefox e.preventDefault(); // Zoom in this.zoom(options.zoomRatio, true); break; // ArrowRight case 39: this.next(options.loop); break; // ArrowDown case 40: // Prevent scroll on Firefox e.preventDefault(); // Zoom out this.zoom(-options.zoomRatio, true); break; // Ctrl + 0 case 48: // Fall through // Ctrl + 1 // eslint-disable-next-line no-fallthrough case 49: if (e.ctrlKey) { e.preventDefault(); this.toggle(); } break; default: } }, dragstart(e) { if (e.target.tagName.toLowerCase() === 'img') { e.preventDefault(); } }, pointerdown(e) { const { options, pointers } = this; if (!this.viewed || this.showing || this.viewing || this.hiding) { return; } if (e.changedTouches) { forEach(e.changedTouches, (touch) => { pointers[touch.identifier] = getPointer(touch); }); } else { pointers[e.pointerId || 0] = getPointer(e); } let action = options.movable ? ACTION_MOVE : false; if (Object.keys(pointers).length > 1) { action = ACTION_ZOOM; } else if ((e.pointerType === 'touch' || e.type === 'touchstart') && this.isSwitchable()) { action = ACTION_SWITCH; } this.action = action; }, pointermove(e) { const { options, pointers, action, image, } = this; if (!this.viewed || !action) { return; } e.preventDefault(); if (e.changedTouches) { forEach(e.changedTouches, (touch) => { assign(pointers[touch.identifier], getPointer(touch, true)); }); } else { assign(pointers[e.pointerId || 0], getPointer(e, true)); } if (action === ACTION_MOVE && options.transition && hasClass(image, CLASS_TRANSITION)) { removeClass(image, CLASS_TRANSITION); } this.change(e); }, pointerup(e) { const { action, pointers } = this; if (e.changedTouches) { forEach(e.changedTouches, (touch) => { delete pointers[touch.identifier]; }); } else { delete pointers[e.pointerId || 0]; } if (!action) { return; } if (action === ACTION_MOVE && this.options.transition) { addClass(this.image, CLASS_TRANSITION); } this.action = false; }, resize() { if (!this.isShown || this.hiding) { return; } this.initContainer(); this.initViewer(); this.renderViewer(); this.renderList(); if (this.viewed) { this.initImage(() => { this.renderImage(); }); } if (this.played) { if (this.options.fullscreen && this.fulled && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { this.stop(); return; } forEach(this.player.getElementsByTagName('img'), (image) => { addListener(image, EVENT_LOAD, this.loadImage.bind(this), { once: true, }); dispatchEvent(image, EVENT_LOAD); }); } }, wheel(e) { if (!this.viewed) { return; } e.preventDefault(); // Limit wheel speed to prevent zoom too fast if (this.wheeling) { return; } this.wheeling = true; setTimeout(() => { this.wheeling = false; }, 50); const ratio = Number(this.options.zoomRatio) || 0.1; let delta = 1; if (e.deltaY) { delta = e.deltaY > 0 ? 1 : -1; } else if (e.wheelDelta) { delta = -e.wheelDelta / 120; } else if (e.detail) { delta = e.detail > 0 ? 1 : -1; } this.zoom(-delta * ratio, true, e); }, };