12 files changed, 112 insertions, 37 deletions

diff --git a/tpl/default/changetag.html b/tpl/default/changetag.html
index 49dd20d9..6606c4fa 100644
--- a/tpl/default/changetag.html
+++ b/tpl/default/changetag.html
@@ -32,7 +32,7 @@
       </div>
     </form>
 
-    <p>You can also edit tags in the <a href="?do=taglist&sort=usage">tag list</a>.</p>
+    <p>{'You can also edit tags in the'|t} <a href="?do=taglist&sort=usage">{'tag list'|t}</a>.</p>
   </div>
 </div>
 {include="page.footer"}
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index 76a1b9fd..cc3b299b 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -70,6 +70,30 @@
         </div>
       </div>
       <div class="pure-g">
+        <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+          <div class="form-label">
+            <label for="language">
+              <span class="label-name">{'Language'|t}</span>
+            </label>
+          </div>
+        </div>
+        <div class="pure-u-lg-{$ratioInput} pure-u-1">
+          <div class="form-input">
+            <select name="language" id="language" class="align">
+              {loop="$languages"}
+                <option value="{$key}"
+                      {if="$key===$language"}
+                      selected="selected"
+                      {/if}
+                >
+                  {$value}
+                </option>
+              {/loop}
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="pure-g">
         <div class="pure-u-lg-{$ratioLabel} pure-u-1 ">
           <div class="form-label">
             <label>
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index e1868c59..ba589723 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -539,7 +539,7 @@ body, .pure-g [class*="pure-u"] {
 }
 
 .linklist-item-title a:visited .linklist-link {
-    color: #555555;
+    color: #2a4c41;
 }
 
 .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
diff --git a/tpl/default/import.html b/tpl/default/import.html
index 1f040685..000a50ac 100644
--- a/tpl/default/import.html
+++ b/tpl/default/import.html
@@ -18,7 +18,7 @@
       <div class="center" id="import-field">
         <input type="hidden" name="MAX_FILE_SIZE" value="{$maxfilesize}">
         <input type="file" name="filetoupload">
-        <p><br>Maximum size allowed: <strong>{$maxfilesizeHuman}</strong></p>
+        <p><br>{'Maximum size allowed:'|t} <strong>{$maxfilesizeHuman}</strong></p>
       </div>
 
       <div class="pure-g">
@@ -31,15 +31,15 @@
           <div class="radio-buttons">
             <div>
               <input type="radio" name="privacy" value="default" checked="checked">
-              Use values from the imported file, default to public
+              {'Use values from the imported file, default to public'|t}
             </div>
             <div>
               <input type="radio" name="privacy" value="private">
-              Import all bookmarks as private
+              {'Import all bookmarks as private'|t}
             </div>
             <div>
               <input type="radio" name="privacy" value="public">
-              Import all bookmarks as public
+              {'Import all bookmarks as public'|t}
             </div>
           </div>
         </div>
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index 0350ef66..80c08333 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -5,16 +5,16 @@
 <link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
 <link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
 <link href="img/favicon.png" rel="shortcut icon" type="image/png" />
-<link type="text/css" rel="stylesheet" href="css/pure.min.css" />
-<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
-<link type="text/css" rel="stylesheet" href="css/pure-extras.css">
-<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
-<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
-<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
+<link type="text/css" rel="stylesheet" href="css/pure.min.css?v={$version_hash}" />
+<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css?v={$version_hash}">
+<link type="text/css" rel="stylesheet" href="css/pure-extras.css?v={$version_hash}">
+<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?v={$version_hash}" />
+<link type="text/css" rel="stylesheet" href="inc/awesomplete.css?v={$version_hash}#" />
+<link type="text/css" rel="stylesheet" href="css/shaarli.css?v={$version_hash}" />
 {if="is_file('data/user.css')"}
   <link type="text/css" rel="stylesheet" href="data/user.css#" />
 {/if}
 {loop="$plugins_includes.css_files"}
-  <link type="text/css" rel="stylesheet" href="{$value}#"/>
+  <link type="text/css" rel="stylesheet" href="{$value}?v={$version_hash}#"/>
 {/loop}
 <link rel="search" type="application/opensearchdescription+xml" href="?do=opensearch#" title="Shaarli search - {$shaarlititle}"/>
\ No newline at end of file
diff --git a/tpl/default/install.html b/tpl/default/install.html
index 164d453b..6199b33d 100644
--- a/tpl/default/install.html
+++ b/tpl/default/install.html
@@ -68,6 +68,27 @@
     <div class="pure-g">
       <div class="pure-u-lg-{$ratioLabel} pure-u-1">
         <div class="form-label">
+          <label for="language">
+            <span class="label-name">{'Language'|t}</span>
+          </label>
+        </div>
+      </div>
+      <div class="pure-u-lg-{$ratioInput} pure-u-1">
+        <div class="form-input">
+          <select name="language" id="language" class="align">
+            {loop="$languages"}
+              <option value="{$key}">
+                {$value}
+              </option>
+            {/loop}
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="pure-g">
+      <div class="pure-u-lg-{$ratioLabel} pure-u-1">
+        <div class="form-label">
           <label>
             <span class="label-name">{'Timezone'|t}</span><br>
             <span class="label-desc">{'Continent'|t} &middot; {'City'|t}</span>
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 1c66ebbd..09b07eed 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -138,6 +138,9 @@ window.onload = function () {
                 });
                 foldAllButton.firstElementChild.classList.toggle('fa-chevron-down');
                 foldAllButton.firstElementChild.classList.toggle('fa-chevron-up');
+                foldAllButton.title = state === 'down'
+                    ? document.getElementById('translation-fold-all').innerHTML
+                    : document.getElementById('translation-expand-all').innerHTML
             });
         });
     }
@@ -146,7 +149,7 @@ window.onload = function () {
     {
         // Switch fold/expand - up = fold
         if (button.classList.contains('fa-chevron-up')) {
-            button.title = 'Expand';
+            button.title = document.getElementById('translation-expand').innerHTML;
             if (description != null) {
                 description.style.display = 'none';
             }
@@ -155,7 +158,7 @@ window.onload = function () {
             }
         }
         else {
-            button.title = 'Fold';
+            button.title = document.getElementById('translation-fold').innerHTML;
             if (description != null) {
                 description.style.display = 'block';
             }
@@ -173,7 +176,7 @@ window.onload = function () {
     var deleteLinks = document.querySelectorAll('.confirm-delete');
     [].forEach.call(deleteLinks, function(deleteLink) {
         deleteLink.addEventListener('click', function(event) {
-            if(! confirm('Are you sure you want to delete this link ?')) {
+            if(! confirm(document.getElementById('translation-delete-link').innerHTML)) {
                 event.preventDefault();
             }
         });
@@ -275,8 +278,14 @@ window.onload = function () {
     };
     function init () {
         function resize () {
+            /* Fix jumpy resizing: https://stackoverflow.com/a/18262927/1484919 */
+            var scrollTop  = window.pageYOffset ||
+                (document.documentElement || document.body.parentNode || document.body).scrollTop;
+
             description.style.height = 'auto';
             description.style.height = description.scrollHeight+10+'px';
+
+            window.scrollTo(0, scrollTop);
         }
         /* 0-timeout to get the already changed text */
         function delayedResize () {
@@ -612,7 +621,7 @@ function activateFirefoxSocial(node) {
     // Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
     var data = {
         name: title,
-        description: "The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community.",
+        description: document.getElementById('translation-delete-link').innerHTML,
         author: "Shaarli",
         version: "1.0.0",
 
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 685821e3..5dab8e9a 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -86,7 +86,7 @@
     <div class="pure-g pure-alert pure-alert-success search-result">
       <div class="pure-u-2-24"></div>
       <div class="pure-u-20-24">
-        {function="t('%s result', '%s results', $result_count)"}
+        {function="sprintf(t('%s result', '%s results', $result_count), $result_count)"}
         {if="!empty($search_term)"}
           {'for'|t} <em><strong>{$search_term}</strong></em>
         {/if}
@@ -117,6 +117,16 @@
   <div class="pure-g">
     <div class="pure-u-lg-2-24 pure-u-1-24"></div>
     <div class="pure-u-lg-20-24 pure-u-22-24">
+      {ignore}Set translation here, for performances{/ignore}
+      {$strPrivate=t('Private')}
+      {$strEdit=t('Edit')}
+      {$strDelete=t('Delete')}
+      {$strFold=t('Fold')}
+      {$strEdited=t('Edited: ')}
+      {$strPermalink=t('Permalink')}
+      {$strPermalinkLc=t('permalink')}
+      {$strAddTag=t('Add tag')}
+      {ignore}End of translations{/ignore}
       {loop="links"}
         <div class="anchor" id="{$value.shorturl}"></div>
         <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
@@ -125,12 +135,12 @@
             {if="isLoggedIn()"}
               <div class="linklist-item-editbuttons">
                 {if="$value.private"}
-                  <span class="label label-private">{'Private'|t}</span>
+                  <span class="label label-private">{$strPrivate}</span>
                 {/if}
                 <input type="checkbox" class="delete-checkbox" value="{$value.id}">
                 <!-- FIXME! JS translation -->
-                <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a>
-                <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
+                <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
+                <a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
               </div>
             {/if}
 
@@ -164,7 +174,7 @@
                 <i class="fa fa-tags"></i>
                 {$tag_counter=count($value.taglist)}
                 {loop="value.taglist"}
-                  <span class="label label-tag" title="Add tag">
+                  <span class="label label-tag" title="{$strAddTag}">
                     <a href="?addtag={$value|urlencode}">{$value}</a>
                   </span>
                   {if="$tag_counter - 1 != $counter"}&middot;{/if}
@@ -174,9 +184,9 @@
 
             <div class="pure-g">
               <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1">
-                <a href="?{$value.shorturl}" title="{'Permalink'|t}">
+                <a href="?{$value.shorturl}" title="{$strPermalink}">
                   {if="!$hide_timestamps || isLoggedIn()"}
-                    {$updated=$value.updated_timestamp ? 'Edited: '. format_date($value.updated) : 'Permalink'}
+                    {$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
                     <span class="linkdate" title="{$updated}">
                       <i class="fa fa-clock-o"></i>
                       {$value.created|format_date}
@@ -184,7 +194,7 @@
                       &middot;
                     </span>
                   {/if}
-                  {'permalink'|t}
+                  {$strPermalinkLc}
                 </a>
 
                 <div class="pure-u-0 pure-u-lg-visible">
@@ -205,7 +215,7 @@
                 </a>
                 {if="isLoggedIn()"}
                   <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
-                     title="{'Delete'|t}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
+                     title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
                     <i class="fa fa-trash"></i>
                   </a>
                 {/if}
@@ -221,7 +231,7 @@
                 {if="isLoggedIn()"}
                   &middot;
                   <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
-                     title="{'Delete'|t}" class="delete-link confirm-delete">
+                     title="{$strDelete}" class="delete-link confirm-delete">
                     <i class="fa fa-trash"></i>
                   </a>
                 {/if}
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 41e9fa34..347b3d13 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -13,7 +13,7 @@
         <a href="?untaggedonly" title="{'Filter untagged links'|t}"
            class={if="$untaggedonly"}"filter-on"{else}"filter-off"{/if}
         ><i class="fa fa-tag"></i></a>
-        <a href="#" class="filter-off fold-all pure-u-lg-0" title="Fold all">
+        <a href="#" class="filter-off fold-all pure-u-lg-0" title="{'Fold all'|t}">
           <i class="fa fa-chevron-up"></i>
         </a>
         {loop="$action_plugin"}
@@ -53,7 +53,7 @@
       <form method="GET" class="pure-u-0 pure-u-lg-visible">
         <input type="text" name="linksperpage" placeholder="133">
       </form>
-      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="Fold all">
+      <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="{'Fold all'|t}">
         <i class="fa fa-chevron-up"></i>
       </a>
     </div>
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index 94f771a2..659e8c7f 100644
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -8,8 +8,8 @@
       {$version}
     {/if}
     &middot;
-    The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community &middot;
-    <a href="doc/html/index.html" rel="nofollow">Documentation</a>
+    {'The personal, minimalist, super-fast, database free, bookmarking service'|t} {'by the Shaarli community'|t} &middot;
+    <a href="doc/html/index.html" rel="nofollow">{'Documentation'|t}</a>
       {loop="$plugins_footer.text"}
           {$value}
       {/loop}
@@ -27,6 +27,17 @@
         <script src="{$value}#"></script>
 {/loop}
 
-<script src="js/shaarli.js"></script>
-<script src="inc/awesomplete.js#"></script>
-<script src="inc/awesomplete-multiple-tags.js#"></script>
+<div id="js-translations" class="hidden">
+  <span id="translation-fold">{'Fold'|t}</span>
+  <span id="translation-fold-all">{'Fold all'|t}</span>
+  <span id="translation-expand">{'Expand'|t}</span>
+  <span id="translation-expand-all">{'Expand all'|t}</span>
+  <span id="translation-delete-link">{'Are you sure you want to delete this link?'|t}</span>
+  <span id="translation-shaarli-desc">
+    {'The personal, minimalist, super-fast, database free, bookmarking service'|t} {'by the Shaarli community'|t}
+  </span>
+</div>
+
+<script src="js/shaarli.js?v={$version_hash}"></script>
+<script src="inc/awesomplete.js?v={$version_hash}#"></script>
+<script src="inc/awesomplete-multiple-tags.js?v={$version_hash}#"></script>
diff --git a/tpl/default/pluginsadmin.html b/tpl/default/pluginsadmin.html
index 5cc1802f..717cb517 100644
--- a/tpl/default/pluginsadmin.html
+++ b/tpl/default/pluginsadmin.html
@@ -116,8 +116,8 @@
       </section>
 
       <div class="center more">
-        More plugins available
-        <a href="doc/Community-&-Related-software.html#third-party-plugins">in the documentation</a>.
+        {"More plugins available"|t}
+        <a href="doc/Community-&-Related-software.html#third-party-plugins">{"in the documentation"|t}</a>.
       </div>
       <div class="center">
         <input type="submit" value="{'Save'|t}" name="save">
diff --git a/tpl/default/tag.cloud.html b/tpl/default/tag.cloud.html
index 96b357a3..68335c70 100644
--- a/tpl/default/tag.cloud.html
+++ b/tpl/default/tag.cloud.html
@@ -26,7 +26,7 @@
           <input type="hidden" name="do" value="tagcloud">
           <input type="text" name="searchtags" placeholder="{'Filter by tag'|t}"
                  {if="!empty($search_tags)"}
-                 value="{$search_tags}"
+                    value="{$search_tags}"
                  {/if}
           autocomplete="off" data-multiple data-autofirst data-minChars="1"
           data-list="{loop="$tags"}{$key}, {/loop}"