feature 603: rating buttons presented with stars (full Javascript

on compatible browsers, otherwise default presentation)

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

8 files changed, 103 insertions, 4 deletions

diff --git a/template/yoga/default-colors.css b/template/yoga/default-colors.css
index d2766b061..ee8cdb6e6 100644
--- a/template/yoga/default-colors.css
+++ b/template/yoga/default-colors.css
@@ -50,7 +50,7 @@ INPUT.radio, INPUT.checkbox {
 }
 
 /* rate buttons displayed like links */
-INPUT.rateButton, INPUT.rateButtonSelected {
+INPUT.rateButton, INPUT.rateButtonSelected, INPUT.rateButtonStarFull, INPUT.rateButtonStarEmpty {
   color:inherit;
   background-color:transparent;	/* Konqueror doesn't accept transparent here */
 }
diff --git a/template/yoga/icon/star_e.gif b/template/yoga/icon/star_e.gif
new file mode 100644
index 000000000..e09994991
--- /dev/null
+++ b/template/yoga/icon/star_e.gif
diff --git a/template/yoga/icon/star_f.gif b/template/yoga/icon/star_f.gif
new file mode 100644
index 000000000..5e08567b3
--- /dev/null
+++ b/template/yoga/icon/star_f.gif
diff --git a/template/yoga/picture.css b/template/yoga/picture.css
index 153a98b41..692aefcba 100644
--- a/template/yoga/picture.css
+++ b/template/yoga/picture.css
@@ -95,12 +95,12 @@ TABLE.infoTable TD.value UL {
   list-style-type: square;
 }
 
-.rateButton, .rateButtonSelected  {
+.rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty  {
   padding:0;
   border:0;
 }
 
-.rateButton {
+.rateButton, .rateButtonStarFull, .rateButtonStarEmpty {
   cursor: pointer;
 }
 
@@ -109,6 +109,16 @@ TABLE.infoTable TD.value UL {
   font-size:120%;
 }
 
+.rateButtonStarFull {
+  background: url('icon/star_f.gif') no-repeat center;
+  width: 16px;
+}
+
+.rateButtonStarEmpty {
+  background: url('icon/star_e.gif') no-repeat center;
+  width: 16px;
+}
+
 #comments {
   text-align: left;
 }
diff --git a/template/yoga/picture.tpl b/template/yoga/picture.tpl
index 585678247..02453e9af 100644
--- a/template/yoga/picture.tpl
+++ b/template/yoga/picture.tpl
@@ -145,7 +145,7 @@
 <!-- END metadata -->
 
 <!-- BEGIN rate -->
-<form action="{rate.F_ACTION}" method="post">
+<form action="{rate.F_ACTION}" method="post" id="rateForm">
 <div>{rate.SENTENCE} :
 <!-- BEGIN rate_option -->
 {rate.rate_option.SEPARATOR}
@@ -156,6 +156,7 @@
 <input type="submit" name="rate" value="{rate.rate_option.OPTION}" class="rateButton" />
 <!-- END not_my_rate -->
 <!-- END rate_option -->
+<script type="text/javascript" src="{pwg_root}{themeconf:template_dir}/rating.js"></script>
 </div>
 </form>
 <!-- END rate -->
diff --git a/template/yoga/rating.js b/template/yoga/rating.js
new file mode 100644
index 000000000..e934bb858
--- /dev/null
+++ b/template/yoga/rating.js
@@ -0,0 +1,86 @@
+makeNiceRatingForm();

+

+function makeNiceRatingForm()

+{

+  var form = document.getElementById('rateForm');

+  if (!form) return; //? template changed

+  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

+

+    rateButton.value = ""; //hide the text IE/Opera

+    rateButton.style.textIndent = "-50px"; //hide the text FF

+

+    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();

+}

+

+function resetRatingStarDisplay()

+{

+  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";

+    }

+  }

+}

+

+function updateRatingStarDisplayEvt(e)

+{

+  if (e.target)

+    updateRatingStarDisplay(e.target.initialRateValue);

+  else //IE

+    updateRatingStarDisplay(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;

+}
\ No newline at end of file
diff --git a/template/yoga/theme/clear/themeconf.inc.php b/template/yoga/theme/clear/themeconf.inc.php
index 369818a1c..0184d9b27 100644
--- a/template/yoga/theme/clear/themeconf.inc.php
+++ b/template/yoga/theme/clear/themeconf.inc.php
@@ -2,6 +2,7 @@
 $themeconf = array(
   'template' => 'yoga',
   'theme' => 'clear',
+  'template_dir' => 'template/yoga',
   'icon_dir' => 'template/yoga/icon',
   'admin_icon_dir' => 'template/yoga/icon/admin',
   'mime_icon_dir' => 'template/yoga/icon/mimetypes/',
diff --git a/template/yoga/theme/dark/themeconf.inc.php b/template/yoga/theme/dark/themeconf.inc.php
index 1051e5f3e..7d6d00da5 100644
--- a/template/yoga/theme/dark/themeconf.inc.php
+++ b/template/yoga/theme/dark/themeconf.inc.php
@@ -2,6 +2,7 @@
 $themeconf = array(
   'template' => 'yoga',
   'theme' => 'dark',
+  'template_dir' => 'template/yoga',
   'icon_dir' => 'template/yoga/icon',
   'admin_icon_dir' => 'template/yoga/icon/admin',
   'mime_icon_dir' => 'template/yoga/icon/mimetypes/',