From fc4be19665f29c917f4a9e18ca6916f7b6f55a6b Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 18 Apr 2018 20:40:45 +0200 Subject: [PATCH] Improve search tooltips --- mixins/Input.pixy | 4 ++-- scripts/Actions/Search.ts | 1 + scripts/AnimeNotifier.ts | 12 ++++++++---- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/mixins/Input.pixy b/mixins/Input.pixy index c405e5b8..e267b041 100644 --- a/mixins/Input.pixy +++ b/mixins/Input.pixy @@ -31,9 +31,9 @@ component InputNumberWithButtons(id string, value float64, label string, placeho label(for=id)= label + ":" .number-input-container input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change") - button.action(data-action="addNumber", data-trigger="click", data-id=id, data-add="1") + button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="1", aria-label="Increase by 1") RawIcon("plus") - button.action(data-action="addNumber", data-trigger="click", data-id=id, data-add="-1") + button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="-1", aria-label="Decrease by 1") RawIcon("minus") component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option) diff --git a/scripts/Actions/Search.ts b/scripts/Actions/Search.ts index 71fabc28..8aa93bae 100644 --- a/scripts/Actions/Search.ts +++ b/scripts/Actions/Search.ts @@ -175,4 +175,5 @@ export function showSearchResults(arn: AnimeNotifier, element: HTMLElement) { arn.app.ajaxify(element.getElementsByTagName("a")) arn.lazyLoad(findAllInside("lazy", element)) arn.mountMountables(findAllInside("mountable", element)) + arn.assignTooltipOffsets(findAllInside("tip", element)) } diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index d12ff1d3..693b2caa 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -158,8 +158,8 @@ export default class AnimeNotifier { Promise.resolve().then(() => this.assignActions()), Promise.resolve().then(() => this.updatePushUI()), Promise.resolve().then(() => this.dragAndDrop()), - Promise.resolve().then(() => this.assignTooltipOffsets()), Promise.resolve().then(() => this.colorStripes()), + Promise.resolve().then(() => this.assignTooltipOffsets()), Promise.resolve().then(() => this.countUp()) ]) @@ -237,10 +237,14 @@ export default class AnimeNotifier { } } - assignTooltipOffsets() { + assignTooltipOffsets(elements?: IterableIterator) { + if(!elements) { + elements = findAll("tip") + } + let contentRect = this.app.content.getBoundingClientRect() - for(let element of findAll("tip")) { + for(let element of elements) { Diff.mutations.queue(() => { let rect = element.getBoundingClientRect() let tipStyle = window.getComputedStyle(element, ":before") @@ -262,7 +266,7 @@ export default class AnimeNotifier { let tipChild = document.createElement("div") tipChild.classList.add("tip-offset-child") tipChild.setAttribute("aria-label", element.getAttribute("aria-label")) - tipChild.style.left = leftOffset + "px" + tipChild.style.left = Math.round(leftOffset) + "px" tipChild.style.width = rect.width + "px" tipChild.style.height = rect.height + "px" element.appendChild(tipChild)