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

Add an arrow indicating submenus. $.rm .subMenu on open().

Browse Source
This commit is contained in:
Nicolas Stepien 2012-07-04 18:43:23 +02:00
parent 3c3ed30709
commit 4fc58ad053
2 changed files with 55 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
4chan_x.user.js
View File

@ -752,11 +752,12 @@
}, },
menuInit: function() { menuInit: function() {
var div, entry, type, _i, _len, _ref; var div, entry, type, _i, _len, _ref;
div = $.el('div'); div = $.el('div', {
textContent: 'Filter'
});
entry = { entry = {
el: div, el: div,
open: function() { open: function() {
div.textContent = 'Filter';
return true; return true;
}, },
children: [] children: []
@ -1227,6 +1228,9 @@
if (!children) { if (!children) {
return; return;
} }
if (subMenu = $('.subMenu', entry.el)) {
$.rm(subMenu);
}
subMenu = $.el('div', { subMenu = $.el('div', {
className: 'reply dialog subMenu' className: 'reply dialog subMenu'
}); });
@ -1321,16 +1325,19 @@
addEntry: function(entry) { addEntry: function(entry) {
var funk; var funk;
funk = function(entry) { funk = function(entry) {
var child, children, el, _i, _len, _ref; var child, children, el, _i, _len;
el = entry.el, children = entry.children; el = entry.el, children = entry.children;
$.addClass(el, 'entry'); $.addClass(el, 'entry');
$.on(el, 'focus mouseover', function(e) { $.on(el, 'focus mouseover', function(e) {
e.stopPropagation(); e.stopPropagation();
return Menu.focus(this); return Menu.focus(this);
}); });
_ref = children || []; if (!children) {
for (_i = 0, _len = _ref.length; _i < _len; _i++) { return;
child = _ref[_i]; }
$.addClass(el, 'hasSubMenu');
for (_i = 0, _len = children.length; _i < _len; _i++) {
child = children[_i];
funk(child); funk(child);
} }
}; };
@ -5112,9 +5119,9 @@ a[href="javascript:;"] {\
display: inline-block;\ display: inline-block;\
}\ }\
.menu_button > span {\ .menu_button > span {\
border-top: .5em solid;\ border-top: .5em solid;\
border-right: .3em solid transparent;\ border-right: .3em solid transparent;\
border-left: .3em solid transparent;\ border-left: .3em solid transparent;\
display: inline-block;\ display: inline-block;\
margin: 2px;\ margin: 2px;\
vertical-align: middle;\ vertical-align: middle;\
@ -5139,7 +5146,20 @@ a[href="javascript:;"] {\
.focused.entry {\ .focused.entry {\
background: rgba(255, 255, 255, .33);\ background: rgba(255, 255, 255, .33);\
}\ }\
.entry:not(.focused) > .subMenu {\ .entry.hasSubMenu {\
padding-right: 1.5em;\
}\
.hasSubMenu::after {\
content: "";\
border-left: .5em solid;\
border-top: .3em solid transparent;\
border-bottom: .3em solid transparent;\
display: inline-block;\
margin: .3em;\
position: absolute;\
right: 3px;\
}\
.hasSubMenu:not(.focused) > .subMenu {\
display: none;\ display: none;\
}\ }\
.subMenu {\ .subMenu {\

36
script.coffee
View File

@ -592,15 +592,12 @@ Filter =
false false
menuInit: -> menuInit: ->
div = $.el 'div' div = $.el 'div',
textContent: 'Filter'
entry = entry =
el: div el: div
open: -> open: -> true
# Reset the container's content,
# don't keep irrelevant entries.
div.textContent = 'Filter'
true
children: [] children: []
for type in [ for type in [
@ -988,7 +985,11 @@ Menu =
{children} = entry {children} = entry
return unless entry.open post return unless entry.open post
$.add parent, entry.el $.add parent, entry.el
return unless children return unless children
if subMenu = $ '.subMenu', entry.el
# Reset sub menu, remove irrelevant entries.
$.rm subMenu
subMenu = $.el 'div', subMenu = $.el 'div',
className: 'reply dialog subMenu' className: 'reply dialog subMenu'
$.add entry.el, subMenu $.add entry.el, subMenu
@ -1071,7 +1072,9 @@ Menu =
$.on el, 'focus mouseover', (e) -> $.on el, 'focus mouseover', (e) ->
e.stopPropagation() e.stopPropagation()
Menu.focus @ Menu.focus @
for child in children or [] return unless children
$.addClass el, 'hasSubMenu'
for child in children
funk child funk child
return return
funk entry funk entry
@ -4021,9 +4024,9 @@ a[href="javascript:;"] {
display: inline-block; display: inline-block;
} }
.menu_button > span { .menu_button > span {
border-top: .5em solid; border-top: .5em solid;
border-right: .3em solid transparent; border-right: .3em solid transparent;
border-left: .3em solid transparent; border-left: .3em solid transparent;
display: inline-block; display: inline-block;
margin: 2px; margin: 2px;
vertical-align: middle; vertical-align: middle;
@ -4048,7 +4051,20 @@ a[href="javascript:;"] {
.focused.entry { .focused.entry {
background: rgba(255, 255, 255, .33); background: rgba(255, 255, 255, .33);
} }
.entry:not(.focused) > .subMenu { .entry.hasSubMenu {
padding-right: 1.5em;
}
.hasSubMenu::after {
content: "";
border-left: .5em solid;
border-top: .3em solid transparent;
border-bottom: .3em solid transparent;
display: inline-block;
margin: .3em;
position: absolute;
right: 3px;
}
.hasSubMenu:not(.focused) > .subMenu {
display: none; display: none;
} }
.subMenu { .subMenu {