Added prepare method

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,