From 5a25714bdeca571b8336d33883ee77827b127ba5 Mon Sep 17 00:00:00 2001 From: Aferdita Muriqi Date: Mon, 4 Mar 2024 20:36:54 -0500 Subject: [PATCH] fixed single vs double click and clickthrough events --- package-lock.json | 4 +- package.json | 2 +- src/modules/highlight/TextHighlighter.ts | 4 + src/utils/EventHandler.ts | 101 ++++++++++++++--------- 4 files changed, 68 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 141377cf..e385696b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@d-i-t-a/reader", - "version": "2.4.8", + "version": "2.4.9", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@d-i-t-a/reader", - "version": "2.4.8", + "version": "2.4.9", "license": "Apache-2.0", "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", diff --git a/package.json b/package.json index f382abcf..fd48cb7f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@d-i-t-a/reader", - "version": "2.4.8", + "version": "2.4.9", "description": "A viewer application for EPUB files.", "repository": "https://github.com/d-i-t-a/R2D2BC", "license": "Apache-2.0", diff --git a/src/modules/highlight/TextHighlighter.ts b/src/modules/highlight/TextHighlighter.ts index 0aebca11..e54fc73b 100644 --- a/src/modules/highlight/TextHighlighter.ts +++ b/src/modules/highlight/TextHighlighter.ts @@ -903,24 +903,28 @@ export class TextHighlighter { switch (mode) { case "colors": + this.selectionMenuOpened(); if (toolboxColorsOptions) toolboxColorsOptions.style.display = "unset"; if (toolboxAddOptions) toolboxAddOptions.style.display = "none"; if (toolboxEditOptions) toolboxEditOptions.style.display = "none"; if (toolboxMarkOptions) toolboxMarkOptions.style.display = "none"; break; case "edit": + this.selectionMenuOpened(); if (toolboxColorsOptions) toolboxColorsOptions.style.display = "none"; if (toolboxAddOptions) toolboxAddOptions.style.display = "none"; if (toolboxEditOptions) toolboxEditOptions.style.display = "unset"; if (toolboxMarkOptions) toolboxMarkOptions.style.display = "none"; break; case "action": + this.selectionMenuOpened(); if (toolboxColorsOptions) toolboxColorsOptions.style.display = "none"; if (toolboxAddOptions) toolboxAddOptions.style.display = "none"; if (toolboxEditOptions) toolboxEditOptions.style.display = "none"; if (toolboxMarkOptions) toolboxMarkOptions.style.display = "unset"; break; default: + this.selectionMenuOpened(); if (toolboxColorsOptions) toolboxColorsOptions.style.display = "none"; if (toolboxAddOptions) toolboxAddOptions.style.display = "unset"; if (toolboxEditOptions) toolboxEditOptions.style.display = "none"; diff --git a/src/utils/EventHandler.ts b/src/utils/EventHandler.ts index 7fba9a42..4c986998 100644 --- a/src/utils/EventHandler.ts +++ b/src/utils/EventHandler.ts @@ -127,58 +127,79 @@ export default class EventHandler { return isEpubInternal; }; + clicks = 0; + clickTimer: any = 0; + dblClickTimeSpan = 300; + private handleLinks = async ( event: MouseEvent | TouchEvent ): Promise => { log.log("R2 Click Handler"); + this.clicks++; + if (this.clicks === 1) { + this.clickTimer = setTimeout(async () => { + this.clicks = 0; - const link = this.checkForLink(event); - if (link) { - // Open external links in new tabs. - const isSameOrigin = - window.location.protocol === link.protocol && - window.location.port === link.port && - window.location.hostname === link.hostname; + const link = this.checkForLink(event); + if (link) { + // Open external links in new tabs. + const isSameOrigin = + window.location.protocol === link.protocol && + window.location.port === link.port && + window.location.hostname === link.hostname; - // If epub is hosted, rather than streamed, links to a resource inside the same epub should not be opened externally. - const isEpubInternal = this.isReadingOrderInternal(link); + // If epub is hosted, rather than streamed, links to a resource inside the same epub should not be opened externally. + const isEpubInternal = this.isReadingOrderInternal(link); - const isResourceInternal = this.isResourceInternal(link); - if (!isResourceInternal) { - await this.popup.hidePopover(); - } + const isResourceInternal = this.isResourceInternal(link); + if (!isResourceInternal) { + await this.popup.hidePopover(); + } - const isInternal = link.href.indexOf("#"); - if (!isEpubInternal && !isResourceInternal) { - window.open(link.href, link.target ?? "_blank"); - event.preventDefault(); - event.stopPropagation(); - } else { - (event.target as HTMLAnchorElement).href = link.href; - if ((isSameOrigin || isEpubInternal) && isInternal !== -1) { - const link = event.target as HTMLLIElement; - if (link) { - const attribute = link.getAttribute("epub:type") === "noteref"; - if (attribute) { - await this.popup.handleFootnote(link, event); - } else if (isResourceInternal && !isEpubInternal) { - await this.popup.showPopover(link, event); - } else { + const isInternal = link.href.indexOf("#"); + if (!isEpubInternal && !isResourceInternal) { + window.open(link.href, link.target ?? "_blank"); + event.preventDefault(); + event.stopPropagation(); + } else { + (event.target as HTMLAnchorElement).href = link.href; + if ((isSameOrigin || isEpubInternal) && isInternal !== -1) { + const link = event.target as HTMLLIElement; + if (link) { + const attribute = link.getAttribute("epub:type") === "noteref"; + if (attribute) { + await this.popup.handleFootnote(link, event); + } else if (isResourceInternal && !isEpubInternal) { + await this.popup.showPopover(link, event); + } else { + this.onInternalLink(event); + } + } else { + this.onInternalLink(event); + } + } else if ((isSameOrigin || isEpubInternal) && isInternal === -1) { + // TODO needs some more refactoring when handling other types of links or elements + // link.click(); this.onInternalLink(event); } - } else { - this.onInternalLink(event); } - } else if ((isSameOrigin || isEpubInternal) && isInternal === -1) { - // TODO needs some more refactoring when handling other types of links or elements - // link.click(); - this.onInternalLink(event); + } else { + setTimeout(() => { + console.log("event.detail", event.detail); + if ( + !this.navigator.highlighter?.isSelectionMenuOpen && + event.detail === 1 + ) { + this.onClickThrough(event); + } + }, 100); } - } - } else { - if (!this.navigator.highlighter?.isSelectionMenuOpen) { - this.onClickThrough(event); - } + }, this.dblClickTimeSpan); + } + if (this.clicks === 2) { + // it is the second click in double-click event + clearTimeout(this.clickTimer); + this.clicks = 0; } }; }