Working on tap behavior of scatter and flippables.

lib/flippable.js

@@ -31,12 +31,12 @@ export class CardLoader {
         this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
         this.addedNode = null
         console.log({
-         
+
             width,
             height,
             maxWidth,
             maxHeight,
-           
+
         })
     }
 
@@ -199,6 +199,7 @@ export class DOMFlip {
             translatable = true,
             scalable = true,
             rotatable = true,
+            clickOnTap = false,
             onFront = null,
             onBack = null,
             onClose = null,
@@ -218,6 +219,7 @@ export class DOMFlip {
         this.translatable = translatable
         this.scalable = scalable
         this.rotatable = rotatable
+        this.clickOnTap = clickOnTap
         this.onFrontFlipped = onFront
         this.onBackFlipped = onBack
         this.onClose = onClose
@@ -272,7 +274,8 @@ export class DOMFlip {
                     translatable: this.translatable,
                     scalable: this.scalable,
                     rotatable: this.rotatable,
-                    overdoScaling: this.overdoScaling
+                    overdoScaling: this.overdoScaling,
+                    clickOnTap: this.clickOnTap
                 }
             )
 
@@ -281,7 +284,6 @@ export class DOMFlip {
             }
 
             if (this.closeOnMinScale) {
-
                 const removeOnMinScale = function () {
                     if (scatter.scale <= scatter.minScale) {
                         this.flippable.close()
@@ -296,11 +298,7 @@ export class DOMFlip {
                             scatter.onTransform.splice(callbackIdx, 1)
                         }
                     }
-
                 }.bind(this)
-
-
-
                 scatter.addTransformEventCallback(removeOnMinScale)
             }
 
@@ -336,8 +334,11 @@ export class DOMFlip {
     }
 
     start({ targetCenter = null } = {}) {
-        console.log('DOMFlip.start', targetCenter)
-        if (this.preloadBack) this.flippable.start({ duration: this.flipDuration, targetCenter })
+        console.log("DOMFlip.start", targetCenter)
+        if (this.preloadBack) {
+            
+            this.flippable.start({ duration: this.flipDuration, targetCenter })
+        }
         else {
             let back = this.cardWrapper.querySelector('.back')
             let flippable = this.flippable
@@ -389,7 +390,7 @@ export class DOMFlippable {
         this.flipDuration = flip.flipDuration
         this.fadeDuration = flip.fadeDuration
         scatter.addTransformEventCallback(this.scatterTransformed.bind(this))
-        console.log('lib.DOMFlippable', 5000)
+
         TweenLite.set(this.element, { perspective: 5000 })
         TweenLite.set(this.card, { transformStyle: 'preserve-3d' })
         TweenLite.set(this.back, { rotationY: -180 })
@@ -402,15 +403,24 @@ export class DOMFlippable {
         this.backBtn = element.querySelector('.backBtn')
         this.closeBtn = element.querySelector('.closeBtn')
         /* Buttons are not guaranteed to exist. */
+
         if (this.infoBtn) {
-            InteractionMapper.on('tap', this.infoBtn, event => this.flip.start())
+            scatter.addTapListener(this.infoBtn, event => {
+                console.log("within click handler", this)
+                this.flip.start()
+            })
             this.enable(this.infoBtn)
         }
         if (this.backBtn) {
-            InteractionMapper.on('tap', this.backBtn, event => this.start())
+            scatter.addTapListener(this.backBtn, event => {
+                console.log("within click handler", this)
+                this.start()
+            })
         }
         if (this.closeBtn) {
-            InteractionMapper.on('tap', this.closeBtn, event => this.close())
+            scatter.addTapListener(this.closeBtn, event => {
+                this.close()
+            })
             this.enable(this.closeBtn)
         }
         this.scaleButtons()
@@ -460,18 +470,6 @@ export class DOMFlippable {
     }
 
     scaleButtons() {
-        //This also works for svgs.
-        // if (this.infoBtn)
-        //     this.infoBtn.style.transform = "scale(" + this.buttonScale + ")"
-
-        // if (this.backBtn)
-        //     this.backBtn.style.transform = "scale(" + this.buttonScale + ")"
-
-        // if (this.closeBtn)
-        //     this.closeBtn.style.transform = "scale(" + this.buttonScale + ")"
-
-        console.log(this.buttonScale)
-        //// This did not work with svgs!
         TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
             scale: this.buttonScale
         })
@@ -484,6 +482,7 @@ export class DOMFlippable {
 
     clickInfo() {
         this.bringToFront()
+        console.log("clickInfo")
         this.infoBtn.click()
     }
 
@@ -525,8 +524,6 @@ export class DOMFlippable {
         }
     }
 
-
-
     enable(button) {
         this.show(button, this.fadeDuration)
         if (button) {
@@ -537,7 +534,7 @@ export class DOMFlippable {
     disable(button) {
         this.hide(button, this.fadeDuration)
         if (button) {
-            TweenLite.set(button, { pointerEvents: 'none' })
+           // TweenLite.set(button, { pointerEvents: 'none' })
         }
     }
 
@@ -582,7 +579,6 @@ export class DOMFlippable {
         let x = this.flipped ? xx : this.startX
         let y = this.flipped ? yy : this.startY
 
-        console.log("DOMFlippable.start", this.flipped, targetCenter, x, y, this.saved)
         let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null
         console.log(this.flipDuration)
         TweenLite.to(this.card, this.flipDuration, {