refs #9 add loading animation, interrupt current ajax if another one is launched

css/gpxedit.css

@@ -227,7 +227,7 @@ h3 {
     margin-left:20px;
     list-style-type:circle;
 }
-#saved, #failed {
+#saved, #failed, #loading {
     /*width: 330px;*/
     padding-left: 5px;
     /*height: 35px;*/
@@ -250,11 +250,11 @@ h3 {
 #failed{
     background-color: red;
 }
-#saved .fa, #failed .fa {
+#saved .fa, #failed .fa, #loading .fa {
     font-size: 22px;
 }
 
-#saved p, #failed p{
+#saved p, #failed p, #loading p{
     padding: 6px 6px 6px 6px;
 }
 .clear {

js/gpxedit.js

@@ -7,7 +7,8 @@ var gpxedit = {
     drawControl: null,
     id: 0,
     // indexed by gpxedit_id
-    layersData: {}
+    layersData: {},
+    currentAjax : null
 };
 
 var symbolSelectClasses = {
@@ -848,6 +849,15 @@ function hideSaveSuccessAnimation(){
     $('#saved').fadeOut();
 }
 
+function showLoadingAnimation(){
+    $('#loading').show();
+}
+
+function hideLoadingAnimation(){
+    $('#loading').hide();
+}
+
+
 function loadAction(file){
     if (!endsWith(file, '.gpx') &&
             !endsWith(file, '.kml') &&
@@ -872,7 +882,8 @@ function loadFile(file){
         path : file
     }
     var url = OC.generateUrl('/apps/gpxedit/getgpx');
-    $.post(url, req).done(function (response) {
+    showLoadingAnimation();
+    gpxedit.currentAjax = $.post(url, req).done(function (response) {
         if ($('#clearbeforeload').is(':checked')){
             clear();
         }
@@ -885,6 +896,7 @@ function loadFile(file){
             gpxedit.map.fitBounds(bounds,
                     {animate:true, paddingTopLeft: [parseInt($('#sidebar').css('width')), 0]}
                     );
+            hideLoadingAnimation();
         }
     });
 }
@@ -1181,6 +1193,10 @@ $(document).ready(function(){
         clear();
     });
     $('button#loadButton').click(function(e){
+        if (gpxedit.currentAjax !== null){
+            gpxedit.currentAjax.abort();
+            hideLoadingAnimation();
+        }
         OC.dialogs.filepicker(t('gpxedit', 'Load file (gpx, kml, csv, png)'), function(targetPath) {
             loadAction(targetPath);
         }, false, null, true);

l10n/fr.json

@@ -1,5 +1,6 @@
 { "translations": {
     "Load and save files" : "Charger et enregistrer des fichiers",
+	"loading file" : "chargement du fichier",
     "Choose directory and save" : "Choisir un dossier et sauver",
     "About GpxEdit" : "À propos de GpxEdit",
     "Load" : "Charger",

templates/gpxcontent.php

@@ -47,6 +47,10 @@ p($_['gpxedit_version']);
         <i class="fa fa-save fa-spin fa-3x fa-fw"></i>
         <b id="content"></b></p>
     </div>
+	<div id="loading"><p>
+		<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+		<?php p($l->t('loading file')); ?>&nbsp;</p>
+	</div>
 <?php
 
 echo '<p id="username" style="display:none">';
@@ -130,7 +134,6 @@ if (count($_['tileservers']) > 0){
     <ul class="disclist">
         <li><b>&lt;</b> : <?php p($l->t('toggle sidebar')); ?></li>
         <li><b>!</b> : <?php p($l->t('toggle minimap')); ?></li>
-        <li><b>œ</b> or <b>²</b> : <?php p($l->t('toggle search')); ?></li>
     </ul>
     <br/><hr/><br/>
     <h3 class="sectiontitle"><?php p($l->t('Features')); ?> :</h3>