10 files changed, 283 insertions, 40 deletions

diff --git a/themes/baggy/_head.twig b/themes/baggy/_head.twig
index 1ea59abf..144bcaa6 100755
--- a/themes/baggy/_head.twig
+++ b/themes/baggy/_head.twig
@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/messages.css" media="all">
         <link rel="stylesheet" href="{{ poche_url }}/themes/{{theme}}/css/print.css" media="print">
         <script src="{{ poche_url }}/themes/{{theme}}/js/jquery-2.0.3.min.js"></script>
+        <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/autoClose.js"></script>
         <script src="{{ poche_url }}/themes/{{theme}}/js/jquery.cookie.js"></script>
         <script src="{{ poche_url }}/themes/{{theme}}/js/init.js"></script>
         <script src="{{ poche_url }}/themes/{{ constant('DEFAULT_THEME') }}/js/closeMessage.js"></script>
diff --git a/themes/baggy/_menu.twig b/themes/baggy/_menu.twig
index e9cd9d4a..5226728b 100644
--- a/themes/baggy/_menu.twig
+++ b/themes/baggy/_menu.twig
@@ -4,9 +4,10 @@
                 <li><a href="./?view=fav" {% if view == 'fav' %}class="current"{% endif %}>{% trans "favorites" %}</a></li>
                 <li><a href="./?view=archive" {% if view == 'archive' %}class="current"{% endif %}>{% trans "archive" %}</a></li>
                 <li><a href="./?view=tags" {% if view == 'tags' %}class="current"{% endif %}>{% trans "tags" %}</a></li>
-                <li><a href="javascript: void(null);" id="pocheit">{% trans "save a link" %}</a></li>
+                <li style="position: relative;"><a href="javascript: void(null);" id="bagit">{% trans "save a link" %}</a>
+                    {% include '_pocheit-form.twig' %}
+                </li>
                 <li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
                 <li><a class="icon icon-power" href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>
             </ul>
 
-            {% include '_pocheit-form.twig' %}
diff --git a/themes/baggy/_pocheit-form.twig b/themes/baggy/_pocheit-form.twig
new file mode 100755
index 00000000..505ec368
--- /dev/null
+++ b/themes/baggy/_pocheit-form.twig
@@ -0,0 +1,10 @@
+<div id="bagit-form" class="messages info">
+    <form method="get" action="index.php" target="_blank" id="bagit-form-form">
+        <h2><a href="javascript: void(null);" id="bagit-form-close">X</a>
+        {% trans "Save a link" %}</h2>
+        <input type="hidden" name="autoclose" value="1" />
+        <input required placeholder="example.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
+        <input type="submit" value="{% trans "save link!" %}" />
+        <div id="add-link-result"></div>
+    </form>
+</div>
diff --git a/themes/baggy/config.twig b/themes/baggy/config.twig
index b37ac115..a13af0c8 100644
--- a/themes/baggy/config.twig
+++ b/themes/baggy/config.twig
@@ -8,10 +8,11 @@
             <h2>{% trans "Saving articles" %}</h2>
             <p>{% trans "There are several ways to save an article:" %} (<a href="http://doc.wallabag.org/" title="{% trans "read the documentation" %}">?</a>)</p>
             <ul>
-                <li>Firefox: <a href="https://addons.mozilla.org/firefox/addon/poche/" title="download the firefox extension">{% trans "download the extension" %}</a></li>
+                <li>Firefox: <a href="https://addons.mozilla.org/firefox/addon/wallabag/" title="download the firefox extension">{% trans "download the extension" %}</a></li>
                 <li>Chrome: <a href="http://doc.wallabag.org/doku.php?id=users:chrome_extension" title="download the chrome extension">{% trans "download the extension" %}</a></li>
-                <li>Android: <a href="https://f-droid.org/repository/browse/?fdid=fr.gaulupeau.apps.Poche" title="download the application">{% trans "via F-Droid" %}</a> {% trans " or " %} <a href="https://play.google.com/store/apps/details?id=fr.gaulupeau.apps.InThePoche" title="download the application">{% trans "via Google Play" %}</a></li>
-                <li>Windows Phone: <a href="https://www.windowsphone.com/en-us/store/app/poche/334de2f0-51b5-4826-8549-a3d805a37e83" title="download the window phone application">{% trans "download the application" %}</a></li>
+                <li>Android: <a href="https://f-droid.org/app/fr.gaulupeau.apps.InThePoche" title="download the application">{% trans "via F-Droid" %}</a> {% trans " or " %} <a href="https://play.google.com/store/apps/details?id=fr.gaulupeau.apps.InThePoche" title="download the application">{% trans "via Google Play" %}</a></li>
+                <li>iOS: <a href="https://itunes.apple.com/app/wallabag/id828331015?mt=8" title="download the iOS application">{% trans "download the application" %}</a></li>
+                <li>Windows Phone: <a href="http://www.windowsphone.com/en-us/store/app/wallabag/ff890514-348c-4d0b-9b43-153fff3f7450" title="download the window phone application">{% trans "download the application" %}</a></li>
                 <li>
                     <form method="get" action="index.php">
                         <label class="addurl" for="config_plainurl">{% trans "By filling this field" %}:</label>
@@ -25,9 +26,10 @@
             <h2>{% trans "Upgrading wallabag" %}</h2>
             <ul>
                 <li>{% trans "Installed version" %} : <strong>{{ constant('POCHE') }}</strong></li>
-                <li>{% trans "Latest stable version" %} : {{ prod }}. {% if compare_prod == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent stable version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %}</li>
-                {% if constant('DEBUG_POCHE') == 1 %}<li>{% trans "Latest dev version" %} : {{ dev }}. {% if compare_dev == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent development version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %}</li>{% endif %}
+                <li>{% trans "Latest stable version" %} : {{ prod }}. {% if compare_prod == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent stable version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %} ({% trans "Last check:" %} {{ check_time_prod }})</li>
+                {% if constant('DEBUG_POCHE') == 1 %}<li>{% trans "Latest dev version" %} : {{ dev }}. {% if compare_dev == -1 %}<strong><a href="http://wallabag.org/">{% trans "A more recent development version is available." %}</a></strong>{% else %}{% trans "You are up to date." %}{% endif %} ({% trans "Last check:" %} {{ check_time_dev }}){% endif %}</li>
             </ul>
+            <p>{% trans "You can clear cache to check the latest release." %}</p>
 
             <h2>{% trans "Feeds" %}</h2>
             {% if token == '' %}
@@ -42,7 +44,7 @@
             <p>{% trans "Your user id:" %} <strong>{{user_id}}</strong></p>
             <p>{% trans "You can regenerate your token: <a href='?feed&amp;action=generate'>generate!</a>." %}</p>
             {% endif %}
-            
+
             <h2>{% trans "Change your theme" %}</h2>
             <form method="post" action="?updatetheme" name="changethemeform">
                 <fieldset class="w500p inline">
@@ -103,15 +105,37 @@
             {% endif %}
 
             <h2>{% trans "Import" %}</h2>
-            <p>{% trans "Please execute the import script locally as it can take a very long time." %}</p>
-            <p>{% trans "More info in the official documentation:" %} <a href="http://doc.wallabag.org/doku.php?id=users:migrate">wallabag.org</a></p>
+            <p>{% trans "Importing from other services can be quite long, and webservers default configuration often prevents long scripts execution time, so it must be done in multiple parts." %}</p>
+            <p>1. {% trans "First, select the export file on your computer and upload it." %}</p>
+            <form method="post" action="?uploadfile" name="uploadfile" enctype="multipart/form-data">
+                <fieldset class="w500p">
+                    <div class="row">
+                        <label class="col w150p" for="file">{% trans "File:" %}</label>
+                        <input class="col" type="file" id="file" name="file" tabindex="4">
+                    </div>
+                    <div class="row mts txtcenter">
+                        <button class="bouton" type="submit" tabindex="4">{% trans "Upload" %}</button>
+                    </div>
+                </fieldset>
+                <input type="hidden" name="MAX_FILE_SIZE" value="1048576">
+                <input type="hidden" name="returnurl" value="{{ referer }}">
+            </form>
+            <p>2. {% trans "Then, click on the right link below." %}</p>
             <ul>
-                <li><a href="./?import&amp;from=pocket">{% trans "Import from Pocket" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('POCKET_FILE')) }}</li>
-                <li><a href="./?import&amp;from=readability">{% trans "Import from Readability" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('READABILITY_FILE')) }}</li>
-                <li><a href="./?import&amp;from=instapaper">{% trans "Import from Instapaper" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('INSTAPAPER_FILE')) }}</li>
-                <li><a href="./?import&amp;from=poche">{% trans "Import from wallabag" %}</a> {{ '(you must have a %s file on your server)'|trans|format(constant('POCHE_FILE')) }}</li>
+                <li><a href="./?import&amp;from=pocket">{% trans "Import from Pocket" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('POCKET_FILE')) }}</li>
+                <li><a href="./?import&amp;from=readability">{% trans "Import from Readability" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('READABILITY_FILE')) }}</li>
+                <li><a href="./?import&amp;from=instapaper">{% trans "Import from Instapaper" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('INSTAPAPER_FILE')) }}</li>
+                <li><a href="./?import&amp;from=poche">{% trans "Import from wallabag" %}</a> {{ '(after uploaded %s file)'|trans|format(constant('POCHE_FILE')) }}</li>
             </ul>
 
+            {% if token == '' %}
+                <p>{% trans "3. Your feed token is currently empty and must first be generated to fetch content. Click <a href='?feed&amp;action=generate'>here to generate it</a>." %}</p>
+            {% else %}
+            <p>3. {% trans "Finally, you have to fetch content for imported items." %} <a href="cron.php?limit=10&amp;user-id={{ user_id }}&amp;token={{token}}" target="_blank">{% trans "Click here" %}</a> {% trans "to fetch content for 10 articles" %}.</p>
+            <p>{% trans "If you have console access to your server, you can also create a cron task:" %}</p>
+            <pre><code>0 */4 * * *  cd /path/to/wallabag && php cron.php --limit=10 --user-id={{user_id}} --token={{token}} >/dev/null 2>&1</code></pre>
+            {% endif %}
+
             <h2>{% trans "Export your wallabag data" %}</h2>
             {% if constant('STORAGE') == 'sqlite' %}
             <p><a href="?download" target="_blank">{% trans "Click here" %}</a> {% trans "to download your database." %}</p>{% endif %}
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index fe77a967..61e0b47e 100755
--- a/themes/baggy/css/main.css
+++ b/themes/baggy/css/main.css
@@ -173,7 +173,7 @@ h2:after {
 #links {
   position: fixed;
   top: 0;
-  width: 9em;
+  width: 10em;
   left: 0;
   text-align: right;
   background: #333;
@@ -184,7 +184,7 @@ h2:after {
 }
 
 #main {
-  margin-left: 12em;
+  margin-left: 13em;
   position: relative;
   z-index: 10;
   padding-right: 5%;
@@ -228,7 +228,7 @@ h2:after {
   #links li:last-child {
     position: fixed;
     bottom: 1em;
-    width: 9em;
+    width: 10em;
   }
 
   #links li:last-child a:before {
@@ -322,6 +322,15 @@ footer a {
   letter-spacing:-5px;
 }
 
+.listmode .entrie {
+  width: 100%!important;
+  margin-left: 0!important;
+}
+
+.listmode .entrie p {
+  display: none;
+}
+
 .list-entries + .results {
   margin-bottom: 2em;
 }
@@ -343,10 +352,10 @@ footer a {
   letter-spacing:normal;
   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
   display: inline-block;
-  width: 32%;
+  width: 32%!important;
   margin-bottom: 1.5em;
   vertical-align: top;
-  margin-left: 1.5%;
+  margin-left: 1.5%!important;
   position: relative;
   overflow: hidden;
   padding: 1.5em 1.5em 3em 1.5em;
@@ -481,7 +490,7 @@ footer a {
   }
 
 .entrie:nth-child(3n+1) {
-  margin-left: 0;
+  margin-left: 0!important;
 }
 
 .results {
@@ -526,6 +535,84 @@ footer a {
 }
 
 /* ==========================================================================
+  2.1 = "save a link" popup div related styles
+  ========================================================================== */
+
+#bagit-form {
+  background: rgba(0,0,0,0.5);
+  position: absolute;
+  top: 0;
+  left: 10em;
+  z-index: 20;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  margin-top: -30%;
+  padding: 2em;
+  display: none;
+  border-left: 1px #EEE solid;
+}
+
+#bagit-form form {
+  background: #FFF;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  border: 10px solid #000;
+  width: 400px;
+  height: 200px;
+  /* margin: -150px 0 0 -300px; */
+  padding: 2em;
+}
+
+a#bagit-form-close {
+  background: #000;
+  color: #FFF;
+  padding: 0.2em 0.5em;
+  text-decoration: none;
+  display: inline-block;
+  float: right;
+  font-size: 0.6em;
+}
+a#bagit-form-close:hover {
+  background: #999;
+  color: #000;
+}
+
+.active-current {
+  background-color: #999;
+}
+
+.active-current:after {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-style: solid;
+  border-width: 10px;
+  border-color:  transparent #EEE transparent transparent;
+  right: 0;
+  top: 50%;
+  margin-top: -10px;
+}
+
+.opacity03 {
+  opacity: 0.3;
+}
+
+.add-to-wallabag-link-after {
+  background-color: #000;
+  color: #fff;
+  padding: 0 3px 2px 3px;
+}
+
+#add-link-result {
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+/* ==========================================================================
    3 = Pictos
    ========================================================================== */
    
@@ -659,6 +746,7 @@ footer a {
 #article {
   width: 70%;
   margin-bottom: 3em;
+  text-align: justify;
 }
 
 #article .tags {
@@ -884,4 +972,8 @@ blockquote {
   #display-mode {
     display: none;
   }
+
+  #bagit-form {
+    left: 0;
+  }
 }
diff --git a/themes/baggy/edit-tags.twig b/themes/baggy/edit-tags.twig
index 9e9012ee..65ac996a 100644..100755
--- a/themes/baggy/edit-tags.twig
+++ b/themes/baggy/edit-tags.twig
@@ -4,6 +4,11 @@
 {% include '_menu.twig' %}
 {% endblock %}
 {% block content %}
+
+<script src="{{ poche_url }}/themes/default/js/jquery-ui-1.10.4.custom.min.js"></script>
+<script src="{{ poche_url }}/themes/default/js/autoCompleteTags.js"></script>
+<link rel="stylesheet" href="{{ poche_url }}/themes/default/css/jquery-ui-1.10.4.custom.min.css" media="all">
+
 <div id="article">
   <h2>{{ entry.title|raw }}</21>
 </div>
@@ -17,7 +22,8 @@
     <input type="hidden" name="entry_id" value="{{ entry_id }}" />
     <label for="value">Add tags: </label><input type="text" placeholder="interview, editorial, video" id="value" name="value" required="required" />
     <input type="submit" value="Tag" />
-    <p>{% trans "You can enter multiple tags, separated by commas." %}</p>
+    <p>{% trans "Start typing for auto complete." %}<br>
+    {% trans "You can enter multiple tags, separated by commas." %}</p>
 </form>
 <a class="icon icon-reply return" href="./?view=view&id={{ entry_id }}">{% trans "return to article" %}</a>
 {% endblock %}
diff --git a/themes/baggy/home.twig b/themes/baggy/home.twig
index 5262c05b..e34897fa 100755
--- a/themes/baggy/home.twig
+++ b/themes/baggy/home.twig
@@ -30,9 +30,9 @@
                 </div>
                     {% endif %}
                 {% endblock %}
-            <div class="list-entries">
+            <div id="list-entries" class="list-entries">
                     {% for entry in entries %}
-                <div id="entry-{{ entry.id|e }}" class="entrie">
+                <div id="entry-{{ entry.id|e }}" class="entrie"{% if listmode %} style="width:100%; margin-left:0;"{% endif %}>
                     <h2><a href="index.php?view=view&amp;id={{ entry.id|e }}">{{ entry.title|raw }}</a></h2>
                     {% if entry.content| getReadingTime > 0 %}
                         <div class="estimatedTime"><a target="_blank" title="{% trans "estimated reading time:" %} {{ entry.content| getReadingTime }} min" class="tool reading-time"><span>{% trans "estimated reading time :" %} {{ entry.content| getReadingTime }} min</span></div>
diff --git a/themes/baggy/js/init.js b/themes/baggy/js/init.js
index 4a843548..da644fbe 100755
--- a/themes/baggy/js/init.js
+++ b/themes/baggy/js/init.js
@@ -1,36 +1,126 @@
-$(document).ready(function() {
+$.fn.ready(function() {
+
+  var $listmode = $('#listmode'),
+      $listentries = $("#list-entries"),
+      $bagit = $('#bagit'),
+      $bagitForm = $('#bagit-form');
+      $bagitFormForm = $('#bagit-form-form');
+
+  /* ==========================================================================
+     Menu
+     ========================================================================== */
 
   $("#menu").click(function(){
     $("#links").toggle();
   });
 
+  /* ==========================================================================
+     List mode or Table Mode
+     ========================================================================== */
 
-  $("#listmode").click(function(){
+  $listmode.click(function(){
     if ( $.cookie("listmode") == 1 ) {
-      $(".entrie").css("width", "");
-      $(".entrie").css("margin-left", "");
-
+      // Cookie
       $.removeCookie("listmode");
-      $("#listmode").removeClass("tablemode");
-      $("#listmode").addClass("listmode");
+
+      $listentries.removeClass("listmode");
+      $listmode.removeClass("tablemode");
+      $listmode.addClass("listmode");
     }
     else {
+      // Cookie
       $.cookie("listmode", 1, {expires: 365});
 
-      $(".entrie").css("width", "100%");
-      $(".entrie").css("margin-left", "0");
-      $("#listmode").removeClass("listmode");
-      $("#listmode").addClass("tablemode");
+      $listentries.addClass("listmode");
+      $listmode.removeClass("listmode");
+      $listmode.addClass("tablemode");
     }
 
   });
 
+  /* ==========================================================================
+     Cookie listmode
+     ========================================================================== */
+
   if ( $.cookie("listmode") == 1 ) {
-    $(".entrie").css("width", "100%");
-    $(".entrie").css("margin-left", "0");
-    $("#listmode").removeClass("listmode");
-    $("#listmode").addClass("tablemode");
+    $listentries.addClass("listmode");
+    $listmode.removeClass("listmode");
+    $listmode.addClass("tablemode");
   }
 
+  /* ==========================================================================
+    bag it link and close button
+    ========================================================================== */
+
+  function toggleSaveLinkForm(url) {
+    $bagit.toggleClass("active-current");
+    $bagitForm.toggle();
+    $('#content').toggleClass("opacity03");
+    if (url !== 'undefined' && url) {
+      $('#plainurl').val(url);
+    }
+    $('#plainurl').focus();
+  }
+
+  $bagit.click(function(){
+    toggleSaveLinkForm();
+  });
+
+  $("#bagit-form-close").click(function(){
+    toggleSaveLinkForm();
+  });
+
+
+  //send "bag it link" form request via ajax
+  $bagitFormForm.submit( function(event) {
+    $bagitFormForm.css("cursor", "wait");
+    $("#add-link-result").empty();
+
+    $.ajax({
+        type: $bagitFormForm.attr('method'),
+        url: $bagitFormForm.attr('action'),
+        data: $bagitFormForm.serialize(),
+        success: function(data) {
+          $('#add-link-result').html("Done!");
+          $('#plainurl').val('');
+          $('#plainurl').blur('');
+          $bagitFormForm.css("cursor", "auto");
+          //setTimeout( function() { toggleSaveLinkForm(); }, 1000); //close form after 1000 delay
+        },
+        error: function(data) {
+          $('#add-link-result').html("Failed!");
+          $bagitFormForm.css("cursor", "auto");
+        }
+    });
+
+    event.preventDefault();
+  });
+
+  /* ==========================================================================
+    Keyboard gestion
+    ========================================================================== */
+
+  $(window).keydown(function(e){
+    if ( ( e.target.tagName.toLowerCase() !== 'input' && e.keyCode == 83 ) || e.keyCode == 27 ) {
+      toggleSaveLinkForm();
+      return false;
+    }
+  });
+
+  /* ==========================================================================
+  Process all links inside an article
+  ========================================================================== */
+
+  $("article a[href^='http']").after(function() {
+        return " <a href=\"" + $(this).attr('href') + "\" class=\"add-to-wallabag-link-after\" alt=\"add to wallabag\" title=\"add to wallabag\">w</a> ";
+  });
+
+  $(".add-to-wallabag-link-after").click(function(event){
+    toggleSaveLinkForm($(this).attr('href'));
+    event.preventDefault();
+  });
+
+
+
 
 });
diff --git a/themes/baggy/tags.twig b/themes/baggy/tags.twig
index 9df44bb7..9bb93a45 100644..100755
--- a/themes/baggy/tags.twig
+++ b/themes/baggy/tags.twig
@@ -6,7 +6,7 @@
 {% block content %}
 <h2>{% trans "Tags" %}</h2>
 <ul class="list-tags">
-{% for tag in tags %}<li>{% if token != '' %}<a class="icon icon-rss" href="?feed&amp;type=tag&amp;user_id={{ user_id }}&amp;tag_id={{ tag.id }}&amp;token={{ token }}" target="_blank"><span>rss</span></a>{% endif %} <a href="./?view=tag&amp;id={{ tag.id }}">{{ tag.value }}</a> 
+{% for tag in tags %}<li>{% if token != '' %}<a class="icon icon-rss" href="?feed&amp;type=tag&amp;user_id={{ user_id }}&amp;tag_id={{ tag.id }}&amp;token={{ token }}" target="_blank"><span>rss</span></a>{% endif %} <a href="./?view=tag&amp;id={{ tag.id }}">{{ tag.value }}</a> ({{ tag.entriescount }})
 </li>
 {% endfor %}
 </ul>
diff --git a/themes/baggy/view.twig b/themes/baggy/view.twig
index 4751c4cb..092be04e 100644
--- a/themes/baggy/view.twig
+++ b/themes/baggy/view.twig
@@ -14,7 +14,7 @@
                 {% if constant('SHARE_TWITTER') == 1 %}<li><a href="https://twitter.com/home?status={{entry.title|url_encode}}%20{{ entry.url|url_encode }}%20via%20@wallabagapp" target="_blank" class="tool twitter icon icon-twitter" title="{% trans "Tweet" %}"><span>{% trans "Tweet" %}</span></a></li>{% endif %}
                 {% if constant('SHARE_MAIL') == 1 %}<li><a href="mailto:?subject={{ entry.title|url_encode }}&amp;body={{ entry.url|url_encode }}%20via%20@wallabagapp" class="tool email icon icon-mail" title="{% trans "Email" %}"><span>{% trans "Email" %}</span></a></li>{% endif %}
                 {% if constant('SHARE_SHAARLI') == 1 %}<li><a href="{{ constant('SHAARLI_URL') }}/index.php?post={{ entry.url|url_encode }}&amp;title={{ entry.title|url_encode }}" target="_blank" class="tool shaarli" title="{% trans "shaarli" %}"><span>{% trans "shaarli" %}</span></a></li>{% endif %}
-                {% if constant('FLATTR') == 1 %}{% if flattr.status == constant('FLATTRABLE') %}<li><a href="http://flattr.com/submit/auto?url={{ entry.url }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span></a></li>{% elseif flattr.status == constant('FLATTRED') %}<li><a href="{{ flattr.flattrItemURL }}" class="tool flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span> ({{ flattr.numflattrs }})</a></li>{% endif %}{% endif %}
+                {% if constant('FLATTR') == 1 %}{% if flattr.status == constant('FLATTRABLE') %}<li><a href="http://flattr.com/submit/auto?url={{ entry.url }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span></a></li>{% elseif flattr.status == constant('FLATTRED') %}<li><a href="{{ flattr.flattrItemURL }}" class="tool flattr icon icon-flattr" target="_blank" title="{% trans "flattr" %}"><span>{% trans "flattr" %}</span> ({{ flattr.numflattrs }})</a></li>{% endif %}{% endif %}
                 <li><a href="mailto:hello@wallabag.org?subject=Wrong%20display%20in%20wallabag&amp;body={{ entry.url|url_encode }}" title="{% trans "Does this article appear wrong?" %}" class="tool bad-display icon icon-delete"><span>{% trans "Does this article appear wrong?" %}</span></a></li>
             </ul>
         </div>
@@ -29,4 +29,23 @@
                 {{ content | raw }}
             </article>
         </div>
+        <script src="{{ poche_url }}/themes/{{theme}}/js/restoreScroll.js"></script>
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+            $(window).scroll(function(e){
+                var scrollTop = $(window).scrollTop();
+                var docHeight = $(document).height();
+                var scrollPercent = (scrollTop) / (docHeight);
+                var scrollPercentRounded = Math.round(scrollPercent*100)/100;
+                savePercent({{ entry.id|e }}, scrollPercentRounded);
+            });
+
+            retrievePercent({{ entry.id|e }});
+
+            $(window).resize(function(){
+                retrievePercent({{ entry.id|e }});
+            });
+        });
+        </script>
 {% endblock %}