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

4 files changed, 97 insertions, 40 deletions

diff --git a/admin/cat_modify.php b/admin/cat_modify.php
index 3cf8239c1..2b0f37833 100644
--- a/admin/cat_modify.php
+++ b/admin/cat_modify.php
@@ -172,21 +172,6 @@ UPDATE '.CATEGORIES_TABLE.'
   $_SESSION['page_infos'][] = l10n('Album updated successfully');
   $redirect = true;
 }
-elseif (isset($_POST['set_random_representant']))
-{
-  set_random_representant(array($_GET['cat_id']));
-  $redirect = true;
-}
-elseif (isset($_POST['delete_representant']))
-{
-  $query = '
-UPDATE '.CATEGORIES_TABLE.'
-  SET representative_picture_id = NULL
-  WHERE id = '.$_GET['cat_id'].'
-;';
-  pwg_query($query);
-  $redirect = true;
-}
 
 if (isset($redirect))
 {
@@ -336,8 +321,7 @@ else
 }
 
 // representant management
-if ($category['has_images']
-    or !empty($category['representative_picture_id']))
+if ($category['has_images'] or !empty($category['representative_picture_id']))
 {
   $tpl_representant = array();
 
@@ -345,20 +329,7 @@ if ($category['has_images']
   // representant ?
   if (!empty($category['representative_picture_id']))
   {
-    $query = '
-SELECT id,representative_ext,path
-  FROM '.IMAGES_TABLE.'
-  WHERE id = '.$category['representative_picture_id'].'
-;';
-    $row = pwg_db_fetch_assoc(pwg_query($query));
-    $src = DerivativeImage::thumb_url($row);
-    $url = get_root_url().'admin.php?page=photo-'.$category['representative_picture_id'];
-
-    $tpl_representant['picture'] =
-      array(
-        'SRC' => $src,
-        'URL' => $url
-      );
+    $tpl_representant['picture'] = get_category_representant_properties($category['representative_picture_id']);
   }
 
   // can the admin choose to set a new random representant ?
diff --git a/admin/include/functions.php b/admin/include/functions.php
index 5cd44b31d..fbbcd8c55 100644
--- a/admin/include/functions.php
+++ b/admin/include/functions.php
@@ -887,6 +887,25 @@ SELECT uppercats
 }
 
 /**
+ */
+function get_category_representant_properties($image_id)
+{
+  $query = '
+SELECT id,representative_ext,path
+  FROM '.IMAGES_TABLE.'
+  WHERE id = '.$image_id.'
+;';
+  $row = pwg_db_fetch_assoc(pwg_query($query));
+  $src = DerivativeImage::thumb_url($row);
+  $url = get_root_url().'admin.php?page=photo-'.$image_id;
+
+  return array(
+    'src' => $src,
+    'url' => $url
+    );
+}
+
+/**
  * Set a new random representant to the categories.
  *
  * @param int[] $categories
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;