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

Working on stacked buttons.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-30 16:56:29 +02:00
parent 0bcf931465
commit 5f46b4feae
115 changed files with 3277 additions and 5134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/card/card.js
+37 -139
View File
@@ -32,8 +32,7 @@ export default class Card {
console.log('Setup Card...', modules)
context.modules = []
modules.forEach(module => {
if (module.apply(context))
context.modules.push(module.constructor.name)
if (module.apply(context)) context.modules.push(module.constructor.name)
})
}
@@ -138,10 +137,7 @@ export default class Card {
event.stopPropagation()
if (callStack) callStack.call(that, ...args)
else {
console.error(
'Could not call callback function ' + attributeVal,
...args
)
console.error('Could not call callback function ' + attributeVal, ...args)
}
})
}
@@ -168,9 +164,7 @@ export default class Card {
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function(data) {
let path = that._getRelativePath(arguments[4])
const tag = `<${arguments[1]} ${arguments[2]} ${
arguments[3]
}="${path}" ${arguments[5]}>`
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`
/* if (that.debug) */ console.log('Adjusted: ', tag)
return tag
}
@@ -328,16 +322,13 @@ export default class Card {
//Test if meanwhile another popup was registered...
this._getPopup(context) ||
// Or if an highlight was loaded, if the highlight already was closed.
(highlight !== null &&
!this._isHighlightActive(context, highlight))
(highlight !== null && !this._isHighlightActive(context, highlight))
) {
//.. if so remove the create popup instantly.
popup.remove()
} else {
// Otherwise set the popup regularly.
let popupParagraphs = popup.element.querySelectorAll(
'.popupContent > *'
)
let popupParagraphs = popup.element.querySelectorAll('.popupContent > *')
// Remove a design error of naming two adjacent elements popup.
// Todo: fix this properly and remove this code.
@@ -388,8 +379,7 @@ export default class Card {
* @memberof Card
*/
static _createPopup(context, position, content, options = {}) {
if (this.debug)
console.log('Create Popup.', context, position, content, options)
if (this.debug) console.log('Create Popup.', context, position, content, options)
let popup = new Popup(
Object.assign(
{
@@ -482,9 +472,7 @@ export default class Card {
node = event.target
}
if (local == null) {
let globalClick = event.center
? event.center
: { x: event.x, y: event.y }
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
local = Points.fromPageToNode(context, globalClick)
}
if (this.debug) console.log('loadPopup', event)
@@ -517,17 +505,11 @@ export default class Card {
// Extract the body from the Popup site.
let parser = new DOMParser()
let popupPage = parser.parseFromString(
xhr.responseText,
'text/html'
)
let popupPage = parser.parseFromString(xhr.responseText, 'text/html')
//Fix the relative path of loaded images in the popup.
popupPage.querySelectorAll('img').forEach(node => {
node.setAttribute(
'src',
that._getRelativePath(node.getAttribute('src'))
)
node.setAttribute('src', that._getRelativePath(node.getAttribute('src')))
})
let html = popupPage.body.innerHTML
/**
@@ -549,18 +531,10 @@ export default class Card {
Card._cleanup(context)
if (!isSame) {
Card._activateCorrespondingHighlights(
context,
node,
parentArticle
)
Card._activateCorrespondingHighlights(context, node, parentArticle)
let callback = (popup, callback) => {
if (this.debug)
console.log(
'Close popup (Editable = ' + editable + ').',
popup
)
if (this.debug) console.log('Close popup (Editable = ' + editable + ').', popup)
if (editable) {
let isDirty = mainController.askSaveNode()
if (isDirty)
@@ -596,8 +570,7 @@ export default class Card {
}
//console.log("onreadystatechange", editable)
if (editable) {
if (this.debug)
console.log('pushController', src, popup.insertedNode)
if (this.debug) console.log('pushController', src, popup.insertedNode)
mainController.pushController(popup.insertedNode, src)
}
}
@@ -627,10 +600,7 @@ export default class Card {
}
if (correspondingHighlights.length > 0) {
for (let highlight of correspondingHighlights) {
if (
highlight.parentNode &&
highlight.parentNode.nodeName.toLowerCase() == 'g'
) {
if (highlight.parentNode && highlight.parentNode.nodeName.toLowerCase() == 'g') {
Highlight.openHighlight(highlight, {
animation: Card.highlightAnimation
})
@@ -729,10 +699,7 @@ export default class Card {
let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix)
let global = Points.fromNodeToPage(
node.closest('div'),
point
)
let global = Points.fromNodeToPage(node.closest('div'), point)
let local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div')
@@ -778,16 +745,12 @@ export default class Card {
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 0) {
let html = this.postProcessResponseText(
xhr.responseText
)
let html = this.postProcessResponseText(xhr.responseText)
let selector = Card.popupHtmlSelector
let content = { html: html.body.innerHTML, selector }
resolve(content)
} else {
reject(
` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`
)
reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`)
}
}
}
@@ -802,8 +765,7 @@ export default class Card {
let editable = Card.isEditable()
if (editable) {
if (node.classList.contains('zoomable-icon'))
this._openZoomable(event)
if (node.classList.contains('zoomable-icon')) this._openZoomable(event)
return
}
this._openZoomable(event)
@@ -852,10 +814,7 @@ export default class Card {
globalBottomRight = Points.fromNodeToPage(zoomable, globalBottomRight)
let globalFigurePos = Points.fromNodeToPage(zoomable, { x: 0, y: 0 })
let localFigurePos = Points.fromPageToNode(wrapper, globalFigurePos)
let relativeBottomRight = Points.fromPageToNode(
zoomable,
globalBottomRight
)
let relativeBottomRight = Points.fromPageToNode(zoomable, globalBottomRight)
let width =
relativeBottomRight.x +
@@ -969,12 +928,8 @@ export default class Card {
})
let zoomedFigStyle = window.getComputedStyle(zoomedFig)
let borderX =
parseFloat(zoomedFigStyle.borderLeftWidth) +
parseFloat(zoomedFigStyle.borderRightWidth)
let borderY =
parseFloat(zoomedFigStyle.borderBottomWidth) +
parseFloat(zoomedFigStyle.borderTopWidth)
let borderX = parseFloat(zoomedFigStyle.borderLeftWidth) + parseFloat(zoomedFigStyle.borderRightWidth)
let borderY = parseFloat(zoomedFigStyle.borderBottomWidth) + parseFloat(zoomedFigStyle.borderTopWidth)
const scaleFactor = 2
const transformOrigin = 'bottom right'
@@ -1026,14 +981,7 @@ export default class Card {
.to(zoomCaption, this.animation.fade, {
autoAlpha: 1
})
} else
this._openZoomableEditorBehaviour(
wrapper,
img,
zoomable,
zoomedFig,
current
)
} else this._openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current)
}
/**
@@ -1066,13 +1014,7 @@ export default class Card {
return parent.querySelector('.icon')
}
static _openZoomableEditorBehaviour(
wrapper,
img,
zoomable,
zoomedFig,
current
) {
static _openZoomableEditorBehaviour(wrapper, img, zoomable, zoomedFig, current) {
let zoomContainer = document.createElement('div')
let zoomIcon = zoomable.querySelector('.zoom-icon')
zoomContainer.style.position = 'relative'
@@ -1166,8 +1108,7 @@ export default class Card {
* @memberof Card
*/
static closeZoomable(context, zoomable, zoomedFig) {
if (this.debug)
console.log('Close Zoomable', context, zoomable, zoomedFig)
if (this.debug) console.log('Close Zoomable', context, zoomable, zoomedFig)
if (zoomable) {
this._unsetZoomable(context)
@@ -1218,13 +1159,7 @@ export default class Card {
* @param {*} src - The src of the expanded element
* @param {*} callback - A callback that is called when the expanded element is closed
*/
static expandIndexCard(
card,
html,
tagName = 'article',
src = null,
callback = null
) {
static expandIndexCard(card, html, tagName = 'article', src = null, callback = null) {
let editable = Card.isEditable()
let context = this.getContext(card)
@@ -1257,10 +1192,7 @@ export default class Card {
let globalPreviewRect = Card._getGlobalRect(card)
let globalIndexCardRect = Card._getGlobalRect(indexbox)
let localOrigin = Points.fromPageToNode(
indexbox,
Rect.getPosition(globalPreviewRect)
)
let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect))
let scaleX = globalPreviewRect.width / globalIndexCardRect.width
let scaleY = globalPreviewRect.height / globalIndexCardRect.height
@@ -1331,15 +1263,12 @@ export default class Card {
let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ')
let cardType = strparts[1]
let msg =
'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
let msg = 'Card: ' + cardID + ': openTopic: ' + cardType + ', ' + cardName
console.log('Logging:', msg)
Logging.log(msg)
}
let desiredBorderBottomWidth = parseInt(
window.getComputedStyle(titlebar).borderBottomWidth
)
let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth)
TweenLite.to(clone, Card.animation.articleTransition, {
x: -padding,
y: -padding,
@@ -1360,8 +1289,7 @@ export default class Card {
})
// Retain the border at same visual thickness.
titlebar.style.borderBottomWidth =
desiredBorderBottomWidth / transform.scaleY + 'px'
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
})
@@ -1384,13 +1312,7 @@ export default class Card {
let cardName = strparts[strparts.length - 1]
strparts = card.className.split(' ')
let cardType = strparts[1]
let msg =
'Card: ' +
cardID +
': closeTopic: ' +
cardType +
', ' +
cardName
let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName
console.log('Logging:', msg)
Logging.log(msg)
}
@@ -1457,8 +1379,7 @@ export default class Card {
})
// Retain the border at same visual thickness.
titlebar.style.borderBottomWidth =
desiredBorderBottomWidth / transform.scaleY + 'px'
titlebar.style.borderBottomWidth = desiredBorderBottomWidth / transform.scaleY + 'px'
}
})
}
@@ -1468,9 +1389,7 @@ export default class Card {
if (iconClone == null) {
iconClone = clone.querySelector('.cardicon')
console.warn(
"Legacy selector. Change it to 'card-icon' and find a more suitable name."
)
console.warn("Legacy selector. Change it to 'card-icon' and find a more suitable name.")
}
if (iconClone.tagName == 'img') {
@@ -1478,11 +1397,7 @@ export default class Card {
}
//console.log("ICON: ", iconClone)
iconClone.classList.remove('info')
iconClone.classList.add(
'close',
'view-button',
'transparent-background'
)
iconClone.classList.add('close', 'view-button', 'transparent-background')
// We append the icon clone to the subcard-content.
// Then it's always on the content and not on the background
@@ -1589,13 +1504,7 @@ export default class Card {
// card.insertAdjacentElement('afterbegin', article)
// TweenLite.set(article, { autoAlpha: 0 })
Card.expandIndexCard(
card,
parsedHTML,
'article',
relativeSource,
saveCallback
)
Card.expandIndexCard(card, parsedHTML, 'article', relativeSource, saveCallback)
}
}
xhr.onerror = () => {
@@ -1632,9 +1541,7 @@ export default class Card {
let dom = child.closest('.info-card')
if (!dom) {
dom = child.querySelector('.wrapper')
console.warn(
"Change the 'wrapper' class to 'info-card' it's more suitable."
)
console.warn("Change the 'wrapper' class to 'info-card' it's more suitable.")
}
return dom // (dom == null) ? document.body : dom
}
@@ -1782,9 +1689,7 @@ export default class Card {
if (indexbox != null) {
// column != null ||
let links = Array.from(indexbox.getElementsByTagName('a'))
let globalClick = event.center
? event.center
: { x: event.x, y: event.y }
let globalClick = event.center ? event.center : { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(indexbox, globalClick)
let linkRects = links.map(link => {
@@ -1819,16 +1724,9 @@ export default class Card {
let closestLinkIndex = distances.indexOf(Math.min(...distances))
let closestLink = links[closestLinkIndex]
console.log(
'finding closest links',
closestLink,
closestLink.getClientRects()
)
console.log('finding closest links', closestLink, closestLink.getClientRects())
if (
distances[closestLinkIndex] < 44 &&
closestLink.getAttribute('href')
) {
if (distances[closestLinkIndex] < 44 && closestLink.getAttribute('href')) {
// Adapt context and local position
let context = this.getContext(closestLink)
let local = Points.fromPageToNode(context, globalClick)