morethanwords
4 years ago
18 changed files with 1465 additions and 1413 deletions
@ -1,194 +0,0 @@ |
|||||||
//import { appImManager, appMessagesManager, appDialogsManager, apiUpdatesManager, appUsersManager } from "../lib/services";
|
|
||||||
import { openBtnMenu } from "./misc"; |
|
||||||
//import {stackBlurImage} from '../lib/StackBlur';
|
|
||||||
import appSidebarLeft from "../lib/appManagers/appSidebarLeft"; |
|
||||||
|
|
||||||
export default () => import('../lib/services').then(services => { |
|
||||||
//console.log('included services', services);
|
|
||||||
|
|
||||||
let {appImManager, appMessagesManager, appDialogsManager, apiUpdatesManager, appUsersManager} = services; |
|
||||||
//export default () => {
|
|
||||||
|
|
||||||
let pageEl = document.body.getElementsByClassName('page-chats')[0] as HTMLDivElement; |
|
||||||
pageEl.style.display = ''; |
|
||||||
|
|
||||||
apiUpdatesManager.attach(); |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
document.addEventListener('user_update', (e: CustomEvent) => { |
|
||||||
let userID = e.detail; |
|
||||||
|
|
||||||
let user = appUsersManager.getUser(userID); |
|
||||||
|
|
||||||
let dialog = appMessagesManager.getDialogByPeerID(user.id)[0]; |
|
||||||
//console.log('updating user:', user, dialog);
|
|
||||||
|
|
||||||
if(dialog && !appUsersManager.isBot(dialog.peerID) && dialog.peerID != appImManager.myID) { |
|
||||||
let online = user.status && user.status._ == 'userStatusOnline'; |
|
||||||
let dom = appDialogsManager.getDialogDom(dialog.peerID); |
|
||||||
|
|
||||||
if(dom) { |
|
||||||
if(online) { |
|
||||||
dom.avatarDiv.classList.add('is-online'); |
|
||||||
} else { |
|
||||||
dom.avatarDiv.classList.remove('is-online'); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if(appImManager.peerID == user.id) { |
|
||||||
appImManager.setPeerStatus(); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
document.addEventListener('dialog_top', (e: CustomEvent) => { |
|
||||||
let dialog: any = e.detail; |
|
||||||
|
|
||||||
appDialogsManager.setLastMessage(dialog); |
|
||||||
appDialogsManager.sortDom(); |
|
||||||
}); |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
document.addEventListener('dialogs_multiupdate', (e: CustomEvent) => { |
|
||||||
let dialogs = e.detail; |
|
||||||
|
|
||||||
let performed = 0; |
|
||||||
for(let id in dialogs) { |
|
||||||
let dialog = dialogs[id]; |
|
||||||
|
|
||||||
/////console.log('updating dialog:', dialog);
|
|
||||||
|
|
||||||
++performed; |
|
||||||
|
|
||||||
if(!(dialog.peerID in appDialogsManager.doms)) { |
|
||||||
appDialogsManager.addDialog(dialog); |
|
||||||
continue; |
|
||||||
} |
|
||||||
|
|
||||||
appDialogsManager.setLastMessage(dialog); |
|
||||||
} |
|
||||||
|
|
||||||
if(performed/* && false */) { |
|
||||||
/////////console.log('will sortDom');
|
|
||||||
appDialogsManager.sortDom(); |
|
||||||
appDialogsManager.sortDom(true); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
document.addEventListener('dialog_unread', (e: CustomEvent) => { |
|
||||||
let info: { |
|
||||||
peerID: number, |
|
||||||
count: number |
|
||||||
} = e.detail; |
|
||||||
|
|
||||||
let dialog = appMessagesManager.getDialogByPeerID(info.peerID)[0]; |
|
||||||
if(dialog) { |
|
||||||
appDialogsManager.setUnreadMessages(dialog); |
|
||||||
|
|
||||||
if(dialog.peerID == appImManager.peerID) { |
|
||||||
appImManager.updateUnreadByDialog(dialog); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
/* |
|
||||||
loadDialogs().then(result => { |
|
||||||
//appImManager.setScroll(chatScroll);
|
|
||||||
}); |
|
||||||
return; |
|
||||||
*/ |
|
||||||
|
|
||||||
|
|
||||||
/* function placeCaretAfterNode(node: HTMLElement) { |
|
||||||
if (typeof window.getSelection != "undefined") { |
|
||||||
var range = document.createRange(); |
|
||||||
range.setStartAfter(node); |
|
||||||
range.collapse(true); |
|
||||||
var selection = window.getSelection(); |
|
||||||
selection.removeAllRanges(); |
|
||||||
selection.addRange(range); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
messageInput.onclick = (e) => { |
|
||||||
let target = e.target as HTMLElement; |
|
||||||
if(target.classList.contains('emoji-inner')) { |
|
||||||
placeCaretAfterNode(target.parentElement); |
|
||||||
} else if(target.classList.contains('emoji-sizer')) { |
|
||||||
placeCaretAfterNode(target); |
|
||||||
} |
|
||||||
console.log('lol', target); |
|
||||||
}; */ |
|
||||||
|
|
||||||
/* window.addEventListener('click', function(this, e) { |
|
||||||
// @ts-ignore
|
|
||||||
let isInput = e.target.tagName == 'INPUT'; |
|
||||||
if(!isInput && !window.getSelection().toString()) { |
|
||||||
console.log('click'); |
|
||||||
messageInput.focus(); |
|
||||||
} |
|
||||||
}); */ |
|
||||||
|
|
||||||
/* fetch('assets/img/camomile.jpg') |
|
||||||
.then(res => res.blob()) |
|
||||||
.then(blob => { |
|
||||||
let img = new Image(); |
|
||||||
let url = URL.createObjectURL(blob); |
|
||||||
img.src = url; |
|
||||||
img.onload = () => { |
|
||||||
let id = 'chat-background-canvas'; |
|
||||||
var canvas = document.getElementById(id) as HTMLCanvasElement; |
|
||||||
//URL.revokeObjectURL(url);
|
|
||||||
|
|
||||||
let elements = ['.chat-container'].map(selector => { |
|
||||||
return document.querySelector(selector) as HTMLDivElement; |
|
||||||
}); |
|
||||||
|
|
||||||
stackBlurImage(img, id, 15, 0); |
|
||||||
|
|
||||||
canvas.toBlob(blob => { |
|
||||||
//let dataUrl = canvas.toDataURL('image/jpeg', 1);
|
|
||||||
let dataUrl = URL.createObjectURL(blob); |
|
||||||
|
|
||||||
elements.forEach(el => { |
|
||||||
el.style.backgroundImage = 'url(' + dataUrl + ')'; |
|
||||||
}); |
|
||||||
}, 'image/jpeg', 1); |
|
||||||
}; |
|
||||||
}); */ |
|
||||||
|
|
||||||
/* toggleEmoticons.onclick = (e) => { |
|
||||||
if(!emoticonsDropdown) { |
|
||||||
emoticonsDropdown = initEmoticonsDropdown(pageEl, appImManager, |
|
||||||
appMessagesManager, messageInput, toggleEmoticons); |
|
||||||
} else { |
|
||||||
emoticonsDropdown.classList.toggle('active'); |
|
||||||
} |
|
||||||
|
|
||||||
toggleEmoticons.classList.toggle('active'); |
|
||||||
}; */ |
|
||||||
|
|
||||||
Array.from(document.getElementsByClassName('btn-menu-toggle')).forEach((el) => { |
|
||||||
el.addEventListener('click', (e) => { |
|
||||||
//console.log('click pageIm');
|
|
||||||
if(!el.classList.contains('btn-menu-toggle')) return false; |
|
||||||
|
|
||||||
//window.removeEventListener('mousemove', onMouseMove);
|
|
||||||
let openedMenu = el.querySelector('.btn-menu') as HTMLDivElement; |
|
||||||
e.cancelBubble = true; |
|
||||||
|
|
||||||
if(el.classList.contains('menu-open')) { |
|
||||||
el.classList.remove('menu-open'); |
|
||||||
openedMenu.classList.remove('active'); |
|
||||||
} else { |
|
||||||
openBtnMenu(openedMenu); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
appSidebarLeft.loadDialogs().then(result => { |
|
||||||
//appSidebarLeft.onChatsScroll();
|
|
||||||
appSidebarLeft.loadDialogs(true); |
|
||||||
}); |
|
||||||
}); |
|
@ -0,0 +1,28 @@ |
|||||||
|
import pagesManager from "./pagesManager"; |
||||||
|
|
||||||
|
export default class Page { |
||||||
|
public pageEl: HTMLDivElement; |
||||||
|
private installed = false; |
||||||
|
|
||||||
|
constructor(className: string, public isAuthPage: boolean, private onFirstMount?: (...args: any[]) => void, private onMount?: (...args: any[]) => void) { |
||||||
|
this.pageEl = document.body.getElementsByClassName(className)[0] as HTMLDivElement; |
||||||
|
} |
||||||
|
|
||||||
|
public mount(...args: any[]) { |
||||||
|
//this.pageEl.style.display = '';
|
||||||
|
|
||||||
|
if(this.onMount) { |
||||||
|
this.onMount(...args); |
||||||
|
} |
||||||
|
|
||||||
|
if(!this.installed) { |
||||||
|
if(this.onFirstMount) { |
||||||
|
this.onFirstMount(...args); |
||||||
|
} |
||||||
|
|
||||||
|
this.installed = true; |
||||||
|
} |
||||||
|
|
||||||
|
pagesManager.setPage(this); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,111 @@ |
|||||||
|
import { openBtnMenu, ripple } from "../components/misc"; |
||||||
|
//import {stackBlurImage} from '../lib/StackBlur';
|
||||||
|
import Page from "./page"; |
||||||
|
//import appImManager from '../lib/appManagers/appImManager';
|
||||||
|
|
||||||
|
let onFirstMount = () => import('../lib/appManagers/appImManager').then(() => {//import('../lib/services').then(services => {
|
||||||
|
//console.log('included services', services);
|
||||||
|
|
||||||
|
//export default () => {
|
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
loadDialogs().then(result => { |
||||||
|
//appImManager.setScroll(chatScroll);
|
||||||
|
}); |
||||||
|
return; |
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
/* function placeCaretAfterNode(node: HTMLElement) { |
||||||
|
if (typeof window.getSelection != "undefined") { |
||||||
|
var range = document.createRange(); |
||||||
|
range.setStartAfter(node); |
||||||
|
range.collapse(true); |
||||||
|
var selection = window.getSelection(); |
||||||
|
selection.removeAllRanges(); |
||||||
|
selection.addRange(range); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
messageInput.onclick = (e) => { |
||||||
|
let target = e.target as HTMLElement; |
||||||
|
if(target.classList.contains('emoji-inner')) { |
||||||
|
placeCaretAfterNode(target.parentElement); |
||||||
|
} else if(target.classList.contains('emoji-sizer')) { |
||||||
|
placeCaretAfterNode(target); |
||||||
|
} |
||||||
|
console.log('lol', target); |
||||||
|
}; */ |
||||||
|
|
||||||
|
/* window.addEventListener('click', function(this, e) { |
||||||
|
// @ts-ignore
|
||||||
|
let isInput = e.target.tagName == 'INPUT'; |
||||||
|
if(!isInput && !window.getSelection().toString()) { |
||||||
|
console.log('click'); |
||||||
|
messageInput.focus(); |
||||||
|
} |
||||||
|
}); */ |
||||||
|
|
||||||
|
/* fetch('assets/img/camomile.jpg') |
||||||
|
.then(res => res.blob()) |
||||||
|
.then(blob => { |
||||||
|
let img = new Image(); |
||||||
|
let url = URL.createObjectURL(blob); |
||||||
|
img.src = url; |
||||||
|
img.onload = () => { |
||||||
|
let id = 'chat-background-canvas'; |
||||||
|
var canvas = document.getElementById(id) as HTMLCanvasElement; |
||||||
|
//URL.revokeObjectURL(url);
|
||||||
|
|
||||||
|
let elements = ['.chat-container'].map(selector => { |
||||||
|
return document.querySelector(selector) as HTMLDivElement; |
||||||
|
}); |
||||||
|
|
||||||
|
stackBlurImage(img, id, 15, 0); |
||||||
|
|
||||||
|
canvas.toBlob(blob => { |
||||||
|
//let dataUrl = canvas.toDataURL('image/jpeg', 1);
|
||||||
|
let dataUrl = URL.createObjectURL(blob); |
||||||
|
|
||||||
|
elements.forEach(el => { |
||||||
|
el.style.backgroundImage = 'url(' + dataUrl + ')'; |
||||||
|
}); |
||||||
|
}, 'image/jpeg', 1); |
||||||
|
}; |
||||||
|
}); */ |
||||||
|
|
||||||
|
/* toggleEmoticons.onclick = (e) => { |
||||||
|
if(!emoticonsDropdown) { |
||||||
|
emoticonsDropdown = initEmoticonsDropdown(pageEl, appImManager, |
||||||
|
appMessagesManager, messageInput, toggleEmoticons); |
||||||
|
} else { |
||||||
|
emoticonsDropdown.classList.toggle('active'); |
||||||
|
} |
||||||
|
|
||||||
|
toggleEmoticons.classList.toggle('active'); |
||||||
|
}; */ |
||||||
|
|
||||||
|
(Array.from(document.getElementsByClassName('rp')) as HTMLElement[]).forEach(el => ripple(el)); |
||||||
|
|
||||||
|
Array.from(document.getElementsByClassName('btn-menu-toggle')).forEach((el) => { |
||||||
|
el.addEventListener('click', (e) => { |
||||||
|
//console.log('click pageIm');
|
||||||
|
if(!el.classList.contains('btn-menu-toggle')) return false; |
||||||
|
|
||||||
|
//window.removeEventListener('mousemove', onMouseMove);
|
||||||
|
let openedMenu = el.querySelector('.btn-menu') as HTMLDivElement; |
||||||
|
e.cancelBubble = true; |
||||||
|
|
||||||
|
if(el.classList.contains('menu-open')) { |
||||||
|
el.classList.remove('menu-open'); |
||||||
|
openedMenu.classList.remove('active'); |
||||||
|
} else { |
||||||
|
openBtnMenu(openedMenu); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
const page = new Page('page-chats', false, onFirstMount); |
||||||
|
export default page; |
@ -0,0 +1,37 @@ |
|||||||
|
import Page from "./page"; |
||||||
|
import { whichChild } from "../lib/utils"; |
||||||
|
import { horizontalMenu } from "../components/misc"; |
||||||
|
|
||||||
|
class PagesManager { |
||||||
|
private pageID = -1; |
||||||
|
|
||||||
|
private selectTab: ReturnType<typeof horizontalMenu>; |
||||||
|
public pagesDiv: HTMLDivElement; |
||||||
|
|
||||||
|
constructor() { |
||||||
|
this.pagesDiv = document.getElementById('auth-pages') as HTMLDivElement; |
||||||
|
this.selectTab = horizontalMenu(null, this.pagesDiv.firstElementChild as HTMLDivElement, null, null, 420); |
||||||
|
} |
||||||
|
|
||||||
|
public setPage(page: Page) { |
||||||
|
if(page.isAuthPage) { |
||||||
|
this.pagesDiv.style.display = ''; |
||||||
|
|
||||||
|
let id = whichChild(page.pageEl); |
||||||
|
if(this.pageID == id) return; |
||||||
|
|
||||||
|
this.selectTab(id); |
||||||
|
|
||||||
|
this.pageID = id; |
||||||
|
} else { |
||||||
|
this.pagesDiv.style.display = 'none'; |
||||||
|
page.pageEl.style.display = ''; |
||||||
|
|
||||||
|
this.pageID = -1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const pagesManager = new PagesManager(); |
||||||
|
(window as any).pagesManager = pagesManager; |
||||||
|
export default pagesManager; |
Loading…
Reference in new issue