2019-05-27 18:01:53 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Shiori - Bookmarks Manager</title>
|
|
|
|
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/res/apple-touch-icon-152x152.png">
|
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/res/apple-touch-icon-144x144.png">
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-32x32.png" sizes="32x32">
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-16x16.png" sizes="16x16">
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
|
|
|
|
|
|
|
|
|
|
<link href="/css/fontawesome.min.css" rel="stylesheet">
|
|
|
|
|
<link href="/css/stylesheet.css" rel="stylesheet">
|
|
|
|
|
<link href="/css/custom-dialog.css" rel="stylesheet">
|
|
|
|
|
<link href="/css/bookmark-item.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<script src="/js/vue.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2019-05-31 17:32:02 +08:00
|
|
|
<div id="main-scene" :class="{night: displayOptions.nightMode}">
|
|
|
|
|
<div id="main-sidebar">
|
2019-05-28 10:13:44 +08:00
|
|
|
<a v-for="item in sidebarItems" :title="item.title" :class="{active: activePage === item.page}" @click="switchPage(item.page)">
|
2019-05-27 18:01:53 +08:00
|
|
|
<i class="fas fa-fw" :class="item.icon"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<a title="Logout" @click="logout">
|
|
|
|
|
<i class="fas fa-fw fa-sign-out-alt"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<keep-alive>
|
2019-05-31 17:32:02 +08:00
|
|
|
<component :is="activePage" :display-options="displayOptions" @setting-changed="saveSetting"></component>
|
2019-05-27 18:01:53 +08:00
|
|
|
</keep-alive>
|
|
|
|
|
<custom-dialog v-bind="dialog" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
import basePage from "./js/page/base.js";
|
2019-05-31 17:32:02 +08:00
|
|
|
import pageHome from "./js/page/home.js";
|
|
|
|
|
import pageSetting from "./js/page/setting.js";
|
2019-05-27 18:01:53 +08:00
|
|
|
import customDialog from "./js/component/dialog.js";
|
|
|
|
|
|
|
|
|
|
var app = new Vue({
|
2019-05-31 17:32:02 +08:00
|
|
|
el: '#main-scene',
|
2019-05-27 18:01:53 +08:00
|
|
|
mixins: [basePage],
|
|
|
|
|
components: {
|
|
|
|
|
pageHome,
|
2019-05-31 17:32:02 +08:00
|
|
|
pageSetting,
|
2019-05-27 18:01:53 +08:00
|
|
|
customDialog
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
activePage: "page-home",
|
|
|
|
|
sidebarItems: [{
|
|
|
|
|
title: "Home",
|
|
|
|
|
icon: "fa-home",
|
|
|
|
|
page: "page-home",
|
|
|
|
|
},{
|
|
|
|
|
title: "Setting",
|
|
|
|
|
icon: "fa-cog",
|
|
|
|
|
page: "page-setting",
|
2019-05-28 10:13:44 +08:00
|
|
|
}],
|
|
|
|
|
historyState: {},
|
2019-05-27 18:01:53 +08:00
|
|
|
},
|
|
|
|
|
methods: {
|
2019-05-28 10:13:44 +08:00
|
|
|
switchPage(page) {
|
|
|
|
|
var pageName = page.replace("page-", ""),
|
|
|
|
|
state = {activePage: page};
|
|
|
|
|
|
|
|
|
|
this.activePage = page;
|
|
|
|
|
history.pushState(state, page, `#${pageName}`);
|
|
|
|
|
},
|
2019-05-27 18:01:53 +08:00
|
|
|
logout() {
|
|
|
|
|
this.showDialog({
|
|
|
|
|
title: "Log Out",
|
|
|
|
|
content: "Are you sure you want to log out ?",
|
|
|
|
|
mainText: "Yes",
|
|
|
|
|
secondText: "No",
|
|
|
|
|
mainClick: () => {
|
|
|
|
|
this.dialog.loading = true;
|
|
|
|
|
fetch("/api/logout", { method: "post" })
|
|
|
|
|
.then(response => {
|
|
|
|
|
if (!response.ok) throw response;
|
|
|
|
|
return response;
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
document.cookie = "session-id=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
|
|
|
|
|
location.href = "/login";
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
this.dialog.loading = false;
|
|
|
|
|
err.text().then(msg => {
|
2019-05-31 15:14:45 +08:00
|
|
|
this.showErrorDialog(msg, err.status);
|
2019-05-27 18:01:53 +08:00
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
2019-05-31 17:32:02 +08:00
|
|
|
},
|
|
|
|
|
saveSetting(opts) {
|
|
|
|
|
localStorage.setItem("shiori-setting", JSON.stringify(opts));
|
|
|
|
|
this.displayOptions = opts;
|
2019-08-03 15:31:51 +08:00
|
|
|
document.body.className = opts.nightMode ? "night" : "";
|
2019-05-31 17:32:02 +08:00
|
|
|
},
|
|
|
|
|
loadSetting() {
|
|
|
|
|
var opts = JSON.parse(localStorage.getItem("shiori-setting")) || {},
|
|
|
|
|
showId = (typeof opts.showId === "boolean") ? opts.showId : false,
|
|
|
|
|
listMode = (typeof opts.listMode === "boolean") ? opts.listMode : false,
|
2019-06-11 14:24:12 +08:00
|
|
|
nightMode = (typeof opts.nightMode === "boolean") ? opts.nightMode : false,
|
|
|
|
|
useArchive = (typeof opts.useArchive === "boolean") ? opts.useArchive : false;
|
2019-05-31 17:32:02 +08:00
|
|
|
|
|
|
|
|
this.displayOptions = {
|
|
|
|
|
showId: showId,
|
|
|
|
|
listMode: listMode,
|
|
|
|
|
nightMode: nightMode,
|
2019-06-11 14:24:12 +08:00
|
|
|
useArchive: useArchive,
|
2019-05-31 17:32:02 +08:00
|
|
|
};
|
2019-08-03 15:31:51 +08:00
|
|
|
|
|
|
|
|
document.body.className = nightMode ? "night" : "";
|
2019-05-27 18:01:53 +08:00
|
|
|
}
|
2019-05-28 10:13:44 +08:00
|
|
|
},
|
|
|
|
|
mounted() {
|
2019-05-31 17:32:02 +08:00
|
|
|
// Load setting
|
|
|
|
|
this.loadSetting();
|
|
|
|
|
|
2019-05-28 10:13:44 +08:00
|
|
|
// 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");
|
2019-05-27 18:01:53 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
