archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Move inline nav JavaScript to nav.js file

Browse Source
This commit is contained in:
Jonathan Reinink 2017-10-31 20:06:36 -04:00
parent 56ee13283c
commit 5b145606da
2 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/source/_assets/js/nav.js
View File

@ -3,7 +3,7 @@ $.when($.ready).then(function() {
// Allow opening links in new tabs
if (event.metaKey) {
return
return
}
// Prevent following link
@ -25,8 +25,8 @@ $.when($.ready).then(function() {
var nav = $(html).find('#nav').html()
var content = $(html).find('#content').html()
$('#sidebar').addClass("hidden");
$('.js-close-sidebar').addClass("hidden");
$('#sidebar').addClass('hidden')
$('#sidebar-close').addClass('hidden')
// Update the page
$('title').text(title)
@ -38,21 +38,33 @@ $.when($.ready).then(function() {
// Add page load to brower history
window.history.pushState({
"title": title,
"nav": $(html).find('#nav').html(),
"content": $(html).find('#content').html()
'title': title,
'nav': $(html).find('#nav').html(),
'content': $(html).find('#content').html()
}, '', href)
})
})
// Load page history (for back/forward nav)
window.onpopstate = function(e) {
if(e.state){
if(e.state){
// Update the page
$('title').text(e.state.title)
$('#nav').html(e.state.nav)
$('#content').html(e.state.content)
}
// Update the page
$('title').text(e.state.title)
$('#nav').html(e.state.nav)
$('#content').html(e.state.content)
}
}
// Close sidebar (mobile)
$('#sidebar-close').on('click', function () {
$('#sidebar').addClass('hidden')
$('#sidebar-close').addClass('hidden')
})
// Show sidebar (mobile)
$('#sidebar-open').on('click', function () {
$('#sidebar').removeClass('hidden')
$('#sidebar-close').removeClass('hidden')
})
})

23
docs/source/_layouts/documentation.blade.php
View File

@ -159,15 +159,15 @@
<div class="md:ml-80">
<div class="fixed w-full z-20">
<div class="pin-t bg-white md:hidden relative border-b border-grey-light h-12 flex items-center">
<div class="js-open-sidebar absolute pin-l pin-y px-4 flex items-center">
<div id="sidebar-open" class="absolute pin-l pin-y px-4 flex items-center">
<svg class="h-4 cursor-pointer text-grey" role="button" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</div>
<div class="mx-auto inline-flex items-center">
<a href="/" class="mx-auto inline-flex items-center">
<svg class="h-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
<path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path>
</svg>
</div>
<div class="hidden js-close-sidebar">
</a>
<div id="sidebar-close" class="hidden">
<div class="flex items-center absolute pin-r pin-y px-4">
<svg class="h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
</div>
@ -184,21 +184,6 @@
</div>
</div>
<script src="/js/app.js"></script>
<script>
var closeSidebar = function () {
$('#sidebar').addClass("hidden");
$('.js-close-sidebar').addClass("hidden");
}
$('.js-close-sidebar').on('click', function () {
closeSidebar();
});
$('.js-open-sidebar').on('click', function () {
$('#sidebar').removeClass("hidden");
$('.js-close-sidebar').removeClass("hidden");
});
</script>
</div>
</div>
</div>