Commit 63867435 authored by Tae Hoon's avatar Tae Hoon

update checkHoverInlineReply logic by comparing boundingClientRect

parent 342be7ae
import { debounce } from 'lodash'
// NOTE: We use the hard-coded boundingClientRect obj of the button at the moment
// since the button moves vertically and it makes difficult to determine the boundingClientRect
const buttonRect = {
bottom: -21, // Can get the actual bottom value by adding window.innerHeight
right: -21, // Can get the actual right value by adding window.innerWidth
height: 70,
width: 70
}
const FloatingPostButton = {
data () {
return {
......@@ -73,8 +82,20 @@ const FloatingPostButton = {
}
},
checkHoverInlineReply () {
const elem = document.elementFromPoint(window.innerWidth / 2, window.innerHeight - 50)
this.hoverInlineReply = !!(elem && elem.closest('.post-status-form.reply-body'))
const formElems = document.querySelectorAll('.post-status-form.reply-body')
for (let i = 0; i < formElems.length; i++) {
const rect = formElems.item(i).getBoundingClientRect()
if (
rect.bottom > window.innerHeight + buttonRect.bottom - buttonRect.height &&
rect.right > window.innerWidth + buttonRect.right - buttonRect.width &&
rect.bottom - rect.height < window.innerHeight + buttonRect.bottom &&
rect.right - rect.width < window.innerWidth + buttonRect.right
) {
this.hoverInlineReply = true
return
}
}
this.hoverInlineReply = false
},
handleScrollStart: debounce(function () {
if (window.scrollY > this.oldScrollPos) {
......
<template>
<button
ref="button"
class="floating-post-button"
:class="{ 'hidden': isHidden }"
@click="openPostForm"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment