Handle touch events

9 files changed, 319 insertions, 169 deletions

diff --git a/server/static/js.go b/server/static/js.go
index 9f7c717..27bf361 100644
--- a/server/static/js.go
+++ b/server/static/js.go
@@ -1,10 +1,30 @@
 // 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
 
 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;}
 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;}
@@ -15,40 +35,39 @@ getKey(event){const mapping={'Esc':'Escape','Up':'ArrowUp','Down':'ArrowDown','L
 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 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));}}
-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();});}
-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);}
-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");}}
-toggleMainMenu(){let menu=document.querySelector(".header nav ul");if(this.isVisible(menu)){menu.style.display="none";}else{menu.style.display="block";}}
-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);}
-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 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 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");}
-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;}}}}
-openOriginalLink(){let entryLink=document.querySelector(".entry h1 a");if(entryLink!==null){this.openNewTab(entryLink.getAttribute("href"));return;}
-let currentItemOriginalLink=document.querySelector(".current-item a[data-original-link]");if(currentItemOriginalLink!==null){this.openNewTab(currentItemOriginalLink.getAttribute("href"));}}
+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){DomHelper.openNewTab(entryLink.getAttribute("href"));return;}
+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");}}
 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");}}
 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;}
-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;}}}
-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;}
-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;}}}
-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(){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();});})();`,
+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 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));}});})();`,
 }
 
 var JavascriptChecksums = map[string]string{
-	"app": "cc5edd35e9e10e45cd84487bd11bed357f4e759917da1c83137f3c37006edd6f",
+	"app": "e1a955eaf7c0672da771ddbb87090bd7831197c46c5508349aa87a955f7814f6",
 }
diff --git a/server/static/js/app.js b/server/static/js/app.js
index e54a238..40611ec 100644
--- a/server/static/js/app.js
+++ b/server/static/js/app.js
@@ -2,6 +2,142 @@
 (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 = [];
@@ -94,56 +230,84 @@ class MouseHandler {
     }
 }
 
-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));
-        }
-    }
-
-    remove(url) {
-        let request = new Request(url, {
+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;
+    }
 
-        fetch(request).then(() => {
-            window.location.reload();
+    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"};
 
-    confirm(event) {
+        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;
@@ -182,9 +346,11 @@ class App {
 
         containerElement.appendChild(questionElement);
     }
+}
 
+class MenuHandler {
     clickMenuListItem(event) {
-        let element = event.target;console.log(element);
+        let element = event.target;
 
         if (element.tagName === "A") {
             window.location.href = element.getAttribute("href");
@@ -195,31 +361,17 @@ class App {
 
     toggleMainMenu() {
         let menu = document.querySelector(".header nav ul");
-        if (this.isVisible(menu)) {
+        if (DomHelper.isVisible(menu)) {
             menu.style.display = "none";
         } else {
             menu.style.display = "block";
         }
     }
+}
 
-    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);
-    }
-
+class NavHandler {
     markPageAsRead() {
-        let items = this.getVisibleElements(".items .item");
+        let items = DomHelper.getVisibleElements(".items .item");
         let entryIDs = [];
 
         items.forEach((element) => {
@@ -228,7 +380,7 @@ class App {
         });
 
         if (entryIDs.length > 0) {
-            this.updateEntriesStatus(entryIDs, "read");
+            EntryHandler.updateEntriesStatus(entryIDs, "read");
         }
 
         this.goToPage("next");
@@ -237,35 +389,21 @@ class App {
     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;
-                }
-            }
+            EntryHandler.toggleEntryStatus(currentItem);
+            this.goToNextListItem();
         }
     }
 
     openOriginalLink() {
         let entryLink = document.querySelector(".entry h1 a");
         if (entryLink !== null) {
-            this.openNewTab(entryLink.getAttribute("href"));
+            DomHelper.openNewTab(entryLink.getAttribute("href"));
             return;
         }
 
         let currentItemOriginalLink = document.querySelector(".current-item a[data-original-link]");
         if (currentItemOriginalLink !== null) {
-            this.openNewTab(currentItemOriginalLink.getAttribute("href"));
+            DomHelper.openNewTab(currentItemOriginalLink.getAttribute("href"));
         }
     }
 
@@ -301,7 +439,7 @@ class App {
     }
 
     goToPreviousListItem() {
-        let items = this.getVisibleElements(".items .item");
+        let items = DomHelper.getVisibleElements(".items .item");
 
         if (items.length === 0) {
             return;
@@ -318,7 +456,7 @@ class App {
 
                 if (i - 1 >= 0) {
                     items[i - 1].classList.add("current-item");
-                    this.scrollPageTo(items[i - 1]);
+                    DomHelper.scrollPageTo(items[i - 1]);
                 }
 
                 break;
@@ -327,7 +465,7 @@ class App {
     }
 
     goToNextListItem() {
-        let items = this.getVisibleElements(".items .item");
+        let items = DomHelper.getVisibleElements(".items .item");
 
         if (items.length === 0) {
             return;
@@ -344,7 +482,7 @@ class App {
 
                 if (i + 1 < items.length) {
                     items[i + 1].classList.add("current-item");
-                    this.scrollPageTo(items[i + 1]);
+                    DomHelper.scrollPageTo(items[i + 1]);
                 }
 
                 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() {
         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();
+    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));
+    }
 });
 
 })();
diff --git a/server/template/common.go b/server/template/common.go
index 0a803b2..79aae94 100644
--- a/server/template/common.go
+++ b/server/template/common.go
@@ -1,5 +1,5 @@
 // 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
 
@@ -29,7 +29,7 @@ var templateCommonMap = map[string]string{
 <head>
     <meta charset="utf-8">
     <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="referrer" content="no-referrer">
     {{ if .csrf }}
@@ -106,6 +106,6 @@ var templateCommonMap = map[string]string{
 
 var templateCommonMapChecksums = map[string]string{
 	"entry_pagination": "f1465fa70f585ae8043b200ec9de5bf437ffbb0c19fb7aefc015c3555614ee27",
-	"layout":           "8be69cc93fdc99eb36841ae645f58488bd675670507dcdb2de0e593602893178",
+	"layout":           "0a06f790d6caad2918c5038f7aa4a2f88ff3b31ed8f52749d45344f2be7bee53",
 	"pagination":       "6ff462c2b2a53bc5448b651da017f40a39f1d4f16cef4b2f09784f0797286924",
 }
diff --git a/server/template/html/category_entries.html b/server/template/html/category_entries.html
index 37c95c4..77d2725 100644
--- a/server/template/html/category_entries.html
+++ b/server/template/html/category_entries.html
@@ -17,7 +17,7 @@
 {{ else }}
     <div class="items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
diff --git a/server/template/html/common/layout.html b/server/template/html/common/layout.html
index defa3c9..5fa8714 100644
--- a/server/template/html/common/layout.html
+++ b/server/template/html/common/layout.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <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="referrer" content="no-referrer">
     {{ if .csrf }}
diff --git a/server/template/html/feed_entries.html b/server/template/html/feed_entries.html
index da4bca0..384b4f6 100644
--- a/server/template/html/feed_entries.html
+++ b/server/template/html/feed_entries.html
@@ -28,7 +28,7 @@
 {{ else }}
     <div class="items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
diff --git a/server/template/html/history.html b/server/template/html/history.html
index 2518604..d53d512 100644
--- a/server/template/html/history.html
+++ b/server/template/html/history.html
@@ -17,7 +17,7 @@
 {{ else }}
     <div class="items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
diff --git a/server/template/html/unread.html b/server/template/html/unread.html
index 4a3f41f..2fea1e1 100644
--- a/server/template/html/unread.html
+++ b/server/template/html/unread.html
@@ -17,7 +17,7 @@
 {{ else }}
     <div class="items hide-read-items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
diff --git a/server/template/views.go b/server/template/views.go
index 8bdc01b..400f3d9 100644
--- a/server/template/views.go
+++ b/server/template/views.go
@@ -1,5 +1,5 @@
 // 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
 
@@ -167,7 +167,7 @@ var templateViewsMap = map[string]string{
 {{ else }}
     <div class="items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
@@ -554,7 +554,7 @@ var templateViewsMap = map[string]string{
 {{ else }}
     <div class="items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
@@ -679,7 +679,7 @@ var templateViewsMap = map[string]string{
 {{ else }}
     <div class="items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
@@ -958,7 +958,7 @@ var templateViewsMap = map[string]string{
 {{ else }}
     <div class="items hide-read-items">
         {{ 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">
                 <span class="item-title">
                     {{ if ne .Feed.Icon.IconID 0 }}
@@ -1055,7 +1055,7 @@ var templateViewsMapChecksums = map[string]string{
 	"about":               "ad2fb778fc73c39b733b3f81b13e5c7d689b041fadd24ee2d4577f545aa788ad",
 	"add_subscription":    "098ea9e492e18242bd414b22c4d8638006d113f728e5ae78c9186663f60ae3f1",
 	"categories":          "ca1280cd157bb527d4fc907da67b05a8347378f6dce965b9389d4bcdf3600a11",
-	"category_entries":    "219d315877664c84edaf4815bd52a76039585570a35b197332cd0a6bc25c4c55",
+	"category_entries":    "23187062ffa6ba8a37ab8a3db02b08ca3d6013c1b57a2aa96b8f9f0b1f237389",
 	"choose_subscription": "d37682743d8bbd84738a964e238103db2651f95fa340c6e285ffe2e12548d673",
 	"create_category":     "2b82af5d2dcd67898dc5daa57a6461e6ff8121a6089b2a2a1be909f35e4a2275",
 	"create_user":         "815dd31faaa6e9ba81a2a6664e5707aaf4153c392accd2b1f77cf1937035a881",
@@ -1063,14 +1063,14 @@ var templateViewsMapChecksums = map[string]string{
 	"edit_feed":           "c5bc4c22bf7e8348d880395250545595d21fb8c8e723fc5d7cca68e25d250884",
 	"edit_user":           "c835d78f7cf36c11533db9cef253457a9003987d704070d59446cb2b0e84dcb9",
 	"entry":               "12e863c777368185091008adc851ddc0327317849f1566f7803be2b5bd358fd7",
-	"feed_entries":        "c2b1b4181a64b8cbacac0e59d9f48906d77a52b5b40f973befb7e67604009198",
+	"feed_entries":        "0d9818a09b92ee9a80287e34cd3a08598f71a7c03a2658893db1b8b731dafbc9",
 	"feeds":               "c22af39b42ba9ca69ea0914ca789303ec2c5b484abcd4eaa49016e365381257c",
-	"history":             "78bb9b4216c66a7d03cc1407476a8599269c6ee228dcd4b439ace9c94703938b",
+	"history":             "bfad256437cfcc898dea9e7e9a2c331ea707f1729cdb559ea563a2cb8de6cc7d",
 	"import":              "73b5112e20bfd232bf73334544186ea419505936bc237d481517a8622901878f",
 	"integrations":        "c485d6d9ed996635e55e73320610e6bcb01a41c1153e8e739ae2294b0b14b243",
 	"login":               "04f3ce79bfa5753f69e0d956c2a8999c0da549c7925634a3e8134975da0b0e0f",
 	"sessions":            "878dbe8f8ea783b44130c495814179519fa5c3aa2666ac87508f94d58dd008bf",
 	"settings":            "1e2df11f5436eb2d05ae1fae30dd6f1362613011edbfcc79ae8b23854fa348b4",
-	"unread":              "f631cec5e3bf0daa9ccce99985aac8f6004ae41330e449d4f927f2179937cb21",
+	"unread":              "3d8deab9119dc11f0d74a461e1ac89dc29931ba4645a043bb5b3eccba3cba5b8",
 	"users":               "44677e28bb5347799ed0020c90ec785aadec4b1454446d92411cfdaf6e32110b",
 }