From eae01904a5369eb6422bd118c1519914aee9efd0 Mon Sep 17 00:00:00 2001
From: rvelices <rv-github@modusoptimus.com>
Date: Fri, 15 Dec 2006 04:57:45 +0000
Subject: 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
---
 template/yoga/default-colors.css            |   2 +-
 template/yoga/icon/star_e.gif               | Bin 0 -> 109 bytes
 template/yoga/icon/star_f.gif               | Bin 0 -> 185 bytes
 template/yoga/picture.css                   |  14 ++++-
 template/yoga/picture.tpl                   |   3 +-
 template/yoga/rating.js                     |  86 ++++++++++++++++++++++++++++
 template/yoga/theme/clear/themeconf.inc.php |   1 +
 template/yoga/theme/dark/themeconf.inc.php  |   1 +
 8 files changed, 103 insertions(+), 4 deletions(-)
 create mode 100644 template/yoga/icon/star_e.gif
 create mode 100644 template/yoga/icon/star_f.gif
 create mode 100644 template/yoga/rating.js

(limited to 'template')

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
Binary files /dev/null and b/template/yoga/icon/star_e.gif differ
diff --git a/template/yoga/icon/star_f.gif b/template/yoga/icon/star_f.gif
new file mode 100644
index 000000000..5e08567b3
Binary files /dev/null and b/template/yoga/icon/star_f.gif differ
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/',
-- 
cgit v1.2.3