go-shiori/shiori
1
1
Fork 0
mirror of https://github.com/go-shiori/shiori.git synced 2025-02-22 15:06:04 +08:00
Code Issues Projects Releases Packages Wiki Activity

Make back and forward button works

Browse source
This commit is contained in:
Radhi Fadlillah 2019-05-28 09:13:44 +07:00
parent 923a2c4f22
commit d35a396ad2
4 changed files with 110 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
internal/view/index.html
View file

@ -24,7 +24,7 @@
<body> <body>
<div class="home" id="app"> <div class="home" id="app">
<div class="home-sidebar"> <div class="home-sidebar">
<a v-for="item in sidebarItems" :title="item.title" :class="{active: activePage === item.page}" @click="activePage = item.page"> <a v-for="item in sidebarItems" :title="item.title" :class="{active: activePage === item.page}" @click="switchPage(item.page)">
<i class="fas fa-fw" :class="item.icon"></i> <i class="fas fa-fw" :class="item.icon"></i>
</a> </a>
<div class="spacer"></div> <div class="spacer"></div>
@ -60,9 +60,17 @@
title: "Setting", title: "Setting",
icon: "fa-cog", icon: "fa-cog",
page: "page-setting", page: "page-setting",
}] }],
historyState: {},
}, },
methods: { methods: {
switchPage(page) {
var pageName = page.replace("page-", ""),
state = {activePage: page};
this.activePage = page;
history.pushState(state, page, `#${pageName}`);
},
logout() { logout() {
this.showDialog({ this.showDialog({
title: "Log Out", title: "Log Out",
@ -89,6 +97,21 @@
} }
}); });
} }
},
mounted() {
// Prepare history state watcher
var stateWatcher = (e) => {
var state = e.state || {};
this.activePage = state.activePage || "page-home";
}
window.addEventListener('popstate', stateWatcher);
this.$once('hook:beforeDestroy', function () {
window.removeEventListener('popstate', stateWatcher);
})
// Set initial URL
history.replaceState(null, "page-home", "#home");
} }
}) })
</script> </script>

54
internal/view/js/page/home.js
View file

@ -1,7 +1,7 @@
var template = ` var template = `
<div id="page-home"> <div id="page-home">
<div class="page-header"> <div class="page-header">
<input type="text" placeholder="Search url, keyword or tags" v-model.trim="search" @focus="$event.target.select()" @keyup.enter="loadBookmarks()"/> <input type="text" placeholder="Search url, keyword or tags" v-model.trim="search" @focus="$event.target.select()" @keyup.enter="searchBookmarks"/>
<a title="Refresh storage" @click="reloadData"> <a title="Refresh storage" @click="reloadData">
<i class="fas fa-fw fa-sync-alt" :class="loading && 'fa-spin'"></i> <i class="fas fa-fw fa-sync-alt" :class="loading && 'fa-spin'"></i>
</a> </a>
@ -87,9 +87,12 @@ export default {
this.search = ""; this.search = "";
this.loadBookmarks(); this.loadBookmarks();
}, },
loadBookmarks() { loadBookmarks(saveState) {
if (this.loading) return; if (this.loading) return;
// By default, we eill save the state
saveState = (typeof saveState === "boolean") ? saveState : true;
// Parse search query // Parse search query
var rxTagA = /['"]#([^'"]+)['"]/g, // "#tag with space" var rxTagA = /['"]#([^'"]+)['"]/g, // "#tag with space"
rxTagB = /(^|\s+)#(\S+)/g, // #tag-without-space rxTagB = /(^|\s+)#(\S+)/g, // #tag-without-space
@ -130,10 +133,31 @@ export default {
return response.json(); return response.json();
}) })
.then(json => { .then(json => {
// Set data
this.page = json.page; this.page = json.page;
this.maxPage = json.maxPage; this.maxPage = json.maxPage;
this.bookmarks = json.bookmarks; this.bookmarks = json.bookmarks;
this.loading = false; this.loading = false;
// Save state and change URL if needed
if (saveState) {
var history = {
activePage: "page-home",
search: this.search,
page: this.page
};
var urlQueries = [];
if (this.page > 1) urlQueries.push(`page=${this.page}`);
if (this.search !== "") urlQueries.push(`search=${this.search}`);
var url = "#home"
if (urlQueries.length > 0) {
url += `?${urlQueries.join("&")}`;
}
window.history.pushState(history, "page-home", url);
}
}) })
.catch(err => { .catch(err => {
this.loading = false; this.loading = false;
@ -142,9 +166,11 @@ export default {
}) })
}); });
}, },
searchBookmarks() {
this.page = 1;
this.loadBookmarks();
},
changePage(page) { changePage(page) {
if (this.loading) return;
page = parseInt(page, 10) || 0; page = parseInt(page, 10) || 0;
if (page >= this.maxPage) this.page = this.maxPage; if (page >= this.maxPage) this.page = this.maxPage;
else if (page <= 1) this.page = 1; else if (page <= 1) this.page = 1;
@ -164,6 +190,24 @@ export default {
} }
}, },
mounted() { mounted() {
this.loadBookmarks(); var stateWatcher = (e) => {
var state = e.state || {},
activePage = state.activePage || "page-home",
search = state.search || "",
page = state.page || 1;
if (activePage !== "page-home") return;
this.page = page;
this.search = search;
this.loadBookmarks(false);
}
window.addEventListener('popstate', stateWatcher);
this.$once('hook:beforeDestroy', function() {
window.removeEventListener('popstate', stateWatcher);
})
this.loadBookmarks(false);
} }
} }

4
internal/view/login.html
View file

@ -93,6 +93,10 @@
}) })
}); });
} }
},
mounted() {
// Set initial URL
history.replaceState(null, "login", "login");
} }
}) })
</script> </script>

64
internal/webserver/assets-prod.go
View file

File diff suppressed because one or more lines are too long