Workspace/Siman/WebContent/jsp/commentPane.jsp

   1 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   2     pageEncoding="ISO-8859-1"%>
   3 <%@ taglib prefix="s" uri="/struts-tags"%>
   4 <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
   5
   6 <div id="display_comments_div">
   7     <s:action name="display-comments" namespace="/study" executeResult="true" />
   8 </div>
   9
  10
  11 <!-- edit comment functionality -->
  12 <form name="edit_comment_form" id="edit_comment_form" action="edit-comment" method="post"
  13     style="display: none; position: absolute; background: white;">
  14
  15   <div id="commentToEditTiltleErrorMessage" class="errorMessage" style="display: none" align="center">
  16     <s:property value='%{getText("message.error.noenteredvalue", "-", getText("field.commentTitle"))}'/>
  17   </div>
  18
  19   <input type="hidden" name="commentId" id="commentToEditId" value="0"/>
  20   <table width="100%" cellpadding="0" cellspacing="0" border="0" class="attribute">
  21         <tr valign="top">
  22           <td width="20" height="20" align="center">
  23             <img id="cancel_edit_comment_button" src="<s:url value="/skin/icon.undo.png"/>"
  24                 title="<s:text name="tooltip.cancel"/>" />
  25           </td>
  26           <td>
  27             <input type="text" name="commentTitle" id="commentToEditTitle">
  28             <script language='JavaScript'>
  29                 displayTextEditor('commentToEditValue', '', 650, 150);
  30                 enableRTEvalidation('commentToEditValue');
  31             </script>
  32           </td>
  33         </tr>
  34   </table>
  35 </form>
  36
  37 <script>
  38     $("#edit_comment_form").ajaxForm({
  39         target: '#display_comments_div',
  40         beforeSubmit: function(event) {
  41             //validation
  42                 var message = document.getElementById('commentToEditTiltleErrorMessage');
  43                 message.style.display = 'none';
  44                 field = document.getElementById('commentToEditTitle');
  45                 if(field.value != null && (field.value == "" || field.value.replace(/^\s+|\s+$/g,"").length == 0)) {
  46                 message.style.display = 'block';
  47                     return false;
  48                 } else {
  49                     hideEditCommentEditor();
  50                 }
  51             }
  52     });
  53
  54     var commentToEditId;
  55     function redrawEditor() {
  56         document.getElementById('edit_comment_form').style.top =
  57             $('#comment_'+commentToEditId+'_tbody').offset().top+'px';
  58     }
  59
  60     function editComment(commentId) {
  61         var comment = document.getElementById('comment_'+commentId+'_tbody');
  62         var editor = document.getElementById('edit_comment_form');
  63         editor.style.display = 'block';
  64
  65         document.getElementById('commentToEditId').value = commentId;
  66         document.getElementById('commentToEditTitle').value =
  67                 trim(document.getElementById('comment_'+commentId+'_title').innerHTML);
  68         document.getElementById('commentToEditValue').contentDocument.body.innerHTML =
  69                 trim(document.getElementById('comment_'+commentId+'_body').innerHTML);
  70
  71         commentToEditId = commentId;
  72         document.getElementById('commentToEditTitle').focus();
  73         redrawEditor();
  74         window.onresize = redrawEditor;
  75         $('.editCommentIcon').hide();
  76     }
  77
  78     function hideEditCommentEditor() {
  79         document.getElementById('edit_comment_form').style.display = 'none';
  80         $('.editCommentIcon').show();
  81     }
  82
  83     // Bind the cancel button
  84     $("#cancel_edit_comment_button").click(hideEditCommentEditor);
  85 </script>
  86
  87 <!-- remove comment functionality -->
  88 <form name="remove_comment_form" id="remove_comment_form" action="remove-comment" method="post">
  89     <input type="hidden" name="commentId" id="commentId" value="<s:property value="openStudy.index"/>"/>
  90 </form>
  91
  92 <script>
  93     function removeComment(commentId) {
  94         document.getElementById("commentId").value=commentId;
  95         $("#remove_comment_form").ajaxSubmit({
  96             target: '#display_comments_div'
  97         });
  98     }
  99 </script>
 100
 101 <!-- add comment functionality -->
 102 <s:if test="%{writeAccess == 'true' && stepEnabled == 'true'}">
 103         <script type="text/javascript">
 104             $(document).ready(function(event){
 105             $("#comments_form").ajaxForm({
 106                 target: '#display_comments_div',
 107                 beforeSubmit: function(event) {
 108                         //validation
 109                         var message = document.getElementById('commentToAddTiltleErrorMessage');
 110                         message.style.display = 'none';
 111                         field = document.getElementById('commentTitle');
 112                         if(field.value != null && (field.value == "" || field.value.replace(/^\s+|\s+$/g,"").length == 0)) {
 113                         message.style.display = 'block';
 114                             return false;
 115                         } else {
 116                             hideCommentEditor();
 117                         }
 118                     }
 119             });
 120
 121             function showCommentEditor() {
 122                 document.getElementById('commentTitle').value='';
 123                 document.getElementById(currentRTE).contentDocument.body.innerHTML='';
 124                 document.getElementById('add_comment_button_div').style.display = 'none';
 125                 document.getElementById('add_comment_div').style.display = 'block';
 126                 document.getElementById('commentTitle').focus();
 127                 document.getElementById('commentToAddTiltleErrorMessage').style.display = 'none';
 128                 $('.editCommentIcon').hide();
 129             }
 130
 131                 // Bind the add button
 132                     $("#add_comment_button").click(showCommentEditor);
 133
 134                     function hideCommentEditor() {
 135                   document.getElementById("add_comment_button_div").style.display = 'block';
 136                   document.getElementById("add_comment_div").style.display = 'none';
 137               $('.editCommentIcon').show();
 138                 }
 139
 140                     // Bind the cancel button
 141                     $("#cancel_add_comment_button").click(hideCommentEditor);
 142             });
 143         </script>
 144
 145         <div id="add_comment_button_div">
 146           <table width="100%" cellpadding="0" cellspacing="0" border="0" class="attribute">
 147             <tr>
 148               <td width="20" height="20" align="center">
 149                 <img id="add_comment_button" src="<s:url value="/skin/icon.add.png"/>" onMouseOver=this.src="<s:url value="/skin/icon.addhot.png"/>"
 150                     onMouseOut=this.src="<s:url value="/skin/icon.add.png"/>" title="<s:text name="tooltip.addcomment"/>"/>
 151                </td>
 152               <td>&nbsp;</td>
 153             </tr>
 154           </table>
 155         </div>
 156
 157   <div id="add_comment_div" style="display: none;">
 158         <div id="commentToAddTiltleErrorMessage" class="errorMessage" style="display: none" align="center">
 159           <s:property value='%{getText("message.error.noenteredvalue", "-", getText("field.commentTitle"))}'/>
 160         </div>
 161         <form name="comments_form" id="comments_form" action="create-stepComment" method="post">
 162           <table width="100%" cellpadding="0" cellspacing="0" border="0" class="attribute">
 163             <tr valign="top">
 164               <td width="20" height="20" align="center">
 165                 <img id="cancel_add_comment_button" src="<s:url value="/skin/icon.undo.png"/>"
 166                     title="<s:text name="tooltip.cancel"/>" />
 167               </td>
 168               <td>
 169             <input type="text" name="commentTitle" id="commentTitle">
 170                 <script language='JavaScript'>
 171                     displayTextEditor('commentValue', '', 650, 150);
 172                     enableRTEvalidation('commentValue');
 173                 </script>
 174               </td>
 175             </tr>
 176           </table>
 177         </form>
 178   </div>
 179 </s:if>