fixes #377 use Ajax calls to refresh/delete album thumbnail

2 files changed, 76 insertions, 9 deletions

diff --git a/admin/themes/default/template/cat_modify.tpl b/admin/themes/default/template/cat_modify.tpl
index d71ad0528..af1fb5792 100644
--- a/admin/themes/default/template/cat_modify.tpl
+++ b/admin/themes/default/template/cat_modify.tpl
@@ -28,6 +28,67 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
     return filtered;
   }
 });
+
+jQuery(document).ready(function() {
+  jQuery(document).on('click', '.refreshRepresentative',  function(e) {
+    var $this = jQuery(this);
+    var method = 'pwg.categories.refreshRepresentative';
+
+    jQuery.ajax({
+      url: "ws.php?format=json&method="+method,
+      type:"POST",
+      data: {
+        category_id: $this.data("category_id")
+      },
+      success:function(data) {
+        var data = jQuery.parseJSON(data);
+        if (data.stat == 'ok') {
+          jQuery(".albumThumbnailImage").attr('href', data.result.url);
+          jQuery(".albumThumbnailImage img").attr('src', data.result.src);
+          jQuery(".albumThumbnailImage").show();
+          jQuery(".albumThumbnailRandom").hide();
+        }
+        else {
+          alert("error on "+method);
+        }
+      },
+      error:function(XMLHttpRequest, textStatus, errorThrows) {
+        alert("serious error on "+method);
+      }
+    });
+
+    e.preventDefault();
+  });
+
+  jQuery(document).on('click', '.deleteRepresentative',  function(e) {
+    var $this = jQuery(this);
+    var method = 'pwg.categories.deleteRepresentative';
+
+    jQuery.ajax({
+      url: "ws.php?format=json&method="+method,
+      type:"POST",
+      data: {
+        category_id: $this.data("category_id")
+      },
+      success:function(data) {
+        var data = jQuery.parseJSON(data);
+        if (data.stat == 'ok') {
+          jQuery(".albumThumbnailImage").hide();
+          jQuery(".albumThumbnailRandom").show();
+        }
+        else {
+          alert("error on "+method);
+        }
+      },
+      error:function(XMLHttpRequest, textStatus, errorThrows) {
+        alert("serious error on "+method);
+      }
+    });
+
+    e.preventDefault();
+  });
+});
+
 {/footer_script}
 
 
@@ -35,7 +96,7 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
   <h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Edit album'|@translate} {$TABSHEET_TITLE}</h2>
 </div>
 
-<form action="{$F_ACTION}" method="POST" id="catModify">
+<div id="catModify">
 
 <fieldset>
   <legend>{'Informations'|@translate}</legend>
@@ -44,19 +105,18 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
     <tr>
       <td id="albumThumbnail">
 {if isset($representant) }
-  {if isset($representant.picture) }
-        <a href="{$representant.picture.URL}"><img src="{$representant.picture.SRC}" alt=""></a>
-  {else}
-        <img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/category_representant_random.png" alt="{'Random photo'|@translate}">
-  {/if}
+        <a class="albumThumbnailImage" style="{if !isset($representant.picture)}display:none{/if}" href="{$representant.picture.url}"><img src="{$representant.picture.src}"></a>
+        <img class="albumThumbnailRandom" style="{if isset($representant.picture)}display:none{/if}" src="{$ROOT_URL}{$themeconf.admin_icon_dir}/category_representant_random.png" alt="{'Random photo'|@translate}">
 
+<p class="albumThumbnailActions">
   {if $representant.ALLOW_SET_RANDOM }
-        <p style="text-align:center;"><input class="submit" type="submit" name="set_random_representant" value="{'Refresh'|@translate}" title="{'Find a new representant by random'|@translate}"></p>
+  <a href="#refresh" data-category_id="{$CAT_ID}" class="refreshRepresentative" title="{'Find a new representant by random'|@translate}">{'Refresh'|@translate}</a>
   {/if}
 
   {if isset($representant.ALLOW_DELETE) }
-        <p><input class="submit" type="submit" name="delete_representant" value="{'Delete Representant'|@translate}"></p>
+  | <a href="#delete" data-category_id="{$CAT_ID}" class="deleteRepresentative" title="{'Delete Representant'|@translate}">{'Delete'|translate}</a>
   {/if}
+</p>
 {/if}
       </td>
 
@@ -90,6 +150,7 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
 
 </fieldset>
 
+<form action="{$F_ACTION}" method="POST">
 <fieldset>
   <legend>{'Properties'|@translate}</legend>
   <p>
@@ -137,3 +198,4 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
 </fieldset>
 
 </form>
+</div> {* #catModify *}
\ No newline at end of file
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 4a151b9a4..509aff377 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -213,7 +213,7 @@ LI.menuLi {
 }
 /* */
 
-FORM#catModify TABLE { width: auto; }
+#catModify TABLE { width: auto; }
 
 #catModify p {
   line-height: 20px;
@@ -221,6 +221,11 @@ FORM#catModify TABLE { width: auto; }
   text-align: left;
 }
 
+#catModify p.albumThumbnailActions {
+  text-align:center;
+  white-space:nowrap;
+}
+
 FIELDSET.elementEdit .thumb {
 	display: block;
 	float: right;