Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Menu fixes concerning flexbox ordering versus dom ordering.

Browse Source
This commit is contained in:
Nicolas Stepien 2013-02-13 20:11:51 +01:00
parent 2d677acad4
commit faee3e0d9e
3 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
4chan_x.user.js
View File

File diff suppressed because one or more lines are too long

3
css/style.css
View File

@ -493,7 +493,7 @@ a[href="javascript:;"] {
vertical-align: middle; vertical-align: middle;
} }
#menu { #menu {
border-width: 1px 1px 0; border-bottom: 0;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-flow: column nowrap; -webkit-flex-flow: column nowrap;
@ -526,6 +526,7 @@ a[href="javascript:;"] {
display: none; display: none;
} }
.submenu { .submenu {
border-bottom: 0;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-flow: column nowrap; -webkit-flex-flow: column nowrap;

20
lib/ui.coffee
View File

@ -52,7 +52,10 @@ UI = (->
for entry in @entries for entry in @entries
@insertEntry entry, menu, data @insertEntry entry, menu, data
@focus $ '.entry', menu entry = $ '.entry', menu
while prevEntry = @findNextEntry entry, -1
entry = prevEntry
@focus entry
$.on d, 'click', @close $.on d, 'click', @close
$.on d, 'CloseMenu', @close $.on d, 'CloseMenu', @close
$.add d.body, menu $.add d.body, menu
@ -103,6 +106,12 @@ UI = (->
$.off d, 'click', @close $.off d, 'click', @close
$.off d, 'CloseMenu', @close $.off d, 'CloseMenu', @close
findNextEntry: (entry, direction) ->
entries = Array::slice.call entry.parentNode.children
entries.sort (first, second) ->
+(first.style.order or first.style.webkitOrder) - +(second.style.order or second.style.webkitOrder)
entries[entries.indexOf(entry) + direction]
keybinds: (e) -> keybinds: (e) ->
entry = $ '.focused', currentMenu entry = $ '.focused', currentMenu
while subEntry = $ '.focused', entry while subEntry = $ '.focused', entry
@ -115,13 +124,16 @@ UI = (->
when 13, 32 # Enter, Space when 13, 32 # Enter, Space
entry.click() entry.click()
when 38 # Up when 38 # Up
if next = entry.previousElementSibling if next = @findNextEntry entry, -1
@focus next @focus next
when 40 # Down when 40 # Down
if next = entry.nextElementSibling if next = @findNextEntry entry, +1
@focus next @focus next
when 39 # Right when 39 # Right
if (submenu = $ '.submenu', entry) and next = submenu.firstElementChild if (submenu = $ '.submenu', entry)
next = submenu.firstElementChild
while nextPrev = @findNextEntry next, -1
next = nextPrev
@focus next @focus next
when 37 # Left when 37 # Left
if next = $.x 'parent::*[contains(@class,"submenu")]/parent::*', entry if next = $.x 'parent::*[contains(@class,"submenu")]/parent::*', entry