add filter buttons

Author: oxxostudio

Diff for: code.js

@@ -889,6 +889,26 @@ Code.init = function(toolbox) {
         function(name_) {return function() {Code.tabClick(name_);};}(name));
   }
 
+  var filterBtn = document.querySelectorAll('.filterBtn');
+  if(Code.getTags()[0]=='smart'){
+    filterBtn[0].className = 'filterBtn';
+    filterBtn[1].className = 'filterBtn selected';
+  }
+  filterBtn.forEach(function(item,index){
+    filterBtn[index].onclick = function(){
+      filterBtn.forEach(function(m,n){
+        filterBtn[n].className = 'filterBtn';
+      });
+      filterBtn[index].className = 'filterBtn selected';
+      var tagName = this.getAttribute('tag');
+      if(tagName){
+        window.history.pushState('tag', 'title', '/?tags=' + tagName);
+      }else{
+        window.history.pushState('tag', 'title', '/');
+      }
+    };
+  });
+
   onresize();
 };
 

Diff for: css/style.css

@@ -18,6 +18,45 @@ html[dir="RTL"] .farSide {
   text-align: left;
 }
 
+#mainTable{
+  margin-left:42px;
+  width:calc(100% - 42px);
+}
+
+#blockFilter{
+  width:42px;
+  background:#333;
+  position:fixed;
+  top:110px;
+  left:0;
+}
+
+#blockFilter a{
+  display:block;
+  box-sizing:border-box;
+  width:100%;
+  height:36px;
+  line-height:36px;
+  text-align:center;
+  color:#999;
+  border-right-width:0px;
+  border-right-style:solid;
+  border-right-color:#f43;
+  cursor:pointer;
+  transition:.2s;
+}
+
+#blockFilter a.selected{
+  color:#fff;
+  border-right-width:4px;
+  background:#494949;
+}
+
+#blockFilter a:hover{
+  color:#fff;
+  background:#494949;
+}
+
 
 /* Buttons */
 

Diff for: msg/en.js

@@ -8,7 +8,7 @@ var MSG = {
   exportImage: "Download Image",
   userMenuDashboard: "Dashboard",
   userMenuTutorials: "Tutorials",
-  userMenuWebSite: "Support",
+  userMenuWebSite: "Web Site",
   userMenuLogout: "Logout",
   blocks: "Blocks",
   linkTooltip: "Save and Link to Blocks",

Diff for: msg/zh-hans.js

@@ -8,7 +8,7 @@ var MSG = {
   exportImage: "下载图片",
   userMenuDashboard: "专案管理",
   userMenuTutorials: "教学",
-  userMenuWebSite: "资讯",
+  userMenuWebSite: "官方网站",
   userMenuLogout: "登出",
   blocks: "积木",
   linkTooltip: "储存并产生连结",

Diff for: msg/zh-hant.js

@@ -8,7 +8,7 @@ var MSG = {
   exportImage: "下載圖片",
   userMenuDashboard: "專案管理",
   userMenuTutorials: "教學",
-  userMenuWebSite: "資訊",
+  userMenuWebSite: "官網",
   userMenuLogout: "登出",
   blocks: "積木",
   linkTooltip: "儲存並產生連結",

Diff for: views/index.handlebars

@@ -14,7 +14,11 @@
     <a href="#close" title="Close" class="close">X</a>
   </div>
 </div>
-<table width="100%" height="100%" class="nav">
+<div id="blockFilter">
+  <a class="filterBtn selected">All</a>
+  <a class="filterBtn" tag="smart">S</a>
+</div>
+<table class="nav" id="mainTable" height="100%">
   <tr>
     <td colspan=2>
       <table width="100%">