Only include jQuery when using default search
- Focus on search input after clicking toggle
This commit is contained in:
parent
e93dcdb095
commit
771657756f
|
@ -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 %}
|
||||||
|
|
|
@ -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" -%}
|
||||||
|
|
|
@ -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);
|
||||||
});
|
}
|
||||||
|
|
Loading…
Reference in New Issue