Project

General

Profile

Revision 2888

Added by anderson almost 15 years ago

Implemented a fixed height review list that is populated via AJAX. Works great in FF/Win and IE/Win. You can see a test version with dummy data at:

http://machination.msi.ucsb.edu/~anderson/esa-reviews/test/getReviews.test.html

View differences:

lib/style/common/templates/getReviews.tmpl
3 3
<head>
4 4
  <title>Reviews</title>
5 5
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
6

  
6 7
  <script src="@systemidserver@@style-common-path@/prototype.js"></script>
7
  <script>
8
	function get_reviews() {
9
		
10
    		new Ajax.Request("@servlet-path@?action=read&docid=[%reviewdocid%]",
11
        	{asynchronous:true, evalScripts:true, method:'post',
12
        	onLoading:function(request){Element.show('busy')},
13
        	onComplete: render_reviews});
14
	}
8
  <script src="@systemidserver@@style-common-path@/accordion.js"></script>
9
  <script src="@systemidserver@@style-common-path@/review_behaviors.js"></script>
10
  <link href="@systemidserver@@style-common-path@/reviews.css" media="all" rel="Stylesheet" type="text/css" />
15 11

  
16
	function render_reviews(request) {
17
    		//alert(request.responseText);
18
    		var reviews = request.responseXML.getElementsByTagName("review");
19 12

  
20
    		var ul = document.createElement("ul");
21

  
22
    		// for each review...
23
    		for (var i=0; i<reviews.length; i++) {
24

  
25
        // create a new <li>
26

  
27
        var packageId = document.createTextNode(getText(reviews[i], "packageId"));
28
        var action = document.createTextNode(getText(reviews[i], "action"));
29
        var datetime = document.createTextNode(getText(reviews[i], "datetime"));
30
        var text = document.createTextNode(getText(reviews[i], "text"));
31

  
32
        var li = document.createElement("li");
33
        var dl = document.createElement("dl");
34
        var dt = document.createElement("dt");
35
        var dd1 = document.createElement("dd");
36
        var dd2 = document.createElement("dd");
37
        var p = document.createElement("p");
38

  
39
        dt.appendChild(packageId);
40
        dd1.appendChild(datetime);
41
        dd2.appendChild(action);
42

  
43
        dl.appendChild(dt);
44
        dl.appendChild(dd1);
45
        dl.appendChild(dd2);
46
        p.appendChild(text);
47

  
48
        li.appendChild(dl);
49
        li.appendChild(p);
50

  
51
        // add to parent
52
        ul.appendChild(li);
53
    		}
54

  
55
    		document.getElementById("review_list").appendChild(ul);
56

  
57
    		// not busy anymore
58
    		setTimeout("Element.hide('busy')", 1000);
59
	}
60

  
61
	function getText(elem, tag) {
62
   	 	return elem.getElementsByTagName(tag)[0].firstChild.nodeValue;
63
	}
64
  </script>
65

  
66
  <style type="text/css">
67
ul {
68
    font: 12pt "arial,sans-serif";
69
    margin-bottom: 4px;
70
    padding: 0px;
71
    width: 200px;
72
}
73

  
74
li {
75
    list-style: none;
76
    padding-left: 0;
77
    padding-bottom: 4px;
78
    font-size: 12pt;
79
    margin-bottom: 12px;
80
    line-height: .85em;
81
        background: #DEF1F1;
82
    border: 1px solid #eee;
83
}
84

  
85
dl {
86
    margin-bottom: -6px;
87
}
88

  
89
/* text */
90
li p {
91
    padding: 2px;
92
    font-size: 10pt;
93
    line-height: .9em;
94
}
95

  
96
/* packageId */
97
dt {
98
    text-align: right;
99
    font-size: 120%;
100
    font-weight: bold;
101
    line-height: 1.1em;
102
    background: #A3DADA;
103
    padding: 6px;
104
    border: 1px solid #ddd;
105
    border-width: 1px 0 2px 0;
106
}
107

  
108
/* datetime, action */
109
dd {
110
    color: #333;
111
    font-variant: small-caps;
112
    margin-left: 8px;
113
    margin-bottom: 0px;
114
    padding-bottom: 0px;
115
    font-size: 90%;
116
    line-height: 1.2em;
117
}
118
  </style>
119

  
120 13
</head>
121 14

  
122 15
[% IF reviewdocid != ''%]
123 16
	<body onload="get_reviews()">
124
        <!-- ajax will populate this node -->
125
        Reviews <img id="busy" src="@systemidserver@@html-path@/style/images/spinner.gif" style="display:none"/>
126
        <div id="review_list"></div>
127 17
[% ELSE %]
128 18
	<body>
129
        Reviews: No reviews found 
130 19
[% END %]
131 20

  
132 21
[% IF isModerator == 'true' %]
133
        <br>
134
        <br>
135
	<center>
22
	<div class="comment_form">
136 23
	<p class="sectionnames">Moderator Actions</p>
137 24
	<form target="_top" id="reviewForm" method="POST" action="@cgi-prefix@/register-dataset.cgi">
138 25
		<input value="mod_accept" name="stage" type="hidden">
139 26
		<input value="esa" name="cfg" type="hidden">
140 27
		<input name="docid" type="hidden" value="[%docid%]">
141
		<br>
142
		<textarea name="review" rows="10"></textarea>
143
		<br>
144
		<br>
145
		<input name="Accept" value=" Accept " type="SUBMIT" onClick="this.parentNode.stage.value='mod_accept';">
146
		<br>
147
		<br>
148
		<input name="Decline" value="Decline" type="SUBMIT" onClick="this.parentNode.stage.value='mod_decline';">
149
		<br>
150
		<br>
151
		<input name="Revise" value=" Revise " type="SUBMIT" onClick="this.parentNode.stage.value='mod_revise';">
28
	<h3 style="margin-bottom: -18px;" class="review_emphasis">Please comment</h3>
29
	<ul>
30
	<li>
31
	<textarea name="review" rows="5" cols="25"></textarea>
32
	</li>
33
	<li>
34
	<input name="Accept" value=" Accept " type="SUBMIT" onClick="this.parentNode.stage.value='mod_accept';">
35
	<input name="Decline" value="Decline" type="SUBMIT" onClick="this.parentNode.stage.value='mod_decline';">
36
	<input name="Revise" value=" Revise " type="SUBMIT" onClick="this.parentNode.stage.value='mod_revise';">
152 37
	</form>
153
	</center>
38
	</div>
154 39
[% END %]
155 40

  
41
[% IF reviewdocid != ''%]
42
        Reviews <img id="busy" src="@systemidserver@@html-path@/style/images/spinner.gif" style="display:none"/>
43

  
44
        <h3 style="margin-top:-8px" class="review_emphasis">Reviews <img id="busy" src="spinner.gif" style="display:none; margin-bottom: -3px;"/></h3>
45
        <!-- ajax will populate this node -->
46
        <div id="review_list_container"><div id="review_list"></div></div>
47

  
48

  
49
[% ELSE %]
50
        No reviews found.
51
[% END %]
52
 
53
<script>
54
</script>
156 55
</body>
157 56
</html>
158 57

  

Also available in: Unified diff