diff options
| -rw-r--r-- | server/static/js.go | 71 | ||||
| -rw-r--r-- | server/static/js/app.js | 383 | ||||
| -rw-r--r-- | server/template/common.go | 6 | ||||
| -rw-r--r-- | server/template/html/category_entries.html | 2 | ||||
| -rw-r--r-- | server/template/html/common/layout.html | 2 | ||||
| -rw-r--r-- | server/template/html/feed_entries.html | 2 | ||||
| -rw-r--r-- | server/template/html/history.html | 2 | ||||
| -rw-r--r-- | server/template/html/unread.html | 2 | ||||
| -rw-r--r-- | server/template/views.go | 18 |
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", } |