Your IP : 3.147.46.174
import { Type, Loc, Dom, Runtime, pos, GetWindowSize } from 'main.core';
import { EventEmitter } from 'main.core.events'
import {Lottie} from 'ui.lottie';
import { RatingManager } from './manager';
import { RatingLike } from './like';
import { ListPopup } from './listpopup';
import likeAnimatedEmojiData from '../animations/em_01.json';
import laughAnimatedEmojiData from '../animations/em_02.json';
import wonderAnimatedEmojiData from '../animations/em_03.json';
import cryAnimatedEmojiData from '../animations/em_04.json';
import angryAnimatedEmojiData from '../animations/em_05.json';
import facepalmAnimatedEmojiData from '../animations/em_06.json';
import kissAnimatedEmojiData from '../animations/em_07.json';
export class RatingRender
{
static reactionsList = [ 'like', 'kiss', 'laugh', 'wonder', 'cry', 'angry', 'facepalm' ];
static reactionsAnimationData = {
like: likeAnimatedEmojiData,
kiss: kissAnimatedEmojiData,
laugh: laughAnimatedEmojiData,
wonder: wonderAnimatedEmojiData,
cry: cryAnimatedEmojiData,
angry: angryAnimatedEmojiData,
facepalm: facepalmAnimatedEmojiData,
}
static popupCurrentReaction = false;
static popupPagesList = [];
static popupSizeInitialized = false;
static blockShowPopup = false;
static blockShowPopupTimeout = false;
static afterClickBlockShowPopup = false;
static afterClickHandler = null;
static touchStartPosition = null;
static touchCurrentPosition = {
x: null,
y: null,
};
static currentReactionNodeHover = null;
static touchMoveDeltaY = null;
static touchScrollTop = 0;
static hasMobileTouchMoved = null;
static mobileOverlay = null;
static reactionsPopup = null;
static reactionsPopupAnimation = null;
static reactionsPopupAnimation2 = null;
static reactionsPopupLikeId = null;
static reactionsPopupMouseOutHandler = null;
static reactionsPopupOpacityState = 0;
static reactionsPopupTouchStartIn = null;
static reactionsPopupPositionY = null;
static blockTouchEndByScroll = false;
static reactionsPopupMobileTouchEndHandler = this.reactionsPopupMobileTouchEnd.bind(this);
static reactionsPopupMobileTouchMoveHandler = this.reactionsPopupMobileTouchMove.bind(this);
static reactionsPopupMobileHideHandler = this.reactionsPopupMobileHide.bind(this);
static getTopUsersText(params)
{
const currentUserId = Number(Loc.getMessage('USER_ID'));
const you = (!Type.isUndefined(params.you) ? !!params.you : false);
const topList = (!Type.isUndefined(params.top) && Type.isArray(params.top) ? params.top : []);
const more = (!Type.isUndefined(params.more) ? Number(params.more) : 0);
let result = '';
if (
topList.length <= 0
&& !you
&& (
RatingManager.mobile
|| more <= 0
)
)
{
return result;
}
if (RatingManager.mobile)
{
if (you)
{
topList.push({
ID: currentUserId,
NAME_FORMATTED: Loc.getMessage('RATING_LIKE_TOP_TEXT3_YOU'),
WEIGHT: 1,
});
}
result = Loc.getMessage(`RATING_LIKE_TOP_TEXT3_${(topList.length > 1 ? '2' : '1')}`)
.replace('#OVERFLOW_START#', RatingManager.mobile ? '<span class="feed-post-emoji-text-item-overflow">' : '')
.replace('#OVERFLOW_END#', RatingManager.mobile ? '</span>' : '');
}
else
{
result = Loc.getMessage(`RATING_LIKE_TOP_TEXT2_${(you ? 'YOU_' : '')}${(topList.length)}${(more > 0 ? '_MORE' : '')}`)
.replace('#OVERFLOW_START#', RatingManager.mobile ? '<span class="feed-post-emoji-text-item-overflow">' : '')
.replace('#OVERFLOW_END#', RatingManager.mobile ? '</span>' : '')
.replace('#MORE_START#', RatingManager.mobile ? '<span class="feed-post-emoji-text-item-more">' : ' ')
.replace('#MORE_END#', RatingManager.mobile ? '</span>' : '');
}
if (RatingManager.mobile)
{
topList.sort((a, b) => {
if (parseInt(a.ID) === currentUserId)
{
return -1;
}
if (parseInt(b.ID) === currentUserId)
{
return 1;
}
if (parseFloat(a.WEIGHT) === parseFloat(b.WEIGHT))
{
return 0;
}
return (parseFloat(a.WEIGHT) > parseFloat(b.WEIGHT) ? -1 : 1);
});
const userNameList = topList.map((item) => {
return item.NAME_FORMATTED;
});
let userNameBegin = '';
let userNameEnd = '';
if (userNameList.length === 1)
{
userNameBegin = userNameList.pop();
userNameEnd = '';
}
else
{
userNameBegin = userNameList.slice(0, userNameList.length - 1)
.join(Loc.getMessage('RATING_LIKE_TOP_TEXT3_USERLIST_SEPARATOR').replace(/#USERNAME#/g, ''));
userNameEnd = userNameList[userNameList.length - 1];
}
result = result.replace('#USER_LIST_BEGIN#', userNameBegin)
.replace('#USER_LIST_END#', userNameEnd);
}
else
{
topList.forEach((item, i) => {
result = result.replace(
`#USER_${(Number(i) + 1)}#`,
`<span class="feed-post-emoji-text-item">${item.NAME_FORMATTED}</span>`
);
});
result = result.replace('#USERS_MORE#', '<span class="feed-post-emoji-text-item">' + more + '</span>');
}
return result;
}
static getUserReaction(params)
{
return (
Type.isDomNode(params.userReactionNode)
? params.userReactionNode.getAttribute('data-value')
: ''
);
}
static setReaction(params)
{
if (
Type.isUndefined(params.rating)
|| !Type.isStringFilled(params.likeId)
)
{
return;
}
const action = (Type.isStringFilled(params.action) ? params.action : 'add');
if (!['add', 'cancel', 'change'].includes(action))
{
return;
}
const likeId = params.likeId;
const rating = params.rating;
const userReaction = (Type.isStringFilled(params.userReaction) ? params.userReaction : Loc.getMessage('RATING_LIKE_REACTION_DEFAULT'));
const userReactionOld = (Type.isStringFilled(params.userReactionOld) ? params.userReactionOld : Loc.getMessage('RATING_LIKE_REACTION_DEFAULT'));
if (
action === 'change'
&& userReaction === userReactionOld
)
{
return;
}
const totalCount = (!Type.isUndefined(params.totalCount) ? Number(params.totalCount) : null);
const currentUserId = Number(Loc.getMessage('USER_ID'));
const userId = (!Type.isUndefined(params.userId) ? Number(params.userId) : currentUserId);
const userReactionNode = this.getNode(rating.userReactionNode);
const reactionsNode = this.getNode(rating.reactionsNode);
const topPanel = this.getNode(rating.topPanel);
const topPanelContainer = this.getNode(rating.topPanelContainer);
const topUsersText = this.getNode(rating.topUsersText);
const countText = this.getNode(rating.countText);
const buttonText = this.getNode(rating.buttonText);
if (
userId === currentUserId // not pull
&& userReactionNode
)
{
userReactionNode.setAttribute('data-value', [ 'add', 'change' ].includes(action) ? userReaction : '');
}
let i = 0;
let elements = [];
let elementsNew = [];
if (
totalCount !== null
&& topPanel
&& topUsersText
&& reactionsNode
)
{
if (totalCount > 0)
{
topPanelContainer.classList.add('feed-post-emoji-top-panel-container-active');
if (!topPanel.classList.contains('feed-post-emoji-container-toggle'))
{
topPanel.classList.add('feed-post-emoji-container-toggle');
topUsersText.classList.add('feed-post-emoji-move-to-right');
reactionsNode.classList.add('feed-post-emoji-icon-box-show');
}
}
else if (totalCount <= 0)
{
topPanelContainer.classList.remove('feed-post-emoji-top-panel-container-active');
if (topPanel.classList.contains('feed-post-emoji-container-toggle'))
{
topPanel.classList.remove('feed-post-emoji-container-toggle');
topUsersText.classList.remove('feed-post-emoji-move-to-right');
reactionsNode.classList.remove('feed-post-emoji-icon-box-show');
}
}
}
if (
totalCount !== null
&& countText
)
{
if (
totalCount <= 0
&& !countText.classList.contains('feed-post-emoji-text-counter-invisible')
)
{
countText.classList.add('feed-post-emoji-text-counter-invisible');
}
else if (
totalCount > 0
&& countText.classList.contains('feed-post-emoji-text-counter-invisible')
)
{
countText.classList.remove('feed-post-emoji-text-counter-invisible');
}
}
if (reactionsNode)
{
const reactionsContainer = reactionsNode.querySelector('.feed-post-emoji-icon-container');
elements = reactionsNode.querySelectorAll('.feed-post-emoji-icon-item');
if (reactionsContainer)
{
let found = false;
let newValue = false;
elements.forEach((element) => {
const reactionValue = element.getAttribute('data-reaction');
const reactionCount = Number(element.getAttribute('data-value'));
if (reactionValue === userReaction)
{
found = true;
if (action === 'cancel')
{
newValue = (reactionCount > 0 ? reactionCount - 1 : 0);
}
else if ([ 'add', 'change' ].includes(action))
{
newValue = reactionCount + 1;
}
if (newValue > 0 && newValue > reactionCount)
{
elementsNew.push({
reaction: reactionValue,
count: newValue,
animate: {
type: 'pop',
},
});
}
else if (newValue > 0)
{
elementsNew.push({
reaction: reactionValue,
count: reactionCount,
animate: false,
});
}
}
else if (
action === 'change'
&& reactionValue === userReactionOld
)
{
newValue = (reactionCount > 0 ? reactionCount - 1 : 0);
if (newValue > 0)
{
elementsNew.push({
reaction: reactionValue,
count: newValue,
animate: false,
});
}
}
else
{
elementsNew.push({
reaction: reactionValue,
count: reactionCount,
animate: false,
});
}
});
if (
['add', 'change'].includes(action)
&& !found
)
{
elementsNew.push({
reaction: userReaction,
count: 1,
animate: true,
});
}
Dom.clean(reactionsContainer);
if (topPanel)
{
if (elementsNew.length > 0)
{
topPanel.classList.add('feed-post-emoji-container-nonempty');
}
else
{
topPanel.classList.remove('feed-post-emoji-container-nonempty');
}
if (RatingManager.mobile)
{
const commentNode = topPanel.closest('.post-comment-block');
if (commentNode)
{
if (elementsNew.length > 0)
{
commentNode.classList.add('comment-block-rating-nonempty');
}
else
{
commentNode.classList.remove('comment-block-rating-nonempty');
}
}
}
}
this.drawReactions({
likeId: likeId,
container: reactionsContainer,
data: elementsNew,
});
}
}
if (
userId === currentUserId
&& buttonText
)
{
if ([ 'add', 'change' ].includes(action))
{
buttonText.innerHTML = Loc.getMessage(`RATING_LIKE_EMOTION_${userReaction.toUpperCase()}_CALC`);
if (RatingManager.mobile)
{
buttonText.parentElement.className = '';
buttonText.parentElement.classList.add(
'bx-ilike-left-wrap',
'bx-you-like-button',
`bx-you-like-button-${userReaction.toLowerCase()}`
);
}
}
else
{
buttonText.innerHTML = Loc.getMessage('RATING_LIKE_EMOTION_LIKE_CALC');
if (RatingManager.mobile)
{
buttonText.parentElement.className = 'bx-ilike-left-wrap';
}
}
}
}
static drawReactions(params)
{
const container = (Type.isDomNode(params.container) ? params.container : null);
const data = (Type.isArray(params.data) ? params.data : []);
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : '')
if (
!container
|| !Type.isStringFilled(likeId)
)
{
return;
}
const reactionEvents = (
RatingManager.mobile
? {}
: {
click: this.resultReactionClick.bind(this),
mouseenter: this.resultReactionMouseEnter.bind(this),
mouseleave: this.resultReactionMouseLeave.bind(this),
}
);
Dom.clean(container);
const reactionsData = {};
data.forEach((element, i) => {
const classList = [
'feed-post-emoji-icon-item',
`feed-post-emoji-icon-item-${(i+1)}`,
];
if (element?.animate)
{
if (element.animate?.type === 'pop')
{
classList.push('feed-post-emoji-animation-pop');
}
else if (i >= 1)
{
classList.push('feed-post-emoji-icon-animate');
}
else if (data.length == 1)
{
classList.push('feed-post-emoji-animation-pop');
}
}
const emojiContainer = Dom.create('div', {
props: {
id: `bx-ilike-result-reaction-${element.reaction}-${likeId}`,
className: classList.join(' '),
},
attrs: {
'data-reaction': element.reaction,
'data-value': element.count,
'data-like-id': likeId,
title: Loc.getMessage(`RATING_LIKE_EMOTION_${element.reaction.toUpperCase()}_CALC`),
},
events: reactionEvents,
});
const animation = Lottie.loadAnimation({
animationData: this.reactionsAnimationData[element.reaction],
container: emojiContainer,
loop: false,
autoplay: false,
renderer: 'svg',
rendererSettings: {
viewBoxOnly: true,
}
});
if (Boolean(element.animate))
{
setTimeout(() => {
animation.play();
}, 200);
}
container.appendChild(emojiContainer);
reactionsData[element.reaction] = element.count;
});
container.setAttribute('data-reactions-data', JSON.stringify(reactionsData));
}
static showReactionsPopup(params)
{
const bindElement = this.getNode(params.bindElement);
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : '');
if (
!bindElement
|| !Type.isStringFilled(likeId)
)
{
return false;
}
this.reactionsPopupLikeId = likeId;
if (this.reactionsPopup === null)
{
const reactionsNodesList = [];
this.reactionsList.forEach((currentEmotion, index) => {
const emojiItem = Dom.create('div', {
props: {
className: `feed-post-emoji-icon-item`,
},
attrs: {
'data-reaction': currentEmotion,
title: Loc.getMessage(`RATING_LIKE_EMOTION_${currentEmotion.toUpperCase()}_CALC`),
},
});
Lottie.loadAnimation({
renderer: 'svg',
container: emojiItem,
animationData: this.reactionsAnimationData[currentEmotion],
});
reactionsNodesList.push(emojiItem);
});
this.reactionsPopup = Dom.create('div', {
props: {
className: `feed-post-emoji-popup-container ${(RatingManager.mobile ? '--mobile' : '')}`,
},
children: [
Dom.create('div', {
props: {
className: 'feed-post-emoji-icon-inner',
},
children: reactionsNodesList,
})
],
});
this.reactionsPopup.addEventListener((RatingManager.mobile ? 'touchend' : 'click'), (e) => {
const reactionNode = (
(e.target.classList.contains('feed-post-emoji-icon-item'))
? e.target
: e.target.closest('.feed-post-emoji-icon-item')
);
if (reactionNode)
{
RatingLike.ClickVote(
e,
this.reactionsPopupLikeId,
reactionNode.getAttribute('data-reaction'),
true
);
}
e.preventDefault();
});
Dom.append(this.reactionsPopup, document.body);
}
else if (this.reactionsPopup.classList.contains('feed-post-emoji-popup-invisible'))
{
this.reactionsPopup.classList.remove('feed-post-emoji-popup-invisible');
}
else if (
RatingManager.mobile
&& this.reactionsPopup.classList.contains('feed-post-emoji-popup-invisible-final-mobile')
)
{
this.reactionsPopup.classList.remove('feed-post-emoji-popup-invisible-final-mobile');
}
else
{
return;
}
this.reactionsPopupMouseOutHandler = this.getReactionsPopupMouseOutHandler(likeId);
const bindElementPosition = pos(bindElement);
if (
bindElement.closest('.feed-com-informers-bottom')
&& bindElement.closest('.iframe-comments-cont, .task-iframe-popup')
)
{
bindElementPosition.left += 100;
}
const inverted = ((bindElementPosition.top - GetWindowSize().scrollTop) < 80);
const deltaY = (inverted ? 15 : -45);
if (inverted)
{
this.reactionsPopup.classList.add('feed-post-emoji-popup-inverted');
}
else
{
this.reactionsPopup.classList.remove('feed-post-emoji-popup-inverted');
}
const likeInstance = RatingLike.getInstance(likeId);
if (RatingManager.mobile)
{
this.touchMoveDeltaY = (inverted ? 60 : -45);
Dom.adjust(this.reactionsPopup, {
style: {
left: '12px',
top: ((inverted ? (bindElementPosition.top - 23) : (bindElementPosition.top - 28)) + deltaY) + 'px',
width: '330px',
borderRadius: '61px',
},
});
this.reactionsPopup.classList.remove('feed-post-emoji-popup-invisible-final');
this.reactionsPopup.classList.add('feed-post-emoji-popup-active-final');
this.reactionsPopup.classList.add('feed-post-emoji-popup-active-final-item');
likeInstance.box.classList.add('feed-post-emoji-control-active');
this.reactionsPopupMobileDisableScroll();
}
else
{
this.reactionsPopupAnimation = new BX.easing({
duration: 300,
start: {
width: 100,
left: (bindElementPosition.left + (bindElementPosition.width / 2) - 50),
top: ((inverted ? bindElementPosition.top - 30 : bindElementPosition.top + 30 ) + deltaY),
borderRadius: 0,
opacity: 0,
},
finish: {
width: 300,
left: (bindElementPosition.left + (bindElementPosition.width / 2) - 133),
top: (bindElementPosition.top + deltaY - 5),
borderRadius: 50,
opacity: 100,
},
transition : BX.easing.makeEaseInOut(BX.easing.transitions.cubic),
step: (state) => {
if (!this.reactionsPopup)
{
this.reactionsPopupAnimation.stop();
return;
}
this.reactionsPopup.style.width = `${state.width}px`;
this.reactionsPopup.style.left = `${state.left}px`;
this.reactionsPopup.style.top = `${state.top}px`;
this.reactionsPopup.style.borderRadius = `${state.borderRadius}px`;
this.reactionsPopup.style.opacity = state.opacity / 100;
this.reactionsPopupOpacityState = state.opacity;
},
complete: () => {
if (!this.reactionsPopup)
{
return;
}
this.reactionsPopup.style.opacity = '';
this.reactionsPopup.classList.add('feed-post-emoji-popup-active-final');
likeInstance.box.classList.add('feed-post-emoji-control-active');
if (Type.isFunction(params.onComplete))
{
params.onComplete();
}
},
});
this.reactionsPopupAnimation.animate();
setTimeout(() => {
if (!this.reactionsPopup)
{
return;
}
const reactions = this.reactionsPopup.querySelectorAll('.feed-post-emoji-icon-item');
this.reactionsPopupAnimation2 = new BX.easing({
duration: 140,
start: {
opacity: 0,
},
finish: {
opacity: 100
},
transition : BX.easing.transitions.cubic,
step: (state) => {
reactions[0].style.opacity = state.opacity / 100;
reactions[1].style.opacity = state.opacity / 100;
reactions[2].style.opacity = state.opacity / 100;
reactions[3].style.opacity = state.opacity / 100;
reactions[4].style.opacity = state.opacity / 100;
reactions[5].style.opacity = state.opacity / 100;
reactions[6].style.opacity = state.opacity / 100;
},
complete: () => {
this.reactionsPopup.classList.add('feed-post-emoji-popup-active-final-item');
reactions[0].style.opacity = '';
reactions[1].style.opacity = '';
reactions[2].style.opacity = '';
reactions[3].style.opacity = '';
reactions[4].style.opacity = '';
reactions[5].style.opacity = '';
reactions[6].style.opacity = '';
},
});
this.reactionsPopupAnimation2.animate();
}, 100);
}
if (!this.reactionsPopup.classList.contains('feed-post-emoji-popup-active'))
{
this.reactionsPopup.classList.add('feed-post-emoji-popup-active');
}
if (!RatingManager.mobile)
{
document.addEventListener('mousemove', this.reactionsPopupMouseOutHandler);
}
else
{
this.touchScrollTop = GetWindowSize().scrollTop;
this.hasMobileTouchMoved = null;
window.addEventListener('touchend', this.reactionsPopupMobileTouchEndHandler);
window.addEventListener('touchmove', this.reactionsPopupMobileTouchMoveHandler);
}
}
static reactionsPopupMobileTouchEnd(e)
{
const coords = {
x: e.changedTouches[0].pageX, // e.touches[0].clientX + window.pageXOffset
y: e.changedTouches[0].pageY, // e.touches[0].clientY + window.pageYOffset
};
if (this.hasMobileTouchMoved === true)
{
let userReaction = null;
const reactionNode = this.reactionsPopupMobileGetHoverNode(coords.x, coords.y);
if (
reactionNode
&& (userReaction = reactionNode.getAttribute('data-reaction'))
)
{
RatingLike.ClickVote(
e,
this.reactionsPopupLikeId,
userReaction,
true
);
}
this.reactionsPopupMobileHideHandler();
}
else // show reactions popup and handle clicks
{
window.addEventListener('touchend', this.reactionsPopupMobileHideHandler);
}
window.removeEventListener('touchend', this.reactionsPopupMobileTouchEndHandler);
window.removeEventListener('touchmove', this.reactionsPopupMobileTouchMoveHandler);
this.touchStartPosition = null;
e.preventDefault();
}
static reactionsPopupMobileTouchMove(e)
{
const coords = {
x: e.touches[0].pageX, // e.touches[0].clientX + window.pageXOffset
y: e.touches[0].pageY, // e.touches[0].clientY + window.pageYOffset
};
this.touchCurrentPosition = {
x: coords.x,
y: coords.y,
};
if (this.touchStartPosition === null)
{
this.touchStartPosition = {
x: coords.x,
y: coords.y,
};
}
else
{
if (this.hasMobileTouchMoved !== true)
{
this.hasMobileTouchMoved = !this.reactionsPopupMobileCheckTouchMove();
}
}
if (this.hasMobileTouchMoved === true)
{
const reactionNode = this.reactionsPopupMobileGetHoverNode(coords.x, coords.y);
if (reactionNode)
{
if (
this.currentReactionNodeHover
&& this.currentReactionNodeHover !== reactionNode
)
{
this.reactionsPopupMobileRemoveHover(this.currentReactionNodeHover);
}
this.reactionsPopupMobileAddHover(reactionNode);
this.currentReactionNodeHover = reactionNode;
}
else if (this.currentReactionNodeHover)
{
this.reactionsPopupMobileRemoveHover(this.currentReactionNodeHover);
}
}
else
{
if (this.currentReactionNodeHover)
{
this.reactionsPopupMobileRemoveHover(this.currentReactionNodeHover);
}
}
}
static blockReactionsPopup()
{
if (this.blockShowPopupTimeout)
{
window.clearTimeout(this.blockShowPopupTimeout);
}
this.blockShowPopup = true;
this.blockShowPopupTimeout = setTimeout(() => {
this.blockShowPopup = false;
}, 500);
}
static hideReactionsPopup(params)
{
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : false);
if (this.reactionsPopup)
{
if (RatingManager.mobile)
{
this.reactionsPopup.classList.add('feed-post-emoji-popup-invisible-final');
this.reactionsPopup.classList.add('feed-post-emoji-popup-invisible-final-mobile');
this.reactionsPopup.classList.remove('feed-post-emoji-popup-active');
this.reactionsPopup.classList.remove('feed-post-emoji-popup-active-final');
this.reactionsPopup.classList.remove('feed-post-emoji-popup-active-final-item');
this.reactionsPopupMobileEnableScroll();
Dom.remove(this.reactionsPopup);
this.reactionsPopup = null;
}
else
{
if (this.reactionsPopupAnimation)
{
this.reactionsPopupAnimation.stop();
}
if (this.reactionsPopupAnimation2)
{
this.reactionsPopupAnimation2.stop();
}
this.reactionsPopup.classList.add('feed-post-emoji-popup-invisible');
this.reactionsPopupAnimation4 = new BX.easing({
duration: 500,
start: {
opacity: this.reactionsPopupOpacityState,
},
finish: {
opacity: 0,
},
transition: BX.easing.transitions.linear,
step: (state) => {
this.reactionsPopup.style.opacity = state.opacity / 100;
this.reactionsPopupOpacityState = state.opacity;
},
complete: () => {
this.reactionsPopup.style.opacity = '';
this.reactionsPopup.classList.add('feed-post-emoji-popup-invisible-final');
this.reactionsPopup.classList.remove('feed-post-emoji-popup-active');
this.reactionsPopup.classList.remove('feed-post-emoji-popup-active-final');
this.reactionsPopup.classList.remove('feed-post-emoji-popup-active-final-item');
Dom.remove(this.reactionsPopup);
this.reactionsPopup = null;
},
});
this.reactionsPopupAnimation4.animate();
}
this.reactionsPopupLikeId = null;
if (likeId)
{
RatingLike.getInstance(likeId).box.classList.remove('feed-post-emoji-control-active');
}
}
this.reactionsPopupMobileRemoveHover(this.currentReactionNodeHover);
if (likeId)
{
this.bindReactionsPopup({
likeId: likeId,
});
}
}
static reactionsPopupMobileCheckTouchMove()
{
if (this.touchStartPosition === null)
{
return true;
}
else
{
if (
Math.abs(this.touchCurrentPosition.x - this.touchStartPosition.x) > 5
|| Math.abs(this.touchCurrentPosition.y - this.touchStartPosition.y) > 5
)
{
return false;
}
}
return true;
}
static reactionsPopupMobileHide(e)
{
window.removeEventListener('touchend', this.reactionsPopupMobileHideHandler);
if (this.reactionsPopupLikeId)
{
this.hideReactionsPopup({
likeId: this.reactionsPopupLikeId,
});
if (e)
{
e.preventDefault();
}
}
}
static reactionsPopupMobileGetHoverNode(x, y)
{
const nodeAboveFinger = document.elementFromPoint(x, (y + this.touchMoveDeltaY - this.touchScrollTop));
const nodeBelowFinger = document.elementFromPoint(x, (y - this.touchScrollTop));
const iconNodeAboveFinger = nodeAboveFinger?.closest('[data-reaction]');
const iconNodeBelowFinger = nodeBelowFinger?.closest('[data-reaction]');
const reactionNode = iconNodeAboveFinger || iconNodeBelowFinger;
const userReaction = reactionNode?.getAttribute('data-reaction');
return Type.isStringFilled(userReaction) ? reactionNode : null;
}
static reactionsPopupMobileAddHover(reactionNode)
{
if (!reactionNode)
{
return;
}
reactionNode.classList.add('feed-post-emoji-icon-item-hover');
}
static reactionsPopupMobileRemoveHover(reactionNode)
{
if (!reactionNode)
{
return;
}
reactionNode.classList.remove('feed-post-emoji-icon-item-hover');
}
static reactionsPopupMobileEnableScroll()
{
document.removeEventListener('touchmove', this.touchMoveScrollListener, { passive: false });
EventEmitter.emit('onPullDownEnable');
if (this.mobileOverlay !== null)
{
Dom.clean(this.mobileOverlay);
Dom.remove(this.mobileOverlay);
this.mobileOverlay = null;
}
}
static reactionsPopupMobileDisableScroll()
{
document.addEventListener('touchmove', this.touchMoveScrollListener, { passive: false });
if (app)
{
app.exec('disableTabScrolling');
}
EventEmitter.emit('onPullDownDisable');
if (!Type.isNull(this.mobileOverlay))
{
return;
}
this.mobileOverlay = Dom.create('DIV', {
props: {
className: 'feed-post-emoji-popup-mobile-overlay',
},
});
setTimeout(() => {
if (Type.isNull(this.mobileOverlay))
{
return
}
Dom.append(this.mobileOverlay, document.body);
}, 1000); // to avoid blink
}
static bindReactionsPopup(params) {
if (RatingManager.mobile)
{
return false;
}
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : '');
if (!Type.isStringFilled(likeId))
{
return false;
}
const likeInstance = RatingLike.getInstance(likeId);
if (!likeInstance)
{
return false;
}
likeInstance.mouseOverHandler = Runtime.debounce(this.getMouseOverHandler(likeId), 500);
likeInstance.box.addEventListener('mouseenter', likeInstance.mouseOverHandler);
likeInstance.box.addEventListener('mouseleave', this.blockReactionsPopup);
}
static touchMoveScrollListener(e)
{
e.preventDefault();
}
static getReactionsPopupMouseOutHandler(likeId)
{
return (e) => {
if (!this.reactionsPopup)
{
document.removeEventListener('mousemove', this.reactionsPopupMouseOutHandler)
this.reactionsPopupMouseOutHandler = null;
return;
}
const popupPosition = this.reactionsPopup.getBoundingClientRect();
const inverted = this.reactionsPopup.classList.contains('feed-post-emoji-popup-inverted');
if (
e.clientX >= popupPosition.left
&& e.clientX <= popupPosition.right
&& e.clientY >= popupPosition.top - (inverted ? 25 : 0)
&& e.clientY <= (popupPosition.bottom + (inverted ? 0 : 25))
)
{
return;
}
this.blockReactionsPopup();
this.hideReactionsPopup({
likeId: likeId
});
document.removeEventListener('mousemove', this.reactionsPopupMouseOutHandler)
this.reactionsPopupMouseOutHandler = null;
};
}
static getMouseOverHandler(likeId)
{
return () => {
const likeInstance = RatingLike.getInstance(likeId);
if (
this.reactionsPopup
&& !this.reactionsPopup?.classList.contains('feed-post-emoji-popup-invisible')
&& !(
RatingManager.mobile
&& this.reactionsPopup?.classList.contains('feed-post-emoji-popup-invisible-final-mobile')
)
)
{
return;
}
if (!this.afterClickBlockShowPopup)
{
if (this.blockShowPopup)
{
return;
}
if (RatingManager.mobile)
{
app.exec('callVibration');
}
this.showReactionsPopup({
bindElement: likeInstance.box,
likeId: likeId,
onComplete: () => {
likeInstance.box.removeEventListener('mouseenter', likeInstance.mouseOverHandler);
likeInstance.box.removeEventListener('mouseleave', this.blockReactionsPopup.bind(this));
},
});
}
};
}
static buildPopupContent(params)
{
const clear = (params.clear ? Boolean(params.clear) : false);
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : '');
const rating = params.rating;
const requestReaction = (Type.isStringFilled(params.reaction) ? params.reaction : '');
const page = (Number(params.page) > 0 ? Number(params.page) : 1);
const data = params.data;
const reaction = false;
const reactionsList = [];
let reactionsCount = 0;
if (
clear
&& page === 1
)
{
this.clearPopupContent({
likeId: likeId,
});
}
this.popupCurrentReaction = (Type.isStringFilled(requestReaction) ? requestReaction : 'all');
if (
requestReaction.length <= 0
|| requestReaction == 'all'
) // first current tab
{
this.popupSizeInitialized = false;
document.getElementById(`bx-ilike-popup-cont-${likeId}`).style.height = 'auto';
document.getElementById(`bx-ilike-popup-cont-${likeId}`).style.minWidth = 'auto';
}
if (!Type.isStringFilled(requestReaction))
{
this.popupPagesList = {};
}
this.popupPagesList[(requestReaction == '' ? 'all' : requestReaction)] = (page + 1);
if (Type.isPlainObject(data.reactions))
{
Object.entries(data.reactions).forEach(([ reaction, count ]) => {
if (Number(count) <= 0)
{
return;
}
reactionsList.push({
reaction: reaction,
count: Number(count)
});
reactionsCount++;
});
}
const tabsNode = Dom.create('span', {
props: {
className: 'bx-ilike-popup-head',
},
});
if (reactionsCount > 1)
{
const headClassList = [ 'bx-ilike-popup-head-item' ];
if (!Type.isStringFilled(requestReaction) || requestReaction == 'all')
{
headClassList.push('bx-ilike-popup-head-item-current');
}
tabsNode.appendChild(Dom.create('span', {
props: {
className: headClassList.join(' '),
},
children: [
Dom.create('span', {
props: {
className: 'bx-ilike-popup-head-icon feed-post-emoji-icon-all',
},
}),
Dom.create('span', {
props: {
className: 'bx-ilike-popup-head-text',
},
html: Loc.getMessage('RATING_LIKE_POPUP_ALL').replace('#CNT#', Number(data.items_all)),
})
],
events: {
click: ((e) => {
this.changePopupTab({
likeId: likeId,
rating: rating,
reaction: 'all',
});
e. preventDefault();
}),
},
}));
}
if (reactionsCount === 0)
{
reactionsList.push({
reaction: Loc.getMessage('RATING_LIKE_REACTION_DEFAULT'),
count: Number(data.items_all),
});
}
reactionsList.sort((a, b) => {
const sample = {
like: 0,
kiss: 1,
laugh: 2,
wonder: 3,
cry: 4,
angry: 5,
facepalm: 6,
};
if (sample[a.reaction] < sample[b.reaction])
{
return -1;
}
if (sample[a.reaction] > sample[b.reaction])
{
return 1;
}
return 0;
});
reactionsList.forEach((reactionData) => {
const headItemClassList = [ 'bx-ilike-popup-head-item' ];
if (requestReaction === reactionData.reaction)
{
headItemClassList.push('bx-ilike-popup-head-item-current');
}
tabsNode.appendChild(Dom.create('span', {
props: {
className: headItemClassList.join(' '),
},
attrs: {
title: Loc.getMessage(`RATING_LIKE_EMOTION_${reactionData.reaction.toUpperCase()}_CALC`),
},
children: [
Dom.create('span', {
props: {
className: [
'bx-ilike-popup-head-icon',
'feed-post-emoji-icon-item',
`feed-post-emoji-icon-${reactionData.reaction}`,
].join(' '),
}
}),
Dom.create('span', {
props: {
className: 'bx-ilike-popup-head-text',
},
html: reactionData.count,
})
],
events: {
click: (e) => {
const popupContent = document.getElementById(`bx-ilike-popup-cont-${likeId}`);
const popupContentPosition = popupContent.getBoundingClientRect();
if (
requestReaction.length <= 0
|| requestReaction === 'all'
) // first current tab
{
this.popupSizeInitialized = true;
popupContent.style.height = `${popupContentPosition.height}px`;
popupContent.style.minWidth = `${popupContentPosition.width}px`;
}
else
{
if (popupContentPosition.width > Number(popupContent.style.minWidth))
{
popupContent.style.minWidth = `${popupContentPosition.width}px`;
}
}
this.changePopupTab({
likeId: likeId,
rating: rating,
reaction: reactionData.reaction,
});
e. preventDefault();
},
},
}));
});
let usersNode = rating.popupContent.querySelector('.bx-ilike-popup-content-container');
let usersNodeExists = false;
if (!usersNode)
{
usersNode = Dom.create('span', {
props: {
className: 'bx-ilike-popup-content-container',
}
});
}
else
{
usersNodeExists = true;
}
usersNode.querySelectorAll('.bx-ilike-popup-content').forEach((contentNode) => {
contentNode.classList.add('bx-ilike-popup-content-invisible');
});
let reactionUsersNode = usersNode.querySelector(`.bx-ilike-popup-content-${this.popupCurrentReaction}`);
if (!reactionUsersNode)
{
reactionUsersNode = Dom.create('span', {
props: {
className: [
'bx-ilike-popup-content',
`bx-ilike-popup-content-${this.popupCurrentReaction}`,
].join(' '),
}
});
usersNode.appendChild(reactionUsersNode);
}
else
{
reactionUsersNode.classList.remove('bx-ilike-popup-content-invisible');
}
data.items.forEach((item) => {
const userItemClassList = [ 'bx-ilike-popup-user-item' ];
if (Type.isStringFilled(item.USER_TYPE))
{
userItemClassList.push(`bx-ilike-popup-user-item-${item.USER_TYPE}`);
}
reactionUsersNode.appendChild(Dom.create('a', {
props: {
className: userItemClassList.join(' '),
},
attrs: {
href: item.URL,
target: '_blank',
},
children: [
Dom.create('span', {
props: {
className: 'bx-ilike-popup-user-icon',
},
style: (
Type.isStringFilled(item.PHOTO_SRC)
? {
'background-image': `url("${encodeURI(item.PHOTO_SRC)}")`,
}
: {}
)
}),
Dom.create('span', {
props: {
className: 'bx-ilike-popup-user-name'
},
html: item.FULL_NAME,
}),
Dom.create('span', {
props: {
className: 'bx-ilike-popup-user-status',
},
}),
],
}));
});
const waitNode = rating.popupContent.querySelector('.bx-ilike-wait');
if (waitNode)
{
Dom.clean(waitNode);
Dom.remove(waitNode);
}
const tabsNodeOld = rating.popupContent.querySelector('.bx-ilike-popup-head');
if (tabsNodeOld)
{
tabsNodeOld.parentNode.insertBefore(tabsNode, tabsNodeOld);
tabsNodeOld.parentNode.removeChild(tabsNodeOld);
}
else
{
rating.popupContent.appendChild(tabsNode);
}
if (!usersNodeExists)
{
rating.popupContent.appendChild(usersNode);
}
}
static clearPopupContent(params)
{
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : '');
const likeInstance = RatingLike.getInstance(likeId);
likeInstance.popupContent.innerHTML = '';
document.getElementById(`bx-ilike-popup-cont-${likeId}`).style.height = 'auto';
document.getElementById(`bx-ilike-popup-cont-${likeId}`).style.minWidth = 'auto';
likeInstance.popupContent.appendChild(Dom.create('span', {
props: {
className: 'bx-ilike-wait',
},
}));
}
static changePopupTab(params)
{
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : '');
const rating = params.rating;
const reaction = (Type.isStringFilled(params.reaction) ? params.reaction : '');
const contentContainerNode = rating.popupContent.querySelector('.bx-ilike-popup-content-container');
if (!contentContainerNode)
{
return false;
}
const reactionUsersNode = contentContainerNode.querySelector('.bx-ilike-popup-content-' + reaction);
if (reactionUsersNode)
{
this.popupCurrentReaction = (Type.isStringFilled(reaction) ? reaction : 'all');
rating.popupContent.querySelectorAll('.bx-ilike-popup-head-item').forEach((tabNode) => {
tabNode.classList.remove('bx-ilike-popup-head-item-current');
const reactionTabNode = tabNode.querySelector(`.feed-post-emoji-icon-${reaction}`);
if (reactionTabNode)
{
tabNode.classList.add('bx-ilike-popup-head-item-current');
}
});
contentContainerNode.querySelectorAll('.bx-ilike-popup-content').forEach((contentNode) => {
contentNode.classList.add('bx-ilike-popup-content-invisible');
});
reactionUsersNode.classList.remove('bx-ilike-popup-content-invisible');
}
else
{
ListPopup.List(likeId, 1, reaction);
}
}
static buildPopupContentNoReactions(params)
{
const page = (Number(params.page) > 0 ? Number(params.page) : 1);
const likeInstance = (!Type.isUndefined(params.rating) ? params.rating : null);
const data = params.data;
if (!likeInstance)
{
return false;
}
if (page === 1)
{
likeInstance.popupContent.innerHTML = '';
likeInstance.popupContent.appendChild(Dom.create('span', {
props: {
className: 'bx-ilike-bottom_scroll',
}
}));
}
likeInstance.popupContentPage += 1;
data.items.forEach((item) => {
let avatarNode = null;
if (Type.isStringFilled(item.PHOTO_SRC))
{
avatarNode = Dom.create('img', {
attrs: {
src: encodeURI(item.PHOTO_SRC),
},
props: {
className: 'bx-ilike-popup-avatar-img',
},
});
}
else
{
avatarNode = Dom.create('img', {
attrs: {
src: '/bitrix/images/main/blank.gif',
},
props: {
className: 'bx-ilike-popup-avatar-img bx-ilike-popup-avatar-img-default',
},
});
}
const imgClassList = [
'bx-ilike-popup-img',
];
if (Type.isStringFilled(item.USER_TYPE))
{
imgClassList.push(`bx-ilike-popup-img-${item.USER_TYPE}`);
}
likeInstance.popupContent.appendChild(
Dom.create('a', {
attrs: {
href: item.URL,
target: '_blank',
},
props: {
className: imgClassList.join(' '),
},
children: [
Dom.create('span', {
props: {
className: 'bx-ilike-popup-avatar-new',
},
children: [
avatarNode,
Dom.create('span', {
props: {
className: 'bx-ilike-popup-avatar-status-icon',
},
})
]
}),
Dom.create('span', {
props: {
className: 'bx-ilike-popup-name-new',
},
html: item.FULL_NAME,
}),
],
})
);
});
}
static afterClick(params)
{
const likeId = (Type.isStringFilled(params.likeId) ? params.likeId : '');
if (!Type.isStringFilled(likeId))
{
return;
}
this.afterClickBlockShowPopup = true;
this.afterClickHandler = this.getAfterClickHandler(likeId);
RatingLike.getInstance(likeId).box.addEventListener('mouseleave', this.afterClickHandler);
}
static getAfterClickHandler(likeId)
{
return () => {
this.afterClickBlockShowPopup = false;
RatingLike.getInstance(likeId).box.removeEventListener('mouseleave', this.afterClickHandler);
};
}
static resultReactionClick(e)
{
const likeId = e.currentTarget.getAttribute('data-like-id');
let reaction = e.currentTarget.getAttribute('data-reaction');
if (!Type.isSet(reaction))
{
reaction = '';
}
ListPopup.onResultClick({
likeId: likeId,
event: e,
reaction: reaction,
});
e.stopPropagation();
}
static resultReactionMouseEnter(e)
{
const likeId = e.currentTarget.getAttribute('data-like-id');
const reaction = e.currentTarget.getAttribute('data-reaction');
ListPopup.onResultMouseEnter({
likeId: likeId,
event: e,
reaction: reaction,
});
}
static resultReactionMouseLeave(e)
{
const likeId = e.currentTarget.getAttribute('data-like-id');
const reaction = e.currentTarget.getAttribute('data-reaction');
ListPopup.onResultMouseLeave({
likeId: likeId,
reaction: reaction,
});
}
static openMobileReactionsPage(params)
{
BXMobileApp.PageManager.loadPageBlank({
url: `${Loc.getMessage('SITE_DIR')}mobile/like/result.php`,
title: Loc.getMessage('RATING_LIKE_RESULTS'),
backdrop: {
mediumPositionPercent: 65,
},
cache: true,
data: {
entityTypeId: params.entityTypeId,
entityId: params.entityId,
}
});
}
static onRatingLike(eventData)
{
RatingLike.repo.forEach((likeInstance, likeId) => {
if (
likeInstance.entityTypeId !== eventData.entityTypeId
&& Number(likeInstance.entityId) !== Number(eventData.entityId)
)
{
return;
}
let voteAction = (Type.isStringFilled(eventData.voteAction) ? eventData.voteAction.toUpperCase() : 'ADD');
voteAction = (voteAction === 'PLUS' ? 'ADD' : voteAction);
if (
Number(eventData.userId) === Number(Loc.getMessage('USER_ID'))
&& likeInstance.button
)
{
if (voteAction === 'CANCEL')
{
likeInstance.button.classList.remove('bx-you-like-button');
}
else
{
likeInstance.button.classList.add('bx-you-like-button');
}
}
RatingLike.Draw(likeId, {
TYPE: voteAction,
USER_ID: eventData.userId,
ENTITY_TYPE_ID: eventData.entityTypeId,
ENTITY_ID: eventData.entityId,
USER_DATA: eventData.userData,
REACTION: eventData.voteReaction,
REACTION_OLD: eventData.voteReactionOld,
TOTAL_POSITIVE_VOTES: eventData.itemsAll,
});
});
}
static onMobileCommentsGet()
{
const ratingEmojiSelectorPopup = document.querySelector('.feed-post-emoji-popup-container');
if (ratingEmojiSelectorPopup)
{
ratingEmojiSelectorPopup.style.top = 0;
ratingEmojiSelectorPopup.style.left = 0;
ratingEmojiSelectorPopup.classList.remove('feed-post-emoji-popup-active');
ratingEmojiSelectorPopup.classList.remove('feed-post-emoji-popup-active-final');
ratingEmojiSelectorPopup.classList.remove('feed-post-emoji-popup-active-final-item');
ratingEmojiSelectorPopup.classList.add('feed-post-emoji-popup-invisible-final');
ratingEmojiSelectorPopup.classList.add('feed-post-emoji-popup-invisible-final-mobile');
}
}
static getNode(node)
{
if (Type.isDomNode(node))
{
return node;
}
else if (Type.isStringFilled(node))
{
return document.getElementById(node);
}
else
{
return null;
}
}
}