Changeset 2435 for trunk/template

Timestamp:

Jul 15, 2008, 3:29:23 AM (16 years ago)

Author:

rvelices

Message:

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

Location:

trunk/template/yoga

Files:

• picture.tpl (modified) (4 diffs)
• rating.js (modified) (1 diff)

trunk/template/yoga/picture.tpl

@@ -163 +163 @@
 selectElement.disabled = true;
 var y = new PwgWS(rootUrl);
-
 y.callService(
   "pwg.images.setPrivacyLevel", {image_id: id, level:level} ,
@@ -183 +182 @@
   <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 }
@@ -214 +213 @@
 <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}
@@ -225 +224 @@
 {/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>

trunk/template/yoga/rating.js

@@ -1 @@
-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;
 }