Integrate poor man's Turbolinks with Vue
This commit is contained in:
Jonathan Reinink
parent
fee05fbd75
commit
ecf486b508
2 changed files with 64 additions and 67 deletions
|
|
@ -14,73 +14,12 @@
|
|||
</style>
|
||||
{{-- <link rel="stylesheet" href="https://use.typekit.net/iqy1okj.css"> --}}
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<script type="text/javascript" src="/js/prism.js" defer=""></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript">
|
||||
$.when($.ready).then(function() {
|
||||
$('.nav').on('click', 'a', function (event) {
|
||||
<script src="/js/nav.js"></script>
|
||||
|
||||
if (event.metaKey) {
|
||||
return
|
||||
}
|
||||
|
||||
// Prevent following link
|
||||
event.preventDefault()
|
||||
|
||||
// Get desired link
|
||||
var href = $(this).attr('href')
|
||||
|
||||
// Make Ajax request to get the page content
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: href,
|
||||
cache: false,
|
||||
dataType: 'html',
|
||||
}).done(function(html) {
|
||||
|
||||
// Parse the HTML response
|
||||
var title = $(html).filter('title').text()
|
||||
var nav = $(html).find('.nav').html()
|
||||
var content = $(html).find('.content').html()
|
||||
|
||||
// Update the page
|
||||
$('title').text(title)
|
||||
$('.nav').html(nav)
|
||||
$('.content').html(content)
|
||||
|
||||
// Rerun PrismJS
|
||||
Prism.highlightAll();
|
||||
|
||||
// Scroll to the top of the page
|
||||
$(document).scrollTop(0)
|
||||
|
||||
// Add page load to brower history
|
||||
window.history.pushState({
|
||||
"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){
|
||||
|
||||
// Update the page
|
||||
$('title').text(e.state.title)
|
||||
$('.nav').html(e.state.nav)
|
||||
$('.content').html(e.state.content)
|
||||
|
||||
// Rerun PrismJS
|
||||
Prism.highlightAll();
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="font-sans font-normal text-slate-darker leading-normal">
|
||||
<div id="app" class="min-h-screen">
|
||||
<div class="min-h-screen">
|
||||
<div class="fixed pin-y pin-l bg-smoke-light w-full max-w-xs flex-none overflow-y-scroll border-r-2 border-smoke">
|
||||
<div class="text-center border-b border-smoke p-8">
|
||||
<svg class="h-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><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(#a)" fill-rule="evenodd"></path></svg>
|
||||
|
|
@ -97,7 +36,7 @@
|
|||
<svg class="pointer-events-none text-slate h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav text-base">
|
||||
<nav id="nav" class="text-base">
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
|
||||
<ul>
|
||||
|
|
@ -238,11 +177,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ml-80">
|
||||
<div class="content px-6 py-8 w-full max-w-lg mx-auto">
|
||||
@yield('body')
|
||||
<div id="content" class="px-6 py-8 w-full max-w-lg mx-auto">
|
||||
<div id="app">
|
||||
@yield('body')
|
||||
</div>
|
||||
<script src="/js/app.js"></script>
|
||||
<script src="/js/prism.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
55
docs/source/js/nav.js
Normal file
55
docs/source/js/nav.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
$.when($.ready).then(function() {
|
||||
$('#nav').on('click', 'a', function (event) {
|
||||
|
||||
// Allow opening links in new tabs
|
||||
if (event.metaKey) {
|
||||
return
|
||||
}
|
||||
|
||||
// Prevent following link
|
||||
event.preventDefault()
|
||||
|
||||
// Get desired link
|
||||
var href = $(this).attr('href')
|
||||
|
||||
// Make Ajax request to get the page content
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: href,
|
||||
cache: false,
|
||||
dataType: 'html',
|
||||
}).done(function(html) {
|
||||
|
||||
// Parse the HTML response
|
||||
var title = $(html).filter('title').text()
|
||||
var nav = $(html).find('#nav').html()
|
||||
var content = $(html).find('#content').html()
|
||||
|
||||
// Update the page
|
||||
$('title').text(title)
|
||||
$('#nav').html(nav)
|
||||
$('#content').html(content)
|
||||
|
||||
// Scroll to the top of the page
|
||||
$(document).scrollTop(0)
|
||||
|
||||
// Add page load to brower history
|
||||
window.history.pushState({
|
||||
"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){
|
||||
|
||||
// Update the page
|
||||
$('title').text(e.state.title)
|
||||
$('#nav').html(e.state.nav)
|
||||
$('#content').html(e.state.content)
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue