Changeset 12

Show
Ignore:
Timestamp:
02/08/07 20:19:41 (2 years ago)
Author:
simon
Message:

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

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/templates/header

    r11 r12  
    44    <meta name="robots" content="nofollow"> 
    55    <link title="Maypole" href="[%base%]/static/memories.css" type="text/css" rel="stylesheet"/> 
     6    <link href="[%base%]/static/star_rating.css" type="text/css" rel="stylesheet"/> 
    67    [% IF photos %] 
    78<link rel="alternate" type="application/rdf+xml" title="RSS" 

  • trunk/templates/photo/comment

    r2 r12  
     1<p style="background:#fff">Rate this photo! 
     2<span class="inline-rating"> 
     3<ul class="star-rating"> 
     4   [% IF photo.approx_rating %] 
     5   <li class='current-rating' style="width:[% photo.approx_rating * 25 %]px">Currently [%photo.approx_rating%]/5 Stars.</li> 
     6   [% END %] 
     7   <li><a href='javascript:add_rating(1)' title='1 star out of 5' class='one-star'>1</a></li> 
     8   <li><a href='javascript:add_rating(2)' title='2 stars out of 5' class='two-stars'>2</a></li> 
     9   <li><a href='javascript:add_rating(3)' title='3 stars out of 5' class='three-stars'>3</a></li> 
     10   <li><a href='javascript:add_rating(4)' title='4 stars out of 5' class='four-stars'>4</a></li> 
     11   <li><a href='javascript:add_rating(5)' title='5 stars out of 5' class='five-stars'>5</a></li> 
     12   </ul> 
     13</span> 
     14 ([%photo.approx_rating%] out of [%photo.rated%] votes)  
     15</p> 
     16<script> 
     17add_rating = function (rank) { 
     18    new Ajax.Request("[%base%]/photo/add_rating/[%photo.id%]", 
     19      { method: "get", parameters: {rating: rank }, 
     20        onSuccess: function () { 
     21          new Ajax.Updater("content", "[%base%]/photo/comment/[%photo.id%]") 
     22        } 
     23      }); 
     24    add_rating = function (rank) { alert("You've already rated this photo")  } 
     25} 
     26 
     27 
     28function post_comment () { 
     29    new Ajax.Request("[%base%]/photo/add_comment/[%photo.id%]", 
     30      { method: "post", 
     31        parameters: { name: $("commentname").value, 
     32                      content: $("newcomment").value 
     33                    }, 
     34        onSuccess: function () { 
     35          new Ajax.Updater("content", "[%base%]/photo/comment/[%photo.id%]") 
     36        } 
     37      }); 
     38} 
     39</script> 
    140<div class="comments"> 
    241[% FOR comment = photo.comments %] 
    …… 
    746[% END %] 
    847    <div class="comment"> 
    9         <form action="[%base%]/photo/add_comment/[%photo.id%]" method="post"> 
    10         Name: <input name="name" /> <hr> 
    11         <textarea name="content" cols="60" rows="5"/> 
    12         </textarea> 
     48        <form action="javascript:post_comment()" method="post"> 
     49        Name: <input id="commentname" name="name" /> <hr> 
     50        <textarea id="newcomment" name="content" cols="60" rows="5"/></textarea> 
    1351        <p> 
    1452        <input type="submit" name="Comment on this picture" value="Comment on this picture">