2018-02-11 22:00:56 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
|
<link rel="stylesheet" href="/css/stylesheet.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/fontawesome.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/source-sans-pro.css">
|
|
|
|
|
<script src="/js/vue.js"></script>
|
|
|
|
|
<script src="/js/axios.js"></script>
|
|
|
|
|
<title>Shiori - Bookmarks Manager</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<div id="header">
|
|
|
|
|
<a id="logo" href="/">
|
|
|
|
|
<span>栞</span>shiori</a>
|
|
|
|
|
<div id="search-box">
|
|
|
|
|
<input type="text" name="keyword" id="input-search" placeholder="Search tags, title or content">
|
2018-02-12 22:06:53 +08:00
|
|
|
<a class="button">
|
2018-02-11 22:00:56 +08:00
|
|
|
<i class="fas fa-search fa-fw"></i>
|
2018-02-12 22:06:53 +08:00
|
|
|
</a>
|
2018-02-11 22:00:56 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="main">
|
2018-02-13 17:14:08 +08:00
|
|
|
<div id="input-bookmark">
|
|
|
|
|
<p v-if="inputBookmark.url !== ''">{{inputBookmark.id === -1 ? 'New bookmark' : 'Edit bookmark'}}</p>
|
|
|
|
|
<input type="text" ref="inputURL" v-model="inputBookmark.url" placeholder="URL for the bookmark">
|
|
|
|
|
<template v-if="inputBookmark.url !== ''">
|
|
|
|
|
<input type="text" v-model="inputBookmark.title" placeholder="Custom bookmark title (optional)">
|
|
|
|
|
<input type="text" v-model="inputBookmark.tags" placeholder="Space separated tags for this bookmark (optional)">
|
|
|
|
|
<textarea name="excerpt" v-model="inputBookmark.excerpt" placeholder="Excerpt for this bookmark (optional)"></textarea>
|
2018-02-12 22:06:53 +08:00
|
|
|
<div class="button-area">
|
|
|
|
|
<div class="spacer"></div>
|
2018-02-13 17:14:08 +08:00
|
|
|
<a v-if="inputBookmark.loading">
|
2018-02-12 22:06:53 +08:00
|
|
|
<i class="fas fa-fw fa-spinner fa-spin"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<template v-else>
|
2018-02-13 17:14:08 +08:00
|
|
|
<a class="button" @click="clearInputBookmark">Cancel</a>
|
2018-02-12 22:06:53 +08:00
|
|
|
<a class="button" @click="saveBookmark">Done</a>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
2018-02-11 22:00:56 +08:00
|
|
|
</div>
|
|
|
|
|
<div id="grid">
|
|
|
|
|
<div v-for="column in gridColumns" class="column">
|
2018-02-13 17:14:08 +08:00
|
|
|
<div v-for="item in column" class="bookmark" :ref="'bookmark-'+item.index">
|
2018-02-12 22:06:53 +08:00
|
|
|
<a href="#" class="checkbox">
|
|
|
|
|
<i class="fas fa-check"></i>
|
2018-02-11 22:00:56 +08:00
|
|
|
</a>
|
2018-02-12 22:06:53 +08:00
|
|
|
<a class="bookmark-metadata" :class="{'has-image':item.imageURL !== ''}" :style="bookmarkImage(item)" :href="item.url">
|
2018-02-11 22:00:56 +08:00
|
|
|
<p class="bookmark-time">{{bookmarkTime(item)}}</p>
|
|
|
|
|
<p class="bookmark-title">{{item.title}}</p>
|
2018-02-12 22:06:53 +08:00
|
|
|
<p class="bookmark-url">{{getDomainURL(item.url)}}</p>
|
2018-02-11 22:00:56 +08:00
|
|
|
</a>
|
|
|
|
|
<p v-if="item.excerpt !== ''" class="bookmark-excerpt">{{item.excerpt}}</p>
|
|
|
|
|
<div v-if="item.tags.length > 0" class="bookmark-tags">
|
|
|
|
|
<a v-for="tag in item.tags" href="#">{{tag.name}}</a>
|
|
|
|
|
</div>
|
2018-02-12 22:06:53 +08:00
|
|
|
<div class="bookmark-menu">
|
2018-02-13 17:14:08 +08:00
|
|
|
<a href="#" @click="editBookmark(item.index)">
|
2018-02-12 22:06:53 +08:00
|
|
|
<i class="fas fa-pencil-alt"></i>
|
|
|
|
|
</a>
|
2018-02-14 12:41:43 +08:00
|
|
|
<a href="#" @click="deleteBookmark(item.index)">
|
2018-02-12 22:06:53 +08:00
|
|
|
<i class="far fa-trash-alt"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#">
|
|
|
|
|
<i class="fas fa-history"></i>
|
|
|
|
|
</a>
|
2018-02-11 22:00:56 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-02-12 22:06:53 +08:00
|
|
|
</div>
|
2018-02-11 22:00:56 +08:00
|
|
|
</div>
|
|
|
|
|
<div id="progress-bar">
|
2018-02-12 22:06:53 +08:00
|
|
|
<i v-if="loading" class="fas fa-fw fa-spinner fa-spin"></i>
|
2018-02-11 22:00:56 +08:00
|
|
|
<a href="#">Load more bookmarks</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-02-14 12:41:43 +08:00
|
|
|
<div v-if="dialog.visible" id="dialog-overlay">
|
|
|
|
|
<div id="dialog">
|
|
|
|
|
<p id="dialog-title">{{dialog.title}}</p>
|
|
|
|
|
<p v-html="dialog.content" id="dialog-content"></p>
|
|
|
|
|
<div id="dialog-button">
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<a v-if="dialog.loading">
|
|
|
|
|
<i class="fas fa-fw fa-spinner fa-spin"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<a class="button" @click="dialog.secondAction">{{dialog.secondChoice}}</a>
|
|
|
|
|
<a class="button" @click="dialog.mainAction">{{dialog.mainChoice}}</a>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-02-11 22:00:56 +08:00
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
var instance = axios.create();
|
|
|
|
|
instance.defaults.timeout = 2500;
|
|
|
|
|
|
|
|
|
|
var app = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data: {
|
|
|
|
|
windowWidth: 0,
|
2018-02-12 22:06:53 +08:00
|
|
|
loading: true,
|
|
|
|
|
bookmarks: [],
|
2018-02-13 17:14:08 +08:00
|
|
|
inputBookmark: {
|
|
|
|
|
index: -1,
|
|
|
|
|
id: -1,
|
2018-02-12 22:06:53 +08:00
|
|
|
url: "",
|
|
|
|
|
title: "",
|
|
|
|
|
tags: "",
|
|
|
|
|
excerpt: "",
|
|
|
|
|
loading: false
|
2018-02-14 12:41:43 +08:00
|
|
|
},
|
|
|
|
|
dialog: {
|
|
|
|
|
visible: false,
|
|
|
|
|
loading: false,
|
|
|
|
|
title: '',
|
|
|
|
|
content: '',
|
|
|
|
|
mainChoice: '',
|
|
|
|
|
secondChoice: '',
|
|
|
|
|
mainAction: function () {},
|
|
|
|
|
secondAction: function () {}
|
2018-02-12 22:06:53 +08:00
|
|
|
}
|
2018-02-11 22:00:56 +08:00
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
loadData: function () {
|
2018-02-12 22:06:53 +08:00
|
|
|
this.loading = true;
|
2018-02-11 22:00:56 +08:00
|
|
|
instance.get('/api/bookmarks')
|
|
|
|
|
.then(function (response) {
|
2018-02-12 22:06:53 +08:00
|
|
|
app.loading = false;
|
2018-02-11 22:00:56 +08:00
|
|
|
app.bookmarks = response.data;
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
2018-02-12 22:06:53 +08:00
|
|
|
app.loading = false;
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
saveBookmark: function () {
|
2018-02-13 17:14:08 +08:00
|
|
|
if (this.inputBookmark.loading) return;
|
|
|
|
|
this.inputBookmark.loading = true;
|
2018-02-12 22:06:53 +08:00
|
|
|
|
2018-02-13 17:14:08 +08:00
|
|
|
if (this.inputBookmark.url === "") return;
|
2018-02-12 22:06:53 +08:00
|
|
|
|
2018-02-13 17:14:08 +08:00
|
|
|
var tags = this.inputBookmark.tags.replace(/\s+/g, " "),
|
2018-02-12 22:06:53 +08:00
|
|
|
listTag = tags === "" ? [] : listTag = tags.split(/\s+/g),
|
|
|
|
|
finalTag = [];
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < listTag.length; i++) {
|
|
|
|
|
finalTag.push({
|
|
|
|
|
name: listTag[i]
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2018-02-13 17:14:08 +08:00
|
|
|
instance.request({
|
|
|
|
|
method: this.inputBookmark.id === -1 ? 'post' : 'put',
|
|
|
|
|
url: '/api/bookmarks',
|
|
|
|
|
timeout: 15000,
|
|
|
|
|
data: {
|
|
|
|
|
id: this.inputBookmark.id,
|
|
|
|
|
url: this.inputBookmark.url,
|
|
|
|
|
title: this.inputBookmark.title,
|
|
|
|
|
excerpt: this.inputBookmark.excerpt,
|
|
|
|
|
tags: finalTag
|
|
|
|
|
}
|
2018-02-12 22:06:53 +08:00
|
|
|
})
|
|
|
|
|
.then(function (response) {
|
2018-02-13 17:14:08 +08:00
|
|
|
var idx = app.inputBookmark.index;
|
|
|
|
|
|
|
|
|
|
if (idx === -1) app.bookmarks.unshift(response.data);
|
|
|
|
|
else app.bookmarks.splice(idx, 1, response.data);
|
|
|
|
|
|
|
|
|
|
app.clearInputBookmark();
|
2018-02-12 22:06:53 +08:00
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
2018-02-11 22:00:56 +08:00
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
},
|
2018-02-13 17:14:08 +08:00
|
|
|
editBookmark: function (idx) {
|
|
|
|
|
var bookmark = this.bookmarks[idx],
|
|
|
|
|
tags = [];
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < bookmark.tags.length; i++) {
|
|
|
|
|
tags.push(bookmark.tags[i].name);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.inputBookmark.index = idx;
|
|
|
|
|
this.inputBookmark.id = bookmark.id;
|
|
|
|
|
this.inputBookmark.url = bookmark.url;
|
|
|
|
|
this.inputBookmark.title = bookmark.title;
|
|
|
|
|
this.inputBookmark.tags = tags.join(" ");
|
|
|
|
|
this.inputBookmark.excerpt = bookmark.excerpt;
|
|
|
|
|
|
|
|
|
|
this.$nextTick(function () {
|
|
|
|
|
app.$refs.inputURL.focus();
|
|
|
|
|
});
|
2018-02-12 22:06:53 +08:00
|
|
|
},
|
2018-02-14 12:41:43 +08:00
|
|
|
deleteBookmark: function (idx) {
|
|
|
|
|
var bookmark = this.bookmarks[idx];
|
|
|
|
|
|
|
|
|
|
this.dialog.visible = true;
|
|
|
|
|
this.dialog.loading = false;
|
|
|
|
|
this.dialog.title = "Delete Bookmark";
|
|
|
|
|
this.dialog.content = "Delete <b>\"" + bookmark.title.trim() + "\"</b> from bookmarks ? This action is irreversible.";
|
|
|
|
|
this.dialog.mainChoice = "Yes";
|
|
|
|
|
this.dialog.secondChoice = "No";
|
|
|
|
|
this.dialog.mainAction = function () {
|
|
|
|
|
app.dialog.loading = true;
|
|
|
|
|
|
|
|
|
|
instance.delete('/api/bookmarks/' + bookmark.id)
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
app.dialog.loading = false;
|
|
|
|
|
app.dialog.visible = false;
|
|
|
|
|
app.bookmarks.splice(idx, 1);
|
|
|
|
|
|
|
|
|
|
var scrollIdx = idx === 1 ? 1 : idx - 1;
|
|
|
|
|
app.$nextTick(function () {
|
|
|
|
|
app.$refs['bookmark-' + scrollIdx][0].scrollIntoView();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
app.dialog.loading = false;
|
|
|
|
|
app.dialog.visible = false;
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
this.dialog.secondAction = function () {
|
|
|
|
|
app.dialog.visible = false;
|
|
|
|
|
app.$nextTick(function () {
|
|
|
|
|
app.$refs['bookmark-' + idx][0].scrollIntoView();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
clearInputBookmark: function () {
|
|
|
|
|
var idx = this.inputBookmark.index;
|
|
|
|
|
|
|
|
|
|
this.inputBookmark.index = -1;
|
|
|
|
|
this.inputBookmark.id = -1;
|
|
|
|
|
this.inputBookmark.url = "";
|
|
|
|
|
this.inputBookmark.title = "";
|
|
|
|
|
this.inputBookmark.tags = "";
|
|
|
|
|
this.inputBookmark.excerpt = "";
|
|
|
|
|
this.inputBookmark.loading = false;
|
|
|
|
|
|
|
|
|
|
if (idx !== -1) app.$nextTick(function () {
|
|
|
|
|
var bookmarkItem = app.$refs['bookmark-' + idx];
|
|
|
|
|
bookmarkItem[0].scrollIntoView();
|
|
|
|
|
})
|
|
|
|
|
},
|
2018-02-11 22:00:56 +08:00
|
|
|
bookmarkTime: function (book) {
|
|
|
|
|
var time = book.modified,
|
|
|
|
|
readTime = "",
|
|
|
|
|
finalBookmarkTime = "";
|
|
|
|
|
|
|
|
|
|
if (book.maxReadTime === 0) {
|
|
|
|
|
readTime = "";
|
|
|
|
|
} else if (book.minReadTime === book.maxReadTime) {
|
|
|
|
|
readTime = book.minReadTime + " min read";
|
|
|
|
|
} else {
|
|
|
|
|
readTime = book.minReadTime + "-" + book.maxReadTime + " min read";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
finalBookmarkTime = "Updated " + time;
|
2018-02-12 22:06:53 +08:00
|
|
|
if (readTime !== "") finalBookmarkTime += " \u00B7 " + readTime;
|
2018-02-11 22:00:56 +08:00
|
|
|
|
|
|
|
|
return finalBookmarkTime;
|
|
|
|
|
},
|
|
|
|
|
bookmarkImage: function (book) {
|
2018-02-12 22:06:53 +08:00
|
|
|
if (book.imageURL === "") return "";
|
|
|
|
|
return "background-image: url(" + book.imageURL + ")";
|
|
|
|
|
},
|
|
|
|
|
getDomainURL: function (url) {
|
|
|
|
|
var hostname;
|
|
|
|
|
|
|
|
|
|
if (url.indexOf("://") > -1) {
|
|
|
|
|
hostname = url.split('/')[2];
|
|
|
|
|
} else {
|
|
|
|
|
hostname = url.split('/')[0];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hostname = hostname.split(':')[0];
|
|
|
|
|
hostname = hostname.split('?')[0];
|
|
|
|
|
|
|
|
|
|
return hostname;
|
2018-02-11 22:00:56 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
gridColumns: function () {
|
|
|
|
|
var nColumn = Math.round(this.windowWidth / 500),
|
|
|
|
|
finalContent = [],
|
|
|
|
|
currentColumn = 0;
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < nColumn; i++) {
|
|
|
|
|
finalContent.push([]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < this.bookmarks.length; i++) {
|
|
|
|
|
var bookmark = this.bookmarks[i];
|
2018-02-13 17:14:08 +08:00
|
|
|
bookmark.index = i;
|
2018-02-11 22:00:56 +08:00
|
|
|
finalContent[currentColumn].push(bookmark);
|
|
|
|
|
|
|
|
|
|
currentColumn += 1;
|
|
|
|
|
if (currentColumn >= nColumn) currentColumn = 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return finalContent;
|
|
|
|
|
}
|
|
|
|
|
},
|
2018-02-13 17:14:08 +08:00
|
|
|
watch: {
|
|
|
|
|
'inputBookmark.url': function (newURL) {
|
|
|
|
|
if (newURL === "") this.clearInputBookmark();
|
|
|
|
|
else this.$nextTick(function () {
|
|
|
|
|
app.$refs.inputURL.focus();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
2018-02-11 22:00:56 +08:00
|
|
|
mounted: function () {
|
|
|
|
|
this.windowWidth = window.innerWidth;
|
|
|
|
|
window.addEventListener('resize', function () {
|
|
|
|
|
app.windowWidth = window.innerWidth;
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.loadData();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
