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

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

  static translator = {
    'en': {
      noteSerialNumber: 'Note serial number',
      cancel: 'Cancel',
      delete: 'Delete',
      save: 'Save',
      share: 'Share',
      change: 'Change',
      tags: 'Tags',
      title: 'Title',
      body: 'Body',
      downloadFile: 'Download file',
      downloadProcess: 'Download process',
      viewImage: 'View image',
      binaryFile: 'Binary file',
      viewCode: 'View code',
      playAudio: 'Play audio',
      playVideo: 'Play video',
      viewPdf: 'View PDF',
      viewText: 'View text',
      viewMSWord: 'View MSWord file',
      viewArchive: 'View archive type file',
      viewSpreadsheet: 'View spreadsheet',
      viewPresentation: 'View presentation',
      fileName: 'File name',
      fileSize: 'File size',
      unsupportedAudioTag: 'The <audio> tag is not supported by your browser',
      unsupportedVideoTag: 'The <video> tag is not supported by your browser',
      dateCreated: 'Date created',
      numberOfViews: 'Number of views',
      error: 'Error',
      deleteFile: 'delete file',
      fromNote: 'from note',
      username: 'Username',
      deleteNote: 'delete note',
      saveNote: 'save note',
      linkCopiedToClipboard: 'Link copied to clipboard'
    },
    'ru': {
      noteSerialNumber: 'Порядковый номер заметки',
      cancel: 'Отмена',
      delete: 'Удалить',
      save: 'Сохранить',
      share: 'Поделиться',
      change: 'Изменить',
      tags: 'Тэги',
      title: 'Заголовок',
      body: 'Содержание',
      downloadFile: 'Загрузить файл',
      downloadProcess: 'Процесс загрузки',
      viewImage: 'Просмотр изображения',
      binaryFile: 'Двоичный файл',
      viewCode: 'Просмотр кода',
      playAudio: 'Воспроизвести аудио',
      playVideo: 'Воспроизвести видео',
      viewPdf: 'Просмотр PDF',
      viewText: 'Просмотр текста',
      viewMSWord: 'Просмотр файла MSWord',
      viewArchive: 'Просмотр файла архивного типа',
      viewSpreadsheet: 'Просмотр таблицы',
      viewPresentation: 'Просмотр презентации',
      fileName: 'Название файла',
      fileSize: 'Размер файла',
      unsupportedAudioTag: 'Тег <audio> не поддерживается вашим браузером',
      unsupportedVideoTag: 'Тег <video> не поддерживается вашим браузером',
      dateCreated: 'Дата создания',
      numberOfViews: 'Количество просмотров',
      error: 'Ошибка',
      deleteFile: 'удалить файл',
      fromNote: 'из заметки',
      username: 'Имя пользователя',
      deleteNote: 'удалить заметку',
      saveNote: 'сохранить заметку',
      linkCopiedToClipboard: 'Ссылка скопирована в буфер обмена'
    }
  };

  static colors = {
    standart: '#f8f9fa',
  };

  static tagsLabelOldValueArray = new Map();
  static titleOldValueArray = new Map();
  static bodyOldValueArray = new Map();

  static getHmtl(indexQuestion, indexNote, note, notesCount) {
    // note is null check
    if (`${note.id}:${note.tags}:${note.title}:${note.body}:${note.token}:${note.views}:${note.files}:${note.created}:${note.datetime}:${note.username}` === "null::null:null:null:null::null:null:null") return "";

    /***************************
    *       HEADER STRING      *
    ***************************/
    const headerString = `
    <span id="search_card_serial_number_${indexQuestion}_${indexNote}" title="${this.translator[SettingsPage.language].noteSerialNumber}">${note.id}/${notesCount}</span>
    <div class="ms-auto">
      <div class="row align-items-center">
        <div class="col" style="display:none;">
          <a id="search_card_cancel_${indexQuestion}_${indexNote}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].cancel}">
            ${Icons.back_16_black_svg}
          </a>
        </div>
        <div class="col" style="display:none;">
          <a id="search_card_delete_${indexQuestion}_${indexNote}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].delete}">
            ${Icons.delete_16_black_svg}
          </a>
        </div>
        <div class="col" style="display:none;">
          <a id="search_card_save_${indexQuestion}_${indexNote}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].save}">
            ${Icons.save_16_black_svg}
          </a>
        </div>
        <div class="col" style="display:block;">
          <a id="search_card_share_${indexQuestion}_${indexNote}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].share}">
            ${Icons.share_16_black_svg}
          </a>
        </div>
        <div class="col" style="display:block;">
          <a id="search_card_change_${indexQuestion}_${indexNote}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].change}">
            ${Icons.change_16_black_svg}
          </a>
        </div>
      </div>
    </div>
    `;

    /*************************
    *       TAGS STRING      *
    *************************/
    const tagsStringValue = note.tags.map(tag => `#${tag.tag}`).join(' ');
    const tagsString = `
    <h6 id="search_card_label_tag_${indexQuestion}_${indexNote}" class="card-title text-muted" style="display:block;" title="${this.translator[SettingsPage.language].tags}">${tagsStringValue}</h6>
    <div class="form-floating mb-3" style="display:none;">
      <input type="text" class="form-control" id="search_card_input_tag_${indexQuestion}_${indexNote}" placeholder="#" value="${tagsStringValue}">
      <label for="search_card_input_tag_${indexQuestion}_${indexNote}"><a>${Icons.hash_16_black_svg}</a></label>
    </div>
    <div id="search_tags_panel_${indexQuestion}_${indexNote}" class="form-floating mb-3" style="display:none;"></div>
    `;

    /**************************
    *       TITLE STRING      *
    **************************/
    const titleString = `
    <h5 id="search_card_title_${indexQuestion}_${indexNote}" class="card-title" style="display:block;" title="${this.translator[SettingsPage.language].title}">${note.title}</h5>
    <div class="form-floating mb-3" style="display:none;">
      <input id="search_card_input_title_${indexQuestion}_${indexNote}" type="text" class="form-control" placeholder="${this.translator[SettingsPage.language].title}" value="${note.title}">
      <label for="search_card_input_title_${indexQuestion}_${indexNote}">${this.translator[SettingsPage.language].title}</label>
    </div>
    `;

    /*************************
    *       BODY STRING      *
    *************************/
    const bodyString = `
    <pre id="search_card_body_${indexQuestion}_${indexNote}" class="card-text w-100" style="display:block;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;" title="${this.translator[SettingsPage.language].body}">${note.body}</pre>
    <div class="form-floating mb-3" style="display:none;">
      <textarea id="search_card_input_body_${indexQuestion}_${indexNote}" class="form-control" placeholder="${this.translator[SettingsPage.language].body}" style="height: 100px">${note.body}</textarea>
      <label for="search_card_input_body_${indexQuestion}_${indexNote}">${this.translator[SettingsPage.language].body}</label>
    </div>
    `;

    /**************************
    *       FILES STRING      *
    **************************/
    let filesString = "";
    for (let i = 0; i < note.files.length; i++) {
      const file_id = note.files[i].id;
      const file_name = note.files[i].filename;
      const file_formatBytes = Utils.formatBytes(note.files[i].size);
      filesString += `
      <hr id="search_file_hr_${indexQuestion}_${indexNote}_${file_id}">
      <div class="row">
        <div class="col-auto me-auto" style="display:block;">
          <div class="row align-items-center">
            <div class="col" style="display:block;">
              <a id="search_card_file_download_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].downloadFile}">
                ${Icons.file_download_16_0d6efd_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <span id="search_card_file_spinner_${indexQuestion}_${indexNote}_${file_id}" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" title="${this.translator[SettingsPage.language].downloadProcess}"></span>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_image_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewImage}">
                ${Icons.file_image_16_ffc107_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_binary_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].binaryFile}">
                ${Icons.file_binary_16_6c757d_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_code_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewCode}">
                ${Icons.file_code_16_d63384_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_audio_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].playAudio}">
                ${Icons.file_audio_16_198754_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_video_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].playVideo}">
                ${Icons.file_video_16_6f42c1_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_pdf_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewPdf}">
                ${Icons.file_pdf_16_dc3545_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_txt_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewText}">
                ${Icons.file_txt_16_black_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_word_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewMSWord}">
                ${Icons.file_word_16_0d6efd_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_zip_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewArchive}">
                ${Icons.file_zip_16_6610f2_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_spreadsheet_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewSpreadsheet}">
                ${Icons.file_spreadsheet_16_20c997_svg}
              </a>
            </div>
            <div class="col" style="display:none;">
              <a id="search_card_file_ppt_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].viewPresentation}">
                ${Icons.file_ppt_16_0dcaf0_svg}
              </a>
            </div>
          </div>
        </div>
        <div id="search_card_filename_${indexQuestion}_${indexNote}_${file_id}" class="col" style="display:block;" title="${this.translator[SettingsPage.language].fileName}">${file_name} <span class="text-muted" title="${this.translator[SettingsPage.language].fileSize}">(${file_formatBytes})</span></div>
        <div class="col-auto me-auto" style="display:none;">
          <input id="search_card_input_filename_${indexQuestion}_${indexNote}_${file_id}" type="text" class="form-control" placeholder="${this.translator[SettingsPage.language].fileName}" value="${file_name}">
        </div>
        <div class="col-auto">
          <div class="row align-items-center">
            <div class="col" style="display:none;">
              <a id="search_card_file_delete_${indexQuestion}_${indexNote}_${file_id}" style="cursor:pointer;" title="${this.translator[SettingsPage.language].delete}">
                ${Icons.delete_16_black_svg}
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-3" style="display:none;">
        <div class="col-auto me-auto">
          <img id="search_card_file_image_content_${indexQuestion}_${indexNote}_${file_id}" class="w-100"/>
        </div>
      </div>
      <div class="row mt-3" style="display:none;">
        <div class="col-auto me-auto">
          <embed id="search_card_file_pdf_content_${indexQuestion}_${indexNote}_${file_id}" class="w-100 vh-100" src=""/>
        </div>
      </div>
      <div class="row mt-3" style="display:none;">
        <div class="col-auto me-auto">
          <iframe id="search_card_file_txt_content_${indexQuestion}_${indexNote}_${file_id}" class="w-100"></iframe>
        </div>
      </div>
      <div class="row mt-3" style="display:none;">
        <div class="col-auto me-auto">
          <pre class="bg-light"><code id="search_card_file_code_content_${indexQuestion}_${indexNote}_${file_id}" class="w-100"></code></pre>
        </div>
      </div>
      <div class="row mt-3" style="display:none;">
        <div class="col-auto me-auto">
          <audio id="search_card_file_audio_content_${indexQuestion}_${indexNote}_${file_id}" class="w-100" controls>
            <source src="">
            ${this.translator[SettingsPage.language].unsupportedAudioTag}
          </audio>
        </div>
      </div>
      <div class="row mt-3" style="display:none;">
        <div class="col-auto me-auto">
          <video id="search_card_file_video_content_${indexQuestion}_${indexNote}_${file_id}" class="w-100" controls>
            <source src="">
            ${this.translator[SettingsPage.language].unsupportedVideoTag}
          </video>
        </div>
      </div>
      `;
    };

    /*******************************
    *       INPUT FILE STRING      *
    *******************************/
    const inputFileString = `
      <input type="file" class="form-control mt-3" id="search_card_input_file_${indexQuestion}_${indexNote}" style="display:none;" multiple>
    `;

    /*************************
    *       CARD STRING      *
    *************************/
    return `
    <div class="card mb-3 border-secondary">
      <div class="card-header d-flex text-muted">${headerString}</div>
      <div class="card-body">
        ${tagsString}
        ${titleString}
        ${bodyString}
        ${filesString}
        ${inputFileString}
      </div>
      <div class="card-footer d-flex text-muted">
        <span id="search_card_date_created_${indexQuestion}_${indexNote}" title="${this.translator[SettingsPage.language].dateCreated}" style="cursor:pointer;">${TimeFormatter.getFormatTime(note.created, note.datetime, SettingsPage.noteTimeFormat)}</span>
        <div class="ms-auto">
          <div class="row align-items-center gx-1">
            <div class="col" style="display:block;">
              <div class="form-check form-switch">
                <input style="cursor:pointer;" title="${this.translator[SettingsPage.language].share}" class="form-check-input" type="checkbox" role="switch" id="search_card_switch_share_${indexQuestion}_${indexNote}" checked>
              </div>
            </div>
            <div class="col">
              <a title="${this.translator[SettingsPage.language].numberOfViews}">
                ${Icons.eye_16_grey_svg}
              </a>
            </div>
            <div title="${this.translator[SettingsPage.language].numberOfViews}" class="col text-muted">
              ${note.views}
            </div>
          </div>
        </div>
      </div>
    </div>
    `;
  };

  static handler(indexQuestion, indexNote, note, notesCount, username, md5password) {
    // note is null check
    if (`${note.id}:${note.tags}:${note.title}:${note.body}:${note.token}:${note.views}:${note.files}:${note.created}:${note.datetime}:${note.username}` === "null::null:null:null:null::null:null:null") return;

    let shareMode = false;
    // share mode
    if (username === undefined && md5password === undefined) {
      shareMode = true;
    };

    // save old values
    if (!shareMode) this.saveTagsLabelOldValue(indexQuestion, indexNote);
    if (!shareMode) this.saveTitleOldValue(indexQuestion, indexNote);
    if (!shareMode) this.saveBodyOldValue(indexQuestion, indexNote);

    /***********************************
    *       HANDLER FILES BUTTON      *
    ***********************************/
    for (let i = 0; i < note.files.length; i++) {
      /*******************************************
      *       HANDLER DOWNLOAD FILE BUTTON      *
      *******************************************/
      document.getElementById(`search_card_file_download_${indexQuestion}_${indexNote}_${note.files[i].id}`).addEventListener('click', async function (event) {
        event.preventDefault();

        // hide download img
        document.getElementById(`search_card_file_download_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "none";

        // show download spinner
        document.getElementById(`search_card_file_spinner_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

        // get json size
        Utils.getJsonFileSize(note.files[i].id, note.id, username, md5password, 
          async function(data) {
            if (data.exception != undefined) {
              Alert.show(this.translator[SettingsPage.language].error, data.exception);
            } else {
              // get file
              Utils.getFile(note.files[i].id, note.id, username, md5password, 
                async function(response) {
                  // show file download process
                  let decodeAllChunks = await Utils.showFileDownloadProcess(
                    response,
                    data.json_size,
                    note.files[i].size,
                    note.files[i].filename,
                    document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`)
                  );

                  // hide download spinner
                  document.getElementById(`search_card_file_spinner_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "none";

                  if (JSON.parse(decodeAllChunks).exception != undefined) {
                    Alert.show(this.translator[SettingsPage.language].error, JSON.parse(decodeAllChunks).exception);
                  } else {
                    // show type icons
                    const responseBase64 = JSON.parse(decodeAllChunks).base64;
                    const responseType = responseBase64.split(';')[0].split(':')[1];

                    /*******************
                    *       IMAGE      *
                    *******************/
                    if (
                      (responseType == 'image/bmp' && note.files[i].type == 'image/bmp' && note.files[i].extention == 'bmp') ||
                      (responseType == 'image/png' && note.files[i].type == 'image/png' && note.files[i].extention == 'png') ||
                      (responseType == 'image/x-icon' && note.files[i].type == 'image/x-icon' && note.files[i].extention == 'ico') ||
                      (responseType == 'image/jpeg' && note.files[i].type == 'image/jpeg' && (note.files[i].extention == 'jpeg' || note.files[i].extention == 'jpg')) ||
                      (responseType == 'image/svg+xml' && note.files[i].type == 'image/svg+xml' && note.files[i].extention == 'svg')
                    ) {
                      // show image icon
                      document.getElementById(`search_card_file_image_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;
                      document.getElementById(`search_card_file_image_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).src = responseBase64;
                      document.getElementById(`search_card_file_image_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).alt = note.files[i].filename;

                      // set dropdown content
                      Utils.setOnClickListenerDropDownContent(document.getElementById(`search_card_file_image_${indexQuestion}_${indexNote}_${note.files[i].id}`), document.getElementById(`search_card_file_image_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode);
                      return;
                    };

                    /*****************
                    *       PDF      *
                    *****************/
                    if (responseType == 'application/pdf' && note.files[i].type == 'application/pdf' && note.files[i].extention == 'pdf') {
                      // show pdf icon
                      document.getElementById(`search_card_file_pdf_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;
                      document.getElementById(`search_card_file_pdf_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).src = responseBase64;

                      // set dropdown content
                      Utils.setOnClickListenerDropDownContent(document.getElementById(`search_card_file_pdf_${indexQuestion}_${indexNote}_${note.files[i].id}`), document.getElementById(`search_card_file_pdf_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode);
                      return;
                    };

                    /******************
                    *       TEXT      *
                    ******************/
                    if (responseType == 'text/plain' && note.files[i].type == 'text/plain' && note.files[i].extention == 'txt') {
                      // show txt icon
                      document.getElementById(`search_card_file_txt_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;
                      document.getElementById(`search_card_file_txt_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).src = responseBase64;

                      // set dropdown content
                      Utils.setOnClickListenerDropDownContent(
                        document.getElementById(`search_card_file_txt_${indexQuestion}_${indexNote}_${note.files[i].id}`),
                        document.getElementById(`search_card_file_txt_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode
                      );
                      return;
                    };

                    /*******************
                    *       AUDIO      *
                    *******************/
                    if (
                      (responseType == 'audio/wav' && note.files[i].type == 'audio/wav' && note.files[i].extention == 'wav') ||
                      (responseType == 'audio/mpeg' && note.files[i].type == 'audio/mpeg' && note.files[i].extention == 'mp3')
                    ) {
                      // show audio icon
                      document.getElementById(`search_card_file_audio_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;
                      document.getElementById(`search_card_file_audio_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).type = responseType;
                      document.getElementById(`search_card_file_audio_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).src = responseBase64;

                      // set dropdown content
                      Utils.setOnClickListenerDropDownContent(
                        document.getElementById(`search_card_file_audio_${indexQuestion}_${indexNote}_${note.files[i].id}`),
                        document.getElementById(`search_card_file_audio_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode
                      );

                      // add music to player list
                      AudioPlayer.addTrack(document.getElementById(`search_card_file_audio_content_${indexQuestion}_${indexNote}_${note.files[i].id}`));
                      return;
                    };

                    /*******************
                    *       VIDEO      *
                    *******************/
                    if (responseType == 'video/mp4' && note.files[i].type == 'video/mp4' && note.files[i].extention == 'mp4') {
                      // show video icon
                      document.getElementById(`search_card_file_video_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;
                      document.getElementById(`search_card_file_video_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).type = responseType;
                      document.getElementById(`search_card_file_video_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).src = responseBase64;

                      // set dropdown content
                      Utils.setOnClickListenerDropDownContent(
                        document.getElementById(`search_card_file_video_${indexQuestion}_${indexNote}_${note.files[i].id}`),
                        document.getElementById(`search_card_file_video_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode
                      );
                      return;
                    };

                    /******************
                    *       WORD      *
                    ******************/
                    if (
                      (responseType == 'application/vnd.oasis.opendocument.text' && note.files[i].type == 'application/vnd.oasis.opendocument.text') || 
                      (responseType == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && note.files[i].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') ||
                      (responseType == 'application/msword' && note.files[i].type == 'application/msword')
                    ) {
                      // show word icon
                      document.getElementById(`search_card_file_word_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;

                      return;
                    };

                    /*************************
                    *       POWER POINT      *
                    *************************/
                    if (responseType == 'application/vnd.ms-powerpoint' && note.files[i].type == 'application/vnd.ms-powerpoint' && note.files[i].extention == 'ppt') {
                      // show ppt icon
                      document.getElementById(`search_card_file_ppt_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;

                      return;
                    };

                    /*******************
                    *       EXCEL      *
                    *******************/
                    if (responseType == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && note.files[i].type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && note.files[i].extention == 'xlsx') {
                      // show excel icon
                      document.getElementById(`search_card_file_spreadsheet_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;

                      return;
                    };

                    /*****************
                    *       ZIP      *
                    *****************/
                    if (
                      (responseType == 'application/x-zip-compressed' && note.files[i].type == 'application/x-zip-compressed' && note.files[i].extention == 'zip') ||
                      (responseType == 'application/zip' && note.files[i].type == 'application/zip' && note.files[i].extention == 'zip')
                    ) {
                      // show zip icon
                      document.getElementById(`search_card_file_zip_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;

                      return;
                    };

                    /******************
                    *       CODE      *
                    ******************/
                    const codeExtensions = new Set([
                      'py', 'php', 'java', 'kt', 'rs', 'js', 'go',
                      'json', 'webmanifest', 
                      'css', 'c', 'cpp', 'h', 'hpp', 'inf', 'ini', 'properties',
                      'xml', 'asmx',
                      'gradle', 'groovy', 'kts',
                      'bat', 'cmd',
                      'html', 'htm', 'hta',
                      'ps1', 'cs', 'asp'
                    ]);
                    if (codeExtensions.has(note.files[i].extention) || note.files[i].extention.length === 0) {
                      // show code icon
                      document.getElementById(`search_card_file_code_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                      // set href for filename link
                      document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;

                      // fill code content
                      const file = Utils.getFileFromBase64(responseBase64, note.files[i].filename);
                      const fileReader = new FileReader();
                      fileReader.readAsText(file);
                      fileReader.onload = function() {
                        switch(note.files[i].extention) {
                          case 'py': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.python, 'python');break;
                          case 'php': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.php, 'php');break;
                          case 'java': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.java, 'java');break;
                          case 'kt': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.kotlin, 'kotlin');break;
                          case 'rs': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.rust, 'rust');break;
                          case 'js': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.javascript, 'javascript');break;
                          case 'go': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.go, 'go');break;
                          case 'json': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.go, 'json');break;
                          case 'webmanifest': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.go, 'json');break;
                          case 'css': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.css, 'css');break;
                          case 'c': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.c, 'c');break;
                          case 'cpp': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.cpp, 'cpp');break;
                          case 'h': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.c, 'c');break;
                          case 'hpp': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.cpp, 'cpp');break;
                          case 'inf': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.ini, 'ini');break;
                          case 'ini': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.ini, 'ini');break;
                          case 'properties': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.ini, 'ini');break;
                          case 'xml': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.xml, 'xml');break;
                          case 'asmx': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.xml, 'xml');break;
                          case 'gradle': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.groovy, 'groovy');break;
                          case 'groovy': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.groovy, 'groovy');break;
                          case 'kts': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.groovy, 'groovy');break;
                          case 'bat': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.batch, 'batch');break;
                          case 'cmd': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.batch, 'batch');break;
                          case 'html': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.markup, 'html');break;
                          case 'htm': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.markup, 'html');break;
                          case 'hta': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.markup, 'html');break;
                          case 'ps1': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.powershell, 'powershell');break;
                          case 'cs': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.cs, 'cs');break;
                          case 'asp': document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.aspnet, 'aspnet');break;
                          default: document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = Prism.highlight(fileReader.result, Prism.languages.plain, 'plain');break;
                        };
                      };

                      // set dropdown content
                      Utils.setOnClickListenerDropDownContent(
                        document.getElementById(`search_card_file_code_${indexQuestion}_${indexNote}_${note.files[i].id}`),
                        document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.parentNode
                      );
                      return;
                    };

                    /********************
                    *       BINARY      *
                    ********************/
                    // show binary icon
                    document.getElementById(`search_card_file_binary_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";

                    // set href for filename link
                    document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).innerHTML = `<a href="${responseBase64}" download="${note.files[i].filename}">${note.files[i].filename}</a><span class="text-muted"> (${Utils.formatBytes(note.files[i].size)})</span>`;
                  };
                }
              );
            };
          }
        );
      }.bind(this));

      /*******************************************
      *       HANDLER DELETE FILE BUTTON      *
      *******************************************/
      if (!shareMode) document.getElementById(`search_card_file_delete_${indexQuestion}_${indexNote}_${note.files[i].id}`).addEventListener('click', async function(event) {
        event.preventDefault();

        if (!confirm(`${this.translator[SettingsPage.language].deleteFile} ${note.files[i].filename} ${this.translator[SettingsPage.language].fromNote}: ${this.titleOldValueArray.get(`${indexQuestion}_${indexNote}`)}?`)) return;
        Utils.deleteFile(
          note.files[i].id, 
          username, md5password, 
          (data) => {
            SearchPage.setOldValue();
            document.getElementById('searchButton').click();
          }
        );
        TagsPanel.draw('search', document.getElementById('searchTagsPanel'), document.getElementById('searchInput'), username, md5password);
      }.bind(this));
    };

    /***********************************
    *       HANDLER SERIAL NUMBER      *
    ***********************************/
    if (shareMode) {
      document.getElementById(`search_card_serial_number_${indexQuestion}_${indexNote}`).title = this.translator[SettingsPage.language].username;
      document.getElementById(`search_card_serial_number_${indexQuestion}_${indexNote}`).innerHTML = `${Icons.person_fill_16_grey_svg}&nbsp;${note.username}`;
    };

    /***********************************
    *       HANDLER CANCEL BUTTON      *
    ***********************************/
    if (!shareMode) document.getElementById(`search_card_cancel_${indexQuestion}_${indexNote}`).addEventListener('click', function(event) {
      event.preventDefault();

      // hide cancel, delete, save
      document.getElementById(`search_card_cancel_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
      document.getElementById(`search_card_delete_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
      document.getElementById(`search_card_save_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
      document.getElementById(`search_card_change_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";

      // hide tags panel
      document.getElementById(`search_card_input_tag_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
      document.getElementById(`search_tags_panel_${indexQuestion}_${indexNote}`).style.display = "none";
      document.getElementById(`search_card_label_tag_${indexQuestion}_${indexNote}`).style.display = "block";

      // hide input title
      document.getElementById(`search_card_input_title_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
      document.getElementById(`search_card_title_${indexQuestion}_${indexNote}`).style.display = "block";

      // hide body title
      document.getElementById(`search_card_input_body_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
      document.getElementById(`search_card_body_${indexQuestion}_${indexNote}`).style.display = "block";

      // hide input file
      for (let i = 0; i < note.files.length; i++) {
        //  display download icon
        document.getElementById(`search_card_file_download_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.parentNode.style.display = "block";

        // display filename label
        document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).style.display = "block";

        // hide input filename
        document.getElementById(`search_card_input_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "none";

        // hidedelete file button
        document.getElementById(`search_card_file_delete_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "none";
      };

      // hide input file
      document.getElementById(`search_card_input_file_${indexQuestion}_${indexNote}`).style.display = "none";
    }.bind(this));

    /***********************************
    *       HANDLER DELETE BUTTON      *
    ***********************************/
    if (!shareMode) document.getElementById(`search_card_delete_${indexQuestion}_${indexNote}`).addEventListener('click', function (event) {
      event.preventDefault();

      if (!confirm(`${this.translator[SettingsPage.language].deleteNote}: ${this.titleOldValueArray.get(`${indexQuestion}_${indexNote}`)}?`)) return;

      fetch(Strings.apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json;charset=utf-8'},
        body: JSON.stringify({
          method: 'deletenote',
          username: username,
          md5password: md5password,
          notes_id: note.id
        })
      })
      .then(response => response.json())
      .then(data => {
        if (data.exception != undefined) {
          Alert.show(this.translator[SettingsPage.language].error, data.exception);
        } else {
          SearchPage.setOldValue();
          document.getElementById('searchButton').click();
          TagsPanel.draw('search', document.getElementById('searchTagsPanel'), document.getElementById('searchInput'), username, md5password);
        };
      });
    }.bind(this));

    /*********************************
    *       HANDLER SAVE BUTTON      *
    *********************************/
    if (shareMode) document.getElementById(`search_card_save_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";
    if (!shareMode) document.getElementById(`search_card_save_${indexQuestion}_${indexNote}`).addEventListener('click', async function (event) {
      event.preventDefault();

      if (!confirm(`${this.translator[SettingsPage.language].saveNote}: ${this.titleOldValueArray.get(`${indexQuestion}_${indexNote}`)}?`)) return;

      // get current files
      const currentFiles = note.files.map(file => {
        const fileName = document.getElementById(`search_card_input_filename_${indexQuestion}_${indexNote}_${file.id}`).value;
        return {
          id: file.id,
          filename: fileName,
          extention: Utils.getExtention(fileName)
        };
      });

      fetch(Strings.apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json;charset=utf-8'},
        body: JSON.stringify({
          method: 'changenote',
          username: username,
          md5password: md5password,
          token: note.token,
          notes_id: note.id,
          tag: Utils.getTagsArray(document.getElementById(`search_card_input_tag_${indexQuestion}_${indexNote}`)),
          title: document.getElementById(`search_card_input_title_${indexQuestion}_${indexNote}`).value,
          body: document.getElementById(`search_card_input_body_${indexQuestion}_${indexNote}`).value,
          // concat current and new files
          files: currentFiles.concat(await Utils.getFilesArray(document.getElementById(`search_card_input_file_${indexQuestion}_${indexNote}`)))
        })
      })
      .then(response => response.json())
      .then(data => {
        if (data.exception != undefined) {
          Alert.show(this.translator[SettingsPage.language].error, data.exception);
        } else {
          SearchPage.setOldValue();
          document.getElementById('searchButton').click();
          TagsPanel.draw('search', document.getElementById('searchTagsPanel'), document.getElementById('searchInput'), username, md5password);
        };
      });
    }.bind(this));

    /**********************************
    *       HANDLER SHARE BUTTON      *
    **********************************/
    if (note.token === '') document.getElementById(`search_card_share_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
    if (note.token !== '') document.getElementById(`search_card_share_${indexQuestion}_${indexNote}`).addEventListener('click', function (event) {
      event.preventDefault();

      const shareUrl = `${Strings.appUrl}/?token=${note.token}`;
      navigator.clipboard.writeText(shareUrl)
      .then(() => Alert.show(this.translator[SettingsPage.language].linkCopiedToClipboard, shareUrl))
      .catch(err => Alert.show(this.translator[SettingsPage.language].error, err))

      fetch(Strings.apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json;charset=utf-8'},
        body: JSON.stringify({
          method: 'getallusers',
          username: username,
          md5password: md5password
        })
      })
      .then(response => response.json())
      .then(data => {
        console.log(data);
      });

    }.bind(this));

    /***********************************
    *       HANDLER CHANGE BUTTON      *
    ***********************************/
    if (shareMode) document.getElementById(`search_card_change_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
    if (!shareMode) document.getElementById(`search_card_change_${indexQuestion}_${indexNote}`).addEventListener('click', function(event) {
      event.preventDefault();

      // display hidden cancel, delete, save
      document.getElementById(`search_card_cancel_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";
      document.getElementById(`search_card_delete_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";
      document.getElementById(`search_card_save_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";
      document.getElementById(`search_card_change_${indexQuestion}_${indexNote}`).parentNode.style.display = "none";
      
      // display hidden tags panel
      document.getElementById(`search_card_label_tag_${indexQuestion}_${indexNote}`).style.display = "none";
      this.setTagsLabelOldValue(indexQuestion, indexNote);
      document.getElementById(`search_card_input_tag_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";
      document.getElementById(`search_tags_panel_${indexQuestion}_${indexNote}`).style.display = "block";
      TagsPanel.draw('search_${indexQuestion}_${indexNote}', document.getElementById(`search_tags_panel_${indexQuestion}_${indexNote}`), document.getElementById(`search_card_input_tag_${indexQuestion}_${indexNote}`), username, md5password);
      
      // display hidden input title
      document.getElementById(`search_card_title_${indexQuestion}_${indexNote}`).style.display = "none";
      this.setTitleOldValue(indexQuestion, indexNote);
      document.getElementById(`search_card_input_title_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";

      // display hidden input body
      document.getElementById(`search_card_body_${indexQuestion}_${indexNote}`).style.display = "none";
      this.setBodyOldValue(indexQuestion, indexNote);
      document.getElementById(`search_card_input_body_${indexQuestion}_${indexNote}`).parentNode.style.display = "block";
      
      // display hidden input file
      for (let i = 0; i < note.files.length; i++) {
        // hide image icon
        if (document.getElementById(`search_card_file_image_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display == "block") {
          document.getElementById(`search_card_file_image_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display = "none";
        };
        
        // hide pdf icon
        if (document.getElementById(`search_card_file_pdf_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display == "block") {
          document.getElementById(`search_card_file_pdf_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display = "none";
        };
        
        // hide txt icon
        if (document.getElementById(`search_card_file_txt_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display == "block") {
          document.getElementById(`search_card_file_txt_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display = "none";
        };
        
        // hide audio icon
        if (document.getElementById(`search_card_file_audio_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display == "block") {
          document.getElementById(`search_card_file_audio_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display = "none";
        };
        
        // hide video icon
        if (document.getElementById(`search_card_file_video_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display == "block") {
          document.getElementById(`search_card_file_video_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.style.display = "none";
        };
        
        // hide code icon
        if (document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.parentNode.style.display == "block") {
          document.getElementById(`search_card_file_code_content_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.parentNode.style.display = "none";
        };
        
        // hide download icon
        if (document.getElementById(`search_card_file_download_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.parentNode.style.display == "block") {
          document.getElementById(`search_card_file_download_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.parentNode.parentNode.style.display = "none";
        };
        
        // hide filename label
        document.getElementById(`search_card_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).style.display = "none";
        
        // fill and display input filename
        document.getElementById(`search_card_input_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).value = note.files[i].filename;
        document.getElementById(`search_card_input_filename_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";
        
        // display delete file button
        document.getElementById(`search_card_file_delete_${indexQuestion}_${indexNote}_${note.files[i].id}`).parentNode.style.display = "block";
      };
      
      // fill and display input file
      document.getElementById(`search_card_input_file_${indexQuestion}_${indexNote}`).value = '';
      document.getElementById(`search_card_input_file_${indexQuestion}_${indexNote}`).style.display = "block";
    }.bind(this));
    
    /********************************
    *       HANDLER INPUT FILE      *
    ********************************/
    if (!shareMode) document.getElementById(`search_card_input_file_${indexQuestion}_${indexNote}`).addEventListener('focus', function(event) {
      event.preventDefault();
      
      // THINKING !!!
      //document.getElementById(`search_card_input_file_${indexQuestion}_${indexNote}`).value = '';
    }.bind(this));

    /**********************************
    *       HANDLER SWITCH SHARE      *
    **********************************/
    if (shareMode) document.getElementById(`search_card_switch_share_${indexQuestion}_${indexNote}`).parentNode.parentNode.style.display = "none";
    if (!shareMode) {
      // set switch share checked
      document.getElementById(`search_card_switch_share_${indexQuestion}_${indexNote}`).checked = (note.token === '') ? false : true;
      
      // set switch share handle
      document.getElementById(`search_card_switch_share_${indexQuestion}_${indexNote}`).addEventListener('change', function(event) {
        event.preventDefault();

        fetch(Strings.apiUrl, {
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=utf-8'},
          body: JSON.stringify({
            method: 'updatetoken',
            username: username,
            md5password: md5password,
            token: document.getElementById(`search_card_switch_share_${indexQuestion}_${indexNote}`).checked ? 'token' : '',
            notes_id: note.id
          })
        })
        .then(response => response.json())
        .then(data => {
          if (data.exception != undefined) {
            Alert.show(this.translator[SettingsPage.language].error, data.exception);
          } else {
            SearchPage.setOldValue();
            document.getElementById('searchButton').click();
            TagsPanel.draw('search', document.getElementById('searchTagsPanel'), document.getElementById('searchInput'), username, md5password);
          };
        });
      }.bind(this));
    };

    /**********************************
    *       HANDLER DATE CREATED      *
    **********************************/
    document.getElementById(`search_card_date_created_${indexQuestion}_${indexNote}`).addEventListener('click', function(event) {
      event.preventDefault();

      SettingsPage.noteTimeFormat = TimeFormatter.getNextFormat(SettingsPage.noteTimeFormat);
      document.getElementById(`search_card_date_created_${indexQuestion}_${indexNote}`).innerHTML = TimeFormatter.getFormatTime(note.created, note.datetime, SettingsPage.noteTimeFormat);
    }.bind(this));
  };
  
  /*******************************************
  *       SAVE/SET TAGS LABEL OLD VALUE      *
  *******************************************/
  static saveTagsLabelOldValue(indexQuestion, indexNote) {
    this.tagsLabelOldValueArray.set(`${indexQuestion}_${indexNote}`, document.getElementById(`search_card_label_tag_${indexQuestion}_${indexNote}`).innerHTML);
  };
  static setTagsLabelOldValue(indexQuestion, indexNote) {
    document.getElementById(`search_card_input_tag_${indexQuestion}_${indexNote}`).value = this.tagsLabelOldValueArray.get(`${indexQuestion}_${indexNote}`);
  };
  
  /**************************************
  *       SAVE/SET TITLE OLD VALUE      *
  **************************************/
  static saveTitleOldValue(indexQuestion, indexNote) {
    this.titleOldValueArray.set(`${indexQuestion}_${indexNote}`, document.getElementById(`search_card_title_${indexQuestion}_${indexNote}`).innerHTML);
  };
  static setTitleOldValue(indexQuestion, indexNote) {
    document.getElementById(`search_card_input_title_${indexQuestion}_${indexNote}`).value = this.titleOldValueArray.get(`${indexQuestion}_${indexNote}`);
  };
  
  /*************************************
  *       SAVE/SET BODY OLD VALUE      *
  *************************************/
  static saveBodyOldValue(indexQuestion, indexNote) {
    this.bodyOldValueArray.set(`${indexQuestion}_${indexNote}`, document.getElementById(`search_card_body_${indexQuestion}_${indexNote}`).innerHTML);
  };
  static setBodyOldValue(indexQuestion, indexNote) {
    document.getElementById(`search_card_input_body_${indexQuestion}_${indexNote}`).value = this.bodyOldValueArray.get(`${indexQuestion}_${indexNote}`);
  };
};