1
0
mirror of https://github.com/moparisthebest/wallabag synced 2025-02-14 06:00:10 -05:00

[add] ajax behavior when we start an entry

This commit is contained in:
Nicolas Lœuillet 2014-01-17 17:19:43 +01:00
parent 038b4d74ba
commit 8c617ddea8
5 changed files with 164 additions and 115 deletions

View File

@ -19,9 +19,9 @@ $front->get('/restore/{id}', 'Poche\Controller\EntryController::restoreAction')
// bookmarks // bookmarks
$front->get('/bookmarks', 'Poche\Controller\BookmarkController::indexAction'); $front->get('/bookmarks', 'Poche\Controller\BookmarkController::indexAction');
$front->get('/star/{id}', 'Poche\Controller\BookmarkController::addAction') $front->match('/star/{id}', 'Poche\Controller\BookmarkController::addAction')
->bind('star_entry'); ->bind('star_entry');
$front->get('/unstar/{id}', 'Poche\Controller\BookmarkController::removeAction') $front->match('/unstar/{id}', 'Poche\Controller\BookmarkController::removeAction')
->bind('unstar_entry'); ->bind('unstar_entry');
// archive // archive

View File

@ -10,12 +10,18 @@
<ul class="tools"> <ul class="tools">
<li> <li>
{% if entry.status == "read" %} {% 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> <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 %} {% 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> <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 id="bookmark-{{entry.id}}" href="{{ path('unstar_entry', {'id': entry.id}) }}" data-action="unstar_entry" data-entry-id="{{entry.id}}" data-reverse-label="{{ 'star'|trans }}">{{ 'unstar'|trans }}</a>
{% else %}
<a id="bookmark-{{entry.id}}" href="{{ path('star_entry', {'id': entry.id}) }}" data-action="star_entry" data-entry-id="{{entry.id}}" data-reverse-label="{{ 'unstar'|trans }}">{{ 'star'|trans }}</a>
{% endif %} {% endif %}
</li> </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>
<li>{{ entry.content | getReadingTime }} {{'min read'|trans}} </li> <li>{{ entry.content | getReadingTime }} {{'min read'|trans}} </li>

View File

@ -5,7 +5,7 @@
<nav role="navigation"> <nav role="navigation">
<a class="logo" href="/">poche</a> <a class="logo" href="/">poche</a>
<ul> <ul>
<li {% if app.request.requesturi == '/' %}class="active"{% endif %}><a href="/">{{ 'unread'|trans }}</a>{% if app.request.requesturi == '/' %} ({{count}}){% endif %}</li> <li {% if app.request.requesturi == '/' %}class="active"{% endif %}><a href="/">{{ 'unread'|trans }}</a>{% if app.request.requesturi == '/' %} (<span id="counter">{{count}}</span>){% endif %}</li>
<li {% if app.request.requesturi == '/bookmarks' %}class="active"{% endif %}><a href="/bookmarks">{{ 'bookmarks'|trans }}</a></li> <li {% if app.request.requesturi == '/bookmarks' %}class="active"{% endif %}><a href="/bookmarks">{{ 'bookmarks'|trans }}</a></li>
<li {% if app.request.requesturi == '/archive' %}class="active"{% endif %}><a href="/archive">{{ 'archive'|trans }}</a></li> <li {% if app.request.requesturi == '/archive' %}class="active"{% endif %}><a href="/archive">{{ 'archive'|trans }}</a></li>
<li {% if app.request.requesturi == '/add' %}class="active"{% endif %}><a href="{{ path('add') }}">{{ 'entry.add'|trans }}</a></li> <li {% if app.request.requesturi == '/add' %}class="active"{% endif %}><a href="{{ path('add') }}">{{ 'entry.add'|trans }}</a></li>

View File

@ -20,17 +20,21 @@ poche.Event = (function() {
e.preventDefault(); e.preventDefault();
poche.Item.MarkAsUnread(e.target.getAttribute("data-entry-id")); poche.Item.MarkAsUnread(e.target.getAttribute("data-entry-id"));
break; break;
case 'bookmark': case 'unstar_entry':
e.preventDefault(); e.preventDefault();
poche.Item.SwitchBookmark(poche.Item.Get(e.target.getAttribute("data-entry-id"))); poche.Item.MarkAsUnstarred(e.target.getAttribute("data-entry-id"));
break; break;
case 'original-link': case 'star_entry':
poche.Item.OpenOriginal(e.target.getAttribute("data-entry-id"));
break;
case 'mark-all-read':
e.preventDefault(); e.preventDefault();
poche.Item.MarkListingAsRead("?action=unread"); poche.Item.MarkAsStarred(e.target.getAttribute("data-entry-id"));
break; 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;
} }
} }
}; };

View File

@ -23,27 +23,27 @@ poche.Item = (function() {
} }
} }
function showItemBookmarked(item_id, item) // function showItemBookmarked(item_id, item)
{ // {
if (! poche.Nav.IsListing()) { // if (! poche.Nav.IsListing()) {
var link = document.getElementById("bookmark-" + item_id); // var link = document.getElementById("bookmark-" + item_id);
if (link) link.innerHTML = "★"; // if (link) link.innerHTML = "★";
} // }
else { // else {
var link = document.getElementById("show-" + item_id); // var link = document.getElementById("show-" + item_id);
if (link) { // if (link) {
var icon = document.createElement("span"); // var icon = document.createElement("span");
icon.id = "bookmark-icon-" + item_id; // icon.id = "bookmark-icon-" + item_id;
icon.appendChild(document.createTextNode("★ ")); // icon.appendChild(document.createTextNode("★ "));
link.parentNode.insertBefore(icon, link); // link.parentNode.insertBefore(icon, link);
} // }
changeBookmarkLabel(item_id); // changeBookmarkLabel(item_id);
} // }
} // }
function hideItemBookmarked(item_id, item) function hideItemBookmarked(item_id, item)
{ {
@ -72,6 +72,32 @@ poche.Item = (function() {
} }
} }
function showItemAsStarred(item_id)
{
var item = getItem(item_id);
if (item) {
changeBookmarkLabel(item_id);
// Change action
link = document.getElementById("bookmark-" + item_id);
if (link) link.setAttribute("data-action", "unstar_entry");
}
}
function showItemAsUnstarred(item_id)
{
var item = getItem(item_id);
if (item) {
changeBookmarkLabel(item_id);
// Change action
link = document.getElementById("bookmark-" + item_id);
if (link) link.setAttribute("data-action", "unstar_entry");
}
}
function showItemAsRead(item_id) function showItemAsRead(item_id)
{ {
var item = getItem(item_id); var item = getItem(item_id);
@ -114,24 +140,35 @@ poche.Item = (function() {
function hideItem(item) function hideItem(item)
{ {
//poche.Nav.SelectNextItem();
item.parentNode.removeChild(item); item.parentNode.removeChild(item);
//var container = document.getElementById("page-counter"); var container = document.getElementById("counter");
// if (container) { if (container) {
// counter = parseInt(container.textContent.trim(), 10) - 1; counter = parseInt(container.textContent.trim(), 10) - 1;
container.textContent = counter;
document.title = "unread (" + counter + ") poche";
}
}
// if (counter == 0) { function markAsStarred(item_id)
// window.location = "?action=feeds&nothing_to_read=1"; {
// } var request = new XMLHttpRequest();
// else { request.onload = function() {
// container.textContent = counter + " "; if (poche.Nav.IsListing()) showItemAsStarred(item_id);
// document.title = "poche (" + counter + ")"; };
// document.getElementById("nav-counter").textContent = "(" + counter + ")"; request.open("POST", "star/" + item_id, true);
// } request.send();
// } }
function markAsUnstarred(item_id)
{
var request = new XMLHttpRequest();
request.onload = function() {
if (poche.Nav.IsListing()) showItemAsUnstarred(item_id);
};
request.open("POST", "unstar/" + item_id, true);
request.send();
} }
function markAsRead(item_id) function markAsRead(item_id)
@ -154,96 +191,98 @@ poche.Item = (function() {
request.send(); request.send();
} }
function bookmark(item, value) // function bookmark(item, value)
{ // {
var item_id = item.getAttribute("data-item-id"); // var item_id = item.getAttribute("data-item-id");
var request = new XMLHttpRequest(); // var request = new XMLHttpRequest();
request.onload = function() { // request.onload = function() {
item.setAttribute("data-item-bookmark", value); // item.setAttribute("data-item-bookmark", value);
if (value) { // if (value) {
showItemBookmarked(item_id, item); // showItemBookmarked(item_id, item);
} // }
else { // else {
hideItemBookmarked(item_id, item); // hideItemBookmarked(item_id, item);
} // }
}; // };
request.open("POST", "?action=bookmark&id=" + item_id + "&value=" + value, true); // request.open("POST", "?action=bookmark&id=" + item_id + "&value=" + value, true);
request.send(); // request.send();
} // }
return { return {
Get: getItem, // Get: getItem,
MarkAsRead: markAsRead, MarkAsRead: markAsRead,
MarkAsUnread: markAsUnread, MarkAsUnread: markAsUnread,
SwitchBookmark: function(item) { MarkAsStarred: markAsStarred,
MarkAsUnstarred: markAsUnstarred,
// SwitchBookmark: function(item) {
var bookmarked = item.getAttribute("data-item-bookmark"); // var bookmarked = item.getAttribute("data-item-bookmark");
if (bookmarked == "1") { // if (bookmarked == "1") {
bookmark(item, 0); // bookmark(item, 0);
} // }
else { // else {
bookmark(item, 1); // bookmark(item, 1);
} // }
}, // },
SwitchStatus: function(item) { // SwitchStatus: function(item) {
var item_id = item.getAttribute("data-item-id"); // var item_id = item.getAttribute("data-item-id");
var status = item.getAttribute("data-item-status"); // var status = item.getAttribute("data-item-status");
if (status == "read") { // if (status == "read") {
markAsUnread(item_id); // markAsUnread(item_id);
} // }
else if (status == "unread") { // else if (status == "unread") {
markAsRead(item_id); // markAsRead(item_id);
} // }
}, // },
ChangeStatus: function(item_id, status) { // ChangeStatus: function(item_id, status) {
switch (status) { // switch (status) {
case "read": // case "read":
markAsRead(item_id); // markAsRead(item_id);
break; // break;
case "unread": // case "unread":
markAsUnread(item_id); // markAsUnread(item_id);
break; // break;
} // }
}, // },
Show: function(item_id) { // Show: function(item_id) {
var link = document.getElementById("show-" + item_id); // var link = document.getElementById("show-" + item_id);
if (link) link.click(); // if (link) link.click();
}, // },
OpenOriginal: function(item_id) { // OpenOriginal: function(item_id) {
var link = document.getElementById("original-" + item_id); // var link = document.getElementById("original-" + item_id);
if (link) { // if (link) {
if (getItem(item_id).getAttribute("data-item-status") == "unread") markAsRead(item_id); // if (getItem(item_id).getAttribute("data-item-status") == "unread") markAsRead(item_id);
link.removeAttribute("data-action"); // link.removeAttribute("data-action");
link.click(); // link.click();
} // }
}, // },
MarkListingAsRead: function(redirect) { // MarkListingAsRead: function(redirect) {
var articles = document.getElementsByTagName("article"); // var articles = document.getElementsByTagName("article");
var listing = []; // var listing = [];
for (var i = 0, ilen = articles.length; i < ilen; i++) { // for (var i = 0, ilen = articles.length; i < ilen; i++) {
listing.push(articles[i].getAttribute("data-item-id")); // listing.push(articles[i].getAttribute("data-item-id"));
} // }
var request = new XMLHttpRequest(); // var request = new XMLHttpRequest();
request.onload = function() { // request.onload = function() {
window.location.href = redirect; // window.location.href = redirect;
}; // };
request.open("POST", "?action=mark-items-as-read", true); // request.open("POST", "?action=mark-items-as-read", true);
request.send(JSON.stringify(listing)); // request.send(JSON.stringify(listing));
} // }
}; };
})(); })();