- image rating on picture page done through ajax (tested safari/ie 6&7/ff)

git-svn-id: http://piwigo.org/svn/trunk@2435 68402e56-0260-453c-a942-63ccdbb3a9ee

2 files changed, 83 insertions, 69 deletions

diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl
index af22ade18..aec446bd6 100644
--- a/template/yoga/picture.tpl
+++ b/template/yoga/picture.tpl
@@ -162,7 +162,6 @@ y.callService(
 {
 selectElement.disabled = true;
 var y = new PwgWS(rootUrl);
-
 y.callService(
   "pwg.images.setPrivacyLevel", {image_id: id, level:level} ,
   {
@@ -182,7 +181,7 @@ y.callService(
   {if isset($rate_summary) }
   <tr>
     <td class="label">{'Average rate'|@translate}</td>
-    <td class="value">
+    <td class="value" id="ratingSummary">
     {if $rate_summary.count}
       {assign var='rate_text' value='%.2f (rated %d times, standard deviation = %.2f)'|@translate }
       {$pwg->sprintf($rate_text, $rate_summary.average, $rate_summary.count, $rate_summary.std) }
@@ -213,7 +212,7 @@ y.callService(
 {if isset($rating)}
 <form action="{$rating.F_ACTION}" method="post" id="rateForm">
 <div>
-{if isset($rating.USER_RATE)}{'update_rate'|@translate}{else}{'new_rate'|@translate}{/if}
+<span id="updateRate">{if isset($rating.USER_RATE)}{'update_rate'|@translate}{else}{'new_rate'|@translate}{/if}</span>
 :
 {foreach from=$rating.marks item=mark name=rate_loop}
 {if !$smarty.foreach.rate_loop.first} | {/if}
@@ -224,6 +223,11 @@ y.callService(
 {/if}
 {/foreach}
 <script type="text/javascript" src="{$ROOT_URL}{$themeconf.template_dir}/rating.js"></script>
+<script type="text/javascript">
+makeNiceRatingForm( {ldelim}rootUrl: '{$ROOT_URL|@escape:"javascript"}', image_id: {$current.id}, 
+updateRateText: "{'update_rate'|@translate|@escape:'javascript'}", updateRateElement: document.getElementById("updateRate"),
+ratingSummaryText: "{'%.2f (rated %d times, standard deviation = %.2f)'|@translate|@escape:'javascript'}", ratingSummaryElement: document.getElementById("ratingSummary") {rdelim} );
+</script>
 </div>
 </form>
 {/if}
diff --git a/template/yoga/rating.js b/template/yoga/rating.js
index a4f8f86b8..682ab10d0 100644
--- a/template/yoga/rating.js
+++ b/template/yoga/rating.js
@@ -1,90 +1,100 @@
-makeNiceRatingForm();
+var gRatingOptions, gRatingButtons, gUserRating;
 
-function makeNiceRatingForm()
+function makeNiceRatingForm(options)
 {
-  var form = document.getElementById('rateForm');
-  if (!form) return; //? template changed
-  gRatingButtons = form.getElementsByTagName('input');
+	gRatingOptions = options || {};
+	var form = document.getElementById('rateForm');
+	if (!form) return; //? template changed
 
-  gUserRating = "";
-  for (var i=0; i<gRatingButtons.length; i++)
-  {
-    if ( gRatingButtons[i].type=="button" )
-    {
-      gUserRating = gRatingButtons[i].value;
-      break;
-    }
-  }
+	gRatingButtons = form.getElementsByTagName('input');
+	gUserRating = "";
+	for (var i=0; i<gRatingButtons.length; i++)
+	{
+		if ( gRatingButtons[i].type=="button" )
+		{
+			gUserRating = gRatingButtons[i].value;
+			break;
+		}
+	}
 
-  for (var i=0; i<gRatingButtons.length; i++)
-  {
-    var rateButton = gRatingButtons[i];
-    rateButton.initialRateValue = rateButton.value; // save it as a property
+	for (var i=0; i<gRatingButtons.length; i++)
+	{
+		var rateButton = gRatingButtons[i];
+		rateButton.initialRateValue = rateButton.value; // save it as a property
+		try { rateButton.type = "button"; } catch (e){}// avoid normal submit (use ajax); not working in IE6
 
-    rateButton.value = ""; //hide the text IE/Opera
-    with (rateButton.style)
-    {
-      textIndent = "-50px"; //hide the text FF
-      marginLeft = marginRight = 0;
-    }
+		if (navigator.userAgent.indexOf('AppleWebKit/') == -1 ) rateButton.value = ""; //hide the text IE/Opera - breaks safari
+		with (rateButton.style)
+		{
+			textIndent = "-50px"; //hide the text FF
+			marginLeft = marginRight = 0;
+		}
 
-    if (i!=gRatingButtons.length-1 && rateButton.nextSibling.nodeType == 3 /*TEXT_NODE*/)
-      rateButton.parentNode.removeChild(rateButton.nextSibling);
-    if (i>0 && rateButton.previousSibling.nodeType == 3 /*TEXT_NODE*/)
-      rateButton.parentNode.removeChild(rateButton.previousSibling);
+		if (i!=gRatingButtons.length-1 && rateButton.nextSibling.nodeType == 3 /*TEXT_NODE*/)
+			rateButton.parentNode.removeChild(rateButton.nextSibling);
+		if (i>0 && rateButton.previousSibling.nodeType == 3 /*TEXT_NODE*/)
+			rateButton.parentNode.removeChild(rateButton.previousSibling);
 
-    if(window.addEventListener){ // Mozilla, Netscape, Firefox
-      rateButton.addEventListener("click", updateRating, false );
-      rateButton.addEventListener("mouseout", resetRatingStarDisplay, false );
-      rateButton.addEventListener("mouseover", updateRatingStarDisplayEvt, false );
-    }
-    else if(window.attachEvent) { // IE
-      rateButton.attachEvent("onclick", updateRating);
-      rateButton.attachEvent("onmouseout", resetRatingStarDisplay);
-      rateButton.attachEvent("onmouseover", updateRatingStarDisplayEvt);
-    }
-  }
-  resetRatingStarDisplay();
+		if(window.addEventListener){ // Mozilla, Netscape, Firefox
+			rateButton.addEventListener("click", updateRating, false );
+			rateButton.addEventListener("mouseout", resetRatingStarDisplay, false );
+			rateButton.addEventListener("mouseover", updateRatingStarDisplayEvt, false );
+		}
+		else if(window.attachEvent) { // IE
+			rateButton.attachEvent("onclick", updateRating);
+			rateButton.attachEvent("onmouseout", resetRatingStarDisplay);
+			rateButton.attachEvent("onmouseover", updateRatingStarDisplayEvt);
+		}
+	}
+	resetRatingStarDisplay();
 }
 
 function resetRatingStarDisplay()
 {
-  updateRatingStarDisplay( gUserRating );
+	updateRatingStarDisplay( gUserRating );
 }
 
 function updateRatingStarDisplay(userRating)
 {
-  for (i=0; i<gRatingButtons.length; i++)
-  {
-    var rateButton = gRatingButtons[i];
-    if (userRating!=="" && userRating>=rateButton.initialRateValue )
-    {
-      rateButton.className = "rateButtonStarFull";
-    }
-    else
-    {
-      rateButton.className = "rateButtonStarEmpty";
-    }
-  }
+	for (var i=0; i<gRatingButtons.length; i++)
+		gRatingButtons[i].className = (userRating!=="" && userRating>=gRatingButtons[i].initialRateValue ) ? "rateButtonStarFull" : "rateButtonStarEmpty";
 }
 
 function updateRatingStarDisplayEvt(e)
 {
-  if (e.target)
-    updateRatingStarDisplay(e.target.initialRateValue);
-  else //IE
-    updateRatingStarDisplay(e.srcElement.initialRateValue);
+	updateRatingStarDisplay(
+		e.target ? e.target.initialRateValue : e.srcElement.initialRateValue);
 }
 
 function updateRating(e)
 {
-  if (e.target)
-    var rateButton = e.target;
-  else //IE
-    var rateButton = e.srcElement;
-  if (rateButton.initialRateValue == gUserRating)
-    return false; //nothing to do
-  // some ajax here one day would be nice
-  rateButton.value = rateButton.initialRateValue; // put back real value
-  return true;
+	var rateButton = e.target || e.srcElement;
+	if (rateButton.initialRateValue == gUserRating)
+		return false; //nothing to do
+
+	for (var i=0; i<gRatingButtons.length; i++) gRatingButtons[i].disabled=true;
+	var y = new PwgWS(gRatingOptions.rootUrl);
+	y.callService(
+		"pwg.images.rate", {image_id: gRatingOptions.image_id, rate: rateButton.initialRateValue } ,
+		{
+			onFailure: function(num, text) {
+				alert(num + " " + text);
+				document.location = rateButton.form.action + "&rate="+rateButton.initialRateValue;
+			},
+			onSuccess: function(result) {
+				gUserRating = rateButton.initialRateValue;
+				for (var i=0; i<gRatingButtons.length; i++) gRatingButtons[i].disabled=false;
+				if (gRatingOptions.updateRateElement) gRatingOptions.updateRateElement.innerHTML = gRatingOptions.updateRateText;
+				if (gRatingOptions.ratingSummaryElement)
+				{
+					var t = gRatingOptions.ratingSummaryText;
+					var args =[result.average, result.count, result.stdev], idx = 0, rexp = new RegExp( /%\.?\d*[sdf]/ );
+					_xxx = t.match( rexp );
+					while (idx<args.length) t=t.replace(rexp, args[idx++]);
+					gRatingOptions.ratingSummaryElement.innerHTML = t;
+				}
+			}
+		}
+	);
+	return false;
 }
\ No newline at end of file