0
/
leftypol_lainchan
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

compact-boardlist.js: initial commit

This commit is contained in:
czaks 2013-12-28 00:53:42 +01:00
parent 863b446a11
commit c8913f41a7
15 changed files with 122 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
inc/display.php
View File

@ -62,8 +62,11 @@ function createBoardlist($mod=false) {
$body = trim($body); $body = trim($body);
// Message compact-boardlist.js faster, so that page looks less ugly during loading
$top = "<script type='text/javascript'>if (typeof do_boardlist != 'undefined') do_boardlist();</script>";
return array( return array(
'top' => '<div class="boardlist">' . $body . '</div>', 'top' => '<div class="boardlist">' . $body . '</div>' . $top,
'bottom' => '<div class="boardlist bottom">' . $body . '</div>' 'bottom' => '<div class="boardlist bottom">' . $body . '</div>'
); );
} }

105
js/compact-boardlist.js Normal file
View File

@ -0,0 +1,105 @@
if (device_type == 'desktop') {
compact_boardlist = true;
var do_css = function() {
$('#compact-boardlist-css').remove();
$('<style type="text/css" id="compact-boardlist-css">\
.compact-boardlist {\
padding: 3px;\
padding-bottom: 0px;\
}\
.cb-item {\
display: inline-block;\
vertical-align: middle;\
}\
.cb-icon {\
padding-bottom: 1px;\
}\
.cb-fa {\
font-size: 21px;\
padding: 2px;\
padding-top: 0;\
}\
.cb-cat {\
padding: 5px 6px 8px 6px;\
}\
.cb-menuitem {\
display: table-row;\
}\
.cb-menuitem span {\
padding: 5px;\
display: table-cell;\
text-align: left;\
border-top: 1px solid rgba(0, 0, 0, 0.5);\
}\
.cb-menuitem span.cb-uri {\
text-align: right;\
padding-left: 0;\
}\
</style>').appendTo($("head"));
};
do_boardlist = function() {
do_css();
var categories = [];
var topbl = $('.boardlist:first');
topbl.find('>.sub').each(function() {
var cat = {name: $(this).data('description'), boards: []};
$(this).find('a').each(function() {
var board = {name: $(this).prop('title'), uri: $(this).html(), href: $(this).prop('href') }
cat.boards.push(board);
});
categories.push(cat);
});
topbl.addClass("compact-boardlist")
.html("");
for (var i in categories) {
var item = categories[i];
if (item.name.match(/^icon_/)) {
var icon = item.name.replace(/^icon_/, '')
$("<a class='cb-item cb-icon' href='"+categories[i].boards[0].href+"'><img src='/static/icons/"+icon+".png'></a>")
.appendTo(topbl)
}
else if (item.name.match(/^fa_/)) {
var icon = item.name.replace(/^fa_/, '')
$('<a class="cb-item cb-fa" href="'+categories[i].boards[0].href+'"><i class="icon-'+icon+' icon"></i></a>')
.appendTo(topbl)
}
else {
$("<a class='cb-item cb-cat' href='javascript:void(0)'>"+item.name+"</a>")
.appendTo(topbl)
.mouseenter(function() {
var list = $("<div class='boardlist top cb-menu'></div>")
.css("top", $(this).position().top + 13 + $(this).height())
.css("left", $(this).position().left)
.css("right", "auto")
.appendTo(this);
for (var j in this.item.boards) {
var board = this.item.boards[j];
var tag;
if (board.name) {
tag = $("<a href='"+board.href+"'><span>"+board.name+"</span><span class='cb-uri'>/"+board.uri+"/</span></a>")
}
else {
tag = $("<a href='"+board.href+"'><span>"+board.uri+"</span><span class='cb-uri'><i class='icon icon-globe'></i></span></a>")
}
tag
.addClass("cb-menuitem")
.appendTo(list)
}
})
.mouseleave(function() {
topbl.find(".cb-menu").remove();
})[0].item = item;
}
}
do_boardlist = undefined;
};
}

2
stylesheets/dark.css
View File

@ -171,7 +171,7 @@ table.modlog tr th {
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(30%, 30%, 30%, 0.65); background-color: rgba(30%, 30%, 30%, 0.65);
} }

2
stylesheets/dark_roach.css
View File

@ -426,7 +426,7 @@ table.mod.config-editor input[type="text"] {
z-index: 30; z-index: 30;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 1);
} }

2
stylesheets/futaba+vichan.css
View File

@ -99,6 +99,6 @@ div.boardlist.bottom {
.desktop-style div.boardlist:nth-child(1) { .desktop-style div.boardlist:nth-child(1) {
text-shadow: #fff 1px 1px 1px, #fff -1px -1px 1px; text-shadow: #fff 1px 1px 1px, #fff -1px -1px 1px;
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(90%, 90%, 90%, 0.55); background-color: rgba(90%, 90%, 90%, 0.55);
} }

2
stylesheets/futaba-light.css
View File

@ -93,6 +93,6 @@ table.modlog tr th {
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(90%, 90%, 90%, 0.55); background-color: rgba(90%, 90%, 90%, 0.55);
} }

2
stylesheets/futaba.css
View File

@ -81,6 +81,6 @@ table.modlog tr th {
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(90%, 90%, 90%, 0.55); background-color: rgba(90%, 90%, 90%, 0.55);
} }

2
stylesheets/jungle.css
View File

@ -131,6 +131,6 @@ color: #054500;
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(90%, 90%, 90%, 0.55); background-color: rgba(90%, 90%, 90%, 0.55);
} }

2
stylesheets/luna.css
View File

@ -438,7 +438,7 @@ table.mod.config-editor input[type="text"] {
width: 98%; width: 98%;
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: inherit; background-color: inherit;
} }

2
stylesheets/miku.css
View File

@ -92,6 +92,6 @@ div.boardlist {
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(70%, 95%, 100%, 0.45); background-color: rgba(70%, 95%, 100%, 0.45);
} }

2
stylesheets/roach.css
View File

@ -251,6 +251,6 @@ border-top: 1px solid #835B36 !important;
.desktop-style div.boardlist:nth-child(1) { .desktop-style div.boardlist:nth-child(1) {
background: none repeat scroll 0 0 #FFFFFF !important; background: none repeat scroll 0 0 #FFFFFF !important;
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background: none repeat scroll 0 0 #FFFFFF; background: none repeat scroll 0 0 #FFFFFF;
} }

2
stylesheets/style.css
View File

@ -431,7 +431,7 @@ table.mod.config-editor input[type="text"] {
margin-top: 0px; margin-top: 0px;
z-index: 30; z-index: 30;
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(90%, 90%, 90%, 0.6); background-color: rgba(90%, 90%, 90%, 0.6);
} }

2
stylesheets/terminal2.css
View File

@ -160,7 +160,7 @@ table.modlog tr th {
background-color: black; background-color: black;
border-bottom: #00FF00 1px dashed; border-bottom: #00FF00 1px dashed;
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: black; background-color: black;
} }

2
stylesheets/testorange.css
View File

@ -198,7 +198,7 @@ div.boardlist.bottom {
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(0%, 0%, 0%, 0.45); background-color: rgba(0%, 0%, 0%, 0.45);
} }

2
stylesheets/wasabi.css
View File

@ -397,6 +397,6 @@ div.blotter {
} }
.desktop-style div.boardlist:nth-child(1):hover { .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu {
background-color: rgba(100%, 100%, 30%, 0.35); background-color: rgba(100%, 100%, 30%, 0.35);
} }