Download as
Browse Code »

Commit 458136409ea69ea5ff8a16ade0e29eab2f722343

Authored by Victor Costa
1 parent 7fd79948
Exists in theme-brasil-digital-from-staging and in 9 other branches angular_poc, api-article-archived, backup-7-jan-2016, captcha_serpro_plugin, login-captcha, production, resend_confirmation_email, staging, staging_rails3

comment_paragraph: fix range selection

Showing 2 changed files with 40 additions and 7 deletions   Show diff stats
plugins/comment_paragraph/public/comment_paragraph_macro.js
  Diff comments   View file @4581364
... ... @@ -49,6 +49,8 @@ jQuery(document).ready(function($) {
49 49  
50 50 rangy.init();
51 51 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
  52 + cssApplierSelected = rangy.createCssClassApplier("commented-area-selected", {normalize: false});
  53 +
52 54 //Add marked text bubble
53 55 $("body").append('\
54 56 <a id="comment-bubble">\
... ... @@ -83,11 +85,14 @@ jQuery(document).ready(function($) {
83 85 $('#comment-paragraph-plugin_' + paragraph).find('.side-comments-counter').click();
84 86 });
85 87  
86   - function hideAllSelectedAreasExcept(clickedParagraph){
  88 + function hideAllSelectedAreasExcept(clickedParagraph, areaClass) {
  89 + if(!areaClass) {
  90 + areaClass = '.commented-area';
  91 + }
87 92 $(".comment_paragraph").each(function(){
88 93 paragraph = $(this).closest('.comment-paragraph-plugin').data('paragraph');
89 94 if(paragraph != clickedParagraph){
90   - $(this).find(".commented-area").contents().unwrap();
  95 + $(this).find(areaClass).contents().unwrap();
91 96 $(this).html($(this).html()); //XXX: workaround to prevent creation of text nodes
92 97 }
93 98 });
... ... @@ -103,6 +108,14 @@ jQuery(document).ready(function($) {
103 108 return text;
104 109 }
105 110  
  111 + function clearSelection() {
  112 + if ( document.selection ) {
  113 + document.selection.empty();
  114 + } else if ( window.getSelection ) {
  115 + window.getSelection().removeAllRanges();
  116 + }
  117 + }
  118 +
106 119 function setCommentBubblePosition(posX, posY) {
107 120 $("#comment-bubble").css({
108 121 top: (posY - 80),
... ... @@ -164,10 +177,12 @@ jQuery(document).ready(function($) {
164 177 form.find('input.selected_content').val(selected_content)
165 178 }
166 179 rootElement.focus();
167   - cssApplier.toggleSelection();
  180 + cssApplierSelected.toggleSelection();
  181 + clearSelection();
  182 +
168 183 //set a one time handler to prevent multiple selections
169 184 var fn = function() {
170   - hideAllSelectedAreasExcept();
  185 + hideAllSelectedAreasExcept(null, '.commented-area-selected');
171 186 $('.comment-paragraph-plugin').off('mousedown', '.comment_paragraph', fn);
172 187 }
173 188 $('.comment-paragraph-plugin').on('mousedown', '.comment_paragraph', fn);
... ... @@ -193,6 +208,7 @@ jQuery(document).ready(function($) {
193 208 processAnchor();
194 209  
195 210 $(document).on('mouseenter', 'li.article-comment', function() {
  211 + hideAllSelectedAreasExcept(null, '.commented-area-selected');
196 212 var selected_area = $(this).find('input.paragraph_comment_area').val();
197 213 var container = $(this).closest('.comment-paragraph-plugin');
198 214 var rootElement = container.find('.comment_paragraph')[0];
... ... @@ -205,5 +221,14 @@ jQuery(document).ready(function($) {
205 221  
206 222 $(document).on('mouseleave', 'li.article-comment', function() {
207 223 hideAllSelectedAreasExcept();
  224 +
  225 + var container = $(this).closest('.comment-paragraph-plugin');
  226 + var selected_area = container.find('input.selected_area').val();
  227 + var rootElement = container.find('.comment_paragraph')[0];
  228 + if(selected_area != ""){
  229 + rangy.deserializeSelection(selected_area, rootElement);
  230 + cssApplierSelected.toggleSelection();
  231 + }
  232 + clearSelection();
208 233 });
209 234 });
... ...
plugins/comment_paragraph/public/style.css
  Diff comments   View file @4581364
... ... @@ -32,16 +32,24 @@ div.article-comments-list-more{
32 32 font-weight: bold;
33 33 }
34 34  
35   -.commented-area {
  35 +.comment-paragraph-plugin .commented-area {
36 36 background-color: lightseagreen;
  37 + color: white;
  38 +}
  39 +
  40 +.comment-paragraph-plugin .commented-area-selected {
  41 + background-color: rgb(255, 86, 86);
  42 + color: white;
37 43 }
38 44  
39 45 .comment_paragraph ::selection {
40   - background: lightseagreen; /* WebKit/Blink Browsers */
  46 + background-color: lightseagreen; /* WebKit/Blink Browsers */
  47 + color: white;
41 48 }
42 49  
43 50 .comment_paragraph ::-moz-selection {
44   - background: lightseagreen; /* Gecko Browsers */
  51 + background-color: lightseagreen; /* Gecko Browsers */
  52 + color: white;
45 53 }
46 54  
47 55 .comment_paragraph{
... ...