Only include jQuery when using default search

- Focus on search input after clicking toggle
This commit is contained in:
Michael Rose 2018-02-16 15:02:53 -05:00
parent e93dcdb095
commit 771657756f
3 changed files with 19 additions and 12 deletions

View File

@ -2,7 +2,6 @@
{% include google-analytics.html %} {% include google-analytics.html %}
{% endif %} {% endif %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script async src="{{ '/assets/javascripts/main.js' | relative_url }}"></script> <script async src="{{ '/assets/javascripts/main.js' | relative_url }}"></script>
{% if site.search %} {% if site.search %}

View File

@ -35,6 +35,7 @@
{%- else -%} {%- else -%}
{%- assign lang = "en" -%} {%- assign lang = "en" -%}
{%- endcase -%} {%- endcase -%}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ '/assets/javascripts/lunr/lunr.min.js' | absolute_url }}"></script> <script src="{{ '/assets/javascripts/lunr/lunr.min.js' | absolute_url }}"></script>
<script src="{{ '/assets/javascripts/search-data.json' | absolute_url }}"></script> <script src="{{ '/assets/javascripts/search-data.json' | absolute_url }}"></script>
{%- unless lang == "en" -%} {%- unless lang == "en" -%}

View File

@ -8,7 +8,6 @@
* https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md * https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE.md
*/ */
// Animate sidebar menu items
var menuItems = document.querySelectorAll('#sidebar li'); var menuItems = document.querySelectorAll('#sidebar li');
// Get vendor transition property // Get vendor transition property
@ -16,6 +15,7 @@ var docElemStyle = document.documentElement.style;
var transitionProp = typeof docElemStyle.transition == 'string' ? var transitionProp = typeof docElemStyle.transition == 'string' ?
'transition' : 'WebkitTransition'; 'transition' : 'WebkitTransition';
// Animate sidebar menu items
function animateMenuItems() { function animateMenuItems() {
for ( var i=0; i < menuItems.length; i++ ) { for ( var i=0; i < menuItems.length; i++ ) {
var item = menuItems[i]; var item = menuItems[i];
@ -25,6 +25,13 @@ function animateMenuItems() {
} }
}; };
var myWrapper = document.querySelector('.wrapper');
var myMenu = document.querySelector('.sidebar');
var myToggle = document.querySelector('.toggle');
var myInitialContent = document.querySelector('.initial-content');
var mySearchContent = document.querySelector('.search-content');
var mySearchToggle = document.querySelector('.search-toggle');
// Toggle sidebar visibility // Toggle sidebar visibility
function toggleClassMenu() { function toggleClassMenu() {
myMenu.classList.add('is--animatable'); myMenu.classList.add('is--animatable');
@ -39,13 +46,11 @@ function toggleClassMenu() {
} }
} }
// Animation smoother
function OnTransitionEnd() { function OnTransitionEnd() {
myMenu.classList.remove('is--animatable'); myMenu.classList.remove('is--animatable');
} }
var myWrapper = document.querySelector('.wrapper');
var myMenu = document.querySelector('.sidebar');
var myToggle = document.querySelector('.toggle');
myMenu.addEventListener('transitionend', OnTransitionEnd, false); myMenu.addEventListener('transitionend', OnTransitionEnd, false);
myToggle.addEventListener('click', function() { myToggle.addEventListener('click', function() {
toggleClassMenu(); toggleClassMenu();
@ -55,13 +60,15 @@ myMenu.addEventListener('click', function() {
toggleClassMenu(); toggleClassMenu();
animateMenuItems(); animateMenuItems();
}, false); }, false);
mySearchToggle.addEventListener('click', function() {
toggleClassSearch();
}, false);
// Search toggle // Toggle search input and content visibility
$(".search-toggle").on("click", function() { function toggleClassSearch() {
$(".search-content").toggleClass("is--visible"); mySearchContent.classList.toggle("is--visible");
$(".initial-content").toggleClass("is--hidden"); myInitialContent.classList.toggle("is--hidden");
// set focus on input
setTimeout(function() { setTimeout(function() {
$("#search").focus(); document.querySelector(".search-content input").focus();
}, 400); }, 400);
}); }