Show description: pen is displayed near the description text;

[tools/siman.git] / Workspace / Siman / WebContent / jsp / commentPane.jsp

diff --git a/Workspace/Siman/WebContent/jsp/commentPane.jsp b/Workspace/Siman/WebContent/jsp/commentPane.jsp
index 2f16c623a9962a395301d0d1c71a9adbb8ee90be..b3360b4f79ec02ff23e9b7b822a2fcdcdbcba971 100644 (file)
--- a/Workspace/Siman/WebContent/jsp/commentPane.jsp
+++ b/Workspace/Siman/WebContent/jsp/commentPane.jsp
@@ -4,55 +4,133 @@
 <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
 
 <div id="display_comments_div">
-  <tiles:insertAttribute name="display_comments_pane" ignore="true" />
+    <s:action name="display-comments" namespace="/study" executeResult="true" />
 </div>
 
+
+<!-- edit comment functionality -->
+<form name="edit_comment_form" id="edit_comment_form" action="edit-comment" method="post"
+    style="display: none; position: absolute; background: white;">
+  <input type="hidden" name="commentId" id="commentToEditId" value="0"/>
+  <table width="100%" cellpadding="0" cellspacing="0" border="0" class="attribute">
+        <tr valign="top">
+          <td width="20" height="20" align="center">
+            <img id="cancel_edit_comment_button" src="<s:url value="/skin/icon.undo.png"/>"
+                title="<s:text name="tooltip.cancel"/>" />
+          </td>
+          <td>
+            <input type="text" name="commentTitle" id="commentToEditTitle">
+            <script language='JavaScript'>
+                displayTextEditor('commentToEditValue', '', 650, 150);
+            </script>   
+          </td>
+        </tr>
+  </table> 
+</form>
+
+<script>
+    $("#edit_comment_form").ajaxForm({
+        target: '#display_comments_div'
+    });
+    
+    var commentToEditId;
+    function redrawEditor() {
+        document.getElementById('edit_comment_form').style.top = 
+            $('#comment_'+commentToEditId+'_tbody').offset().top+'px';
+    }
+
+    function editComment(commentId) {
+        var comment = document.getElementById('comment_'+commentId+'_tbody');
+        var editor = document.getElementById('edit_comment_form');
+        editor.style.display = 'block';
+        
+        document.getElementById('commentToEditId').value = commentId;
+        document.getElementById('commentToEditTitle').value = 
+                trim(document.getElementById('comment_'+commentId+'_title').innerHTML);
+        document.getElementById('commentToEditValue').contentDocument.body.innerHTML = 
+                trim(document.getElementById('comment_'+commentId+'_body').innerHTML);
+
+        commentToEditId = commentId;
+        document.getElementById('commentToEditTitle').focus();
+        redrawEditor();
+        window.onresize = redrawEditor;
+    }
+
+    function hideEditCommentEditor() {
+        document.getElementById('edit_comment_form').style.display = 'none';
+    }
+    
+    // Bind the cancel button
+    $("#cancel_edit_comment_button").click(hideEditCommentEditor);
+    
+    // Bind the submit event
+    $('#edit_comment_form').on('submit', hideEditCommentEditor);
+</script>
+
+<!-- remove comment functionality -->
+<form name="remove_comment_form" id="remove_comment_form" action="remove-comment" method="post">
+    <input type="hidden" name="commentId" id="commentId" value="<s:property value="openStudy.index"/>"/>
+</form>
+
+<script>
+    function removeComment(commentId) {
+        document.getElementById("commentId").value=commentId;
+        $("#remove_comment_form").ajaxSubmit({
+                   target: '#display_comments_div'
+              });
+    }
+</script>
+
+<!-- add comment functionality -->
 <s:if test="%{writeAccess == 'true' && stepEnabled == 'true'}">
        <script type="text/javascript">
            $(document).ready(function(){
                $("#comments_form").ajaxForm({
                    target: '#display_comments_div'
                });
+               
+            function showCommentEditor() {
+                document.getElementById('commentTitle').value='';
+                document.getElementById(currentRTE).contentDocument.body.innerHTML='';
+                document.getElementById('add_comment_button_div').style.display = 'none';
+                document.getElementById('add_comment_div').style.display = 'block';
+                document.getElementById('commentTitle').focus();
+            }
            
                // Bind the add button
-                   $("#add_button").click(function() {
-                     document.getElementById("add_button_div").style.display = 'none';
-                     document.getElementById("add_comments_div").style.display = 'block';
-                   });
+                   $("#add_comment_button").click(showCommentEditor);
                    
-                   function hideEditor() {
-                 document.getElementById("add_button_div").style.display = 'block';
-                 document.getElementById("add_comments_div").style.display = 'none';
-                 document.getElementById(currentRTE).contentDocument.body.innerHTML='';    //clean input area
-                 document.getElementById("commentTitle").value='';
+                   function hideCommentEditor() {
+                 document.getElementById("add_comment_button_div").style.display = 'block';
+                 document.getElementById("add_comment_div").style.display = 'none';
                }
                    
                    // Bind the cancel button
-                   $("#cancel_button").click(hideEditor);
+                   $("#cancel_add_comment_button").click(hideCommentEditor);
                    
-                   // Bind the submit button
-               $('#comments_form').on('submit', hideEditor);
+                   // Bind the submit event
+               $('#comments_form').on('submit', hideCommentEditor);
            });
        </script>
        
-       <div id="add_button_div">
+       <div id="add_comment_button_div">
          <table width="100%" cellpadding="0" cellspacing="0" border="0" class="attribute">
            <tr>
              <td width="20" height="20" align="center">
-               <img id="add_button" src="<s:url value="/skin/icon.add.png"/>" onMouseOver=this.src="<s:url value="/skin/icon.addhot.png"/>"
+               <img id="add_comment_button" src="<s:url value="/skin/icon.add.png"/>" onMouseOver=this.src="<s:url value="/skin/icon.addhot.png"/>"
                    onMouseOut=this.src="<s:url value="/skin/icon.add.png"/>" title="<s:text name="tooltip.addcomment"/>"/>
               </td>
              <td>&nbsp;</td>
            </tr>
-         </table>  
+         </table>
        </div>
        
-       <div id="add_comments_div" style="display: none;">
+       <div id="add_comment_div" style="display: none;">
        <form name="comments_form" id="comments_form" action="create-stepComment" method="post">
          <table width="100%" cellpadding="0" cellspacing="0" border="0" class="attribute">
            <tr valign="top">
              <td width="20" height="20" align="center">
-               <img id="cancel_button" src="<s:url value="/skin/icon.undo.png"/>"
+               <img id="cancel_add_comment_button" src="<s:url value="/skin/icon.undo.png"/>"
                    title="<s:text name="tooltip.cancel"/>" />
              </td>
              <td>