Update unread counter when using keyboard to navigate

This commit is contained in:
Frédéric Guillot 2017-12-28 18:59:17 -08:00
parent 8cd58a746a
commit 519d4fcd73
11 changed files with 62 additions and 25 deletions

View File

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT.
// 2017-12-28 16:23:44.392632301 -0800 PST m=+0.031688555
// 2017-12-28 18:55:07.409784145 -0800 PST m=+0.036504731
package locale
@ -208,12 +208,13 @@ var translations = map[string]string{
"Mark current page as read": "Marquer la page actuelle comme lu",
"Download original content": "Télécharger le contenu original",
"Toggle bookmark": "Ajouter/Enlever favoris",
"Close modal dialog": "Fermer la boite de dialogue"
"Close modal dialog": "Fermer la boite de dialogue",
"Save article": "Sauvegarder l'article"
}
`,
}
var translationsChecksums = map[string]string{
"en_US": "6fe95384260941e8a5a3c695a655a932e0a8a6a572c1e45cb2b1ae8baa01b897",
"fr_FR": "a90e274772846853cfe95148ac54bec9a658e09397b58de8047bdaed1099ded2",
"fr_FR": "30f70cf369dae3e0461e44a444be56d657d7d381801c321e7312886e75278c81",
}

View File

@ -192,5 +192,6 @@
"Mark current page as read": "Marquer la page actuelle comme lu",
"Download original content": "Télécharger le contenu original",
"Toggle bookmark": "Ajouter/Enlever favoris",
"Close modal dialog": "Fermer la boite de dialogue"
"Close modal dialog": "Fermer la boite de dialogue",
"Save article": "Sauvegarder l'article"
}

File diff suppressed because one or more lines are too long

View File

@ -121,7 +121,7 @@ input[type="text"]:focus {
}
/* Counter */
.unread-counter {
.unread-counter-wrapper {
color: #bbb;
}

View File

@ -407,7 +407,7 @@ a.button {
}
/* Counter */
.unread-counter {
.unread-counter-wrapper {
font-size: 0.8em;
font-weight: 300;
color: #666;

View File

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT.
// 2017-12-28 16:23:44.379810113 -0800 PST m=+0.018866367
// 2017-12-28 18:55:07.395760341 -0800 PST m=+0.022480927
package static
@ -33,7 +33,7 @@ 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(function(element){element.onsubmit=function(){let button=document.querySelector("button");if(button){button.innerHTML=button.dataset.labelLoading;button.disabled=true;}};});}}
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;}
@ -41,8 +41,12 @@ 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);break;}}}
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;}
@ -84,5 +88,5 @@ document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmit
}
var JavascriptChecksums = map[string]string{
"app": "ce54b41f6bc03c7939ff07420714462f32787aa2c71ae2da953843dc5c232dce",
"app": "36dfcfb33ddc3f75f701fc4353873e2ce6da813dbfdd3b37100a4475a32b0545",
}

View File

@ -205,8 +205,8 @@ class KeyboardHandler {
class FormHandler {
static handleSubmitButtons() {
let elements = document.querySelectorAll("form");
elements.forEach(function (element) {
element.onsubmit = function () {
elements.forEach((element) => {
element.onsubmit = () => {
let button = document.querySelector("button");
if (button) {
@ -274,6 +274,28 @@ class RequestBuilder {
}
}
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;
@ -295,6 +317,13 @@ class EntryHandler {
element.classList.add("item-status-" + newStatus);
this.updateEntriesStatus([entryID], newStatus);
if (newStatus === "read") {
UnreadCounterHandler.decrement(1);
} else {
UnreadCounterHandler.increment(1);
}
break;
}
}

View File

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT.
// 2017-12-28 16:23:44.391520701 -0800 PST m=+0.030576955
// 2017-12-28 18:55:07.408638507 -0800 PST m=+0.035359093
package template
@ -67,7 +67,7 @@ var templateCommonMap = map[string]string{
<li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "Keyboard Shortcut: %s" "g u" }}">
<a href="{{ route "unread" }}" data-page="unread">{{ t "Unread" }}</a>
{{ if gt .countUnread 0 }}
<span class="unread-counter" title="Unread articles">({{ .countUnread }})</span>
<span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
{{ end }}
</li>
<li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "Keyboard Shortcut: %s" "g b" }}">
@ -138,6 +138,7 @@ var templateCommonMap = map[string]string{
<li>{{ t "Mark current page as read" }} = <strong>A</strong></li>
<li>{{ t "Download original content" }} = <strong>d</strong></li>
<li>{{ t "Toggle bookmark" }} = <strong>f</strong></li>
<li>{{ t "Save article" }} = <strong>s</strong></li>
<li>{{ t "Close modal dialog" }} = <strong>Esc</strong></li>
</ul>
</div>
@ -170,6 +171,6 @@ var templateCommonMap = map[string]string{
var templateCommonMapChecksums = map[string]string{
"entry_pagination": "f1465fa70f585ae8043b200ec9de5bf437ffbb0c19fb7aefc015c3555614ee27",
"layout": "b5bfaddd2e8b5ba25fc0b5a9af70dd269605c6637788f9d1e5d8475d89716465",
"layout": "83786d9e657a17cb531007b5639dc021b7cb2bff1a19162769b3a961a22e5087",
"pagination": "6ff462c2b2a53bc5448b651da017f40a39f1d4f16cef4b2f09784f0797286924",
}

View File

@ -42,7 +42,7 @@
<li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "Keyboard Shortcut: %s" "g u" }}">
<a href="{{ route "unread" }}" data-page="unread">{{ t "Unread" }}</a>
{{ if gt .countUnread 0 }}
<span class="unread-counter" title="Unread articles">({{ .countUnread }})</span>
<span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
{{ end }}
</li>
<li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "Keyboard Shortcut: %s" "g b" }}">
@ -113,6 +113,7 @@
<li>{{ t "Mark current page as read" }} = <strong>A</strong></li>
<li>{{ t "Download original content" }} = <strong>d</strong></li>
<li>{{ t "Toggle bookmark" }} = <strong>f</strong></li>
<li>{{ t "Save article" }} = <strong>s</strong></li>
<li>{{ t "Close modal dialog" }} = <strong>Esc</strong></li>
</ul>
</div>

View File

@ -2,7 +2,7 @@
{{ define "content"}}
<section class="page-header">
<h1>{{ t "Unread" }} ({{ .countUnread }})</h1>
<h1>{{ t "Unread" }} (<span class="unread-counter">{{ .countUnread }}</span>)</h1>
{{ if .entries }}
<ul>
<li>

View File

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT.
// 2017-12-27 19:43:16.083344083 -0800 PST m=+0.026431102
// 2017-12-28 18:55:07.399522774 -0800 PST m=+0.026243360
package template
@ -1203,7 +1203,7 @@ var templateViewsMap = map[string]string{
{{ define "content"}}
<section class="page-header">
<h1>{{ t "Unread" }} ({{ .countUnread }})</h1>
<h1>{{ t "Unread" }} (<span class="unread-counter">{{ .countUnread }}</span>)</h1>
{{ if .entries }}
<ul>
<li>
@ -1351,6 +1351,6 @@ var templateViewsMapChecksums = map[string]string{
"sessions": "878dbe8f8ea783b44130c495814179519fa5c3aa2666ac87508f94d58dd008bf",
"settings": "ea2505b9d0a6d6bb594dba87a92079de19baa6d494f0651693a7685489fb7de9",
"starred": "33dd40d1a24739e9d05f9cc4b66497cfdb8c86a7abb209a66ca65c2fbafc7d87",
"unread": "d990b41e03912600f10069b33376c541a8ef518f302a60fd28763e97d44c85ba",
"unread": "f4eb7410925e174918f1b55414c9b0b81632f7e13ce649579c8593097bb0f1d7",
"users": "44677e28bb5347799ed0020c90ec785aadec4b1454446d92411cfdaf6e32110b",
}