mirror of
https://github.com/miniflux/v2.git
synced 2025-08-16 18:01:37 +00:00
Refactor packages to have more idiomatic code base
This commit is contained in:
Frédéric Guillot
parent
c39f2e1a8d
commit
320d1b0167
109 changed files with 449 additions and 402 deletions
22
ui/static/bin.go
Normal file
22
ui/static/bin.go
Normal file
File diff suppressed because one or more lines are too long
BIN
ui/static/bin/favicon.ico
Normal file
BIN
ui/static/bin/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
ui/static/bin/favicon.png
Normal file
BIN
ui/static/bin/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 847 B |
BIN
ui/static/bin/touch-icon-ipad-retina.png
Normal file
BIN
ui/static/bin/touch-icon-ipad-retina.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
ui/static/bin/touch-icon-ipad.png
Normal file
BIN
ui/static/bin/touch-icon-ipad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
ui/static/bin/touch-icon-iphone-retina.png
Normal file
BIN
ui/static/bin/touch-icon-iphone-retina.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
ui/static/bin/touch-icon-iphone.png
Normal file
BIN
ui/static/bin/touch-icon-iphone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 947 B |
14
ui/static/css.go
Normal file
14
ui/static/css.go
Normal file
File diff suppressed because one or more lines are too long
219
ui/static/css/black.css
Normal file
219
ui/static/css/black.css
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
/* Layout */
|
||||
body {
|
||||
background: #222;
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.header li {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.header a {
|
||||
color: #ddd;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.header .active a {
|
||||
font-weight: 400;
|
||||
color: #9b9494;
|
||||
}
|
||||
|
||||
.header a:focus,
|
||||
.header a:hover {
|
||||
color: rgba(82, 168, 236, 0.85);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.logo a:hover span {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table, th, td {
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #333;
|
||||
color: #aaa;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #333;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="text"] {
|
||||
border: 1px solid #555;
|
||||
background: #333;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="text"]:focus {
|
||||
color: #efefef;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.button-primary {
|
||||
border-color: #444;
|
||||
background: #333;
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
.button-primary:hover,
|
||||
.button-primary:focus {
|
||||
border-color: #888;
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert,
|
||||
.alert-success,
|
||||
.alert-error,
|
||||
.alert-info,
|
||||
.alert-normal {
|
||||
color: #efefef;
|
||||
background-color: #333;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.panel {
|
||||
background: #333;
|
||||
border-color: #555;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
#modal-left {
|
||||
background: #333;
|
||||
color: #efefef;
|
||||
box-shadow: 0 0 10px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
/* Keyboard Shortcuts */
|
||||
.keyboard-shortcuts li {
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
/* Counter */
|
||||
.unread-counter-wrapper {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Category label */
|
||||
.category {
|
||||
color: #efefef;
|
||||
background-color: #333;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.category a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.category a:hover,
|
||||
.category a:focus {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination a {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.pagination-bottom {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
/* List view */
|
||||
.item {
|
||||
border-color: #666;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.item.current-item {
|
||||
border-width: 2px;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
.item-title a {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.item-status-read .item-title a {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.item-status-read .item-title a:focus,
|
||||
.item-status-read .item-title a:hover {
|
||||
color: rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
.item-meta a:hover,
|
||||
.item-meta a:focus {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.item-meta li:after {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* Feeds list */
|
||||
article.feed-parsing-error {
|
||||
background-color: #343434;
|
||||
}
|
||||
|
||||
.parsing-error {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/* Entry view */
|
||||
.entry header {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.entry header h1 a {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.entry-content p, ul {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.entry-content pre,
|
||||
.entry-content code {
|
||||
color: #fff;
|
||||
background: #555;
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
.entry-enclosure {
|
||||
border-color: #333;
|
||||
}
|
||||
778
ui/static/css/common.css
Normal file
778
ui/static/css/common.css
Normal file
|
|
@ -0,0 +1,778 @@
|
|||
/* Layout */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3366CC;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 0;
|
||||
color: red;
|
||||
text-decoration: none;
|
||||
border: 1px dotted #aaa;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header nav ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header li {
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
line-height: 2.1em;
|
||||
font-size: 1.2em;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
}
|
||||
|
||||
.header li:hover a {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.header a {
|
||||
font-size: 0.9em;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header .active a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header a:hover,
|
||||
.header a:focus {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-weight: 500;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
}
|
||||
|
||||
.page-header ul {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.page-header li {
|
||||
list-style-type: circle;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: #000;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.logo a:hover {
|
||||
color: #339966;
|
||||
}
|
||||
|
||||
.logo a span {
|
||||
color: #339966;
|
||||
}
|
||||
|
||||
.logo a:hover span {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
body {
|
||||
margin: auto;
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: left;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.header nav ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header li {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
padding-right: 15px;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
.page-header ul {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.page-header li {
|
||||
display: inline;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.column-40 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.column-25 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.column-20 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
line-height: 1.9em;
|
||||
}
|
||||
|
||||
div.radio-group label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
input[type="url"],
|
||||
input[type="password"],
|
||||
input[type="text"] {
|
||||
border: 1px solid #ccc;
|
||||
padding: 3px;
|
||||
line-height: 20px;
|
||||
width: 250px;
|
||||
font-size: 99%;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="text"]:focus {
|
||||
color: #000;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
::-moz-placeholder,
|
||||
::-ms-input-placeholder,
|
||||
::-webkit-input-placeholder {
|
||||
color: #ddd;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
font-size: 0.9em;
|
||||
color: brown;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
border-left: 2px dotted #ddd;
|
||||
padding-left: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid;
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
border-color: #3079ed;
|
||||
background: #4d90fe;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-primary:hover,
|
||||
.button-primary:focus {
|
||||
border-color: #2f5bb7;
|
||||
background: #357ae8;
|
||||
}
|
||||
|
||||
.button-danger {
|
||||
border-color: #b0281a;
|
||||
background: #d14836;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-danger:hover,
|
||||
.button-danger:focus {
|
||||
color: #fff;
|
||||
background: #c53727;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
color: #ccc;
|
||||
background: #f7f7f7;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 8px 35px 8px 14px;
|
||||
margin-bottom: 20px;
|
||||
color: #c09853;
|
||||
background-color: #fcf8e3;
|
||||
border: 1px solid #fbeed5;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.alert h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border-color: #d6e9c6;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #eed3d7;
|
||||
}
|
||||
|
||||
.alert-error a {
|
||||
color: #b94a48;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #3a87ad;
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.panel {
|
||||
color: #333;
|
||||
background-color: #fcfcfc;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
font-weight: 500;
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.panel ul {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
#modal-left {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 350px;
|
||||
overflow: auto;
|
||||
background: #f0f0f0;
|
||||
box-shadow: 2px 0 5px 0 #ccc;
|
||||
padding: 5px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
#modal-left h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-close-modal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 1.7em;
|
||||
color: #ccc;
|
||||
padding:0 .2em;
|
||||
margin: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-close-modal:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Keyboard Shortcuts */
|
||||
.keyboard-shortcuts li {
|
||||
margin-left: 25px;
|
||||
list-style-type: square;
|
||||
color: #333;
|
||||
font-size: 0.95em;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
|
||||
.keyboard-shortcuts p {
|
||||
line-height: 1.9em;
|
||||
}
|
||||
|
||||
/* Login form */
|
||||
.login-form {
|
||||
margin: 50px auto 0;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
/* Counter */
|
||||
.unread-counter-wrapper {
|
||||
font-size: 0.8em;
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Category label */
|
||||
.category {
|
||||
font-size: 0.75em;
|
||||
background-color: #fffcd7;
|
||||
border: 1px solid #d5d458;
|
||||
border-radius: 5px;
|
||||
margin-left: 0.25em;
|
||||
padding: 1px 0.4em 1px 0.4em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.category a:hover,
|
||||
.category a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
font-size: 1.1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.pagination-bottom {
|
||||
border-top: 1px dotted #ddd;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.pagination > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pagination-next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pagination-prev:before {
|
||||
content: "« ";
|
||||
}
|
||||
|
||||
.pagination-next:after {
|
||||
content: " »";
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pagination a:hover,
|
||||
.pagination a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* List view */
|
||||
.item {
|
||||
border: 1px dotted #ddd;
|
||||
margin-bottom: 20px;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item.current-item {
|
||||
border: 3px solid #bce;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.item-title a {
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-status-read .item-title a {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
color: #777;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.item-meta a {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.item-meta a:hover,
|
||||
.item-meta a:focus {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-meta ul {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.item-meta li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.item-meta li:after {
|
||||
content: "|";
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.item-meta li:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.hide-read-items .item-status-read {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Feeds list */
|
||||
article.feed-parsing-error {
|
||||
background-color: #fcf8e3;
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
.parsing-error {
|
||||
font-size: 0.85em;
|
||||
margin-top: 2px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.parsing-error-count {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Entry view */
|
||||
.entry header {
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px dotted #ddd;
|
||||
}
|
||||
|
||||
.entry header h1 {
|
||||
font-size: 2.0em;
|
||||
line-height: 1.25em;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.entry header h1 a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.entry header h1 a:hover,
|
||||
.entry header h1 a:focus {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.entry-actions {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.entry-actions li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.entry-actions li:not(:last-child):after {
|
||||
content: "|";
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
font-size: 0.95em;
|
||||
margin: 0 0 20px;
|
||||
color: #666;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.entry-website img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.entry-website a {
|
||||
color: #666;
|
||||
vertical-align: top;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-website a:hover,
|
||||
.entry-website a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.entry-date {
|
||||
font-size: 0.65em;
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
padding-top: 15px;
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||
color: #555;
|
||||
line-height: 1.4em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.entry-content h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.entry-content iframe,
|
||||
.entry-content video,
|
||||
.entry-content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.entry-content figure {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.entry-content figure img {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.entry-content figcaption {
|
||||
font-size: 0.75em;
|
||||
text-transform: uppercase;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.entry-content p {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.entry-content a {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.entry-content a:visited {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.entry-content dt {
|
||||
font-weight: 500;
|
||||
margin-top: 15px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.entry-content dd {
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
padding-left: 20px;
|
||||
border-left: 3px solid #ddd;
|
||||
color: #777;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.entry-content blockquote {
|
||||
border-left: 4px solid #ddd;
|
||||
padding-left: 25px;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #888;
|
||||
line-height: 1.4em;
|
||||
font-family: Georgia, serif;
|
||||
}
|
||||
|
||||
.entry-content blockquote + p {
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.entry-content q {
|
||||
color: purple;
|
||||
font-family: Georgia, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.entry-content q:before {
|
||||
content: "“";
|
||||
}
|
||||
|
||||
.entry-content q:after {
|
||||
content: "”";
|
||||
}
|
||||
|
||||
.entry-content pre {
|
||||
padding: 5px;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #ddd;
|
||||
overflow: scroll;
|
||||
overflow-wrap: initial;
|
||||
}
|
||||
|
||||
.entry-content table {
|
||||
table-layout: fixed;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.entry-content ul,
|
||||
.entry-content ol {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.entry-content ul {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.entry-enclosures h3 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.entry-enclosure {
|
||||
border: 1px dotted #ddd;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.entry-enclosure-download {
|
||||
font-size: 0.85em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.enclosure-video video,
|
||||
.enclosure-image img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Confirmation */
|
||||
.confirm {
|
||||
font-weight: 500;
|
||||
color: #ed2d04;
|
||||
}
|
||||
|
||||
.confirm a {
|
||||
color: #ed2d04;
|
||||
}
|
||||
|
||||
.loading {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Bookmarlet */
|
||||
.bookmarklet {
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bookmarklet a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
92
ui/static/js.go
Normal file
92
ui/static/js.go
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
// Code generated by go generate; DO NOT EDIT.
|
||||
// 2018-01-02 21:59:10.089270078 -0800 PST m=+0.016645407
|
||||
|
||||
package static
|
||||
|
||||
var Javascript = map[string]string{
|
||||
"app": `(function(){'use strict';class DomHelper{static isVisible(element){return element.offsetParent!==null;}
|
||||
static openNewTab(url){let win=window.open(url,"_blank");win.focus();}
|
||||
static scrollPageTo(element){let windowScrollPosition=window.pageYOffset;let windowHeight=document.documentElement.clientHeight;let viewportPosition=windowScrollPosition+windowHeight;let itemBottomPosition=element.offsetTop+element.offsetHeight;if(viewportPosition-itemBottomPosition<0||viewportPosition-element.offsetTop>windowHeight){window.scrollTo(0,element.offsetTop-10);}}
|
||||
static getVisibleElements(selector){let elements=document.querySelectorAll(selector);let result=[];for(let i=0;i<elements.length;i++){if(this.isVisible(elements[i])){result.push(elements[i]);}}
|
||||
return result;}}
|
||||
class TouchHandler{constructor(){this.reset();}
|
||||
reset(){this.touch={start:{x:-1,y:-1},move:{x:-1,y:-1},element:null};}
|
||||
calculateDistance(){if(this.touch.start.x>=-1&&this.touch.move.x>=-1){let horizontalDistance=Math.abs(this.touch.move.x-this.touch.start.x);let verticalDistance=Math.abs(this.touch.move.y-this.touch.start.y);if(horizontalDistance>30&&verticalDistance<70){return this.touch.move.x-this.touch.start.x;}}
|
||||
return 0;}
|
||||
findElement(element){if(element.classList.contains("touch-item")){return element;}
|
||||
for(;element&&element!==document;element=element.parentNode){if(element.classList.contains("touch-item")){return element;}}
|
||||
return null;}
|
||||
onTouchStart(event){if(event.touches===undefined||event.touches.length!==1){return;}
|
||||
this.reset();this.touch.start.x=event.touches[0].clientX;this.touch.start.y=event.touches[0].clientY;this.touch.element=this.findElement(event.touches[0].target);}
|
||||
onTouchMove(event){if(event.touches===undefined||event.touches.length!==1||this.element===null){return;}
|
||||
this.touch.move.x=event.touches[0].clientX;this.touch.move.y=event.touches[0].clientY;let distance=this.calculateDistance();let absDistance=Math.abs(distance);if(absDistance>0){let opacity=1-(absDistance>75?0.9:absDistance/75*0.9);let tx=distance>75?75:(distance<-75?-75:distance);this.touch.element.style.opacity=opacity;this.touch.element.style.transform="translateX("+tx+"px)";}}
|
||||
onTouchEnd(event){if(event.touches===undefined){return;}
|
||||
if(this.touch.element!==null){let distance=Math.abs(this.calculateDistance());if(distance>75){EntryHandler.toggleEntryStatus(this.touch.element);this.touch.element.style.opacity=1;this.touch.element.style.transform="none";}}
|
||||
this.reset();}
|
||||
listen(){let elements=document.querySelectorAll(".touch-item");elements.forEach((element)=>{element.addEventListener("touchstart",(e)=>this.onTouchStart(e),false);element.addEventListener("touchmove",(e)=>this.onTouchMove(e),false);element.addEventListener("touchend",(e)=>this.onTouchEnd(e),false);element.addEventListener("touchcancel",()=>this.reset(),false);});}}
|
||||
class KeyboardHandler{constructor(){this.queue=[];this.shortcuts={};}
|
||||
on(combination,callback){this.shortcuts[combination]=callback;}
|
||||
listen(){document.onkeydown=(event)=>{if(this.isEventIgnored(event)){return;}
|
||||
let key=this.getKey(event);this.queue.push(key);for(let combination in this.shortcuts){let keys=combination.split(" ");if(keys.every((value,index)=>value===this.queue[index])){this.queue=[];this.shortcuts[combination]();return;}
|
||||
if(keys.length===1&&key===keys[0]){this.queue=[];this.shortcuts[combination]();return;}}
|
||||
if(this.queue.length>=2){this.queue=[];}};}
|
||||
isEventIgnored(event){return event.target.tagName==="INPUT"||event.target.tagName==="TEXTAREA";}
|
||||
getKey(event){const mapping={'Esc':'Escape','Up':'ArrowUp','Down':'ArrowDown','Left':'ArrowLeft','Right':'ArrowRight'};for(let key in mapping){if(mapping.hasOwnProperty(key)&&key===event.key){return mapping[key];}}
|
||||
return event.key;}}
|
||||
class FormHandler{static handleSubmitButtons(){let elements=document.querySelectorAll("form");elements.forEach((element)=>{element.onsubmit=()=>{let button=document.querySelector("button");if(button){button.innerHTML=button.dataset.labelLoading;button.disabled=true;}};});}}
|
||||
class MouseHandler{onClick(selector,callback){let elements=document.querySelectorAll(selector);elements.forEach((element)=>{element.onclick=(event)=>{event.preventDefault();callback(event);};});}}
|
||||
class RequestBuilder{constructor(url){this.callback=null;this.url=url;this.options={method:"POST",cache:"no-cache",credentials:"include",body:null,headers:new Headers({"Content-Type":"application/json","X-Csrf-Token":this.getCsrfToken()})};}
|
||||
withBody(body){this.options.body=JSON.stringify(body);return this;}
|
||||
withCallback(callback){this.callback=callback;return this;}
|
||||
getCsrfToken(){let element=document.querySelector("meta[name=X-CSRF-Token]");if(element!==null){return element.getAttribute("value");}
|
||||
return "";}
|
||||
execute(){fetch(new Request(this.url,this.options)).then((response)=>{if(this.callback){this.callback(response);}});}}
|
||||
class UnreadCounterHandler{static decrement(n){this.updateValue((current)=>{return current-n;});}
|
||||
static increment(n){this.updateValue((current)=>{return current+n;});}
|
||||
static updateValue(callback){let counterElements=document.querySelectorAll("span.unread-counter");counterElements.forEach((element)=>{let oldValue=parseInt(element.textContent,10);element.innerHTML=callback(oldValue);});}}
|
||||
class EntryHandler{static updateEntriesStatus(entryIDs,status,callback){let url=document.body.dataset.entriesStatusUrl;let request=new RequestBuilder(url);request.withBody({entry_ids:entryIDs,status:status});request.withCallback(callback);request.execute();}
|
||||
static toggleEntryStatus(element){let entryID=parseInt(element.dataset.id,10);let statuses={read:"unread",unread:"read"};for(let currentStatus in statuses){let newStatus=statuses[currentStatus];if(element.classList.contains("item-status-"+currentStatus)){element.classList.remove("item-status-"+currentStatus);element.classList.add("item-status-"+newStatus);this.updateEntriesStatus([entryID],newStatus);if(newStatus==="read"){UnreadCounterHandler.decrement(1);}else{UnreadCounterHandler.increment(1);}
|
||||
break;}}}
|
||||
static toggleBookmark(element){element.innerHTML=element.dataset.labelLoading;let request=new RequestBuilder(element.dataset.bookmarkUrl);request.withCallback(()=>{if(element.dataset.value==="star"){element.innerHTML=element.dataset.labelStar;element.dataset.value="unstar";}else{element.innerHTML=element.dataset.labelUnstar;element.dataset.value="star";}});request.execute();}
|
||||
static markEntryAsRead(element){if(element.classList.contains("item-status-unread")){element.classList.remove("item-status-unread");element.classList.add("item-status-read");let entryID=parseInt(element.dataset.id,10);this.updateEntriesStatus([entryID],"read");}}
|
||||
static saveEntry(element){if(element.dataset.completed){return;}
|
||||
element.innerHTML=element.dataset.labelLoading;let request=new RequestBuilder(element.dataset.saveUrl);request.withCallback(()=>{element.innerHTML=element.dataset.labelDone;element.dataset.completed=true;});request.execute();}
|
||||
static fetchOriginalContent(element){if(element.dataset.completed){return;}
|
||||
element.innerHTML=element.dataset.labelLoading;let request=new RequestBuilder(element.dataset.fetchContentUrl);request.withCallback((response)=>{element.innerHTML=element.dataset.labelDone;element.dataset.completed=true;response.json().then((data)=>{if(data.hasOwnProperty("content")){document.querySelector(".entry-content").innerHTML=data.content;}});});request.execute();}}
|
||||
class ConfirmHandler{remove(url){let request=new RequestBuilder(url);request.withCallback(()=>window.location.reload());request.execute();}
|
||||
handle(event){let questionElement=document.createElement("span");let linkElement=event.target;let containerElement=linkElement.parentNode;linkElement.style.display="none";let yesElement=document.createElement("a");yesElement.href="#";yesElement.appendChild(document.createTextNode(linkElement.dataset.labelYes));yesElement.onclick=(event)=>{event.preventDefault();let loadingElement=document.createElement("span");loadingElement.className="loading";loadingElement.appendChild(document.createTextNode(linkElement.dataset.labelLoading));questionElement.remove();containerElement.appendChild(loadingElement);this.remove(linkElement.dataset.url);};let noElement=document.createElement("a");noElement.href="#";noElement.appendChild(document.createTextNode(linkElement.dataset.labelNo));noElement.onclick=(event)=>{event.preventDefault();linkElement.style.display="inline";questionElement.remove();};questionElement.className="confirm";questionElement.appendChild(document.createTextNode(linkElement.dataset.labelQuestion+" "));questionElement.appendChild(yesElement);questionElement.appendChild(document.createTextNode(", "));questionElement.appendChild(noElement);containerElement.appendChild(questionElement);}}
|
||||
class MenuHandler{clickMenuListItem(event){let element=event.target;if(element.tagName==="A"){window.location.href=element.getAttribute("href");}else{window.location.href=element.querySelector("a").getAttribute("href");}}
|
||||
toggleMainMenu(){let menu=document.querySelector(".header nav ul");if(DomHelper.isVisible(menu)){menu.style.display="none";}else{menu.style.display="block";}}}
|
||||
class ModalHandler{static exists(){return document.getElementById("modal-container")!==null;}
|
||||
static open(fragment){if(ModalHandler.exists()){return;}
|
||||
let container=document.createElement("div");container.id="modal-container";container.appendChild(document.importNode(fragment,true));document.body.appendChild(container);let closeButton=document.querySelector("a.btn-close-modal");if(closeButton!==null){closeButton.onclick=(event)=>{event.preventDefault();ModalHandler.close();};}}
|
||||
static close(){let container=document.getElementById("modal-container");if(container!==null){container.parentNode.removeChild(container);}}}
|
||||
class NavHandler{showKeyboardShortcuts(){let template=document.getElementById("keyboard-shortcuts");if(template!==null){ModalHandler.open(template.content);}}
|
||||
markPageAsRead(){let items=DomHelper.getVisibleElements(".items .item");let entryIDs=[];items.forEach((element)=>{element.classList.add("item-status-read");entryIDs.push(parseInt(element.dataset.id,10));});if(entryIDs.length>0){EntryHandler.updateEntriesStatus(entryIDs,"read",()=>{this.goToPage("next",true);});}}
|
||||
saveEntry(){if(this.isListView()){let currentItem=document.querySelector(".current-item");if(currentItem!==null){let saveLink=currentItem.querySelector("a[data-save-entry]");if(saveLink){EntryHandler.saveEntry(saveLink);}}}else{let saveLink=document.querySelector("a[data-save-entry]");if(saveLink){EntryHandler.saveEntry(saveLink);}}}
|
||||
fetchOriginalContent(){if(!this.isListView()){let link=document.querySelector("a[data-fetch-content-entry]");if(link){EntryHandler.fetchOriginalContent(link);}}}
|
||||
toggleEntryStatus(){let currentItem=document.querySelector(".current-item");if(currentItem!==null){this.goToNextListItem();EntryHandler.toggleEntryStatus(currentItem);}}
|
||||
toggleBookmark(){if(!this.isListView()){this.toggleBookmarkLink(document.querySelector(".entry"));return;}
|
||||
let currentItem=document.querySelector(".current-item");if(currentItem!==null){this.toggleBookmarkLink(currentItem);}}
|
||||
toggleBookmarkLink(parent){let bookmarkLink=parent.querySelector("a[data-toggle-bookmark]");if(bookmarkLink){EntryHandler.toggleBookmark(bookmarkLink);}}
|
||||
openOriginalLink(){let entryLink=document.querySelector(".entry h1 a");if(entryLink!==null){DomHelper.openNewTab(entryLink.getAttribute("href"));return;}
|
||||
let currentItemOriginalLink=document.querySelector(".current-item a[data-original-link]");if(currentItemOriginalLink!==null){DomHelper.openNewTab(currentItemOriginalLink.getAttribute("href"));let currentItem=document.querySelector(".current-item");this.goToNextListItem();EntryHandler.markEntryAsRead(currentItem);}}
|
||||
openSelectedItem(){let currentItemLink=document.querySelector(".current-item .item-title a");if(currentItemLink!==null){window.location.href=currentItemLink.getAttribute("href");}}
|
||||
goToPage(page,fallbackSelf){let element=document.querySelector("a[data-page="+page+"]");if(element){document.location.href=element.href;}else if(fallbackSelf){window.location.reload();}}
|
||||
goToPrevious(){if(this.isListView()){this.goToPreviousListItem();}else{this.goToPage("previous");}}
|
||||
goToNext(){if(this.isListView()){this.goToNextListItem();}else{this.goToPage("next");}}
|
||||
goToPreviousListItem(){let items=DomHelper.getVisibleElements(".items .item");if(items.length===0){return;}
|
||||
if(document.querySelector(".current-item")===null){items[0].classList.add("current-item");return;}
|
||||
for(let i=0;i<items.length;i++){if(items[i].classList.contains("current-item")){items[i].classList.remove("current-item");if(i-1>=0){items[i-1].classList.add("current-item");DomHelper.scrollPageTo(items[i-1]);}
|
||||
break;}}}
|
||||
goToNextListItem(){let currentItem=document.querySelector(".current-item");let items=DomHelper.getVisibleElements(".items .item");if(items.length===0){return;}
|
||||
if(currentItem===null){items[0].classList.add("current-item");return;}
|
||||
for(let i=0;i<items.length;i++){if(items[i].classList.contains("current-item")){items[i].classList.remove("current-item");if(i+1<items.length){items[i+1].classList.add("current-item");DomHelper.scrollPageTo(items[i+1]);}
|
||||
break;}}}
|
||||
isListView(){return document.querySelector(".items")!==null;}}
|
||||
document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmitButtons();let touchHandler=new TouchHandler();touchHandler.listen();let navHandler=new NavHandler();let keyboardHandler=new KeyboardHandler();keyboardHandler.on("g u",()=>navHandler.goToPage("unread"));keyboardHandler.on("g b",()=>navHandler.goToPage("starred"));keyboardHandler.on("g h",()=>navHandler.goToPage("history"));keyboardHandler.on("g f",()=>navHandler.goToPage("feeds"));keyboardHandler.on("g c",()=>navHandler.goToPage("categories"));keyboardHandler.on("g s",()=>navHandler.goToPage("settings"));keyboardHandler.on("ArrowLeft",()=>navHandler.goToPrevious());keyboardHandler.on("ArrowRight",()=>navHandler.goToNext());keyboardHandler.on("j",()=>navHandler.goToPrevious());keyboardHandler.on("p",()=>navHandler.goToPrevious());keyboardHandler.on("k",()=>navHandler.goToNext());keyboardHandler.on("n",()=>navHandler.goToNext());keyboardHandler.on("h",()=>navHandler.goToPage("previous"));keyboardHandler.on("l",()=>navHandler.goToPage("next"));keyboardHandler.on("o",()=>navHandler.openSelectedItem());keyboardHandler.on("v",()=>navHandler.openOriginalLink());keyboardHandler.on("m",()=>navHandler.toggleEntryStatus());keyboardHandler.on("A",()=>navHandler.markPageAsRead());keyboardHandler.on("s",()=>navHandler.saveEntry());keyboardHandler.on("d",()=>navHandler.fetchOriginalContent());keyboardHandler.on("f",()=>navHandler.toggleBookmark());keyboardHandler.on("?",()=>navHandler.showKeyboardShortcuts());keyboardHandler.on("Escape",()=>ModalHandler.close());keyboardHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-save-entry]",(event)=>{event.preventDefault();EntryHandler.saveEntry(event.target);});mouseHandler.onClick("a[data-toggle-bookmark]",(event)=>{event.preventDefault();EntryHandler.toggleBookmark(event.target);});mouseHandler.onClick("a[data-fetch-content-entry]",(event)=>{event.preventDefault();EntryHandler.fetchOriginalContent(event.target);});mouseHandler.onClick("a[data-on-click=markPageAsRead]",()=>navHandler.markPageAsRead());mouseHandler.onClick("a[data-confirm]",(event)=>{(new ConfirmHandler()).handle(event);});if(document.documentElement.clientWidth<600){let menuHandler=new MenuHandler();mouseHandler.onClick(".logo",()=>menuHandler.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>menuHandler.clickMenuListItem(event));}});})();`,
|
||||
}
|
||||
|
||||
var JavascriptChecksums = map[string]string{
|
||||
"app": "36dfcfb33ddc3f75f701fc4353873e2ce6da813dbfdd3b37100a4475a32b0545",
|
||||
}
|
||||
748
ui/static/js/app.js
Normal file
748
ui/static/js/app.js
Normal file
|
|
@ -0,0 +1,748 @@
|
|||
/*jshint esversion: 6 */
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
class DomHelper {
|
||||
static isVisible(element) {
|
||||
return element.offsetParent !== null;
|
||||
}
|
||||
|
||||
static openNewTab(url) {
|
||||
let win = window.open(url, "_blank");
|
||||
win.focus();
|
||||
}
|
||||
|
||||
static scrollPageTo(element) {
|
||||
let windowScrollPosition = window.pageYOffset;
|
||||
let windowHeight = document.documentElement.clientHeight;
|
||||
let viewportPosition = windowScrollPosition + windowHeight;
|
||||
let itemBottomPosition = element.offsetTop + element.offsetHeight;
|
||||
|
||||
if (viewportPosition - itemBottomPosition < 0 || viewportPosition - element.offsetTop > windowHeight) {
|
||||
window.scrollTo(0, element.offsetTop - 10);
|
||||
}
|
||||
}
|
||||
|
||||
static getVisibleElements(selector) {
|
||||
let elements = document.querySelectorAll(selector);
|
||||
let result = [];
|
||||
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
if (this.isVisible(elements[i])) {
|
||||
result.push(elements[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
class TouchHandler {
|
||||
constructor() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.touch = {
|
||||
start: {x: -1, y: -1},
|
||||
move: {x: -1, y: -1},
|
||||
element: null
|
||||
};
|
||||
}
|
||||
|
||||
calculateDistance() {
|
||||
if (this.touch.start.x >= -1 && this.touch.move.x >= -1) {
|
||||
let horizontalDistance = Math.abs(this.touch.move.x - this.touch.start.x);
|
||||
let verticalDistance = Math.abs(this.touch.move.y - this.touch.start.y);
|
||||
|
||||
if (horizontalDistance > 30 && verticalDistance < 70) {
|
||||
return this.touch.move.x - this.touch.start.x;
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
findElement(element) {
|
||||
if (element.classList.contains("touch-item")) {
|
||||
return element;
|
||||
}
|
||||
|
||||
for (; element && element !== document; element = element.parentNode) {
|
||||
if (element.classList.contains("touch-item")) {
|
||||
return element;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
onTouchStart(event) {
|
||||
if (event.touches === undefined || event.touches.length !== 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.reset();
|
||||
this.touch.start.x = event.touches[0].clientX;
|
||||
this.touch.start.y = event.touches[0].clientY;
|
||||
this.touch.element = this.findElement(event.touches[0].target);
|
||||
}
|
||||
|
||||
onTouchMove(event) {
|
||||
if (event.touches === undefined || event.touches.length !== 1 || this.element === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.touch.move.x = event.touches[0].clientX;
|
||||
this.touch.move.y = event.touches[0].clientY;
|
||||
|
||||
let distance = this.calculateDistance();
|
||||
let absDistance = Math.abs(distance);
|
||||
|
||||
if (absDistance > 0) {
|
||||
let opacity = 1 - (absDistance > 75 ? 0.9 : absDistance / 75 * 0.9);
|
||||
let tx = distance > 75 ? 75 : (distance < -75 ? -75 : distance);
|
||||
|
||||
this.touch.element.style.opacity = opacity;
|
||||
this.touch.element.style.transform = "translateX(" + tx + "px)";
|
||||
}
|
||||
}
|
||||
|
||||
onTouchEnd(event) {
|
||||
if (event.touches === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.touch.element !== null) {
|
||||
let distance = Math.abs(this.calculateDistance());
|
||||
|
||||
if (distance > 75) {
|
||||
EntryHandler.toggleEntryStatus(this.touch.element);
|
||||
this.touch.element.style.opacity = 1;
|
||||
this.touch.element.style.transform = "none";
|
||||
}
|
||||
}
|
||||
|
||||
this.reset();
|
||||
}
|
||||
|
||||
listen() {
|
||||
let elements = document.querySelectorAll(".touch-item");
|
||||
|
||||
elements.forEach((element) => {
|
||||
element.addEventListener("touchstart", (e) => this.onTouchStart(e), false);
|
||||
element.addEventListener("touchmove", (e) => this.onTouchMove(e), false);
|
||||
element.addEventListener("touchend", (e) => this.onTouchEnd(e), false);
|
||||
element.addEventListener("touchcancel", () => this.reset(), false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class KeyboardHandler {
|
||||
constructor() {
|
||||
this.queue = [];
|
||||
this.shortcuts = {};
|
||||
}
|
||||
|
||||
on(combination, callback) {
|
||||
this.shortcuts[combination] = callback;
|
||||
}
|
||||
|
||||
listen() {
|
||||
document.onkeydown = (event) => {
|
||||
if (this.isEventIgnored(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let key = this.getKey(event);
|
||||
this.queue.push(key);
|
||||
|
||||
for (let combination in this.shortcuts) {
|
||||
let keys = combination.split(" ");
|
||||
|
||||
if (keys.every((value, index) => value === this.queue[index])) {
|
||||
this.queue = [];
|
||||
this.shortcuts[combination]();
|
||||
return;
|
||||
}
|
||||
|
||||
if (keys.length === 1 && key === keys[0]) {
|
||||
this.queue = [];
|
||||
this.shortcuts[combination]();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.queue.length >= 2) {
|
||||
this.queue = [];
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
isEventIgnored(event) {
|
||||
return event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA";
|
||||
}
|
||||
|
||||
getKey(event) {
|
||||
const mapping = {
|
||||
'Esc': 'Escape',
|
||||
'Up': 'ArrowUp',
|
||||
'Down': 'ArrowDown',
|
||||
'Left': 'ArrowLeft',
|
||||
'Right': 'ArrowRight'
|
||||
};
|
||||
|
||||
for (let key in mapping) {
|
||||
if (mapping.hasOwnProperty(key) && key === event.key) {
|
||||
return mapping[key];
|
||||
}
|
||||
}
|
||||
|
||||
return event.key;
|
||||
}
|
||||
}
|
||||
|
||||
class FormHandler {
|
||||
static handleSubmitButtons() {
|
||||
let elements = document.querySelectorAll("form");
|
||||
elements.forEach((element) => {
|
||||
element.onsubmit = () => {
|
||||
let button = document.querySelector("button");
|
||||
|
||||
if (button) {
|
||||
button.innerHTML = button.dataset.labelLoading;
|
||||
button.disabled = true;
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class MouseHandler {
|
||||
onClick(selector, callback) {
|
||||
let elements = document.querySelectorAll(selector);
|
||||
elements.forEach((element) => {
|
||||
element.onclick = (event) => {
|
||||
event.preventDefault();
|
||||
callback(event);
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class RequestBuilder {
|
||||
constructor(url) {
|
||||
this.callback = null;
|
||||
this.url = url;
|
||||
this.options = {
|
||||
method: "POST",
|
||||
cache: "no-cache",
|
||||
credentials: "include",
|
||||
body: null,
|
||||
headers: new Headers({
|
||||
"Content-Type": "application/json",
|
||||
"X-Csrf-Token": this.getCsrfToken()
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
withBody(body) {
|
||||
this.options.body = JSON.stringify(body);
|
||||
return this;
|
||||
}
|
||||
|
||||
withCallback(callback) {
|
||||
this.callback = callback;
|
||||
return this;
|
||||
}
|
||||
|
||||
getCsrfToken() {
|
||||
let element = document.querySelector("meta[name=X-CSRF-Token]");
|
||||
if (element !== null) {
|
||||
return element.getAttribute("value");
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
execute() {
|
||||
fetch(new Request(this.url, this.options)).then((response) => {
|
||||
if (this.callback) {
|
||||
this.callback(response);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class UnreadCounterHandler {
|
||||
static decrement(n) {
|
||||
this.updateValue((current) => {
|
||||
return current - n;
|
||||
});
|
||||
}
|
||||
|
||||
static increment(n) {
|
||||
this.updateValue((current) => {
|
||||
return current + n;
|
||||
});
|
||||
}
|
||||
|
||||
static updateValue(callback) {
|
||||
let counterElements = document.querySelectorAll("span.unread-counter");
|
||||
counterElements.forEach((element) => {
|
||||
let oldValue = parseInt(element.textContent, 10);
|
||||
element.innerHTML = callback(oldValue);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class EntryHandler {
|
||||
static updateEntriesStatus(entryIDs, status, callback) {
|
||||
let url = document.body.dataset.entriesStatusUrl;
|
||||
let request = new RequestBuilder(url);
|
||||
request.withBody({entry_ids: entryIDs, status: status});
|
||||
request.withCallback(callback);
|
||||
request.execute();
|
||||
}
|
||||
|
||||
static toggleEntryStatus(element) {
|
||||
let entryID = parseInt(element.dataset.id, 10);
|
||||
let statuses = {read: "unread", unread: "read"};
|
||||
|
||||
for (let currentStatus in statuses) {
|
||||
let newStatus = statuses[currentStatus];
|
||||
|
||||
if (element.classList.contains("item-status-" + currentStatus)) {
|
||||
element.classList.remove("item-status-" + currentStatus);
|
||||
element.classList.add("item-status-" + newStatus);
|
||||
|
||||
this.updateEntriesStatus([entryID], newStatus);
|
||||
|
||||
if (newStatus === "read") {
|
||||
UnreadCounterHandler.decrement(1);
|
||||
} else {
|
||||
UnreadCounterHandler.increment(1);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static toggleBookmark(element) {
|
||||
element.innerHTML = element.dataset.labelLoading;
|
||||
|
||||
let request = new RequestBuilder(element.dataset.bookmarkUrl);
|
||||
request.withCallback(() => {
|
||||
if (element.dataset.value === "star") {
|
||||
element.innerHTML = element.dataset.labelStar;
|
||||
element.dataset.value = "unstar";
|
||||
} else {
|
||||
element.innerHTML = element.dataset.labelUnstar;
|
||||
element.dataset.value = "star";
|
||||
}
|
||||
});
|
||||
request.execute();
|
||||
}
|
||||
|
||||
static markEntryAsRead(element) {
|
||||
if (element.classList.contains("item-status-unread")) {
|
||||
element.classList.remove("item-status-unread");
|
||||
element.classList.add("item-status-read");
|
||||
|
||||
let entryID = parseInt(element.dataset.id, 10);
|
||||
this.updateEntriesStatus([entryID], "read");
|
||||
}
|
||||
}
|
||||
|
||||
static saveEntry(element) {
|
||||
if (element.dataset.completed) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.innerHTML = element.dataset.labelLoading;
|
||||
|
||||
let request = new RequestBuilder(element.dataset.saveUrl);
|
||||
request.withCallback(() => {
|
||||
element.innerHTML = element.dataset.labelDone;
|
||||
element.dataset.completed = true;
|
||||
});
|
||||
request.execute();
|
||||
}
|
||||
|
||||
static fetchOriginalContent(element) {
|
||||
if (element.dataset.completed) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.innerHTML = element.dataset.labelLoading;
|
||||
|
||||
let request = new RequestBuilder(element.dataset.fetchContentUrl);
|
||||
request.withCallback((response) => {
|
||||
element.innerHTML = element.dataset.labelDone;
|
||||
element.dataset.completed = true;
|
||||
|
||||
response.json().then((data) => {
|
||||
if (data.hasOwnProperty("content")) {
|
||||
document.querySelector(".entry-content").innerHTML = data.content;
|
||||
}
|
||||
});
|
||||
});
|
||||
request.execute();
|
||||
}
|
||||
}
|
||||
|
||||
class ConfirmHandler {
|
||||
remove(url) {
|
||||
let request = new RequestBuilder(url);
|
||||
request.withCallback(() => window.location.reload());
|
||||
request.execute();
|
||||
}
|
||||
|
||||
handle(event) {
|
||||
let questionElement = document.createElement("span");
|
||||
let linkElement = event.target;
|
||||
let containerElement = linkElement.parentNode;
|
||||
linkElement.style.display = "none";
|
||||
|
||||
let yesElement = document.createElement("a");
|
||||
yesElement.href = "#";
|
||||
yesElement.appendChild(document.createTextNode(linkElement.dataset.labelYes));
|
||||
yesElement.onclick = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
let loadingElement = document.createElement("span");
|
||||
loadingElement.className = "loading";
|
||||
loadingElement.appendChild(document.createTextNode(linkElement.dataset.labelLoading));
|
||||
|
||||
questionElement.remove();
|
||||
containerElement.appendChild(loadingElement);
|
||||
|
||||
this.remove(linkElement.dataset.url);
|
||||
};
|
||||
|
||||
let noElement = document.createElement("a");
|
||||
noElement.href = "#";
|
||||
noElement.appendChild(document.createTextNode(linkElement.dataset.labelNo));
|
||||
noElement.onclick = (event) => {
|
||||
event.preventDefault();
|
||||
linkElement.style.display = "inline";
|
||||
questionElement.remove();
|
||||
};
|
||||
|
||||
questionElement.className = "confirm";
|
||||
questionElement.appendChild(document.createTextNode(linkElement.dataset.labelQuestion + " "));
|
||||
questionElement.appendChild(yesElement);
|
||||
questionElement.appendChild(document.createTextNode(", "));
|
||||
questionElement.appendChild(noElement);
|
||||
|
||||
containerElement.appendChild(questionElement);
|
||||
}
|
||||
}
|
||||
|
||||
class MenuHandler {
|
||||
clickMenuListItem(event) {
|
||||
let element = event.target;
|
||||
|
||||
if (element.tagName === "A") {
|
||||
window.location.href = element.getAttribute("href");
|
||||
} else {
|
||||
window.location.href = element.querySelector("a").getAttribute("href");
|
||||
}
|
||||
}
|
||||
|
||||
toggleMainMenu() {
|
||||
let menu = document.querySelector(".header nav ul");
|
||||
if (DomHelper.isVisible(menu)) {
|
||||
menu.style.display = "none";
|
||||
} else {
|
||||
menu.style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ModalHandler {
|
||||
static exists() {
|
||||
return document.getElementById("modal-container") !== null;
|
||||
}
|
||||
|
||||
static open(fragment) {
|
||||
if (ModalHandler.exists()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let container = document.createElement("div");
|
||||
container.id = "modal-container";
|
||||
container.appendChild(document.importNode(fragment, true));
|
||||
document.body.appendChild(container);
|
||||
|
||||
let closeButton = document.querySelector("a.btn-close-modal");
|
||||
if (closeButton !== null) {
|
||||
closeButton.onclick = (event) => {
|
||||
event.preventDefault();
|
||||
ModalHandler.close();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
static close() {
|
||||
let container = document.getElementById("modal-container");
|
||||
if (container !== null) {
|
||||
container.parentNode.removeChild(container);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class NavHandler {
|
||||
showKeyboardShortcuts() {
|
||||
let template = document.getElementById("keyboard-shortcuts");
|
||||
if (template !== null) {
|
||||
ModalHandler.open(template.content);
|
||||
}
|
||||
}
|
||||
|
||||
markPageAsRead() {
|
||||
let items = DomHelper.getVisibleElements(".items .item");
|
||||
let entryIDs = [];
|
||||
|
||||
items.forEach((element) => {
|
||||
element.classList.add("item-status-read");
|
||||
entryIDs.push(parseInt(element.dataset.id, 10));
|
||||
});
|
||||
|
||||
if (entryIDs.length > 0) {
|
||||
EntryHandler.updateEntriesStatus(entryIDs, "read", () => {
|
||||
// This callback make sure the Ajax request reach the server before we reload the page.
|
||||
this.goToPage("next", true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
saveEntry() {
|
||||
if (this.isListView()) {
|
||||
let currentItem = document.querySelector(".current-item");
|
||||
if (currentItem !== null) {
|
||||
let saveLink = currentItem.querySelector("a[data-save-entry]");
|
||||
if (saveLink) {
|
||||
EntryHandler.saveEntry(saveLink);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let saveLink = document.querySelector("a[data-save-entry]");
|
||||
if (saveLink) {
|
||||
EntryHandler.saveEntry(saveLink);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchOriginalContent() {
|
||||
if (! this.isListView()){
|
||||
let link = document.querySelector("a[data-fetch-content-entry]");
|
||||
if (link) {
|
||||
EntryHandler.fetchOriginalContent(link);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toggleEntryStatus() {
|
||||
let currentItem = document.querySelector(".current-item");
|
||||
if (currentItem !== null) {
|
||||
// The order is important here,
|
||||
// On the unread page, the read item will be hidden.
|
||||
this.goToNextListItem();
|
||||
EntryHandler.toggleEntryStatus(currentItem);
|
||||
}
|
||||
}
|
||||
|
||||
toggleBookmark() {
|
||||
if (! this.isListView()) {
|
||||
this.toggleBookmarkLink(document.querySelector(".entry"));
|
||||
return;
|
||||
}
|
||||
|
||||
let currentItem = document.querySelector(".current-item");
|
||||
if (currentItem !== null) {
|
||||
this.toggleBookmarkLink(currentItem);
|
||||
}
|
||||
}
|
||||
|
||||
toggleBookmarkLink(parent) {
|
||||
let bookmarkLink = parent.querySelector("a[data-toggle-bookmark]");
|
||||
if (bookmarkLink) {
|
||||
EntryHandler.toggleBookmark(bookmarkLink);
|
||||
}
|
||||
}
|
||||
|
||||
openOriginalLink() {
|
||||
let entryLink = document.querySelector(".entry h1 a");
|
||||
if (entryLink !== null) {
|
||||
DomHelper.openNewTab(entryLink.getAttribute("href"));
|
||||
return;
|
||||
}
|
||||
|
||||
let currentItemOriginalLink = document.querySelector(".current-item a[data-original-link]");
|
||||
if (currentItemOriginalLink !== null) {
|
||||
DomHelper.openNewTab(currentItemOriginalLink.getAttribute("href"));
|
||||
|
||||
// Move to the next item and if we are on the unread page mark this item as read.
|
||||
let currentItem = document.querySelector(".current-item");
|
||||
this.goToNextListItem();
|
||||
EntryHandler.markEntryAsRead(currentItem);
|
||||
}
|
||||
}
|
||||
|
||||
openSelectedItem() {
|
||||
let currentItemLink = document.querySelector(".current-item .item-title a");
|
||||
if (currentItemLink !== null) {
|
||||
window.location.href = currentItemLink.getAttribute("href");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} page Page to redirect to.
|
||||
* @param {boolean} fallbackSelf Refresh actual page if the page is not found.
|
||||
*/
|
||||
goToPage(page, fallbackSelf) {
|
||||
let element = document.querySelector("a[data-page=" + page + "]");
|
||||
|
||||
if (element) {
|
||||
document.location.href = element.href;
|
||||
} else if (fallbackSelf) {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
goToPrevious() {
|
||||
if (this.isListView()) {
|
||||
this.goToPreviousListItem();
|
||||
} else {
|
||||
this.goToPage("previous");
|
||||
}
|
||||
}
|
||||
|
||||
goToNext() {
|
||||
if (this.isListView()) {
|
||||
this.goToNextListItem();
|
||||
} else {
|
||||
this.goToPage("next");
|
||||
}
|
||||
}
|
||||
|
||||
goToPreviousListItem() {
|
||||
let items = DomHelper.getVisibleElements(".items .item");
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (document.querySelector(".current-item") === null) {
|
||||
items[0].classList.add("current-item");
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].classList.contains("current-item")) {
|
||||
items[i].classList.remove("current-item");
|
||||
|
||||
if (i - 1 >= 0) {
|
||||
items[i - 1].classList.add("current-item");
|
||||
DomHelper.scrollPageTo(items[i - 1]);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
goToNextListItem() {
|
||||
let currentItem = document.querySelector(".current-item");
|
||||
let items = DomHelper.getVisibleElements(".items .item");
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentItem === null) {
|
||||
items[0].classList.add("current-item");
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].classList.contains("current-item")) {
|
||||
items[i].classList.remove("current-item");
|
||||
|
||||
if (i + 1 < items.length) {
|
||||
items[i + 1].classList.add("current-item");
|
||||
DomHelper.scrollPageTo(items[i + 1]);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isListView() {
|
||||
return document.querySelector(".items") !== null;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
FormHandler.handleSubmitButtons();
|
||||
|
||||
let touchHandler = new TouchHandler();
|
||||
touchHandler.listen();
|
||||
|
||||
let navHandler = new NavHandler();
|
||||
let keyboardHandler = new KeyboardHandler();
|
||||
keyboardHandler.on("g u", () => navHandler.goToPage("unread"));
|
||||
keyboardHandler.on("g b", () => navHandler.goToPage("starred"));
|
||||
keyboardHandler.on("g h", () => navHandler.goToPage("history"));
|
||||
keyboardHandler.on("g f", () => navHandler.goToPage("feeds"));
|
||||
keyboardHandler.on("g c", () => navHandler.goToPage("categories"));
|
||||
keyboardHandler.on("g s", () => navHandler.goToPage("settings"));
|
||||
keyboardHandler.on("ArrowLeft", () => navHandler.goToPrevious());
|
||||
keyboardHandler.on("ArrowRight", () => navHandler.goToNext());
|
||||
keyboardHandler.on("j", () => navHandler.goToPrevious());
|
||||
keyboardHandler.on("p", () => navHandler.goToPrevious());
|
||||
keyboardHandler.on("k", () => navHandler.goToNext());
|
||||
keyboardHandler.on("n", () => navHandler.goToNext());
|
||||
keyboardHandler.on("h", () => navHandler.goToPage("previous"));
|
||||
keyboardHandler.on("l", () => navHandler.goToPage("next"));
|
||||
keyboardHandler.on("o", () => navHandler.openSelectedItem());
|
||||
keyboardHandler.on("v", () => navHandler.openOriginalLink());
|
||||
keyboardHandler.on("m", () => navHandler.toggleEntryStatus());
|
||||
keyboardHandler.on("A", () => navHandler.markPageAsRead());
|
||||
keyboardHandler.on("s", () => navHandler.saveEntry());
|
||||
keyboardHandler.on("d", () => navHandler.fetchOriginalContent());
|
||||
keyboardHandler.on("f", () => navHandler.toggleBookmark());
|
||||
keyboardHandler.on("?", () => navHandler.showKeyboardShortcuts());
|
||||
keyboardHandler.on("Escape", () => ModalHandler.close());
|
||||
keyboardHandler.listen();
|
||||
|
||||
let mouseHandler = new MouseHandler();
|
||||
mouseHandler.onClick("a[data-save-entry]", (event) => {
|
||||
event.preventDefault();
|
||||
EntryHandler.saveEntry(event.target);
|
||||
});
|
||||
|
||||
mouseHandler.onClick("a[data-toggle-bookmark]", (event) => {
|
||||
event.preventDefault();
|
||||
EntryHandler.toggleBookmark(event.target);
|
||||
});
|
||||
|
||||
mouseHandler.onClick("a[data-fetch-content-entry]", (event) => {
|
||||
event.preventDefault();
|
||||
EntryHandler.fetchOriginalContent(event.target);
|
||||
});
|
||||
|
||||
mouseHandler.onClick("a[data-on-click=markPageAsRead]", () => navHandler.markPageAsRead());
|
||||
mouseHandler.onClick("a[data-confirm]", (event) => {
|
||||
(new ConfirmHandler()).handle(event);
|
||||
});
|
||||
|
||||
if (document.documentElement.clientWidth < 600) {
|
||||
let menuHandler = new MenuHandler();
|
||||
mouseHandler.onClick(".logo", () => menuHandler.toggleMainMenu());
|
||||
mouseHandler.onClick(".header nav li", (event) => menuHandler.clickMenuListItem(event));
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue