southfox/miniflux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Handle touch events

Browse source
This commit is contained in:
Frédéric Guillot 2017-12-02 15:01:05 -08:00
parent 677ba1eef3
commit 453ff64f29
9 changed files with 321 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
server/static/js.go
View file

@ -1,10 +1,30 @@
// Code generated by go generate; DO NOT EDIT. // Code generated by go generate; DO NOT EDIT.
// 2017-11-27 21:07:53.215205872 -0800 PST m=+0.009392100 // 2017-12-02 14:53:55.175825378 -0800 PST m=+0.009022020
package static package static
var Javascript = map[string]string{ var Javascript = map[string]string{
"app": `(function(){'use strict';class KeyboardHandler{constructor(){this.queue=[];this.shortcuts={};} "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;} on(combination,callback){this.shortcuts[combination]=callback;}
listen(){document.onkeydown=(event)=>{if(this.isEventIgnored(event)){return;} 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;} 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;}
@ -15,40 +35,39 @@ getKey(event){const mapping={'Esc':'Escape','Up':'ArrowUp','Down':'ArrowDown','L
return event.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(function(element){element.onsubmit=function(){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 MouseHandler{onClick(selector,callback){let elements=document.querySelectorAll(selector);elements.forEach((element)=>{element.onclick=(event)=>{event.preventDefault();callback(event);};});}}
class App{run(){FormHandler.handleSubmitButtons();let keyboardHandler=new KeyboardHandler();keyboardHandler.on("g u",()=>this.goToPage("unread"));keyboardHandler.on("g h",()=>this.goToPage("history"));keyboardHandler.on("g f",()=>this.goToPage("feeds"));keyboardHandler.on("g c",()=>this.goToPage("categories"));keyboardHandler.on("g s",()=>this.goToPage("settings"));keyboardHandler.on("ArrowLeft",()=>this.goToPrevious());keyboardHandler.on("ArrowRight",()=>this.goToNext());keyboardHandler.on("j",()=>this.goToPrevious());keyboardHandler.on("p",()=>this.goToPrevious());keyboardHandler.on("k",()=>this.goToNext());keyboardHandler.on("n",()=>this.goToNext());keyboardHandler.on("h",()=>this.goToPage("previous"));keyboardHandler.on("l",()=>this.goToPage("next"));keyboardHandler.on("o",()=>this.openSelectedItem());keyboardHandler.on("v",()=>this.openOriginalLink());keyboardHandler.on("m",()=>this.toggleEntryStatus());keyboardHandler.on("A",()=>this.markPageAsRead());keyboardHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-on-click=markPageAsRead]",()=>this.markPageAsRead());mouseHandler.onClick("a[data-confirm]",(event)=>this.confirm(event));if(document.documentElement.clientWidth<600){mouseHandler.onClick(".logo",()=>this.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>this.clickMenuListItem(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()})};}
remove(url){let request=new Request(url,{method:"POST",cache:"no-cache",credentials:"include",headers:new Headers({"X-Csrf-Token":this.getCsrfToken()})});fetch(request).then(()=>{window.location.reload();});} withBody(body){this.options.body=JSON.stringify(body);return this;}
confirm(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);} withCallback(callback){this.callback=callback;return this;}
clickMenuListItem(event){let element=event.target;console.log(element);if(element.tagName==="A"){window.location.href=element.getAttribute("href");}else{window.location.href=element.querySelector("a").getAttribute("href");}} getCsrfToken(){let element=document.querySelector("meta[name=X-CSRF-Token]");if(element!==null){return element.getAttribute("value");}
toggleMainMenu(){let menu=document.querySelector(".header nav ul");if(this.isVisible(menu)){menu.style.display="none";}else{menu.style.display="block";}} return "";}
updateEntriesStatus(entryIDs,status){let url=document.body.dataset.entriesStatusUrl;let request=new Request(url,{method:"POST",cache:"no-cache",credentials:"include",body:JSON.stringify({entry_ids:entryIDs,status:status}),headers:new Headers({"Content-Type":"application/json","X-Csrf-Token":this.getCsrfToken()})});fetch(request);} execute(){fetch(new Request(this.url,this.options)).then((response)=>{if(this.callback){this.callback(response);}});}}
markPageAsRead(){let items=this.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){this.updateEntriesStatus(entryIDs,"read");} class EntryHandler{static updateEntriesStatus(entryIDs,status){let url=document.body.dataset.entriesStatusUrl;let request=new RequestBuilder(url);request.withBody({entry_ids:entryIDs,status:status});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;}}}}
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 NavHandler{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");} this.goToPage("next");}
toggleEntryStatus(){let currentItem=document.querySelector(".current-item");if(currentItem!==null){let entryID=parseInt(currentItem.dataset.id,10);let statuses={read:"unread",unread:"read"};for(let currentStatus in statuses){let newStatus=statuses[currentStatus];if(currentItem.classList.contains("item-status-"+currentStatus)){this.goToNextListItem();currentItem.classList.remove("item-status-"+currentStatus);currentItem.classList.add("item-status-"+newStatus);this.updateEntriesStatus([entryID],newStatus);break;}}}} toggleEntryStatus(){let currentItem=document.querySelector(".current-item");if(currentItem!==null){EntryHandler.toggleEntryStatus(currentItem);this.goToNextListItem();}}
openOriginalLink(){let entryLink=document.querySelector(".entry h1 a");if(entryLink!==null){this.openNewTab(entryLink.getAttribute("href"));return;} 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){this.openNewTab(currentItemOriginalLink.getAttribute("href"));}} let currentItemOriginalLink=document.querySelector(".current-item a[data-original-link]");if(currentItemOriginalLink!==null){DomHelper.openNewTab(currentItemOriginalLink.getAttribute("href"));}}
openSelectedItem(){let currentItemLink=document.querySelector(".current-item .item-title a");if(currentItemLink!==null){window.location.href=currentItemLink.getAttribute("href");}} openSelectedItem(){let currentItemLink=document.querySelector(".current-item .item-title a");if(currentItemLink!==null){window.location.href=currentItemLink.getAttribute("href");}}
goToPage(page){let element=document.querySelector("a[data-page="+page+"]");if(element){document.location.href=element.href;}} goToPage(page){let element=document.querySelector("a[data-page="+page+"]");if(element){document.location.href=element.href;}}
goToPrevious(){if(this.isListView()){this.goToPreviousListItem();}else{this.goToPage("previous");}} goToPrevious(){if(this.isListView()){this.goToPreviousListItem();}else{this.goToPage("previous");}}
goToNext(){if(this.isListView()){this.goToNextListItem();}else{this.goToPage("next");}} goToNext(){if(this.isListView()){this.goToNextListItem();}else{this.goToPage("next");}}
goToPreviousListItem(){let items=this.getVisibleElements(".items .item");if(items.length===0){return;} 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;} 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");this.scrollPageTo(items[i-1]);} 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;}}} break;}}}
goToNextListItem(){let items=this.getVisibleElements(".items .item");if(items.length===0){return;} goToNextListItem(){let items=DomHelper.getVisibleElements(".items .item");if(items.length===0){return;}
if(document.querySelector(".current-item")===null){items[0].classList.add("current-item");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<items.length){items[i+1].classList.add("current-item");this.scrollPageTo(items[i+1]);} 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;}}} break;}}}
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]);}} isListView(){return document.querySelector(".items")!==null;}}
return result;} 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 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.listen();let mouseHandler=new MouseHandler();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));}});})();`,
isListView(){return document.querySelector(".items")!==null;}
scrollPageTo(item){let windowScrollPosition=window.pageYOffset;let windowHeight=document.documentElement.clientHeight;let viewportPosition=windowScrollPosition+windowHeight;let itemBottomPosition=item.offsetTop+item.offsetHeight;if(viewportPosition-itemBottomPosition<0||viewportPosition-item.offsetTop>windowHeight){window.scrollTo(0,item.offsetTop-10);}}
openNewTab(url){let win=window.open(url,"_blank");win.focus();}
isVisible(element){return element.offsetParent!==null;}
getCsrfToken(){let element=document.querySelector("meta[name=X-CSRF-Token]");if(element!==null){return element.getAttribute("value");}
return "";}}
document.addEventListener("DOMContentLoaded",function(){(new App()).run();});})();`,
} }
var JavascriptChecksums = map[string]string{ var JavascriptChecksums = map[string]string{
"app": "cc5edd35e9e10e45cd84487bd11bed357f4e759917da1c83137f3c37006edd6f", "app": "e1a955eaf7c0672da771ddbb87090bd7831197c46c5508349aa87a955f7814f6",
} }

387
server/static/js/app.js
View file

@ -2,6 +2,142 @@
(function() { (function() {
'use strict'; '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 { class KeyboardHandler {
constructor() { constructor() {
this.queue = []; this.queue = [];
@ -94,56 +230,84 @@ class MouseHandler {
} }
} }
class App { class RequestBuilder {
run() { constructor(url) {
FormHandler.handleSubmitButtons(); this.callback = null;
this.url = url;
let keyboardHandler = new KeyboardHandler(); this.options = {
keyboardHandler.on("g u", () => this.goToPage("unread"));
keyboardHandler.on("g h", () => this.goToPage("history"));
keyboardHandler.on("g f", () => this.goToPage("feeds"));
keyboardHandler.on("g c", () => this.goToPage("categories"));
keyboardHandler.on("g s", () => this.goToPage("settings"));
keyboardHandler.on("ArrowLeft", () => this.goToPrevious());
keyboardHandler.on("ArrowRight", () => this.goToNext());
keyboardHandler.on("j", () => this.goToPrevious());
keyboardHandler.on("p", () => this.goToPrevious());
keyboardHandler.on("k", () => this.goToNext());
keyboardHandler.on("n", () => this.goToNext());
keyboardHandler.on("h", () => this.goToPage("previous"));
keyboardHandler.on("l", () => this.goToPage("next"));
keyboardHandler.on("o", () => this.openSelectedItem());
keyboardHandler.on("v", () => this.openOriginalLink());
keyboardHandler.on("m", () => this.toggleEntryStatus());
keyboardHandler.on("A", () => this.markPageAsRead());
keyboardHandler.listen();
let mouseHandler = new MouseHandler();
mouseHandler.onClick("a[data-on-click=markPageAsRead]", () => this.markPageAsRead());
mouseHandler.onClick("a[data-confirm]", (event) => this.confirm(event));
if (document.documentElement.clientWidth < 600) {
mouseHandler.onClick(".logo", () => this.toggleMainMenu());
mouseHandler.onClick(".header nav li", (event) => this.clickMenuListItem(event));
}
}
remove(url) {
let request = new Request(url, {
method: "POST", method: "POST",
cache: "no-cache", cache: "no-cache",
credentials: "include", credentials: "include",
body: null,
headers: new Headers({ headers: new Headers({
"Content-Type": "application/json",
"X-Csrf-Token": this.getCsrfToken() "X-Csrf-Token": this.getCsrfToken()
}) })
}); };
fetch(request).then(() => {
window.location.reload();
});
} }
confirm(event) { 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 EntryHandler {
static updateEntriesStatus(entryIDs, status) {
let url = document.body.dataset.entriesStatusUrl;
let request = new RequestBuilder(url);
request.withBody({entry_ids: entryIDs, status: status});
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;
}
}
}
}
class ConfirmHandler {
remove(url) {
let request = new RequestBuilder(url);
request.withCallback(() => window.location.reload());
request.execute();
}
handle(event) {
let questionElement = document.createElement("span"); let questionElement = document.createElement("span");
let linkElement = event.target; let linkElement = event.target;
let containerElement = linkElement.parentNode; let containerElement = linkElement.parentNode;
@ -182,9 +346,11 @@ class App {
containerElement.appendChild(questionElement); containerElement.appendChild(questionElement);
} }
}
class MenuHandler {
clickMenuListItem(event) { clickMenuListItem(event) {
let element = event.target;console.log(element); let element = event.target;
if (element.tagName === "A") { if (element.tagName === "A") {
window.location.href = element.getAttribute("href"); window.location.href = element.getAttribute("href");
@ -195,31 +361,17 @@ class App {
toggleMainMenu() { toggleMainMenu() {
let menu = document.querySelector(".header nav ul"); let menu = document.querySelector(".header nav ul");
if (this.isVisible(menu)) { if (DomHelper.isVisible(menu)) {
menu.style.display = "none"; menu.style.display = "none";
} else { } else {
menu.style.display = "block"; menu.style.display = "block";
} }
} }
}
updateEntriesStatus(entryIDs, status) { class NavHandler {
let url = document.body.dataset.entriesStatusUrl;
let request = new Request(url, {
method: "POST",
cache: "no-cache",
credentials: "include",
body: JSON.stringify({entry_ids: entryIDs, status: status}),
headers: new Headers({
"Content-Type": "application/json",
"X-Csrf-Token": this.getCsrfToken()
})
});
fetch(request);
}
markPageAsRead() { markPageAsRead() {
let items = this.getVisibleElements(".items .item"); let items = DomHelper.getVisibleElements(".items .item");
let entryIDs = []; let entryIDs = [];
items.forEach((element) => { items.forEach((element) => {
@ -228,7 +380,7 @@ class App {
}); });
if (entryIDs.length > 0) { if (entryIDs.length > 0) {
this.updateEntriesStatus(entryIDs, "read"); EntryHandler.updateEntriesStatus(entryIDs, "read");
} }
this.goToPage("next"); this.goToPage("next");
@ -237,35 +389,21 @@ class App {
toggleEntryStatus() { toggleEntryStatus() {
let currentItem = document.querySelector(".current-item"); let currentItem = document.querySelector(".current-item");
if (currentItem !== null) { if (currentItem !== null) {
let entryID = parseInt(currentItem.dataset.id, 10); EntryHandler.toggleEntryStatus(currentItem);
let statuses = {read: "unread", unread: "read"}; this.goToNextListItem();
for (let currentStatus in statuses) {
let newStatus = statuses[currentStatus];
if (currentItem.classList.contains("item-status-" + currentStatus)) {
this.goToNextListItem();
currentItem.classList.remove("item-status-" + currentStatus);
currentItem.classList.add("item-status-" + newStatus);
this.updateEntriesStatus([entryID], newStatus);
break;
}
}
} }
} }
openOriginalLink() { openOriginalLink() {
let entryLink = document.querySelector(".entry h1 a"); let entryLink = document.querySelector(".entry h1 a");
if (entryLink !== null) { if (entryLink !== null) {
this.openNewTab(entryLink.getAttribute("href")); DomHelper.openNewTab(entryLink.getAttribute("href"));
return; return;
} }
let currentItemOriginalLink = document.querySelector(".current-item a[data-original-link]"); let currentItemOriginalLink = document.querySelector(".current-item a[data-original-link]");
if (currentItemOriginalLink !== null) { if (currentItemOriginalLink !== null) {
this.openNewTab(currentItemOriginalLink.getAttribute("href")); DomHelper.openNewTab(currentItemOriginalLink.getAttribute("href"));
} }
} }
@ -301,7 +439,7 @@ class App {
} }
goToPreviousListItem() { goToPreviousListItem() {
let items = this.getVisibleElements(".items .item"); let items = DomHelper.getVisibleElements(".items .item");
if (items.length === 0) { if (items.length === 0) {
return; return;
@ -318,7 +456,7 @@ class App {
if (i - 1 >= 0) { if (i - 1 >= 0) {
items[i - 1].classList.add("current-item"); items[i - 1].classList.add("current-item");
this.scrollPageTo(items[i - 1]); DomHelper.scrollPageTo(items[i - 1]);
} }
break; break;
@ -327,7 +465,7 @@ class App {
} }
goToNextListItem() { goToNextListItem() {
let items = this.getVisibleElements(".items .item"); let items = DomHelper.getVisibleElements(".items .item");
if (items.length === 0) { if (items.length === 0) {
return; return;
@ -344,7 +482,7 @@ class App {
if (i + 1 < items.length) { if (i + 1 < items.length) {
items[i + 1].classList.add("current-item"); items[i + 1].classList.add("current-item");
this.scrollPageTo(items[i + 1]); DomHelper.scrollPageTo(items[i + 1]);
} }
break; break;
@ -352,56 +490,49 @@ class App {
} }
} }
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;
}
isListView() { isListView() {
return document.querySelector(".items") !== null; return document.querySelector(".items") !== null;
} }
scrollPageTo(item) {
let windowScrollPosition = window.pageYOffset;
let windowHeight = document.documentElement.clientHeight;
let viewportPosition = windowScrollPosition + windowHeight;
let itemBottomPosition = item.offsetTop + item.offsetHeight;
if (viewportPosition - itemBottomPosition < 0 || viewportPosition - item.offsetTop > windowHeight) {
window.scrollTo(0, item.offsetTop - 10);
}
}
openNewTab(url) {
let win = window.open(url, "_blank");
win.focus();
}
isVisible(element) {
return element.offsetParent !== null;
}
getCsrfToken() {
let element = document.querySelector("meta[name=X-CSRF-Token]");
if (element !== null) {
return element.getAttribute("value");
}
return "";
}
} }
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
(new App()).run(); 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 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.listen();
let mouseHandler = new MouseHandler();
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));
}
}); });
})(); })();

6
server/template/common.go
View file

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT. // Code generated by go generate; DO NOT EDIT.
// 2017-11-27 21:07:53.233262137 -0800 PST m=+0.027448365 // 2017-12-02 14:53:55.184002045 -0800 PST m=+0.017198687
package template package template
@ -29,7 +29,7 @@ var templateCommonMap = map[string]string{
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noindex,nofollow">
<meta name="referrer" content="no-referrer"> <meta name="referrer" content="no-referrer">
{{ if .csrf }} {{ if .csrf }}
@ -106,6 +106,6 @@ var templateCommonMap = map[string]string{
var templateCommonMapChecksums = map[string]string{ var templateCommonMapChecksums = map[string]string{
"entry_pagination": "f1465fa70f585ae8043b200ec9de5bf437ffbb0c19fb7aefc015c3555614ee27", "entry_pagination": "f1465fa70f585ae8043b200ec9de5bf437ffbb0c19fb7aefc015c3555614ee27",
"layout": "8be69cc93fdc99eb36841ae645f58488bd675670507dcdb2de0e593602893178", "layout": "0a06f790d6caad2918c5038f7aa4a2f88ff3b31ed8f52749d45344f2be7bee53",
"pagination": "6ff462c2b2a53bc5448b651da017f40a39f1d4f16cef4b2f09784f0797286924", "pagination": "6ff462c2b2a53bc5448b651da017f40a39f1d4f16cef4b2f09784f0797286924",
} }

2
server/template/html/category_entries.html
View file

@ -17,7 +17,7 @@
{{ else }} {{ else }}
<div class="items"> <div class="items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}

2
server/template/html/common/layout.html
View file

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="robots" content="noindex,nofollow"> <meta name="robots" content="noindex,nofollow">
<meta name="referrer" content="no-referrer"> <meta name="referrer" content="no-referrer">
{{ if .csrf }} {{ if .csrf }}

2
server/template/html/feed_entries.html
View file

@ -28,7 +28,7 @@
{{ else }} {{ else }}
<div class="items"> <div class="items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}

2
server/template/html/history.html
View file

@ -17,7 +17,7 @@
{{ else }} {{ else }}
<div class="items"> <div class="items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}

2
server/template/html/unread.html
View file

@ -17,7 +17,7 @@
{{ else }} {{ else }}
<div class="items hide-read-items"> <div class="items hide-read-items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}

18
server/template/views.go
View file

@ -1,5 +1,5 @@
// Code generated by go generate; DO NOT EDIT. // Code generated by go generate; DO NOT EDIT.
// 2017-12-01 22:52:50.615711322 -0800 PST m=+0.016980549 // 2017-12-02 14:53:55.176980108 -0800 PST m=+0.010176750
package template package template
@ -167,7 +167,7 @@ var templateViewsMap = map[string]string{
{{ else }} {{ else }}
<div class="items"> <div class="items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}
@ -554,7 +554,7 @@ var templateViewsMap = map[string]string{
{{ else }} {{ else }}
<div class="items"> <div class="items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}
@ -679,7 +679,7 @@ var templateViewsMap = map[string]string{
{{ else }} {{ else }}
<div class="items"> <div class="items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}
@ -958,7 +958,7 @@ var templateViewsMap = map[string]string{
{{ else }} {{ else }}
<div class="items hide-read-items"> <div class="items hide-read-items">
{{ range .entries }} {{ range .entries }}
<article class="item item-status-{{ .Status }}" data-id="{{ .ID }}"> <article class="item touch-item item-status-{{ .Status }}" data-id="{{ .ID }}">
<div class="item-header"> <div class="item-header">
<span class="item-title"> <span class="item-title">
{{ if ne .Feed.Icon.IconID 0 }} {{ if ne .Feed.Icon.IconID 0 }}
@ -1055,7 +1055,7 @@ var templateViewsMapChecksums = map[string]string{
"about": "ad2fb778fc73c39b733b3f81b13e5c7d689b041fadd24ee2d4577f545aa788ad", "about": "ad2fb778fc73c39b733b3f81b13e5c7d689b041fadd24ee2d4577f545aa788ad",
"add_subscription": "098ea9e492e18242bd414b22c4d8638006d113f728e5ae78c9186663f60ae3f1", "add_subscription": "098ea9e492e18242bd414b22c4d8638006d113f728e5ae78c9186663f60ae3f1",
"categories": "ca1280cd157bb527d4fc907da67b05a8347378f6dce965b9389d4bcdf3600a11", "categories": "ca1280cd157bb527d4fc907da67b05a8347378f6dce965b9389d4bcdf3600a11",
"category_entries": "219d315877664c84edaf4815bd52a76039585570a35b197332cd0a6bc25c4c55", "category_entries": "23187062ffa6ba8a37ab8a3db02b08ca3d6013c1b57a2aa96b8f9f0b1f237389",
"choose_subscription": "d37682743d8bbd84738a964e238103db2651f95fa340c6e285ffe2e12548d673", "choose_subscription": "d37682743d8bbd84738a964e238103db2651f95fa340c6e285ffe2e12548d673",
"create_category": "2b82af5d2dcd67898dc5daa57a6461e6ff8121a6089b2a2a1be909f35e4a2275", "create_category": "2b82af5d2dcd67898dc5daa57a6461e6ff8121a6089b2a2a1be909f35e4a2275",
"create_user": "815dd31faaa6e9ba81a2a6664e5707aaf4153c392accd2b1f77cf1937035a881", "create_user": "815dd31faaa6e9ba81a2a6664e5707aaf4153c392accd2b1f77cf1937035a881",
@ -1063,14 +1063,14 @@ var templateViewsMapChecksums = map[string]string{
"edit_feed": "c5bc4c22bf7e8348d880395250545595d21fb8c8e723fc5d7cca68e25d250884", "edit_feed": "c5bc4c22bf7e8348d880395250545595d21fb8c8e723fc5d7cca68e25d250884",
"edit_user": "c835d78f7cf36c11533db9cef253457a9003987d704070d59446cb2b0e84dcb9", "edit_user": "c835d78f7cf36c11533db9cef253457a9003987d704070d59446cb2b0e84dcb9",
"entry": "12e863c777368185091008adc851ddc0327317849f1566f7803be2b5bd358fd7", "entry": "12e863c777368185091008adc851ddc0327317849f1566f7803be2b5bd358fd7",
"feed_entries": "c2b1b4181a64b8cbacac0e59d9f48906d77a52b5b40f973befb7e67604009198", "feed_entries": "0d9818a09b92ee9a80287e34cd3a08598f71a7c03a2658893db1b8b731dafbc9",
"feeds": "c22af39b42ba9ca69ea0914ca789303ec2c5b484abcd4eaa49016e365381257c", "feeds": "c22af39b42ba9ca69ea0914ca789303ec2c5b484abcd4eaa49016e365381257c",
"history": "78bb9b4216c66a7d03cc1407476a8599269c6ee228dcd4b439ace9c94703938b", "history": "bfad256437cfcc898dea9e7e9a2c331ea707f1729cdb559ea563a2cb8de6cc7d",
"import": "73b5112e20bfd232bf73334544186ea419505936bc237d481517a8622901878f", "import": "73b5112e20bfd232bf73334544186ea419505936bc237d481517a8622901878f",
"integrations": "c485d6d9ed996635e55e73320610e6bcb01a41c1153e8e739ae2294b0b14b243", "integrations": "c485d6d9ed996635e55e73320610e6bcb01a41c1153e8e739ae2294b0b14b243",
"login": "04f3ce79bfa5753f69e0d956c2a8999c0da549c7925634a3e8134975da0b0e0f", "login": "04f3ce79bfa5753f69e0d956c2a8999c0da549c7925634a3e8134975da0b0e0f",
"sessions": "878dbe8f8ea783b44130c495814179519fa5c3aa2666ac87508f94d58dd008bf", "sessions": "878dbe8f8ea783b44130c495814179519fa5c3aa2666ac87508f94d58dd008bf",
"settings": "1e2df11f5436eb2d05ae1fae30dd6f1362613011edbfcc79ae8b23854fa348b4", "settings": "1e2df11f5436eb2d05ae1fae30dd6f1362613011edbfcc79ae8b23854fa348b4",
"unread": "f631cec5e3bf0daa9ccce99985aac8f6004ae41330e449d4f927f2179937cb21", "unread": "3d8deab9119dc11f0d74a461e1ac89dc29931ba4645a043bb5b3eccba3cba5b8",
"users": "44677e28bb5347799ed0020c90ec785aadec4b1454446d92411cfdaf6e32110b", "users": "44677e28bb5347799ed0020c90ec785aadec4b1454446d92411cfdaf6e32110b",
} }