IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added doctest for flippable images with different sizes.

Browse Source
This commit is contained in:
Uwe Oestermeier 2024-02-12 14:08:24 +01:00
parent c8f7e39235
commit 8d8090cdde
8 changed files with 176 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/flipeffect.css
View File

@ -1,4 +1,3 @@
.flipWrapper { .flipWrapper {
position: absolute; position: absolute;
top: 0; top: 0;
@ -48,6 +47,7 @@
width: 44px; width: 44px;
height: 44px; height: 44px;
padding: 4px; padding: 4px;
border: 1px solid red;
right: 0; right: 0;
top: 0; top: 0;
} }
@ -58,6 +58,7 @@
width: 44px; width: 44px;
height: 44px; height: 44px;
padding: 4px; padding: 4px;
border: 1px solid red;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
@ -68,6 +69,7 @@
width: 44px; width: 44px;
height: 44px; height: 44px;
padding: 4px; padding: 4px;
border: 1px solid red;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }

89
dist/iwmlib.js vendored
View File

@ -1020,7 +1020,7 @@
/** Static methods to compute 2D points with x and y coordinates. /** Static methods to compute 2D points with x and y coordinates.
*/ */
class Points$1 { let Points$1 = class Points {
static length(a) { static length(a) {
return Math.sqrt(a.x * a.x + a.y * a.y) return Math.sqrt(a.x * a.x + a.y * a.y)
} }
@ -1114,7 +1114,7 @@
// } // }
return window.convertPointFromNodeToPage(element, p.x, p.y) return window.convertPointFromNodeToPage(element, p.x, p.y)
} }
} };
/** /**
* A helper class for common set operations. * A helper class for common set operations.
@ -1238,7 +1238,7 @@
} }
} }
class Elements$1 { let Elements$1 = class Elements {
static setStyle(element, styles) { static setStyle(element, styles) {
for (let key in styles) { for (let key in styles) {
element.style[key] = styles[key]; element.style[key] = styles[key];
@ -1260,7 +1260,7 @@
static hasClass(element, cssClass) { static hasClass(element, cssClass) {
return element.classList.contains(cssClass) return element.classList.contains(cssClass)
} }
} };
class MapProxy { class MapProxy {
/* This class is needed if we want to use the interaction classes /* This class is needed if we want to use the interaction classes
@ -1578,7 +1578,7 @@
/** /**
* Util functions to deal with DOMRects. * Util functions to deal with DOMRects.
*/ */
class Rect$1 { let Rect$1 = class Rect {
/** /**
* Test if a given point is contained by the provided Rect. * Test if a given point is contained by the provided Rect.
* *
@ -1603,7 +1603,7 @@
static getPosition(rect) { static getPosition(rect) {
return { x: rect.x, y: rect.y } return { x: rect.x, y: rect.y }
} }
} };
/** String utility functions */ /** String utility functions */
@ -1741,7 +1741,7 @@
* The logging handlers can be overwritten by calling the static * The logging handlers can be overwritten by calling the static
* setup method. * setup method.
*/ */
class Logging$1 { let Logging$1 = class Logging {
/** Static log function. /** Static log function.
* @param {*} message * @param {*} message
*/ */
@ -1778,9 +1778,12 @@
logHandlers.warn = warn; logHandlers.warn = warn;
logHandlers.error = error; logHandlers.error = error;
} }
} };
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
/* globals Hammer, propagating */
/*eslint no-console: ["error", { allow: ["log", "warn", "info", "error"] }]*/
/** Interaction patterns /** Interaction patterns
@ -2728,7 +2731,7 @@
* @class InteractionMapper * @class InteractionMapper
* @extends {InteractionDelegate} * @extends {InteractionDelegate}
*/ */
class InteractionMapper$1 extends InteractionDelegate { let InteractionMapper$1 = class InteractionMapper extends InteractionDelegate {
constructor( constructor(
element, element,
target, target,
@ -2950,7 +2953,7 @@
} }
} }
} }
} };
window.InteractionMapper = InteractionMapper$1; window.InteractionMapper = InteractionMapper$1;
@ -3126,6 +3129,8 @@
window.CapabilitiesTests = CapabilitiesTests; window.CapabilitiesTests = CapabilitiesTests;
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
/* eslint-disable no-console */
/* globals debugCanvas */
/** This interface allows scatters to delegate tap events to other objects. */ /** This interface allows scatters to delegate tap events to other objects. */
class ITapDelegate extends Interface { class ITapDelegate extends Interface {
@ -4193,7 +4198,7 @@
} }
} }
class DOMScatter$1 extends AbstractScatter { let DOMScatter$1 = class DOMScatter extends AbstractScatter {
constructor( constructor(
element, element,
container, container,
@ -4482,7 +4487,7 @@
bringToFront() { bringToFront() {
// this.element.parentNode.appendChild(this.element) // this.element.parentNode.appendChild(this.element)
// uo: On Chome and Electon appendChild leads to flicker // uo: On Chome and Electon appendChild leads to flicker
TweenLite.set(this.element, { zIndex: DOMScatter$1.zIndex++ }); TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ });
} }
isDescendant(parent, child) { isDescendant(parent, child) {
@ -4622,11 +4627,13 @@
this.element.dispatchEvent(event); this.element.dispatchEvent(event);
} }
} };
DOMScatter$1.zIndex = 1000; DOMScatter$1.zIndex = 1000;
/* eslint-disable no-console */ /* eslint-disable no-console */
/* global TweenLite */
class CardWrapper extends Object { class CardWrapper extends Object {
constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) { constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
@ -4803,6 +4810,7 @@
} }
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
/* global PDFJS Power1 */
class CardLoader { class CardLoader {
constructor( constructor(
@ -4817,7 +4825,7 @@
scale = 1, scale = 1,
minScale = 0.5, minScale = 0.5,
maxScale = 1.5, maxScale = 1.5,
rotation = 0, rotation = 0
} = {} } = {}
) { ) {
this.src = src; this.src = src;
@ -4867,7 +4875,7 @@
// Render PDF page into canvas context. // Render PDF page into canvas context.
let renderContext = { let renderContext = {
canvasContext: context, canvasContext: context,
viewport: viewport, viewport: viewport
}; };
page.render(renderContext); page.render(renderContext);
domNode.appendChild(canvas); domNode.appendChild(canvas);
@ -5009,7 +5017,7 @@
onClose = null, onClose = null,
onUpdate = null, onUpdate = null,
onRemoved = null, onRemoved = null,
onLoaded = null, onLoaded = null
} = {} } = {}
) { ) {
this.domScatterContainer = domScatterContainer; this.domScatterContainer = domScatterContainer;
@ -5076,7 +5084,7 @@
scalable: this.scalable, scalable: this.scalable,
rotatable: this.rotatable, rotatable: this.rotatable,
overdoScaling: this.overdoScaling, overdoScaling: this.overdoScaling,
tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null, tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null
}); });
if (this.center) { if (this.center) {
@ -5152,7 +5160,7 @@
opacity: 0, opacity: 0,
onComplete: () => { onComplete: () => {
this.cardWrapper.remove(); this.cardWrapper.remove();
}, }
}); });
} }
@ -5200,7 +5208,7 @@
TweenLite.set(this.back, { rotationY: -180 }); TweenLite.set(this.back, { rotationY: -180 });
TweenLite.set([this.back, this.front], { TweenLite.set([this.back, this.front], {
backfaceVisibility: 'hidden', backfaceVisibility: 'hidden',
perspective: 5000, perspective: 5000
}); });
TweenLite.set(this.front, { visibility: 'visible' }); TweenLite.set(this.front, { visibility: 'visible' });
this.infoBtn = element.querySelector('.infoBtn'); this.infoBtn = element.querySelector('.infoBtn');
@ -5247,7 +5255,7 @@
if (this.onRemoved) { if (this.onRemoved) {
this.onRemoved.call(this); this.onRemoved.call(this);
} }
}, }
}); });
} }
} }
@ -5276,7 +5284,7 @@
scaleButtons() { scaleButtons() {
TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], { TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
scale: this.buttonScale, scale: this.buttonScale
}); });
} }
@ -5418,10 +5426,11 @@
this.scatter.translatable = translatable; this.scatter.translatable = translatable;
this.scatter.rotatable = rotatable; this.scatter.rotatable = rotatable;
}, },
force3D: true, force3D: true
}); });
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/ // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, { const duration = this.flipDuration / 2;
TweenLite.to(this.element, duration, {
scale: targetScale, scale: targetScale,
ease: Power1.easeOut, ease: Power1.easeOut,
rotationZ: targetZ + '_short', rotationZ: targetZ + '_short',
@ -5438,8 +5447,26 @@
this.hide(this.back); this.hide(this.back);
// this.show(this.infoBtn) // this.show(this.infoBtn)
} }
}, }
}); });
//uo: check for special case that the front image must be adapted to the back size
let frontImage = this.front.querySelector('img');
if (frontImage) {
let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w;
let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h;
let ratio = this.scatterStartWidth / this.scatterStartHeight;
if (this.flipped) {
TweenLite.to(frontImage, duration, {
ease: Power1.easeOut,
scaleY: scaleY * targetScale * ratio,
scaleX: scaleX * targetScale,
onComplete: (e) => {
TweenLite.set(frontImage, { scale: 1.0 });
}
});
}
}
} }
} }
@ -5582,10 +5609,12 @@
Poppable.registrations = new Map(); Poppable.registrations = new Map();
/* eslint-disable no-console */ /* eslint-disable no-console */
/* eslint-disable no-case-declarations */
/* eslint-disable no-unused-vars */
/** A Popup that shows text labels, images, or html /** A Popup that shows text labels, images, or html
*/ */
class Popup$1 extends Poppable { let Popup$1 = class Popup extends Poppable {
/** /**
* Creates an instance of Popup. * Creates an instance of Popup.
* @param {any} [{ * @param {any} [{
@ -6439,7 +6468,7 @@
} = {} } = {}
) { ) {
let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'; let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter';
let popup = new Popup$1({ let popup = new Popup({
parent, parent,
context, context,
fontFamily, fontFamily,
@ -6527,14 +6556,14 @@
event.target; event.target;
let x = event.pageX; let x = event.pageX;
let y = event.pageY; let y = event.pageY;
let rect = Popup$1.targetRect(event); let rect = Popup.targetRect(event);
if (rect != null) { if (rect != null) {
x = rect.left + rect.width / 2; x = rect.left + rect.width / 2;
y = rect.top + rect.height / 2; y = rect.top + rect.height / 2;
} }
return { x, y } return { x, y }
} }
} };
/** A Popup Menu that shows text labels in a vertical row. /** A Popup Menu that shows text labels in a vertical row.
*/ */
@ -7870,7 +7899,7 @@
* @ignore * @ignore
* @class * @class
*/ */
class Event$1 { let Event$1 = class Event {
/** /**
* Creates an event object. * Creates an event object.
* *
@ -7949,7 +7978,7 @@
return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)) return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts))
} }
} }
} };
/* eslint-disable no-console */ /* eslint-disable no-console */

102
dist/iwmlib.pixi.js vendored
View File

@ -1179,7 +1179,7 @@
} }
} }
class Events$1 { let Events$1 = class Events {
static stop(event) { static stop(event) {
event.preventDefault(); event.preventDefault();
// I removed this, as it destroys all the Hammer.js events. // I removed this, as it destroys all the Hammer.js events.
@ -1301,8 +1301,8 @@
data.pointerId = event.pointerId; data.pointerId = event.pointerId;
data.pointerType = event.pointerType; data.pointerType = event.pointerType;
} }
if (Events$1.debug) { if (Events.debug) {
Events$1.extracted.push(this.toLine(event)); Events.extracted.push(this.toLine(event));
} }
return infos return infos
} }
@ -1331,8 +1331,8 @@
if (data.target != null) { if (data.target != null) {
data.target.dispatchEvent(clone); data.target.dispatchEvent(clone);
} }
if (Events$1.debug) { if (Events.debug) {
Events$1.simulated.push(this.toLine(clone)); Events.simulated.push(this.toLine(clone));
} }
} }
@ -1408,7 +1408,7 @@
top: event.clientY + 'px', top: event.clientY + 'px',
}); });
} }
} };
Events$1.popup = null; Events$1.popup = null;
Events$1.debug = true; Events$1.debug = true;
@ -1818,7 +1818,7 @@
} }
} }
class Elements$1 { let Elements$1 = class Elements {
static setStyle(element, styles) { static setStyle(element, styles) {
for (let key in styles) { for (let key in styles) {
element.style[key] = styles[key]; element.style[key] = styles[key];
@ -1840,7 +1840,7 @@
static hasClass(element, cssClass) { static hasClass(element, cssClass) {
return element.classList.contains(cssClass) return element.classList.contains(cssClass)
} }
} };
class MapProxy { class MapProxy {
/* This class is needed if we want to use the interaction classes /* This class is needed if we want to use the interaction classes
@ -2280,7 +2280,7 @@
* @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container} * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest} * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
*/ */
class Button$1 extends PIXI.Container { let Button$1 = class Button extends PIXI.Container {
/** /**
* Creates an instance of a Button. * Creates an instance of a Button.
* *
@ -2904,7 +2904,7 @@
size = this.opts.minHeight - 2 * this.opts.padding; size = this.opts.minHeight - 2 * this.opts.padding;
} }
const url = Button$1.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`; const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`;
const iconTexture = PIXI.Texture.from(url); const iconTexture = PIXI.Texture.from(url);
const sprite = new PIXI.Sprite(iconTexture); const sprite = new PIXI.Sprite(iconTexture);
@ -2952,10 +2952,11 @@
overwrite: 'none', overwrite: 'none',
}); });
} }
} };
/* globals ThrowPropsPlugin, Strong */ /* globals ThrowPropsPlugin, Strong */
/** /**
* Class that represents a PixiJS ButtonGroup. * Class that represents a PixiJS ButtonGroup.
* *
@ -4240,6 +4241,7 @@
/* global apollo, subscriptions, gql */ /* global apollo, subscriptions, gql */
/** /**
* A special InteractionManager for fullscreen apps, which may * A special InteractionManager for fullscreen apps, which may
* go beyond the limits of WebGL drawing buffers. On Safari and Chrome * go beyond the limits of WebGL drawing buffers. On Safari and Chrome
@ -5313,7 +5315,7 @@
* The logging handlers can be overwritten by calling the static * The logging handlers can be overwritten by calling the static
* setup method. * setup method.
*/ */
class Logging$1 { let Logging$1 = class Logging {
/** Static log function. /** Static log function.
* @param {*} message * @param {*} message
*/ */
@ -5350,9 +5352,12 @@
logHandlers.warn = warn; logHandlers.warn = warn;
logHandlers.error = error; logHandlers.error = error;
} }
} };
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
/* globals Hammer, propagating */
/*eslint no-console: ["error", { allow: ["log", "warn", "info", "error"] }]*/
/** Interaction patterns /** Interaction patterns
@ -6300,7 +6305,7 @@
* @class InteractionMapper * @class InteractionMapper
* @extends {InteractionDelegate} * @extends {InteractionDelegate}
*/ */
class InteractionMapper$1 extends InteractionDelegate { let InteractionMapper$1 = class InteractionMapper extends InteractionDelegate {
constructor( constructor(
element, element,
target, target,
@ -6522,7 +6527,7 @@
} }
} }
} }
} };
window.InteractionMapper = InteractionMapper$1; window.InteractionMapper = InteractionMapper$1;
@ -6698,6 +6703,8 @@
window.CapabilitiesTests = CapabilitiesTests; window.CapabilitiesTests = CapabilitiesTests;
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
/* eslint-disable no-console */
/* globals debugCanvas */
/** /**
* A base class for scatter specific events. * A base class for scatter specific events.
@ -8010,6 +8017,8 @@
DOMScatter.zIndex = 1000; DOMScatter.zIndex = 1000;
/* eslint-disable no-console */ /* eslint-disable no-console */
/* global TweenLite */
class CardWrapper extends Object { class CardWrapper extends Object {
constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) { constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) {
@ -8186,6 +8195,7 @@
} }
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
/* global PDFJS Power1 */
class CardLoader { class CardLoader {
constructor( constructor(
@ -8200,7 +8210,7 @@
scale = 1, scale = 1,
minScale = 0.5, minScale = 0.5,
maxScale = 1.5, maxScale = 1.5,
rotation = 0, rotation = 0
} = {} } = {}
) { ) {
this.src = src; this.src = src;
@ -8248,7 +8258,7 @@
onClose = null, onClose = null,
onUpdate = null, onUpdate = null,
onRemoved = null, onRemoved = null,
onLoaded = null, onLoaded = null
} = {} } = {}
) { ) {
this.domScatterContainer = domScatterContainer; this.domScatterContainer = domScatterContainer;
@ -8315,7 +8325,7 @@
scalable: this.scalable, scalable: this.scalable,
rotatable: this.rotatable, rotatable: this.rotatable,
overdoScaling: this.overdoScaling, overdoScaling: this.overdoScaling,
tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null, tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null
}); });
if (this.center) { if (this.center) {
@ -8391,7 +8401,7 @@
opacity: 0, opacity: 0,
onComplete: () => { onComplete: () => {
this.cardWrapper.remove(); this.cardWrapper.remove();
}, }
}); });
} }
@ -8439,7 +8449,7 @@
TweenLite.set(this.back, { rotationY: -180 }); TweenLite.set(this.back, { rotationY: -180 });
TweenLite.set([this.back, this.front], { TweenLite.set([this.back, this.front], {
backfaceVisibility: 'hidden', backfaceVisibility: 'hidden',
perspective: 5000, perspective: 5000
}); });
TweenLite.set(this.front, { visibility: 'visible' }); TweenLite.set(this.front, { visibility: 'visible' });
this.infoBtn = element.querySelector('.infoBtn'); this.infoBtn = element.querySelector('.infoBtn');
@ -8486,7 +8496,7 @@
if (this.onRemoved) { if (this.onRemoved) {
this.onRemoved.call(this); this.onRemoved.call(this);
} }
}, }
}); });
} }
} }
@ -8515,7 +8525,7 @@
scaleButtons() { scaleButtons() {
TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], { TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
scale: this.buttonScale, scale: this.buttonScale
}); });
} }
@ -8657,10 +8667,11 @@
this.scatter.translatable = translatable; this.scatter.translatable = translatable;
this.scatter.rotatable = rotatable; this.scatter.rotatable = rotatable;
}, },
force3D: true, force3D: true
}); });
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/ // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, { const duration = this.flipDuration / 2;
TweenLite.to(this.element, duration, {
scale: targetScale, scale: targetScale,
ease: Power1.easeOut, ease: Power1.easeOut,
rotationZ: targetZ + '_short', rotationZ: targetZ + '_short',
@ -8677,8 +8688,26 @@
this.hide(this.back); this.hide(this.back);
// this.show(this.infoBtn) // this.show(this.infoBtn)
} }
}, }
}); });
//uo: check for special case that the front image must be adapted to the back size
let frontImage = this.front.querySelector('img');
if (frontImage) {
let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w;
let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h;
let ratio = this.scatterStartWidth / this.scatterStartHeight;
if (this.flipped) {
TweenLite.to(frontImage, duration, {
ease: Power1.easeOut,
scaleY: scaleY * targetScale * ratio,
scaleX: scaleX * targetScale,
onComplete: (e) => {
TweenLite.set(frontImage, { scale: 1.0 });
}
});
}
}
} }
} }
@ -14542,6 +14571,7 @@
} }
/* eslint-disable no-undef */ /* eslint-disable no-undef */
/* eslint-disable no-console */
class StylusCommand extends Object { class StylusCommand extends Object {
constructor() { constructor() {
@ -15602,6 +15632,7 @@
/* global Quad */ /* global Quad */
/** /**
* Class that represents a PixiJS Volatile. * Class that represents a PixiJS Volatile.
* *
@ -15759,6 +15790,7 @@
/* globals ThrowPropsPlugin, Strong */ /* globals ThrowPropsPlugin, Strong */
/** /**
* Class that represents a PixiJS List. * Class that represents a PixiJS List.
* *
@ -16954,6 +16986,8 @@
} }
/* ES Lint */ /* ES Lint */
/* globals PIXI, requestAnimationFrame, performance, app*/
/** /**
* The AdvancedScatterContainer extends the ScatterContainer, but * The AdvancedScatterContainer extends the ScatterContainer, but
@ -17769,7 +17803,7 @@
* @see {@link maps.html} * @see {@link maps.html}
*/ */
class GeoMap$1 { let GeoMap$1 = class GeoMap {
/** /**
* Creates instance of GeoMap * Creates instance of GeoMap
* *
@ -17797,7 +17831,7 @@
onTransform = null onTransform = null
} = {} } = {}
) { ) {
this._id = GeoMap$1.counter++; this._id = GeoMap.counter++;
this.onLoad = new EventHandler('loaded', { listeners: onLoad }); this.onLoad = new EventHandler('loaded', { listeners: onLoad });
this.onTransform = new EventHandler('transform', { listeners: onTransform }); this.onTransform = new EventHandler('transform', { listeners: onTransform });
@ -18209,10 +18243,10 @@
static allFromJson(json, root = './') { static allFromJson(json, root = './') {
let error = { message: '' }; let error = { message: '' };
let maps = {}; let maps = {};
if (GeoMap$1._validateJson(json, error)) { if (GeoMap._validateJson(json, error)) {
for (let [mapname, data] of Object.entries(json)) { for (let [mapname, data] of Object.entries(json)) {
data.tiles.path = root + data.tiles.path; data.tiles.path = root + data.tiles.path;
maps[mapname] = GeoMap$1._createMap(data); maps[mapname] = GeoMap._createMap(data);
maps[mapname].name = mapname; maps[mapname].name = mapname;
} }
} else console.error('Could not validate JSON: ' + error.message); } else console.error('Could not validate JSON: ' + error.message);
@ -18232,7 +18266,7 @@
static mapFromJson(map, json) { static mapFromJson(map, json) {
if (json[map]) { if (json[map]) {
const data = json[map]; const data = json[map];
if (this._validJsonMap(data)) return GeoMap$1._createMap(data) if (this._validJsonMap(data)) return GeoMap._createMap(data)
else console.error('Map was not in a valid format.'); else console.error('Map was not in a valid format.');
} else console.error('Map was not in data.'); } else console.error('Map was not in data.');
@ -18258,7 +18292,7 @@
error.message += 'The provided JSON object did not contain any items.'; error.message += 'The provided JSON object did not contain any items.';
} }
for (let [name, data] of Object.entries(json)) { for (let [name, data] of Object.entries(json)) {
if (!GeoMap$1._validJsonMap(data)) { if (!GeoMap._validJsonMap(data)) {
error.message += `${name} was not valid. `; error.message += `${name} was not valid. `;
isValid = false; isValid = false;
} }
@ -18305,14 +18339,14 @@
static _createMap(data) { static _createMap(data) {
switch (data.type.toLowerCase()) { switch (data.type.toLowerCase()) {
case 'deepzoom': case 'deepzoom':
return GeoMap$1._createDeepZoomMap(data) return GeoMap._createDeepZoomMap(data)
default: default:
console.error(`Datatype is invalid or not implemented yet: ${data.type}`); console.error(`Datatype is invalid or not implemented yet: ${data.type}`);
} }
} }
static _createDeepZoomMap(data) { static _createDeepZoomMap(data) {
const projection = GeoMap$1._getProjectionByName(data.projection); const projection = GeoMap._getProjectionByName(data.projection);
const tilesConfig = data.tiles; const tilesConfig = data.tiles;
const options = data.options; const options = data.options;
@ -18329,7 +18363,7 @@
return null return null
} }
} }
} };
GeoMap$1.counter = 0; GeoMap$1.counter = 0;

BIN
lib/examples/queen.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

17
lib/flippable.html
View File

@ -64,16 +64,27 @@
<script class="doctest"> <script class="doctest">
let scatterContainer = new DOMScatterContainer(main, { stopEvents: false }) let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
if (Capabilities.supportsTemplate()) { if (Capabilities.supportsTemplate()) {
let flip = new DOMFlip( let flip1 = new DOMFlip(
scatterContainer, scatterContainer,
flipTemplate, flipTemplate,
new ImageLoader('./examples/king.jpeg'), new ImageLoader('./examples/king.jpeg'),
new ImageLoader('./examples/women.jpeg'), new ImageLoader('./examples/women.jpeg'),
{ tapDelegateFactory: CardWrapper, preloadBack: true } { /*tapDelegateFactory: CardWrapper,*/ preloadBack: true }
) )
flip.load().then((flip) => { flip1.load().then((flip) => {
flip.centerAt({ x: 150, y: 120 }) flip.centerAt({ x: 150, y: 120 })
}) })
let flip2 = new DOMFlip(
scatterContainer,
flipTemplate,
new ImageLoader('./examples/king.jpeg'),
new ImageLoader('./examples/queen.jpeg'),
{ /*tapDelegateFactory: CardWrapper,*/ preloadBack: true }
)
flip2.load().then((flip) => {
flip.centerAt({ x: 650, y: 120 })
})
} else { } else {
alert('Templates not supported, use Edge, Chrome, Safari or Firefox.') alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
} }

41
lib/flippable.js
View File

@ -17,7 +17,7 @@ export class CardLoader {
scale = 1, scale = 1,
minScale = 0.5, minScale = 0.5,
maxScale = 1.5, maxScale = 1.5,
rotation = 0, rotation = 0
} = {} } = {}
) { ) {
this.src = src this.src = src
@ -67,7 +67,7 @@ export class PDFLoader extends CardLoader {
// Render PDF page into canvas context. // Render PDF page into canvas context.
let renderContext = { let renderContext = {
canvasContext: context, canvasContext: context,
viewport: viewport, viewport: viewport
} }
page.render(renderContext) page.render(renderContext)
domNode.appendChild(canvas) domNode.appendChild(canvas)
@ -209,7 +209,7 @@ export class DOMFlip {
onClose = null, onClose = null,
onUpdate = null, onUpdate = null,
onRemoved = null, onRemoved = null,
onLoaded = null, onLoaded = null
} = {} } = {}
) { ) {
this.domScatterContainer = domScatterContainer this.domScatterContainer = domScatterContainer
@ -276,7 +276,7 @@ export class DOMFlip {
scalable: this.scalable, scalable: this.scalable,
rotatable: this.rotatable, rotatable: this.rotatable,
overdoScaling: this.overdoScaling, overdoScaling: this.overdoScaling,
tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null, tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null
}) })
if (this.center) { if (this.center) {
@ -352,7 +352,7 @@ export class DOMFlip {
opacity: 0, opacity: 0,
onComplete: () => { onComplete: () => {
this.cardWrapper.remove() this.cardWrapper.remove()
}, }
}) })
} }
@ -400,7 +400,7 @@ export class DOMFlippable {
TweenLite.set(this.back, { rotationY: -180 }) TweenLite.set(this.back, { rotationY: -180 })
TweenLite.set([this.back, this.front], { TweenLite.set([this.back, this.front], {
backfaceVisibility: 'hidden', backfaceVisibility: 'hidden',
perspective: 5000, perspective: 5000
}) })
TweenLite.set(this.front, { visibility: 'visible' }) TweenLite.set(this.front, { visibility: 'visible' })
this.infoBtn = element.querySelector('.infoBtn') this.infoBtn = element.querySelector('.infoBtn')
@ -447,7 +447,7 @@ export class DOMFlippable {
if (this.onRemoved) { if (this.onRemoved) {
this.onRemoved.call(this) this.onRemoved.call(this)
} }
}, }
}) })
} }
} }
@ -476,7 +476,7 @@ export class DOMFlippable {
scaleButtons() { scaleButtons() {
TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], { TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
scale: this.buttonScale, scale: this.buttonScale
}) })
} }
@ -618,10 +618,11 @@ export class DOMFlippable {
this.scatter.translatable = translatable this.scatter.translatable = translatable
this.scatter.rotatable = rotatable this.scatter.rotatable = rotatable
}, },
force3D: true, force3D: true
}) })
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/ // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, { const duration = this.flipDuration / 2
TweenLite.to(this.element, duration, {
scale: targetScale, scale: targetScale,
ease: Power1.easeOut, ease: Power1.easeOut,
rotationZ: targetZ + '_short', rotationZ: targetZ + '_short',
@ -638,7 +639,25 @@ export class DOMFlippable {
this.hide(this.back) this.hide(this.back)
// this.show(this.infoBtn) // this.show(this.infoBtn)
} }
}, }
})
//uo: check for special case that the front image must be adapted to the back size
let frontImage = this.front.querySelector('img')
if (frontImage) {
let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w
let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h
let ratio = this.scatterStartWidth / this.scatterStartHeight
if (this.flipped) {
TweenLite.to(frontImage, duration, {
ease: Power1.easeOut,
scaleY: scaleY * targetScale * ratio,
scaleX: scaleX * targetScale,
onComplete: (e) => {
TweenLite.set(frontImage, { scale: 1.0 })
}
}) })
} }
} }
}
}

4
package.json
View File

@ -14,8 +14,8 @@
"test-eventlistener-hammerjs-destroy": "node ./test/tests/eventlistener/hammerjs-destroy.js", "test-eventlistener-hammerjs-destroy": "node ./test/tests/eventlistener/hammerjs-destroy.js",
"test-eventlistener-interactionmapper": "node ./test/tests/eventlistener/interactionmapper.js", "test-eventlistener-interactionmapper": "node ./test/tests/eventlistener/interactionmapper.js",
"test-eventlistener-interactionmapper-off": "node ./test/tests/eventlistener/interactionmapper-off.js", "test-eventlistener-interactionmapper-off": "node ./test/tests/eventlistener/interactionmapper-off.js",
"build": "rollup --config ./rollup.config.js", "build": "rollup --config ./rollup.config.mjs",
"watch": "rollup --watch --config ./rollup.config.js", "watch": "rollup --watch --config ./rollup.config.mjs",
"3rdparty": "gulp", "3rdparty": "gulp",
"prettier": "gulp prettify", "prettier": "gulp prettify",
"jsdoc": "jsdoc -c ./doc/conf.json" "jsdoc": "jsdoc -c ./doc/conf.json"

0
rollup.config.js → rollup.config.mjs
View File