diff --git a/css/flipeffect.css b/css/flipeffect.css index 650b29a..2a07446 100644 --- a/css/flipeffect.css +++ b/css/flipeffect.css @@ -1,4 +1,3 @@ - .flipWrapper { position: absolute; top: 0; @@ -48,6 +47,7 @@ width: 44px; height: 44px; padding: 4px; + border: 1px solid red; right: 0; top: 0; } @@ -58,6 +58,7 @@ width: 44px; height: 44px; padding: 4px; + border: 1px solid red; right: 0; bottom: 0; } @@ -68,6 +69,7 @@ width: 44px; height: 44px; padding: 4px; + border: 1px solid red; right: 0; bottom: 0; } diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 1482c31..5bbdcc8 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -1020,7 +1020,7 @@ /** Static methods to compute 2D points with x and y coordinates. */ - class Points$1 { + let Points$1 = class Points { static length(a) { return Math.sqrt(a.x * a.x + a.y * a.y) } @@ -1114,7 +1114,7 @@ // } return window.convertPointFromNodeToPage(element, p.x, p.y) } - } + }; /** * A helper class for common set operations. @@ -1238,7 +1238,7 @@ } } - class Elements$1 { + let Elements$1 = class Elements { static setStyle(element, styles) { for (let key in styles) { element.style[key] = styles[key]; @@ -1260,7 +1260,7 @@ static hasClass(element, cssClass) { return element.classList.contains(cssClass) } - } + }; class MapProxy { /* This class is needed if we want to use the interaction classes @@ -1578,7 +1578,7 @@ /** * 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. * @@ -1603,7 +1603,7 @@ static getPosition(rect) { return { x: rect.x, y: rect.y } } - } + }; /** String utility functions */ @@ -1741,7 +1741,7 @@ * The logging handlers can be overwritten by calling the static * setup method. */ - class Logging$1 { + let Logging$1 = class Logging { /** Static log function. * @param {*} message */ @@ -1778,9 +1778,12 @@ logHandlers.warn = warn; logHandlers.error = error; } - } + }; /* eslint-disable no-unused-vars */ + /* globals Hammer, propagating */ + /*eslint no-console: ["error", { allow: ["log", "warn", "info", "error"] }]*/ + /** Interaction patterns @@ -2728,7 +2731,7 @@ * @class InteractionMapper * @extends {InteractionDelegate} */ - class InteractionMapper$1 extends InteractionDelegate { + let InteractionMapper$1 = class InteractionMapper extends InteractionDelegate { constructor( element, target, @@ -2950,7 +2953,7 @@ } } } - } + }; window.InteractionMapper = InteractionMapper$1; @@ -3126,6 +3129,8 @@ window.CapabilitiesTests = CapabilitiesTests; /* eslint-disable no-unused-vars */ + /* eslint-disable no-console */ + /* globals debugCanvas */ /** This interface allows scatters to delegate tap events to other objects. */ class ITapDelegate extends Interface { @@ -4193,7 +4198,7 @@ } } - class DOMScatter$1 extends AbstractScatter { + let DOMScatter$1 = class DOMScatter extends AbstractScatter { constructor( element, container, @@ -4482,7 +4487,7 @@ bringToFront() { // this.element.parentNode.appendChild(this.element) // 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) { @@ -4622,11 +4627,13 @@ this.element.dispatchEvent(event); } - } + }; DOMScatter$1.zIndex = 1000; /* eslint-disable no-console */ + /* global TweenLite */ + class CardWrapper extends Object { constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) { @@ -4803,6 +4810,7 @@ } /* eslint-disable no-unused-vars */ + /* global PDFJS Power1 */ class CardLoader { constructor( @@ -4817,7 +4825,7 @@ scale = 1, minScale = 0.5, maxScale = 1.5, - rotation = 0, + rotation = 0 } = {} ) { this.src = src; @@ -4867,7 +4875,7 @@ // Render PDF page into canvas context. let renderContext = { canvasContext: context, - viewport: viewport, + viewport: viewport }; page.render(renderContext); domNode.appendChild(canvas); @@ -5009,7 +5017,7 @@ onClose = null, onUpdate = null, onRemoved = null, - onLoaded = null, + onLoaded = null } = {} ) { this.domScatterContainer = domScatterContainer; @@ -5076,7 +5084,7 @@ scalable: this.scalable, rotatable: this.rotatable, overdoScaling: this.overdoScaling, - tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null, + tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null }); if (this.center) { @@ -5152,7 +5160,7 @@ opacity: 0, onComplete: () => { this.cardWrapper.remove(); - }, + } }); } @@ -5200,7 +5208,7 @@ TweenLite.set(this.back, { rotationY: -180 }); TweenLite.set([this.back, this.front], { backfaceVisibility: 'hidden', - perspective: 5000, + perspective: 5000 }); TweenLite.set(this.front, { visibility: 'visible' }); this.infoBtn = element.querySelector('.infoBtn'); @@ -5247,7 +5255,7 @@ if (this.onRemoved) { this.onRemoved.call(this); } - }, + } }); } } @@ -5276,7 +5284,7 @@ scaleButtons() { TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], { - scale: this.buttonScale, + scale: this.buttonScale }); } @@ -5418,10 +5426,11 @@ this.scatter.translatable = translatable; this.scatter.rotatable = rotatable; }, - force3D: true, + force3D: true }); // 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, ease: Power1.easeOut, rotationZ: targetZ + '_short', @@ -5438,8 +5447,26 @@ this.hide(this.back); // 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(); /* eslint-disable no-console */ + /* eslint-disable no-case-declarations */ + /* eslint-disable no-unused-vars */ /** 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. * @param {any} [{ @@ -6439,7 +6468,7 @@ } = {} ) { let notchPosition = switchPos && point.y < 50 ? 'topCenter' : 'bottomCenter'; - let popup = new Popup$1({ + let popup = new Popup({ parent, context, fontFamily, @@ -6527,14 +6556,14 @@ event.target; let x = event.pageX; let y = event.pageY; - let rect = Popup$1.targetRect(event); + let rect = Popup.targetRect(event); if (rect != null) { x = rect.left + rect.width / 2; y = rect.top + rect.height / 2; } return { x, y } } - } + }; /** A Popup Menu that shows text labels in a vertical row. */ @@ -7870,7 +7899,7 @@ * @ignore * @class */ - class Event$1 { + let Event$1 = class Event { /** * Creates an event object. * @@ -7949,7 +7978,7 @@ return new MouseEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, opts)) } } - } + }; /* eslint-disable no-console */ diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 7cdf1fa..775a98b 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -1179,7 +1179,7 @@ } } - class Events$1 { + let Events$1 = class Events { static stop(event) { event.preventDefault(); // I removed this, as it destroys all the Hammer.js events. @@ -1301,8 +1301,8 @@ data.pointerId = event.pointerId; data.pointerType = event.pointerType; } - if (Events$1.debug) { - Events$1.extracted.push(this.toLine(event)); + if (Events.debug) { + Events.extracted.push(this.toLine(event)); } return infos } @@ -1331,8 +1331,8 @@ if (data.target != null) { data.target.dispatchEvent(clone); } - if (Events$1.debug) { - Events$1.simulated.push(this.toLine(clone)); + if (Events.debug) { + Events.simulated.push(this.toLine(clone)); } } @@ -1408,7 +1408,7 @@ top: event.clientY + 'px', }); } - } + }; Events$1.popup = null; Events$1.debug = true; @@ -1818,7 +1818,7 @@ } } - class Elements$1 { + let Elements$1 = class Elements { static setStyle(element, styles) { for (let key in styles) { element.style[key] = styles[key]; @@ -1840,7 +1840,7 @@ static hasClass(element, cssClass) { return element.classList.contains(cssClass) } - } + }; class MapProxy { /* 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 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. * @@ -2904,7 +2904,7 @@ 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 sprite = new PIXI.Sprite(iconTexture); @@ -2952,10 +2952,11 @@ overwrite: 'none', }); } - } + }; /* globals ThrowPropsPlugin, Strong */ + /** * Class that represents a PixiJS ButtonGroup. * @@ -4240,6 +4241,7 @@ /* global apollo, subscriptions, gql */ + /** * A special InteractionManager for fullscreen apps, which may * 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 * setup method. */ - class Logging$1 { + let Logging$1 = class Logging { /** Static log function. * @param {*} message */ @@ -5350,9 +5352,12 @@ logHandlers.warn = warn; logHandlers.error = error; } - } + }; /* eslint-disable no-unused-vars */ + /* globals Hammer, propagating */ + /*eslint no-console: ["error", { allow: ["log", "warn", "info", "error"] }]*/ + /** Interaction patterns @@ -6300,7 +6305,7 @@ * @class InteractionMapper * @extends {InteractionDelegate} */ - class InteractionMapper$1 extends InteractionDelegate { + let InteractionMapper$1 = class InteractionMapper extends InteractionDelegate { constructor( element, target, @@ -6522,7 +6527,7 @@ } } } - } + }; window.InteractionMapper = InteractionMapper$1; @@ -6698,6 +6703,8 @@ window.CapabilitiesTests = CapabilitiesTests; /* eslint-disable no-unused-vars */ + /* eslint-disable no-console */ + /* globals debugCanvas */ /** * A base class for scatter specific events. @@ -8010,6 +8017,8 @@ DOMScatter.zIndex = 1000; /* eslint-disable no-console */ + /* global TweenLite */ + class CardWrapper extends Object { constructor(domNode, { triggerSVGClicks = true, allowClickDistance = 44 } = {}) { @@ -8186,6 +8195,7 @@ } /* eslint-disable no-unused-vars */ + /* global PDFJS Power1 */ class CardLoader { constructor( @@ -8200,7 +8210,7 @@ scale = 1, minScale = 0.5, maxScale = 1.5, - rotation = 0, + rotation = 0 } = {} ) { this.src = src; @@ -8248,7 +8258,7 @@ onClose = null, onUpdate = null, onRemoved = null, - onLoaded = null, + onLoaded = null } = {} ) { this.domScatterContainer = domScatterContainer; @@ -8315,7 +8325,7 @@ scalable: this.scalable, rotatable: this.rotatable, overdoScaling: this.overdoScaling, - tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null, + tapDelegate: this.tapDelegateFactory ? new this.tapDelegateFactory(this.cardWrapper) : null }); if (this.center) { @@ -8391,7 +8401,7 @@ opacity: 0, onComplete: () => { this.cardWrapper.remove(); - }, + } }); } @@ -8439,7 +8449,7 @@ TweenLite.set(this.back, { rotationY: -180 }); TweenLite.set([this.back, this.front], { backfaceVisibility: 'hidden', - perspective: 5000, + perspective: 5000 }); TweenLite.set(this.front, { visibility: 'visible' }); this.infoBtn = element.querySelector('.infoBtn'); @@ -8486,7 +8496,7 @@ if (this.onRemoved) { this.onRemoved.call(this); } - }, + } }); } } @@ -8515,7 +8525,7 @@ scaleButtons() { TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], { - scale: this.buttonScale, + scale: this.buttonScale }); } @@ -8657,10 +8667,11 @@ this.scatter.translatable = translatable; this.scatter.rotatable = rotatable; }, - force3D: true, + force3D: true }); // 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, ease: Power1.easeOut, rotationZ: targetZ + '_short', @@ -8677,8 +8688,26 @@ this.hide(this.back); // 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-console */ class StylusCommand extends Object { constructor() { @@ -15602,6 +15632,7 @@ /* global Quad */ + /** * Class that represents a PixiJS Volatile. * @@ -15759,6 +15790,7 @@ /* globals ThrowPropsPlugin, Strong */ + /** * Class that represents a PixiJS List. * @@ -16954,6 +16986,8 @@ } /* ES Lint */ + /* globals PIXI, requestAnimationFrame, performance, app*/ + /** * The AdvancedScatterContainer extends the ScatterContainer, but @@ -17769,7 +17803,7 @@ * @see {@link maps.html} */ - class GeoMap$1 { + let GeoMap$1 = class GeoMap { /** * Creates instance of GeoMap * @@ -17797,7 +17831,7 @@ onTransform = null } = {} ) { - this._id = GeoMap$1.counter++; + this._id = GeoMap.counter++; this.onLoad = new EventHandler('loaded', { listeners: onLoad }); this.onTransform = new EventHandler('transform', { listeners: onTransform }); @@ -18209,10 +18243,10 @@ static allFromJson(json, root = './') { let error = { message: '' }; let maps = {}; - if (GeoMap$1._validateJson(json, error)) { + if (GeoMap._validateJson(json, error)) { for (let [mapname, data] of Object.entries(json)) { data.tiles.path = root + data.tiles.path; - maps[mapname] = GeoMap$1._createMap(data); + maps[mapname] = GeoMap._createMap(data); maps[mapname].name = mapname; } } else console.error('Could not validate JSON: ' + error.message); @@ -18232,7 +18266,7 @@ static mapFromJson(map, json) { if (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 data.'); @@ -18258,7 +18292,7 @@ error.message += 'The provided JSON object did not contain any items.'; } for (let [name, data] of Object.entries(json)) { - if (!GeoMap$1._validJsonMap(data)) { + if (!GeoMap._validJsonMap(data)) { error.message += `${name} was not valid. `; isValid = false; } @@ -18305,14 +18339,14 @@ static _createMap(data) { switch (data.type.toLowerCase()) { case 'deepzoom': - return GeoMap$1._createDeepZoomMap(data) + return GeoMap._createDeepZoomMap(data) default: console.error(`Datatype is invalid or not implemented yet: ${data.type}`); } } static _createDeepZoomMap(data) { - const projection = GeoMap$1._getProjectionByName(data.projection); + const projection = GeoMap._getProjectionByName(data.projection); const tilesConfig = data.tiles; const options = data.options; @@ -18329,7 +18363,7 @@ return null } } - } + }; GeoMap$1.counter = 0; diff --git a/lib/examples/queen.jpeg b/lib/examples/queen.jpeg new file mode 100644 index 0000000..716b765 Binary files /dev/null and b/lib/examples/queen.jpeg differ diff --git a/lib/flippable.html b/lib/flippable.html index a341182..23f7aa4 100644 --- a/lib/flippable.html +++ b/lib/flippable.html @@ -64,16 +64,27 @@