From 48be7a1fff09da598294bde1894dbf73ed72b403 Mon Sep 17 00:00:00 2001
From: Mathias Kresin <dev@kresin.me>
Date: Thu, 4 Aug 2016 22:06:02 +0200
Subject: [PATCH] bring back mark as unread/mark as read & bookmark links

The links were silently dropped with commit
4c0d975532ff3096a1f30d708d37b9651c132925 "Make clickable icons"
without any mention in the commit message.

Based on the commit title, I would assume this is an additional
functionality and not something that replaces existing stuff.

It's annoying to move the mouse across the screen (reading text from
the left to right) to get to the mark read icon for marking an article
as read.

All changes related to the removal of the links are reverted by keeping
the clickable icons.
---
 assets/js/all.js             | 77 +++++++++++++++++++++++-------------
 assets/js/item.js            | 77 +++++++++++++++++++++++-------------
 templates/bookmark_links.php | 22 ++++++-----
 templates/item.php           | 23 ++++++-----
 templates/status_links.php   | 39 +++++++++++-------
 5 files changed, 150 insertions(+), 88 deletions(-)

diff --git a/assets/js/all.js b/assets/js/all.js
index 7b87187..8f0ae40 100644
--- a/assets/js/all.js
+++ b/assets/js/all.js
@@ -152,25 +152,50 @@ Miniflux.Item = (function() {
         return item.getAttribute("data-item-id");
     }
 
-    function changeLabel(link)
+    function changeLabel(links)
     {
-        if (link && link.hasAttribute("data-reverse-title") && link.hasAttribute("title")) {
-            var title = link.getAttribute("title");
-            link.setAttribute("title", link.getAttribute("data-reverse-title"));
-            link.setAttribute("data-reverse-title", title);
+        if (links.length === 0) {
+            return;
+        }
+
+        for (var i = 0; i < links.length; i++) {
+            var link = links[i];
+
+            if (link.hasAttribute("data-reverse-label")) {
+                var content = link.innerHTML;
+                link.innerHTML = link.getAttribute("data-reverse-label");
+                link.setAttribute("data-reverse-label", content);
+            }
+
+            if (link.hasAttribute("data-reverse-title")) {
+                var title = link.getAttribute("title");
+                link.setAttribute("title", link.getAttribute("data-reverse-title"));
+                link.setAttribute("data-reverse-title", title);
+            }
+        }
+    }
+
+    function changeAction(links, action)
+    {
+        if (links.length === 0) {
+            return;
+        }
+
+        for (var i = 0; i < links.length; i++) {
+            links[i].setAttribute("data-action", action);
         }
     }
 
     function changeBookmarkLabel(item)
     {
-        var link = item.querySelector(".bookmark-icon");
-        changeLabel(link);
+        var links = item.querySelectorAll(".bookmark-icon, a.bookmark");
+        changeLabel(links);
     }
 
     function changeStatusLabel(item)
     {
-        var link = item.querySelector(".read-icon");
-        changeLabel(link);
+        var links = item.querySelectorAll(".read-icon, a.mark");
+        changeLabel(links);
     }
 
     function showItemAsRead(item)
@@ -179,19 +204,18 @@ Miniflux.Item = (function() {
             return;
         }
 
+        nbUnreadItems--;
+
         if (item.getAttribute("data-hide")) {
             hideItem(item);
-        }
-        else {
-            item.setAttribute("data-item-status", "read");
-            changeStatusLabel(item);
-
-            // Change action
-            var link = item.querySelector(".read-icon");
-            if (link) link.setAttribute("data-action", "mark-unread");
+            return;
         }
 
-        nbUnreadItems--;
+        item.setAttribute("data-item-status", "read");
+        changeStatusLabel(item);
+
+        var links = item.querySelectorAll(".read-icon, a.mark");
+        changeAction(links, "mark-unread");
     }
 
     function showItemAsUnread(item)
@@ -200,19 +224,18 @@ Miniflux.Item = (function() {
             return;
         }
 
+        nbUnreadItems++;
+
         if (item.getAttribute("data-hide")) {
             hideItem(item);
-        }
-        else {
-            item.setAttribute("data-item-status", "unread");
-            changeStatusLabel(item);
-
-            // Change action
-            var link = item.querySelector(".read-icon");
-            if (link) link.setAttribute("data-action", "mark-read");
+            return;
         }
 
-        nbUnreadItems++;
+        item.setAttribute("data-item-status", "unread");
+        changeStatusLabel(item);
+
+        var links = item.querySelectorAll(".read-icon, a.mark");
+        changeAction(links, "mark-read");
     }
 
     function hideItem(item)
diff --git a/assets/js/item.js b/assets/js/item.js
index 35f64c5..d21b612 100644
--- a/assets/js/item.js
+++ b/assets/js/item.js
@@ -40,25 +40,50 @@ Miniflux.Item = (function() {
         return item.getAttribute("data-item-id");
     }
 
-    function changeLabel(link)
+    function changeLabel(links)
     {
-        if (link && link.hasAttribute("data-reverse-title") && link.hasAttribute("title")) {
-            var title = link.getAttribute("title");
-            link.setAttribute("title", link.getAttribute("data-reverse-title"));
-            link.setAttribute("data-reverse-title", title);
+        if (links.length === 0) {
+            return;
+        }
+
+        for (var i = 0; i < links.length; i++) {
+            var link = links[i];
+
+            if (link.hasAttribute("data-reverse-label")) {
+                var content = link.innerHTML;
+                link.innerHTML = link.getAttribute("data-reverse-label");
+                link.setAttribute("data-reverse-label", content);
+            }
+
+            if (link.hasAttribute("data-reverse-title")) {
+                var title = link.getAttribute("title");
+                link.setAttribute("title", link.getAttribute("data-reverse-title"));
+                link.setAttribute("data-reverse-title", title);
+            }
+        }
+    }
+
+    function changeAction(links, action)
+    {
+        if (links.length === 0) {
+            return;
+        }
+
+        for (var i = 0; i < links.length; i++) {
+            links[i].setAttribute("data-action", action);
         }
     }
 
     function changeBookmarkLabel(item)
     {
-        var link = item.querySelector(".bookmark-icon");
-        changeLabel(link);
+        var links = item.querySelectorAll(".bookmark-icon, a.bookmark");
+        changeLabel(links);
     }
 
     function changeStatusLabel(item)
     {
-        var link = item.querySelector(".read-icon");
-        changeLabel(link);
+        var links = item.querySelectorAll(".read-icon, a.mark");
+        changeLabel(links);
     }
 
     function showItemAsRead(item)
@@ -67,19 +92,18 @@ Miniflux.Item = (function() {
             return;
         }
 
+        nbUnreadItems--;
+
         if (item.getAttribute("data-hide")) {
             hideItem(item);
-        }
-        else {
-            item.setAttribute("data-item-status", "read");
-            changeStatusLabel(item);
-
-            // Change action
-            var link = item.querySelector(".read-icon");
-            if (link) link.setAttribute("data-action", "mark-unread");
+            return;
         }
 
-        nbUnreadItems--;
+        item.setAttribute("data-item-status", "read");
+        changeStatusLabel(item);
+
+        var links = item.querySelectorAll(".read-icon, a.mark");
+        changeAction(links, "mark-unread");
     }
 
     function showItemAsUnread(item)
@@ -88,19 +112,18 @@ Miniflux.Item = (function() {
             return;
         }
 
+        nbUnreadItems++;
+
         if (item.getAttribute("data-hide")) {
             hideItem(item);
-        }
-        else {
-            item.setAttribute("data-item-status", "unread");
-            changeStatusLabel(item);
-
-            // Change action
-            var link = item.querySelector(".read-icon");
-            if (link) link.setAttribute("data-action", "mark-read");
+            return;
         }
 
-        nbUnreadItems++;
+        item.setAttribute("data-item-status", "unread");
+        changeStatusLabel(item);
+
+        var links = item.querySelectorAll(".read-icon, a.mark");
+        changeAction(links, "mark-read");
     }
 
     function hideItem(item)
diff --git a/templates/bookmark_links.php b/templates/bookmark_links.php
index 2084afa..333e206 100644
--- a/templates/bookmark_links.php
+++ b/templates/bookmark_links.php
@@ -1,15 +1,17 @@
+<li class="hide-mobile">
 <?php if ($item['bookmark']): ?>
-    <span
-        class="bookmark-icon"
+    <a
+        class="bookmark"
+        href="?action=bookmark&amp;value=0&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;menu=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
         data-action="bookmark"
-        data-reverse-title="<?= t('bookmark') ?>"
-        title="<?= t('remove bookmark') ?>"
-    ></span>
+        data-reverse-label="<?= t('bookmark') ?>"
+    ><?= t('remove bookmark') ?></a>
 <?php else: ?>
-    <span
-        class="bookmark-icon"
+    <a
+        class="bookmark"
+        href="?action=bookmark&amp;value=1&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;menu=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
         data-action="bookmark"
-        data-reverse-title="<?= t('remove bookmark') ?>"
-        title="<?= t('bookmark') ?>"
-    ></span>
+        data-reverse-label="<?= t('remove bookmark') ?>"
+    ><?= t('bookmark') ?></a>
 <?php endif ?>
+</li>
\ No newline at end of file
diff --git a/templates/item.php b/templates/item.php
index 62f7555..6c06640 100644
--- a/templates/item.php
+++ b/templates/item.php
@@ -8,8 +8,18 @@
     >
     <h2 <?= Helper\is_rtl($item) ? 'dir="rtl"' : 'dir="ltr"' ?>>
         <span class="item-icons">
-            <?= \Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset, 'source' => '')) ?>
-            <?= \Template\load('status_links', array('item' => $item, 'redirect' => $menu, 'offset' => $offset)) ?>
+            <span
+                class="bookmark-icon"
+                title="<?= ($item['bookmark']) ? t('remove bookmark') : t('bookmark') ?>"
+                data-action="bookmark"
+                data-reverse-title="<?= ($item['bookmark']) ? t('bookmark') : t('remove bookmark') ?>"
+            ></span>
+            <span
+                class="read-icon"
+                title="<?= ($item['status'] === 'unread') ? t('mark as read') : t('mark as unread') ?>"
+                data-action="<?= ($item['status'] === 'unread') ? 'mark-read' : 'mark-unread' ?>"
+                data-reverse-title="<?= ($item['status'] === 'unread') ? t('mark as unread') : t('mark as read') ?>"
+            ></span>
         </span>
         <span class="item-title">
         <?= Helper\favicon($favicons, $item['feed_id']) ?>
@@ -71,13 +81,8 @@
             <?php endif ?>
             </li>
         <?php endif ?>
-        <li class="hide-mobile">
-            <a
-                href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
-                data-action="mark-removed"
-                class="delete"
-            ><?= t('remove') ?></a>
-        </li>
+        <?= \Template\load('bookmark_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset)) ?>
+        <?= \Template\load('status_links', array('item' => $item, 'menu' => $menu, 'offset' => $offset)) ?>
     </ul>
     <?php if ($display_mode === 'full'): ?>
         <div class="preview-full-content" <?= Helper\is_rtl($item) ? 'dir="rtl"' : 'dir="ltr"' ?>><?= $item['content'] ?></div>
diff --git a/templates/status_links.php b/templates/status_links.php
index aea382a..6dc4f60 100644
--- a/templates/status_links.php
+++ b/templates/status_links.php
@@ -1,15 +1,24 @@
-<?php if ($item['status'] == 'unread'): ?>
-    <span
-        class="read-icon"
-        data-action="mark-read"
-        data-reverse-title="<?= t('mark as unread') ?>"
-        title="<?= t('mark as read') ?>"
-    ></span>
-<?php else: ?>
-    <span
-        class="read-icon"
-        data-action="mark-unread"
-        data-reverse-title="<?= t('mark as read') ?>"
-        title="<?= t('mark as unread') ?>"
-    ></span>
-<?php endif ?>
+<li class="hide-mobile">
+    <a
+        href="?action=mark-item-removed&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
+        data-action="mark-removed"
+        class="delete"
+    ><?= t('remove') ?></a>
+</li>
+<li class="hide-mobile">
+    <?php if ($item['status'] == 'unread'): ?>
+        <a
+            class="mark"
+            href="?action=mark-item-read&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
+            data-action="mark-read"
+            data-reverse-label="<?= t('mark as unread') ?>"
+        ><?= t('mark as read') ?></a>
+    <?php else: ?>
+        <a
+            class="mark"
+            href="?action=mark-item-unread&amp;id=<?= $item['id'] ?>&amp;offset=<?= $offset ?>&amp;redirect=<?= $menu ?>&amp;feed_id=<?= $item['feed_id'] ?>"
+            data-action="mark-unread"
+            data-reverse-label="<?= t('mark as read') ?>"
+        ><?= t('mark as unread') ?></a>
+    <?php endif ?>
+</li>
\ No newline at end of file