compact-boardlist.js: initial commit

15 files changed, 122 insertions, 14 deletions

diff --git a/inc/display.php b/inc/display.php
index 265fd5ef..13425c48 100644
--- a/inc/display.php
+++ b/inc/display.php
@@ -61,9 +61,12 @@ function createBoardlist($mod=false) {
 		$body = '[' . $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(
-		'top' => '<div class="boardlist">' . $body . '</div>',
+		'top' => '<div class="boardlist">' . $body . '</div>' . $top,
 		'bottom' => '<div class="boardlist bottom">' . $body . '</div>'
 	);
 }
diff --git a/js/compact-boardlist.js b/js/compact-boardlist.js
new file mode 100644
index 00000000..9baefa11
--- /dev/null
+++ b/js/compact-boardlist.js
@@ -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;
+  };
+}
diff --git a/stylesheets/dark.css b/stylesheets/dark.css
index 7980e452..b4af44d8 100644
--- a/stylesheets/dark.css
+++ b/stylesheets/dark.css
@@ -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);
 }
 
diff --git a/stylesheets/dark_roach.css b/stylesheets/dark_roach.css
index f05a89ae..08366dfc 100644
--- a/stylesheets/dark_roach.css
+++ b/stylesheets/dark_roach.css
@@ -426,7 +426,7 @@ table.mod.config-editor input[type="text"] {
   z-index: 30;
   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);
 }
 
diff --git a/stylesheets/futaba+vichan.css b/stylesheets/futaba+vichan.css
index adf9baef..5177f743 100644
--- a/stylesheets/futaba+vichan.css
+++ b/stylesheets/futaba+vichan.css
@@ -99,6 +99,6 @@ div.boardlist.bottom {
 .desktop-style div.boardlist:nth-child(1) {
 	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);
 }
diff --git a/stylesheets/futaba-light.css b/stylesheets/futaba-light.css
index 76a82f58..88982ea0 100644
--- a/stylesheets/futaba-light.css
+++ b/stylesheets/futaba-light.css
@@ -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);
 }
diff --git a/stylesheets/futaba.css b/stylesheets/futaba.css
index 2a30bc00..05823948 100644
--- a/stylesheets/futaba.css
+++ b/stylesheets/futaba.css
@@ -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);
 }
diff --git a/stylesheets/jungle.css b/stylesheets/jungle.css
index e690e79e..1765b3a9 100644
--- a/stylesheets/jungle.css
+++ b/stylesheets/jungle.css
@@ -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);
 }
diff --git a/stylesheets/luna.css b/stylesheets/luna.css
index 1c2fcdf9..7f6fc14e 100644
--- a/stylesheets/luna.css
+++ b/stylesheets/luna.css
@@ -438,7 +438,7 @@ table.mod.config-editor input[type="text"] {
 	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;
 }
 
diff --git a/stylesheets/miku.css b/stylesheets/miku.css
index 2f55b48c..84e67933 100644
--- a/stylesheets/miku.css
+++ b/stylesheets/miku.css
@@ -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);
 }
diff --git a/stylesheets/roach.css b/stylesheets/roach.css
index ab5ab6c1..d261406f 100644
--- a/stylesheets/roach.css
+++ b/stylesheets/roach.css
@@ -251,6 +251,6 @@ border-top: 1px solid #835B36 !important;
 .desktop-style div.boardlist:nth-child(1) {
 	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;
 }
\ No newline at end of file
diff --git a/stylesheets/style.css b/stylesheets/style.css
index b3f9aa60..202d6b17 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -431,7 +431,7 @@ table.mod.config-editor input[type="text"] {
   margin-top: 0px;
   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);
 }
 
diff --git a/stylesheets/terminal2.css b/stylesheets/terminal2.css
index f08d0b3a..f7463553 100644
--- a/stylesheets/terminal2.css
+++ b/stylesheets/terminal2.css
@@ -160,7 +160,7 @@ table.modlog tr th {
   background-color: black;
   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;
 }
 
diff --git a/stylesheets/testorange.css b/stylesheets/testorange.css
index c7250de4..d266152a 100644
--- a/stylesheets/testorange.css
+++ b/stylesheets/testorange.css
@@ -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);
 }
 
diff --git a/stylesheets/wasabi.css b/stylesheets/wasabi.css
index 3da974c3..3c24512d 100644
--- a/stylesheets/wasabi.css
+++ b/stylesheets/wasabi.css
@@ -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);
 }