kjkmadness 2014-02-05
comment: display delete confirm layer
@442da50d3f3341bf364ab9b799b64fb54dc5eb59
app/views/board/view.scala.html
--- app/views/board/view.scala.html
+++ app/views/board/view.scala.html
@@ -89,7 +89,7 @@
                             <a href="#comment-@comment.id" class="ago">@utils.TemplateHelper.agoString(comment.ago())</a>
                             @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
                             <span class="edit pull-right">
-                                <button type="button" class="btn-transparent close" data-request-method="delete" data-request-uri="@routes.BoardApp.deleteComment(project.owner, project.name, post.getNumber, comment.id)"><i class="yobicon-trash"></i></button>
+                                <button type="button" class="btn-transparent close" data-toggle="comment-delete" data-request-uri="@routes.BoardApp.deleteComment(project.owner, project.name, post.getNumber, comment.id)"><i class="yobicon-trash"></i></button>
                             </span>
                             }
                         </div>
@@ -130,6 +130,7 @@
 </div>
 
 @common.markdown(project)
+@common.commentDeleteModal()
 
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/mentionjs/mention.css")">
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/mentionjs/mention.js")"></script>
app/views/code/diff.scala.html
--- app/views/code/diff.scala.html
+++ app/views/code/diff.scala.html
@@ -10,7 +10,7 @@
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
 <div class="page-wrap-outer">
     <div class="project-page-wrap">
-        <div class="code-browse-wrap">
+        <div id="code-browse-wrap" class="code-browse-wrap">
             <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
                 <button class="btn dropdown-toggle large" data-toggle="dropdown">
                     <span class="d-label">@selectedBranch</span>
@@ -99,7 +99,7 @@
                                 </span>
                                 @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
                                 <span class="edit pull-right">
-                                    <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
+                                    <button class="btn-transparent pull-right close" data-toggle="comment-delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
                                 </span>
                                 }
                             </div>
@@ -133,6 +133,7 @@
 </div>
 @common.markdown(project)
 @common.mergely()
+@common.commentDeleteModal("#code-browse-wrap")
 
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/mentionjs/mention.css")">
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/mentionjs/mention.js")"></script>
app/views/code/svnDiff.scala.html
--- app/views/code/svnDiff.scala.html
+++ app/views/code/svnDiff.scala.html
@@ -31,7 +31,7 @@
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
 <div class="page-wrap-outer">
     <div class="project-page-wrap">
-        <div class="code-browse-wrap">
+        <div id="code-browse-wrap" class="code-browse-wrap">
             <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
                 <button class="btn dropdown-toggle large" data-toggle="dropdown">
                     <span class="d-label">@if(selectedBranch){ @selectedBranch } else { HEAD }</span>
@@ -132,7 +132,7 @@
                                 </span>
                                 @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
                                 <span class="edit pull-right">
-                                    <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
+                                    <button class="btn-transparent pull-right close" data-toggle="comment-delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
                                 </span>
                                 }
                             </div>
@@ -164,6 +164,7 @@
     </div>
 </div>
 @common.markdown(project)
+@common.commentDeleteModal("#code-browse-wrap")
 
 <script type="text/x-jquery-tmpl" id="comment-icon-template">
     <i class="yobicon-comments"></i>
 
app/views/common/commentDeleteModal.scala.html (added)
+++ app/views/common/commentDeleteModal.scala.html
@@ -0,0 +1,38 @@
+@**
+* Yobi, Project Hosting SW
+*
+* Copyright 2013 NAVER Corp.
+* http://yobi.io
+*
+* @Author kjkmadness
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+**@
+@(commentsContainer: String = "#comments")
+<div id="comment-delete-modal" class="modal hide fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal">×</button>
+    <h3>@Messages("common.comment.delete")</h3>
+  </div>
+  <div class="modal-body">
+    <p>@Messages("common.comment.delete.confirm")</p>
+  </div>
+  <div class="modal-footer">
+    <button id="comment-delete-confirm" type="button" class="ybtn ybtn-danger">@Messages("button.yes")</button>
+    <button type="button" class="ybtn" data-dismiss="modal">@Messages("button.no")</button>
+  </div>
+</div>
+<script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.Comment.js")"></script>
+<script type="text/javascript">
+    yobi.Comment.init({'sContainer' : '@commentsContainer'});
+</script>
app/views/git/diff.scala.html
--- app/views/git/diff.scala.html
+++ app/views/git/diff.scala.html
@@ -30,7 +30,7 @@
 @projectLayout(Messages("menu.pullRequest"), pull.toProject, utils.MenuType.PULL_REQUEST) {
 <div class="page-wrap-outer">
     <div class="project-page-wrap">
-        <div class="code-browse-wrap">
+        <div id="code-browse-wrap" class="code-browse-wrap">
             <div class="actrow">
                 <a href="@routes.PullRequestApp.pullRequestCommits(pull.toProject.owner, pull.toProject.name, pull.number)" class="ybtn">
                     <i class="yobicon-arrow-right"></i> @Messages("pullRequest.back.to.the.pullrequest")
@@ -79,52 +79,52 @@
             <div class="diff-body">
             @views.html.partial_diff(diff, comments, pull.fromProject, pull.toProject)
             </div>
-        </div>
 
-        @** Comment **@
-        <div class="board-comment-wrap">
-            @defining(comments.filter(v => v.line == null)) { comments =>
-            @if(comments.size > 0) {
-            <ul class="comments">
-                @for(comment <- comments){
-                <li id="comment-@comment.id" data-path="@comment.path" data-side="@comment.side" data-line="@comment.line" class="comment">
-                    <div class="comment-avatar">
-                        <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                            <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
-                        </a>
-                    </div>
-                    <div class="media-body">
-                        <div class="meta-info">
-                            <span class="comment_author pull-left">
-                                <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                                    <strong>@comment.authorLoginId </strong>
-                                </a>
-                            </span>
-                            <span class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">
-                                <a href="#comment-@comment.id">
-                                    @agoString(JodaDateUtil.ago(comment.createdDate))
-                                </a>
-                            </span>
-                            @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
-                            <span class="edit pull-right">
-                                <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(pull.fromProject.owner, pull.fromProject.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
-                            </span>
-                            }
+            @** Comment **@
+            <div class="board-comment-wrap">
+                @defining(comments.filter(v => v.line == null)) { comments =>
+                @if(comments.size > 0) {
+                <ul class="comments">
+                    @for(comment <- comments){
+                    <li id="comment-@comment.id" data-path="@comment.path" data-side="@comment.side" data-line="@comment.line" class="comment">
+                        <div class="comment-avatar">
+                            <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                                <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
+                            </a>
                         </div>
+                        <div class="media-body">
+                            <div class="meta-info">
+                                <span class="comment_author pull-left">
+                                    <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                                        <strong>@comment.authorLoginId </strong>
+                                    </a>
+                                </span>
+                                <span class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">
+                                    <a href="#comment-@comment.id">
+                                        @agoString(JodaDateUtil.ago(comment.createdDate))
+                                    </a>
+                                </span>
+                                @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
+                                <span class="edit pull-right">
+                                    <button class="btn-transparent pull-right close" data-toggle="comment-delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(pull.fromProject.owner, pull.fromProject.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
+                                </span>
+                                }
+                            </div>
 
-                        <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
+                            <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
 
-                        <div class="attachments" data-resourceType="@ResourceType.COMMIT_COMMENT" data-resourceId="@comment.id"></div>
-                    </div>
-                </li>
+                            <div class="attachments" data-resourceType="@ResourceType.COMMIT_COMMENT" data-resourceId="@comment.id"></div>
+                        </div>
+                    </li>
+                    }
+                </ul>
                 }
-            </ul>
-            }
-            }
+                }
 
-            @common.commentForm(pull.fromProject, ResourceType.COMMIT_COMMENT, routes.CodeHistoryApp.newComment(pull.fromProject.owner, pull.fromProject.name, commit.getId).toString())
+                @common.commentForm(pull.fromProject, ResourceType.COMMIT_COMMENT, routes.CodeHistoryApp.newComment(pull.fromProject.owner, pull.fromProject.name, commit.getId).toString())
+            </div>
+            @** // Comment **@
         </div>
-        @** // Comment **@
 
         <div id="minimap" class="minimap-outer">
             <div class="minimap-wrap">
@@ -136,6 +136,7 @@
 </div>
 @common.markdown(pull.fromProject)
 @common.mergely()
+@common.commentDeleteModal("#code-browse-wrap")
 
 <script type="text/x-jquery-tmpl" id="comment-icon-template">
     <i class="yobicon-comments"></i>
app/views/git/partial_commit_comment.scala.html
--- app/views/git/partial_commit_comment.scala.html
+++ app/views/git/partial_commit_comment.scala.html
@@ -52,7 +52,7 @@
                   </span>
                   @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
                   <span class="edit pull-right">
-                      <button type="button" class="btn-transparent close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(pull.fromProject.owner, pull.fromProject.name, comment.commitId, comment.id)"><i class="yobicon-trash"></i></button>
+                      <button type="button" class="btn-transparent close" data-toggle="comment-delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(pull.fromProject.owner, pull.fromProject.name, comment.commitId, comment.id)"><i class="yobicon-trash"></i></button>
                   </span>
                   }
               </div>
@@ -80,7 +80,7 @@
                   </span>
                   @if(isAllowed(UserApp.currentUser(), reply.asResource(), Operation.DELETE)){
                   <span class="edit pull-right">
-                      <button type="button" class="btn-transparent close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(pull.fromProject.owner, pull.fromProject.name, reply.commitId, reply.id)"><i class="yobicon-trash"></i></button>
+                      <button type="button" class="btn-transparent close" data-toggle="comment-delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(pull.fromProject.owner, pull.fromProject.name, reply.commitId, reply.id)"><i class="yobicon-trash"></i></button>
                   </span>
                   }
               </div>
app/views/git/partial_pull_request_comment.scala.html
--- app/views/git/partial_pull_request_comment.scala.html
+++ app/views/git/partial_pull_request_comment.scala.html
@@ -60,7 +60,7 @@
 
             @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE) && !isLineComment(comment)){
             <span class="edit pull-right">
-                <button type="button" class="btn-transparent close" data-request-method="delete" data-request-uri="@routes.PullRequestCommentApp.deleteComment(comment.id)"><i class="yobicon-trash"></i></button>
+                <button type="button" class="btn-transparent close" data-toggle="comment-delete" data-request-uri="@routes.PullRequestCommentApp.deleteComment(comment.id)"><i class="yobicon-trash"></i></button>
             </span>
             }
         </div>
app/views/git/view.scala.html
--- app/views/git/view.scala.html
+++ app/views/git/view.scala.html
@@ -100,6 +100,7 @@
 </div>
 @common.markdown(project)
 @common.mergely()
+@common.commentDeleteModal()
 
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/mergely/codemirror.css")">
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/mergely/mergely.css")">
app/views/git/viewChanges.scala.html
--- app/views/git/viewChanges.scala.html
+++ app/views/git/viewChanges.scala.html
@@ -42,6 +42,7 @@
 </div>
 @common.markdown(project)
 @common.mergely()
+@common.commentDeleteModal("#__changes")
 
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/mentionjs/mention.css")">
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/mentionjs/mention.js")"></script>
app/views/issue/partial_comments.scala.html
--- app/views/issue/partial_comments.scala.html
+++ app/views/issue/partial_comments.scala.html
@@ -87,7 +87,7 @@
                 <a href="#comment-@comment.id" class="ago">@utils.TemplateHelper.agoString(comment.ago())</a>
                 @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
                 <span class="edit pull-right">
-                    <button type="button" class="btn-transparent close" data-request-method="delete" data-request-uri="@routes.IssueApp.deleteComment(project.owner, project.name, issue.getNumber, comment.id)"><i class="yobicon-trash"></i></button>
+                    <button type="button" class="btn-transparent close" data-toggle="comment-delete" data-request-uri="@routes.IssueApp.deleteComment(project.owner, project.name, issue.getNumber, comment.id)"><i class="yobicon-trash"></i></button>
                 </span>
                 }
             </div>
app/views/issue/view.scala.html
--- app/views/issue/view.scala.html
+++ app/views/issue/view.scala.html
@@ -264,6 +264,7 @@
 </div>
 @common.markdown(project)
 @common.issueLabel()
+@common.commentDeleteModal()
 
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/mentionjs/mention.css")">
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/mentionjs/mention.js")"></script>
app/views/partial_diff_comment_on_line.scala.html
--- app/views/partial_diff_comment_on_line.scala.html
+++ app/views/partial_diff_comment_on_line.scala.html
@@ -24,7 +24,7 @@
                         <span class="ago"><a href="#comment-@comment.id">@utils.TemplateHelper.agoString(utils.JodaDateUtil.ago(comment.createdDate))</a></span>
                         @if(utils.AccessControl.isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
                         <span class="edit pull-right">
-                            <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CommentApp.delete(comment.asResource.getType.resource, comment.asResource.getId)"><i class="yobicon-trash"></i></button>
+                            <button class="btn-transparent pull-right close" data-toggle="comment-delete" data-request-uri="@routes.CommentApp.delete(comment.asResource.getType.resource, comment.asResource.getId)"><i class="yobicon-trash"></i></button>
                         </span>
                         }
                     </div>
conf/messages
--- conf/messages
+++ conf/messages
@@ -119,6 +119,8 @@
 common.attach.dropFilesHere = Drop files here
 common.attachment= Attachment
 common.comment = Comment
+common.comment.delete = Delete Comment
+common.comment.delete.confirm = If this is deleted, then it cannot be recovered. Is it okay and go through?
 common.experimental = Experimental
 common.experimental.description = It means that can be changed or interrupted at any time.<br>Appreciate for your generosity.
 common.experimental.title = Experimental: this feature is on development.
conf/messages.ko
--- conf/messages.ko
+++ conf/messages.ko
@@ -119,6 +119,8 @@
 common.attach.dropFilesHere = 여기에 파일을 끌어다 놓으면 업로드 됩니다
 common.attachment = 첨부파일
 common.comment = 댓글
+common.comment.delete = 댓글 삭제
+common.comment.delete.confirm = 해당 댓글이 삭제되면 영원히 복구할 수 없습니다. 그래도 삭제하시겠습니까?
 common.experimental = 실험적인 기능
 common.experimental.description = 이 기능은 아직 개발 진행 중으로 언제든지 변경되거나 개발 중단될 수 있습니다.<br>너그러운 마음으로 응원해주세요.
 common.experimental.title = 실험적인 기능: 새롭게 개발 중인 기능을 선보입니다
 
public/javascripts/common/yobi.Comment.js (added)
+++ public/javascripts/common/yobi.Comment.js
@@ -0,0 +1,63 @@
+/**
+ * Yobi, Project Hosting SW
+ *
+ * Copyright 2013 NAVER Corp.
+ * http://yobi.io
+ *
+ * @Author kjkmadness
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+yobi.Comment = (function(){
+    var htElement = {};
+
+    /**
+     * initialize
+     * @param {Hash Table} htOptions
+     */
+    function _init(htOptions){
+        _initElement(htOptions || {});
+        _attachEvent();
+    }
+
+    /**
+     * initialize element variables
+     */
+    function _initElement(htOptions) {
+        htElement.welContainer = $(htOptions.sContainer || '#comments');
+        htElement.welDeleteModal = $(htOptions.sDeleteModal || '#comment-delete-modal');
+        htElement.welDeleteConfirmBtn = $(htOptions.sDeleteConfirm || '#comment-delete-confirm');
+    }
+
+    /**
+     * attach event handler
+     */
+    function _attachEvent() {
+        htElement.welContainer.on('click', '[data-toggle="comment-delete"]', _openDeleteModal);
+    }
+
+    /**
+     * open delete modal
+     */
+    function _openDeleteModal() {
+        htElement.welDeleteConfirmBtn
+            .data('requestUri', $(this).data('requestUri'))
+            .data('requestMethod', 'delete')
+            .requestAs();
+        htElement.welDeleteModal.modal();
+    }
+
+    return {
+        "init"  : _init,
+    };
+})();
Add a comment
List