comment_paragraph: improve range selection

Victor Costa
1 parent 1f1e5210
Showing 2 changed files with 21 additions and 15 deletions Show diff stats
plugins/comment_paragraph/public/comment_paragraph_macro.js
plugins/comment_paragraph/public/style.css
-var comment_paragraph_anchor;
-
 jQuery(document).ready(function($) {
   //Quit if does not detect a comment for that plugin
   if($('.comment_paragraph').size() < 1)
@@ -31,6 +29,8 @@ jQuery(document).ready(function($) {
   $('body').click(function(event){
     if ($(event.target).closest('.comment-paragraph-plugin, #comment-bubble').length === 0) {
       hideCommentBox();
+      $('#comment-bubble').removeClass('visible');
+      hideAllSelectedAreasExcept();
     }
   });
@@ -60,14 +60,14 @@ jQuery(document).ready(function($) {
     var paragraphId = container.data('paragraph');
     hideAllSelectedAreasExcept(paragraphId);
     hideCommentBox();
+    $('#comment-bubble').removeClass('visible');
     container.addClass('comment-paragraph-slide-left selected');
     container.find('.side-comment').show();
-    $('#comment-bubble').removeClass('visible');
     //Loads the comments
     var url = container.find('.side-comment').data('comment_paragraph_url');
     $.ajax(url).done(function(data) {
       container.find('.article-comments-list').html(data);
-      if(container.find('.article-comment').length==0) {
+      if(container.find('.article-comment').length==0 || container.find('.selected_area').length) {
         container.find('.post_comment_box a.display-comment-form').click();
       } else {
         container.find('.post_comment_box').removeClass('opened');
@@ -75,6 +75,13 @@ jQuery(document).ready(function($) {
         container.find('.display-comment-form').show();
       }
     });
+
+    //set a one time handler to prevent multiple selections
+    var fn = function() {
+      hideAllSelectedAreasExcept();
+      $('.comment-paragraph-plugin').off('mousedown', '.comment_paragraph', fn);
+    }
+    $('.comment-paragraph-plugin').on('mousedown', '.comment_paragraph', fn);
   });
@@ -153,7 +160,6 @@ jQuery(document).ready(function($) {
     }
     //Register the content being selected at input.comment_paragraph_selected_content
     var selected_content = getSelectionText();
-    if(selected_content.length > 0)
     if (form.find('input.selected_content').length === 0){
       $('<input>').attr({
         class: 'selected_content',
@@ -165,6 +171,7 @@ jQuery(document).ready(function($) {
       form.find('input.selected_content').val(selected_content)
     }
     rootElement.focus();
+    cssApplier.toggleSelection();
   });
   function processAnchor(){
@@ -175,7 +182,6 @@ jQuery(document).ready(function($) {
     if($('.comment-paragraph-plugin').length==0) return;
     var comment_id = val[1];
     if(!/^\d+$/.test(comment_id)) return; //test for integer
-    comment_paragraph_anchor = anchor;
     var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;
     $.ajax(url).done(function(data) {
@@ -54,15 +54,15 @@ div.article-comments-list-more{
   padding:15px;
   margin:1em 0 3em;
   color:#fff;
-  background:#075698; /* default background for browsers without gradient support */
+  background:#717171; /* default background for browsers without gradient support */
   /* css3 */
-  background:-webkit-gradient(linear, 0 0, 0 100%, from(#ababab), to(#424242));
-  background:-moz-linear-gradient(#ABABAB, #424242);
-  background:-o-linear-gradient(#ABABAB, #424242);
-  background: linear-gradient(#ABABAB, #424242);
-  -webkit-border-radius:10px;
-  -moz-border-radius:10px;
-  border-radius:10px;
+  background:-webkit-gradient(linear, 0 0, 0 100%, from(#717171), to(#1F1F1F));
+  background:-moz-linear-gradient(#717171, #1F1F1F);
+  background:-o-linear-gradient(#717171, #1F1F1F);
+  background: linear-gradient(#717171, #1F1F1F);
+  -webkit-border-radius:8px;
+  -moz-border-radius:8px;
+  border-radius:8px;
   font-weight: bold;
 }
@@ -73,7 +73,7 @@ div.article-comments-list-more{
   left: 50px;
   border-width: 20px 0 0 20px;
   border-style: solid;
-  border-color: #424242 transparent;
+  border-color: #1F1F1F transparent;
   display: block;
   width: 0;
 }