Ajax-up the comments (References #5) and add user ratings (Closes #6).

git-svn-id: http://svn.simon-cozens.org/memories/trunk@12 041978f6-d955-411f-a9d7-1d8545c9c3c7

diff --git a/templates/header b/templates/header
index ada7f303dda2b668893072d6289721f3e4efdb0a..50c09d7190050ede6391e9527c381e260643034d 100644 (file)
--- a/templates/header
+++ b/templates/header
@@ -3,6 +3,7 @@
     <title> Memories - Photo Sharing [% IF photo %] - [% photo.title; END%]</title>
     <meta name="robots" content="nofollow">
     <link title="Maypole" href="[%base%]/static/memories.css" type="text/css" rel="stylesheet"/>
+    <link href="[%base%]/static/star_rating.css" type="text/css" rel="stylesheet"/>
     [% IF photos %]
 <link rel="alternate" type="application/rdf+xml" title="RSS"
 href="[%base%]/[%path%]?format=rss" />

diff --git a/templates/photo/comment b/templates/photo/comment
index 498e5b6adaf73c6126eb2e9c177216f824c42db5..f1c74da61903305031519af0ef3848307e744d54 100644 (file)
--- a/templates/photo/comment
+++ b/templates/photo/comment
@@ -1,3 +1,42 @@
+<p style="background:#fff">Rate this photo!
+<span class="inline-rating">
+<ul class="star-rating">
+   [% IF photo.approx_rating %]
+   <li class='current-rating' style="width:[% photo.approx_rating * 25 %]px">Currently [%photo.approx_rating%]/5 Stars.</li>
+   [% END %]
+   <li><a href='javascript:add_rating(1)' title='1 star out of 5' class='one-star'>1</a></li>
+   <li><a href='javascript:add_rating(2)' title='2 stars out of 5' class='two-stars'>2</a></li>
+   <li><a href='javascript:add_rating(3)' title='3 stars out of 5' class='three-stars'>3</a></li>
+   <li><a href='javascript:add_rating(4)' title='4 stars out of 5' class='four-stars'>4</a></li>
+   <li><a href='javascript:add_rating(5)' title='5 stars out of 5' class='five-stars'>5</a></li>
+   </ul>
+</span>
+ ([%photo.approx_rating%] out of [%photo.rated%] votes) 
+</p>
+<script>
+add_rating = function (rank) {
+    new Ajax.Request("[%base%]/photo/add_rating/[%photo.id%]",
+      { method: "get", parameters: {rating: rank },
+        onSuccess: function () {
+          new Ajax.Updater("content", "[%base%]/photo/comment/[%photo.id%]")
+        }
+      });
+    add_rating = function (rank) { alert("You've already rated this photo")  }
+}
+
+
+function post_comment () {
+    new Ajax.Request("[%base%]/photo/add_comment/[%photo.id%]",
+      { method: "post",
+        parameters: { name: $("commentname").value,
+                      content: $("newcomment").value
+                    },
+        onSuccess: function () {
+          new Ajax.Updater("content", "[%base%]/photo/comment/[%photo.id%]")
+        }
+      });
+}
+</script>
 <div class="comments">
 [% FOR comment = photo.comments %]
     <div class="comment">
@@ -6,10 +45,9 @@
     </div>
 [% END %]
     <div class="comment">
-        <form action="[%base%]/photo/add_comment/[%photo.id%]" method="post">
-        Name: <input name="name" /> <hr>
-        <textarea name="content" cols="60" rows="5"/>
-        </textarea>
+        <form action="javascript:post_comment()" method="post">
+        Name: <input id="commentname" name="name" /> <hr>
+        <textarea id="newcomment" name="content" cols="60" rows="5"/></textarea>
         <p>
         <input type="submit" name="Comment on this picture" value="Comment on this picture">
         </p>

diff --git a/templates/static/alt_star.gif b/templates/static/alt_star.gif
new file mode 100644 (file)
index 0000000..068fa7f
Binary files /dev/null and b/templates/static/alt_star.gif differ

diff --git a/templates/static/star.gif b/templates/static/star.gif
new file mode 100644 (file)
index 0000000..32633e3
Binary files /dev/null and b/templates/static/star.gif differ

diff --git a/templates/static/star_rating.css b/templates/static/star_rating.css
new file mode 100644 (file)
index 0000000..8ba0141
--- /dev/null
+++ b/templates/static/star_rating.css
@@ -0,0 +1,84 @@
+.star-rating,
+.star-rating a:hover,\r
+.star-rating a:active,\r
+.star-rating a:focus,
+.star-rating .current-rating{
+       background: url(star.gif) left -1000px repeat-x;
+}
+.star-rating{\r
+       position:relative;\r
+       width:125px;\r
+       height:25px;\r
+       overflow:hidden;\r
+       list-style:none;\r
+       margin:0;\r
+       padding:0;\r
+       background-position: left top;\r
+}\r
+.star-rating li{
+       display: inline;\r
+}\r
+.star-rating a, 
+.star-rating .current-rating{\r
+       position:absolute;\r
+       top:0;\r
+       left:0;\r
+       text-indent:-1000em;\r
+       height:25px;\r
+       line-height:25px;\r
+       outline:none;\r
+       overflow:hidden;
+       border: none;
+}
+.star-rating a:hover,\r
+.star-rating a:active,\r
+.star-rating a:focus{
+       background-position: left bottom;
+}\r
+.star-rating a.one-star{\r
+       width:20%;\r
+       z-index:6;\r
+}\r
+.star-rating a.two-stars{\r
+       width:40%;\r
+       z-index:5;\r
+}\r
+.star-rating a.three-stars{\r
+       width:60%;\r
+       z-index:4;\r
+}\r
+.star-rating a.four-stars{\r
+       width:80%;\r
+       z-index:3;\r
+}\r
+.star-rating a.five-stars{\r
+       width:100%;\r
+       z-index:2;\r
+}\r
+.star-rating .current-rating{\r
+       z-index:1;\r
+       background-position: left center;
+}      \r
+\r
+/* for an inline rater */\r
+.inline-rating{\r
+       display:-moz-inline-block;\r
+       display:-moz-inline-box;\r
+       display:inline-block;\r
+       vertical-align: middle;\r
+}\r
+\r
+/* smaller star */\r
+.small-star{\r
+       width:50px;\r
+       height:10px;\r
+}
+.small-star,
+.small-star a:hover,\r
+.small-star a:active,\r
+.small-star a:focus,
+.small-star .current-rating{
+       background-image: url(star_small.gif);
+       line-height: 10px;
+       height: 10px;
+}\r\r\r\r

diff --git a/templates/static/star_small.gif b/templates/static/star_small.gif
new file mode 100644 (file)
index 0000000..f180d89
Binary files /dev/null and b/templates/static/star_small.gif differ