web/notify.moe
Code Issues Pull Requests Activity

Improve search tooltips

Browse Source
This commit is contained in:
Eduard Urbach 2018-04-18 20:40:45 +02:00
parent 81d41a9077
commit fc4be19665
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mixins/Input.pixy
View File

@ -31,9 +31,9 @@ component InputNumberWithButtons(id string, value float64, label string, placeho
label(for=id)= label + ":" label(for=id)= label + ":"
.number-input-container .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") 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") 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") RawIcon("minus")
component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option) component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option)

1
scripts/Actions/Search.ts
View File

@ -175,4 +175,5 @@ export function showSearchResults(arn: AnimeNotifier, element: HTMLElement) {
arn.app.ajaxify(element.getElementsByTagName("a")) arn.app.ajaxify(element.getElementsByTagName("a"))
arn.lazyLoad(findAllInside("lazy", element)) arn.lazyLoad(findAllInside("lazy", element))
arn.mountMountables(findAllInside("mountable", element)) arn.mountMountables(findAllInside("mountable", element))
arn.assignTooltipOffsets(findAllInside("tip", element))
} }

12
scripts/AnimeNotifier.ts
View File

@ -158,8 +158,8 @@ export default class AnimeNotifier {
Promise.resolve().then(() => this.assignActions()), Promise.resolve().then(() => this.assignActions()),
Promise.resolve().then(() => this.updatePushUI()), Promise.resolve().then(() => this.updatePushUI()),
Promise.resolve().then(() => this.dragAndDrop()), Promise.resolve().then(() => this.dragAndDrop()),
Promise.resolve().then(() => this.assignTooltipOffsets()),
Promise.resolve().then(() => this.colorStripes()), Promise.resolve().then(() => this.colorStripes()),
Promise.resolve().then(() => this.assignTooltipOffsets()),
Promise.resolve().then(() => this.countUp()) Promise.resolve().then(() => this.countUp())
]) ])
@ -237,10 +237,14 @@ export default class AnimeNotifier {
} }
} }
assignTooltipOffsets() { assignTooltipOffsets(elements?: IterableIterator<HTMLElement>) {
if(!elements) {
elements = findAll("tip")
}
let contentRect = this.app.content.getBoundingClientRect() let contentRect = this.app.content.getBoundingClientRect()
for(let element of findAll("tip")) { for(let element of elements) {
Diff.mutations.queue(() => { Diff.mutations.queue(() => {
let rect = element.getBoundingClientRect() let rect = element.getBoundingClientRect()
let tipStyle = window.getComputedStyle(element, ":before") let tipStyle = window.getComputedStyle(element, ":before")
@ -262,7 +266,7 @@ export default class AnimeNotifier {
let tipChild = document.createElement("div") let tipChild = document.createElement("div")
tipChild.classList.add("tip-offset-child") tipChild.classList.add("tip-offset-child")
tipChild.setAttribute("aria-label", element.getAttribute("aria-label")) 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.width = rect.width + "px"
tipChild.style.height = rect.height + "px" tipChild.style.height = rect.height + "px"
element.appendChild(tipChild) element.appendChild(tipChild)