Merge pull request #1636 from ArthurHoaro/fix/vintage-async-metadata

assets/vintage/css/shaarli.css

@@ -1122,6 +1122,16 @@ ul.errors {
     float: left;
 }
 
+ul.warnings {
+    color: orange;
+    float: left;
+}
+
+ul.successes {
+    color: green;
+    float: left;
+}
+
 #pluginsadmin {
     width: 80%;
     padding: 20px 0 0 20px;
@@ -1248,3 +1258,54 @@ ul.errors {
     width: 0%;
     height: 10px;
 }
+
+.loading-input {
+    position: relative;
+}
+
+@keyframes around {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.loading-input .icon-container {
+    position: absolute;
+    right: 60px;
+    top: calc(50% - 10px);
+}
+
+.loading-input .loader {
+    position: relative;
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    animation: around 5.4s infinite;
+}
+
+.loading-input .loader::after,
+.loading-input .loader::before {
+     content: "";
+     background: #eee;
+     position: absolute;
+     display: inline-block;
+     width: 100%;
+     height: 100%;
+     border-width: 2px;
+     border-color: #333 #333 transparent transparent;
+     border-style: solid;
+     border-radius: 20px;
+     box-sizing: border-box;
+     top: 0;
+     left: 0;
+     animation: around 0.7s ease-in-out infinite;
+}
+
+.loading-input .loader::after {
+     animation: around 0.7s ease-in-out 0.1s infinite;
+     background: transparent;
+}

tpl/vintage/daily.html

@@ -14,9 +14,9 @@
 
     <div class="dailyAbout">
         All links of one day<br>in a single page.<br>
-        {if="$previousday"} <a href="{$base_path}/daily&amp;day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
+        {if="$previousday"} <a href="{$base_path}/daily?day={$previousday}"><b>&lt;</b>Previous day</a>{else}<b>&lt;</b>Previous day{/if}
         -
-        {if="$nextday"}<a href="{$base_path}/daily&amp;day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
+        {if="$nextday"}<a href="{$base_path}/daily?day={$nextday}">Next day<b>&gt;</b></a>{else}Next day<b>&gt;</b>{/if}
         <br>
 
         {loop="$daily_about_plugin"}
@@ -52,13 +52,13 @@
                     {$link=$value}
                     <div class="dailyEntry">
                         <div class="dailyEntryPermalink">
-                            <a href="{$base_path}/?{$value.shorturl}">
+                            <a href="{$base_path}/shaare/{$value.shorturl}">
                                 <img src="{$asset_path}/img/squiggle.png#" width="25" height="26" title="permalink" alt="permalink">
                             </a>
                         </div>
                         {if="!$hide_timestamps || $is_logged_in"}
                             <div class="dailyEntryLinkdate">
-                                <a href="{$base_path}/?{$value.shorturl}">{function="strftime('%c', $link.timestamp)"}</a>
+                                <a href="{$base_path}/shaare/{$value.shorturl}">{function="strftime('%c', $link.timestamp)"}</a>
                             </div>
                         {/if}
                         {if="$link.tags"}

tpl/vintage/editlink.html

@@ -6,6 +6,7 @@
 {if="$link.title==''"}onload="document.linkform.lf_title.focus();"
 {elseif="$link.description==''"}onload="document.linkform.lf_description.focus();"
 {else}onload="document.linkform.lf_tags.focus();"{/if} >
+{$asyncLoadClass=$link_is_new && $async_metadata && empty($link.title) ? 'loading-input' : ''}
 <div id="pageheader">
     {include="page.header"}
     <div id="shaarli_title"><a href="{$titleLink}">{$shaarlititle}</a></div>
@@ -14,12 +15,29 @@
           {if="isset($link.id)"}
 	          <input type="hidden" name="lf_id" value="{$link.id}">
           {/if}
-            <label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input"><br>
+            <label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input">
-            <label for="lf_title"><i>Title</i></label><br><input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input"><br>
+            <label for="lf_title"><i>Title</i></label>
-            <label for="lf_description"><i>Description</i></label><br><textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea><br>
+            <div class="{$asyncLoadClass}">
-            <label for="lf_tags"><i>Tags</i></label><br>
+              <input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input">
+              <div class="icon-container">
+                <i class="loader"></i>
+              </div>
+            </div>
+            <label for="lf_description"><i>Description</i></label>
+            <div class="{if="$retrieve_description"}{$asyncLoadClass}{/if}">
+              <textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea>
+              <div class="icon-container">
+                <i class="loader"></i>
+              </div>
+            </div>
+            <label for="lf_tags"><i>Tags</i></label>
+            <div class="{if="$retrieve_description"}{$asyncLoadClass}{/if}">
               <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
-                data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
+                data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" >
+              <div class="icon-container">
+                <i class="loader"></i>
+              </div>
+            </div>
 
           {if="$formatter==='markdown'"}
             <div class="md_help">
@@ -56,5 +74,5 @@
     </div>
 </div>
 {include="page.footer"}
-</body>
+{if="$link_is_new && $async_metadata"}<script src="{$asset_path}/js/metadata.min.js?v={$version_hash}#"></script>{/if}</body>
 </html>

tpl/vintage/page.header.html

@@ -54,6 +54,30 @@
     </ul>
 {/if}
 
+{if="!empty($global_errors)"}
+  <ul class="errors">
+    {loop="$global_errors"}
+      <li>{$value}</li>
+    {/loop}
+  </ul>
+{/if}
+
+{if="!empty($global_warnings)"}
+  <ul class="warnings">
+    {loop="$global_warnings"}
+      <li>{$value}</li>
+    {/loop}
+  </ul>
+{/if}
+
+{if="!empty($global_successes)"}
+  <ul class="successes">
+    {loop="$global_successes"}
+      <li>{$value}</li>
+    {/loop}
+  </ul>
+{/if}
+
 <div class="clear"></div>