Make menu reposition on scroll instead of closing.
This commit is contained in:
parent
3818a35d61
commit
bc86f21c24
@ -65,31 +65,11 @@ class Menu
|
|||||||
$.addClass lastToggledButton, 'active'
|
$.addClass lastToggledButton, 'active'
|
||||||
|
|
||||||
$.on d, 'click CloseMenu', @close
|
$.on d, 'click CloseMenu', @close
|
||||||
$.on d, 'scroll', @close unless @type is 'gallery'
|
$.on d, 'scroll', @setPosition
|
||||||
|
$.on window, 'resize', @setPosition
|
||||||
$.add button, menu
|
$.add button, menu
|
||||||
|
|
||||||
# Position
|
@setPosition()
|
||||||
mRect = menu.getBoundingClientRect()
|
|
||||||
bRect = button.getBoundingClientRect()
|
|
||||||
bTop = window.scrollY + bRect.top
|
|
||||||
bLeft = window.scrollX + bRect.left
|
|
||||||
cHeight = doc.clientHeight
|
|
||||||
cWidth = doc.clientWidth
|
|
||||||
[top, bottom] = if bRect.top + bRect.height + mRect.height < cHeight
|
|
||||||
[bRect.bottom, null]
|
|
||||||
else
|
|
||||||
[null, cHeight - bRect.top]
|
|
||||||
[left, right] = if bRect.left + mRect.width < cWidth
|
|
||||||
[bRect.left, null]
|
|
||||||
else
|
|
||||||
[null, cWidth - bRect.right]
|
|
||||||
{style} = menu
|
|
||||||
style.top = "#{top}px"
|
|
||||||
style.right = "#{right}px"
|
|
||||||
style.bottom = "#{bottom}px"
|
|
||||||
style.left = "#{left}px"
|
|
||||||
if right
|
|
||||||
$.addClass menu, 'left'
|
|
||||||
|
|
||||||
entry = $ '.entry', menu
|
entry = $ '.entry', menu
|
||||||
# We've removed flexbox, so we don't use order anymore.
|
# We've removed flexbox, so we don't use order anymore.
|
||||||
@ -99,6 +79,24 @@ class Menu
|
|||||||
|
|
||||||
menu.focus()
|
menu.focus()
|
||||||
|
|
||||||
|
setPosition: =>
|
||||||
|
mRect = @menu.getBoundingClientRect()
|
||||||
|
bRect = lastToggledButton.getBoundingClientRect()
|
||||||
|
bTop = window.scrollY + bRect.top
|
||||||
|
bLeft = window.scrollX + bRect.left
|
||||||
|
cHeight = doc.clientHeight
|
||||||
|
cWidth = doc.clientWidth
|
||||||
|
[top, bottom] = if bRect.top + bRect.height + mRect.height < cHeight
|
||||||
|
["#{bRect.bottom}px", '']
|
||||||
|
else
|
||||||
|
['', "#{cHeight - bRect.top}px"]
|
||||||
|
[left, right] = if bRect.left + mRect.width < cWidth
|
||||||
|
["#{bRect.left}px", '']
|
||||||
|
else
|
||||||
|
['', "#{cWidth - bRect.right}px"]
|
||||||
|
$.extend @menu.style, {top, right, bottom, left}
|
||||||
|
@menu.classList.toggle 'left', right
|
||||||
|
|
||||||
insertEntry: (entry, parent, data) ->
|
insertEntry: (entry, parent, data) ->
|
||||||
if typeof entry.open is 'function'
|
if typeof entry.open is 'function'
|
||||||
try
|
try
|
||||||
@ -128,6 +126,8 @@ class Menu
|
|||||||
currentMenu = null
|
currentMenu = null
|
||||||
lastToggledButton = null
|
lastToggledButton = null
|
||||||
$.off d, 'click scroll CloseMenu', @close
|
$.off d, 'click scroll CloseMenu', @close
|
||||||
|
$.off d, 'scroll', @setPosition
|
||||||
|
$.off window, 'resize', @setPosition
|
||||||
|
|
||||||
findNextEntry: (entry, direction) ->
|
findNextEntry: (entry, direction) ->
|
||||||
entries = [entry.parentNode.children...]
|
entries = [entry.parentNode.children...]
|
||||||
|
|||||||
@ -95,8 +95,6 @@ ReplyPruning =
|
|||||||
|
|
||||||
# Record position from bottom of document
|
# Record position from bottom of document
|
||||||
oldPos = d.body.clientHeight - window.scrollY
|
oldPos = d.body.clientHeight - window.scrollY
|
||||||
# Prevent header menu from closing due to scroll
|
|
||||||
$.off d, 'scroll', Header.menu.close if Header.menu.menu
|
|
||||||
|
|
||||||
{posts} = ReplyPruning.thread
|
{posts} = ReplyPruning.thread
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user