diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/js/hux-blog.js | 106 | ||||
| -rw-r--r-- | assets/js/search.js | 54 |
2 files changed, 112 insertions, 48 deletions
diff --git a/assets/js/hux-blog.js b/assets/js/hux-blog.js index ab6effa..c3518fc 100644 --- a/assets/js/hux-blog.js +++ b/assets/js/hux-blog.js @@ -1,7 +1,7 @@ - /*! +/*! * Hux Blog v1.6.0 (http://startbootstrap.com) * Copyright 2016 @huxpro - * Licensed under Apache 2.0 + * Licensed under Apache 2.0 */ // Tooltip Init @@ -10,9 +10,8 @@ // $("[data-toggle='tooltip']").tooltip(); // }); - // make all images responsive -/* +/* * Unuse by Hux * actually only Portfolio-Pages can't use it and only post-img need it. * so I modify the _layout/post and CSS to make post-img responsive! @@ -22,57 +21,68 @@ // }); // responsive tables -$(document).ready(function() { - $("table").wrap("<div class='table-responsive'></div>"); - $("table").addClass("table"); +$(document).ready(function () { + $("table").wrap("<div class='table-responsive'></div>"); + $("table").addClass("table"); }); // responsive embed videos -$(document).ready(function() { - $('iframe[src*="youtube.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>'); - $('iframe[src*="youtube.com"]').addClass('embed-responsive-item'); - $('iframe[src*="vimeo.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>'); - $('iframe[src*="vimeo.com"]').addClass('embed-responsive-item'); +$(document).ready(function () { + $('iframe[src*="youtube.com"]').wrap( + '<div class="embed-responsive embed-responsive-16by9"></div>' + ); + $('iframe[src*="youtube.com"]').addClass("embed-responsive-item"); + $('iframe[src*="vimeo.com"]').wrap( + '<div class="embed-responsive embed-responsive-16by9"></div>' + ); + $('iframe[src*="vimeo.com"]').addClass("embed-responsive-item"); }); // Navigation Scripts to Show Header on Scroll-Up -jQuery(document).ready(function($) { - var MQL = 1170; +jQuery(document).ready(function ($) { + var MQL = 1170; - //primary navigation slide-in effect - if ($(window).width() > MQL) { - var headerHeight = $('.navbar-custom').height(), - bannerHeight = $('.intro-header .container').height(); - $(window).on('scroll', { - previousTop: 0 - }, - function() { - var currentTop = $(window).scrollTop(), - $catalog = $('.side-catalog'); + //primary navigation slide-in effect + if ($(window).width() > MQL) { + var headerHeight = $(".navbar-custom").height(), + bannerHeight = $(".intro-header .container").height(); + $(window).on( + "scroll", + { + previousTop: 0, + }, + function () { + var currentTop = $(window).scrollTop(), + $catalog = $(".side-catalog"); - //check if user is scrolling up by mouse or keyborad - if (currentTop < this.previousTop) { - //if scrolling up... - if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) { - $('.navbar-custom').addClass('is-visible'); - } else { - $('.navbar-custom').removeClass('is-visible is-fixed'); - } - } else { - //if scrolling down... - $('.navbar-custom').removeClass('is-visible'); - if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed'); - } - this.previousTop = currentTop; + //check if user is scrolling up by mouse or keyborad + if (currentTop < this.previousTop) { + //if scrolling up... + if (currentTop > 0 && $(".navbar-custom").hasClass("is-fixed")) { + $(".navbar-custom").addClass("is-visible"); + } else { + $(".navbar-custom").removeClass("is-visible is-fixed"); + } + } else { + //if scrolling down... + $(".navbar-custom").removeClass("is-visible"); + if ( + currentTop > headerHeight && + !$(".navbar-custom").hasClass("is-fixed") + ) + $(".navbar-custom").addClass("is-fixed"); + } + this.previousTop = currentTop; + //adjust the appearance of side-catalog + $catalog.show(); + if (currentTop > bannerHeight + 41) { + $catalog.addClass("fixed"); + } else { + $catalog.removeClass("fixed"); + } + } + ); + } +}); - //adjust the appearance of side-catalog - $catalog.show() - if (currentTop > (bannerHeight + 41)) { - $catalog.addClass('fixed') - } else { - $catalog.removeClass('fixed') - } - }); - } -});
\ No newline at end of file diff --git a/assets/js/search.js b/assets/js/search.js new file mode 100644 index 0000000..8ab0e16 --- /dev/null +++ b/assets/js/search.js @@ -0,0 +1,54 @@ +// https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript +function htmlDecode(input) { + var e = document.createElement('textarea'); + e.innerHTML = input; + // handle case of empty input + return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; +} + +SimpleJekyllSearch({ + searchInput: document.getElementById('search-input'), + resultsContainer: document.getElementById('search-results'), + json: '/index.json', + searchResultTemplate: '<div class="post-preview item"><a href="{url}"><h2 class="post-title">{title}</h2><h3 class="post-subtitle">{subtitle}</h3><hr></a></div>', + noResultsText: 'No results', + limit: 50, + fuzzy: false, + // a hack to get escaped subtitle unescaped. for some reason, + // post.subtitle w/o escape filter nuke entire search. + templateMiddleware: function (prop, value, template) { + if (prop === 'subtitle' || prop === 'title') { + if (value.indexOf("code")) { + return htmlDecode(value); + } else { + return value; + } + } + } +}); + +$(document).ready(function () { + var $searchPage = $('.search-page'); + var $searchOpen = $('.search-icon'); + var $searchClose = $('.search-icon-close'); + var $searchInput = $('#search-input'); + var $body = $('body'); + + $searchOpen.on('click', function (e) { + e.preventDefault(); + $searchPage.toggleClass('search-active'); + var prevClasses = $body.attr('class') || ''; + setTimeout(function () { + $body.addClass('no-scroll'); + }, 400) + + if ($searchPage.hasClass('search-active')) { + $searchClose.on('click', function (e) { + e.preventDefault(); + $searchPage.removeClass('search-active'); + $body.attr('class', prevClasses); // from closure + }); + $searchInput.focus(); + } + }); +});
\ No newline at end of file |