461 lines
15 KiB
JavaScript
461 lines
15 KiB
JavaScript
/**
|
|
* Nextcloud - News
|
|
*
|
|
* This file is licensed under the Affero General Public License version 3 or
|
|
* later. See the COPYING file.
|
|
*
|
|
* @author Bernhard Posselt <dev@bernhard-posselt.com>
|
|
* @copyright Bernhard Posselt 2014
|
|
*/
|
|
|
|
/**
|
|
* Code in here acts only as a click shortcut mechanism. That's why its not
|
|
* being put into a directive since it has to be tested with protractor
|
|
* anyways and theres no benefit from wiring it into the angular app
|
|
*/
|
|
(function (window, document, $) {
|
|
'use strict';
|
|
|
|
var scrollElement = function() {
|
|
// This should be in sync with the same function in js/directive/NewsScroll.js
|
|
if (window.NEWS_NC_MAJOR_VERSION >= 25) {
|
|
return $('#app-content');
|
|
}
|
|
return $(window);
|
|
};
|
|
|
|
var noInputFocused = function (element) {
|
|
return !(
|
|
element.is('input') ||
|
|
element.is('select') ||
|
|
element.is('textarea') ||
|
|
element.is('checkbox')
|
|
);
|
|
};
|
|
|
|
var noModifierKey = function (event) {
|
|
return !(
|
|
event.shiftKey ||
|
|
event.altKey ||
|
|
event.ctrlKey ||
|
|
event.metaKey
|
|
);
|
|
};
|
|
|
|
var markAllRead = function (navigationArea) {
|
|
var selector = '.active > .app-navigation-entry-menu .mark-read button';
|
|
var button = navigationArea.find(selector);
|
|
if (button.length > 0) {
|
|
button.trigger('click');
|
|
}
|
|
};
|
|
|
|
var isInScrollView = function (elem, scrollArea) {
|
|
// offset().top adds the navigation bar too so we have to subract it
|
|
var elemTop = elem.offset().top - scrollArea.offset().top;
|
|
var elemBottom = elemTop + elem.height();
|
|
|
|
var areaBottom = scrollArea.height();
|
|
|
|
return elemTop >= 0 && elemBottom < areaBottom;
|
|
};
|
|
|
|
var scrollToNavigationElement = function (elem, scrollArea, toTop) {
|
|
if (elem.length === 0 || (!toTop && isInScrollView(elem, scrollArea))) {
|
|
return;
|
|
}
|
|
scrollArea.scrollTop(
|
|
elem.offset().top - scrollArea.offset().top + scrollArea.scrollTop()
|
|
);
|
|
};
|
|
|
|
var scrollToActiveNavigationEntry = function (navigationArea) {
|
|
var element = navigationArea.find('.active');
|
|
scrollToNavigationElement(element, navigationArea.children('ul'), true);
|
|
};
|
|
|
|
var reloadFeed = function (navigationArea) {
|
|
navigationArea.find('.active > a:visible').trigger('click');
|
|
};
|
|
|
|
var activateNavigationEntry = function (element, navigationArea) {
|
|
element.children('a:visible').trigger('click');
|
|
scrollToNavigationElement(element, navigationArea.children('ul'));
|
|
};
|
|
|
|
var nextFeed = function (navigationArea) {
|
|
var current = navigationArea.find('.active');
|
|
var elements = navigationArea.find('.explore-feed,' +
|
|
'.subscriptions-feed:visible,' +
|
|
'.starred-feed:visible,' +
|
|
'.feed:visible');
|
|
|
|
if (current.hasClass('folder')) {
|
|
while (current.length > 0) {
|
|
var subfeeds = current.find('.feed:visible');
|
|
if (subfeeds.length > 0) {
|
|
activateNavigationEntry($(subfeeds[0]), navigationArea);
|
|
return;
|
|
}
|
|
current = current.next('.folder');
|
|
}
|
|
|
|
// no subfeed found
|
|
return;
|
|
}
|
|
|
|
// FIXME: O(n) runtime. If someone creates a nice and not fugly solution
|
|
// please create a PR
|
|
for (var i = 0; i < elements.length - 1; i += 1) {
|
|
var element = elements[i];
|
|
|
|
if (element === current[0]) {
|
|
var next = elements[i + 1];
|
|
activateNavigationEntry($(next), navigationArea);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
var getParentFolder = function (current) {
|
|
return current.parent().parent('.folder');
|
|
};
|
|
|
|
var selectFirstOrLastFolder = function (navigationArea, isLast) {
|
|
var folders = navigationArea.find('.folder:visible');
|
|
|
|
var index;
|
|
if (isLast) {
|
|
index = folders.length - 1;
|
|
} else {
|
|
index = 0;
|
|
}
|
|
|
|
if (folders.length > 0) {
|
|
activateNavigationEntry($(folders[index]), navigationArea);
|
|
}
|
|
};
|
|
|
|
var previousFolder = function (navigationArea) {
|
|
var current = navigationArea.find('.active');
|
|
|
|
// cases: folder active, subfeed active, feed active, none active
|
|
if (current.hasClass('folder')) {
|
|
activateNavigationEntry(current.prevAll('.folder:visible').first(),
|
|
navigationArea);
|
|
} else if (current.hasClass('feed')) {
|
|
var parentFolder = getParentFolder(current);
|
|
if (parentFolder.length > 0) {
|
|
// first go to previous folder should select the parent folder
|
|
activateNavigationEntry(parentFolder, navigationArea);
|
|
} else {
|
|
selectFirstOrLastFolder(navigationArea, true);
|
|
}
|
|
} else {
|
|
selectFirstOrLastFolder(navigationArea, true);
|
|
}
|
|
};
|
|
|
|
var nextFolder = function (navigationArea) {
|
|
var current = navigationArea.find('.active');
|
|
|
|
// cases: folder active, subfeed active, feed active, none active
|
|
if (current.hasClass('folder')) {
|
|
activateNavigationEntry(current.nextAll('.folder:visible').first(),
|
|
navigationArea);
|
|
} else if (current.hasClass('feed')) {
|
|
var parentFolder = getParentFolder(current);
|
|
if (parentFolder.length > 0) {
|
|
activateNavigationEntry(
|
|
parentFolder.nextAll('.folder:visible').first(),
|
|
navigationArea
|
|
);
|
|
} else {
|
|
selectFirstOrLastFolder(navigationArea);
|
|
}
|
|
} else {
|
|
selectFirstOrLastFolder(navigationArea);
|
|
}
|
|
};
|
|
|
|
var previousFeed = function (navigationArea) {
|
|
var current = navigationArea.find('.active');
|
|
var elements = navigationArea.find('.explore-feed,' +
|
|
'.subscriptions-feed:visible,' +
|
|
'.starred-feed:visible,' +
|
|
'.feed:visible');
|
|
|
|
// special case: folder selected
|
|
if (current.hasClass('folder')) {
|
|
var previousFolder = current.prev('.folder');
|
|
|
|
while (previousFolder.length > 0) {
|
|
var subfeeds = previousFolder.find('.feed:visible');
|
|
if (subfeeds.length > 0) {
|
|
activateNavigationEntry($(subfeeds[subfeeds.length - 1]),
|
|
navigationArea);
|
|
return;
|
|
}
|
|
previousFolder = previousFolder.prev('.folder');
|
|
}
|
|
|
|
// no subfeed found try visible feeds
|
|
var feeds = current.siblings('.feed');
|
|
|
|
if (feeds.length > 0) {
|
|
activateNavigationEntry($(feeds[feeds.length - 1]),
|
|
navigationArea);
|
|
return;
|
|
}
|
|
|
|
|
|
// no feed found, go to starred
|
|
var starred = $('.starred-feed:visible');
|
|
if (starred.length > 0) {
|
|
activateNavigationEntry(starred, navigationArea);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// FIXME: O(n) runtime. If someone creates a nice and not fugly solution
|
|
// please create a PR
|
|
for (var i = elements.length - 1; i > 0; i -= 1) {
|
|
var element = elements[i];
|
|
|
|
if (element === current[0]) {
|
|
var previous = elements[i - 1];
|
|
activateNavigationEntry($(previous), navigationArea);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
var getActiveElement = function () {
|
|
return $('#app-content').find('.item.active:first');
|
|
};
|
|
|
|
var onActiveItem = function (callback) {
|
|
callback(getActiveElement());
|
|
};
|
|
|
|
var toggleUnread = function () {
|
|
onActiveItem(function (item) {
|
|
item.find('.toggle-keep-unread').trigger('click');
|
|
});
|
|
};
|
|
|
|
var toggleStar = function () {
|
|
onActiveItem(function (item) {
|
|
item.find('.star').trigger('click');
|
|
});
|
|
};
|
|
|
|
var expandItem = function () {
|
|
onActiveItem(function (item) {
|
|
item.find('.utils').trigger('click');
|
|
});
|
|
};
|
|
|
|
var openLink = function () {
|
|
onActiveItem(function (item) {
|
|
var url = item.find('.external:visible').attr('href');
|
|
var newWindow = window.open(url, '_blank');
|
|
newWindow.opener = null;
|
|
setTimeout(()=>item.trigger('click'), 0); // mark read
|
|
});
|
|
};
|
|
|
|
var setItemActive = function (element) {
|
|
element.dispatchEvent(new CustomEvent('set-active'));
|
|
};
|
|
|
|
var scrollToItem = function (scrollArea, item, expandItemInCompact) {
|
|
// if you go to the next article in compact view, it should
|
|
// expand the current one
|
|
|
|
if (window.NEWS_NC_MAJOR_VERSION >= 25) {
|
|
scrollArea.scrollTop(scrollArea.scrollTop() + item.offset().top - 50);
|
|
} else {
|
|
scrollArea.scrollTop(
|
|
item.offset().top - 50
|
|
);
|
|
}
|
|
|
|
setItemActive(item[0]);
|
|
|
|
if (expandItemInCompact) {
|
|
if (!item.hasClass('open')) {
|
|
item.find('.utils').trigger('click');
|
|
}
|
|
}
|
|
};
|
|
|
|
var scrollToNextItem = function (scrollArea, expandItemInCompact) {
|
|
var activeElement = getActiveElement();
|
|
// in expand in compact mode, jumping to the next item should open
|
|
// the current one if it's not open yet
|
|
if (expandItemInCompact && !activeElement.hasClass('open')) {
|
|
activeElement.find('.utils').trigger('click');
|
|
} else {
|
|
var nextElement = activeElement.next();
|
|
if (nextElement.length > 0) {
|
|
scrollToItem(scrollArea, nextElement, expandItemInCompact);
|
|
} else if (nextElement.length === 0) {
|
|
activeElement.find('.utils').trigger('click');
|
|
} else {
|
|
// in case this is the last item it should still scroll below
|
|
// the
|
|
scrollArea.scrollTop(scrollArea.prop('scrollHeight'));
|
|
}
|
|
}
|
|
};
|
|
|
|
var scrollToPreviousItem = function (scrollArea,
|
|
expandItemInCompact) {
|
|
var activeElement = getActiveElement();
|
|
var previousElement = activeElement.prev();
|
|
|
|
// if the active element has been scrolled, the previous element
|
|
// should be the active one
|
|
if (activeElement.position().top + 20 <= 0) {
|
|
scrollToItem(scrollArea, activeElement, expandItemInCompact);
|
|
} else if (previousElement.length > 0) {
|
|
scrollToItem(scrollArea, previousElement, expandItemInCompact);
|
|
} else {
|
|
scrollArea.scrollTop(0);
|
|
}
|
|
};
|
|
|
|
// mark current item as active when scrolling
|
|
$(document).ready(function () {
|
|
var detectAndSetActiveItem = function () {
|
|
var items = $('#app-content').find('.item');
|
|
items.each(function (index, item) {
|
|
var $item = $(item);
|
|
var bottom = $item.position().top + $item.outerHeight(true);
|
|
var scrollBottom = scrollElement().scrollTop();
|
|
if (bottom - 20 >= scrollBottom) {
|
|
setItemActive(item);
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
scrollElement().scroll(_.debounce(detectAndSetActiveItem, 250));
|
|
});
|
|
|
|
$(document).keyup(function (event) {
|
|
var keyCode = event.keyCode;
|
|
var scrollArea = scrollElement();
|
|
var navigationArea = $('#app-navigation');
|
|
var isCompactView = $('#articles.compact').length > 0;
|
|
var isExpandItem = $('#articles')
|
|
.attr('news-compact-expand') === 'true';
|
|
var expandItemInCompact = isCompactView && isExpandItem;
|
|
|
|
if (noInputFocused($(':focus')) && noModifierKey(event)) {
|
|
// j, n, right arrow
|
|
if ([74, 78, 39].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
scrollToNextItem(scrollArea, expandItemInCompact);
|
|
|
|
// k, p, left arrow
|
|
} else if ([75, 80, 37].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
scrollToPreviousItem(scrollArea,
|
|
expandItemInCompact);
|
|
|
|
// u
|
|
} else if ([85].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
toggleUnread(scrollArea);
|
|
|
|
// e
|
|
} else if ([69].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
expandItem(scrollArea);
|
|
|
|
// s, i, l
|
|
} else if ([73, 83, 76].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
toggleStar(scrollArea);
|
|
|
|
// h
|
|
} else if ([72].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
toggleStar(scrollArea);
|
|
scrollToNextItem(scrollArea);
|
|
|
|
// o
|
|
} else if ([79].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
openLink(scrollArea);
|
|
|
|
// r
|
|
} else if ([82].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
reloadFeed(navigationArea);
|
|
|
|
// f
|
|
} else if ([70].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
nextFeed(navigationArea);
|
|
|
|
// d
|
|
} else if ([68].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
previousFeed(navigationArea);
|
|
|
|
// c
|
|
} else if ([67].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
previousFolder(navigationArea);
|
|
|
|
// a
|
|
} else if ([65].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
scrollToActiveNavigationEntry(navigationArea);
|
|
|
|
// v
|
|
} else if ([86].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
nextFolder(navigationArea);
|
|
|
|
// q
|
|
} else if ([81].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
$('#searchbox').focus();
|
|
|
|
// page up
|
|
}
|
|
|
|
// everything with shift, just the shift
|
|
} else if (noInputFocused($(':focus')) && event.shiftKey &&
|
|
!event.ctrlKey && !event.altKey && !event.metaKey) {
|
|
|
|
// shift + a
|
|
if ([65].indexOf(keyCode) >= 0) {
|
|
|
|
event.preventDefault();
|
|
markAllRead(navigationArea);
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
}(window, document, $));
|