Download as
Browse Code »

Commit 689a8e4eee8b1a763b6258ab009b9d938792750c

Authored by Gustavo Cruz
1 parent d8189cdb
Exists in staging and in 4 other branches captcha_serpro_plugin, login-captcha, production, production-vendorized

update css plugin

Showing 5 changed files with 462 additions and 2 deletions   Show diff stats
plugins/comment_paragraph/public/comment_paragraph_macro.js~ 0 → 100644
  Diff comments   View file @689a8e4
... ... @@ -0,0 +1,257 @@
  1 +var comment_paragraph_anchor;
  2 +var lastParagraph = [];
  3 +var lastSelectedArea = [];
  4 +var sideCommentForm=null;
  5 +var firstTimeOpenParagraph = Array();
  6 +var commentParagraphIds = Array();
  7 +
  8 +function getIdCommentParagraph(paragraphId){
  9 + var idx = paragraphId.lastIndexOf('_');
  10 + return paragraphId.substring(idx+1, paragraphId.length);
  11 +}
  12 +
  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 + });
  22 +
  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 + });
  34 +
  35 + function showBox(div){
  36 + if(div.hasClass('closed')) {
  37 + div.removeClass('closed');
  38 + div.addClass('opened');
  39 + }
  40 + }
  41 +
  42 + //Hides old style ballons
  43 + $("img[alt|=Comments]").hide();
  44 + rangy.init();
  45 + cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
  46 + //Add marked text bubble
  47 + $("body").append('\
  48 + <a id="comment-bubble" style="width:120px;text-decoration: none">\
  49 + <div align="center" class="triangle-right" >Comentar<br>+</div>\
  50 + </a>');
  51 +
  52 + //Creates a side bubble for each paragraph with the amount of comments
  53 + //putSideComments();
  54 +
  55 + $('.comment_paragraph').mouseover(function(){
  56 + var paragraphId = getIdCommentParagraph($(this)[0].id);
  57 + $('#side_comment_counter_' + paragraphId).show();
  58 + });
  59 +
  60 + $('.comment_paragraph').mouseleave(function(){
  61 + var paragraphId = getIdCommentParagraph($(this)[0].id);
  62 +// if($('#side_comment_counter_' + paragraphId).text() == '+'){
  63 +// $('#side_comment_counter_' + paragraphId).hide();
  64 +// }
  65 + });
  66 +
  67 + $('.side-comments-counter').click(function(){
  68 + hideAllComments();
  69 + var paragraphId = $(this).data('paragraph')
  70 + $('#side_comment_' + paragraphId).show();
  71 + $('#comments_list_toggle_paragraph_' + paragraphId).show();
  72 + console.log(paragraphId);
  73 + //Loads the comments
  74 + var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
  75 + firstTimeOpenParagraph[paragraphId]=false;
  76 + $.ajax({
  77 + dataType: "script",
  78 + url: url
  79 + }).done(function() {
  80 + var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
  81 + button.click();
  82 + alignSideComments(paragraphId);
  83 + });
  84 + });
  85 +
  86 +
  87 + $('#comment-bubble').click(function(event){
  88 + $(this).hide();
  89 + hideAllComments();
  90 + $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
  91 + var url = $("#comment-bubble").data('url');
  92 + var paragraphId = $("#comment-bubble").data("paragraphId");
  93 + $('#side_comment_' + paragraphId).show();
  94 + $.ajax({
  95 + dataType: "script",
  96 + url: url
  97 + }).done(function() {
  98 + var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
  99 + button.click();
  100 + alignSideComments(paragraphId);
  101 + });
  102 + });
  103 +
  104 + function alignSideComments(paragraphId){
  105 + $('.comments_list_toggle_paragraph_' + paragraphId).css('background','#FFFFFF');
  106 + $('label[for|=comment_title]').hide();
  107 + $('label[for|=comment_body]').css({top: -30, left: +20, position:'relative'});
  108 + $('.comment_form p').hide();
  109 + $('.comments_list_toggle_paragraph_' + paragraphId).width('350px');
  110 + $('.required-field').removeClass("required-field");
  111 + }
  112 +
  113 + function hideAllComments(){
  114 + $(".side-comment").hide();
  115 + }
  116 +
  117 + $("#comment-bubble").hide();
  118 + //Undo previous highlight from the paragraph
  119 + $('.comment_paragraph').mousedown(function(){
  120 + //var paragraphId = getIdCommentParagraph($(this)[0].id);
  121 + var paragraphId = $(this).data('paragraph');
  122 + $(this).find('.commented-area').replaceWith(function() {
  123 + return $(this).html();
  124 + });
  125 + var rootElement = $(this).get(0);
  126 + if(lastParagraph[paragraphId]){
  127 + rootElement.innerHTML = lastParagraph[paragraphId];
  128 + }
  129 + });
  130 +
  131 + //highlight area from the paragraph
  132 + $('.comment_paragraph').mouseup(function(event){
  133 + deselectAll();
  134 + var paragraphId = $(this).data('paragraph');
  135 + var currentMousePos = { x: -1, y: -1 };
  136 + currentMousePos.x = event.pageX;
  137 + currentMousePos.y = event.pageY;
  138 + $("#comment-bubble").css({top: event.pageY-100, left: event.pageX-70, position:'absolute'});
  139 + //Relates a bubble to the mouse up paragraph
  140 + $("#comment-bubble").data("paragraphId", paragraphId)
  141 + //Prepare to open the div
  142 + var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
  143 + $("#comment-bubble").data("url", url)
  144 + $("#comment-bubble").show();
  145 + var rootElement = $(this).get(0);
  146 + //Stores the lastParagraph of paragraph for some reason
  147 + lastParagraph[paragraphId] = rootElement.innerHTML;
  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
  159 + lastSelectedArea[paragraphId] = selected_area;
  160 + form = $('#page-comment-form-' + paragraphId).find('form');
  161 + if (form.find('input.selected_area').length === 0){
  162 + jQuery('<input>').attr({
  163 + class: 'selected_area',
  164 + type: 'hidden',
  165 + name: 'comment[comment_paragraph_selected_area]',
  166 + value: selected_area
  167 + }).appendTo(form)
  168 + }else{
  169 + form.find('input.selected_area').val(selected_area)
  170 + }
  171 + rootElement.focus();
  172 + });
  173 +
  174 + function deselectAll(){
  175 + $(".commented-area").contents().unwrap();
  176 + }
  177 +
  178 +
  179 +// $('.article-body').mousedown(function(event){
  180 +// deselectAll();
  181 +// });
  182 +
  183 + function processAnchor(){
  184 + var anchor = window.location.hash;
  185 + if(anchor.length==0) return;
  186 +
  187 + var val = anchor.split('-'); //anchor format = #comment-\d+
  188 + if(val.length!=2 || val[0]!='#comment') return;
  189 + if($('div[data-macro=comment_paragraph_plugin\\/allow_comment]').length==0) return; //comment_paragraph_plugin/allow_comment div must exists
  190 + var comment_id = val[1];
  191 + if(!/^\d+$/.test(comment_id)) return; //test for integer
  192 +
  193 + comment_paragraph_anchor = anchor;
  194 + var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;
  195 + $.ajax({
  196 + dataType: "script",
  197 + url: url
  198 + }).done(function() {
  199 + var button = $('#page-comment-form-' + comment_id + ' a').get(0)
  200 + button.click();
  201 + //alignSideComments(paragraphId);
  202 + });
  203 + }
  204 +
  205 + processAnchor();
  206 +
  207 + $(document).on('mouseover', 'li.article-comment', function(){
  208 + var selected_area = $(this).find('input.paragraph_comment_area').val();
  209 + var paragraph_id = $(this).find('input.paragraph_id').val();
  210 + var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
  211 +
  212 + if(lastParagraph[paragraph_id] == null || lastParagraph[paragraph_id] == 'undefined'){
  213 + lastParagraph[paragraph_id] = rootElement.innerHTML;
  214 + }
  215 + else {
  216 + rootElement.innerHTML = lastParagraph[paragraph_id] ;
  217 + }
  218 + if(selected_area != ""){
  219 + rangy.deserializeSelection(selected_area, rootElement);
  220 + cssApplier.toggleSelection();
  221 + }
  222 + });
  223 +
  224 + $(document).on('mouseout', 'li.article-comment', function(){
  225 + deselectAll();
  226 + var paragraph_id = $(this).find('input.paragraph_id').val();
  227 + var rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
  228 +
  229 + if(lastSelectedArea[paragraph_id] != null && lastSelectedArea[paragraph_id] != 'undefined' ){
  230 + rootElement = $('#comment_paragraph_'+ paragraph_id).get(0);
  231 + rootElement.innerHTML = lastParagraph[paragraph_id];
  232 + rangy.deserializeSelection(lastSelectedArea[paragraph_id], rootElement);
  233 + cssApplier.toggleSelection();
  234 + } else {
  235 + cssApplier.toggleSelection();
  236 + var sel = rangy.getSelection();
  237 + sel.removeAllRanges();
  238 + }
  239 + });
  240 +}); // End of jQuery(document).ready(function($)
  241 +
  242 +function toggleParagraph(paragraph) {
  243 + var div = jQuery('div.comments_list_toggle_paragraph_'+paragraph);
  244 + var visible = div.is(':visible');
  245 + if(!visible)
  246 + jQuery('div.comment-paragraph-loading-' + paragraph).addClass('comment-button-loading');
  247 + div.toggle('fast');
  248 + return visible;
  249 +}
  250 +
  251 +function loadCompleted(paragraph) {
  252 + jQuery('div.comment-paragraph-loading-'+paragraph).removeClass('comment-button-loading')
  253 + if(comment_paragraph_anchor) {
  254 + jQuery.scrollTo(jQuery(comment_paragraph_anchor));
  255 + comment_paragraph_anchor = null;
  256 + }
  257 +}
0 258 \ No newline at end of file
... ...
plugins/comment_paragraph/public/style.css
  Diff comments   View file @689a8e4
... ... @@ -119,6 +119,13 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
119 119 z-index: 199;
120 120 }
121 121  
  122 +.side-comments-counter {
  123 + border: 1px solid #57ad68;
  124 + padding: 3px;
  125 + border-radius: 3px;
  126 + color: #666;
  127 +}
  128 +
122 129 #comments_list{
123 130 display: none;
124 131 }
... ...
plugins/comment_paragraph/public/style.css~ 0 → 100644
  Diff comments   View file @689a8e4
... ... @@ -0,0 +1,149 @@
  1 +
  2 +#article .article-comments-list,
  3 +#article .article-comments-list ul,
  4 +#article .article-comments-list li {
  5 + margin: 10px 0 10px 0;
  6 +}
  7 +
  8 +div.article-comments-list-more{
  9 + width: 100%;
  10 + height: 30px;
  11 + text-align: center;
  12 + font-size: 20px;
  13 + margin-bottom: 5px;
  14 +}
  15 +
  16 +.popBox_comment_paragraph {
  17 + position: absolute;
  18 + z-index: 2;
  19 + background: #cccccc;
  20 + width: 60px;
  21 + padding: 0.3em;
  22 + position: absolute;border: 1px solid gray;
  23 +}
  24 +
  25 +.span_comment_paragraph {
  26 + color: red;
  27 + font-weight: bold;
  28 +}
  29 +
  30 +.commented-area {
  31 + background-color: lightseagreen;
  32 +}
  33 +
  34 +.comment_paragraph ::selection {
  35 + background: lightseagreen; /* WebKit/Blink Browsers */
  36 +}
  37 +
  38 +.comment_paragraph ::-moz-selection {
  39 + background: lightseagreen; /* Gecko Browsers */
  40 +}
  41 +
  42 +.comment_paragraph{
  43 + padding: 0px;
  44 +}
  45 +
  46 +.triangle-right {
  47 + position:relative;
  48 + padding:15px;
  49 + margin:1em 0 3em;
  50 + color:#fff;
  51 + background:#075698; /* default background for browsers without gradient support */
  52 + /* css3 */
  53 + background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
  54 + background:-moz-linear-gradient(#2e88c4, #075698);
  55 + background:-o-linear-gradient(#2e88c4, #075698);
  56 + background:linear-gradient(#2e88c4, #075698);
  57 + -webkit-border-radius:10px;
  58 + -moz-border-radius:10px;
  59 + border-radius:10px;
  60 +}
  61 +
  62 +.triangle-right:after {
  63 + content: "";
  64 + position: absolute;
  65 + bottom: -20px;
  66 + left: 50px;
  67 + border-width: 20px 0 0 20px;
  68 + border-style: solid;
  69 + border-color: #075698 transparent;
  70 + display: block;
  71 + width: 0;
  72 +}
  73 +
  74 +.triangle-border {
  75 + position: relative;
  76 + padding: 15px;
  77 + margin: 1em 0 3em;
  78 + border: 5px solid #5a8f00;
  79 + color: #333;
  80 + background: #fff;
  81 + -webkit-border-radius: 10px;
  82 + -moz-border-radius: 10px;
  83 + border-radius: 10px;
  84 +}
  85 +
  86 +.comment-picture {width: 50px;}
  87 +.comment-text {display: inline-block;}
  88 +.comment-replies .comment-text {display: inline-block;}
  89 +.comment-from-owner .comment-created-at {
  90 + display: block;
  91 + width: 100%;}
  92 +.comment-replies .comment-text {display: block;}
  93 +#article .article-comment .comment-details h4 {display: none;}
  94 +#article .article-comments-list .comment-replies {padding-left: 20px;}
  95 +#comment_title{
  96 + display: none;
  97 +}
  98 +
  99 +div[class^='comments_list_toggle_paragraph_'] {
  100 + border-style: solid;
  101 + border-width: 1px;
  102 + border-color: #ccc;
  103 + padding: 5px;
  104 + background-color: whitesmoke;
  105 + width: 250px;
  106 +}
  107 +
  108 +div[class^='comment-paragraph-loading-'] {
  109 + background-color: whitesmoke;
  110 + z-index: 99;
  111 + right: -230px;
  112 +}
  113 +
  114 +#content .comment-balloon div[class^='comment-wrapper-']{
  115 + background: none;
  116 +}
  117 +
  118 +.side-comment{
  119 + z-index: 199;
  120 +}
  121 +
  122 +.side-comments-counter {
  123 + border: 1px solid #57ad68;
  124 + padding: 3px;
  125 + border-radius: 3px;
  126 + color: #ccc;
  127 +}
  128 +
  129 +#comments_list{
  130 + display: none;
  131 +}
  132 +
  133 +.article-comment-inner {border-bottom: 1px solid #ddd;}
  134 +
  135 +/*label[for="comment_title"]{
  136 + display: none;
  137 +}*/
  138 +
  139 +#article .comment-replies .article-comment{background: white; border: 0px; border-top: 1px solid #ddd;}
  140 +
  141 +.comment-replies .comment-from-owner.comment-content {background: none;}
  142 +
  143 +.article-comment .comment-details {margin-bottom: 10px;}
  144 +
  145 +#content .comment-actions .menu-submenu ul {
  146 + right: 100%;
  147 + position: absolute;
  148 +}
  149 +
... ...
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
  Diff comments   View file @689a8e4
... ... @@ -7,7 +7,7 @@
7 7 </div>
8 8 </td>
9 9 <td>
10   - <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">
  10 + <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;">
11 11 <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
12 12 <%= count %>
13 13 </span>
... ... @@ -44,4 +44,4 @@
44 44 </div>
45 45 </td>
46 46 </tr>
47   - </table>
48 47 \ No newline at end of file
  48 + </table>
... ...
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb~ 0 → 100644
  Diff comments   View file @689a8e4
... ... @@ -0,0 +1,47 @@
  1 +<div class="comments">
  2 + <table border="0">
  3 + <tr>
  4 + <td width="90%">
  5 + <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
  6 + <%= inner_html %>
  7 + </div>
  8 + </td>
  9 + <td>
  10 + <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;>
  11 + <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
  12 + <%= count %>
  13 + </span>
  14 + </div>
  15 + </td>
  16 + <td valign="top">
  17 + <div align="center">
  18 + <%=
  19 + url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
  20 + link_to_remote(
  21 + image_tag("/plugins/comment_paragraph/images/comments.gif"),
  22 + {
  23 + :url => url,
  24 + :method => :post,
  25 + :condition => "!toggleParagraph(#{paragraph_id})",
  26 + :complete => "loadCompleted(#{paragraph_id})"
  27 + },
  28 + {
  29 + :id => "link_to_ajax_comments_#{paragraph_id}",
  30 + :'data-url' => url_for(url)
  31 + }
  32 + )%>
  33 + </div>
  34 + <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
  35 + <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
  36 + <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
  37 + <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
  38 + <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
  39 + <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
  40 + <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
  41 + </div>
  42 + </div>
  43 + </div>
  44 + </div>
  45 + </td>
  46 + </tr>
  47 + </table>
... ...