morethanwords
4 years ago
18 changed files with 1465 additions and 1413 deletions
@ -1,194 +0,0 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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