static/js/Header.js - master - memoryspeak/MemorySpeakWebClient

static/js/Header.js
179 строк17 KB
memoryspeak
initial commit: project structure
20 ноя 2025, 21:54
20 ноя 2025, 21:549ddd280
class Header {

  static translator = {
    'en': {
      menu: 'Menu',
      search: 'Search',
      addNew: 'Add New',
      settings: 'Settings',
      aboutApp: 'About App',
      terms: 'Terms of Service',
      privacy: 'Privacy Policy',
      exit: 'Exit'
    },
    'ru': {
      menu: 'Меню',
      search: 'Поиск',
      addNew: 'Новая',
      settings: 'Настройки',
      aboutApp: 'О приложении',
      terms: 'Условия использования',
      privacy: 'Политика конфиденциальности',
      exit: 'Выход'
    }
  };
  
  static draw() {
    document.body.innerHTML += `
    <div style="height:50px;background-color:white;position:fixed;z-index:1;left:0px;top:0px;right:0px;box-shadow: 0px 0px 10px 0px #111;">
      <a id="homeIcon" style="cursor:pointer;position:absolute;left:10px;top:0;height:50px;display:flex;align-items:center;">
        <img style="background-color:transparent;display:inline;height:50px;" title=${Strings.appName} src="./static/img/ms.png">
      </a>
      <div id="username" style="position:absolute;right:60px;top:12px;"></div>
      <div class="dropdown" style="position:absolute;right:20px;top:10px;">
        <a id="menuIcon" title="${this.translator[SettingsPage.language].menu}" style="background-color:transparent;cursor:pointer;" data-bs-toggle="dropdown" aria-expanded="false">
          ${Icons.three_dots_20_black_svg}
        </a>
        <ul class="dropdown-menu" aria-labelledby="menuIcon" style="position:fixed;margin-top:5px;right:20px;">
          <li><a id="searchMenuItem" class="dropdown-item" href="#" title="${this.translator[SettingsPage.language].search}">${Icons.search_16_black_svg}&nbsp;&nbsp;&nbsp;&nbsp;${this.translator[SettingsPage.language].search}</a></li>
          <li><a id="addNewMenuItem" class="dropdown-item" href="#" title="${this.translator[SettingsPage.language].addNew}">${Icons.add_empty_16_black_svg}&nbsp;&nbsp;&nbsp;&nbsp;${this.translator[SettingsPage.language].addNew}</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a id="settingsMenuItem" class="dropdown-item" href="#" title="${this.translator[SettingsPage.language].settings}">${Icons.settings_16_black_svg}&nbsp;&nbsp;&nbsp;&nbsp;${this.translator[SettingsPage.language].settings}</a></li>
          <li><a id="aboutMenuItem" class="dropdown-item" href="#" title="${this.translator[SettingsPage.language].aboutApp}">${Icons.info_16_black_svg}&nbsp;&nbsp;&nbsp;&nbsp;${this.translator[SettingsPage.language].aboutApp}</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a id="termsMenuItem" class="dropdown-item" href="#" title="${this.translator[SettingsPage.language].terms}">${Icons.file_txt_16_black_svg}&nbsp;&nbsp;&nbsp;&nbsp;${this.translator[SettingsPage.language].terms}</a></li>
          <li><a id="privacyMenuItem" class="dropdown-item" href="#" title="${this.translator[SettingsPage.language].privacy}">${Icons.privacy_16_black_svg}&nbsp;&nbsp;&nbsp;&nbsp;${this.translator[SettingsPage.language].privacy}</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a id="exitMenuItem" class="dropdown-item" href="#" title="${this.translator[SettingsPage.language].exit}">${Icons.exit_16_black_svg}&nbsp;&nbsp;&nbsp;&nbsp;${this.translator[SettingsPage.language].exit}</a></li>
        </ul>
      </div>
    </div>
    <div style="height:50px;"></div>
    `;
  };
  
  static handle(urlParams, currentPageName, username, md5password) {
    // show profile username in header
    if (username) document.getElementById('username').innerHTML = username;

    document.getElementById('homeIcon').addEventListener('click', function(event) {
      event.preventDefault();

      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'new': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'search': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'share': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'settings': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'about': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'terms': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'privacy': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
      };
    }.bind(this));
    
    document.getElementById('searchMenuItem').addEventListener('click', function(event) {
      event.preventDefault();

      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'new': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'search': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'share': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'settings': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'about': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'terms': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
        case 'privacy': Render.reDrawPage(urlParams, "search", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "search", username: username, md5password: md5password});break;
      };
    }.bind(this));
    
    document.getElementById('addNewMenuItem').addEventListener('click', function(event) {
      event.preventDefault();

      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'new': Render.reDrawPage(urlParams, "new", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "new", username: username, md5password: md5password});break;
        case 'search': Render.reDrawPage(urlParams, "new", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "new", username: username, md5password: md5password});break;
        case 'share': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'settings': Render.reDrawPage(urlParams, "new", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "new", username: username, md5password: md5password});break;
        case 'about': Render.reDrawPage(urlParams, "new", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "new", username: username, md5password: md5password});break;
        case 'terms': Render.reDrawPage(urlParams, "new", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "new", username: username, md5password: md5password});break;
        case 'privacy': Render.reDrawPage(urlParams, "new", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "new", username: username, md5password: md5password});break;
      };
    }.bind(this));
    
    document.getElementById('settingsMenuItem').addEventListener('click', function(event) {
      event.preventDefault();

      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'new': Render.reDrawPage(urlParams, "settings", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "settings", username: username, md5password: md5password});break;
        case 'search': Render.reDrawPage(urlParams, "settings", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "settings", username: username, md5password: md5password});break;
        case 'share': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'settings': Render.reDrawPage(urlParams, "settings", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "settings", username: username, md5password: md5password});break;
        case 'about': Render.reDrawPage(urlParams, "settings", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "settings", username: username, md5password: md5password});break;
        case 'terms': Render.reDrawPage(urlParams, "settings", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "settings", username: username, md5password: md5password});break;
        case 'privacy': Render.reDrawPage(urlParams, "settings", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "settings", username: username, md5password: md5password});break;
      };
    }.bind(this));
    
    document.getElementById('aboutMenuItem').addEventListener('click', function(event) {
      event.preventDefault();

      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'new': Render.reDrawPage(urlParams, "about", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "about", username: username, md5password: md5password});break;
        case 'search': Render.reDrawPage(urlParams, "about", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "about", username: username, md5password: md5password});break;
        case 'share': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: username, md5password: md5password});break;
        case 'settings': Render.reDrawPage(urlParams, "about", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "about", username: username, md5password: md5password});break;
        case 'about': Render.reDrawPage(urlParams, "about", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "about", username: username, md5password: md5password});break;
        case 'terms': Render.reDrawPage(urlParams, "about", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "about", username: username, md5password: md5password});break;
        case 'privacy': Render.reDrawPage(urlParams, "about", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "about", username: username, md5password: md5password});break;
      };
    }.bind(this));
    
    document.getElementById('exitMenuItem').addEventListener('click', function(event) {
      event.preventDefault();

      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'new': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'search': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'share': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'settings': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'about': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'terms': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'privacy': Render.reDrawPage(urlParams, "login");PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
      };
    }.bind(this));

    document.getElementById('termsMenuItem').addEventListener('click', function(event) {
      event.preventDefault();

      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'new': Render.reDrawPage(urlParams, "terms", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "terms", username: undefined, md5password: undefined});break;
        case 'search': Render.reDrawPage(urlParams, "terms", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "terms", username: undefined, md5password: undefined});break;
        case 'share': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'settings': Render.reDrawPage(urlParams, "terms", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "terms", username: undefined, md5password: undefined});break;
        case 'about': Render.reDrawPage(urlParams, "terms", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "terms", username: undefined, md5password: undefined});break;
        case 'terms': Render.reDrawPage(urlParams, "terms", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "terms", username: undefined, md5password: undefined});break;
        case 'privacy': Render.reDrawPage(urlParams, "terms", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "terms", username: undefined, md5password: undefined});break;
      };
    }.bind(this));

    document.getElementById('privacyMenuItem').addEventListener('click', function(event) {
      event.preventDefault();
      
      switch (currentPageName) {
        case 'login': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'new': Render.reDrawPage(urlParams, "privacy", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "privacy", username: undefined, md5password: undefined});break;
        case 'search': Render.reDrawPage(urlParams, "privacy", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "privacy", username: undefined, md5password: undefined});break;
        case 'share': Render.reDrawPage(urlParams, "login", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "login", username: undefined, md5password: undefined});break;
        case 'settings': Render.reDrawPage(urlParams, "privacy", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "privacy", username: undefined, md5password: undefined});break;
        case 'about': Render.reDrawPage(urlParams, "privacy", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "privacy", username: undefined, md5password: undefined});break;
        case 'terms': Render.reDrawPage(urlParams, "privacy", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "privacy", username: undefined, md5password: undefined});break;
        case 'privacy': Render.reDrawPage(urlParams, "privacy", username, md5password);PageStack.stack.push({urlParams: urlParams, pageName: "privacy", username: undefined, md5password: undefined});break;
      };
    }.bind(this));
  };
};