Download as
Browse Code »

Commit 6675af8444339d160c9fb2b0d72ba417a4ee1782

Authored by Evandro Jr
1 parent acab5320
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

major changes in progress

Showing 3 changed files with 187 additions and 190 deletions   Show diff stats
plugins/comment_paragraph/public/comment_paragraph_macro.js
  Diff comments   View file @6675af8
... ... @@ -10,93 +10,48 @@ function getIdCommentParagraph(paragraphId){
10 10 return paragraphId.substring(idx+1, paragraphId.length);
11 11 }
12 12  
13   -function teleportToBody(element){
14   - var $ = jQuery;
15   - element.detach();
16   - $('body').append(element);
17   -}
18   -
19   -function moveCommentsToTheSide(paragraphId, mouseX, mouseY){
20   - var $ = jQuery;
21   - //var element = sideCommentForm;
22   - //element.detach();
23   - //if ( $('body #side_comment_form').size === 0){
24   -// $('body').append(element);
25   -// }
26   - //element.css({top: 0, border-right: 20, position:'absolute'});
27   -}
  13 +jQuery(document).ready(function($) {
  14 + $('.display-comment-form').unbind();
  15 + $('.display-comment-form').click(function(){
  16 + var $button = $(this);
  17 + showBox($button.parents('.post_comment_box'));
  18 + $($button).hide();
  19 + $button.closest('.page-comment-form').find('input').first().focus();
  20 + return false;
  21 + });
28 22  
29   -//function buildSideCommentBlock(){
30   -// var $ = jQuery;
31   -// $("body").append('\
32   -// <div align="left" id="side_comments_box" class="side-comments-box">\n\
33   -// [side comments collumn]<BR>\n\
34   -// [side comments collumn]<BR>\n\
35   -// </div>\n\
36   -// ');
37   -// //Detects if there is any comment paragraph
38   -//
39   -// // var button = jQuery('#page-comment-form-' + paragraphId + ' a')[0];
40   -//}
  23 + $('#cancel-comment').die();
  24 + $('#cancel-comment').live("click", function(){
  25 + var $button = $(this);
  26 + showBox($button.parents('.post_comment_box'));
  27 + show_display_comment_button();
  28 + var page_comment_form = $button.parents('.page-comment-form');
  29 + page_comment_form.find('.errorExplanation').remove();
  30 + $(this).closest("textarea[name^='comment'").text("");
  31 + $(this).closest("div[class^='side-comment']").hide();
  32 + return false;
  33 + });
41 34  
42   -function buildSideCommentBox(id, commentCount ){
43   - var $ = jQuery;
44   - //Search to top of the respective paragraph
45   - var top = $('#comment_paragraph_' + id).offset().top;
46   - var right = $('#comment_paragraph_' + id).offset().left + $('#comment_paragraph_' + id).width() + 20;
  35 + function showBox(div){
  36 + if(div.hasClass('closed')) {
  37 + div.removeClass('closed');
  38 + div.addClass('opened');
  39 + }
  40 + }
  41 +
47 42  
48   - var boxComments="\n\
49   - <div class='side-comments-counter'\n\
50   - id='side_comment_counter_" + id + "' style='top: " + top + "px; left: " + (right - 20) + "px;' >+</div> \n\
51   - </div>";
52   - //<div class='side-comments-box' id='side_comment_box_" + id + "' style='top: " + top + "px; left: " + right + "px;' ></div>";
53   - return boxComments;
54   -}
55   -
56   -function putSideComments(){
57   - var $ = jQuery;
58   -
59   - $(".comment-count").each(function(index){
60   - //Include all comments except the last
61   - var idElement = $(this).attr('id');
62   - if(idElement != undefined ){
63   - var n = idElement.lastIndexOf('-');
64   - var id_number = idElement.substr(n + 1, idElement.length - n +1);
65   - firstTimeOpenParagraph[id_number] = true;
66   - commentParagraphIds.push(id_number);
67   - var commentCount = $(this).text().trim();
68   - commentCount = parseInt(commentCount);
69   - var box = buildSideCommentBox(id_number, commentCount);
70   - $('body').append(box);
71   - if(commentCount > 0){
72   - $('#side_comment_counter_' + id_number).text(commentCount);
73   -// $('#side_comment_counter_' + id_number).show();
74   - }
75   - $('#side_comment_counter_' + id_number).show();
76   - }
77   - });
78   -}
79   -
80   -
81   -
82   -jQuery(document).ready(function($) {
83 43 //Hides old style ballons
84 44 $("img[alt|=Comments]").hide();
85   - //Hides old style counter
86   - $(".comment-count").hide();
87   -
88 45 rangy.init();
89 46 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
90   -
91 47 //Add marked text bubble
92 48 $("body").append('\
93   - <a href="#" id="comment-bubble" style="width:120px;text-decoration: none">\
  49 + <a id="comment-bubble" style="width:120px;text-decoration: none">\
94 50 <div align="center" class="triangle-right" >Comentar<br>+</div>\
95 51 </a>');
96   - //buildSideCommentBlock();
97   - //
  52 +
98 53 //Creates a side bubble for each paragraph with the amount of comments
99   - putSideComments();
  54 + //putSideComments();
100 55  
101 56 $('.comment_paragraph').mouseover(function(){
102 57 var paragraphId = getIdCommentParagraph($(this)[0].id);
... ... @@ -112,43 +67,61 @@ jQuery(document).ready(function($) {
112 67  
113 68 $('.side-comments-counter').click(function(){
114 69 hideAllComments();
115   - var paragraphId = getIdCommentParagraph($(this).attr('id'));
116   - $('#side_comment_box_' + paragraphId).toggle();
  70 + var paragraphId = $(this).data('paragraph')
  71 + $('#side_comment_' + paragraphId).show();
  72 + $('#comments_list_toggle_paragraph_' + paragraphId).show();
  73 + console.log(paragraphId);
117 74 //Loads the comments
118 75 var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
119   - $('.comments_list_toggle_paragraph_' + paragraphId).show();
120   - if(firstTimeOpenParagraph[paragraphId]===true ){
121   - firstTimeOpenParagraph[paragraphId]=false;
122   - $.ajax({
123   - dataType: "script",
124   - url: url
125   - }).done(function() {
126   - var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
127   - button.click();
128   - //teleportToBody($('.comments_list_toggle_paragraph_' + paragraphId));
129   - var top = $('#comment_paragraph_' + paragraphId).offset().top;
130   - var right = $('#comment_paragraph_' + paragraphId).offset().left + $('#comment_paragraph_' + paragraphId).width();
131   - top += -120;
132   - right+= -500;
133   - $('.comments_list_toggle_paragraph_' + paragraphId).css('position','absolute');
134   - $('.comments_list_toggle_paragraph_' + paragraphId).css('top',top);
135   - $('.comments_list_toggle_paragraph_' + paragraphId).css('left',right);
136   - $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
137   - $('label[for|=comment_title]').hide();
138   - $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
139   - $('.comment_form p').hide();
140   - $('.comments_list_toggle_paragraph_' + paragraphId).width('250px');
141   - });
142   - }
  76 + firstTimeOpenParagraph[paragraphId]=false;
  77 + $.ajax({
  78 + dataType: "script",
  79 + url: url
  80 + }).done(function() {
  81 + var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
  82 + button.click();
  83 + alignSideComments(paragraphId);
  84 + });
143 85 });
144   -
  86 +
  87 +
  88 + $('#comment-bubble').click(function(event){
  89 + this.hide();
  90 + hideAllComments();
  91 + $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
  92 + var url = $("#comment-bubble").data('url');
  93 + var paragraphId = $("#comment-bubble").data("paragraphId");
  94 + $('#side_comment_' + paragraphId).show();
  95 + $.ajax({
  96 + dataType: "script",
  97 + url: url
  98 + }).done(function() {
  99 + var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
  100 + button.click();
  101 + alignSideComments(paragraphId);
  102 + });
  103 + });
  104 +
  105 + function alignSideComments(paragraphId){
  106 +// var top = $('#comment_paragraph_' + paragraphId).offset().top;
  107 +// var right = $('#comment_paragraph_' + paragraphId).offset().left + $('#comment_paragraph_' + paragraphId).width();
  108 +// top += -120;
  109 +// right+= -500;
  110 +// $('.comments_list_toggle_paragraph_' + paragraphId).css('position','absolute');
  111 +// $('.comments_list_toggle_paragraph_' + paragraphId).css('display','inline');
  112 +// $('.comments_list_toggle_paragraph_' + paragraphId).css('top',top);
  113 +// $('.comments_list_toggle_paragraph_' + paragraphId).css('left',right);
  114 + $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
  115 + $('label[for|=comment_title]').hide();
  116 + $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
  117 + $('.comment_form p').hide();
  118 + $('.comments_list_toggle_paragraph_' + paragraphId).width('250px');
  119 + $('.required-field').removeClass("required-field");
  120 + }
145 121  
146 122 function hideAllComments(){
147   - for (index = 0; index < commentParagraphIds.length; ++index) {
148   - $('.comments_list_toggle_paragraph_' + commentParagraphIds[index]).hide();
149   - }
  123 + $(".side-comment").hide();
150 124 }
151   -
152 125  
153 126 $("#comment-bubble").hide();
154 127 //Undo previous highlight from the paragraph
... ... @@ -162,13 +135,7 @@ jQuery(document).ready(function($) {
162 135 rootElement.innerHTML = lastParagraph[paragraphId];
163 136 }
164 137 });
165   -
166   -
167   -// $('#comment-bubble').mouseleave(function(){
168   -// this.hide();
169   -// $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
170   -// });
171   -
  138 +
172 139 //highlight area from the paragraph
173 140 $('.comment_paragraph').mouseup(function(event){
174 141 var paragraphId = getIdCommentParagraph($(this)[0].id);
... ... @@ -200,31 +167,9 @@ jQuery(document).ready(function($) {
200 167 rootElement.focus();
201 168 });
202 169  
203   -
204   -// $('#comment-bubble').click(function(event){
205   -// this.hide();
206   -// hideAllComments();
207   -// $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
208   -// var url = $("#comment-bubble").data('url');
209   -// var paragraphId = $("#comment-bubble").data("paragraphId");
210   -//
211   -// $('.comments_list_toggle_paragraph_' + paragraphId).show();
212   -// $.ajax({
213   -// dataType: "script",
214   -// url: url
215   -// }).done(function() {
216   -// var button = $('#page-comment-form-' + paragraphId + ' a').get(0)
217   -// button.click();
218   -// window.location="#page-comment-form-" + paragraphId;
219   -//// //Move comments
220   -//// sideCommentForm = $('#side_comment_form');
221   -//// sideCommentForm.hide();
222   -//// sideCommentForm = $('.comment_form').first();
223   -//// sideCommentForm.attr("id",'side_comment_form');
224   -//// moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
225   -// });
226   -// });
227   -
  170 + $('.article-body').mousedown(function(event){
  171 + $( ".commented-area" ).contents().unwrap();
  172 + });
228 173  
229 174 function processAnchor(){
230 175 var anchor = window.location.hash;
... ... @@ -244,19 +189,15 @@ jQuery(document).ready(function($) {
244 189 }).done(function() {
245 190 var button = $('#page-comment-form-' + comment_id + ' a').get(0)
246 191 button.click();
247   -//// window.location="#page-comment-form-" + paragraphId;
248   -// //Move comments
249   -// sideCommentForm = $('#side_comment_form');
250   -// sideCommentForm.hide();
251   -// sideCommentForm = $('.comment_form').first();
252   -// sideCommentForm.attr("id",'side_comment_form');
253   -// moveCommentsToTheSide(paragraphId, event.pageX, event.pageY);
  192 + //alignSideComments(paragraphId);
254 193 });
255 194 }
256 195  
257 196 processAnchor();
258 197  
259 198 $(document).on('mouseover', 'li.article-comment', function(){
  199 + console.log("mouseover");
  200 +
260 201 var selected_area = $(this).find('input.paragraph_comment_area').val();
261 202 var paragraph_id = $(this).find('input.paragraph_id').val();
262 203 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
... ... @@ -274,6 +215,7 @@ jQuery(document).ready(function($) {
274 215 });
275 216  
276 217 $(document).on('mouseout', 'li.article-comment', function(){
  218 + console.log("mouseout");
277 219 var paragraph_id = $(this).find('input.paragraph_id').val();
278 220 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
279 221  
... ... @@ -288,7 +230,13 @@ jQuery(document).ready(function($) {
288 230 sel.removeAllRanges();
289 231 }
290 232 });
291   -});
  233 +
  234 +// $('.icon-cancel').unbind('click').click(function(e){
  235 +// e.preventDefault();
  236 +// $(this).closest("textarea[name^='comment'").text("");
  237 +// $(this).closest("div[class^='comments_list_toggle_paragraph_']").hide();
  238 +// });
  239 +}); // End of jQuery(document).ready(function($)
292 240  
293 241 function toggleParagraph(paragraph) {
294 242 var div = jQuery('div.comments_list_toggle_paragraph_'+paragraph);
... ... @@ -305,4 +253,4 @@ function loadCompleted(paragraph) {
305 253 jQuery.scrollTo(jQuery(comment_paragraph_anchor));
306 254 comment_paragraph_anchor = null;
307 255 }
308 256 -}
  257 +}
309 258 \ No newline at end of file
... ...
plugins/comment_paragraph/public/style.css
  Diff comments   View file @6675af8
... ... @@ -21,15 +21,15 @@ div.article-comments-list-more{
21 21 }
22 22  
23 23 .commented-area {
24   - background-color: #FFFF66;
  24 + background-color: lightseagreen;
25 25 }
26 26  
27 27 .comment_paragraph ::selection {
28   - background: #FFFF66; /* WebKit/Blink Browsers */
  28 + background: lightseagreen; /* WebKit/Blink Browsers */
29 29 }
30 30  
31 31 .comment_paragraph ::-moz-selection {
32   - background: #FFFF66; /* Gecko Browsers */
  32 + background: lightseagreen; /* Gecko Browsers */
33 33 }
34 34  
35 35 .comment_paragraph{
... ... @@ -64,9 +64,20 @@ div.article-comments-list-more{
64 64 width: 0;
65 65 }
66 66  
  67 +.triangle-border {
  68 + position: relative;
  69 + padding: 15px;
  70 + margin: 1em 0 3em;
  71 + border: 5px solid #5a8f00;
  72 + color: #333;
  73 + background: #fff;
  74 + -webkit-border-radius: 10px;
  75 + -moz-border-radius: 10px;
  76 + border-radius: 10px;
  77 +}
  78 +
67 79  
68   -.side-comments-counter{
69   - width: 20px;
  80 +/*.side-comments-counter{
70 81 top: 10px;
71 82 border-style: solid;
72 83 border-width: 1px;
... ... @@ -77,7 +88,20 @@ div.article-comments-list-more{
77 88 color: #FFFFFF;
78 89 display: none;
79 90 padding: 5px;
80   -}
  91 +}*/
  92 +
  93 +/*.side-comments-counter:before {
  94 +content: "";
  95 +position: absolute;
  96 +bottom: -20px;
  97 +left: 40px;
  98 +border-width: 20px 20px 0;
  99 +border-style: solid;
  100 +border-color: #5a8f00 transparent;
  101 +display: block;
  102 +width: 0;
  103 +}*/
  104 +
81 105  
82 106 #comment_title{
83 107 display: none;
... ... @@ -90,6 +114,22 @@ div[class^=&#39;comments_list_toggle_paragraph_&#39;] {
90 114 padding: 5px;
91 115 }
92 116  
  117 +label[for="comment_title"]{
  118 + display: none;
  119 +}
  120 +
  121 +#comments_list{
  122 + display: none;
  123 +}
  124 +
  125 +/* Hides old style counter*/
  126 +/*.comment-count{
  127 + display: none;
  128 +}*/
  129 +
  130 +
  131 +
  132 +
93 133  
94 134  
95 135 /*.comment-details{
... ...
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
  Diff comments   View file @6675af8
1 1 <div class="comments">
2   - <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" >
3   - <%= inner_html %>
4   - </div>
5   - <div align="center">
6   - <%=
7   - url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
8   - link_to_remote(
9   - image_tag("/plugins/comment_paragraph/images/comments.gif"),
10   - {
11   - :url => url,
12   - :method => :post,
13   - :condition => "!toggleParagraph(#{paragraph_id})",
14   - :complete => "loadCompleted(#{paragraph_id})"
15   - },
16   - {
17   - :id => "link_to_ajax_comments_#{paragraph_id}",
18   - :'data-url' => url_for(url)
19   - }
20   - )%>
21   - <!-- FIXME: css file -->
22   - <div align="center" id="comments_paragraph_count_<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC">
23   - <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
24   - <%= count %>
25   - </span>
26   - </div>
27   - </div>
28   - <div class="comment-paragraph-loading-<%= paragraph_id %>"/>
29   - <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" style="display:none">
30   - <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>">
31   - </div>
32   - <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more">
33   - </div>
34   - <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
35   - <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
36   - </div>
37   - </div>
38   -</div>
39 2 \ No newline at end of file
  3 + <table border="1">
  4 + <tr>
  5 + <td width="90%">
  6 + <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" >
  7 + <%= inner_html %>
  8 + </div>
  9 + </td>
  10 + <td>
  11 + <div align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC">
  12 + <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
  13 + <%= count %>
  14 + </span>
  15 + </div>
  16 + </td>
  17 + <td valign="top">
  18 + <div align="center">
  19 + <%=
  20 + url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
  21 + link_to_remote(
  22 + image_tag("/plugins/comment_paragraph/images/comments.gif"),
  23 + {
  24 + :url => url,
  25 + :method => :post,
  26 + :condition => "!toggleParagraph(#{paragraph_id})",
  27 + :complete => "loadCompleted(#{paragraph_id})"
  28 + },
  29 + {
  30 + :id => "link_to_ajax_comments_#{paragraph_id}",
  31 + :'data-url' => url_for(url)
  32 + }
  33 + )%>
  34 + </div>
  35 + <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
  36 + <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
  37 + <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
  38 + <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
  39 + <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
  40 + <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
  41 + <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
  42 + </div>
  43 + </div>
  44 + </div>
  45 + </div>
  46 + </td>
  47 + </tr>
  48 + </table>
40 49 \ No newline at end of file
... ...