Telegram Web K with changes to work inside I2P https://web.telegram.i2p/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

703 lines
23 KiB

/*
* https://github.com/morethanwords/tweb
* Copyright (C) 2019-2021 Eduard Kuzmenko
* https://github.com/morethanwords/tweb/blob/master/LICENSE
*/
import mediaSizes from "../helpers/mediaSizes";
import { isTouchSupported } from "../helpers/touchSupport";
4 years ago
import appImManager from "../lib/appManagers/appImManager";
import appPollsManager, { Poll, PollResults } from "../lib/appManagers/appPollsManager";
4 years ago
import serverTimeManager from "../lib/mtproto/serverTimeManager";
import { RichTextProcessor } from "../lib/richtextprocessor";
import rootScope from "../lib/rootScope";
import { ripple } from "./ripple";
import appSidebarRight from "./sidebarRight";
import AppPollResultsTab from "./sidebarRight/tabs/pollResults";
import { i18n, LangPackKey } from "../lib/langPack";
import { fastRaf } from "../helpers/schedulers";
import SetTransition from "./singleTransition";
import findUpClassName from "../helpers/dom/findUpClassName";
import { cancelEvent } from "../helpers/dom/cancelEvent";
import { attachClickEvent, detachClickEvent } from "../helpers/dom/clickEvent";
import replaceContent from "../helpers/dom/replaceContent";
let lineTotalLength = 0;
4 years ago
//const tailLength = 9;
const times = 10;
const fullTime = 340;
const oneTime = fullTime / times;
4 years ago
export const roundPercents = (percents: number[]) => {
//console.log('roundPercents before percents:', percents);
4 years ago
const sum = percents.reduce((acc, p) => acc + Math.round(p), 0);
if(sum > 100) {
4 years ago
const diff = sum - 100;
const length = percents.length;
for(let i = 0; i < diff; ++i) {
let minIndex = -1, minRemainder = 1;
for(let k = 0; k < length; ++k) {
let remainder = percents[k] % 1;
if(remainder >= 0.5 && remainder < minRemainder) {
minRemainder = remainder;
minIndex = k;
}
}
if(minIndex === -1) {
4 years ago
//throw new Error('lol chto');
return;
}
percents[minIndex] -= minRemainder;
}
} else if(sum < 100) {
4 years ago
const diff = 100 - sum;
const length = percents.length;
for(let i = 0; i < diff; ++i) {
let minIndex = -1, maxRemainder = 0;
for(let k = 0; k < length; ++k) {
let remainder = percents[k] % 1;
if(remainder < 0.5 && remainder > maxRemainder) {
maxRemainder = remainder;
minIndex = k;
}
}
if(minIndex === -1) {
4 years ago
//throw new Error('lol chto');
return;
}
percents[minIndex] += 1 - maxRemainder;
}
}
//console.log('roundPercents after percents:', percents);
};
/* const connectedPolls: {id: string, element: PollElement}[] = [];
rootScope.on('poll_update', (e) => {
const {poll, results} = e as {poll: Poll, results: PollResults};
4 years ago
//console.log('poll_update', poll, results);
for(const connected of connectedPolls) {
if(connected.id === poll.id) {
4 years ago
const pollElement = connected.element;
pollElement.isClosed = !!poll.pFlags.closed;
pollElement.performResults(results, poll.chosenIndexes);
}
}
}); */
rootScope.addEventListener('poll_update', (e) => {
const {poll, results} = e as {poll: Poll, results: PollResults};
const pollElements = Array.from(document.querySelectorAll(`poll-element[poll-id="${poll.id}"]`)) as PollElement[];
pollElements.forEach(pollElement => {
//console.log('poll_update', poll, results);
pollElement.isClosed = !!poll.pFlags.closed;
pollElement.performResults(results, poll.chosenIndexes);
});
});
rootScope.addEventListener('peer_changed', () => {
4 years ago
if(prevQuizHint) {
hideQuizHint(prevQuizHint, prevQuizHintOnHide, prevQuizHintTimeout);
}
});
const hideQuizHint = (element: HTMLElement, onHide: () => void, timeout: number) => {
element.classList.remove('active');
clearTimeout(timeout);
setTimeout(() => {
onHide();
element.remove();
if(prevQuizHint === element && prevQuizHintOnHide === onHide && prevQuizHintTimeout === timeout) {
4 years ago
prevQuizHint = prevQuizHintOnHide = null;
prevQuizHintTimeout = 0;
}
}, 200);
};
let prevQuizHint: HTMLElement, prevQuizHintOnHide: () => void, prevQuizHintTimeout: number;
const setQuizHint = (solution: string, solution_entities: any[], onHide: () => void) => {
if(prevQuizHint) {
hideQuizHint(prevQuizHint, prevQuizHintOnHide, prevQuizHintTimeout);
}
const element = document.createElement('div');
element.classList.add('quiz-hint');
const container = document.createElement('div');
container.classList.add('container', 'tgico');
const textEl = document.createElement('div');
textEl.classList.add('text');
container.append(textEl);
element.append(container);
textEl.innerHTML = RichTextProcessor.wrapRichText(solution, {entities: solution_entities});
appImManager.chat.bubbles.bubblesContainer.append(element);
4 years ago
void element.offsetLeft; // reflow
element.classList.add('active');
prevQuizHint = element;
prevQuizHintOnHide = onHide;
prevQuizHintTimeout = window.setTimeout(() => {
4 years ago
hideQuizHint(element, onHide, prevQuizHintTimeout);
}, isTouchSupported ? 5000 : 7000);
4 years ago
};
export default class PollElement extends HTMLElement {
private svgLines: SVGSVGElement[];
private numberDivs: HTMLDivElement[];
private answerDivs: HTMLDivElement[];
4 years ago
private descDiv: HTMLElement;
private typeDiv: HTMLElement;
private avatarsDiv: HTMLElement;
private viewResults: HTMLElement;
private votersCountDiv: HTMLDivElement;
private maxOffset = -46.5;
4 years ago
//private maxLength: number;
//private maxLengths: number[];
private maxPercents: number[];
4 years ago
public isClosed = false;
private isQuiz = false;
private isRetracted = false;
4 years ago
private isPublic = false;
private isMultiple = false;
private chosenIndexes: number[] = [];
private percents: number[];
public message: any;
4 years ago
private quizInterval: number;
private quizTimer: SVGSVGElement;
private sendVoteBtn: HTMLElement;
private chosingIndexes: number[] = [];
private sendVotePromise: Promise<void>;
private sentVote = false;
4 years ago
constructor() {
super();
// элемент создан
}
public render() {
// браузер вызывает этот метод при добавлении элемента в документ
// (может вызываться много раз, если элемент многократно добавляется/удаляется)
if(!lineTotalLength) {
lineTotalLength = (document.getElementById('poll-line') as any as SVGPathElement).getTotalLength();
//console.log('line total length:', lineTotalLength);
}
const pollId = this.message.media.poll.id;
const {poll, results} = appPollsManager.getPoll(pollId);
/* const timestamp = Date.now() / 1000 | 0;
if(timestamp < this.message.date) { */
if(this.message.pFlags.is_scheduled) {
this.classList.add('disable-hover');
}
//console.log('pollElement poll:', poll, results);
let descKey: LangPackKey;
if(poll.pFlags) {
4 years ago
this.isPublic = !!poll.pFlags.public_voters;
this.isQuiz = !!poll.pFlags.quiz;
this.isClosed = !!poll.pFlags.closed;
this.isMultiple = !!poll.pFlags.multiple_choice;
if(this.isClosed) {
descKey = 'Chat.Poll.Type.Closed';
4 years ago
this.classList.add('is-closed');
} else if(this.isQuiz) {
descKey = this.isPublic ? 'Chat.Poll.Type.Quiz' : 'Chat.Poll.Type.AnonymousQuiz';
} else {
descKey = this.isPublic ? 'Chat.Poll.Type.Public' : 'Chat.Poll.Type.Anonymous';
}
}
4 years ago
const multipleSelect = this.isMultiple ? '<span class="poll-answer-selected tgico-check"></span>' : '';
const votes = poll.answers.map((answer, idx) => {
return `
<div class="poll-answer" data-index="${idx}">
<div class="circle-hover">
<div class="animation-ring"></div>
<svg class="progress-ring">
<circle class="progress-ring__circle" cx="13" cy="13" r="9"></circle>
</svg>
4 years ago
${multipleSelect}
</div>
<div class="poll-answer-percents"></div>
<div class="poll-answer-text">${RichTextProcessor.wrapEmojiText(answer.text)}</div>
<svg version="1.1" class="poll-line" style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${mediaSizes.active.regular.width} 35" xml:space="preserve">
<use href="#poll-line"></use>
</svg>
4 years ago
<span class="poll-answer-selected tgico"></span>
</div>
`;
}).join('');
this.innerHTML = `
<div class="poll-title">${poll.rQuestion}</div>
4 years ago
<div class="poll-desc">
<div class="poll-type"></div>
4 years ago
<div class="poll-avatars"></div>
</div>
${votes}`;
4 years ago
this.descDiv = this.firstElementChild.nextElementSibling as HTMLElement;
this.typeDiv = this.descDiv.firstElementChild as HTMLElement;
this.avatarsDiv = this.descDiv.lastElementChild as HTMLElement;
if(descKey) {
this.typeDiv.append(i18n(descKey));
}
4 years ago
if(this.isQuiz) {
this.classList.add('is-quiz');
if(poll.close_period && poll.close_date) {
const timeLeftDiv = document.createElement('div');
timeLeftDiv.classList.add('poll-time');
this.descDiv.append(timeLeftDiv);
4 years ago
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
//svg.setAttributeNS(null, 'viewBox', '0 0 15 15');
svg.classList.add('poll-quiz-timer');
this.quizTimer = svg;
4 years ago
const strokeWidth = 2;
const radius = 7;
4 years ago
const circumference = 2 * Math.PI * radius;
4 years ago
const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.classList.add('poll-quiz-timer-circle');
circle.setAttributeNS(null, 'cx', '16');
circle.setAttributeNS(null, 'cy', '16');
4 years ago
circle.setAttributeNS(null, 'r', '' + radius);
circle.setAttributeNS(null, 'stroke-width', '' + strokeWidth);
4 years ago
svg.append(circle);
this.descDiv.append(svg);
4 years ago
const period = poll.close_period * 1000;
const closeTime = (poll.close_date - serverTimeManager.serverTimeOffset) * 1000;
4 years ago
//console.log('closeTime:', poll.close_date, serverTimeManager.serverTimeOffset, Date.now() / 1000 | 0);
// let time = Date.now();
// let percents = (closeTime - time) / period;
// timeLeftDiv.innerHTML = String((closeTime - time) / 1000 + 1 | 0).toHHMMSS();
// // @ts-ignore
// circle.style.strokeDashoffset = circumference + percents * circumference;
// circle.style.strokeDasharray = ${circumference} ${circumference};
this.quizInterval = window.setInterval(() => {
4 years ago
const time = Date.now();
const percents = (closeTime - time) / period;
const timeLeft = (closeTime - time) / 1000 + 1 | 0;
timeLeftDiv.innerHTML = String(timeLeft).toHHMMSS();
if (timeLeft <= 5) {
timeLeftDiv.style.color = '#ee545c';
circle.style.stroke = '#ee545c';
}
//timeLeftDiv.style.visibility = 'visible';
// @ts-ignore
circle.style.strokeDashoffset = circumference + percents * circumference;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
4 years ago
if(time >= closeTime) {
clearInterval(this.quizInterval);
timeLeftDiv.innerHTML = '';
// @ts-ignore
circle.style.strokeDashoffset = circumference;
4 years ago
this.quizInterval = 0;
4 years ago
setTimeout(() => {
// нужно запросить апдейт чтобы опрос обновился
appPollsManager.getResults(this.message);
4 years ago
}, 3e3);
4 years ago
}
}, 1e3);
}
}
this.answerDivs = Array.from(this.querySelectorAll('.poll-answer')) as HTMLDivElement[];
this.svgLines = Array.from(this.querySelectorAll('.poll-line')) as SVGSVGElement[];
this.numberDivs = Array.from(this.querySelectorAll('.poll-answer-percents')) as HTMLDivElement[];
const footerDiv = document.createElement('div');
footerDiv.classList.add('poll-footer');
this.viewResults = document.createElement('div');
this.viewResults.className = 'poll-footer-button poll-view-results hide';
this.viewResults.append(i18n('Chat.Poll.ViewResults'));
this.votersCountDiv = document.createElement('div');
this.votersCountDiv.className = 'poll-votes-count';
footerDiv.append(this.viewResults, this.votersCountDiv);
this.append(footerDiv);
4 years ago
this.viewResults.addEventListener('click', (e) => {
cancelEvent(e);
if(!appSidebarRight.isTabExists(AppPollResultsTab)) {
new AppPollResultsTab(appSidebarRight).open(this.message);
}
4 years ago
});
ripple(this.viewResults);
if(this.isMultiple) {
this.sendVoteBtn = document.createElement('div');
this.sendVoteBtn.classList.add('poll-footer-button', 'poll-send-vote');
this.sendVoteBtn.append(i18n('Chat.Poll.SubmitVote'));
4 years ago
ripple(this.sendVoteBtn);
if(!poll.chosenIndexes.length) {
this.votersCountDiv.classList.add('hide');
}
4 years ago
attachClickEvent(this.sendVoteBtn, (e) => {
cancelEvent(e);
4 years ago
/* const indexes = this.answerDivs.filter(el => el.classList.contains('is-chosing')).map(el => +el.dataset.index);
if(indexes.length) {
} */
if(this.chosingIndexes.length) {
this.sendVotes(this.chosingIndexes).then(() => {
this.chosingIndexes.length = 0;
this.answerDivs.forEach(el => {
el.classList.remove('is-chosing');
});
});
}
});
footerDiv.append(this.sendVoteBtn);
}
4 years ago
//const width = this.getBoundingClientRect().width;
//this.maxLength = width + tailLength + this.maxOffset + -13.7; // 13 - position left
4 years ago
if(poll.chosenIndexes.length || this.isClosed) {
4 years ago
this.performResults(results, poll.chosenIndexes, false);
4 years ago
} else if(!this.isClosed) {
this.setVotersCount(results);
4 years ago
attachClickEvent(this, this.clickHandler);
}
}
4 years ago
initQuizHint(results: PollResults) {
if(results.solution && results.solution_entities) {
const toggleHint = document.createElement('div');
toggleHint.classList.add('tgico-tip', 'poll-hint');
this.descDiv.append(toggleHint);
//let active = false;
4 years ago
attachClickEvent(toggleHint, (e) => {
4 years ago
cancelEvent(e);
//active = true;
toggleHint.classList.add('active');
setQuizHint(results.solution, results.solution_entities, () => {
//active = false;
toggleHint.classList.remove('active');
});
});
if(this.sentVote) {
const correctResult = results.results.find(r => r.pFlags.correct);
if(correctResult && !correctResult.pFlags.chosen) {
toggleHint.click();
}
}
4 years ago
}
}
clickHandler(e: Event) {
4 years ago
const target = findUpClassName(e.target, 'poll-answer') as HTMLElement;
if(!target) {
return;
}
cancelEvent(e);
4 years ago
const answerIndex = +target.dataset.index;
if(this.isMultiple) {
target.classList.toggle('is-chosing');
const foundIndex = this.chosingIndexes.indexOf(answerIndex);
if(foundIndex !== -1) {
this.chosingIndexes.splice(foundIndex, 1);
} else {
this.chosingIndexes.push(answerIndex);
}
} else {
this.sendVotes([answerIndex]);
}
/* target.classList.add('is-voting');
setTimeout(() => { // simulate
this.setResults([100, 0], answerIndex);
target.classList.remove('is-voting');
}, 1000); */
}
4 years ago
sendVotes(indexes: number[]) {
if(this.sendVotePromise) return this.sendVotePromise;
const targets = this.answerDivs.filter((_, idx) => indexes.includes(idx));
targets.forEach(target => {
target.classList.add('is-voting');
});
this.classList.add('disable-hover');
this.sentVote = true;
return this.sendVotePromise = appPollsManager.sendVote(this.message, indexes).then(() => {
4 years ago
targets.forEach(target => {
target.classList.remove('is-voting');
});
this.classList.remove('disable-hover');
}).catch(() => {
this.sentVote = false;
4 years ago
}).finally(() => {
this.sendVotePromise = null;
});
}
4 years ago
performResults(results: PollResults, chosenIndexes: number[], animate = true) {
if(!rootScope.settings.animationsEnabled) {
animate = false;
}
4 years ago
if(this.isQuiz && (results.results?.length || this.isClosed)) {
this.answerDivs.forEach((el, idx) => {
el.classList.toggle('is-correct', !!results.results[idx].pFlags.correct);
});
if(this.initQuizHint) {
this.initQuizHint(results);
4 years ago
this.initQuizHint = null;
4 years ago
}
if(this.quizInterval) {
clearInterval(this.quizInterval);
this.quizInterval = 0;
}
if(this.quizTimer?.parentElement) {
this.quizTimer.remove();
}
4 years ago
const timeEl = this.descDiv.querySelector('.poll-time');
if(timeEl) {
timeEl.remove();
}
4 years ago
}
if(this.isClosed) {
this.classList.add('is-closed');
replaceContent(this.typeDiv, i18n('Chat.Poll.Type.Closed'));
4 years ago
}
// set chosen
if(this.chosenIndexes.length !== chosenIndexes.length || this.isClosed) { // if we voted
4 years ago
this.isRetracted = this.chosenIndexes.length && !chosenIndexes.length;
this.chosenIndexes = chosenIndexes.slice();
if(this.isRetracted) {
4 years ago
attachClickEvent(this, this.clickHandler);
} else {
4 years ago
detachClickEvent(this, this.clickHandler);
}
}
// is need update
4 years ago
if(this.chosenIndexes.length || this.isRetracted || this.isClosed) {
const percents = results.results.map(v => results.total_voters ? v.voters / results.total_voters * 100 : 0);
4 years ago
this.classList.toggle('no-transition', !animate);
if(animate) {
SetTransition(this, '', !this.isRetracted, 340);
}
fastRaf(() => {
4 years ago
this.setResults(this.isRetracted ? this.percents : percents, this.chosenIndexes, animate);
this.percents = percents;
this.isRetracted = false;
});
}
this.setVotersCount(results);
4 years ago
if(this.isPublic) {
if(!this.isMultiple) {
this.viewResults.classList.toggle('hide', !results.total_voters || !this.chosenIndexes.length);
this.votersCountDiv.classList.toggle('hide', !!this.chosenIndexes.length);
}
let html = '';
/**
* MACOS, ANDROID - без реверса
* WINDOWS DESKTOP - реверс
* все приложения накладывают аватарку первую на вторую, а в макете зато вторая на первую, ЛОЛ!
*/
results.recent_voters/* .slice().reverse() */.forEach((userId, idx) => {
const style = idx === 0 ? '' : `style="transform: translateX(-${idx * 3}px);"`;
html += `<avatar-element class="avatar-16" dialog="0" peer="${userId}" ${style}></avatar-element>`;
4 years ago
});
this.avatarsDiv.innerHTML = html;
}
4 years ago
if(this.isMultiple) {
this.sendVoteBtn.classList.toggle('hide', !!this.chosenIndexes.length);
if(!this.chosenIndexes.length) {
this.votersCountDiv.classList.add('hide');
this.viewResults.classList.add('hide');
} else if(this.isPublic) {
this.viewResults.classList.toggle('hide', !results.total_voters || !this.chosenIndexes.length);
this.votersCountDiv.classList.toggle('hide', !!this.chosenIndexes.length);
} else {
this.votersCountDiv.classList.toggle('hide', !this.chosenIndexes.length);
}
}
4 years ago
}
4 years ago
setResults(percents: number[], chosenIndexes: number[], animate: boolean) {
4 years ago
this.svgLines.forEach(svg => svg.style.display = '');
this.answerDivs.forEach((el, idx) => {
el.classList.toggle('is-chosen', chosenIndexes.includes(idx));
});
4 years ago
const maxValue = Math.max(...percents);
4 years ago
//this.maxLengths = percents.map(p => p / maxValue * this.maxLength);
this.maxPercents = percents.map(p => p / maxValue);
// line
if(this.isRetracted) {
this.svgLines.forEach((svg, idx) => {
this.setLineProgress(idx, -1);
});
} else {
4 years ago
const cb = () => {
this.svgLines.forEach((svg, idx) => {
//void svg.getBoundingClientRect(); // reflow
this.setLineProgress(idx, 1);
});
};
animate ? fastRaf(cb) : cb();
}
percents = percents.slice();
roundPercents(percents);
4 years ago
let getPercentValue: (percents: number, index: number) => number;
const iterate = (i: number) => {
percents.forEach((percents, idx) => {
const value = getPercentValue(percents, i);
this.numberDivs[idx].innerText = value + '%';
});
};
// numbers
if(this.isRetracted) {
4 years ago
getPercentValue = (percents, index) => Math.round(percents / times * index);
if(animate) {
for(let i = (times - 1), k = 0; i >= 0; --i, ++k) {
setTimeout(() => {
iterate(i);
}, oneTime * k);
}
} else {
iterate(0);
}
} else {
4 years ago
getPercentValue = (percents, index) => Math.round(percents / times * (index + 1));
if(animate) {
for(let i = 0; i < times; ++i) {
setTimeout(() => {
iterate(i);
}, oneTime * i);
}
} else {
iterate(times - 1);
}
}
if(this.isRetracted) {
4 years ago
if(animate) {
this.classList.add('is-retracting');
}
this.classList.remove('is-voted');
4 years ago
const cb = () => {
this.svgLines.forEach(svg => svg.style.display = 'none');
4 years ago
};
if(animate) {
setTimeout(() => {
this.classList.remove('is-retracting');
cb();
}, fullTime);
} else {
cb();
}
} else {
this.classList.add('is-voted');
}
}
setVotersCount(results: PollResults) {
4 years ago
const votersCount = results.total_voters || 0;
let key: LangPackKey, args = [votersCount];
if(this.isClosed) {
if(this.isQuiz) key = votersCount ? 'Chat.Quiz.TotalVotes' : 'Chat.Quiz.TotalVotesResultEmpty';
else key = votersCount ? 'Chat.Poll.TotalVotes1' : 'Chat.Poll.TotalVotesResultEmpty';
} else {
if(this.isQuiz) key = votersCount ? 'Chat.Quiz.TotalVotes' : 'Chat.Quiz.TotalVotesEmpty';
else key = votersCount ? 'Chat.Poll.TotalVotes1' : 'Chat.Poll.TotalVotesEmpty';
}
replaceContent(this.votersCountDiv, i18n(key, args));
}
4 years ago
setLineProgress(index: number, multiplier: number) {
4 years ago
const svg = this.svgLines[index];
4 years ago
if(multiplier === -1) {
svg.style.strokeDasharray = '';
svg.style.strokeDashoffset = '';
} else {
4 years ago
//svg.style.strokeDasharray = (percents * this.maxLengths[index]) + ', 485.9';
svg.style.strokeDasharray = (multiplier * this.maxPercents[index] * 100) + '%, 485.9';
svg.style.strokeDashoffset = '' + multiplier * this.maxOffset;
}
}
// у элемента могут быть ещё другие методы и свойства
}
customElements.define("poll-element", PollElement);