moparisthebest/wallabag
1
0
Fork 0
mirror of https://github.com/moparisthebest/wallabag synced 2024-11-15 21:55:09 -05:00
Code Issues Releases Wiki Activity

[add] first draft of ajax actions (only with mark as read)

Browse Source
This commit is contained in:
Nicolas Lœuillet 2014-01-17 15:56:15 +01:00
parent b03c17c194
commit 038b4d74ba
7 changed files with 512 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/controllers/front.php
View File

@ -26,9 +26,9 @@ $front->get('/unstar/{id}', 'Poche\Controller\BookmarkController::removeAction')
// archive // archive
$front->get('/archive', 'Poche\Controller\ArchiveController::indexAction'); $front->get('/archive', 'Poche\Controller\ArchiveController::indexAction');
$front->get('/mark-read/{id}', 'Poche\Controller\ArchiveController::readAction') $front->match('/mark-read/{id}', 'Poche\Controller\ArchiveController::readAction')
->bind('mark_entry_read'); ->bind('mark_entry_read');
$front->get('/mark-unread/{id}', 'Poche\Controller\ArchiveController::unreadAction') $front->match('/mark-unread/{id}', 'Poche\Controller\ArchiveController::unreadAction')
->bind('mark_entry_unread'); ->bind('mark_entry_unread');
return $front; return $front;

10
app/views/_entry.twig
View File

@ -1,4 +1,4 @@
<article id="item-{{entry.id}}"> <article id="item-{{entry.id}}" data-hide="true">
<h2><a href="{{ path('view_entry', {'id': entry.id}) }}">{{ entry.title }}</a></h2> <h2><a href="{{ path('view_entry', {'id': entry.id}) }}">{{ entry.title }}</a></h2>
{% set picture = entry.content|getPicture %} {% set picture = entry.content|getPicture %}
{% if picture != "" %} {% if picture != "" %}
@ -8,7 +8,13 @@
{% endif %} {% endif %}
<p class="preview">{{ entry.content|striptags|slice(0, 300) }}&hellip;</p> <p class="preview">{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
<ul class="tools"> <ul class="tools">
<li>{% if entry.status == "read" %}<a href="{{ path('mark_entry_unread', {'id': entry.id}) }}">{{ 'mark as unread'|trans }}</a>{% else %}<a href="{{ path('mark_entry_read', {'id': entry.id}) }}">{{ 'mark as read'|trans }}</a>{% endif %}</li> <li>
{% if entry.status == "read" %}
<a id="status-{{entry.id}}" href="{{ path('mark_entry_unread', {'id': entry.id}) }}" data-action="mark_entry_unread" data-entry-id="{{entry.id}}" data-reverse-label="{{ 'mark as read'|trans }}">{{ 'mark as unread'|trans }}</a>
{% else %}
<a id="status-{{entry.id}}" href="{{ path('mark_entry_read', {'id': entry.id}) }}" data-action="mark_entry_read" data-entry-id="{{entry.id}}" data-reverse-label="{{ 'mark as unread'|trans }}">{{ 'mark as read'|trans }}</a>
{% endif %}
</li>
<li>{% if entry.bookmark == 1 %}<a href="{{ path('unstar_entry', {'id': entry.id}) }}">{{ 'unstar'|trans }}</a>{% else %}<a href="{{ path('star_entry', {'id': entry.id}) }}">{{ 'star'|trans }}</a>{% endif %}</li> <li>{% if entry.bookmark == 1 %}<a href="{{ path('unstar_entry', {'id': entry.id}) }}">{{ 'unstar'|trans }}</a>{% else %}<a href="{{ path('star_entry', {'id': entry.id}) }}">{{ 'star'|trans }}</a>{% endif %}</li>
<li><a href="{{ path('remove_entry', {'id': entry.id}) }}">{{ 'delete'|trans }}</a></li> <li><a href="{{ path('remove_entry', {'id': entry.id}) }}">{{ 'delete'|trans }}</a></li>
<li><a href="{{ entry.url }}" class="external" title="{{ 'view original'|trans }}">{{ entry.url | getDomain }}</a></li> <li><a href="{{ entry.url }}" class="external" title="{{ 'view original'|trans }}">{{ entry.url | getDomain }}</a></li>

4
app/views/layout.twig
View File

@ -15,6 +15,10 @@
<link rel="stylesheet" href="/assets/css/tinytypo.css" media="all"> <link rel="stylesheet" href="/assets/css/tinytypo.css" media="all">
<link rel="stylesheet" href="/assets/css/typo.css" media="all"> <link rel="stylesheet" href="/assets/css/typo.css" media="all">
<link rel="stylesheet" href="/assets/css/custom.css" media="all"> <link rel="stylesheet" href="/assets/css/custom.css" media="all">
<script src="/assets/js/app.js"></script>
<script src="/assets/js/event.js"></script>
<script src="/assets/js/item.js"></script>
<script src="/assets/js/nav.js"></script>
</head> </head>
<body> <body>
<div id="main" class="page"> <div id="main" class="page">

12
web/assets/js/app.js Normal file
View File

@ -0,0 +1,12 @@
var poche = {};
poche.App = (function() {
return {
Run: function() {
// poche.Event.ListenKeyboardEvents();
poche.Event.ListenMouseEvents();
},
}
})();

117
web/assets/js/event.js Normal file
View File

@ -0,0 +1,117 @@
poche.Event = (function() {
var queue = [];
return {
ListenMouseEvents: function() {
document.onclick = function(e) {
var action = e.target.getAttribute("data-action");
if (action) {
switch (action) {
case 'mark_entry_read':
e.preventDefault();
poche.Item.MarkAsRead(e.target.getAttribute("data-entry-id"));
break;
case 'mark_entry_unread':
e.preventDefault();
poche.Item.MarkAsUnread(e.target.getAttribute("data-entry-id"));
break;
case 'bookmark':
e.preventDefault();
poche.Item.SwitchBookmark(poche.Item.Get(e.target.getAttribute("data-entry-id")));
break;
case 'original-link':
poche.Item.OpenOriginal(e.target.getAttribute("data-entry-id"));
break;
case 'mark-all-read':
e.preventDefault();
poche.Item.MarkListingAsRead("?action=unread");
break;
}
}
};
}/*,
ListenKeyboardEvents: function() {
document.onkeypress = function(e) {
queue.push(e.keyCode || e.which);
if (queue[0] == 103) { // g
switch (queue[1]) {
case undefined:
break;
case 117: // u
window.location.href = "?action=unread";
queue = [];
break;
case 98: // b
window.location.href = "?action=bookmarks";
queue = [];
break;
case 104: // h
window.location.href = "?action=history";
queue = [];
break;
case 115: // s
window.location.href = "?action=feeds";
queue = [];
break;
case 112: // p
window.location.href = "?action=config";
queue = [];
break;
default:
queue = [];
break;
}
}
else {
queue = [];
switch (e.keyCode || e.which) {
case 100: // d
poche.Item.DownloadContent(poche.Nav.GetCurrentItemId());
break;
case 112: // p
case 107: // k
poche.Nav.SelectPreviousItem();
break;
case 110: // n
case 106: // j
poche.Nav.SelectNextItem();
break;
case 118: // v
poche.Item.OpenOriginal(poche.Nav.GetCurrentItemId());
break;
case 111: // o
poche.Item.Show(poche.Nav.GetCurrentItemId());
break;
case 109: // m
poche.Item.SwitchStatus(poche.Nav.GetCurrentItem());
break;
case 102: // f
poche.Item.SwitchBookmark(poche.Nav.GetCurrentItem());
break;
case 104: // h
poche.Nav.OpenPreviousPage();
break
case 108: // l
poche.Nav.OpenNextPage();
break;
case 63: // ?
poche.Nav.ShowHelp();
break;
}
}
}
}*/
};
})();

251
web/assets/js/item.js Normal file
View File

@ -0,0 +1,251 @@
poche.Item = (function() {
function getItem(item_id)
{
var item = document.getElementById("item-" + item_id);
if (! item) {
item = document.getElementById("current-item");
if (item.getAttribute("data-item-id") != item_id) item = false;
}
return item;
}
function changeBookmarkLabel(item_id)
{
var link = document.getElementById("bookmark-" + item_id);
if (link && link.getAttribute("data-reverse-label")) {
var content = link.innerHTML;
link.innerHTML = link.getAttribute("data-reverse-label");
link.setAttribute("data-reverse-label", content);
}
}
function showItemBookmarked(item_id, item)
{
if (! poche.Nav.IsListing()) {
var link = document.getElementById("bookmark-" + item_id);
if (link) link.innerHTML = "★";
}
else {
var link = document.getElementById("show-" + item_id);
if (link) {
var icon = document.createElement("span");
icon.id = "bookmark-icon-" + item_id;
icon.appendChild(document.createTextNode("★ "));
link.parentNode.insertBefore(icon, link);
}
changeBookmarkLabel(item_id);
}
}
function hideItemBookmarked(item_id, item)
{
if (! poche.Nav.IsListing()) {
var link = document.getElementById("bookmark-" + item_id);
if (link) link.innerHTML = "☆";
}
else {
var icon = document.getElementById("bookmark-icon-" + item_id);
if (icon) icon.parentNode.removeChild(icon);
changeBookmarkLabel(item_id);
}
}
function changeStatusLabel(item_id)
{
var link = document.getElementById("status-" + item_id);
if (link) {
var content = link.innerHTML;
link.innerHTML = link.getAttribute("data-reverse-label");
link.setAttribute("data-reverse-label", content);
}
}
function showItemAsRead(item_id)
{
var item = getItem(item_id);
if (item) {
if (item.getAttribute("data-hide")) {
hideItem(item);
}
else {
item.setAttribute("data-item-status", "read");
changeStatusLabel(item_id);
// Change action
link = document.getElementById("status-" + item_id);
if (link) link.setAttribute("data-action", "mark_entry_unread");
}
}
}
function showItemAsUnread(item_id)
{
var item = getItem(item_id);
if (item) {
if (item.getAttribute("data-hide")) {
hideItem(item);
}
else {
item.setAttribute("data-item-status", "unread");
changeStatusLabel(item_id);
// Change action
link = document.getElementById("status-" + item_id);
if (link) link.setAttribute("data-action", "mark_entry_read");
}
}
}
function hideItem(item)
{
//poche.Nav.SelectNextItem();
item.parentNode.removeChild(item);
//var container = document.getElementById("page-counter");
// if (container) {
// counter = parseInt(container.textContent.trim(), 10) - 1;
// if (counter == 0) {
// window.location = "?action=feeds&nothing_to_read=1";
// }
// else {
// container.textContent = counter + " ";
// document.title = "poche (" + counter + ")";
// document.getElementById("nav-counter").textContent = "(" + counter + ")";
// }
// }
}
function markAsRead(item_id)
{
var request = new XMLHttpRequest();
request.onload = function() {
if (poche.Nav.IsListing()) showItemAsRead(item_id);
};
request.open("POST", "mark-read/" + item_id, true);
request.send();
}
function markAsUnread(item_id)
{
var request = new XMLHttpRequest();
request.onload = function() {
if (poche.Nav.IsListing()) showItemAsUnread(item_id);
};
request.open("POST", "mark-unread/" + item_id, true);
request.send();
}
function bookmark(item, value)
{
var item_id = item.getAttribute("data-item-id");
var request = new XMLHttpRequest();
request.onload = function() {
item.setAttribute("data-item-bookmark", value);
if (value) {
showItemBookmarked(item_id, item);
}
else {
hideItemBookmarked(item_id, item);
}
};
request.open("POST", "?action=bookmark&id=" + item_id + "&value=" + value, true);
request.send();
}
return {
Get: getItem,
MarkAsRead: markAsRead,
MarkAsUnread: markAsUnread,
SwitchBookmark: function(item) {
var bookmarked = item.getAttribute("data-item-bookmark");
if (bookmarked == "1") {
bookmark(item, 0);
}
else {
bookmark(item, 1);
}
},
SwitchStatus: function(item) {
var item_id = item.getAttribute("data-item-id");
var status = item.getAttribute("data-item-status");
if (status == "read") {
markAsUnread(item_id);
}
else if (status == "unread") {
markAsRead(item_id);
}
},
ChangeStatus: function(item_id, status) {
switch (status) {
case "read":
markAsRead(item_id);
break;
case "unread":
markAsUnread(item_id);
break;
}
},
Show: function(item_id) {
var link = document.getElementById("show-" + item_id);
if (link) link.click();
},
OpenOriginal: function(item_id) {
var link = document.getElementById("original-" + item_id);
if (link) {
if (getItem(item_id).getAttribute("data-item-status") == "unread") markAsRead(item_id);
link.removeAttribute("data-action");
link.click();
}
},
MarkListingAsRead: function(redirect) {
var articles = document.getElementsByTagName("article");
var listing = [];
for (var i = 0, ilen = articles.length; i < ilen; i++) {
listing.push(articles[i].getAttribute("data-item-id"));
}
var request = new XMLHttpRequest();
request.onload = function() {
window.location.href = redirect;
};
request.open("POST", "?action=mark-items-as-read", true);
request.send(JSON.stringify(listing));
}
};
})();
poche.App.Run();

118
web/assets/js/nav.js Normal file
View File

@ -0,0 +1,118 @@
poche.Nav = (function() {
// function scrollPageTo(item)
// {
// var clientHeight = pageYOffset + document.documentElement.clientHeight;
// var itemPosition = item.offsetTop + item.offsetHeight;
// if (clientHeight - itemPosition < 0 || clientHeight - item.offsetTop > document.documentElement.clientHeight) {
// window.scrollTo(0, item.offsetTop - 10);
// }
// }
// function findNextItem()
// {
// var items = document.getElementsByTagName("article");
// if (! document.getElementById("current-item")) {
// items[0].id = "current-item";
// scrollPageTo(items[0]);
// }
// else {
// for (var i = 0, ilen = items.length; i < ilen; i++) {
// if (items[i].id == "current-item") {
// items[i].id = "item-" + items[i].getAttribute("data-item-id");
// if (i + 1 < ilen) {
// items[i + 1].id = "current-item";
// scrollPageTo(items[i + 1]);
// }
// break;
// }
// }
// }
// }
// function findPreviousItem()
// {
// var items = document.getElementsByTagName("article");
// if (! document.getElementById("current-item")) {
// items[items.length - 1].id = "current-item";
// scrollPageTo(items[items.length - 1]);
// }
// else {
// for (var i = items.length - 1; i >= 0; i--) {
// if (items[i].id == "current-item") {
// items[i].id = "item-" + items[i].getAttribute("data-item-id");
// if (i - 1 >= 0) {
// items[i - 1].id = "current-item";
// scrollPageTo(items[i - 1]);
// }
// break;
// }
// }
// }
// }
function isListing()
{
if (document.getElementById("listing")) return true;
return false;
}
return {
// GetCurrentItem: function() {
// return document.getElementById("current-item");
// },
// GetCurrentItemId: function() {
// var item = Miniflux.Nav.GetCurrentItem();
// if (item) return item.getAttribute("data-item-id");
// return null;
// },
// OpenNextPage: function() {
// var link = document.getElementById("next-page");
// if (link) link.click();
// },
// OpenPreviousPage: function() {
// var link = document.getElementById("previous-page");
// if (link) link.click();
// },
// SelectNextItem: function() {
// var link = document.getElementById("next-item");
// if (link) {
// link.click();
// }
// else if (isListing()) {
// findNextItem();
// }
// },
// SelectPreviousItem: function() {
// var link = document.getElementById("previous-item");
// if (link) {
// link.click();
// }
// else if (isListing()) {
// findPreviousItem();
// }
// },
// ShowHelp: function() {
// open("?action=show-help", "Help", "width=320,height=450,location=no,scrollbars=no,status=no,toolbar=no");
// },
IsListing: isListing
};
})();