From 8c617ddea892b8c806fe4ad093cbc454d6ac7ce6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= <nicolas.loeuillet@gmail.com>
Date: Fri, 17 Jan 2014 17:19:43 +0100
Subject: [PATCH] [add] ajax behavior when we start an entry

---
 app/controllers/front.php |   4 +-
 app/views/_entry.twig     |  12 +-
 app/views/_top.twig       |   2 +-
 web/assets/js/event.js    |  18 +--
 web/assets/js/item.js     | 243 ++++++++++++++++++++++----------------
 5 files changed, 164 insertions(+), 115 deletions(-)

diff --git a/app/controllers/front.php b/app/controllers/front.php
index c4185eb..78cf6d7 100644
--- a/app/controllers/front.php
+++ b/app/controllers/front.php
@@ -19,9 +19,9 @@ $front->get('/restore/{id}', 'Poche\Controller\EntryController::restoreAction')
 
 // bookmarks
 $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');
-$front->get('/unstar/{id}', 'Poche\Controller\BookmarkController::removeAction')
+$front->match('/unstar/{id}', 'Poche\Controller\BookmarkController::removeAction')
 ->bind('unstar_entry');
 
 // archive
diff --git a/app/views/_entry.twig b/app/views/_entry.twig
index add0867..191eb22 100644
--- a/app/views/_entry.twig
+++ b/app/views/_entry.twig
@@ -10,12 +10,18 @@
         <ul class="tools">
             <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>
+                <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>
+                <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 %}
             </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="{{ entry.url }}" class="external" title="{{ 'view original'|trans }}">{{ entry.url | getDomain }}</a></li>
             <li>{{ entry.content | getReadingTime }} {{'min read'|trans}} </li>
diff --git a/app/views/_top.twig b/app/views/_top.twig
index f96e5b2..e742d0b 100644
--- a/app/views/_top.twig
+++ b/app/views/_top.twig
@@ -5,7 +5,7 @@
         <nav role="navigation">
             <a class="logo" href="/">poche</a>
             <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 == '/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>
diff --git a/web/assets/js/event.js b/web/assets/js/event.js
index ed80ea9..c0b138d 100644
--- a/web/assets/js/event.js
+++ b/web/assets/js/event.js
@@ -20,17 +20,21 @@ poche.Event = (function() {
                             e.preventDefault();
                             poche.Item.MarkAsUnread(e.target.getAttribute("data-entry-id"));
                             break;
-                        case 'bookmark':
+                        case 'unstar_entry':
                             e.preventDefault();
-                            poche.Item.SwitchBookmark(poche.Item.Get(e.target.getAttribute("data-entry-id")));
+                            poche.Item.MarkAsUnstarred(e.target.getAttribute("data-entry-id"));
                             break;
-                        case 'original-link':
-                            poche.Item.OpenOriginal(e.target.getAttribute("data-entry-id"));
-                            break;
-                        case 'mark-all-read':
+                        case 'star_entry':
                             e.preventDefault();
-                            poche.Item.MarkListingAsRead("?action=unread");
+                            poche.Item.MarkAsStarred(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;
                     }
                 }
             };
diff --git a/web/assets/js/item.js b/web/assets/js/item.js
index 21b434d..3a136b7 100644
--- a/web/assets/js/item.js
+++ b/web/assets/js/item.js
@@ -23,27 +23,27 @@ poche.Item = (function() {
         }
     }
 
-    function showItemBookmarked(item_id, item)
-    {
-        if (! poche.Nav.IsListing()) {
+    // 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("bookmark-" + item_id);
+    //         if (link) link.innerHTML = "★";
+    //     }
+    //     else {
 
-            var link = document.getElementById("show-" + item_id);
+    //         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);
-            }
+    //         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);
-        }
-    }
+    //         changeBookmarkLabel(item_id);
+    //     }
+    // }
 
     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)
     {
         var item = getItem(item_id);
@@ -114,24 +140,35 @@ poche.Item = (function() {
 
     function hideItem(item)
     {
-        //poche.Nav.SelectNextItem();
-
         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) {
-        //         window.location = "?action=feeds&nothing_to_read=1";
-        //     }
-        //     else {
-        //         container.textContent = counter + " ";
-        //         document.title = "poche (" + counter + ")";
-        //         document.getElementById("nav-counter").textContent = "(" + counter + ")";
-        //     }
-        // }
+    function markAsStarred(item_id)
+    {
+        var request = new XMLHttpRequest();
+        request.onload = function() {
+            if (poche.Nav.IsListing()) showItemAsStarred(item_id);
+        };
+        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)
@@ -154,96 +191,98 @@ poche.Item = (function() {
         request.send();
     }
 
-    function bookmark(item, value)
-    {
-        var item_id = item.getAttribute("data-item-id");
-        var request = new XMLHttpRequest();
+    // function bookmark(item, value)
+    // {
+    //     var item_id = item.getAttribute("data-item-id");
+    //     var request = new XMLHttpRequest();
 
-        request.onload = function() {
+    //     request.onload = function() {
 
-            item.setAttribute("data-item-bookmark", value);
+    //         item.setAttribute("data-item-bookmark", value);
 
-            if (value) {
-                showItemBookmarked(item_id, item);
-            }
-            else {
-                hideItemBookmarked(item_id, item);
-            }
-        };
+    //         if (value) {
+    //             showItemBookmarked(item_id, item);
+    //         }
+    //         else {
+    //             hideItemBookmarked(item_id, item);
+    //         }
+    //     };
 
-        request.open("POST", "?action=bookmark&id=" + item_id + "&value=" + value, true);
-        request.send();
-    }
+    //     request.open("POST", "?action=bookmark&id=" + item_id + "&value=" + value, true);
+    //     request.send();
+    // }
 
     return {
-        Get: getItem,
+        // Get: getItem,
         MarkAsRead: markAsRead,
         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") {
-                bookmark(item, 0);
-            }
-            else {
-                bookmark(item, 1);
-            }
-        },
-        SwitchStatus: function(item) {
+        //     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");
+        //     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) {
+        //     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) {
+        //     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);
+        //     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 = [];
+        //     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"));
-            }
+        //     for (var i = 0, ilen = articles.length; i < ilen; i++) {
+        //         listing.push(articles[i].getAttribute("data-item-id"));
+        //     }
 
-            var request = new XMLHttpRequest();
+        //     var request = new XMLHttpRequest();
 
-            request.onload = function() {
-                window.location.href = redirect;
-            };
+        //     request.onload = function() {
+        //         window.location.href = redirect;
+        //     };
 
-            request.open("POST", "?action=mark-items-as-read", true);
-            request.send(JSON.stringify(listing));
-        }
+        //     request.open("POST", "?action=mark-items-as-read", true);
+        //     request.send(JSON.stringify(listing));
+        // }
     };
 
 })();