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

Fixed closing issue with cards.

Browse Source
This commit is contained in:
Severin Opel 2019-08-14 17:46:12 +02:00
parent 30c7113713
commit 28a7a0b6a2
6 changed files with 375 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
dist/iwmlib.js vendored
View File

@ -2772,7 +2772,9 @@
for (let j = 0; j < elements.length; j++) { for (let j = 0; j < elements.length; j++) {
// if(elements[j].tagName == "svg") return false; // if(elements[j].tagName == "svg") return false;
let hammer = new Hammer(elements[j], opts); const target = elements[j];
let hammer = new Hammer(target, opts);
if (window.propagating !== 'undefined') { if (window.propagating !== 'undefined') {
hammer = propagating(hammer); hammer = propagating(hammer);
@ -2793,16 +2795,23 @@
hammer.get('tap').set(opts); hammer.get('tap').set(opts);
} }
console.log('APPLY HAMMER ON', type);
target.addEventListener("click", ()=>{
console.log("Hello");
});
hammer.on(type, event => { hammer.on(type, event => {
console.log('FIRED');
cb(event); cb(event);
}); });
if (Hammer.__hammers.has(elements[j])) { if (Hammer.__hammers.has(target)) {
const elementHammers = Hammer.__hammers.get(elements[j]); const elementHammers = Hammer.__hammers.get(target);
elementHammers.push(hammer); elementHammers.push(hammer);
Hammer.__hammers.set(elements[j], elementHammers); Hammer.__hammers.set(target, elementHammers);
} else { } else {
Hammer.__hammers.set(elements[j], [hammer]); Hammer.__hammers.set(target, [hammer]);
} }
} }
} else { } else {
@ -7709,8 +7718,9 @@
* @memberof Card * @memberof Card
*/ */
static _replaceAttributes(context, html, attribute, replaceFunc) { static _replaceAttributes(context, html, attribute, replaceFunc) {
let clickables = html.querySelectorAll(`[${attribute}]`); let attributeCarrier = html.querySelectorAll(`[${attribute}]`);
clickables.forEach(element => { attributeCarrier.forEach(element => {
console.log(element);
let attributeVal = element.getAttribute(attribute); let attributeVal = element.getAttribute(attribute);
element.removeAttribute(attribute); element.removeAttribute(attribute);
replaceFunc.call(this, context, element, attributeVal); replaceFunc.call(this, context, element, attributeVal);
@ -7759,10 +7769,13 @@
// These are 'hardcoded' inside the convert.js. // These are 'hardcoded' inside the convert.js.
if (element.tagName == 'circle') return false if (element.tagName == 'circle') return false
console.log("Replace" , context, element, attributeVal);
this.registerEvent(context, interactionType, element, event => { this.registerEvent(context, interactionType, element, event => {
/** /**
* Replaces the strings from the listener with the cooresponding variables. * Replaces the strings from the listener with the cooresponding variables.
*/ */
console.log("EVENT");
let args = []; let args = [];
argsStrings.forEach(arg => { argsStrings.forEach(arg => {
arg = arg.trim(); arg = arg.trim();
@ -7811,13 +7824,6 @@
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g, /<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function(data) { function(data) {
let path = that._getRelativePath(arguments[4]); let path = that._getRelativePath(arguments[4]);
console.log('REPLACE ', arguments[1]);
if (arguments[1] == 'a') {
console.error('NOT REPLACING LINKS');
return ''
}
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); /* if (that.debug) */ console.log('Adjusted: ', tag);
return tag return tag
@ -9152,7 +9158,7 @@
* @memberof Card * @memberof Card
*/ */
static openIndexCard(event, src) { static openIndexCard(event, src) {
//console.log("openIndexCard", src) console.log("openIndexCard", src);
/* /*
* Called by the expandIndexCard(...) * Called by the expandIndexCard(...)
*/ */
@ -9324,6 +9330,7 @@
let parser = new DOMParser(); let parser = new DOMParser();
let html = parser.parseFromString(htmlString, 'text/html'); let html = parser.parseFromString(htmlString, 'text/html');
if (!editable) { if (!editable) {
console.log("REPLACE ONCLICK");
this._replaceAttributes(context, html, 'onclick', this._replaceCallback); this._replaceAttributes(context, html, 'onclick', this._replaceCallback);
} }
let zoomableWrappers = html.querySelectorAll('.svg-wrapper'); let zoomableWrappers = html.querySelectorAll('.svg-wrapper');
@ -9562,7 +9569,10 @@
* @memberof Card * @memberof Card
*/ */
static registerEvent(context, types, element, callback) { static registerEvent(context, types, element, callback) {
InteractionMapper.on(types, element, callback); console.log("REGISTER INTERACTION EVENT",context, types, element, callback);
InteractionMapper.on(types, element, ()=>{
console.log("HELLO");
});
if (context._registeredEvents == null) context._registeredEvents = []; if (context._registeredEvents == null) context._registeredEvents = [];
if (context._registeredEvents.indexOf(element) == -1) context._registeredEvents.push(element); if (context._registeredEvents.indexOf(element) == -1) context._registeredEvents.push(element);
} }
@ -10202,6 +10212,7 @@
context.classList.add('info-card'); context.classList.add('info-card');
this.relativePath = basePath; this.relativePath = basePath;
console.log(htmlString);
htmlString = this._adjustRelativeLinks(htmlString); htmlString = this._adjustRelativeLinks(htmlString);
let parser = new DOMParser(); let parser = new DOMParser();

19
dist/iwmlib.pixi.js vendored
View File

@ -6396,7 +6396,9 @@
for (let j = 0; j < elements.length; j++) { for (let j = 0; j < elements.length; j++) {
// if(elements[j].tagName == "svg") return false; // if(elements[j].tagName == "svg") return false;
let hammer = new Hammer(elements[j], opts); const target = elements[j];
let hammer = new Hammer(target, opts);
if (window.propagating !== 'undefined') { if (window.propagating !== 'undefined') {
hammer = propagating(hammer); hammer = propagating(hammer);
@ -6417,16 +6419,23 @@
hammer.get('tap').set(opts); hammer.get('tap').set(opts);
} }
console.log('APPLY HAMMER ON', type);
target.addEventListener("click", ()=>{
console.log("Hello");
});
hammer.on(type, event => { hammer.on(type, event => {
console.log('FIRED');
cb(event); cb(event);
}); });
if (Hammer.__hammers.has(elements[j])) { if (Hammer.__hammers.has(target)) {
const elementHammers = Hammer.__hammers.get(elements[j]); const elementHammers = Hammer.__hammers.get(target);
elementHammers.push(hammer); elementHammers.push(hammer);
Hammer.__hammers.set(elements[j], elementHammers); Hammer.__hammers.set(target, elementHammers);
} else { } else {
Hammer.__hammers.set(elements[j], [hammer]); Hammer.__hammers.set(target, [hammer]);
} }
} }
} else { } else {

206
lib/card/card.js
View File

@ -1,5 +1,6 @@
'use strict'
'use strict'; import Highlight from './highlight.js'
/** To avoid problems with relative URL paths, we use inline data URI to load svg icons. */ /** To avoid problems with relative URL paths, we use inline data URI to load svg icons. */
const closeIconDataURI = `data:image/svg+xml;utf8, const closeIconDataURI = `data:image/svg+xml;utf8,
@ -33,10 +34,17 @@ const enableNearestNeighborTaps = false
export default class Card { export default class Card {
static setup(context, modules = []) { static setup(context, modules = []) {
console.log('Setup Card...', modules) console.log('Setup Card...', modules)
context.modules = []
/**
* This is required for the callback functions to work properly.
*/
window.Card = Card
context.modules = []
context.module = {} context.module = {}
context.onClose = null
context.classList.add('info-card') context.classList.add('info-card')
context.setAttribute('data-id', Card.id++) context.setAttribute('data-id', Card.id++)
@ -51,16 +59,57 @@ export default class Card {
static remove(context) { static remove(context) {
for (let module of Object.values(context.module)) { for (let module of Object.values(context.module)) {
module.remove() const moduleHasRemoveFunction = typeof module.remove === 'function'
if (moduleHasRemoveFunction) module.remove()
} }
} }
static eventClose(event) { static close(event) {
let context = this.getContext(event.target) let context = this.getContext(event.target)
if (context) { if (context.onClose != null) {
this.constructor.close(context) context.onClose()
} else console.error('Could not find context!', event.target) } else {
this.remove(context)
}
// console.error("Remove")
// let context = this.getContext(event.target)
// if (context) {
// this.remove(context)
// } else console.error('Could not find context!', event.target)
}
/**
* Adds an on close method to the provided context.
* This will overwrite the default closing behaviour.
* Removing the
*
* @static
* @param {DOMElement} context - Context on which the onClose will be set.
* @param {Function} callback - Callback function of the onClose.
* @memberof Card
*/
static setOnClose(context, callback) {
if (context.onClose != null) console.error('OnClose was already set. It was overwritten by the new method.')
context.onClose = callback
}
/**
* Unsets the onClose.
*
* Note: This may be used in conjunction with the setOnClose method.
* Using the setOnClose method to adjust behaviour before closing the card.
* Then unsetting the onClose to close the Card appropriately by calling the
* Card.Close again.
*
* @static
* @param {DOMElement} context - Context on which the remove will be executed.
* @memberof Card
*/
static removeOnClose(context) {
context.onClose = null
} }
/** /**
@ -70,12 +119,12 @@ export default class Card {
* @param {*} event * @param {*} event
* @memberof Card * @memberof Card
*/ */
static close(context) { static remove(context) {
console.log('CLOSE CARD!!!') if (context.parentNode != null) {
this.unregisterAllEvents(context) context.parentNode.removeChild(context)
if (context.onClose) { } else {
context.onClose(event) console.error('Tried removing card but it was already removed.')
} else context.parentNode.removeChild(context) }
} }
/** /**
@ -88,8 +137,8 @@ export default class Card {
* @memberof Card * @memberof Card
*/ */
static _replaceAttributes(context, html, attribute, replaceFunc) { static _replaceAttributes(context, html, attribute, replaceFunc) {
let clickables = html.querySelectorAll(`[${attribute}]`) let attributeCarrier = html.querySelectorAll(`[${attribute}]`)
clickables.forEach(element => { attributeCarrier.forEach(element => {
let attributeVal = element.getAttribute(attribute) let attributeVal = element.getAttribute(attribute)
element.removeAttribute(attribute) element.removeAttribute(attribute)
replaceFunc.call(this, context, element, attributeVal) replaceFunc.call(this, context, element, attributeVal)
@ -124,11 +173,23 @@ export default class Card {
let argsStrings = trimmedArgs.split(',').filter(entry => { let argsStrings = trimmedArgs.split(',').filter(entry => {
return entry.trim() != '' return entry.trim() != ''
}) })
/**
* As we determine a function by a string we must traverse from the window object to
* get the associated javascript function.
*/
let callStack = window let callStack = window
let last = 'window'
do { do {
callStack = callStack[callParts.shift().trim()] let func = callParts.shift().trim()
if (callStack[func] == null) {
callStack = null
console.error(
`Could not access callback function: ${attributeVal}. Member ${func} of ${last} could not be found.`
)
break
} else callStack = callStack[func]
} while (callParts.length > 0) } while (callParts.length > 0)
let targetFunc = callStack
let that = this let that = this
@ -161,8 +222,9 @@ export default class Card {
} }
}) })
event.stopPropagation() event.stopPropagation()
if (callStack) callStack.call(that, ...args) if (targetFunc) {
else { targetFunc.call(that, ...args)
} else {
console.error('Could not call callback function ' + attributeVal, ...args) console.error('Could not call callback function ' + attributeVal, ...args)
} }
}) })
@ -190,13 +252,6 @@ export default class Card {
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g, /<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
function(data) { function(data) {
let path = that._getRelativePath(arguments[4]) let path = that._getRelativePath(arguments[4])
console.log('REPLACE ', arguments[1])
if (arguments[1] == 'a') {
console.error('NOT REPLACING LINKS')
return ''
}
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) /* if (that.debug) */ console.log('Adjusted: ', tag)
return tag return tag
@ -751,7 +806,7 @@ export default class Card {
let point = svgPoint.matrixTransform(matrix) let point = svgPoint.matrixTransform(matrix)
let closestDiv = node.closest('div') let closestDiv = node.closest('div')
console.log('closestDiv', closestDiv, point) // console.log('closestDiv', closestDiv, point)
let global = Points.fromNodeToPage(closestDiv, point) let global = Points.fromNodeToPage(closestDiv, point)
let local = Points.fromPageToNode(context, global) let local = Points.fromPageToNode(context, global)
@ -763,7 +818,7 @@ export default class Card {
// we could load the data while the circle is animating. // we could load the data while the circle is animating.
// but for simplicity it's just done here for now. // but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled). // TODO: Adjust to load while animating (Problem: Unload when cancelled).
console.log('loadHighlightPopup', src, position, local) // console.log('loadHighlightPopup', src, position, local)
this._loadPopupContent(context, src) this._loadPopupContent(context, src)
.then(content => { .then(content => {
this._openPopup(context, src, local, content, { this._openPopup(context, src, local, content, {
@ -1214,7 +1269,7 @@ export default class Card {
* *
* @param {*} card - The card to expand * @param {*} card - The card to expand
* @param {string} html - The original HTML of the card * @param {string} html - The original HTML of the card
* @param {*} tagName - The tagname of the element that is used as exanded element * @param {*} tagName - The tagname of the element that is used as expanded element
* @param {*} src - The src of the expanded element * @param {*} src - The src of the expanded element
* @param {*} callback - A callback that is called when the expanded element is closed * @param {*} callback - A callback that is called when the expanded element is closed
*/ */
@ -1257,7 +1312,6 @@ export default class Card {
let scaleY = globalPreviewRect.height / globalIndexCardRect.height let scaleY = globalPreviewRect.height / globalIndexCardRect.height
let padding = parseInt(this.css(indexbox, 'padding')) let padding = parseInt(this.css(indexbox, 'padding'))
let maxWidth = this.css(card, 'max-width')
TweenLite.set(clone, { TweenLite.set(clone, {
css: { css: {
@ -1295,7 +1349,6 @@ export default class Card {
if (this.dynamicHeight) { if (this.dynamicHeight) {
let targetHeight = subcardContent.offsetHeight let targetHeight = subcardContent.offsetHeight
console.log(targetHeight)
subcardContent.classList.add('dynamic-height') subcardContent.classList.add('dynamic-height')
/** /**
* Scale the content from 100% to it's target size. * Scale the content from 100% to it's target size.
@ -1309,7 +1362,7 @@ export default class Card {
} }
//jquery hyphenate below //jquery hyphenate below
if (this.constructor._jQueryIsPresent()) { if (this._isJQueryPresent()) {
$('.column') $('.column')
.not('.overview') .not('.overview')
.children('p') .children('p')
@ -1389,7 +1442,7 @@ export default class Card {
if (enableNearestNeighborTaps) { if (enableNearestNeighborTaps) {
//look for nearby popups on tap //look for nearby popups on tap
InteractionMapper.on('tap', indexbox, () => { InteractionMapper.on('tap', indexbox, () => {
console.log('Tap handler called', editable) // console.log('Tap handler called', editable)
if (!editable) { if (!editable) {
this.findNearbyPopups(event, card) this.findNearbyPopups(event, card)
} }
@ -1407,24 +1460,55 @@ export default class Card {
if (isDirty) { if (isDirty) {
mainController.saveNode(html.innerHTML, url => { mainController.saveNode(html.innerHTML, url => {
callback(url) callback(url)
this._closeIndexCard(context, card,{ this._closeIndexCard(context, card, clone, articleClone, {
eventElements, eventElements,
src src
}) })
}) })
} else { } else {
this._closeIndexCard(context, card) this._closeIndexCard(context, card, clone, articleClone)
} }
} else { } else {
this._closeIndexCard(context, card) this._closeIndexCard(context, card, clone, articleClone)
} }
}) })
} }
static _closeIndexCard(context, card, { /**
eventElements = [], * Closes the index card again.
src = null *
} = []) { * @static
* @param {DOMElement} context - The Card element.
* @param {DOMElement} subcard - The original subcard element visible on the main card.
* @param {DOMElement} clonedSubcard - The cloned subcard that's going to be expanded.
* @param {DOMElement} clonedArticle - The article part of the ClonedSubcard.
* @param {Object} [{ eventElements = [], src = null }=[]]
* @memberof Card
*/
static _closeIndexCard(
context,
subcard,
clonedSubcard,
clonedArticle,
{ eventElements = [], src = null } = []
) {
let indexbox = context.querySelector('.mainview')
let padding = parseInt(this.css(indexbox, 'padding'))
let globalPreviewRect = Card._getGlobalRect(subcard)
let globalIndexCardRect = Card._getGlobalRect(indexbox)
let scale = {
x: globalPreviewRect.width / globalIndexCardRect.width,
y: globalPreviewRect.height / globalIndexCardRect.height
}
let titlebar = clonedSubcard.querySelector('.titlebar')
let desiredBorderBottomWidth = parseInt(window.getComputedStyle(titlebar).borderBottomWidth)
let localOrigin = Points.fromPageToNode(indexbox, Rect.getPosition(globalPreviewRect))
//logging //logging
if (src) { if (src) {
let strparts = src.split('/') let strparts = src.split('/')
@ -1442,15 +1526,14 @@ export default class Card {
this._subcardChanged(context, true) this._subcardChanged(context, true)
this._enableCardCloseButton(context) this._enableCardCloseButton(context)
let previewTitlebar = card.querySelector('.titlebar') let previewTitlebar = subcard.querySelector('.titlebar')
let titlebarStyle = window.getComputedStyle(previewTitlebar) let titlebarStyle = window.getComputedStyle(previewTitlebar)
let titlebar = clone.querySelector('.titlebar')
TweenLite.to(titlebar, this.animation.articleTransition, { TweenLite.to(titlebar, this.animation.articleTransition, {
height: parseInt(titlebarStyle.height) height: parseInt(titlebarStyle.height)
}) })
TweenLite.to(articleClone, this.animation.articleTransition / 2, { TweenLite.to(clonedArticle, this.animation.articleTransition / 2, {
autoAlpha: 0 autoAlpha: 0
}) })
@ -1465,24 +1548,25 @@ export default class Card {
}) })
} }
TweenLite.set(card, { autoAlpha: 1, css: { maxWidth } }) let maxWidth = this.css(subcard, 'max-width')
TweenLite.to(clone, this.animation.articleTransition, { TweenLite.set(subcard, { autoAlpha: 1, css: { maxWidth } })
TweenLite.to(clonedSubcard, this.animation.articleTransition, {
x: localOrigin.x - padding, x: localOrigin.x - padding,
y: localOrigin.y - padding, y: localOrigin.y - padding,
scaleX, scaleX: scale.x,
scaleY, scaleY: scale.y,
ease: ExpoScaleEase.config(1, scaleX), ease: ExpoScaleEase.config(1, scale.x),
rotation: angle, // rotation: angle,
onComplete: () => { onComplete: () => {
// article.remove() // article.remove()
TweenLite.to(clone, this.animation.fade, { TweenLite.to(clonedSubcard, this.animation.fade, {
//delay: 0.2, //delay: 0.2,
autoAlpha: 0, autoAlpha: 0,
onComplete: () => { onComplete: () => {
if (editable) { if (Card.isEditable()) {
mainController.popController() mainController.popController()
} }
clone.remove() clonedSubcard.remove()
} }
}) })
}, },
@ -1508,7 +1592,7 @@ export default class Card {
* Tests if jQuery is properly included in the project. * Tests if jQuery is properly included in the project.
* Otherwise specific features may not work correctly (e.g. hyphenation) * Otherwise specific features may not work correctly (e.g. hyphenation)
*/ */
_jQueryIsPresent() { static _isJQueryPresent() {
let jQueryInitialized = typeof $ != 'undefined' let jQueryInitialized = typeof $ != 'undefined'
if (!jQueryInitialized) console.error('No jQuery is provided. Specific features may fail.') if (!jQueryInitialized) console.error('No jQuery is provided. Specific features may fail.')
return jQueryInitialized return jQueryInitialized
@ -1542,7 +1626,7 @@ export default class Card {
* @memberof Card * @memberof Card
*/ */
static openIndexCard(event, src) { static openIndexCard(event, src) {
//console.log("openIndexCard", src) console.log('openIndexCard', src)
/* /*
* Called by the expandIndexCard(...) * Called by the expandIndexCard(...)
*/ */
@ -1593,9 +1677,7 @@ export default class Card {
} }
static _enableCardCloseButton(context) { static _enableCardCloseButton(context) {
//console.log("ENABLE")
let btn = this._selectCardCloseButton(context) let btn = this._selectCardCloseButton(context)
//console.log(btn)
btn.classList.remove('disabled') btn.classList.remove('disabled')
} }
@ -1706,11 +1788,9 @@ export default class Card {
* @memberof Card * @memberof Card
*/ */
static postProcessResponseText(context, htmlString) { static postProcessResponseText(context, htmlString) {
console.error('RUN POSTPROCESS')
let editable = this.isEditable() let editable = this.isEditable()
htmlString = this._adjustRelativeLinks(htmlString) htmlString = this._adjustRelativeLinks(htmlString)
//console.log(htmlString)
let parser = new DOMParser() let parser = new DOMParser()
let html = parser.parseFromString(htmlString, 'text/html') let html = parser.parseFromString(htmlString, 'text/html')
if (!editable) { if (!editable) {
@ -1835,7 +1915,7 @@ export default class Card {
this._setPopupSource(popup, source) this._setPopupSource(popup, source)
context.popup = popup context.popup = popup
if (this.constructor._jQueryIsPresent()) { if (this._isJQueryPresent()) {
//jquery hyphenate below //jquery hyphenate below
console.log('hyphenated popup:', $('span').hyphenate('de')) console.log('hyphenated popup:', $('span').hyphenate('de'))
} }
@ -1908,6 +1988,14 @@ export default class Card {
context.subcard = null context.subcard = null
} }
static _subcardChanged(context, closed = false) {
for (let [key, module] of Object.entries(context.module)) {
if (module.subcardChanged) {
module.subcardChanged(closed)
}
}
}
static incrementZIndex(context) { static incrementZIndex(context) {
if (!context.zIndex) context.zIndex = 0 if (!context.zIndex) context.zIndex = 0
context.zIndex++ context.zIndex++

107
lib/card/plugin.js
View File

@ -2,6 +2,7 @@ export var CardPlugin = CardPlugin || {}
export class CardPluginBase { export class CardPluginBase {
apply(context) { apply(context) {
this.context = context
if (this.verify(context)) { if (this.verify(context)) {
this.append(context) this.append(context)
console.log('Plugin ' + this.name + ' was verified successfully.') console.log('Plugin ' + this.name + ' was verified successfully.')
@ -91,6 +92,14 @@ export class CardPluginBase {
} }
return requirements return requirements
} }
/**
* Called when the card is removed.
* Can be used to cleanup the plugin.
*
* @memberof CardPluginBase
*/
remove() {}
} }
CardPlugin.LightBox = class LightBox extends CardPluginBase { CardPlugin.LightBox = class LightBox extends CardPluginBase {
@ -392,7 +401,10 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
this.parentSelector = parentSelector this.parentSelector = parentSelector
this.interactionType = interactionType this.interactionType = interactionType
// We directly overwriting the function with a version that has a binded
// reference to itself. Doing so provides an easy and reliable way to remove
// the event listener using this function. - SO
this._domWasChanged = this._domWasChanged.bind(this)
/* /*
Speech doesn't stop when page is navigated. Speech doesn't stop when page is navigated.
@ -409,25 +421,25 @@ CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
this.utterance.addEventListener('end', event => { this.utterance.addEventListener('end', event => {
this._end() this._end()
}) })
} }
get require() { get require() {
return [CardPlugin.Ui] return [CardPlugin.Ui]
} }
subcardChanged(closed) { subcardChanged(closed) {
if (this.cardActive) { if (this.cardActive) {
this._updateText(closed) this._updateText(closed)
} }
} }
get cardActive() { get cardActive() {
return this.activeUtterance == this.utterance return this.activeUtterance == this.utterance
} }
_updateText(ignoreSubcard = false) { _updateText(ignoreSubcard = false) {
let node = this.context let node = this.context
let subcard = this.context.querySelector('.mainview > .subcard') let subcard = node.querySelector('.mainview > .subcard')
if (ignoreSubcard) { if (ignoreSubcard) {
if (subcard != null) { if (subcard != null) {
@ -468,27 +480,28 @@ _updateText(ignoreSubcard = false) {
}) })
.catch(console.error) .catch(console.error)
} }
} }
_sameText(node) { _sameText(node) {
return this.utterance.text == this._cleanupText(node) return this.utterance.text == this._cleanupText(node)
} }
_setupUtterance() { _setupUtterance() {
this.utterance = new SpeechSynthesisUtterance() this.utterance = new SpeechSynthesisUtterance()
this.utterance.lang = 'de-DE' this.utterance.lang = 'de-DE'
} }
get require() { get require() {
return [CardPlugin.Ui] return [CardPlugin.Ui]
} }
remove() { remove() {
this.button = null this.button = null
this.context.removeEventListener('DOMNodeRemoved', this._domWasChanged)
super.remove() super.remove()
} }
append(context) { append(context) {
let container = context.querySelector(this.parentSelector) let container = context.querySelector(this.parentSelector)
this.button = document.createElement('div') this.button = document.createElement('div')
this.button.className = 'icon button ' + this.className this.button.className = 'icon button ' + this.className
@ -498,23 +511,24 @@ append(context) {
this.speak() this.speak()
}) })
this.context.addEventListener('DOMNodeRemoved', event => { context.addEventListener('DOMNodeRemoved', this._domWasChanged)
if ( }
_domWasChanged(event) {
if (this.context == null) this._stop()
else if (
this.context['lastSpeechNode'] == window.speechSynthesis['speechPluginNode'] && this.context['lastSpeechNode'] == window.speechSynthesis['speechPluginNode'] &&
event.target == this.context event.target == this.context
) { ) {
this._stop() this._stop()
} }
}) }
ScatterCard _isSameNode(node) {
}
_isSameNode(node) {
return this.currentText == node.textContent return this.currentText == node.textContent
} }
speak() { speak() {
/** /**
* This is a little bit ugly, but imho the most elegant of all dirty solutions. * This is a little bit ugly, but imho the most elegant of all dirty solutions.
* *
@ -531,9 +545,9 @@ speak() {
let activeNode = window.speechSynthesis['speechPluginNode'] let activeNode = window.speechSynthesis['speechPluginNode']
this._updateText() this._updateText()
} }
async _stop() { async _stop() {
return new Promise(resolve => { return new Promise(resolve => {
if (this.activeUtterance) { if (this.activeUtterance) {
this.activeUtterance.addEventListener('end', resolve, { this.activeUtterance.addEventListener('end', resolve, {
@ -543,20 +557,20 @@ async _stop() {
window.speechSynthesis.cancel() window.speechSynthesis.cancel()
}) })
} }
get activeUtterance() { get activeUtterance() {
return window.speechSynthesis['speechPluginUtterance'] return window.speechSynthesis['speechPluginUtterance']
} }
_end() { _end() {
window.speechSynthesis['speechPluginNode'] = null window.speechSynthesis['speechPluginNode'] = null
window.speechSynthesis['speechPluginUtterance'] = null window.speechSynthesis['speechPluginUtterance'] = null
this._deactivateButton() this._deactivateButton()
this.context.classList.remove('speech-plugin-is-reading') this.context.classList.remove('speech-plugin-is-reading')
} }
_start(node) { _start(node) {
window.speechSynthesis.cancel() window.speechSynthesis.cancel()
window.speechSynthesis['speechPluginUtterance'] = this.utterance window.speechSynthesis['speechPluginUtterance'] = this.utterance
@ -569,23 +583,22 @@ _start(node) {
this._activateButton() this._activateButton()
this.context.classList.add('speech-plugin-is-reading') this.context.classList.add('speech-plugin-is-reading')
} }
_cleanupText(node) { _cleanupText(node) {
let text = node.textContent let text = node.textContent
text = this._removeShy(text) text = this._removeShy(text)
return text return text
} }
_removeShy(text) { _removeShy(text) {
return text.replace(/\u00AD/g, '') return text.replace(/\u00AD/g, '')
} }
_activateButton() { _activateButton() {
if (this.button) this.button.classList.add('active') if (this.button) this.button.classList.add('active')
} }
_deactivateButton() { _deactivateButton() {
if (this.button) this.button.classList.remove('active') if (this.button) this.button.classList.remove('active')
} }
} }

56
lib/card/scatter.js
View File

@ -18,6 +18,17 @@ export default class ScatterCard extends Card {
* @memberof ScatterCard * @memberof ScatterCard
*/ */
static setup(context, htmlString, { basePath = './', modules = [] } = {}) { static setup(context, htmlString, { basePath = './', modules = [] } = {}) {
if (typeof context.scatter == 'undefined') {
console.error(
"You need to wrap the context inside a DOMScatter before executing the ScatterCard's setup function."
)
}
/**
* This is required for the callback functions to work properly
*/
window.ScatterCard = ScatterCard
context.classList.add('info-card') context.classList.add('info-card')
this.relativePath = basePath this.relativePath = basePath
@ -38,29 +49,6 @@ export default class ScatterCard extends Card {
return context return context
} }
/**
* Appends a close listener to the scatter element.
*
* @static
* @param {*} element
* @param {*} callback
* @memberof Card
*/
static addOnCloseListener(element, callback) {
if (callback) {
element.onClose = callback
}
}
/**
* Removes the close listener from a card element.
*
* @static
* @param {HTMLElement} element - Context of the Card.
* @memberof ScatterCard
*/
static removeOnCloseListener(element) {
element.onClose = null
}
/** /**
* Creates a scatter for the card and applies the card to it, * Creates a scatter for the card and applies the card to it,
* *
@ -95,15 +83,19 @@ export default class ScatterCard extends Card {
* of the scatter. * of the scatter.
*/ */
static close(context) { static close(context) {
if (typeof context.scatter != 'undefined') context.scatter.close()
Card.close(context) else {
if (context['scatter']) {
console.error('CLOSED CARD')
context.scatter.close()
} else {
console.error('Expected a scatter element to close!', this) console.error('Expected a scatter element to close!', this)
} }
// Card.close(context)
// if (context['scatter']) {
// console.error('CLOSED CARD')
// context.scatter.close()
// } else {
// console.error('Expected a scatter element to close!', this)
// }
} }
/** /**
@ -116,7 +108,6 @@ export default class ScatterCard extends Card {
static remove(context) { static remove(context) {
if (context['scatter']) { if (context['scatter']) {
context.scatter = null context.scatter = null
console.error('REMOVED CARD')
} else { } else {
console.error('Expected a scatter element to remove!', this) console.error('Expected a scatter element to remove!', this)
} }
@ -135,7 +126,7 @@ export default class ScatterCard extends Card {
* @returns * @returns
* @memberof CardScatter * @memberof CardScatter
*/ */
static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [], onClose = null } = {}) { static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [] } = {}) {
console.log(basePath) console.log(basePath)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let url = basePath + '/' + item + '/index.html' let url = basePath + '/' + item + '/index.html'
@ -147,7 +138,6 @@ export default class ScatterCard extends Card {
basePath, basePath,
modules modules
}) })
if (onClose) this.addOnCloseListener(element, onClose)
resolve(element) resolve(element)
}) })
.catch(e => reject(e)) .catch(e => reject(e))

2
lib/card/test/index.html
View File

@ -64,6 +64,8 @@
}) })
}) })
createCard()
function createCard() { function createCard() {
const path = './example/01/index.html' const path = './example/01/index.html'