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

Removed TweenMax dependency

This commit is contained in:
Uwe Oestermeier 2019-07-17 10:04:16 +02:00
parent 17bbe1a90e
commit ab835d6fc3
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
lib/card/card.js
View File

@ -431,7 +431,7 @@ export default class Card {
zIndex: this.zIndices.popup zIndex: this.zIndices.popup
}) })
TweenMax.to(popup.element, this.animation.popup, { TweenLite.to(popup.element, this.animation.popup, {
autoAlpha: 1, autoAlpha: 1,
ease: Power2.easeIn ease: Power2.easeIn
}) })
@ -451,7 +451,7 @@ export default class Card {
* TEST if this intereferes with the editor. * TEST if this intereferes with the editor.
*/ */
if (overlay) { if (overlay) {
TweenMax.to(overlay, 0.2, { TweenLite.to(overlay, 0.2, {
autoAlpha: 0, onComplete: () => { autoAlpha: 0, onComplete: () => {
popup.remove() popup.remove()
//this._cleanup(context) //this._cleanup(context)
@ -507,9 +507,9 @@ export default class Card {
if (editable) { if (editable) {
if (this.debug) console.log("Append overlay.", context) if (this.debug) console.log("Append overlay.", context)
overlay.classList.add('overlay') overlay.classList.add('overlay')
TweenMax.set(overlay, { autoAlpha: 0 }) TweenLite.set(overlay, { autoAlpha: 0 })
context.appendChild(overlay) context.appendChild(overlay)
TweenMax.to(overlay, 0.5, { autoAlpha: 0.25 }) TweenLite.to(overlay, 0.5, { autoAlpha: 0.25 })
} }
// Extract the body from the Popup site. // Extract the body from the Popup site.
@ -949,17 +949,17 @@ export default class Card {
const scaleFactor = 2 const scaleFactor = 2
const transformOrigin = 'bottom right' const transformOrigin = 'bottom right'
TweenMax.set(zoomedFig, { TweenLite.set(zoomedFig, {
x: current.x, x: current.x,
y: current.y, y: current.y,
width: current.width + borderX, width: current.width + borderX,
height: current.height + borderY, height: current.height + borderY,
transformOrigin transformOrigin
}) })
TweenMax.set(zoomable, { opacity: 0 }) TweenLite.set(zoomable, { opacity: 0 })
let icon = zoomedFig.querySelector(".icon") let icon = zoomedFig.querySelector(".icon")
TweenMax.set(icon, { TweenLite.set(icon, {
transformOrigin transformOrigin
}) })
zoomedFig.style.transformOrigin = "calc(100% - " + parseFloat(zoomedFigStyle.borderRightWidth) + "px) calc(100% - " + parseFloat(zoomedFigStyle.borderBottomWidth) + "px)" zoomedFig.style.transformOrigin = "calc(100% - " + parseFloat(zoomedFigStyle.borderRightWidth) + "px) calc(100% - " + parseFloat(zoomedFigStyle.borderBottomWidth) + "px)"
@ -1029,7 +1029,7 @@ export default class Card {
zoomParent.appendChild(zoomedFig) zoomParent.appendChild(zoomedFig)
zoomedFig.style.opacity = 0.5 zoomedFig.style.opacity = 0.5
zoomContainer.appendChild(zoomable) zoomContainer.appendChild(zoomable)
TweenMax.set(zoomable, { x: current.x, y: current.y, width: current.width, height: current.height }) TweenLite.set(zoomable, { x: current.x, y: current.y, width: current.width, height: current.height })
let editor = mainController.topController().ensureEditor(img) let editor = mainController.topController().ensureEditor(img)
let savedDisplay = zoomIcon.style.display let savedDisplay = zoomIcon.style.display
let iconClone = zoomIcon.cloneNode(true) let iconClone = zoomIcon.cloneNode(true)
@ -1046,14 +1046,14 @@ export default class Card {
zoomedFig.remove() zoomedFig.remove()
zoomContainer.remove() zoomContainer.remove()
zoomParent.appendChild(zoomable) zoomParent.appendChild(zoomable)
TweenMax.set(zoomable, { x: 0, y: 0 }) TweenLite.set(zoomable, { x: 0, y: 0 })
zoomable.onmousedown = null zoomable.onmousedown = null
zoomable.onmousemove = null zoomable.onmousemove = null
zoomable.onmouseup = null zoomable.onmouseup = null
zoomable.onmousewheel = null zoomable.onmousewheel = null
} }
wrapper.appendChild(iconClone) wrapper.appendChild(iconClone)
TweenMax.set(iconClone, { x: current.iconPos.x, y: current.iconPos.y }) TweenLite.set(iconClone, { x: current.iconPos.x, y: current.iconPos.y })
zoomable.onmousedown = event => { zoomable.onmousedown = event => {
if (this.debug) console.log('mousedown', event.target) if (this.debug) console.log('mousedown', event.target)
@ -1067,7 +1067,7 @@ export default class Card {
event.preventDefault() event.preventDefault()
let dx = event.pageX - zoomable.dragStartPos.x let dx = event.pageX - zoomable.dragStartPos.x
let dy = event.pageY - zoomable.dragStartPos.y let dy = event.pageY - zoomable.dragStartPos.y
TweenMax.set([zoomable, iconClone], { x: '+=' + dx, y: '+=' + dy }) TweenLite.set([zoomable, iconClone], { x: '+=' + dx, y: '+=' + dy })
zoomable.dragStartPos = { x: event.pageX, y: event.pageY } zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
if (editor) { if (editor) {
editor.showControls() editor.showControls()
@ -1086,7 +1086,7 @@ export default class Card {
let zoom = direction ? zoomFactor : 1 / zoomFactor let zoom = direction ? zoomFactor : 1 / zoomFactor
startZoom *= zoom startZoom *= zoom
TweenMax.set(zoomable, { scale: startZoom }) TweenLite.set(zoomable, { scale: startZoom })
if (editor) { if (editor) {
editor.showControls() editor.showControls()
} }
@ -1117,17 +1117,17 @@ export default class Card {
let zoomedCaption = zoomedFig.querySelector("figcaption.zoomcap") let zoomedCaption = zoomedFig.querySelector("figcaption.zoomcap")
TweenMax.to(zoomedCaption, this.animation.fade, { TweenLite.to(zoomedCaption, this.animation.fade, {
autoAlpha: 0, autoAlpha: 0,
}) })
TweenMax.to(zoomedFig, this.animation.zoomable, { TweenLite.to(zoomedFig, this.animation.zoomable, {
css: { css: {
scaleX: 1, scaleX: 1,
scaleY: 1 scaleY: 1
}, },
onComplete: () => { onComplete: () => {
TweenMax.set(zoomable, { TweenLite.set(zoomable, {
opacity: 1 opacity: 1
}) })
let div = zoomedFig.parentNode let div = zoomedFig.parentNode
@ -1204,7 +1204,7 @@ export default class Card {
let padding = parseInt(this.css(indexbox, 'padding')) let padding = parseInt(this.css(indexbox, 'padding'))
let maxWidth = this.css(card, 'max-width') let maxWidth = this.css(card, 'max-width')
TweenMax.set(clone, { TweenLite.set(clone, {
css: { css: {
position: 'absolute', position: 'absolute',
width: globalIndexCardRect.width, width: globalIndexCardRect.width,
@ -1215,12 +1215,12 @@ export default class Card {
} }
}) })
TweenMax.set(articleClone, { TweenLite.set(articleClone, {
autoAlpha: 0 autoAlpha: 0
}) })
TweenMax.set(card, { css: { maxWidth: '100%' } }) TweenLite.set(card, { css: { maxWidth: '100%' } })
TweenMax.set(clone, { TweenLite.set(clone, {
x: localOrigin.x - padding, x: localOrigin.x - padding,
y: localOrigin.y - padding, y: localOrigin.y - padding,
scaleX, scaleX,
@ -1244,10 +1244,10 @@ export default class Card {
/** /**
* Scale the content from 100% to it's target size. * Scale the content from 100% to it's target size.
*/ */
// TweenMax.set(subcardContent, { // TweenLite.set(subcardContent, {
// height: "100%" // height: "100%"
// }) // })
// TweenMax.to(subcardContent, Card.animation.articleTransition, { // TweenLite.to(subcardContent, Card.animation.articleTransition, {
// height: targetHeight + "px" // height: targetHeight + "px"
// }) // })
} }
@ -1270,7 +1270,7 @@ export default class Card {
} }
let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth) let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth)
TweenMax.to(clone, Card.animation.articleTransition, { TweenLite.to(clone, Card.animation.articleTransition, {
x: -padding, x: -padding,
y: -padding, y: -padding,
ease: ExpoScaleEase.config(scaleX, 1), ease: ExpoScaleEase.config(scaleX, 1),
@ -1282,10 +1282,10 @@ export default class Card {
onUpdateParams: ['{self}'], onUpdateParams: ['{self}'],
onUpdate: (self) => { onUpdate: (self) => {
let transform = self.target._gsTransform let transform = self.target._gsTransform
TweenMax.set(title, { TweenLite.set(title, {
scale: 1 / transform.scaleX scale: 1 / transform.scaleX
}) })
TweenMax.set(titlebar, { TweenLite.set(titlebar, {
height: start.height * 1 / transform.scaleY height: start.height * 1 / transform.scaleY
}) })
@ -1294,7 +1294,7 @@ export default class Card {
} }
}) })
TweenMax.to([articleClone], this.animation.articleTransition / 2, { TweenLite.to([articleClone], this.animation.articleTransition / 2, {
delay: this.animation.articleTransition / 2, delay: this.animation.articleTransition / 2,
autoAlpha: 1 autoAlpha: 1
}) })
@ -1327,11 +1327,11 @@ export default class Card {
let titlebarStyle = window.getComputedStyle(previewTitlebar) let titlebarStyle = window.getComputedStyle(previewTitlebar)
let titlebar = clone.querySelector(".titlebar") let titlebar = clone.querySelector(".titlebar")
TweenMax.to(titlebar, this.animation.articleTransition, { TweenLite.to(titlebar, this.animation.articleTransition, {
height: parseInt(titlebarStyle.height) height: parseInt(titlebarStyle.height)
}) })
TweenMax.to(articleClone, this.animation.articleTransition / 2, { TweenLite.to(articleClone, this.animation.articleTransition / 2, {
autoAlpha: 0 autoAlpha: 0
}) })
@ -1341,13 +1341,13 @@ export default class Card {
} }
if (this.dynamicHeight) { if (this.dynamicHeight) {
TweenMax.to(subcardContent, this.animation.articleTransition, { TweenLite.to(subcardContent, this.animation.articleTransition, {
height: "100%" height: "100%"
}) })
} }
TweenMax.set(card, { autoAlpha: 1, css: { maxWidth } }) TweenLite.set(card, { autoAlpha: 1, css: { maxWidth } })
TweenMax.to(clone, this.animation.articleTransition, { TweenLite.to(clone, this.animation.articleTransition, {
x: localOrigin.x - padding, x: localOrigin.x - padding,
y: localOrigin.y - padding, y: localOrigin.y - padding,
scaleX, scaleX,
@ -1356,7 +1356,7 @@ export default class Card {
rotation: angle, rotation: angle,
onComplete: () => { onComplete: () => {
// article.remove() // article.remove()
TweenMax.to(clone, this.animation.fade, TweenLite.to(clone, this.animation.fade,
{ {
//delay: 0.2, //delay: 0.2,
autoAlpha: 0, autoAlpha: 0,
@ -1373,11 +1373,11 @@ export default class Card {
onUpdate: function (self) { onUpdate: function (self) {
let transform = self.target._gsTransform let transform = self.target._gsTransform
TweenMax.set(title, { TweenLite.set(title, {
scale: 1 / transform.scaleX scale: 1 / transform.scaleX
}) })
TweenMax.set(titlebar, { TweenLite.set(titlebar, {
height: original.height * 1 / transform.scaleY height: original.height * 1 / transform.scaleY
}) })
@ -1508,7 +1508,7 @@ export default class Card {
// TODO: What is this good for? // TODO: What is this good for?
// let article = parsedHTML.querySelector('article') // let article = parsedHTML.querySelector('article')
// card.insertAdjacentElement('afterbegin', article) // card.insertAdjacentElement('afterbegin', article)
// TweenMax.set(article, { autoAlpha: 0 }) // TweenLite.set(article, { autoAlpha: 0 })
Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback) Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback)
} }