new feature: local search

layout/_layout.swig

@@ -63,6 +63,7 @@
 
   {% include '_scripts/third-party/comments.swig' %}
   {% include '_scripts/third-party/tinysou.swig' %}
+  {% include '_scripts/third-party/localsearch.swig' %}
   {% include '_scripts/third-party/mathjax.swig' %}
   {% include '_scripts/third-party/baidushare.swig' %}
   {% include '_scripts/third-party/lean-analytics.swig' %}

layout/_partials/header.swig

@@ -27,7 +27,7 @@
 </div>
 
 <nav class="site-nav">
-  {% set hasSearch = theme.swiftype_key || theme.tinysou_Key %}
+  {% set hasSearch = theme.swiftype_key || theme.tinysou_Key || config.search %}
 
   {% if theme.menu %}
     <ul id="menu" class="menu {{ hasSearch and 'menu-left' }}">
@@ -44,10 +44,16 @@
       {% endfor %}
 
       {# Search icon for default scheme #}
+
+
       {% set use_search_icon = theme.scheme === 'Muse' or theme.scheme === 'Pisces' %}
-      {% if use_search_icon and theme.swiftype_key %}
+      {% if use_search_icon and hasSearch %}
         <li class="menu-item menu-item-search">
+        {% if theme.swiftype_key %}
           <a href="#" class="st-search-show-outputs">
+        {% elseif config.search %}
+          <a href="#" class="popup-trigger">
+        {% endif %}
             {% if theme.menu_icons.enable %}
               <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
             {% endif %}

layout/_partials/search.swig

@@ -2,4 +2,6 @@
   {% include 'search/swiftype.swig' %}
 {% elseif theme.tinysou_Key %}
   {% include 'search/tinysou.swig' %}
+{% elseif config.search.path %}
+  {% include 'search/localsearch.swig' %}
 {% endif %}

layout/_partials/search/localsearch.swig

@@ -0,0 +1,12 @@
+<form class="site-search-form" >
+  <span class="fa fa-search"></span>
+  <input type="text" id="search-input">
+  <div id="search-result"><ul class="search-result-list"><li><a href="//www.baidu.com/s?wd=XXX%20site%3A{{config.url}}" class="search-result">百度搜索 <i class="search-keyword">XXX</i></a></li><li><a href="//www.google.com/search?q=XXX%20site%3A{{config.url}}" class="search-result">谷歌搜索 <i class="search-keyword">XXX</i></a></li><li><a href="#" class="popup-trigger search-result">本地搜索</a></li></ul>
+  </div>
+</form>
+ <div class="popup">
+  <span class="fa fa-search"></span>
+  <input type="text" id="local-search-input">
+  <div id="local-search-result"></div>
+  <span class="popup-btn-close">close</span>
+ </div>

layout/_scripts/third-party/localsearch.swig

@@ -0,0 +1,158 @@
+{% if config.search.path %}
+  <script type="text/javascript">
+    // Popup Window;
+    var scrollTop = '';
+    var newHeight = '100';
+
+    // Search DB path;
+    var search_path = "{{ config.search.path }}";
+    if (search_path.length == 0) {
+       search_path = "search.xml";
+    }
+    var path = "{{ config.root }}" + search_path;
+
+    // monitor main search box;
+    $('#search-input').on('input', function() {
+    if ($(this).val().length <= 0) {
+      $('#search-result').hide();
+      return;
+    }
+    $('i.search-keyword').text($(this).val());
+    $('a.search-result[href!="#"]').each(function(){
+      this.href = this.href.replace(/\=(.*?)(?=%20site)/,'='+$('#search-input').val())
+    });
+    $('#search-result').show();
+    });
+
+    // search function;
+    var searchFunc = function(path, search_id, content_id) {
+    'use strict';
+    searchFunc = function(){};
+    $.ajax({
+        url: path,
+        dataType: "xml",
+        async: false,
+        success: function( xmlResponse ) {
+            // get the contents from search data
+            var datas = $( "entry", xmlResponse ).map(function() {
+                return {
+                    title: $( "title", this ).text(),
+                    content: $("content",this).text(),
+                    url: $( "url" , this).text()
+                };
+            }).get();
+            var $input = document.getElementById(search_id);
+            var $resultContent = document.getElementById(content_id);
+            $input.addEventListener('input', function(){
+                var str='<ul class=\"search-result-list\">';                
+                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
+                $resultContent.innerHTML = "";
+                if (this.value.trim().length <= 0) {
+                    return;
+                }
+                // perform local searching
+                datas.forEach(function(data) {
+                    var isMatch = true;
+                    var content_index = [];
+                    var data_title = data.title.trim().toLowerCase();
+                    var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
+                    var data_url = data.url;
+                    var index_title = -1;
+                    var index_content = -1;
+                    var first_occur = -1;
+                    // only match artiles with not empty titles and contents
+                    if(data_title != '' && data_content != '') {
+                        keywords.forEach(function(keyword, i) {
+                            index_title = data_title.indexOf(keyword);
+                            index_content = data_content.indexOf(keyword);
+                            if( index_title < 0 && index_content < 0 ){
+                                isMatch = false;
+                            } else {
+                                if (index_content < 0) {
+                                    index_content = 0;
+                                }
+                                if (i == 0) {
+                                    first_occur = index_content;
+                                }
+                            }
+                        });
+                    }
+                    // show search results
+                    if (isMatch) {
+                        str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
+                        var content = data.content.trim().replace(/<[^>]+>/g,"");
+                        if (first_occur >= 0) {
+                            // cut out 100 characters
+                            var start = first_occur - 20;
+                            var end = first_occur + 80;
+                            if(start < 0){
+                                start = 0;
+                            }
+                            if(start == 0){
+                                end = 100;
+                            }
+                            if(end > content.length){
+                                end = content.length;
+                            }
+                            var match_content = content.substr(start, end); 
+                            // highlight all keywords
+                            keywords.forEach(function(keyword){
+                                var regS = new RegExp(keyword, "gi");
+                                match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
+                            });
+
+                            str += "<p class=\"search-result\">" + match_content +"...</p>"
+                        }
+                        str += "</li>";
+                    }
+                });
+                str += "</ul>";
+                $resultContent.innerHTML = str;
+            });
+        }
+    });}
+
+    // handle and trigger popup window;
+    $(window).bind('scroll', function() {
+      scrollTop = $( window ).scrollTop();
+      newHeight = scrollTop + 100;
+    });
+    $('#search-result a').mousedown(function(e) {
+        window.location.href = this.href;
+      });
+    $('.popup-trigger').mousedown(function(e) {
+      searchFunc(path, 'local-search-input', 'local-search-result');
+      $('#local-search-input').val($('#search-input').val());
+      document.getElementById('local-search-input').dispatchEvent(new Event('input'));
+      e.stopPropagation();
+      if(jQuery(window).width() < 750) {
+        $('.site-search-form').after( $( ".popup" ) );
+        $('.popup').show().addClass('popup-mobile').css('top', 0);
+        $('html, body').animate({
+          scrollTop: $('.popup').offset().top
+        }, 500);
+      } else {
+        $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle();
+      };
+    });
+
+    $('#search-input').focus(function() {
+    if ($(this).val().length > 0) {
+      $('#search-result').show();
+      }
+    });
+    $('#search-input').blur(function() {
+      $('#search-result').hide();
+    });
+
+    $('html').click(function() {
+      $('.popup').hide();
+    });
+    $('.popup-btn-close').click(function(e){
+      $('.popup').hide();
+    });
+    $('.popup').click(function(e){
+      e.stopPropagation();
+    });
+  </script>
+{% endif %}

source/css/_common/components/third-party/localsearch.styl

@@ -0,0 +1,75 @@
+.search-result-list li{
+  list-style-type: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+ul.search-result-list {
+  padding-left: 0px;
+  margin: 0px 0px 0px 12px;
+}
+a.search-result-title {
+  font-weight: bold;
+}
+a.search-result {
+  border-bottom: transparent;
+}
+.search-keyword {
+  border-bottom: 1px dashed #4088b8;
+  font-weight: bold;
+}
+#search-result {
+  display: none;
+  position: absolute;
+  width: 158px;
+  border: 1px solid #ccc;
+  background: #fff;
+  cursor: default;
+  overflow: auto;
+  margin: 0px;
+  z-index: 999;
+}
+#local-search-result {
+  overflow: auto;
+  max-height: 3in;
+}
+.site-search-form {
+  background: $whitesmoke;
+}
+
+.popup {
+  display: none;
+  position: fixed;
+  top: 100px;
+  left: 50%;
+  width: 700px;
+  min-height: 300px;
+  margin-left: -350px;
+  padding: 0px 10px;
+  background: #fff;
+  color: #333;
+  z-index: 9999;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
+}
+#local-search-input {
+  width: 50%;
+}
+.popup-mobile {
+  padding: 0px 0px;
+  top: 0;
+  left: 0;
+  margin: 0px 0 0;
+  width: 100%;
+}
+.popup-btn-close {
+  position: absolute;
+  top: 5px;
+  right: 14px;
+  color: #4EBD79;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+}

source/css/_common/components/third-party/third-party.styl

@@ -1,2 +1,3 @@
 @import "duoshuo";
 @import "jiathis";
+@import "localsearch"

source/css/_common/scaffolding/helpers.styl

@@ -66,3 +66,22 @@
 }
 
 .use-motion .motion-element { opacity: 0; }
+
+.site-search {
+  input {
+    padding: 3px;
+    border: none;
+    text-indent: 14px;
+    border-radius: 0;
+    width: 140px;
+    outline: none;
+    border-bottom: 1px solid $grey-dark;
+    background: inherit;
+    opacity: 0.5;
+    &:focus { opacity: 1; }
+  };
+  .fa-search {
+    position: absolute;
+    top: 6px;
+  }
+}

source/css/_schemes/Mist/index.styl

@@ -23,27 +23,14 @@
 // Search
 // --------------------------------------------------
 .site-search {
+  position: relative;
   float: right;
   margin-top: 8px;
 
   +mobile() {
     float: none;
     padding: 0 10px;
   }
-
-  input {
-    padding: 3px;
-    border: none;
-    padding-left: 18px;
-    border-radius: 0;
-    width: 140px;
-    background: url($search-icon) no-repeat 0 50%;
-    background-size: 12px 12px;
-    outline: none;
-    border-bottom: 1px solid $grey-dark;
-    opacity: 0.5;
-    &:focus { opacity: 1; }
-  }
 }
 
 

source/css/_schemes/Muse/_search.styl

@@ -1,23 +1,5 @@
 // Search
 // --------------------------------------------------
-.site-search {
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 0;
-
-  +mobile() { position: static; }
-}
-
 .site-search form {
   display: none;
-
-  +mobile() {
-    background: none;
-  }
-}
-
-.use-motion .site-search form {
-  top: -50px;
-  +mobile() { top: 0 !important; }
-}
+}

source/css/_schemes/Pisces/_brand.styl

@@ -20,4 +20,4 @@
 
 .site-subtitle { margin: 0; }
 
-.site-search { display: none; }
+.site-search form { display: none; }