From e502c97de5b3c80c67b51b4bdfbaf5b177b5fc93 Mon Sep 17 00:00:00 2001 From: Uwe Oestermeier Date: Sat, 3 Aug 2019 09:02:58 +0200 Subject: [PATCH] Added prepare method --- lib/flippable.js | 39 +++++++++++++++++---------------------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/lib/flippable.js b/lib/flippable.js index 8c57e12..20f6b36 100644 --- a/lib/flippable.js +++ b/lib/flippable.js @@ -1,6 +1,7 @@ +/* eslint-disable no-unused-vars */ +/* global PDFJS Power1 */ import { getId } from './utils.js' import { DOMScatter } from './scatter.js' -import { InteractionMapper } from './interaction.js' export class CardLoader { constructor( @@ -22,7 +23,7 @@ export class CardLoader { this.x = x this.y = y this.scale = scale - this.rotation = 0 + this.rotation = rotation this.maxScale = maxScale this.minScale = minScale this.wantedWidth = width @@ -30,12 +31,6 @@ export class CardLoader { this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight this.addedNode = null - console.log({ - width, - height, - maxWidth, - maxHeight - }) } unload() { @@ -120,7 +115,6 @@ export class FrameLoader extends CardLoader { return new Promise((resolve, reject) => { let isFrame = domNode instanceof HTMLIFrameElement let iframe = isFrame ? domNode : document.createElement('iframe') - console.log('FrameLoader.load', isFrame, iframe, this.src) iframe.frameBorder = 0 iframe.style.scrolling = false iframe.width = this.wantedWidth @@ -147,14 +141,9 @@ export class HTMLLoader extends CardLoader { let xhr = new XMLHttpRequest() xhr.open('GET', this.src, false) xhr.onload = e => { - domNode.innerHTML = xhr.response + domNode.innerHTML = this.prepare(xhr.response) this.addedNode = domNode.firstElementChild let { width, height } = this.size(this.addedNode) - console.log('HTMLLoader.load', { - added: this.addedNode, - width, - height - }) if (width) this.wantedWidth = width || this.wantedWidth if (height) this.wantedHeight = height || this.wantedHeight resolve(this) @@ -166,6 +155,18 @@ export class HTMLLoader extends CardLoader { }) } + /** + * Preoares the html before it is assigned with innerHTML. + * Can be overwritten in subclasses. + * + * @param {*} html + * @returns + * @memberof HTMLLoader + */ + prepare(html) { + return html + } + /** * Tries to determine the size of the addedNode. * Checks for explicit width and height style attributes. @@ -321,7 +322,6 @@ export class DOMFlip { } setupFlippable(flippable, loader) { - console.log('setupFlippable', loader.wantedWidth) flippable.wantedWidth = loader.wantedWidth flippable.wantedHeight = loader.wantedHeight flippable.wantedScale = loader.scale @@ -331,7 +331,6 @@ export class DOMFlip { } start({ targetCenter = null } = {}) { - console.log('DOMFlip.start', targetCenter) if (this.preloadBack) { this.flippable.start({ duration: this.flipDuration, targetCenter }) } else { @@ -481,7 +480,6 @@ export class DOMFlippable { clickInfo() { this.bringToFront() - console.log('clickInfo') this.infoBtn.click() } @@ -508,6 +506,7 @@ export class DOMFlippable { let startScale = this.element._gsTransform.scaleX let w = this.element.style.width let h = this.element.style.height + // eslint-disable-next-line no-console console.log(info, startX, startY, startAngle, startScale, w, h) } @@ -577,14 +576,12 @@ export class DOMFlippable { let y = this.flipped ? yy : this.startY let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null - console.log('start', this.flipDuration) TweenLite.to(this.card, this.flipDuration, { rotationY: targetY, ease: Power1.easeOut, transformOrigin: '50% 50%', onUpdate, onComplete: e => { - console.log('start end', this.flipDuration) if (this.flipped) { //this.hide(this.front) this.enable(this.backBtn) @@ -615,8 +612,6 @@ export class DOMFlippable { }, force3D: true }) - - console.log('start 2', this.wantedWidth, this.startWidth, { w, h }) // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/ TweenLite.to(this.element, this.flipDuration / 2, { scale: targetScale,