Download as
Browse Code »

Commit e5f7efe24b38bea4dd8955167b645f1ab9d865ac

Authored by Evandro Jr
1 parent 89eed210
Exists in master

version for usability test

Showing 3 changed files with 46 additions and 35 deletions   Show diff stats
public/comment_paragraph_macro.js
  Diff comments   View file @e5f7efe
... ... @@ -39,7 +39,6 @@ jQuery(document).ready(function($) {
39 39 }
40 40 }
41 41  
42   -
43 42 //Hides old style ballons
44 43 $("img[alt|=Comments]").hide();
45 44 rangy.init();
... ... @@ -86,7 +85,7 @@ jQuery(document).ready(function($) {
86 85  
87 86  
88 87 $('#comment-bubble').click(function(event){
89   - this.hide();
  88 + $(this).hide();
90 89 hideAllComments();
91 90 $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
92 91 var url = $("#comment-bubble").data('url');
... ... @@ -103,19 +102,11 @@ jQuery(document).ready(function($) {
103 102 });
104 103  
105 104 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 105 $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
115 106 $('label[for|=comment_title]').hide();
116 107 $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
117 108 $('.comment_form p').hide();
118   - $('.comments_list_toggle_paragraph_' + paragraphId).width('250px');
  109 + $('.comments_list_toggle_paragraph_' + paragraphId).width('350px');
119 110 $('.required-field').removeClass("required-field");
120 111 }
121 112  
... ... @@ -126,7 +117,8 @@ jQuery(document).ready(function($) {
126 117 $("#comment-bubble").hide();
127 118 //Undo previous highlight from the paragraph
128 119 $('.comment_paragraph').mousedown(function(){
129   - var paragraphId = getIdCommentParagraph($(this)[0].id);
  120 + //var paragraphId = getIdCommentParagraph($(this)[0].id);
  121 + var paragraphId = $(this).data('paragraph');
130 122 $(this).find('.commented-area').replaceWith(function() {
131 123 return $(this).html();
132 124 });
... ... @@ -138,22 +130,34 @@ jQuery(document).ready(function($) {
138 130  
139 131 //highlight area from the paragraph
140 132 $('.comment_paragraph').mouseup(function(event){
141   - var paragraphId = getIdCommentParagraph($(this)[0].id);
  133 + deselectAll();
  134 + var paragraphId = $(this).data('paragraph');
142 135 var currentMousePos = { x: -1, y: -1 };
143 136 currentMousePos.x = event.pageX;
144 137 currentMousePos.y = event.pageY;
145   - $("#comment-bubble").css({top: event.pageY-100, left: event.pageX-70, position:'absolute'});
  138 + $("#comment-bubble").css({top: event.pageY-100, left: event.pageX-70, position:'absolute'});
  139 + //Relates a bubble to the mouse up paragraph
146 140 $("#comment-bubble").data("paragraphId", paragraphId)
  141 + //Prepare to open the div
147 142 var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
148 143 $("#comment-bubble").data("url", url)
149 144 $("#comment-bubble").show();
150 145 var rootElement = $(this).get(0);
  146 + //Stores the lastParagraph of paragraph for some reason
151 147 lastParagraph[paragraphId] = rootElement.innerHTML;
152   - var selObj = rangy.getSelection();
153   - var selected_area = rangy.serializeSelection(selObj, true,rootElement);
154   - cssApplier.toggleSelection();
  148 + //Maybe it is needed to handle exceptions here
  149 + try{
  150 + var selObj = rangy.getSelection();
  151 + var selected_area = rangy.serializeSelection(selObj, true,rootElement);
  152 + cssApplier.toggleSelection();
  153 + }catch(e){
  154 + console.log(e);
  155 + //$.flash("A sele");
  156 + return;
  157 + }
  158 + //Register the area the has been selected at input.selected_area
155 159 lastSelectedArea[paragraphId] = selected_area;
156   - form = jQuery(this).parent().find('form');
  160 + form = $('#page-comment-form-' + paragraphId).find('form');
157 161 if (form.find('input.selected_area').length === 0){
158 162 jQuery('<input>').attr({
159 163 class: 'selected_area',
... ... @@ -167,9 +171,14 @@ jQuery(document).ready(function($) {
167 171 rootElement.focus();
168 172 });
169 173  
170   - $('.article-body').mousedown(function(event){
171   - $( ".commented-area" ).contents().unwrap();
172   - });
  174 + function deselectAll(){
  175 + $(".commented-area").contents().unwrap();
  176 + }
  177 +
  178 +
  179 +// $('.article-body').mousedown(function(event){
  180 +// deselectAll();
  181 +// });
173 182  
174 183 function processAnchor(){
175 184 var anchor = window.location.hash;
... ... @@ -196,8 +205,6 @@ jQuery(document).ready(function($) {
196 205 processAnchor();
197 206  
198 207 $(document).on('mouseover', 'li.article-comment', function(){
199   - console.log("mouseover");
200   -
201 208 var selected_area = $(this).find('input.paragraph_comment_area').val();
202 209 var paragraph_id = $(this).find('input.paragraph_id').val();
203 210 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
... ... @@ -215,7 +222,7 @@ jQuery(document).ready(function($) {
215 222 });
216 223  
217 224 $(document).on('mouseout', 'li.article-comment', function(){
218   - console.log("mouseout");
  225 + deselectAll();
219 226 var paragraph_id = $(this).find('input.paragraph_id').val();
220 227 var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
221 228  
... ... @@ -230,12 +237,6 @@ jQuery(document).ready(function($) {
230 237 sel.removeAllRanges();
231 238 }
232 239 });
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 240 }); // End of jQuery(document).ready(function($)
240 241  
241 242 function toggleParagraph(paragraph) {
... ...
public/style.css
  Diff comments   View file @e5f7efe
... ... @@ -104,7 +104,7 @@ width: 0;
104 104  
105 105  
106 106 #comment_title{
107   - display: none;
  107 + display: none;
108 108 }
109 109  
110 110 div[class^='comments_list_toggle_paragraph_'] {
... ... @@ -112,12 +112,22 @@ div[class^=&#39;comments_list_toggle_paragraph_&#39;] {
112 112 border-width: 1px;
113 113 border-color: black;
114 114 padding: 5px;
  115 + background-color: whitesmoke;
115 116 }
116 117  
117   -label[for="comment_title"]{
118   - display: none;
  118 +div[class^='comment-paragraph-loading-'] {
  119 +/* border-style: solid;
  120 + border-width: 1px;
  121 + border-color: black;
  122 + padding: 5px;*/
  123 + background-color: whitesmoke;
  124 + z-index: 99;
119 125 }
120 126  
  127 +/*label[for="comment_title"]{
  128 + display: none;
  129 +}*/
  130 +
121 131 #comments_list{
122 132 display: none;
123 133 }
... ...
views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
  Diff comments   View file @e5f7efe
1 1 <div class="comments">
2   - <table border="1">
  2 + <table border="0">
3 3 <tr>
4 4 <td width="90%">
5   - <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" >
  5 + <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
6 6 <%= inner_html %>
7 7 </div>
8 8 </td>
... ...