Add: filter box

_includes/filter.html

@@ -0,0 +1,61 @@
+<script type="text/javascript">
+
+function run_filter(e){
+    var reg_string = this.querySelector(".input-box").value;
+    window.location.hash = encodeURIComponent('get-' + reg_string);
+    var regexp = new RegExp(reg_string, 'i');
+    var li_list = this.parentElement.querySelectorAll('li');
+    for(var i = 0; i < li_list.length; i++){
+        var temp_li = li_list[i];
+        var temp_text = temp_li.innerText;
+        if (regexp.test(temp_text)){
+            temp_li.classList.remove("li-hide");
+            if (temp_li.parentElement.lastElementChild === temp_li) {
+                var next_img = temp_li.parentElement.nextElementSibling.querySelector('img');
+                if (next_img){
+                    next_img.classList.remove("li-hide");
+                }
+            }
+
+        }else{
+            temp_li.classList.add("li-hide");
+            if (temp_li.parentElement.lastElementChild === temp_li) {
+                var next_img = temp_li.parentElement.nextElementSibling.querySelector('img');
+                if (next_img){
+                    next_img.classList.add("li-hide");
+                }
+            }
+        }
+    }
+    }
+
+function add_filter_func(){
+var sid = document.querySelectorAll(".filter-box");
+
+for(var i = 0; i<sid.length; i++){
+    sid[i].addEventListener('submit', function(e){
+    e.preventDefault();
+    });
+
+    sid[i].addEventListener('keyup', run_filter.bind(sid[i]));
+
+    sid[i].querySelector(".input-box").addEventListener('change', function(e){
+        _paq.push(['trackEvent', 'filter-li', this.parentElement.querySelector('.post-title').innerText, this.querySelector(".input-box").value]);
+        }.bind(sid[i])
+    );
+
+}
+
+}
+
+add_filter_func();
+
+var temp_url_hash = window.location.hash;
+var hash_regex = new RegExp("#get-");
+if(hash_regex.test(temp_url_hash)){
+    var temp_query = decodeURIComponent(temp_url_hash.replace('#get-', ''));
+    document.querySelector(".input-box").value = temp_query;
+    (run_filter.bind(document.body.querySelector('.post')))(document.body);
+    _paq.push(['trackEvent', 'filter-li', document.querySelector('.post-title').innerText, temp_query]);
+}
+</script>

_includes/head.html

@@ -82,7 +82,7 @@
         }
       }
 
-      if (localStorage.getItem("feature-like")){
+      if (localStorage.getItem("feature-like")  == 'true'){
 
         var links = document.querySelectorAll(".post li");
         for (var i = 0, linksLength = links.length; i < linksLength; i++) {

_includes/inf.html

@@ -36,6 +36,7 @@
       }.bind(tocdiv), 100);
 
       setTimeout(tocify_content, 100);
+      setTimeout(add_filter_func, 1000);
     },
     padding: 20
 });

_layouts/default.html

@@ -135,6 +135,7 @@ <h3 class="masthead-title">
 
   {% include inf.html %}
   {% include totop.html %}
-
+
+  {% include filter.html %}
   </body>
 </html>

_layouts/draft.html

@@ -5,6 +5,10 @@
 <article class="post">
   <h1 class="post-title">{{ page.title }}</h1>
 
+  <form class="filter-box">
+  <input name="query" placeholder="Hello and welcome to this new issue!" class="input-box">
+  </form>
+
   {{ content }}
 </article>
 <p><small id="page_view">&nbsp;</small></p>

_layouts/post.html

@@ -5,6 +5,10 @@
 <article id='posts-content' class="post">
   <h1 class="post-title">{{ page.title }}</h1>
   <time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_string }}</time>
+
+  <form class="filter-box">
+  <input name="query" placeholder="Hello and welcome to this new issue!" class="input-box">
+  </form>
   {{ content }}
   <p><small id="page_view">&nbsp;</small></p>
   <div class="pagination">

_posts/2017-01-16-2017-3.md

@@ -5,8 +5,6 @@ description: Weekly News in the R Community.
 ---
 
 
-Hello and welcome to this new issue!
-
 ### Highlight
 
 + [How Stack Overflow plans to survive the next DNS attack - Server Fault Blog](http://blog.serverfault.com/2017/01/09/surviving-the-next-dns-attack/) - Visualization with R

_posts/2017-01-23-2017-4.md

@@ -4,9 +4,6 @@ title: R Weekly 2017 Issue 4
 description: Weekly News in the R Community.
 ---
 
-
-Hello and welcome to this new issue!
-
 ### Highlight
 
 + [Statistical Thinking; a blog by Frank Harrell](http://www.fharrell.com/)

_posts/2017-01-30-2017-5.md

@@ -5,9 +5,6 @@ description: Weekly News in the R Community.
 ---
 
 
-Hello and welcome to this new issue!
-
-
 ### Highlight
 
 + [Data Driven Cheatsheets](https://www.r-statistics.com/2017/01/data-driven-cheatsheets/)

_posts/2017-02-06-2017-6.md

@@ -4,8 +4,6 @@ title: R Weekly 2017 Issue 6
 description: Weekly News in the R Community.
 ---
 
-Hello and welcome to this new issue!
-
 
 ### Highlight
 

_sass/_layout.scss

@@ -177,3 +177,18 @@ p {
     text-rendering: optimizelegibility !important;
   }
 }
+
+
+.input-box {
+  width: 70%;
+  font-size: 15px;
+  font-family: "Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;
+}
+
+.li-show {
+  display: auto;
+}
+
+.li-hide {
+  display: none;
+}

draft.md

@@ -7,8 +7,6 @@ image: https://rweekly.org/public/facebook.png
 
 Release Date: 2017-02-13
 
-Hello and welcome to this new issue!
-
 ### Highlight
 
 

index.html

@@ -13,7 +13,9 @@ <h1 class="post-title">
     </h1>
 
     <time datetime="{{ post.date | date_to_xmlschema }}" class="post-date">{{ post.date | date_to_string }}</time>
-
+    <form class="filter-box">
+    <input name="query" placeholder="Hello and welcome to this new issue!" class="input-box">
+    </form>
     {{ post.content }}
     <p><small id="page_view">&nbsp;</small></p>
   </article>