4 files changed, 39 insertions, 5 deletions

diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index d8f5628c..185ac1e0 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -120,4 +120,30 @@ $(document).ready(() => {
       });
     });
   }
+
+  $('.markasread').on('click', () => {
+    const article = document.getElementById('article');
+    const link = document.getElementById('link-archive');
+    const articleId = article.dataset.id;
+    const xhr = new XMLHttpRequest();
+
+    xhr.onload = function toggleArchive() {
+      if (xhr.status === 200) {
+        const previousStatus = document.getElementById('archive-icon').innerHTML;
+        let status = link.dataset.iconUnread;
+        let label = link.dataset.labelUnread;
+        if (previousStatus === 'unarchive') {
+          status = link.dataset.iconRead;
+          label = link.dataset.labelRead;
+        }
+        document.getElementById('archive-icon').innerHTML = status;
+        document.getElementById('archive-label').innerHTML = label;
+        window.Materialize.toast(xhr.responseText, 4000);
+      }
+    };
+
+    const url = `${Routing.generate('archive_entry', { id: articleId })}?some_var_name=true`;
+    xhr.open('GET', url, false);
+    xhr.send(null);
+  });
 });
diff --git a/app/config/config.yml b/app/config/config.yml
index 4eea0531..f87835cf 100644
--- a/app/config/config.yml
+++ b/app/config/config.yml
@@ -373,6 +373,7 @@ fos_js_routing:
         - howto
         - fos_user_security_logout
         - new
+        - archive_entry
 
 jms_serializer:
     handlers:
diff --git a/src/Wallabag/CoreBundle/Controller/EntryController.php b/src/Wallabag/CoreBundle/Controller/EntryController.php
index 9b2954e7..5fc6fc55 100644
--- a/src/Wallabag/CoreBundle/Controller/EntryController.php
+++ b/src/Wallabag/CoreBundle/Controller/EntryController.php
@@ -7,6 +7,7 @@ use Pagerfanta\Adapter\DoctrineORMAdapter;
 use Pagerfanta\Exception\OutOfRangeCurrentPageException;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Cache;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
@@ -371,6 +372,11 @@ class EntryController extends Controller
             $message = 'flashes.entry.notice.entry_archived';
         }
 
+        if ($request->query->get('some_var_name')) {
+
+            return new JsonResponse($this->get('translator')->trans($message));
+        }
+
         $this->get('session')->getFlashBag()->add(
             'notice',
             $message
@@ -381,6 +387,8 @@ class EntryController extends Controller
         return $this->redirect($redirectUrl);
     }
 
+    
+
     /**
      * Changes starred status for an entry.
      *
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
index 527b1afc..899a8a7f 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
@@ -67,9 +67,9 @@
         {% endif %}
 
         <li class="bold hide-on-med-and-down">
-            <a class="waves-effect collapsible-header markasread" title="{{ markAsReadLabel|trans }}" href="{{ path('archive_entry', { 'id': entry.id }) }}" id="markAsRead">
-                <i class="material-icons small">{% if entry.isArchived == 0 %}done{% else %}unarchive{% endif %}</i>
-                <span>{{ markAsReadLabel|trans }}</span>
+            <a class="waves-effect collapsible-header markasread" title="{{ markAsReadLabel|trans }}" href="#" data-icon-read="done" data-icon-unread="unarchive" data-label-read="{{ 'entry.view.left_menu.set_as_read'|trans }}" data-label-unread="{{ 'entry.view.left_menu.set_as_unread'|trans }}" id="link-archive">
+                <i class="material-icons small" id="archive-icon">{% if entry.isArchived == 0 %}done{% else %}unarchive{% endif %}</i>
+                <span id="archive-label">{{ markAsReadLabel|trans }}</span>
             </a>
             <div class="collapsible-body"></div>
         </li>
@@ -221,7 +221,7 @@
 {% endblock %}
 
 {% block content %}
-    <div id="article">
+    <div id="article" data-id="{{ entry.id }}">
         <header class="mbm">
             <h1><span{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %}>{{ entry.title|striptags|default('entry.default_title'|trans)|raw }}</span> <a href="{{ path('edit', { 'id': entry.id }) }}" title="{{ 'entry.view.edit_title'|trans }}"><i class="material-icons grey-text">create</i></a></h1>
         </header>
@@ -291,7 +291,6 @@
             </ul>
         </div>
     </div>
-
 <script id="annotationroutes" type="application/json">
 {
     "prefix": "",