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

Initial commit 2.0 beta 0

Browse Source
This commit is contained in:
Sebastian Kupke 2022-10-04 10:51:35 +02:00
parent f87b19140b
commit c5c2759ebd
70 changed files with 60593 additions and 62354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc → .eslintrc.json
View File

@ -28,5 +28,8 @@
"plugins": [
"prettier"
],
"extends": ["eslint:recommended", "plugin:prettier/recommended"]
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"rules": {
"comma-dangle": ["error", "never"]
}
}

3
.prettierrc
View File

@ -3,5 +3,6 @@
"jsxSingleQuote": true,
"tabWidth": 4,
"semi": false,
"printWidth": 120
"printWidth": 120,
"trailingComma": "none"
}

98959
dist/iwmlib.3rdparty.js vendored
View File

File diff suppressed because one or more lines are too long

254
dist/iwmlib.3rdparty.min.js vendored
View File

File diff suppressed because one or more lines are too long

30
dist/iwmlib.3rdparty.preload.js vendored
View File

@ -8119,10 +8119,10 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
css transforms without perspective projection)
*/
(function () {
;(function () {
'use strict'
var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
function Point(x, y, z) {
this.x = x
@ -8137,8 +8137,8 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
function createMatrix(transform) {
try {
return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
} catch(e) {
return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
} catch (e) {
console.warn(transform)
console.warn(e.toString())
return I
@ -8163,8 +8163,9 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
var left = +Infinity
var top = +Infinity
while (--i >= 0) {
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
0).transformBy(transformationMatrix)
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
transformationMatrix
)
if (p.x < left) {
left = p.x
}
@ -8173,20 +8174,19 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
}
}
var rect = element.getBoundingClientRect()
transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
window.pageYOffset + rect.top - top, 0)
.multiply(transformationMatrix)
transformationMatrix = I.translate(
window.pageXOffset + rect.left - left,
window.pageYOffset + rect.top - top,
0
).multiply(transformationMatrix)
return transformationMatrix
}
window.convertPointFromPageToNode = function (element, pageX, pageY) {
return new Point(pageX, pageY, 0).transformBy(
getTransformationMatrix(element).inverse())
return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
}
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
return new Point(offsetX, offsetY, 0).transformBy(
getTransformationMatrix(element))
return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
}
}());
})()

2
dist/iwmlib.3rdparty.preload.min.js vendored
View File

File diff suppressed because one or more lines are too long

740
dist/iwmlib.js vendored
View File

File diff suppressed because it is too large Load Diff

709
dist/iwmlib.pixi.js vendored
View File

File diff suppressed because it is too large Load Diff

4
gulpfile.js
View File

@ -11,12 +11,12 @@ function vendors() {
'./node_modules/optimal-select/dist/optimal-select.js',
'./node_modules/hammerjs/hammer.js',
'./node_modules/propagating-hammerjs/propagating.js',
'./node_modules/pixi.js/dist/pixi.js',
'./node_modules/pixi.js/dist/browser/pixi.js',
'./node_modules/pixi-compressed-textures/lib/crn_decomp.js',
'./node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
'./node_modules/pixi-filters/dist/pixi-filters.js',
'./node_modules/pixi-particles/dist/pixi-particles.js',
'./node_modules/pixi-projection/dist/pixi-projection.js',
'./node_modules/pixi-projection/dist/pixi-projection.umd.js',
'./node_modules/gsap/src/uncompressed/TweenMax.js',
'./node_modules/gsap/src/uncompressed/TimelineMax.js',
'./lib/3rdparty/jquery.js',

30
lib/3rdparty/convertPointFromPageToNode.js vendored
View File

@ -10,10 +10,10 @@
css transforms without perspective projection)
*/
(function () {
;(function () {
'use strict'
var I = (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix() : new WebKitCSSMatrix()
var I = typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix() : new WebKitCSSMatrix()
function Point(x, y, z) {
this.x = x
@ -28,8 +28,8 @@
function createMatrix(transform) {
try {
return (typeof(WebKitCSSMatrix) == 'undefined') ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
} catch(e) {
return typeof WebKitCSSMatrix == 'undefined' ? new DOMMatrix(transform) : new WebKitCSSMatrix(transform)
} catch (e) {
console.warn(transform)
console.warn(e.toString())
return I
@ -54,8 +54,9 @@
var left = +Infinity
var top = +Infinity
while (--i >= 0) {
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h,
0).transformBy(transformationMatrix)
var p = new Point(i === 0 || i === 1 ? 0 : w, i === 0 || i === 3 ? 0 : h, 0).transformBy(
transformationMatrix
)
if (p.x < left) {
left = p.x
}
@ -64,20 +65,19 @@
}
}
var rect = element.getBoundingClientRect()
transformationMatrix = I.translate(window.pageXOffset + rect.left - left,
window.pageYOffset + rect.top - top, 0)
.multiply(transformationMatrix)
transformationMatrix = I.translate(
window.pageXOffset + rect.left - left,
window.pageYOffset + rect.top - top,
0
).multiply(transformationMatrix)
return transformationMatrix
}
window.convertPointFromPageToNode = function (element, pageX, pageY) {
return new Point(pageX, pageY, 0).transformBy(
getTransformationMatrix(element).inverse())
return new Point(pageX, pageY, 0).transformBy(getTransformationMatrix(element).inverse())
}
window.convertPointFromNodeToPage = function (element, offsetX, offsetY) {
return new Point(offsetX, offsetY, 0).transformBy(
getTransformationMatrix(element))
return new Point(offsetX, offsetY, 0).transformBy(getTransformationMatrix(element))
}
}());
})()

10
lib/bootstrap.js vendored
View File

@ -122,17 +122,17 @@ class Bootstrap extends Object {
baseURL: baseUrl,
map: {
'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js',
},
transpiler: 'plugin-babel',
meta: {
'*.js': {
authorization: true,
babelOptions: {
es2015: false
}
}
}
es2015: false,
},
},
},
}
}

6
lib/bundle.js
View File

@ -22,7 +22,7 @@ import {
InteractionDelta,
InteractionMapper,
InteractionDelegate,
IInteractionMapperTarget
IInteractionMapperTarget,
} from './interaction.js'
import {
ITapDelegate,
@ -31,7 +31,7 @@ import {
AbstractScatter,
DOMScatter,
ScatterEvent,
BaseEvent
BaseEvent,
} from './scatter.js'
import {
Cycle,
@ -50,7 +50,7 @@ import {
debounce,
randomInt,
randomFloat,
LowPassFilter
LowPassFilter,
} from './utils.js'
import UITest from './uitest.js'

173
lib/card/card.js
View File

@ -55,7 +55,7 @@ export default class Card {
context.classList.add('info-card')
context.setAttribute('data-id', Card.id++)
modules.forEach(module => {
modules.forEach((module) => {
if (module.apply(context)) {
const moduleName = module.constructor.name
context.modules.push(moduleName)
@ -157,7 +157,7 @@ export default class Card {
*/
static _replaceAttributes(context, html, attribute, replaceFunc) {
let attributeCarrier = html.querySelectorAll(`[${attribute}]`)
attributeCarrier.forEach(element => {
attributeCarrier.forEach((element) => {
let attributeVal = element.getAttribute(attribute)
element.removeAttribute(attribute)
replaceFunc.call(this, context, element, attributeVal)
@ -176,7 +176,7 @@ export default class Card {
*/
static _replaceCallback(context, element, attributeVal) {
if (element.tagName == 'A') {
element.addEventListener('pointerdown', event => {
element.addEventListener('pointerdown', (event) => {
event.preventDefault()
})
}
@ -189,7 +189,7 @@ export default class Card {
trimmedArgs = trimmedArgs.substring(0, trimmedArgs.length - 1)
let callParts = funcPart.split('.')
let argsStrings = trimmedArgs.split(',').filter(entry => {
let argsStrings = trimmedArgs.split(',').filter((entry) => {
return entry.trim() != ''
})
/**
@ -218,12 +218,12 @@ export default class Card {
// These are 'hardcoded' inside the convert.js.
if (element.tagName == 'circle') return false
this.registerEvent(context, interactionType, element, event => {
this.registerEvent(context, interactionType, element, (event) => {
/**
* Replaces the strings from the listener with the corresponding variables.
*/
let args = []
argsStrings.forEach(arg => {
argsStrings.forEach((arg) => {
arg = arg.trim()
if (arg == 'this') args.push(event.target)
else if (arg == 'event') args.push(event)
@ -269,7 +269,7 @@ export default class Card {
*/
return html.replace(
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function() {
function () {
let path = that._getRelativePath(arguments[4])
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
/* if (that.debug) */ console.log('Adjusted: ', tag)
@ -298,7 +298,7 @@ export default class Card {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest()
request.onreadystatechange = function() {
request.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200 || Card._isLocal()) {
try {
@ -423,7 +423,7 @@ export default class Card {
}
this._createPopup(context, position, content, options)
.then(popup => {
.then((popup) => {
if (
//Test if meanwhile another popup was registered...
this._getPopup(context) ||
@ -441,9 +441,9 @@ export default class Card {
// let unnecessaryPopupElement = popup.element.querySelector(".popupContent > .popup")
// unnecessaryPopupElement.classList.remove("popup")
popupParagraphs.forEach(popupParagraph => {
popupParagraphs.forEach((popupParagraph) => {
popupParagraph.setAttribute('draggable', false)
popupParagraph.addEventListener('mousedown', event => {
popupParagraph.addEventListener('mousedown', (event) => {
event.preventDefault()
})
})
@ -451,7 +451,7 @@ export default class Card {
this._setPopup(context, popup, src)
}
})
.catch(e => console.error(e))
.catch((e) => console.error(e))
}
/**
@ -491,14 +491,14 @@ export default class Card {
Object.assign(
{
parent: context,
content
content,
},
Object.assign(
{
noStyle: true,
// TODO: Remove offset when positioning according to element position
// is working.
posOffset: 10
posOffset: 10,
},
options
)
@ -510,7 +510,7 @@ export default class Card {
// We manually prevent this here.
popup.element.style.display = 'none'
let promise = new Promise(resolve => {
let promise = new Promise((resolve) => {
if (popup.loaded) resolve(popup)
else {
popup.onload = () => {
@ -519,7 +519,7 @@ export default class Card {
}
})
promise.then(popup => {
promise.then((popup) => {
popup.element.style.display = 'block'
popup.element.style.visibility = 'hidden'
popup.element.style.opacity = 0
@ -531,12 +531,12 @@ export default class Card {
})
Object.assign(popup.element.style, {
zIndex: this.zIndices.popup
zIndex: this.zIndices.popup,
})
TweenLite.to(popup.element, this.animation.popup, {
autoAlpha: 1,
ease: Power2.easeIn
ease: Power2.easeIn,
})
})
@ -560,7 +560,7 @@ export default class Card {
popup.remove()
//this._cleanup(context)
//overlay.parentNode.removeChild(overlay)
}
},
})
}
}
@ -618,7 +618,7 @@ export default class Card {
let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
//Fix the relative path of loaded images in the popup.
popupPage.querySelectorAll('img').forEach(node => {
popupPage.querySelectorAll('img').forEach((node) => {
node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
})
let html = popupPage.body.innerHTML
@ -648,7 +648,7 @@ export default class Card {
if (editable) {
let isDirty = mainController.askSaveNode()
if (isDirty)
mainController.saveNode(html.innerHTML, url => {
mainController.saveNode(html.innerHTML, (url) => {
if (callback) {
callback()
}
@ -670,12 +670,12 @@ export default class Card {
}
Card._openPopup(context, src, local, content, {
closeCommand: callback
closeCommand: callback,
})
}
}
overlay.onclick = e => {
overlay.onclick = (e) => {
if (editable) e.preventDefault()
}
//console.log("onreadystatechange", editable)
@ -712,7 +712,7 @@ export default class Card {
for (let highlight of correspondingHighlights) {
if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
Highlight.openHighlight(highlight, {
animation: Card.highlightAnimation
animation: Card.highlightAnimation,
})
this._addHighlight(context, highlight)
}
@ -841,19 +841,19 @@ export default class Card {
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
// console.log('loadHighlightPopup', src, position, local)
this._loadPopupContent(context, src)
.then(content => {
.then((content) => {
this._openPopup(context, src, local, content, {
highlight: node,
closeCommand: popup => {
closeCommand: (popup) => {
this._overlayCleanup(context, overlay)
popup.remove()
}
},
})
})
.catch(err => {
.catch((err) => {
console.error(err)
})
}
},
})
}
}
@ -937,7 +937,7 @@ export default class Card {
let globalBottomRight = {
x: imageWidth,
y: imageHeight
y: imageHeight,
}
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
@ -1003,7 +1003,7 @@ export default class Card {
position: 'absolute',
top: 0,
left: 0,
zIndex: 200
zIndex: 200,
})
wrapper.appendChild(zoomContainer)
@ -1071,13 +1071,13 @@ export default class Card {
y: current.y,
width: current.width + borderX,
height: current.height + borderY,
transformOrigin
transformOrigin,
})
TweenLite.set(zoomable, { opacity: 0 })
let icon = zoomedFig.querySelector('.icon')
TweenLite.set(icon, {
transformOrigin
transformOrigin,
})
zoomedFig.style.transformOrigin =
'calc(100% - ' +
@ -1097,8 +1097,8 @@ export default class Card {
ease: Power2.easeIn,
css: {
scaleX: scaleFactor,
scaleY: scaleFactor
}
scaleY: scaleFactor,
},
},
0
)
@ -1107,11 +1107,11 @@ export default class Card {
display: 'block',
opacity: 0,
x: -parseFloat(zoomedFigStyle.borderLeftWidth),
width: current.width + borderX
}
width: current.width + borderX,
},
})
.to(zoomCaption, this.animation.fade, {
autoAlpha: 1
autoAlpha: 1,
})
} else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
}
@ -1160,7 +1160,7 @@ export default class Card {
x: current.x,
y: current.y,
width: current.width,
height: current.height
height: current.height,
})
let editor = mainController.topController().ensureEditor(img)
let savedDisplay = zoomIcon.style.display
@ -1187,13 +1187,13 @@ export default class Card {
wrapper.appendChild(iconClone)
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)
event.preventDefault()
zoomable.dragging = true
zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
}
zoomable.onmousemove = event => {
zoomable.onmousemove = (event) => {
if (this.debug) console.log('onmousemove', event.target)
if (zoomable.dragging) {
event.preventDefault()
@ -1201,7 +1201,7 @@ export default class Card {
let dy = event.pageY - zoomable.dragStartPos.y
TweenLite.set([zoomable, iconClone], {
x: '+=' + dx,
y: '+=' + dy
y: '+=' + dy,
})
zoomable.dragStartPos = { x: event.pageX, y: event.pageY }
if (editor) {
@ -1214,7 +1214,7 @@ export default class Card {
}
let startZoom = 1
zoomable.onmousewheel = event => {
zoomable.onmousewheel = (event) => {
event.preventDefault()
let direction = event.detail < 0 || event.wheelDelta > 0
const zoomFactor = 1.1
@ -1250,24 +1250,24 @@ export default class Card {
let zoomedCaption = zoomedFig.querySelector('figcaption.zoomcap')
TweenLite.to(zoomedCaption, this.animation.fade, {
autoAlpha: 0
autoAlpha: 0,
})
TweenLite.to(zoomedFig, this.animation.zoomable, {
css: {
scaleX: 1,
scaleY: 1
scaleY: 1,
},
onComplete: () => {
TweenLite.set(zoomable, {
opacity: 1
opacity: 1,
})
let div = zoomedFig.parentNode
let videoElement = div.querySelector('video')
if (videoElement) videoElement.pause()
div.parentNode.removeChild(div)
}
},
})
InteractionMapper.off(zoomedFig)
@ -1341,12 +1341,12 @@ export default class Card {
height: globalIndexCardRect.height,
maxWidth: '100%',
margin: 0,
zIndex: this.zIndices.article
}
zIndex: this.zIndices.article,
},
})
TweenLite.set(articleClone, {
autoAlpha: 0
autoAlpha: 0,
})
TweenLite.set(card, { css: { maxWidth: '100%' } })
@ -1356,7 +1356,7 @@ export default class Card {
scaleX,
scaleY,
transformOrigin: '0% 0%',
rotation: angle
rotation: angle,
})
indexbox.prepend(clone)
clone.setAttribute('data-source', src)
@ -1365,7 +1365,7 @@ export default class Card {
let title = titlebar.querySelector('h2')
let titlebarStyle = window.getComputedStyle(titlebar)
let start = {
height: parseInt(titlebarStyle.height)
height: parseInt(titlebarStyle.height),
}
if (this.dynamicHeight) {
@ -1385,10 +1385,7 @@ export default class Card {
//jquery hyphenate below
if (this._isJQueryPresent()) {
$('.column')
.not('.overview')
.children('p')
.hyphenate('de')
$('.column').not('.overview').children('p').hyphenate('de')
}
//logging
@ -1414,23 +1411,23 @@ export default class Card {
card.classList.add('visited')
},
onUpdateParams: ['{self}'],
onUpdate: self => {
onUpdate: (self) => {
let transform = self.target._gsTransform
TweenLite.set(title, {
scale: 1 / transform.scaleX
scale: 1 / transform.scaleX,
})
TweenLite.set(titlebar, {
height: (start.height * 1) / transform.scaleY
height: (start.height * 1) / transform.scaleY,
})
// Retain the border at same visual thickness.
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
},
})
TweenLite.to([articleClone], this.animation.articleTransition / 2, {
delay: this.animation.articleTransition / 2,
autoAlpha: 1
autoAlpha: 1,
})
if (editable) {
@ -1479,11 +1476,11 @@ export default class Card {
if (editable) {
let isDirty = mainController.askSaveNode()
if (isDirty) {
mainController.saveNode(html.innerHTML, url => {
mainController.saveNode(html.innerHTML, (url) => {
callback(url)
this._closeIndexCard(context, card, clone, articleClone, {
eventElements,
src
src,
})
})
} else {
@ -1522,7 +1519,7 @@ export default class Card {
let scale = {
x: globalPreviewRect.width / globalIndexCardRect.width,
y: globalPreviewRect.height / globalIndexCardRect.height
y: globalPreviewRect.height / globalIndexCardRect.height,
}
let titlebar = clonedSubcard.querySelector('.titlebar')
@ -1551,16 +1548,16 @@ export default class Card {
let titlebarStyle = window.getComputedStyle(previewTitlebar)
TweenLite.to(titlebar, this.animation.articleTransition, {
height: parseInt(titlebarStyle.height)
height: parseInt(titlebarStyle.height),
})
TweenLite.to(clonedArticle, this.animation.articleTransition / 2, {
autoAlpha: 0
autoAlpha: 0,
})
let title = titlebar.querySelector('h2')
let original = {
height: parseInt(titlebarStyle.height)
height: parseInt(titlebarStyle.height),
}
if (this.dynamicHeight) {
@ -1589,24 +1586,24 @@ export default class Card {
mainController.popController()
}
clonedSubcard.remove()
}
},
})
},
onUpdateParams: ['{self}'],
onUpdate: function(self) {
onUpdate: function (self) {
let transform = self.target._gsTransform
TweenLite.set(title, {
scale: 1 / transform.scaleX
scale: 1 / transform.scaleX,
})
TweenLite.set(titlebar, {
height: (original.height * 1) / transform.scaleY
height: (original.height * 1) / transform.scaleY,
})
// Retain the border at same visual thickness.
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
},
})
}
@ -1653,7 +1650,7 @@ export default class Card {
* Called by the expandIndexCard(...)
*/
let target = event.target
const saveCallback = url => {
const saveCallback = (url) => {
let handler = `Card.openIndexCard(event, '${url}')`
if (this.debug) console.log('File has changed', target, handler)
@ -1744,9 +1741,9 @@ export default class Card {
}
let highlights = this._getHighlights(context)
highlights.forEach(highlight => {
highlights.forEach((highlight) => {
Highlight.closeHighlight(highlight, {
animation: Card.highlightAnimation
animation: Card.highlightAnimation,
})
})
@ -1768,13 +1765,13 @@ export default class Card {
let global = this._getGlobalRect(element)
let localPosition = Points.fromPageToNode(context, {
x: global.x,
y: global.y
y: global.y,
})
return DOMRectReadOnly.fromRect({
x: localPosition.x,
y: localPosition.y,
width: global.width,
height: global.height
height: global.height,
})
}
@ -1797,7 +1794,7 @@ export default class Card {
x: globalPosition.x,
y: globalPosition.y,
width: cardWidth,
height: cardHeight
height: cardHeight,
})
}
@ -1819,19 +1816,19 @@ export default class Card {
this._replaceAttributes(context, html, 'onclick', this._replaceCallback)
}
let zoomableWrappers = html.querySelectorAll('.svg-wrapper')
zoomableWrappers.forEach(wrapper => {
zoomableWrappers.forEach((wrapper) => {
let svg = wrapper.querySelector('svg')
Object.assign(wrapper.style, {
width: svg.getAttribute('width') + 'px',
height: svg.getAttribute('height') + 'px'
height: svg.getAttribute('height') + 'px',
})
})
let zoomableVideoWrappers = html.querySelectorAll('.video-wrapper')
zoomableVideoWrappers.forEach(wrapper => {
zoomableVideoWrappers.forEach((wrapper) => {
let video = wrapper.querySelector('video')
Object.assign(wrapper.style, {
width: video.getAttribute('width') + 'px',
height: video.getAttribute('height') + 'px'
height: video.getAttribute('height') + 'px',
})
})
@ -1870,12 +1867,12 @@ export default class Card {
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(indexbox, globalClick)
let linkRects = links.map(link => {
let linkRects = links.map((link) => {
let rect = link.getBoundingClientRect()
let topLeft = Points.fromPageToNode(indexbox, rect)
let center = Points.fromPageToNode(indexbox, {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2
y: rect.y + rect.height / 2,
})
return {
x: topLeft.x,
@ -1883,12 +1880,12 @@ export default class Card {
width: rect.width,
height: rect.height,
center,
link
link,
}
})
let distances = []
linkRects.forEach(rect => {
linkRects.forEach((rect) => {
let distance = Card.pointRectDist(localClick, rect)
if (distance == 0.0) {
// Distance == 0.0 indicates an inside relation. Since these
@ -2095,7 +2092,7 @@ Card.zIndices = {
article: 10,
popup: 100,
zoomable: 101,
zoomedFigure: 102
zoomedFigure: 102,
}
Card.animation = {
@ -2103,5 +2100,5 @@ Card.animation = {
fade: 0.2,
popup: 0.1,
highlight: 0.4,
zoomable: 0.5
zoomable: 0.5,
}

16
lib/card/highlight.js
View File

@ -94,7 +94,7 @@ export default class Highlight extends Object {
obj.classList.add(this.expandedClass)
obj.setAttribute('stroke-width', stroke / scale)
if (onComplete) onComplete()
}
},
})
}
@ -113,7 +113,7 @@ export default class Highlight extends Object {
obj.classList.remove('zooming')
obj.classList.remove(this.expandedClass)
obj.setAttribute('stroke-width', stroke)
}
},
})
}
@ -163,7 +163,7 @@ export default class Highlight extends Object {
this.shrink(maskImage, { stroke })
return
}
let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
let circles = Array.from(circleGroup.children).filter((e) => e.tagName == 'circle')
for (let c of circles) {
//console.log("shrinking all circles")
this.shrink(c, { stroke })
@ -210,18 +210,18 @@ export default class Highlight extends Object {
// eslint-disable-next-line no-unused-vars
let [mask, maskImage] = this._getSVGMask(target, {
svgRoot,
image
image,
})
let center = this._calculateCenterRelativeTo(target, image)
console.log('_calculateCenterRelativeTo', center)
TweenLite.set(maskImage, {
transformOrigin: `${center.x} ${center.y}`
transformOrigin: `${center.x} ${center.y}`,
})
TweenLite.set(target, { transformOrigin: '50% 50%' })
TweenLite.to([target, maskImage], animation, {
scale,
onComplete: onExpanded
onComplete: onExpanded,
})
target.classList.add(this.expandedClass)
@ -259,7 +259,7 @@ export default class Highlight extends Object {
[mask, maskImage] = this._createSVGMask(circle, {
svgRoot,
image,
id
id,
})
return [mask, maskImage]
@ -353,7 +353,7 @@ export default class Highlight extends Object {
let [mask, maskImage] = this._getSVGMask(target)
// console.log('Close Highlight', maskImage)
TweenLite.to([target, maskImage], animation, {
scale: 1
scale: 1,
})
}

38
lib/card/plugin.js
View File

@ -63,7 +63,7 @@ export class CardPluginBase {
let requirements = this._collectAllRequirements()
let missing = []
requirements.forEach(module => {
requirements.forEach((module) => {
if (context.modules.indexOf(module.name) == -1) {
missing.push(module.name)
}
@ -121,12 +121,12 @@ CardPlugin.LightBox = class LightBox extends CardPluginBase {
top: 0,
left: 0,
width: '100%',
height: '100%'
height: '100%',
},
this.style,
{
display: 'none',
position: 'absolute'
position: 'absolute',
}
)
@ -199,7 +199,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
wrapper.appendChild(icon)
Object.assign(wrapper.style, {
cursor: 'pointer'
cursor: 'pointer',
})
InteractionMapper.on(this.interactionType, wrapper, () => {
@ -221,13 +221,13 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
Object.assign(imageWrapper.style, {
maxWidth: 'none',
maxHeight: 'none'
maxHeight: 'none',
})
Object.assign(image.style, {
width: '100%',
height: '100%',
objectFit: 'cover'
objectFit: 'cover',
})
this._replaceIcon(imageWrapper)
@ -250,7 +250,7 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
const max = {
width: context.offsetWidth * maxFillRatio,
height: context.offsetHeight * maxFillRatio
height: context.offsetHeight * maxFillRatio,
}
let majorSide
@ -284,14 +284,14 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
let targetDimensions = {
width: 0,
height: 0
height: 0,
}
let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
let targetOffset = {
x: 0,
y: 0
y: 0,
}
targetDimensions[majorSide.name] = size
@ -311,22 +311,22 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
y: position.y,
position: 'absolute',
width: parseInt(sourceStyle.width),
height: parseInt(sourceStyle.height)
height: parseInt(sourceStyle.height),
})
TweenMax.set(overlay, {
display: 'flex',
autoAlpha: 0
autoAlpha: 0,
})
TweenMax.to(imageWrapper, this.zoomAnimationDuration, {
x: targetOffset.x,
y: targetOffset.y,
width: targetDimensions.width,
height: targetDimensions.height
height: targetDimensions.height,
})
TweenMax.to(overlay, this.fadeAnimationTime, {
autoAlpha: 1
autoAlpha: 1,
})
}
@ -358,10 +358,10 @@ CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginB
timeline
.to(overlay, this.fadeAnimationDuration, {
autoAlpha: 0
autoAlpha: 0,
})
.set(overlay, {
display: 'none'
display: 'none',
})
}
}
@ -418,7 +418,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
this._end = this._end.bind(this)
this._setupUtterance()
this.utterance.addEventListener('end', event => {
this.utterance.addEventListener('end', (event) => {
this._end()
})
}
@ -451,7 +451,7 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
} else {
if (subcard) {
let clone = subcard.cloneNode(true)
clone.querySelectorAll('figure').forEach(figure => {
clone.querySelectorAll('figure').forEach((figure) => {
figure.parentNode.removeChild(figure)
})
@ -554,10 +554,10 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
}
async _stop() {
return new Promise(resolve => {
return new Promise((resolve) => {
if (this.activeUtterance) {
this.activeUtterance.addEventListener('end', resolve, {
once: true
once: true,
})
}

12
lib/card/scatter.js
View File

@ -66,12 +66,12 @@ export default class ScatterCard extends Card {
scatterContainer.element.appendChild(element)
new DOMScatter(element, scatterContainer, {
width: 1400,
height: 1200
height: 1200,
})
this.setup(element, html, {
basePath,
modules
modules,
})
return element
}
@ -132,15 +132,15 @@ export default class ScatterCard extends Card {
let url = basePath + '/' + item + '/index.html'
console.log('Loading', url)
this.loadHTML(url)
.then(html => {
.then((html) => {
console.log('Received', html)
let element = this.createCardScatter(html, scatterContainer, {
basePath,
modules
modules,
})
resolve(element)
})
.catch(e => reject(e))
.catch((e) => reject(e))
})
}
@ -157,6 +157,6 @@ ScatterCard.selectedLanguage = 0
ScatterCard.languages = ['Deutsch', 'English']
ScatterCard.languageTags = {
Deutsch: 'de',
English: 'en'
English: 'en',
}
ScatterCard.scatterContainer = null

2
lib/card/theme.js
View File

@ -20,7 +20,7 @@ export default class Theme {
path = path ? path : './config.json'
let xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200 || Theme._isLocal()) {
try {

14
lib/card/wrapper.js
View File

@ -17,7 +17,7 @@ export default class CardWrapper extends Object {
handleClicks() {
this.domNode.addEventListener(
'click',
event => {
(event) => {
if (event.isTrusted) {
Events.stop(event)
if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
@ -32,7 +32,7 @@ export default class CardWrapper extends Object {
handleClicksAsTaps() {
this.domNode.addEventListener(
'click',
event => {
(event) => {
if (event.isTrusted) {
Events.stop(event)
}
@ -99,20 +99,20 @@ export default class CardWrapper extends Object {
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(element, globalClick)
let clickRects = activeNodes.map(link => {
let clickRects = activeNodes.map((link) => {
let rect = link.getBoundingClientRect()
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
let bottomRight = Points.fromPageToNode(element, {
x: rect.x + rect.width,
y: rect.y + rect.height
y: rect.y + rect.height,
})
let topLeft = Points.fromPageToNode(element, rect)
let width = Math.abs(bottomRight.x - topLeft.x)
let height = Math.abs(bottomRight.y - topLeft.y)
let center = Points.fromPageToNode(element, {
x: rect.x + width / 2,
y: rect.y + height / 2
y: rect.y + height / 2,
})
return {
x: topLeft.x,
@ -120,12 +120,12 @@ export default class CardWrapper extends Object {
width,
height,
center,
link
link,
}
})
let distances = []
clickRects.forEach(rect => {
clickRects.forEach((rect) => {
let distance = Points.distanceToRect(localClick, rect)
distances.push(parseInt(distance))
})

4
lib/doctest.js
View File

@ -4,10 +4,10 @@
var docTestLogMessages = []
Array.prototype.equals = function(array) {
Array.prototype.equals = function (array) {
return (
this.length == array.length &&
this.every(function(this_i, i) {
this.every(function (this_i, i) {
return this_i == array[i]
})
)

14
lib/errors.js