2013-10-15 04:38:07 +02:00
|
|
|
Miniflux.Event = (function() {
|
|
|
|
|
|
|
|
var queue = [];
|
|
|
|
|
2015-01-13 01:46:21 +01:00
|
|
|
function isEventIgnored(e)
|
|
|
|
{
|
2015-01-15 02:00:17 +01:00
|
|
|
if (e.keyCode !== 63 && e.which !== 63 && (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey)) {
|
2015-01-13 01:46:21 +01:00
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Do not handle events when there is a focus in form fields
|
|
|
|
var target = e.target || e.srcElement;
|
2016-07-31 00:21:01 +02:00
|
|
|
return !!(target.tagName === 'INPUT' || target.tagName === 'TEXTAREA');
|
2015-01-13 01:46:21 +01:00
|
|
|
}
|
|
|
|
|
2013-10-15 04:38:07 +02:00
|
|
|
return {
|
2014-02-15 03:37:07 +01:00
|
|
|
lastEventType: "",
|
2013-10-15 04:38:07 +02:00
|
|
|
ListenMouseEvents: function() {
|
|
|
|
|
|
|
|
document.onclick = function(e) {
|
2015-01-29 23:28:18 +01:00
|
|
|
if (e.target.hasAttribute("data-action") && e.target.className !== 'original') {
|
2015-01-03 00:49:29 +01:00
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
document.onmouseup = function(e) {
|
2016-07-31 00:01:37 +02:00
|
|
|
// Ignore right mouse button (context menu)
|
2015-01-03 00:49:29 +01:00
|
|
|
if (e.button === 2) {
|
|
|
|
return;
|
|
|
|
}
|
2013-10-15 04:38:07 +02:00
|
|
|
|
2015-01-02 18:43:17 +01:00
|
|
|
// Auto-select input content
|
2015-01-03 00:49:29 +01:00
|
|
|
if (e.target.nodeName === "INPUT" && e.target.className === "auto-select") {
|
2015-01-02 18:43:17 +01:00
|
|
|
e.target.select();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Application actions
|
2013-10-15 04:38:07 +02:00
|
|
|
var action = e.target.getAttribute("data-action");
|
|
|
|
|
|
|
|
if (action) {
|
|
|
|
|
2014-02-15 03:37:07 +01:00
|
|
|
Miniflux.Event.lastEventType = "mouse";
|
|
|
|
|
2014-09-16 20:42:15 +02:00
|
|
|
var currentItem = function () {
|
2016-07-31 00:21:01 +02:00
|
|
|
var element = e.target;
|
2014-09-16 20:42:15 +02:00
|
|
|
|
|
|
|
while (element && element.parentNode) {
|
|
|
|
element = element.parentNode;
|
|
|
|
if (element.tagName && element.tagName.toLowerCase() === 'article') {
|
|
|
|
return element;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}();
|
|
|
|
|
2013-10-15 04:38:07 +02:00
|
|
|
switch (action) {
|
|
|
|
case 'refresh-all':
|
2015-08-02 02:23:21 +02:00
|
|
|
Miniflux.Feed.UpdateAll(e.target.getAttribute("data-concurrent-requests"));
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
|
|
|
case 'refresh-feed':
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Feed.Update(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
|
|
|
case 'mark-read':
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.MarkAsRead(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
|
|
|
case 'mark-unread':
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.MarkAsUnread(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
2014-07-26 14:01:25 +02:00
|
|
|
case 'mark-removed':
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.MarkAsRemoved(currentItem);
|
2014-07-26 14:01:25 +02:00
|
|
|
break;
|
2013-10-15 04:38:07 +02:00
|
|
|
case 'bookmark':
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.SwitchBookmark(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
|
|
|
case 'download-item':
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.DownloadContent(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
|
|
|
case 'mark-feed-read':
|
2015-04-29 11:16:36 +02:00
|
|
|
var feed_id = document.getElementById('listing').getAttribute('data-feed-id');
|
|
|
|
Miniflux.Item.MarkFeedAsRead(feed_id);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
2016-03-06 16:23:19 +01:00
|
|
|
case 'close-help':
|
|
|
|
Miniflux.Nav.CloseHelp();
|
|
|
|
break;
|
2016-05-04 02:15:20 +02:00
|
|
|
case 'show-search':
|
|
|
|
Miniflux.Nav.ShowSearch();
|
|
|
|
break;
|
2016-11-10 14:22:48 +01:00
|
|
|
case 'toggle-menu-more':
|
|
|
|
Miniflux.Nav.ToggleMenuMore();
|
|
|
|
break;
|
2013-10-15 04:38:07 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
ListenKeyboardEvents: function() {
|
|
|
|
|
|
|
|
document.onkeypress = function(e) {
|
|
|
|
|
2015-01-13 01:46:21 +01:00
|
|
|
if (isEventIgnored(e)) {
|
2014-10-26 15:27:27 +01:00
|
|
|
return;
|
|
|
|
}
|
2014-09-05 11:30:40 +02:00
|
|
|
|
2014-02-15 03:37:07 +01:00
|
|
|
Miniflux.Event.lastEventType = "keyboard";
|
|
|
|
|
2015-03-07 18:23:36 +01:00
|
|
|
queue.push(e.key || e.which);
|
2013-10-15 04:38:07 +02:00
|
|
|
|
2015-03-07 18:23:36 +01:00
|
|
|
if (queue[0] === 'g' || queue[0] === 103) {
|
2013-10-15 04:38:07 +02:00
|
|
|
|
|
|
|
switch (queue[1]) {
|
|
|
|
case undefined:
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'u':
|
|
|
|
case 117:
|
2013-10-15 04:38:07 +02:00
|
|
|
window.location.href = "?action=unread";
|
|
|
|
queue = [];
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'b':
|
|
|
|
case 98:
|
2013-10-15 04:38:07 +02:00
|
|
|
window.location.href = "?action=bookmarks";
|
|
|
|
queue = [];
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'h':
|
|
|
|
case 104:
|
2013-10-15 04:38:07 +02:00
|
|
|
window.location.href = "?action=history";
|
|
|
|
queue = [];
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 's':
|
|
|
|
case 115:
|
2013-10-15 04:38:07 +02:00
|
|
|
window.location.href = "?action=feeds";
|
|
|
|
queue = [];
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'p':
|
|
|
|
case 112:
|
2013-10-15 04:38:07 +02:00
|
|
|
window.location.href = "?action=config";
|
|
|
|
queue = [];
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
queue = [];
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
|
|
|
|
queue = [];
|
|
|
|
|
2014-09-16 20:42:15 +02:00
|
|
|
var currentItem = function () {
|
|
|
|
return document.getElementById("current-item");
|
|
|
|
}();
|
|
|
|
|
2015-03-07 18:23:36 +01:00
|
|
|
switch (e.key || e.which) {
|
|
|
|
case 'd':
|
|
|
|
case 100:
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.DownloadContent(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'p':
|
|
|
|
case 112:
|
|
|
|
case 'k':
|
|
|
|
case 107:
|
2013-10-15 04:38:07 +02:00
|
|
|
Miniflux.Nav.SelectPreviousItem();
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'n':
|
|
|
|
case 110:
|
|
|
|
case 'j':
|
|
|
|
case 106:
|
2013-10-15 04:38:07 +02:00
|
|
|
Miniflux.Nav.SelectNextItem();
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'v':
|
|
|
|
case 118:
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.OpenOriginal(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'o':
|
|
|
|
case 111:
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.Show(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'm':
|
|
|
|
case 109:
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.SwitchStatus(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'f':
|
|
|
|
case 102:
|
2015-01-15 02:00:17 +01:00
|
|
|
currentItem && Miniflux.Item.SwitchBookmark(currentItem);
|
2013-10-15 04:38:07 +02:00
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'h':
|
|
|
|
case 104:
|
2013-10-15 04:38:07 +02:00
|
|
|
Miniflux.Nav.OpenPreviousPage();
|
2016-07-29 11:58:47 +02:00
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'l':
|
|
|
|
case 108:
|
2013-10-15 04:38:07 +02:00
|
|
|
Miniflux.Nav.OpenNextPage();
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'r':
|
|
|
|
case 114:
|
2014-09-16 20:42:15 +02:00
|
|
|
Miniflux.Feed.UpdateAll();
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case '?':
|
|
|
|
case 63:
|
2013-10-15 04:38:07 +02:00
|
|
|
Miniflux.Nav.ShowHelp();
|
|
|
|
break;
|
2016-03-06 16:23:19 +01:00
|
|
|
case 'Q':
|
|
|
|
case 81: // Q
|
|
|
|
case 'q':
|
|
|
|
case 113: // q
|
|
|
|
Miniflux.Nav.CloseHelp();
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case 'z':
|
|
|
|
case 122:
|
2014-12-24 04:13:23 +01:00
|
|
|
Miniflux.Item.ToggleRTLMode();
|
|
|
|
break;
|
2013-10-15 04:38:07 +02:00
|
|
|
}
|
|
|
|
}
|
2015-01-03 00:49:29 +01:00
|
|
|
};
|
2015-01-13 01:46:21 +01:00
|
|
|
|
|
|
|
document.onkeydown = function(e) {
|
|
|
|
|
|
|
|
if (isEventIgnored(e)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
Miniflux.Event.lastEventType = "keyboard";
|
|
|
|
|
2015-03-07 18:23:36 +01:00
|
|
|
switch (e.key || e.which) {
|
|
|
|
case "ArrowLeft":
|
|
|
|
case "Left":
|
|
|
|
case 37:
|
2015-01-13 01:46:21 +01:00
|
|
|
Miniflux.Nav.SelectPreviousItem();
|
|
|
|
break;
|
2015-03-07 18:23:36 +01:00
|
|
|
case "ArrowRight":
|
|
|
|
case "Right":
|
|
|
|
case 39:
|
2015-01-13 01:46:21 +01:00
|
|
|
Miniflux.Nav.SelectNextItem();
|
|
|
|
break;
|
|
|
|
}
|
implement frontend autoupdate
Only the unread counter is updated right know.
The AutoUpdate Feature is designed on the premise of don't wasting resources. A
distinction is made between updates when Miniflux is visible or hidden.
To determine the visibility status, the Page Visibility API is used. The API is
available starting with Chrome 33, Firefox 18 and IE10. [https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API]
As IE9 returns an undefined, it doesn't break the compatibility at least.
If Miniflux is visible, the unread counter on the web page is updated as soon as
a mismatch between the counter and the number of unread articles in the database
is found.
If Miniflux is hidden, the timestamp of the most recent article from each feed
is compared with the value from the last run. We have an update If the timestamp
of the latest article is greater than the stored one and the latest article is
unread. The web page title is updated with a ? symbol to notify the user and the
update check pauses till Miniflux gets visible again. If Miniflux gets visible
again, the number of unread articles is queried from the database, the unread
counter on the web page is updated and finally the ? symbol is removed from the
web page title.
This way I can use my fever API client to read new articles (or at least the
latest article) while Miniflux is hidden and as I've seen the new articles
already a new articles notification is prevented.
It's intentionally that the page does not reload automatically as long as
articles are visible. If I'm in hurry, I only scroll through the articles to
spot something interesting. Most of the time I don't reach the last article.
If the page is reloaded while I'm away, I would have to scan from the top again.
If we're on a nothing_to_read page and have unread articles in the database, a
redirect to the unread page will be done.
The default update check interval is 10 minutes and can be changed on the
settings page. A zero value disables the update check entirely.
fixes #213
2014-11-27 22:36:04 +01:00
|
|
|
};
|
|
|
|
},
|
|
|
|
ListenVisibilityEvents: function() {
|
|
|
|
document.addEventListener('visibilitychange', function() {
|
|
|
|
Miniflux.App.Log('document.visibilityState: ' + document.visibilityState);
|
|
|
|
|
|
|
|
if (!document.hidden && Miniflux.Item.hasNewUnread()) {
|
|
|
|
Miniflux.App.Log('Need to update the unread counter with fresh values from the database');
|
|
|
|
Miniflux.Item.CheckForUpdates();
|
|
|
|
}
|
|
|
|
});
|
2016-07-29 11:58:47 +02:00
|
|
|
},
|
|
|
|
ListenTouchEvents: function() {
|
|
|
|
var touches = null;
|
|
|
|
var resetTouch = function () {
|
|
|
|
touches && touches.element && (touches.element.style.opacity = 1);
|
|
|
|
touches && touches.element && (touches.element.style.transform = "");
|
|
|
|
touches = {
|
|
|
|
"touchstart": {"x":-1, "y":-1},
|
|
|
|
"touchmove" : {"x":-1, "y":-1},
|
|
|
|
"touchend" : false,
|
|
|
|
"direction" : "undetermined",
|
|
|
|
"swipestarted" : false,
|
2016-07-31 00:21:01 +02:00
|
|
|
"element" : null
|
2016-07-29 11:58:47 +02:00
|
|
|
};
|
|
|
|
};
|
|
|
|
var horizontalSwipe = function () {
|
|
|
|
if((touches.touchstart.x > -1 && touches.touchmove.x > -1 &&
|
|
|
|
((touches.touchmove.x - touches.touchstart.x) > 30 | touches.swipestarted) &&
|
|
|
|
Math.abs(touches.touchmove.y - touches.touchstart.y) < 75)) {
|
|
|
|
touches.swipestarted = true;
|
|
|
|
return touches.touchmove.x - touches.touchstart.x;
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
};
|
|
|
|
var closest = function(el, fn) {
|
|
|
|
return el && (fn(el) ? el : closest(el.parentNode, fn));
|
|
|
|
};
|
|
|
|
var getTouchElement = function() {
|
|
|
|
return touches.element ? touches.element :
|
|
|
|
closest(document.elementFromPoint(touches.touchstart.x, touches.touchstart.y),
|
|
|
|
function(el) {
|
|
|
|
return el.tagName === 'ARTICLE';
|
|
|
|
});
|
|
|
|
};
|
|
|
|
var drawElement = function(){
|
|
|
|
if(touches &&
|
|
|
|
(touches.touchend === true || touches.touchstart.x == -1)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if(touches.element === null) {
|
|
|
|
touches.element = getTouchElement();
|
|
|
|
}
|
2016-07-31 00:21:01 +02:00
|
|
|
var swipedistance = horizontalSwipe();
|
2016-07-29 11:58:47 +02:00
|
|
|
|
|
|
|
if(swipedistance > 0) {
|
|
|
|
var element = getTouchElement();
|
|
|
|
if(!element) {resetTouch(); return;}
|
|
|
|
|
|
|
|
touches.element.style.opacity = 1 -
|
|
|
|
((swipedistance > 75) ? 0.9 : swipedistance/75 *0.9);
|
|
|
|
touches.element.style.transform = "translateX("+
|
|
|
|
(swipedistance > 75 ? 75 : swipedistance)+"px)";
|
|
|
|
touches.element = element;
|
|
|
|
}
|
|
|
|
window.requestAnimationFrame(drawElement);
|
|
|
|
};
|
|
|
|
var touchHandler = function (e) {
|
|
|
|
if (typeof e.touches != 'undefined' && e.touches.length <= 1) {
|
|
|
|
var touch = e.touches[0];
|
|
|
|
var swipedistance = null;
|
|
|
|
var element = null;
|
|
|
|
switch (e.type) {
|
|
|
|
case 'touchstart':
|
|
|
|
resetTouch();
|
|
|
|
touches[e.type].x = touch.clientX;
|
|
|
|
touches[e.type].y = touch.clientY;
|
|
|
|
drawElement();
|
|
|
|
break;
|
|
|
|
case 'touchmove':
|
|
|
|
touches[e.type].x = touch.clientX;
|
|
|
|
touches[e.type].y = touch.clientY;
|
|
|
|
break;
|
|
|
|
case 'touchend':
|
|
|
|
touches[e.type] = true;
|
|
|
|
element = getTouchElement();
|
|
|
|
swipedistance = horizontalSwipe();
|
|
|
|
if(swipedistance > 75) {
|
|
|
|
element && Miniflux.Item.MarkAsRead(element);
|
|
|
|
if(!element.getAttribute("data-hide")){
|
|
|
|
resetTouch();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
resetTouch();
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 'touchcancel':
|
|
|
|
resetTouch();
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
resetTouch();
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
resetTouch();
|
|
|
|
document.addEventListener('touchstart', touchHandler, false);
|
|
|
|
document.addEventListener('touchmove', touchHandler, false);
|
|
|
|
document.addEventListener('touchend', touchHandler, false);
|
|
|
|
document.addEventListener('touchcancel', touchHandler, false);
|
2013-10-15 04:38:07 +02:00
|
|
|
}
|
|
|
|
};
|
2013-10-31 20:27:33 +01:00
|
|
|
})();
|