Context menu chat list handhelds fix

src/components/dialogsContextMenu.ts

@@ -1,153 +1,221 @@
 import appChatsManager from "../lib/appManagers/appChatsManager";
 import appDialogsManager from "../lib/appManagers/appDialogsManager";
 import appImManager from "../lib/appManagers/appImManager";
-import appMessagesManager from "../lib/appManagers/appMessagesManager";
+import appMessagesManager, {Dialog} from "../lib/appManagers/appMessagesManager";
 import appPeersManager from "../lib/appManagers/appPeersManager";
 import rootScope from "../lib/rootScope";
 import { findUpTag } from "../helpers/dom";
-import { parseMenuButtonsTo, positionMenu, openBtnMenu } from "./misc";
+import { positionMenu, openBtnMenu } from "./misc";
 import { PopupButton } from "./popup";
 import PopupPeer from "./popupPeer";
+import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu";
 
 export default class DialogsContextMenu {
-  private element = document.getElementById('dialogs-contextmenu') as HTMLDivElement;
-  private buttons: {
-    archive: HTMLButtonElement,
-    pin: HTMLButtonElement,
-    mute: HTMLButtonElement,
-    unread: HTMLButtonElement,
-    delete: HTMLButtonElement,
-    //clear: HTMLButtonElement,
-  } = {} as any;
+  private element: HTMLElement;
+  private buttons: (ButtonMenuItemOptions & {verify: () => boolean})[];
+
   private selectedID: number;
   private peerType: 'channel' | 'chat' | 'megagroup' | 'group' | 'saved';
   private filterID: number;
+  private dialog: Dialog;
+
+  private init() {
+    this.buttons = [{
+      icon: 'unread',
+      text: 'Mark as unread',
+      onClick: this.onUnreadClick,
+      verify: () => {
+        const isUnread = !!(this.dialog.pFlags?.unread_mark || this.dialog.unread_count);
+        return !isUnread;
+      }
+    }, {
+      icon: 'readchats',
+      text: 'Mark as read',
+      onClick: this.onUnreadClick,
+      verify: () => { 
+        const isUnread = !!(this.dialog.pFlags?.unread_mark || this.dialog.unread_count);
+        return isUnread;
+      }
+    }, {
+      icon: 'pin',
+      text: 'Pin',
+      onClick: this.onPinClick,
+      verify: () => {
+        const isPinned = this.filterID > 1 ? appMessagesManager.filtersStorage.filters[this.filterID].pinned_peers.includes(this.dialog.peerID) : !!this.dialog.pFlags?.pinned;
+        return !isPinned;
+      }
+    }, {
+      icon: 'unpin',
+      text: 'Unpin',
+      onClick: this.onPinClick,
+      verify: () => {
+        const isPinned = this.filterID > 1 ? appMessagesManager.filtersStorage.filters[this.filterID].pinned_peers.includes(this.dialog.peerID) : !!this.dialog.pFlags?.pinned;
+        return isPinned;
+      }
+    }, {
+      icon: 'mute',
+      text: 'Mute',
+      onClick: this.onMuteClick,
+      verify: () => {
+        const isMuted = this.dialog.notify_settings && this.dialog.notify_settings.mute_until > (Date.now() / 1000 | 0);
+        return !isMuted && this.selectedID != rootScope.myID; 
+      }
+    }, {
+      icon: 'unmute',
+      text: 'Unmute',
+      onClick: this.onMuteClick,
+      verify: () => {
+        const isMuted = this.dialog.notify_settings && this.dialog.notify_settings.mute_until > (Date.now() / 1000 | 0);
+        return isMuted && this.selectedID != rootScope.myID; 
+      }
+    }, {
+      icon: 'archive',
+      text: 'Archive',
+      onClick: this.onArchiveClick,
+      verify: () => this.filterID == 0 && this.selectedID != rootScope.myID
+    }, {
+      icon: 'unarchive',
+      text: 'Unarchive',
+      onClick: this.onArchiveClick,
+      verify: () => this.filterID == 1 && this.selectedID != rootScope.myID
+    }, {
+      icon: 'delete danger',
+      text: 'Delete',
+      onClick: this.onDeleteClick,
+      verify: () => true
+    }];
+
+    this.element = ButtonMenu(this.buttons);
+    this.element.id = 'dialogs-contextmenu';
+    document.getElementById('page-chats').append(this.element);
+  }
 
-  constructor() {
-    parseMenuButtonsTo(this.buttons, this.element.children);
+  private onArchiveClick = () => {
+    let dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
+    if(dialog) {
+      appMessagesManager.editPeerFolders([dialog.peerID], +!dialog.folder_id);
+    }
+  };
 
-    this.buttons.archive.addEventListener('click', () => {
-      let dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
-      if(dialog) {
-        appMessagesManager.editPeerFolders([dialog.peerID], +!dialog.folder_id);
-      }
-    });
+  private onPinClick = () => {
+    appMessagesManager.toggleDialogPin(this.selectedID, this.filterID);
+  };
+  
+  private onMuteClick = () => {
+    appImManager.mutePeer(this.selectedID);
+  };
 
-    this.buttons.pin.addEventListener('click', () => {
-      appMessagesManager.toggleDialogPin(this.selectedID, this.filterID);
-    });
+  private onUnreadClick = () => {
+    const dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
+    if(!dialog) return;
 
-    this.buttons.mute.addEventListener('click', () => {
-      appImManager.mutePeer(this.selectedID);
-    });
+    if(dialog.unread_count) {
+      appMessagesManager.readHistory(this.selectedID, dialog.top_message);
+      appMessagesManager.markDialogUnread(this.selectedID, true);
+    } else {
+      appMessagesManager.markDialogUnread(this.selectedID);
+    }
+  };
 
-    this.buttons.unread.addEventListener('click', () => {
-      const dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
-      if(!dialog) return;
+  private onDeleteClick = () => {
+    let firstName = appPeersManager.getPeerTitle(this.selectedID, false, true);
+
+    let callbackFlush = (justClear?: true) => {
+      appMessagesManager.flushHistory(this.selectedID, justClear);
+    };
+
+    let callbackLeave = () => {
+      appChatsManager.leave(-this.selectedID);
+    };
+
+    let title: string, description: string, buttons: PopupButton[];
+    switch(this.peerType) {
+      case 'channel': {
+        title = 'Leave Channel?';
+        description = `Are you sure you want to leave this channel?`;
+        buttons = [{
+          text: 'LEAVE ' + firstName,
+          isDanger: true,
+          callback: callbackLeave
+        }];
+
+        break;
+      }
 
-      if(dialog.unread_count) {
-        appMessagesManager.readHistory(this.selectedID, dialog.top_message);
-        appMessagesManager.markDialogUnread(this.selectedID, true);
-      } else {
-        appMessagesManager.markDialogUnread(this.selectedID);
+      case 'megagroup': {
+        title = 'Leave Group?';
+        description = `Are you sure you want to leave this group?`;
+        buttons = [{
+          text: 'LEAVE ' + firstName,
+          isDanger: true,
+          callback: callbackLeave
+        }];
+
+        break;
       }
-    });
 
-    this.buttons.delete.addEventListener('click', () => {
-      let firstName = appPeersManager.getPeerTitle(this.selectedID, false, true);
-
-      let callbackFlush = (justClear?: true) => {
-        appMessagesManager.flushHistory(this.selectedID, justClear);
-      };
-
-      let callbackLeave = () => {
-        appChatsManager.leave(-this.selectedID);
-      };
-
-      let title: string, description: string, buttons: PopupButton[];
-      switch(this.peerType) {
-        case 'channel': {
-          title = 'Leave Channel?';
-          description = `Are you sure you want to leave this channel?`;
-          buttons = [{
-            text: 'LEAVE ' + firstName,
-            isDanger: true,
-            callback: callbackLeave
-          }];
-
-          break;
-        }
-
-        case 'megagroup': {
-          title = 'Leave Group?';
-          description = `Are you sure you want to leave this group?`;
-          buttons = [{
-            text: 'LEAVE ' + firstName,
-            isDanger: true,
-            callback: callbackLeave
-          }];
-
-          break;
-        }
-
-        case 'chat': {
-          title = 'Delete Chat?';
-          description = `Are you sure you want to delete chat with <b>${firstName}</b>?`;
-          buttons = [{
-            text: 'DELETE FOR ME AND ' + firstName,
-            isDanger: true,
-            callback: () => callbackFlush()
-          }, {
-            text: 'DELETE JUST FOR ME',
-            isDanger: true,
-            callback: () => callbackFlush(true)
-          }];
-
-          break;
-        }
-
-        case 'saved': {
-          title = 'Delete Saved Messages?';
-          description = `Are you sure you want to delete all your saved messages?`;
-          buttons = [{
-            text: 'DELETE SAVED MESSAGES',
-            isDanger: true,
-            callback: () => callbackFlush()
-          }];
-
-          break;
-        }
-
-        case 'group': {
-          title = 'Delete and leave Group?';
-          description = `Are you sure you want to delete all message history and leave <b>${firstName}</b>?`;
-          buttons = [{
-            text: 'DELETE AND LEAVE ' + firstName,
-            isDanger: true,
-            callback: () => callbackLeave()
-          }];
-
-          break;
-        }
+      case 'chat': {
+        title = 'Delete Chat?';
+        description = `Are you sure you want to delete chat with <b>${firstName}</b>?`;
+        buttons = [{
+          text: 'DELETE FOR ME AND ' + firstName,
+          isDanger: true,
+          callback: () => callbackFlush()
+        }, {
+          text: 'DELETE JUST FOR ME',
+          isDanger: true,
+          callback: () => callbackFlush(true)
+        }];
+
+        break;
       }
 
-      buttons.push({
-        text: 'CANCEL',
-        isCancel: true
-      });
+      case 'saved': {
+        title = 'Delete Saved Messages?';
+        description = `Are you sure you want to delete all your saved messages?`;
+        buttons = [{
+          text: 'DELETE SAVED MESSAGES',
+          isDanger: true,
+          callback: () => callbackFlush()
+        }];
 
-      let popup = new PopupPeer('popup-delete-chat', {
-        peerID: this.selectedID,
-        title: title,
-        description: description,
-        buttons: buttons
-      });
+        break;
+      }
+
+      case 'group': {
+        title = 'Delete and leave Group?';
+        description = `Are you sure you want to delete all message history and leave <b>${firstName}</b>?`;
+        buttons = [{
+          text: 'DELETE AND LEAVE ' + firstName,
+          isDanger: true,
+          callback: () => callbackLeave()
+        }];
+
+        break;
+      }
+    }
 
-      popup.show();
+    buttons.push({
+      text: 'CANCEL',
+      isCancel: true
     });
-  }
+
+    let popup = new PopupPeer('popup-delete-chat', {
+      peerID: this.selectedID,
+      title: title,
+      description: description,
+      buttons: buttons
+    });
+
+    popup.show();
+  };
 
   onContextMenu = (e: MouseEvent | Touch) => {
+    if(this.init) {
+      this.init();
+      this.init = null;
+    }
+
     let li: HTMLElement = null;
     
     try {
@@ -165,54 +233,13 @@ export default class DialogsContextMenu {
     this.filterID = appDialogsManager.filterID;
 
     this.selectedID = +li.getAttribute('data-peerID');
-    const dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
-    const notOurDialog = dialog.peerID != rootScope.myID;
-
-    // archive button
-    if(notOurDialog) {
-      const button = this.buttons.archive;
-      const condition = dialog.folder_id == 1;
-      button.classList.toggle('flip-icon', condition);
-      (button.firstElementChild as HTMLElement).innerText = condition ? 'Unarchive' : 'Archive';
-      this.buttons.archive.style.display = '';
-    } else {
-      this.buttons.archive.style.display = 'none';
-    }
-    
-    // pin button
-    {
-      const button = this.buttons.pin;
-      //const condition = !!dialog.pFlags?.pinned;
-      const condition = this.filterID > 1 ? appMessagesManager.filtersStorage.filters[this.filterID].pinned_peers.includes(dialog.peerID) : !!dialog.pFlags?.pinned;
-      button.classList.toggle('flip-icon', condition);
-      (button.firstElementChild as HTMLElement).innerText = condition ? 'Unpin' : 'Pin';
-    }
+    this.dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
 
-    // mute button
-    if(notOurDialog) {
-      const button = this.buttons.mute;
-      const condition = dialog.notify_settings && dialog.notify_settings.mute_until > (Date.now() / 1000 | 0);
-      button.classList.toggle('flip-icon', condition);
-      (button.firstElementChild as HTMLElement).innerText = condition ? 'Unmute' : 'Mute';
-      this.buttons.mute.style.display = '';
-    } else {
-      this.buttons.mute.style.display = 'none';
-    }
-
-    // unread button
-    {
-      const button = this.buttons.unread;
-      const condition = !!(dialog.pFlags?.unread_mark || dialog.unread_count);
-      button.classList.toggle('flip-icon', condition);
-      (button.firstElementChild as HTMLElement).innerText = condition ? 'Mark as Read' : 'Mark as Unread';
-    }
+    this.buttons.forEach(button => {
+      const good = button.verify();
 
-    /* // clear history button
-    if(appPeersManager.isChannel(this.selectedID)) {
-      this.buttons.clear.style.display = 'none';
-    } else {
-      this.buttons.clear.style.display = '';
-    } */
+      button.element.classList.toggle('hide', !good);
+    });
 
     // delete button
     let deleteButtonText = '';
@@ -233,12 +260,13 @@ export default class DialogsContextMenu {
       //deleteButtonText = 'Delete chat';
       this.peerType = this.selectedID == rootScope.myID ? 'saved' : 'chat';
     }
-    (this.buttons.delete.firstElementChild as HTMLElement).innerText = deleteButtonText;
+    this.buttons[this.buttons.length - 1].element.firstChild.nodeValue = deleteButtonText;
 
     li.classList.add('menu-open');
     positionMenu(e, this.element);
     openBtnMenu(this.element, () => {
       li.classList.remove('menu-open');
+      this.selectedID = this.dialog = this.filterID = undefined;
     });
   };
 }

src/scss/partials/pages/_chats.scss

@@ -115,46 +115,4 @@
     border-style: solid;
     border-color: #DADCE0;
   }
-}
-
-#dialogs-contextmenu {
-  .menu-unread {
-    &:before {
-      content: $tgico-unread;
-    }
-
-    &.flip-icon:before {
-      content: $tgico-readchats;
-    }
-  }
-
-  .menu-pin {
-    &:before {
-      content: $tgico-pin;
-    }
-
-    &.flip-icon:before {
-      content: $tgico-unpin;
-    }
-  }
-
-  .menu-mute {
-    &:before {
-      content: $tgico-mute;
-    }
-
-    &.flip-icon:before {
-      content: $tgico-unmute;
-    }
-  }
-
-  .menu-archive {
-    &:before {
-      content: $tgico-archive;
-    }
-
-    &.flip-icon:before {
-      content: $tgico-unarchive;
-    }
-  }
 }