jekyll-text-theme 2.2.3 → 2.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d9461f40245b05bcb682f05f1169e055c189bfb8
-  data.tar.gz: 45b6326fe6248389591323ca8ee0c9291b65f96c
+  metadata.gz: c8f1760199555ebd8714d3c0646fba732b0a3855
+  data.tar.gz: 40e51a18d2e6cfe4c4cd1047ea75daa583b8fde3
 SHA512:
-  metadata.gz: 1e67d61e7806f62de0d53de3c22eb26fa0007ad0d6f12fc1e7e1aa24a9017e7ba80fa74e2fe419674d2b4c357a58b454fb65f5057b4d5d5e26ff18ccce149c53
-  data.tar.gz: 29ae740535d3211c676ffdfdd692f9c942164833d57b26363f3e2c97c57cca24b0b2c6c2f969d5efb8888ed9c0ec873b4662d39dccb038c06cecfad10d329fa3
+  metadata.gz: 130c88eb50c06c8522745541958e79916897eb1bfdd9f1bebb579b89717b7c6ab3bd05f763ad3bd3eb4e6ae42173fbeb337e00d251a45e7348a4eeaf4f333d5c
+  data.tar.gz: 6febc77d3433bb1d8b808748a5e39f5408f49c67433cda0ed95bcaa13f4bdb70608ac8d1c1b63bded3c7ec37432e9e0279cb3f1da6b1bbecdd9d70d2de23b85f

data/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 2.2.4 (2018-12-10)
+
+### Enhancements
+
+- Swiper component Enhancement: support mouse move
+- Add lightbox (modal image gallery)
+- Add Valine comment system (@Lloyar)
+
+### Bug Fixes
+
+- Fix some spelling errors in documents (@Krinkle)
+
 ## 2.2.3 (2018-11-11)
 
 ### Enhancements
@@ -81,7 +93,7 @@
 
 ## 2.0.0 (2018-07-01)
 
-Breaking changes, please check [Update form 1.x to 2.x](https://tianqi.name/jekyll-TeXt-theme/docs/en/update-form-1-to-2) for details
+Breaking changes, please check [Update from 1.x to 2.x](https://tianqi.name/jekyll-TeXt-theme/docs/en/update-from-1-to-2) for details
 
 ### Enhancements
 

data/README.md

@@ -26,7 +26,7 @@ TeXt is a super customizable Jekyll theme for personal site, team site, blog, pr
 - Extensions (audios, videos, slides, demos)
 - Markdown enhancements ([MathJax](https://www.mathjax.org/), [mermaid](https://mermaidjs.github.io/), [chartjs](http://www.chartjs.org/))
 - Sharing ([AddToAny](https://www.addtoany.com/), [AddThis](https://www.addthis.com/))
-- Comments ([Disqus](https://disqus.com/), [Gitalk](https://gitalk.github.io/))
+- Comments ([Disqus](https://disqus.com/), [Gitalk](https://gitalk.github.io/), [Valine](https://valine.js.org/en/))
 - Pageview ([LeanCloud](https://leancloud.cn/))
 - Analytics ([Google Analytics](https://analytics.google.com/analytics/web/))
 - RSS ([jekyll-feed](https://github.com/jekyll/jekyll-feed))
@@ -56,7 +56,7 @@ TeXt use [Tomorrow](https://github.com/chriskempson/tomorrow-theme) as the highl
 ### Start
 
 - [Quick Start](https://tianqi.name/jekyll-TeXt-theme/docs/en/quick-start)
-- [Update form 1.x to 2.x](https://tianqi.name/jekyll-TeXt-theme/docs/en/update-form-1-to-2)
+- [Update from 1.x to 2.x](https://tianqi.name/jekyll-TeXt-theme/docs/en/update-from-1-to-2)
 
 ### Customization
 

data/_data/variables.yml

@@ -46,6 +46,7 @@ sources:
     gitalk:
       js: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.js'
       css: 'https://cdn.bootcss.com/gitalk/1.2.2/gitalk.min.css'
+    valine: 'https://unpkg.com/valine/dist/Valine.min.js' # bootcdn not available
     mathjax: 'https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'
     mermaid: 'https://cdn.bootcss.com/mermaid/8.0.0-rc.8/mermaid.min.js'
   unpkg:
@@ -56,5 +57,6 @@ sources:
     gitalk:
       js: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.min.js'
       css: 'https://unpkg.com/gitalk@1.2.2/dist/gitalk.css'
+    valine: 'https//unpkg.com/valine/dist/Valine.min.js'
     mathjax: 'https://unpkg.com/mathjax@2.7.4/unpacked/MathJax.js?config=TeX-MML-AM_CHTML'
     mermaid: 'https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js'

data/_includes/comments-providers/valine.html

@@ -0,0 +1,33 @@
+{%- include snippets/get-sources.html -%}
+{%- assign _sources = __return -%}
+
+{%- assign _VALINE_APP_ID = site.comments.valine.app_id -%}
+{%- assign _VALINE_APP_KEY = site.comments.valine.app_key -%}
+{%- assign _VALINE_PLACEHOLDER = site.comments.valine.placeholder -%}
+
+
+{%- if page.key and
+  _VALINE_APP_ID and
+  _VALINE_APP_KEY -%}
+
+<div id="vcomments"></div>
+<script>
+  window.Lazyload.js(['{{ _sources.leancloud_js_sdk}}', '{{ _sources.valine }}'], function() {
+    var _config = {
+      el: '#vcomments',
+      appId:  '{{ _VALINE_APP_ID }}',
+      appKey: '{{ _VALINE_APP_KEY }}',
+      verify: true,
+    };
+    {%- if _VALINE_PLACEHOLDER -%}
+      _config.placeholder = '{{ _VALINE_PLACEHOLDER }}';
+    {%- endif -%}
+    {%- assign _page_lang_slice =  page.lang | slice: 0, 2 -%}
+    {%- if _page_lang_slice != 'zh'  -%}
+      _config.lang = 'en';
+    {%- endif -%}
+    new Valine(_config);
+  });
+</script>
+
+{%- endif -%}

data/_includes/comments.html

@@ -3,6 +3,8 @@
     {%- include comments-providers/disqus.html -%}
   {%- elsif site.comments.provider == 'gitalk' -%}
     {%- include comments-providers/gitalk.html -%}
+  {%- elsif site.comments.provider == 'valine' -%}
+    {%- include comments-providers/valine.html -%}
   {%- elsif site.comments.provider == 'custom' -%}
     {%- include comments-providers/custom.html -%}
   {%- endif -%}

data/_includes/scripts/components/lightbox.js

@@ -0,0 +1,49 @@
+{%- include scripts/utils/imagesLoad.js -%}
+(function () {
+  var SOURCES = window.TEXT_VARIABLES.sources;
+  window.Lazyload.js(SOURCES.jquery, function() {
+    var $pageGalleryModal = $('.js-page-gallery-modal');
+    var $images = $('.page__content').find('img:not(.lightbox-ignore)');
+    window.imagesLoad($images).then(function() {
+      /* global Gallery */
+      var pageGalleryModal = $pageGalleryModal.modal({ onChange: handleModalChange });
+      var gallery = null;
+      var modalVisible = false;
+      var i, items = [], image, item;
+      if($images && $images.length > 0) {
+        for (i = 0; i < $images.length; i++) {
+          image = $images.eq(i);
+          if (image.get(0).naturalWidth > 800) {
+            items.push({ src: image.attr('src'), w: image.get(0).naturalWidth, h: image.get(0).naturalHeight, $el: image});
+          }
+        }
+      }
+
+      if(items.length > 0) {
+        gallery = new Gallery('.gallery', items);
+        gallery.setOptions({ disabled: !modalVisible });
+        gallery.init();
+        for (i = 0; i < items.length; i++) {
+          item = items[i];
+          item.$el && (item.$el.addClass('popup-image'), item.$el.on('click', (function() {
+            var index = i;
+            return function() {
+              pageGalleryModal.show();
+              gallery.setOptions({ initialSlide: index });
+              gallery.refresh(true, { animation: false });
+            };
+          })()));
+        }
+      }
+
+      function handleModalChange(visible) {
+        modalVisible = visible;
+        gallery && gallery.setOptions({ disabled: !modalVisible });
+      }
+
+      $pageGalleryModal.on('click', function() {
+        pageGalleryModal.hide();
+      });
+    });
+  });
+})();

data/_includes/scripts/components/search/search.js

@@ -56,9 +56,7 @@ window.Lazyload.js([SOURCES.jquery, PAHTS.search_js], function() {
   };
 
   function render(data) {
-    if (!data) {
-      return null;
-    }
+    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++) {
@@ -105,38 +103,29 @@ window.Lazyload.js([SOURCES.jquery, PAHTS.search_js], function() {
   });
 
   // search panel
-  var $pageRoot = $('.js-page-root');
-  var $pageMain = $('.js-page-main');
+  var $searchModal = $('.js-page-search-modal');
   var $searchToggle = $('.js-search-toggle');
-  var showSearch = false;
-  var scrollTop;
-
-  function openSearchPanel() {
-    scrollTop = $(window).scrollTop() || $pageMain.scrollTop();
-    $pageRoot.addClass('show-search-panel');
-    $pageMain.scrollTop(scrollTop);
-    $searchInput[0].focus();
-  }
+  var modalVisible = false;
 
-  function closeSearchPanel() {
-    $pageRoot.removeClass('show-search-panel');
-    $(window).scrollTop(scrollTop);
-    $searchInput[0].blur();
-    setTimeout(function() {
-      $searchInput.val(''); searchBoxEmpty();
-      window.pageAsideAffix && window.pageAsideAffix.refresh();
-    }, 400);
-  }
+  var searchModal = $searchModal.modal({ onChange: handleModalChange });
 
-  // 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 handleModalChange(visible) {
+    modalVisible = visible;
+    if (visible) {
+      $searchInput[0].focus();
+    } else {
+      $searchInput[0].blur();
+      setTimeout(function() {
+        $searchInput.val(''); searchBoxEmpty();
+        window.pageAsideAffix && window.pageAsideAffix.refresh();
+      }, 400);
+    }
   }
 
+  $searchToggle.on('click', function() {
+    modalVisible ? searchModal.hide() : searchModal.show();
+  });
+
   function updateResultItems() {
     lastActiveIndex >= 0 && $resultItems.eq(lastActiveIndex).removeClass('active');
     activeIndex >= 0 && $resultItems.eq(activeIndex).addClass('active');
@@ -155,18 +144,19 @@ window.Lazyload.js([SOURCES.jquery, PAHTS.search_js], function() {
     }
   }
 
-  $(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');
+  // Char Code: 13  Enter, 37  ⬅, 38  ⬆, 39  ➡, 40  ⬇, 83  S, 191 /
+  $(window).on('keyup', function(e) {
+    if (modalVisible) {
+      if (e.which === 38) {
+        modalVisible && moveActiveIndex('up');
       } else if (e.which === 40) {
-        showSearch && moveActiveIndex('down');
+        modalVisible && moveActiveIndex('down');
       } else if (e.which === 13) {
-        showSearch && $resultItems && activeIndex >= 0 && $resultItems.eq(activeIndex).children('a')[0].click();
+        modalVisible && $resultItems && activeIndex >= 0 && $resultItems.eq(activeIndex).children('a')[0].click();
+      }
+    } else {
+      if (!window.isFormElement(e.target || e.srcElement) && (e.which === 83 || e.which === 191)) {
+        modalVisible || searchModal.show();
       }
     }
   });
@@ -175,9 +165,4 @@ window.Lazyload.js([SOURCES.jquery, PAHTS.search_js], function() {
     var itemIndex = $(this).parent().data('index');
     itemIndex >= 0 && (lastActiveIndex = activeIndex, activeIndex = itemIndex, updateResultItems());
   });
-
-  $searchToggle.on('click', function() {
-    showSearch = !showSearch;
-    showSearch ? openSearchPanel() : closeSearchPanel();
-  });
 });

data/_includes/scripts/components/sidebar.js

@@ -8,8 +8,6 @@
     var $sidebarShow = $('.js-sidebar-show');
     var $sidebarHide = $('.js-sidebar-hide');
 
-    var scrollTop;
-
     function freeze(e) {
       if (e.target === $pageMask[0]) {
         e.preventDefault();
@@ -24,11 +22,10 @@
     }
 
     $sidebarShow.on('click', function() {
-      scrollTop = $(window).scrollTop();
-      stopBodyScrolling(true); $pageRoot.addClass('show-sidebar'); $pageMain.scrollTop(scrollTop);
+      stopBodyScrolling(true); $pageRoot.addClass('show-sidebar');
     });
     $sidebarHide.on('click', function() {
-      stopBodyScrolling(false); $pageRoot.removeClass('show-sidebar'); $(window).scrollTop(scrollTop);
+      stopBodyScrolling(false); $pageRoot.removeClass('show-sidebar');
     });
   });
 })();

data/_includes/scripts/lib/affix.js

@@ -102,7 +102,7 @@
       return {
         setOptions: setOptions,
         refresh: function() {
-          calc(true); setState();
+          calc(true, { animation: false }); setState();
         }
       };
     }

data/_includes/scripts/lib/gallery.js

@@ -0,0 +1,89 @@
+(function() {
+  {%- include scripts/lib/swiper.js -%}
+  var SOURCES = window.TEXT_VARIABLES.sources;
+  window.Lazyload.js(SOURCES.jquery, function() {
+    var template =
+      '<div class="swiper gallery__swiper">' +
+        '<div class="swiper__wrapper">' +
+        '</div>' +
+        '<div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>' +
+        '<div class="swiper__button swiper__button--next fas fa-chevron-right"></div>' +
+      '</div>';
+    function Gallery(root, items, options) {
+      this.$root = $(root);
+      this.$swiper = null;
+      this.$itemWrapper = null;
+      this.swiper = null;
+      this.$items = [];
+      this.items = items;
+      this.disabled = false;
+      this.contentWidth = 0;
+      this.contentHeight = 0;
+    }
+    Gallery.prototype.init = function() {
+      var i, item, items = this.items, itemsSnippet = '', size, self = this;
+      this.$root.append(template);
+      this.$swiper = this.$root.find('.gallery__swiper');
+      this.$itemWrapper = this.$root.find('.swiper__wrapper');
+      this.contentWidth = this.$itemWrapper && this.$itemWrapper.width();
+      this.contentHeight = this.$itemWrapper && this.$itemWrapper.height();
+      for (i = 0; i < items.length; i++) {
+        item = items[i];
+        size = this.calculateImageSize(item.w, item.h);
+        this.$items.push($(
+          '<div class="swiper__slide">' +
+            '<div class="gallery-item">' +
+              '<div class="gallery-item__content">' +
+                '<img src="' + item.src + '" style="width:' + size.w + 'px;height:' + size.h +  'px"/>' +
+              '</div>' +
+            '</div>' +
+          '</div>'
+        ));
+      }
+      this.$itemWrapper && this.$itemWrapper.append(this.$items);
+      this.swiper = this.$swiper && this.$swiper.swiper();
+      $(window).on('resize', function() {
+        if (self.disabled) { return; }
+        self.resizeImageSize();
+      });
+      // Char Code: 37  ⬅, 39  ➡
+      $(window).on('keyup', function(e) {
+        if (window.isFormElement(e.target || e.srcElement) || self.disabled) { return; }
+        if (e.which === 37) {
+          self.swiper && self.swiper.previous();
+        } else if (e.which === 39) {
+          self.swiper && self.swiper.next();
+        }
+      });
+    };
+    Gallery.prototype.calculateImageSize = function(w, h) {
+      var scale = 1;
+      if (this.contentWidth > 0 && this.contentHeight > 0 && w > 0 && h > 0) {
+        scale = Math.min(
+          Math.min(w, this.contentWidth) / w,
+          Math.min(h, this.contentHeight) / h);
+      }
+      return { w: Math.floor(w * scale), h: Math.floor(h * scale) };
+    };
+    Gallery.prototype.resizeImageSize = function() {
+      var i, $item, $items = this.$items, item, size;
+      this.contentWidth = this.$itemWrapper && this.$itemWrapper.width();
+      this.contentHeight = this.$itemWrapper && this.$itemWrapper.height();
+      if ($items.length < 1) { return; }
+      for (i = 0; i < $items.length; i++) {
+        item = this.items[i], $item = $items[i];
+        size = this.calculateImageSize(item.w, item.h);
+        $item && $item.find('img').css({ width: size.w, height: size.h });
+      }
+    }
+    Gallery.prototype.refresh = function() {
+      this.swiper && this.swiper.refresh();
+      this.resizeImageSize();
+    };
+    Gallery.prototype.setOptions = function(options) {
+      this.disabled = options.disabled;
+      this.swiper && this.swiper.setOptions(options);
+    };
+    window.Gallery = Gallery;
+  });
+})();

data/_includes/scripts/lib/modal.js

@@ -0,0 +1,62 @@
+(function() {
+  var SOURCES = window.TEXT_VARIABLES.sources;
+  window.Lazyload.js(SOURCES.jquery, function() {
+    var $body = $('body'), $window = $(window);
+    var $pageRoot = $('.js-page-root'), $pageMain = $('.js-page-main');
+    var activeCount = 0;
+    function modal(options) {
+      var $root = this, visible, onChange;
+      var scrollTop;
+      function setOptions(options) {
+        var _options = options || {};
+        visible = _options.initialVisible === undefined ? false : show;
+        onChange = _options.onChange;
+      }
+      function init() {
+        setState(visible);
+      }
+      function setState(isShow) {
+        if (isShow === visible) {
+          return;
+        }
+        visible = isShow;
+        if (visible) {
+          activeCount ++;
+          scrollTop = $(window).scrollTop() || $pageMain.scrollTop();
+          $root.addClass('modal--show');
+          $pageMain.scrollTop(scrollTop);
+          activeCount === 1 && ($pageRoot.addClass('show-modal'), $body.addClass('of-hidden'));
+          $window.on('scroll', hide);
+          $window.on('keyup', handleKeyup);
+        } else {
+          activeCount > 0 && activeCount --;
+          $root.removeClass('modal--show');
+          $window.scrollTop(scrollTop);
+          activeCount === 0 && ($pageRoot.removeClass('show-modal'), $body.removeClass('of-hidden'));
+          $window.off('scroll', hide);
+          $window.off('keyup', handleKeyup);
+        }
+        onChange && onChange(visible);
+      }
+      function show() {
+        setState(true);
+      }
+      function hide() {
+        setState(false);
+      }
+      function handleKeyup(e) {
+        // Char Code: 27  ESC
+        if (e.which ===  27) {
+          hide();
+        }
+      }
+      setOptions(options);
+      init();
+      return {
+        show: show,
+        hide: hide
+      };
+    }
+    $.fn.modal = modal;
+  });
+})();