Fix and improve the search functionality

This commit is contained in:
Eduardo 2019-08-07 22:43:37 +02:00
parent 55533f8ca4
commit 4f90657507
5 changed files with 22 additions and 20 deletions

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{27:function(e,s,t){e.exports=t(28)},28:function(e,s,t){"use strict";t.r(s);var n=t(0),a=t.n(n),o=(t(6),t(15)),i=t(17),l=t.n(i),c=t(18),r=t(20),d=t.n(r);a()(document).ready(function(){var e,s,t,n,i,r=a()("body"),u=a()(".js-header"),h=a()(".js-open-menu"),m=a()(".js-close-menu"),f=a()(".js-menu"),v=a()(".js-toggle-submenu"),p=a()(".js-submenu-option")[0],g=a()(".js-submenu"),C=a()(".js-recent-articles"),w=a()(".js-open-search"),b=a()(".js-close-search"),j=a()(".js-search"),k=a()(".js-input-search"),y=a()(".js-search-results"),x=u.outerHeight(),_=null,L=window.pageYOffset,A=!1,O=!1;function S(){var e=window.pageYOffset;e>=x?(u.addClass("fixed"),O&&u.addClass("fixed-active"),e>=L?O||u.removeClass("fixed-active"):u.addClass("fixed-active")):(O||u.removeClass("fixed-active"),u.removeClass("fixed")),L=e,A=!1}function D(){u.removeClass("submenu-is-active"),v.removeClass("active"),g.removeClass("opened").addClass("closed")}function E(){r.toggleClass("no-scroll-y")}h.click(function(){f.addClass("opened"),E()}),m.click(function(){f.removeClass("opened"),E()}),v.click(function(){(O=!O)?(u.addClass("submenu-is-active"),v.addClass("active"),g.removeClass("closed").addClass("opened")):D()}),w.click(function(){j.addClass("opened"),setTimeout(function(){k.focus()},400),E()}),b.click(function(){k.blur(),j.removeClass("opened"),E()}),k.keyup(function(){if(k.val().length>0&&_){var e=_.search(k.val());if(e.length>0)for(var s=0,t=e.length;s<t;s++)y.html('\n <article class="m-result"> <a href="'.concat(e[s].url,'" class="m-result__link"> <h3 class="m-result__title">').concat(e[s].title,'</h3> <span class="m-result__date">').concat((n=e[s].published_at)?new Date(n).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):"","</span> </a> </article>\n "));else y.html('<p class="m-no-found align-center">0 results for your search, try something different.</>')}else y.html("");var n}),a()(window).click(function(e){O&&p&&!p.contains(e.target)&&(O=!1,D())}),C.length>0&&C.slick({adaptiveHeight:!0,arrows:!1,infinite:!1,mobileFirst:!0,variableWidth:!0}),l.a.init({once:!0,startEvent:"DOMContentLoaded"}),Object(o.a)(".js-tooltip"),"undefined"!=typeof ghostSearchApiKey?(e=ghostHost,s=ghostSearchApiKey,t=new c.a({host:e,key:s,version:"v2"}),n=[],i={shouldSort:!0,threshold:0,location:0,distance:100,tokenize:!0,matchAllTokens:!0,maxPatternLength:32,minMatchCharLength:1,keys:["title"]},t.posts.browse({limit:"all",fields:"id, title, url, published_at"}).then(function(e){for(var s=0,t=e.length;s<t;s++)n.push(e[s]);_=new d.a(n,i)}).catch(function(e){console.log(e)})):(w.remove(),b.remove(),j.remove()),window.addEventListener("scroll",function(){A||requestAnimationFrame(S),A=!0},{passive:!0})})}},[[27,0,1]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{27:function(e,s,t){e.exports=t(28)},28:function(e,s,t){"use strict";t.r(s);var n=t(0),a=t.n(n),o=(t(6),t(15)),i=t(17),l=t.n(i),c=t(18),r=t(20),d=t.n(r);a()(document).ready(function(){var e,s,t,n,i,r=a()("body"),u=a()(".js-header"),m=a()(".js-open-menu"),h=a()(".js-close-menu"),f=a()(".js-menu"),v=a()(".js-toggle-submenu"),p=a()(".js-submenu-option")[0],g=a()(".js-submenu"),C=a()(".js-recent-articles"),w=a()(".js-open-search"),b=a()(".js-close-search"),j=a()(".js-search"),k=a()(".js-input-search"),y=a()(".js-search-results"),x=u.outerHeight(),_=null,L=window.pageYOffset,A=!1,O=!1;function S(){var e=window.pageYOffset;e>=x?(u.addClass("fixed"),O&&u.addClass("fixed-active"),e>=L?O||u.removeClass("fixed-active"):u.addClass("fixed-active")):(O||u.removeClass("fixed-active"),u.removeClass("fixed")),L=e,A=!1}function D(){u.removeClass("submenu-is-active"),v.removeClass("active"),g.removeClass("opened").addClass("closed")}function E(){r.toggleClass("no-scroll-y")}m.click(function(){f.addClass("opened"),E()}),h.click(function(){f.removeClass("opened"),E()}),v.click(function(){(O=!O)?(u.addClass("submenu-is-active"),v.addClass("active"),g.removeClass("closed").addClass("opened")):D()}),w.click(function(){j.addClass("opened"),setTimeout(function(){k.focus()},400),E()}),b.click(function(){k.blur(),j.removeClass("opened"),E()}),k.keyup(function(){if(k.val().length>0&&_){var e=_.search(k.val()),s="";if(e.length>0){for(var t=0,n=e.length;t<n;t++)s+='\n <article class="m-result"> <a href="'.concat(e[t].url,'" class="m-result__link"> <h3 class="m-result__title">').concat(e[t].title,'</h3> <span class="m-result__date">').concat((a=e[t].published_at)?new Date(a).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):"","</span> </a> </article>");y.html(s)}else y.html('<p class="m-no-found align-center">0 results for your search, try something different.</>')}else y.html("");var a}),a()(window).click(function(e){O&&p&&!p.contains(e.target)&&(O=!1,D())}),C.length>0&&C.slick({adaptiveHeight:!0,arrows:!1,infinite:!1,mobileFirst:!0,variableWidth:!0}),l.a.init({once:!0,startEvent:"DOMContentLoaded"}),Object(o.a)(".js-tooltip"),"undefined"!=typeof ghostSearchApiKey?(e=ghostHost,s=ghostSearchApiKey,t=new c.a({host:e,key:s,version:"v2"}),n=[],i={shouldSort:!0,threshold:0,location:0,distance:100,tokenize:!0,matchAllTokens:!0,maxPatternLength:32,minMatchCharLength:1,keys:["title","custom_excerpt","html"]},t.posts.browse({limit:"all",fields:"id, title, url, published_at, custom_excerpt, html"}).then(function(e){for(var s=0,t=e.length;s<t;s++)n.push(e[s]);_=new d.a(n,i)}).catch(function(e){console.log(e)})):(w.remove(),b.remove(),j.remove()),window.addEventListener("scroll",function(){A||requestAnimationFrame(S),A=!0},{passive:!0})})}},[[27,0,1]]]);

View file

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{49:function(t,e,n){t.exports=n(50)},50:function(t,e,n){"use strict";n.r(e);var o=n(0),s=n.n(o),i=(n(6),n(21)),a=n(4),r=n(5),c=n.n(r),l=null,d=window.pageYOffset,u=0,f=0,m=0,p=!1;function w(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(t,")")).matches}function h(){d=window.pageYOffset,v()}function b(){y(),adjustShare(100),setTimeout(function(){k(),v()},200)}function v(){p||requestAnimationFrame(g),p=!0}function g(){var t=f-u,e=Math.ceil(d/t*100);e<=100&&function(t){if(t<=100){var e=m-t/100*m;l[0].style.strokeDashoffset=e}}(e),p=!1}function y(){u=window.innerHeight,f=s()(document).height()}function k(){var t=l.parent().width()/2,e=w()?2:3;l.attr("stroke-width",e),l.attr("r",t-(e-1)),l.attr("cx",t),l.attr("cy",t),m=2*t*Math.PI,l[0].style.strokeDasharray="".concat(m," ").concat(m),l[0].style.strokeDashoffset=m}function j(){l=s()(".js-progress"),y(),k(),g(),setTimeout(function(){l.parent().css("opacity",1)},300)}s()(document).ready(function(){var t,e=s()(".js-aos-wrapper"),n=s()(".js-scrolltop"),o=s()(".js-load-comments"),r=s()(".js-comments-iframe"),l=s()(".js-recommended-articles");c()(".js-post-content"),function(){for(var t=document.querySelectorAll(".kg-gallery-image img"),e=0,n=t.length;e<n;e++){var o=t[e].closest(".kg-gallery-image"),s=t[e].attributes.width.value/t[e].attributes.height.value;o.style.flex="".concat(s," 1 0%")}}(),t=1e3,w("1023px")?(s()("body").addClass("share-menu-displayed"),setTimeout(function(){e.removeAttr("data-aos")},t)):(Object(i.a)(".js-sticky",{stickyBitStickyOffset:100}),s()("body").removeClass("share-menu-displayed")),l.length>0&&(l.on("init",function(){j()}),l.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,responsive:[{breakpoint:720,settings:{slidesToShow:2}},{breakpoint:1023,settings:{arrows:!1,slidesToShow:3}}]})),n.click(function(){s()("html, body").animate({scrollTop:0},500)}),o.click(function(){o.parent().hide(),r.fadeIn("slow")}),s()(".js-post-content").find("img").each(function(){s()(this).addClass("js-zoomable");var t=s()(this).parent().find("figcaption");t?s()(this).attr("alt",t.text()):$this.attr("alt","")}),Object(a.a)(".js-zoomable"),window.addEventListener("scroll",h,{passive:!0}),window.addEventListener("resize",b,{passive:!0})}),s()(window).on("load",function(){j()})}},[[49,0,1]]]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{49:function(t,e,n){t.exports=n(50)},50:function(t,e,n){"use strict";n.r(e);var o=n(0),i=n.n(o),s=(n(6),n(21)),a=n(4),r=n(5),c=n.n(r),l=null,d=window.pageYOffset,u=0,f=0,p=0,m=!1;function w(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(t,")")).matches}function h(){d=window.pageYOffset,g()}function b(t){w("1023px")?(i()("body").addClass("share-menu-displayed"),setTimeout(function(){$aosWrapper.removeAttr("data-aos")},t)):(Object(s.a)(".js-sticky",{stickyBitStickyOffset:100}),i()("body").removeClass("share-menu-displayed"))}function v(){k(),b(100),setTimeout(function(){j(),g()},200)}function g(){m||requestAnimationFrame(y),m=!0}function y(){var t=f-u,e=Math.ceil(d/t*100);e<=100&&function(t){if(t<=100){var e=p-t/100*p;l[0].style.strokeDashoffset=e}}(e),m=!1}function k(){u=window.innerHeight,f=i()(document).height()}function j(){var t=l.parent().width()/2,e=w()?2:3;l.attr("stroke-width",e),l.attr("r",t-(e-1)),l.attr("cx",t),l.attr("cy",t),p=2*t*Math.PI,l[0].style.strokeDasharray="".concat(p," ").concat(p),l[0].style.strokeDashoffset=p}function x(){l=i()(".js-progress"),k(),j(),y(),setTimeout(function(){l.parent().css("opacity",1)},300)}i()(document).ready(function(){i()(".js-aos-wrapper");var t=i()(".js-scrolltop"),e=i()(".js-load-comments"),n=i()(".js-comments-iframe"),o=i()(".js-recommended-articles");c()(".js-post-content"),function(){for(var t=document.querySelectorAll(".kg-gallery-image img"),e=0,n=t.length;e<n;e++){var o=t[e].closest(".kg-gallery-image"),i=t[e].attributes.width.value/t[e].attributes.height.value;o.style.flex="".concat(i," 1 0%")}}(),b(1e3),o.length>0&&(o.on("init",function(){x()}),o.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,responsive:[{breakpoint:720,settings:{slidesToShow:2}},{breakpoint:1023,settings:{arrows:!1,slidesToShow:3}}]})),t.click(function(){i()("html, body").animate({scrollTop:0},500)}),e.click(function(){e.parent().hide(),n.fadeIn("slow")}),i()(".js-post-content").find("img").each(function(){i()(this).addClass("js-zoomable");var t=i()(this).parent().find("figcaption");t?i()(this).attr("alt",t.text()):$this.attr("alt","")}),Object(a.a)(".js-zoomable"),window.addEventListener("scroll",h,{passive:!0}),window.addEventListener("resize",v,{passive:!0})}),i()(window).on("load",function(){x()})}},[[49,0,1]]]);

View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg"
},
"version": "0.1.9"
"version": "0.2.0"
}

View file

@ -111,12 +111,12 @@ $(document).ready(() => {
matchAllTokens: true,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: ['title']
keys: ['title', 'custom_excerpt', 'html']
}
api.posts.browse({
limit: 'all',
fields: 'id, title, url, published_at'
fields: 'id, title, url, published_at, custom_excerpt, html'
})
.then((posts) => {
for (var i = 0, len = posts.length; i < len; i++) {
@ -182,18 +182,20 @@ $(document).ready(() => {
$inputSearch.keyup(() => {
if ($inputSearch.val().length > 0 && fuse) {
const results = fuse.search($inputSearch.val())
let htmlString = ''
if (results.length > 0) {
for (var i = 0, len = results.length; i < len; i++) {
$searchResults.html(`
htmlString += `
<article class="m-result">\
<a href="${results[i].url}" class="m-result__link">\
<h3 class="m-result__title">${results[i].title}</h3>\
<span class="m-result__date">${formatDate(results[i].published_at)}</span>\
</a>\
</article>
`)
</article>`
}
$searchResults.html(htmlString)
} else {
$searchResults.html('<p class="m-no-found align-center">0 results for your search, try something different.</>')
}

View file

@ -20,6 +20,18 @@ function onScrolling() {
requestTicking()
}
function adjustShare(timeout) {
if (!isMobile('1023px')) {
stickybits('.js-sticky', { stickyBitStickyOffset: 100 })
$('body').removeClass('share-menu-displayed')
} else {
$('body').addClass('share-menu-displayed')
setTimeout(() => {
$aosWrapper.removeAttr('data-aos')
}, timeout)
}
}
function onResizing() {
setHeights()
adjustShare(100)
@ -109,18 +121,6 @@ $(document).ready(() => {
}
}
function adjustShare(timeout) {
if (!isMobile('1023px')) {
stickybits('.js-sticky', { stickyBitStickyOffset: 100 })
$('body').removeClass('share-menu-displayed')
} else {
$('body').addClass('share-menu-displayed')
setTimeout(() => {
$aosWrapper.removeAttr('data-aos')
}, timeout)
}
}
adjustImageGallery()
adjustShare(1000)