Download as
Browse Code »

Commit 89eed21029554a38526263fa38ee95acbec73987

Authored by Evandro Jr
1 parent 7441a8b8
Exists in master

major changes in progress

Showing 3 changed files with 187 additions and 190 deletions   Show diff stats
public/comment_paragraph_macro.js
  Diff comments   View file @89eed21
@@ -10,93 +10,48 @@ function getIdCommentParagraph(paragraphId){ @@ -10,93 +10,48 @@ function getIdCommentParagraph(paragraphId){
10 return paragraphId.substring(idx+1, paragraphId.length); 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 //Hides old style ballons 43 //Hides old style ballons
84 $("img[alt|=Comments]").hide(); 44 $("img[alt|=Comments]").hide();
85 - //Hides old style counter  
86 - $(".comment-count").hide();  
87 -  
88 rangy.init(); 45 rangy.init();
89 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false}); 46 cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
90 -  
91 //Add marked text bubble 47 //Add marked text bubble
92 $("body").append('\ 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 <div align="center" class="triangle-right" >Comentar<br>+</div>\ 50 <div align="center" class="triangle-right" >Comentar<br>+</div>\
95 </a>'); 51 </a>');
96 - //buildSideCommentBlock();  
97 - // 52 +
98 //Creates a side bubble for each paragraph with the amount of comments 53 //Creates a side bubble for each paragraph with the amount of comments
99 - putSideComments(); 54 + //putSideComments();
100 55
101 $('.comment_paragraph').mouseover(function(){ 56 $('.comment_paragraph').mouseover(function(){
102 var paragraphId = getIdCommentParagraph($(this)[0].id); 57 var paragraphId = getIdCommentParagraph($(this)[0].id);
@@ -112,43 +67,61 @@ jQuery(document).ready(function($) { @@ -112,43 +67,61 @@ jQuery(document).ready(function($) {
112 67
113 $('.side-comments-counter').click(function(){ 68 $('.side-comments-counter').click(function(){
114 hideAllComments(); 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 //Loads the comments 74 //Loads the comments
118 var url = $('#link_to_ajax_comments_' + paragraphId).data('url'); 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 function hideAllComments(){ 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 $("#comment-bubble").hide(); 126 $("#comment-bubble").hide();
154 //Undo previous highlight from the paragraph 127 //Undo previous highlight from the paragraph
@@ -162,13 +135,7 @@ jQuery(document).ready(function($) { @@ -162,13 +135,7 @@ jQuery(document).ready(function($) {
162 rootElement.innerHTML = lastParagraph[paragraphId]; 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 //highlight area from the paragraph 139 //highlight area from the paragraph
173 $('.comment_paragraph').mouseup(function(event){ 140 $('.comment_paragraph').mouseup(function(event){
174 var paragraphId = getIdCommentParagraph($(this)[0].id); 141 var paragraphId = getIdCommentParagraph($(this)[0].id);
@@ -200,31 +167,9 @@ jQuery(document).ready(function($) { @@ -200,31 +167,9 @@ jQuery(document).ready(function($) {
200 rootElement.focus(); 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 function processAnchor(){ 174 function processAnchor(){
230 var anchor = window.location.hash; 175 var anchor = window.location.hash;
@@ -244,19 +189,15 @@ jQuery(document).ready(function($) { @@ -244,19 +189,15 @@ jQuery(document).ready(function($) {
244 }).done(function() { 189 }).done(function() {
245 var button = $('#page-comment-form-' + comment_id + ' a').get(0) 190 var button = $('#page-comment-form-' + comment_id + ' a').get(0)
246 button.click(); 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 processAnchor(); 196 processAnchor();
258 197
259 $(document).on('mouseover', 'li.article-comment', function(){ 198 $(document).on('mouseover', 'li.article-comment', function(){
  199 + console.log("mouseover");
  200 +
260 var selected_area = $(this).find('input.paragraph_comment_area').val(); 201 var selected_area = $(this).find('input.paragraph_comment_area').val();
261 var paragraph_id = $(this).find('input.paragraph_id').val(); 202 var paragraph_id = $(this).find('input.paragraph_id').val();
262 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0); 203 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
@@ -274,6 +215,7 @@ jQuery(document).ready(function($) { @@ -274,6 +215,7 @@ jQuery(document).ready(function($) {
274 }); 215 });
275 216
276 $(document).on('mouseout', 'li.article-comment', function(){ 217 $(document).on('mouseout', 'li.article-comment', function(){
  218 + console.log("mouseout");
277 var paragraph_id = $(this).find('input.paragraph_id').val(); 219 var paragraph_id = $(this).find('input.paragraph_id').val();
278 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0); 220 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
279 221
@@ -288,7 +230,13 @@ jQuery(document).ready(function($) { @@ -288,7 +230,13 @@ jQuery(document).ready(function($) {
288 sel.removeAllRanges(); 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 function toggleParagraph(paragraph) { 241 function toggleParagraph(paragraph) {
294 var div = jQuery('div.comments_list_toggle_paragraph_'+paragraph); 242 var div = jQuery('div.comments_list_toggle_paragraph_'+paragraph);
@@ -305,4 +253,4 @@ function loadCompleted(paragraph) { @@ -305,4 +253,4 @@ function loadCompleted(paragraph) {
305 jQuery.scrollTo(jQuery(comment_paragraph_anchor)); 253 jQuery.scrollTo(jQuery(comment_paragraph_anchor));
306 comment_paragraph_anchor = null; 254 comment_paragraph_anchor = null;
307 } 255 }
308 -} 256 -}
  257 +}
309 \ No newline at end of file 258 \ No newline at end of file
public/style.css
  Diff comments   View file @89eed21
@@ -21,15 +21,15 @@ div.article-comments-list-more{ @@ -21,15 +21,15 @@ div.article-comments-list-more{
21 } 21 }
22 22
23 .commented-area { 23 .commented-area {
24 - background-color: #FFFF66; 24 + background-color: lightseagreen;
25 } 25 }
26 26
27 .comment_paragraph ::selection { 27 .comment_paragraph ::selection {
28 - background: #FFFF66; /* WebKit/Blink Browsers */ 28 + background: lightseagreen; /* WebKit/Blink Browsers */
29 } 29 }
30 30
31 .comment_paragraph ::-moz-selection { 31 .comment_paragraph ::-moz-selection {
32 - background: #FFFF66; /* Gecko Browsers */ 32 + background: lightseagreen; /* Gecko Browsers */
33 } 33 }
34 34
35 .comment_paragraph{ 35 .comment_paragraph{
@@ -64,9 +64,20 @@ div.article-comments-list-more{ @@ -64,9 +64,20 @@ div.article-comments-list-more{
64 width: 0; 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 top: 10px; 81 top: 10px;
71 border-style: solid; 82 border-style: solid;
72 border-width: 1px; 83 border-width: 1px;
@@ -77,7 +88,20 @@ div.article-comments-list-more{ @@ -77,7 +88,20 @@ div.article-comments-list-more{
77 color: #FFFFFF; 88 color: #FFFFFF;
78 display: none; 89 display: none;
79 padding: 5px; 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 #comment_title{ 106 #comment_title{
83 display: none; 107 display: none;
@@ -90,6 +114,22 @@ div[class^=&#39;comments_list_toggle_paragraph_&#39;] { @@ -90,6 +114,22 @@ div[class^=&#39;comments_list_toggle_paragraph_&#39;] {
90 padding: 5px; 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 /*.comment-details{ 135 /*.comment-details{
views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
  Diff comments   View file @89eed21
1 <div class="comments"> 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 \ No newline at end of file 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 \ No newline at end of file 49 \ No newline at end of file