You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@allura.apache.org by br...@apache.org on 2019/03/15 16:36:30 UTC
[allura] 01/04: [#8263] Interactive reaction list and source
formatting
This is an automated email from the ASF dual-hosted git repository.
brondsem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/allura.git
commit c5774839b81a25db94d60f9e379ff9e91a993927
Author: Shalitha Suranga <sh...@gmail.com>
AuthorDate: Mon Mar 11 11:11:49 2019 +0530
[#8263] Interactive reaction list and source formatting
---
.../allura/lib/widgets/resources/js/reactions.js | 116 ++++++++++++---------
Allura/allura/nf/allura/css/site_style.css | 1 +
Allura/allura/templates/widgets/post_widget.html | 2 +-
3 files changed, 70 insertions(+), 49 deletions(-)
diff --git a/Allura/allura/lib/widgets/resources/js/reactions.js b/Allura/allura/lib/widgets/resources/js/reactions.js
index a889e7d..8be73a8 100644
--- a/Allura/allura/lib/widgets/resources/js/reactions.js
+++ b/Allura/allura/lib/widgets/resources/js/reactions.js
@@ -19,76 +19,96 @@
// Reaction support
-$(function(){
+$(function () {
-$('.reaction-button').tooltipster({
- animation: 'fade',
- delay: 200,
- theme: 'tooltipster-default',
- trigger: 'click',
- position: 'top',
- iconCloning: false,
- maxWidth: 400,
- contentAsHTML: true,
- interactive: true,
- functionReady: function(instance, helper) {
- $(helper).find('.emoji_button').click(function() {
- var r = $(this).data('emoji');
- if($(this).hasClass('current')) {
- $(this).removeClass('current');
- $(instance).data('currentreact', '');
- }
- else {
- $(this).addClass('current');
- $(instance).data('currentreact', r);
+ $('.reaction-button').tooltipster({
+ animation: 'fade',
+ delay: 200,
+ theme: 'tooltipster-default',
+ trigger: 'click',
+ position: 'top',
+ iconCloning: false,
+ maxWidth: 400,
+ contentAsHTML: true,
+ interactive: true,
+ functionReady: function (instance, helper) {
+ $(helper).find('.emoji_button').click(function () {
+ var r = $(this).data('emoji');
+ if ($(this).hasClass('current')) {
+ $(this).removeClass('current');
+ $(instance).data('currentreact', '');
+ }
+ else {
+ $(this).addClass('current');
+ $(instance).data('currentreact', r);
+ }
+ reactComment(instance, r);
+ });
+ }
+ });
+
+ $('.reaction-button').each(function () {
+ var btnId = $(this).attr('id');
+ $(this).click(function (e) {
+ e.preventDefault();
+ var currentemoji = $(this).data('currentreact');
+ var emohtml = '';
+ for (var emo in global_reactions) {
+ emohtml += '<div class=\'emoji_button' + (currentemoji == emo ? ' current' : '') + '\' data-emoji=\'' + emo + '\'>' +
+ twemoji.parse(global_reactions[emo]) + '</div>';
}
- reactComment(instance, r);
+ var tooltiptext = '<div class="post-reactions-list">' + emohtml + '</div>';
+ $(this).tooltipster('content', tooltiptext);
+ $(this).tooltipster('show');
});
- }
-});
-
-$('.reaction-button').each(function() {
- var btnId = $(this).attr('id');
- $(this).click(function(e) {
- e.preventDefault();
- var currentemoji = $(this).data('currentreact');
- var emohtml = '';
- for(var emo in global_reactions) {
- emohtml += '<div class=\'emoji_button' + (currentemoji == emo ? ' current' : '') + '\' data-emoji=\'' + emo + '\'>' +
- twemoji.parse(global_reactions[emo]) + '</div>';
- }
- var tooltiptext = '<div class="post-reactions-list">' + emohtml + '</div>';
- $(this).tooltipster('content', tooltiptext);
- $(this).tooltipster('show');
});
-});
+ attachClickEvents($('.reactions .reaction'));
});
-function reactComment(btn ,r) {
+
+function attachClickEvents(reactionList) {
+ reactionList.each(function () {
+ $(this).click(function (e) {
+ var react_button = $(this).closest('.post-content').find('.reaction-button');
+ var r = $(this).data('react');
+ if ($(this).hasClass('reaction-current'))
+ $(react_button).data('currentreact', '');
+ else
+ $(react_button).data('currentreact', r);
+
+ reactComment(react_button, r);
+ });
+ });
+}
+
+function reactComment(btn, r) {
var reacts_list = btn.closest('.post-content').find('.reactions');
var currentemoji = $(btn).data('currentreact');
$.ajax({
type: 'post',
url: btn.data('commentlink') + 'post_reaction',
data: {
- 'r' : r,
- '_session_id' : $.cookie('_session_id')
+ 'r': r,
+ '_session_id': $.cookie('_session_id')
},
- success: function(res) {
+ success: function (res) {
var react_html = '';
for (var i in res.counts) {
- react_html += '<div class="reaction' + (currentemoji == i ? ' reaction-current' : '') + '">' +
- '<div class="emoj">' + global_reactions[i] +'</div>' +
- '<div class="emoj-count">' + res.counts[i] + '</div>' +
- '</div>';
+ react_html += '<div class="reaction' + (currentemoji == i ? ' reaction-current' : '') + '" data-react="' + i + '">' +
+ '<div class="emoj">' + global_reactions[i] + '</div>' +
+ '<div class="emoj-count">' + res.counts[i] + '</div>' +
+ '</div>';
}
-
+
reacts_list.html(react_html);
twemoji.parse(reacts_list[0]);
btn.tooltipster('hide');
+
+ // attach events to newly added dom
+ attachClickEvents($('.reaction', reacts_list));
}
});
}
\ No newline at end of file
diff --git a/Allura/allura/nf/allura/css/site_style.css b/Allura/allura/nf/allura/css/site_style.css
index ae910c0..6489521 100644
--- a/Allura/allura/nf/allura/css/site_style.css
+++ b/Allura/allura/nf/allura/css/site_style.css
@@ -2542,6 +2542,7 @@ div.attachment_item{
#comment .display_post .reactions .reaction {
display: inline-block;
padding: 2px;
+ cursor: pointer;
}
#comment .display_post .reactions .reaction-current {
diff --git a/Allura/allura/templates/widgets/post_widget.html b/Allura/allura/templates/widgets/post_widget.html
index b6f6970..9ed02e1 100644
--- a/Allura/allura/templates/widgets/post_widget.html
+++ b/Allura/allura/templates/widgets/post_widget.html
@@ -85,7 +85,7 @@
<div{% if h.has_access(value, 'moderate') %} class="active-md" data-markdownlink="{{value.url()}}" {% endif %}>{{g.markdown.cached_convert(value, 'text')|safe}}</div>
<div class='reactions' style='user-select: none; cursor: default'>
- {% for reaction in value.react_counts %}<div class="reaction{% if current_reaction == reaction %} reaction-current{% endif %}"><div class="emoj">{{ h.emojize(reaction) }}</div><div class="emoj-count">{{ value.react_counts[reaction] }}</div></div>{% endfor %}
+ {% for reaction in value.react_counts %}<div class="reaction{% if current_reaction == reaction %} reaction-current{% endif %}" data-react="{{ reaction }}"><div class="emoj">{{ h.emojize(reaction) }}</div><div class="emoj-count">{{ value.react_counts[reaction] }}</div></div>{% endfor %}
</div>
{{lib.related_artifacts(value)}}
{% if value.edit_count %}