bring back mark as unread/mark as read & bookmark links

The links were silently dropped with commit
4c0d975532 "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

@@ -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)

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)

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>

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>

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>