jekyll-text-theme 2.0.2 → 2.1.0

data/_includes/scripts/archieve.js

@@ -22,32 +22,6 @@
     return queryObj;
   }
 
-  function memorize(f) {
-    var cache = {};
-    return function () {
-      var key = Array.prototype.join.call(arguments, ',');
-      if (key in cache) return cache[key];
-      else return cache[key] = f.apply(this, arguments);
-    };
-  }
-
-  function initData(json) {
-    var _data = JSON.parse(json), i, j, cur, _tags;
-    Object.keys(_data).forEach(function(year) {
-      for (i = 0; i < _data[year].length; i++) {
-        cur = _data[year][i], _tags = cur.tags;
-        cur.title = window.decodeUrl(cur.title);
-        cur.url = window.decodeUrl(cur.url);
-        if (_tags && _tags.length > 0) {
-          for (j = 0; j < _tags.length; j++) {
-            _tags[j] = window.decodeUrl(_tags[j]);
-          }
-        }
-      }
-    });
-    return _data;
-  }
-
   var setUrlQuery = (function() {
     var baseUrl =  window.location.href.split('?')[0];
     return function(query) {
@@ -59,81 +33,28 @@
     };
   })();
 
-  var data = initData('{%- include scripts/article-list.html -%}');
-
-  var searchByTag = memorize(function(tag) {
-    var i, j, cur, _tags, _tag, _data = {};
-    Object.keys(data).forEach(function(year) {
-      for (i = 0; i < data[year].length; i++) {
-        cur = data[year][i], _tags = cur.tags;
-        if (_tags && _tags.length > 0) {
-          for (j = 0; j < _tags.length; j++) {
-            _tag = _tags[j];
-            if (_tag === tag) {
-              if (!_data[year]) {
-                _data[year] = [];
-              }
-              _data[year].push(cur);
-              break;
-            }
-          }
-        }
-      }
-    });
-    return _data;
-  });
-
-  var searchByQuery = function(query) {
-    var i, cur, _title, _data = { _: [] };
-    Object.keys(data).forEach(function(year) {
-      for (i = 0; i < data[year].length; i++) {
-        cur = data[year][i], _title = cur.title;
-        if (_title.toLowerCase().indexOf(query.toLowerCase()) >= 0) {
-          _data._.push(cur);
-        }
-      }
-    });
-    return _data;
-  };
-
   window.Lazyload.js(SOURCES.jquery, function() {
-    var $root = $('.js-all');
-    var $searchBox = $('.js-search-box');
-    var $searchInput = $searchBox.children('input');
-    var $searchClear = $searchBox.children('.js-icon-clear');
     var $tags = $('.js-tags');
-    var $articleTags = $('.js-article-tag');
-    var $tagShowAll = $('.js-tag-show-all');
+    var $articleTags = $tags.find('button');
+    var $tagShowAll = $tags.find('.tag-button--all');
     var $result = $('.js-result');
+    var $sections = $result.find('section');
+    var sectionArticles = [];
     var $lastFocusButton = null;
+    var sectionTopArticleIndex = [];
+    var hasInit = false;
 
-    function addClass(dom, className) {
-      dom.hasClass(className) || dom.addClass(className);
-    }
-    function removeClass(dom, className) {
-      dom.hasClass(className) && dom.removeClass(className);
-    }
-
-    var renderHeading = memorize(function (year) {
-      return $('<h2 class="year">' + year + '</h2>');
+    $sections.each(function() {
+      sectionArticles.push($(this).find('.item'));
     });
-    var renderItem = memorize(function (key, title, date, url) {
-      return $('<li><span class="date">' + date + '</span><a class="link" href="' + url + '">' + title + '</a></li>');
-    });
-    function render(data) {
-      var $dom = $('<div></div>'), $section, $ul, i, cur;
-      Object.keys(data).sort(function(a, b) {
-        return b.localeCompare(a);
-      }).forEach(function(year) {
-        $section = $('<section></section>'), $ul = $('<ul></ul>');
-        (year === '_') || $section.append(renderHeading(year));
-        for (i = 0; i < data[year].length; i++) {
-          cur = data[year][i];
-          $ul.append(renderItem(cur.key, cur.title, cur.date, cur.url, cur.tags));
-        }
-        $dom.append($section.append($ul));
-      });
-      return $dom;
+
+    function init() {
+      var i, index = 0;
+      for (i = 0; i < $sections.length; i++) {
+        sectionTopArticleIndex.push(index);
+        index += $sections.eq(i).find('.item').length;
+      }
+      sectionTopArticleIndex.push(index);
     }
 
     function searchButtonsByTag(_tag/*raw tag*/) {
@@ -148,42 +69,49 @@
     }
     function buttonFocus(target) {
       if (target) {
-        addClass(target, 'focus');
-        $lastFocusButton && !$lastFocusButton.is(target) && removeClass($lastFocusButton, 'focus');
+        target.addClass('focus');
+        $lastFocusButton && !$lastFocusButton.is(target) && $lastFocusButton.removeClass('focus');
         $lastFocusButton = target;
       }
     }
 
-    function setIsSearch() {
-      addClass($root, 'search');
-    }
-    function setNotSearch() {
-      removeClass($root, 'search');
-    }
-    function setIsEmpty() {
-      removeClass($searchBox, 'not-empty');
-    }
-    function setNotEmpty() {
-      addClass($searchBox, 'not-empty');
-    }
-    function setSearchBoxVal(val) {
-      ($searchInput.val() === val) || $searchInput.val(val);
-    }
-    function clearSearchBox() {
-      setSearchBoxVal(''); queryInput('');
-    }
+    function tagSelect (tag/*raw tag*/, target) {
+      var result = {}, $articles;
+      var i, j, k, _tag;
+
+      for (i = 0; i < sectionArticles.length; i++) {
+        $articles = sectionArticles[i];
+        for (j = 0; j < $articles.length; j++) {
+          if (tag === '' || tag === undefined) {
+            result[i] || (result[i] = {});
+            result[i][j] = true;
+          } else {
+            var tags = $articles.eq(j).data('tags').split(',');
+            for (k = 0; k < tags.length; k++) {
+              if (tags[k] === tag) {
+                result[i] || (result[i] = {});
+                result[i][j] = true; break;
+              }
+            }
+          }
+        }
+      }
 
-    function showAll() {
-      setNotSearch(); setIsEmpty(); buttonFocus($tagShowAll); setUrlQuery();
-      $result.html(render(data));
-    }
-    function tagSelect(tag/*decode tag*/, target) {
-      var _tag;
-      if (tag === '' || tag === undefined) {
-        showAll();
-      } else {
-        $result.html(render(searchByTag(tag)));
+      for (i = 0; i < sectionArticles.length; i++) {
+        result[i] && $sections.eq(i).removeClass('d-none');
+        result[i] || $sections.eq(i).addClass('d-none');
+        for (j = 0; j < sectionArticles[i].length; j++) {
+          if (result[i] && result[i][j]) {
+            sectionArticles[i].eq(j).removeClass('d-none');
+          } else {
+            sectionArticles[i].eq(j).addClass('d-none');
+          }
+        }
       }
+
+      hasInit || ($result.removeClass('d-none'), hasInit = true);
+
+
       if (target) {
         buttonFocus(target);
         _tag = target.attr('data-encode');
@@ -192,47 +120,16 @@
         } else {
           setUrlQuery('?tag=' + _tag);
         }
-      }
-    }
-    function queryInput(query) {
-      if (query === '' || typeof query !== 'string') {
-        showAll();
       } else {
-        $result.html(render(searchByQuery(query))); setIsSearch(); setNotEmpty(); setUrlQuery('?q=' + query);
-
+        buttonFocus(searchButtonsByTag(tag));
       }
     }
 
-    (function() {
-      $articleTags.removeClass('inactive');
-      var query = queryString(), _tag = query.tag, _q = query.q;
-      if (_tag !== undefined) {
-        query.tag === undefined || (_tag = query.tag);
-        tagSelect(window.decodeUrl(_tag));
-        buttonFocus(searchButtonsByTag(_tag));
-      } else if (_q !== undefined) {
-        _q = window.decodeUrl(_q);
-        queryInput(_q); setSearchBoxVal(_q);
-      } else {
-        showAll();
-      }
-    })();
-
+    var query = queryString(), _tag = query.tag;
+    init(); tagSelect(_tag);
     $tags.on('click', 'button', function() {
-      tagSelect($(this).children('span').text(), $(this));
+      tagSelect($(this).data('encode'), $(this));
     });
 
-    $searchInput.on('input', window.throttle(function() {
-      queryInput($(this).val());
-    }, 400));
-    $searchInput.on('focus', function() {
-      addClass($(this), 'focus');
-    });
-    $searchInput.on('blur', function() {
-      removeClass($(this), 'focus');
-    });
-    $searchClear.on('click', function() {
-      clearSearchBox();
-    });
   });
 })();

data/_includes/scripts/aside/affix.js

@@ -20,5 +20,7 @@
         disabled: tocDisabled
       });
     }, 100));
+
+    window.pageAsideAffix = affix;
   });
 })();

data/_includes/scripts/lib/affix.js

@@ -15,14 +15,13 @@
       _options.disabled !== undefined && (disabled = _options.disabled);
       $scrollTarget = $(scrollTarget);
       $scroller = $(scroller);
-      isOverallScroller = window.isOverallScroller($scroller[0]);
+      isOverallScroller = window.isOverallScroller($scrollTarget[0]);
       $scroll = $(scroll);
-      calc(true);
     }
     function initData() {
       top();
       rootHeight = $root.outerHeight();
-      rootTop = $root.offset().top + (isOverallScroller ? 0 :  $scroller.scrollTop());
+      rootTop = $root.offset().top + (isOverallScroller ? 0 :  $scrollTarget.scrollTop());
       rootLeft = $root.offset().left;
     }
     function calc(needInitData) {
@@ -77,12 +76,12 @@
         }, 100);
         timeout = setTimeout(function() {
           clearInterval(interval);
-        }, 60000);
+        }, 45000);
         window.pageLoad.then(function() {
           setTimeout(function() {
             clearInterval(interval);
             clearTimeout(timeout);
-          }, 1500);
+          }, 3000);
         });
         $scrollTarget.on('scroll', function() {
           disabled || setState();
@@ -104,7 +103,10 @@
         init();
       }, 200));
       return {
-        setOptions: setOptions
+        setOptions: setOptions,
+        refresh: function() {
+          calc(true); setState();
+        }
       };
     }
     $.fn.affix = affix;

data/_includes/scripts/lib/toc.js

@@ -14,7 +14,6 @@
       $headings = $(container).find(selectors);
       $scrollTarget = $(scrollTarget);
       $scroller = $(scroller);
-      calc();
     }
     function calc() {
       headingsPos = [];
@@ -23,7 +22,7 @@
       });
     }
     function setState(element, disabled) {
-      var scrollTop = $scroller.scrollTop(), i;
+      var scrollTop = $scrollTarget.scrollTop(), i;
       if (disabled || !headingsPos || headingsPos.length < 1) { return; }
       if (element) {
         $activeCur = element;
@@ -71,12 +70,12 @@
         }, 100);
         timeout = setTimeout(function() {
           clearInterval(interval);
-        }, 60000);
+        }, 45000);
         window.pageLoad.then(function() {
           setTimeout(function() {
             clearInterval(interval);
             clearTimeout(timeout);
-          }, 1500);
+          }, 3000);
         });
         $scrollTarget.on('scroll', function() {
           disabled || setState(null, scrolling);
@@ -102,7 +101,6 @@
         setOptions: setOptions
       };
     }
-    toc.setOptions = setOptions;
     $.fn.toc = toc;
   });
 })();

data/_includes/scripts/search-data.js

@@ -0,0 +1,14 @@
+window.TEXT_SEARCH_DATA={
+  {%- for _collection in site.collections -%}
+    {%- unless forloop.first -%},{%- endunless -%}
+    '{{ _collection.label }}':[
+      {%- for _article in _collection.docs -%}
+      {%- unless forloop.first -%},{%- endunless -%}
+      {'title':'{{ _article.title | url_encode }}',
+      {%- include snippets/prepend-baseurl.html path=_article.url -%}
+      {%- assign _url = __return -%}
+      'url':'{{ _url | url_encode }}'}
+      {%- endfor -%}
+    ]
+  {%- endfor -%}
+};

data/_includes/scripts/search.js

@@ -0,0 +1,177 @@
+var SOURCES = window.TEXT_VARIABLES.sources;
+var PAHTS = window.TEXT_VARIABLES.paths;
+window.Lazyload.js([SOURCES.jquery, PAHTS.search_js], function() {
+  var searchData = window.TEXT_SEARCH_DATA ? initData(window.TEXT_SEARCH_DATA) : {};
+
+  function memorize(f) {
+    var cache = {};
+    return function () {
+      var key = Array.prototype.join.call(arguments, ',');
+      if (key in cache) return cache[key];
+      else return cache[key] = f.apply(this, arguments);
+    };
+  }
+
+  function initData(data) {
+    var _data = [], i, j, key, keys, cur;
+    keys = Object.keys(data);
+    for (i = 0; i < keys.length; i++) {
+      key = keys[i], _data[key] = [];
+      for (j = 0; j < data[key].length; j++) {
+        cur = data[key][j];
+        cur.title = window.decodeUrl(cur.title);
+        cur.url = window.decodeUrl(cur.url);
+        _data[key].push(cur);
+      }
+    }
+    return _data;
+  }
+
+  /// search
+  function searchByQuery(query) {
+    var i, j, key, keys, cur, _title, result = {};
+    keys = Object.keys(searchData);
+    for (i = 0; i < keys.length; i++) {
+      key = keys[i];
+      for (j = 0; j < searchData[key].length; j++) {
+        cur = searchData[key][j], _title = cur.title;
+        if ((result[key] === undefined || result[key] && result[key].length < 4 )
+          && _title.toLowerCase().indexOf(query.toLowerCase()) >= 0) {
+          if (result[key] === undefined) {
+            result[key] = [];
+          }
+          result[key].push(cur);
+        }
+      }
+    }
+    return result;
+  }
+
+  var renderHeader = memorize(function(header) {
+    return $('<p class="search-result__header">' + header + '</p>');
+  });
+
+  var renderItem = function(index, title, url) {
+    return $('<li class="search-result__item" data-index="' + index + '"><a class="button" href="' + url + '">' + title + '</a></li>');
+  };
+
+  function render(data) {
+    if (!data) {
+      return null;
+    }
+    var $root = $('<ul></ul>'), i, j, key, keys, cur, itemIndex = 0;
+    keys = Object.keys(data);
+    for (i = 0; i < keys.length; i++) {
+      key = keys[i];
+      $root.append(renderHeader(key));
+      for (j = 0; j < data[key].length; j++) {
+        cur = data[key][j];
+        $root.append(renderItem(itemIndex++, cur.title, cur.url));
+      }
+    }
+    return $root;
+  }
+
+  // search box
+  var $searchBox = $('.js-search-box');
+  var $searchInput = $searchBox.children('input');
+  var $searchClear = $searchBox.children('.js-icon-clear');
+  var $result = $('.js-search-result'), $resultItems;
+  var lastActiveIndex, activeIndex;
+
+  function searchBoxEmpty() {
+    $searchBox.removeClass('not-empty'); $result.html(null);
+    $resultItems = $('.search-result__item'); activeIndex = 0;
+  }
+
+  $searchInput.on('input', window.throttle(function() {
+    var val = $(this).val();
+    if (val === '' || typeof val !== 'string') {
+      searchBoxEmpty();
+    } else {
+      $searchBox.addClass('not-empty'); $result.html(render(searchByQuery(val)));
+      $resultItems = $('.search-result__item'); activeIndex = 0;
+      $resultItems.eq(0).addClass('active');
+    }
+  }, 400));
+  $searchInput.on('focus', function() {
+    $(this).addClass('focus');
+  });
+  $searchInput.on('blur', function() {
+    $(this).removeClass('focus');
+  });
+  $searchClear.on('click', function() {
+    $searchInput.val(''); searchBoxEmpty();
+  });
+
+  // search panel
+  var $pageRoot = $('.js-page-root');
+  var $searchToggle = $('.js-search-toggle');
+  var showSearch = false;
+
+  function closeSearchPanel() {
+    $pageRoot.removeClass('show-search-panel');
+    $searchInput[0].blur();
+    setTimeout(function() {
+      $searchInput.val(''); searchBoxEmpty();
+      window.pageAsideAffix && window.pageAsideAffix.refresh();
+    }, 400);
+  }
+  function openSearchPanel() {
+    $pageRoot.addClass('show-search-panel');
+    $searchInput[0].focus();
+  }
+
+  // Char Code: 13  Enter, 27  ESC, 37  ⬅, 38  ⬆, 39  ➡, 40  ⬇, 83  S, 191 /
+  function isFormElement(e) {
+    var tagName = e.target.tagName || e.srcElement.tagName;
+    return tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA';
+  }
+  function charCodeFilter(e) {
+    return e.target === $searchInput[0] && (e.which === 13 || e.which === 27 || e.which === 38 || e.which === 40);
+  }
+
+  function updateResultItems() {
+    lastActiveIndex >= 0 && $resultItems.eq(lastActiveIndex).removeClass('active');
+    activeIndex >= 0 && $resultItems.eq(activeIndex).addClass('active');
+  }
+
+  function moveActiveIndex(direction) {
+    var itemsCount = $resultItems ? $resultItems.length : 0;
+    if (itemsCount > 1) {
+      lastActiveIndex = activeIndex;
+      if (direction === 'up') {
+        activeIndex = (activeIndex - 1 + itemsCount) % itemsCount;
+      } else if (direction === 'down') {
+        activeIndex = (activeIndex + 1 + itemsCount) % itemsCount;
+      }
+      updateResultItems();
+    }
+  }
+
+  $(document).on('keyup', function(e) {
+    if (!isFormElement(e) || charCodeFilter(e)) {
+      if (e.which === 83 || e.which === 191) {
+        showSearch || (showSearch = true, openSearchPanel());
+      } else if (e.which ===  27) {
+        showSearch && (showSearch = false, closeSearchPanel());
+      } else if (e.which === 38) {
+        showSearch && moveActiveIndex('up');
+      } else if (e.which === 40) {
+        showSearch && moveActiveIndex('down');
+      } else if (e.which === 13) {
+        showSearch && $resultItems && activeIndex >= 0 && $resultItems.eq(activeIndex).children('a')[0].click();
+      }
+    }
+  });
+
+  $result.on('mouseover', '.search-result__item > a', function() {
+    var itemIndex = $(this).parent().data('index');
+    itemIndex >= 0 && (lastActiveIndex = activeIndex, activeIndex = itemIndex, updateResultItems());
+  });
+
+  $searchToggle.on('click', function() {
+    showSearch = !showSearch;
+    showSearch ? openSearchPanel() : closeSearchPanel();
+  });
+});