iwmlib/lib/flippable.js

649 lines
21 KiB
JavaScript

import { getId } from './utils.js'
import { DOMScatter } from './scatter.js'
import { InteractionMapper } from './interaction.js'
export class CardLoader {
constructor(
src,
{
x = 0,
y = 0,
width = 1000,
height = 800,
maxWidth = null,
maxHeight = null,
scale = 1,
minScale = 0.5,
maxScale = 1.5,
rotation = 0
} = {}
) {
this.src = src
this.x = x
this.y = y
this.scale = scale
this.rotation = 0
this.maxScale = maxScale
this.minScale = minScale
this.wantedWidth = width
this.wantedHeight = height
this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth
this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight
this.addedNode = null
console.log({
width,
height,
maxWidth,
maxHeight,
})
}
unload() {
if (this.addedNode) {
this.addedNode.remove()
this.addedNode = null
}
}
}
export class PDFLoader extends CardLoader {
constructor(src, { width = 1640, height = 800, scale = 1 } = {}) {
super(src, { width, height, scale })
if (typeof PDFJS == 'undefined') {
alert('PDF.js needed')
}
}
load(domNode) {
return new Promise((resolve, reject) => {
PDFJS.getDocument(this.src).then(pdf => {
pdf.getPage(1).then(page => {
let scale = this.scale * app.renderer.resolution
let invScale = 1 / scale
let viewport = page.getViewport(scale)
// Prepare canvas using PDF page dimensions.
let canvas = document.createElement('canvas')
let context = canvas.getContext('2d')
canvas.height = viewport.height
canvas.width = viewport.width
// Render PDF page into canvas context.
let renderContext = {
canvasContext: context,
viewport: viewport
}
page.render(renderContext)
domNode.appendChild(canvas)
this.wantedWidth = canvas.width
this.wantedHeight = canvas.height
this.scale = invScale
this.addedNode = canvas
resolve(this)
})
})
})
}
}
export class ImageLoader extends CardLoader {
load(domNode) {
return new Promise((resolve, reject) => {
let isImage = domNode instanceof HTMLImageElement
let image = isImage ? domNode : document.createElement('img')
image.onload = e => {
if (!isImage) {
domNode.appendChild(image)
this.addedNode = image
}
this.wantedWidth = image.naturalWidth
this.wantedHeight = image.naturalHeight
let scaleW = this.maxWidth / image.naturalWidth
let scaleH = this.maxHeight / image.naturalHeight
this.scale = Math.min(this.maxScale, Math.min(scaleW, scaleH))
image.setAttribute('draggable', false)
image.width = image.naturalWidth
image.height = image.naturalHeight
resolve(this)
}
image.onerror = e => {
reject(this)
}
image.src = this.src
})
}
}
export class FrameLoader extends CardLoader {
load(domNode) {
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
iframe.height = this.wantedHeight
if (!isFrame) {
// Unlike img onload is only triggered if the iframe is part of the DOM tree
domNode.appendChild(iframe)
this.addedNode = iframe
}
iframe.onload = e => {
resolve(this)
}
iframe.onerror = e => {
reject(this)
}
iframe.src = this.src
})
}
}
export class HTMLLoader extends CardLoader {
load(domNode) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open('GET', this.src, false)
xhr.onload = e => {
domNode.innerHTML = 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)
}
xhr.onerror = e => {
reject(this)
}
xhr.send()
})
}
/**
* Tries to determine the size of the addedNode.
* Checks for explicit width and height style attributes.
*
* Overwrite this method if you want to extract values from other infos.
*
* @returns { width: int, height: int }
* @memberof HTMLLoader
*/
size(node) {
let width = parseInt(node.style.width) || null
let height = parseInt(node.style.height) || null
return { width, height }
}
}
export class DOMFlip {
constructor(
domScatterContainer,
flipTemplate,
frontLoader,
backLoader,
{
closeOnMinScale = false,
flipDuration = 1,
fadeDuration = 0.2,
overdoScaling = 1,
autoLoad = false,
center = null,
preloadBack = false,
translatable = true,
scalable = true,
rotatable = true,
onFront = null,
onBack = null,
onClose = null,
onUpdate = null,
onRemoved = null,
onLoaded = null
} = {}
) {
this.domScatterContainer = domScatterContainer
this.id = getId()
this.flipDuration = flipDuration
this.fadeDuration = fadeDuration
this.closeOnMinScale = closeOnMinScale
this.flipTemplate = flipTemplate
this.frontLoader = frontLoader
this.backLoader = backLoader
this.translatable = translatable
this.scalable = scalable
this.rotatable = rotatable
this.onFrontFlipped = onFront
this.onBackFlipped = onBack
this.onClose = onClose
this.onRemoved = onRemoved
this.onUpdate = onUpdate
this.onLoaded = onLoaded
this.center = center
this.preloadBack = preloadBack
this.overdoScaling = overdoScaling
if (autoLoad) {
this.load()
}
}
load() {
return new Promise((resolve, reject) => {
let t = this.flipTemplate
let dom = this.domScatterContainer.element
let wrapper = t.content.querySelector('.flipWrapper')
wrapper.id = this.id
let clone = document.importNode(t.content, true)
dom.appendChild(clone)
// We cannot use the document fragment itself because it
// is not part of the main dom tree. After the appendChild
// call we can access the new dom element by id
this.cardWrapper = dom.querySelector('#' + this.id)
let front = this.cardWrapper.querySelector('.front')
this.frontLoader.load(front).then(loader => {
this.frontLoaded(loader).then((obj) => {
if (this.onLoaded) this.onLoaded()
resolve(this)
})
})
})
}
frontLoaded(loader) {
return new Promise((resolve, reject) => {
let scatter = new DOMScatter(
this.cardWrapper,
this.domScatterContainer,
{
x: loader.x,
y: loader.y,
startScale: loader.scale,
scale: loader.scale,
maxScale: loader.maxScale,
minScale: loader.minScale,
width: loader.wantedWidth,
height: loader.wantedHeight,
rotation: loader.rotation,
translatable: this.translatable,
scalable: this.scalable,
rotatable: this.rotatable,
overdoScaling: this.overdoScaling
}
)
if (this.center) {
scatter.centerAt(this.center)
}
if (this.closeOnMinScale) {
const removeOnMinScale = function () {
if (scatter.scale <= scatter.minScale) {
this.flippable.close()
// 'Disable' overdoscaling to avoid weird jumps on close.
scatter.minScale /= scatter.overdoScaling
scatter.overdoScaling = 1
//Remove callback
if (scatter.onTransform) {
let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale)
scatter.onTransform.splice(callbackIdx, 1)
}
}
}.bind(this)
scatter.addTransformEventCallback(removeOnMinScale)
}
let flippable = new DOMFlippable(this.cardWrapper, scatter, this)
let back = this.cardWrapper.querySelector('.back')
if (this.preloadBack) {
this.backLoader.load(back).then(loader => {
this.setupFlippable(flippable, loader)
})
}
this.flippable = flippable
resolve(this)
})
}
centerAt(p) {
this.center = p
this.flippable.centerAt(p)
}
zoom(scale) {
this.flippable.zoom(scale)
}
setupFlippable(flippable, loader) {
flippable.wantedWidth = loader.wantedWidth
flippable.wantedHeight = loader.wantedHeight
flippable.wantedScale = loader.scale
flippable.minScale = loader.minScale
flippable.maxScale = loader.maxScale
flippable.scaleButtons()
}
start({ targetCenter = null } = {}) {
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
this.backLoader.load(back).then(loader => {
this.setupFlippable(flippable, loader)
flippable.start({ duration: this.flipDuration, targetCenter })
})
}
}
fadeOutAndRemove() {
TweenLite.to(this.cardWrapper, this.fadeDuration, {
opacity: 0,
onComplete: () => {
this.cardWrapper.remove()
}
})
}
closed() {
this.unload()
}
unload() {
if (!this.preloadBack) {
this.backLoader.unload()
}
}
}
export class DOMFlippable {
constructor(element, scatter, flip) {
// Set log to console.log or a custom log function
// define data structures to store our touchpoints in
this.element = element
this.flip = flip
this.card = element.querySelector('.flipCard')
this.front = element.querySelector('.front')
this.back = element.querySelector('.back')
this.flipped = false
this.scatter = scatter
this.onFrontFlipped = flip.onFrontFlipped
this.onBackFlipped = flip.onBackFlipped
this.onClose = flip.onClose
this.onRemoved = flip.onRemoved
this.onUpdate = flip.onUpdate
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 })
TweenLite.set([this.back, this.front], {
backfaceVisibility: 'hidden',
perspective: 5000
})
TweenLite.set(this.front, { visibility: 'visible' })
this.infoBtn = element.querySelector('.infoBtn')
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())
this.enable(this.infoBtn)
}
if (this.backBtn) {
InteractionMapper.on('tap', this.backBtn, event => this.start())
}
if (this.closeBtn) {
InteractionMapper.on('tap', this.closeBtn, event => this.close())
this.enable(this.closeBtn)
}
this.scaleButtons()
this.bringToFront()
}
close() {
this.disable(this.infoBtn)
this.disable(this.closeBtn)
if (this.onClose) {
this.onClose(this)
this.flip.closed()
} else {
this.scatter.zoom(0.1, {
animate: this.fadeDuration,
onComplete: () => {
this.element.remove()
this.flip.closed()
if (this.onRemoved) {
this.onRemoved.call(this)
}
}
})
}
}
showFront() {
TweenLite.set(this.front, { visibility: 'visible' })
}
centerAt(p) {
this.scatter.centerAt(p)
}
zoom(scale) {
this.scatter.zoom(scale)
}
get buttonScale() {
let iscale = 1.0
if (this.scatter != null) {
let scale = this.scatter.scale || 1
iscale = 1.0 / scale
}
return iscale
}
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
})
}
bringToFront() {
this.scatter.bringToFront()
TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ })
}
clickInfo() {
this.bringToFront()
this.infoBtn.click()
}
scatterTransformed(event) {
this.scaleButtons()
}
targetRotation(alpha) {
let ortho = 90
let rest = alpha % ortho
let delta = 0.0
if (rest > ortho / 2.0) {
delta = ortho - rest
} else {
delta = -rest
}
return delta
}
infoValues(info) {
let startX = this.element._gsTransform.x
let startY = this.element._gsTransform.y
let startAngle = this.element._gsTransform.rotation
let startScale = this.element._gsTransform.scaleX
let w = this.element.style.width
let h = this.element.style.height
console.log(info, startX, startY, startAngle, startScale, w, h)
}
show(element, duration = 0, alpha = 1) {
if (element) {
TweenLite.to(element, duration, { autoAlpha: alpha }) // visibility: 'visible', display: 'initial'})
}
}
hide(element, duration = 0, alpha = 0) {
if (element) {
TweenLite.to(element, duration, { autoAlpha: alpha }) // {visibility: 'hidden', display: 'none'})
}
}
enable(button) {
this.show(button, this.fadeDuration)
if (button) {
TweenLite.set(button, { pointerEvents: 'auto' })
}
}
disable(button) {
this.hide(button, this.fadeDuration)
if (button) {
TweenLite.set(button, { pointerEvents: 'none' })
}
}
start({ targetCenter = null } = {}) {
this.bringToFront()
if (!this.flipped) {
this.startX = this.element._gsTransform.x
this.startY = this.element._gsTransform.y
this.startAngle = this.element._gsTransform.rotation
this.startScale = this.element._gsTransform.scaleX
this.startWidth = this.element.style.width
this.startHeight = this.element.style.height
this.scatterStartWidth = this.scatter.width
this.scatterStartHeight = this.scatter.height
this.show(this.back)
this.disable(this.infoBtn)
this.disable(this.closeBtn)
} else {
this.show(this.front, this.fadeDuration)
this.disable(this.backBtn)
}
let { scalable, translatable, rotatable } = this.scatter
this.saved = { scalable, translatable, rotatable }
this.scatter.scalable = false
this.scatter.translatable = false
this.scatter.rotatable = false
this.scatter.killAnimation()
this.flipped = !this.flipped
let targetY = this.flipped ? 180 : 0
let targetZ = this.flipped
? this.startAngle + this.targetRotation(this.startAngle)
: this.startAngle
let targetScale = this.flipped ? this.wantedScale : this.startScale
let w = this.flipped ? this.wantedWidth : this.startWidth
let h = this.flipped ? this.wantedHeight : this.startHeight
let dw = this.wantedWidth - this.scatter.width
let dh = this.wantedHeight - this.scatter.height
let tc = targetCenter
let xx = tc != null ? tc.x - w / 2 : this.startX - dw / 2
let yy = tc != null ? tc.y - h / 2 : this.startY - dh / 2
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, {
rotationY: targetY,
ease: Power1.easeOut,
transformOrigin: '50% 50%',
onUpdate,
onComplete: e => {
if (this.flipped) {
//this.hide(this.front)
this.enable(this.backBtn)
this.show(this.backBtn)
if (this.onFrontFlipped) {
this.onFrontFlipped(this)
}
} else {
if (this.onBackFlipped == null) {
this.enable(this.infoBtn, this.fadeDuration)
this.enable(this.closeBtn, this.fadeDuration)
} else {
this.onBackFlipped(this)
}
this.flip.unload()
}
this.scatter.scale = targetScale
this.scaleButtons()
this.scatter.rotationDegrees = targetZ
this.scatter.width = this.flipped ? w : this.scatterStartWidth
this.scatter.height = this.flipped ? h : this.scatterStartHeight
let { scalable, translatable, rotatable } = this.saved
this.scatter.scalable = scalable
this.scatter.translatable = translatable
this.scatter.rotatable = rotatable
},
force3D: true
})
// See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
TweenLite.to(this.element, this.flipDuration / 2, {
scale: targetScale,
ease: Power1.easeOut,
rotationZ: targetZ + '_short',
transformOrigin: '50% 50%',
width: w,
height: h,
x: x,
y: y,
onComplete: e => {
if (this.flipped) {
this.hide(this.front)
// this.hide(this.infoBtn)
} else {
this.hide(this.back)
// this.show(this.infoBtn)
}
}
})
}
}