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

Fixed flippable scaling problem.

Browse Source
This commit is contained in:
Uwe Oestermeier 2024-02-12 15:05:12 +01:00
parent 57d6e8b461
commit 13ea23186f
5 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/flipeffect.css
View File

@ -47,7 +47,6 @@
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,7 +57,6 @@
width: 44px; width: 44px;
height: 44px; height: 44px;
padding: 4px; padding: 4px;
border: 1px solid red;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
@ -69,7 +67,6 @@
width: 44px; width: 44px;
height: 44px; height: 44px;
padding: 4px; padding: 4px;
border: 1px solid red;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }

24
dist/iwmlib.js vendored
View File

@ -5504,6 +5504,7 @@
x: x, x: x,
y: y, y: y,
onComplete: (e) => { onComplete: (e) => {
console.log('onComplete', e);
if (this.flipped) { if (this.flipped) {
this.hide(this.front); this.hide(this.front);
// this.hide(this.infoBtn) // this.hide(this.infoBtn)
@ -5517,17 +5518,24 @@
//uo: check for special case that the front image must be adapted to the back size //uo: check for special case that the front image must be adapted to the back size
let frontImage = this.front.querySelector('img'); let frontImage = this.front.querySelector('img');
if (frontImage) { if (frontImage) {
let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w; // Assumes that startWidth and startHeight are encoded in px
let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h; let sh = parseInt(this.startHeight);
let ratio = this.scatterStartWidth / this.scatterStartHeight; let sw = parseInt(this.startWidth);
if (this.flipped) { if (this.flipped) {
let scaleY = h / sh;
let scaleX = w / sw;
TweenLite.to(frontImage, duration, { TweenLite.to(frontImage, duration, {
ease: Power1.easeOut, ease: Power1.easeOut,
scaleY: scaleY * targetScale * ratio, transformOrigin: '0% 0%',
scaleX: scaleX * targetScale, scaleY,
onComplete: (e) => { scaleX
TweenLite.set(frontImage, { scale: 1.0 }); });
} } else {
TweenLite.to(frontImage, duration, {
ease: Power1.easeOut,
transformOrigin: '0% 0%',
scaleY: 1.0,
scaleX: 1.0
}); });
} }
} }

24
dist/iwmlib.pixi.js vendored
View File

@ -8745,6 +8745,7 @@
x: x, x: x,
y: y, y: y,
onComplete: (e) => { onComplete: (e) => {
console.log('onComplete', e);
if (this.flipped) { if (this.flipped) {
this.hide(this.front); this.hide(this.front);
// this.hide(this.infoBtn) // this.hide(this.infoBtn)
@ -8758,17 +8759,24 @@
//uo: check for special case that the front image must be adapted to the back size //uo: check for special case that the front image must be adapted to the back size
let frontImage = this.front.querySelector('img'); let frontImage = this.front.querySelector('img');
if (frontImage) { if (frontImage) {
let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w; // Assumes that startWidth and startHeight are encoded in px
let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h; let sh = parseInt(this.startHeight);
let ratio = this.scatterStartWidth / this.scatterStartHeight; let sw = parseInt(this.startWidth);
if (this.flipped) { if (this.flipped) {
let scaleY = h / sh;
let scaleX = w / sw;
TweenLite.to(frontImage, duration, { TweenLite.to(frontImage, duration, {
ease: Power1.easeOut, ease: Power1.easeOut,
scaleY: scaleY * targetScale * ratio, transformOrigin: '0% 0%',
scaleX: scaleX * targetScale, scaleY,
onComplete: (e) => { scaleX
TweenLite.set(frontImage, { scale: 1.0 }); });
} } else {
TweenLite.to(frontImage, duration, {
ease: Power1.easeOut,
transformOrigin: '0% 0%',
scaleY: 1.0,
scaleX: 1.0
}); });
} }
} }

24
lib/flippable.js
View File

@ -632,6 +632,7 @@ export class DOMFlippable {
x: x, x: x,
y: y, y: y,
onComplete: (e) => { onComplete: (e) => {
console.log('onComplete', e)
if (this.flipped) { if (this.flipped) {
this.hide(this.front) this.hide(this.front)
// this.hide(this.infoBtn) // this.hide(this.infoBtn)
@ -645,17 +646,24 @@ export class DOMFlippable {
//uo: check for special case that the front image must be adapted to the back size //uo: check for special case that the front image must be adapted to the back size
let frontImage = this.front.querySelector('img') let frontImage = this.front.querySelector('img')
if (frontImage) { if (frontImage) {
let scaleX = this.flipped ? w / this.scatterStartWidth : this.scatterStartWidth / w // Assumes that startWidth and startHeight are encoded in px
let scaleY = this.flipped ? h / this.scatterStartHeight : this.scatterStartHeight / h let sh = parseInt(this.startHeight)
let ratio = this.scatterStartWidth / this.scatterStartHeight let sw = parseInt(this.startWidth)
if (this.flipped) { if (this.flipped) {
let scaleY = h / sh
let scaleX = w / sw
TweenLite.to(frontImage, duration, { TweenLite.to(frontImage, duration, {
ease: Power1.easeOut, ease: Power1.easeOut,
scaleY: scaleY * targetScale * ratio, transformOrigin: '0% 0%',
scaleX: scaleX * targetScale, scaleY,
onComplete: (e) => { scaleX
TweenLite.set(frontImage, { scale: 1.0 }) })
} } else {
TweenLite.to(frontImage, duration, {
ease: Power1.easeOut,
transformOrigin: '0% 0%',
scaleY: 1.0,
scaleX: 1.0
}) })
} }
} }

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