API Documentation GitHub repo Project website

Source

frontend/controllers/tags_controller.js

  1. /* This file is part of Ezra Bible App.
  3.    Copyright (C) 2019 - 2023 Ezra Bible App Development Team <contact@ezrabibleapp.net>
  5.    Ezra Bible App is free software: you can redistribute it and/or modify
  6.    it under the terms of the GNU General Public License as published by
  7.    the Free Software Foundation, either version 2 of the License, or
  8.    (at your option) any later version.
  10.    Ezra Bible App is distributed in the hope that it will be useful,
  11.    but WITHOUT ANY WARRANTY; without even the implied warranty of
  12.    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13.    GNU General Public License for more details.
  15.    You should have received a copy of the GNU General Public License
  16.    along with Ezra Bible App. See the file LICENSE.
  17.    If not, see <http://www.gnu.org/licenses/>. */
  19. const TagStore = require('../components/tags/tag_store.js');
  20. const TagListFilter = require('../components/tags/tag_list_filter.js');
  21. const VerseBoxHelper = require('../helpers/verse_box_helper.js');
  22. const VerseBox = require('../ui_models/verse_box.js');
  23. require('../components/emoji_button_trigger.js');
  24. const { waitUntilIdle } = require('../helpers/ezra_helper.js');
  25. const eventController = require('./event_controller.js');
  26. const verseListController = require('../controllers/verse_list_controller.js');
  27. const { showErrorDialog } = require('../helpers/ezra_helper.js');
  29. /**
  30.  * The TagsController handles most functionality related to tagging of verses.
  31.  * 
  32.  * Like all other controllers it is only initialized once. It is accessible at the
  33.  * global object `app_controller.tags_controller`.
  34.  * 
  35.  * @category Controller
  36.  */
  37. class TagsController {
  38.   constructor() {
  39.     loadScript("app/templates/tag_list.js");
  41.     this.tag_store = new TagStore();
  42.     this.tag_list_filter = new TagListFilter();
  44.     this.verse_box_helper = new VerseBoxHelper();
  46.     this.new_standard_tag_button = $('#new-standard-tag-button');
  47.     this.verse_selection_blocked = false;
  48.     this.verses_were_selected_before = false;
  50.     this.assign_tag_label = i18n.t("tags.assign-tag");
  51.     this.unassign_tag_label = i18n.t("tags.remove-tag-assignment");
  52.     this.assign_tag_hint = i18n.t("tags.assign-tag-hint");
  53.   
  54.     this.tag_to_be_deleted = null;
  55.     this.tag_to_be_deleted_title = null;
  56.     this.tag_to_be_deleted_is_global = false;
  57.     this.permanently_delete_tag = true;
  58.   
  59.     this.remove_tag_assignment_job = null;
  60.     this.new_tag_created = false;
  61.     this.last_created_tag = "";
  62.   
  63.     this.edit_tag_id = null;
  64.   
  65.     //this.xml_tag_statistics = null; // FIXME
  66.     this.loading_indicator = "<img class=\"loading-indicator\" style=\"float: left; margin-left: 0.5em;\" " +
  67.                              "width=\"16\" height=\"16\" src=\"images/loading_animation.gif\" />";
  68.   
  69.     this.selected_verse_references = [];
  70.     this.selected_verse_boxes = [];
  72.     this.initialRenderingDone = false;
  73.     this.newTagDialogInitDone = false;
  74.     this.addTagsToGroupDialogInitDone = false;
  75.     this.deleteTagConfirmationDialogInitDone = false;
  76.     this.removeTagAssignmentConfirmationDialogInitDone = false;
  77.     this.editTagDialogInitDone = false;
  78.     this.lastContentId = null;
  79.     this.currentTagGroupId = null;
  80.     this.currentTagGroupTitle = null;
  82.     this.subscribeEvents();
  83.   }
  85.   async handleTagPanelSwitched(isOpen) {
  86.     if (isOpen) {
  87.       await this.updateTagsView(undefined, !this.initialRenderingDone);
  88.     } else if (platformHelper.isCordova() || platformHelper.isMobile()) {
  89.       // Reset tag list on mobile when switching off the tag panel
  90.       this.initialRenderingDone = false;
  91.       document.getElementById('tags-content-global').innerHTML = "";
  92.     }
  93.   }
  95.   subscribeEvents() {
  96.     eventController.subscribe('on-tag-panel-switched', async (isOpen) => {
  97.       await this.handleTagPanelSwitched(isOpen);
  98.     });
  100.     eventController.subscribePrioritized('on-tag-statistics-panel-switched', async (isOpen) => {
  101.       await this.handleTagPanelSwitched(isOpen);
  102.     });
  104.     eventController.subscribe('on-tab-selected', async (tabIndex) => {
  105.       const currentTab = app_controller.tab_controller.getTab(tabIndex);
  107.       if (currentTab != null) {
  108.         // Assume that verses were selected before, because otherwise the checkboxes may not be properly cleared
  109.         this.verses_were_selected_before = true;
  111.         if (this.tagPanelIsActive()) {
  112.           await this.updateTagsView(tabIndex, !this.initialRenderingDone);
  113.         }
  115.         if (currentTab.addedInteractively) {
  116.           this.resetActivePanelToTagPanel(tabIndex);
  117.         }
  118.       }
  119.     });
  121.     eventController.subscribe('on-bible-text-loaded', () => {
  122.       var currentTabIndex = app_controller.tab_controller.getSelectedTabIndex();
  123.       const currentTab = app_controller.tab_controller.getTab(currentTabIndex);
  125.       if (currentTab != null && currentTab.addedInteractively) {
  126.         this.resetActivePanelToTagPanel(currentTabIndex);
  127.       }
  128.     });
  130.     eventController.subscribe('on-module-search-started', (tabIndex) => {
  131.       const currentTab = app_controller.tab_controller.getTab(tabIndex);
  133.       if (currentTab != null && currentTab.addedInteractively) {
  134.         this.resetActivePanelToTagPanel(tabIndex);
  135.       }
  136.     });
  138.     eventController.subscribe('on-locale-changed', async () => {
  139.       this.updateTagsView(undefined, true);
  140.       this.refreshTagDialogs();
  141.     });
  143.     eventController.subscribeMultiple(['on-translation-added', 'on-translation-removed'], async () => {
  144.       await this.updateTagUiBasedOnTagAvailability();
  145.     });
  147.     eventController.subscribe('on-verses-selected', async () => {
  148.       await this.updateTagsViewAfterVerseSelection(false);
  149.     });
  151.     eventController.subscribe('on-tag-group-list-activated', () => {
  152.       this.tag_list_filter.reset();
  153.       document.getElementById('tags-content-global').style.display = 'none';
  154.       document.getElementById('tag-list-stats').style.visibility = 'hidden';
  155.       document.getElementById('tag-panel-tag-group-list').style.removeProperty('display');
  156.       document.getElementById('tag-list-filter-button').style.display = 'none';
  157.       document.getElementById('tags-search-input').value = "";
  158.       document.getElementById('tags-search-input').style.display = 'none';
  159.     });
  161.     eventController.subscribe('on-tag-group-selected', async (tagGroup) => {
  162.       let tab = app_controller.tab_controller.getTab();
  163.       let tagGroupId = tagGroup ? tagGroup.id : null;
  164.       this.currentTagGroupId = tagGroupId;
  165.       this.currentTagGroupTitle = tagGroup ? tagGroup.title : null;
  167.       ipcSettings.set('lastUsedTagGroupId', tagGroupId);
  169.       document.getElementById('tags-search-input').style.removeProperty('display');
  170.       document.getElementById('tag-list-filter-button').style.removeProperty('display');
  171.       document.getElementById('tag-panel-tag-group-list').style.display = 'none';
  172.       document.getElementById('tags-content-global').innerHTML = "";
  173.       document.getElementById('tags-content-global').style.display = '';
  174.       document.getElementById('tag-list-stats').style.visibility = 'visible';
  176.       if (this.isTagPanelActive()) {
  177.         this.showTagListLoadingIndicator();
  178.         await waitUntilIdle();
  179.         await this.updateTagList(tab.getBook(), tagGroupId, tab.getContentId(), true);
  180.         this.hideTagListLoadingIndicator();
  181.       }
  182.     });
  184.     eventController.subscribe('on-db-refresh', async () => {
  185.       const currentTabIndex = app_controller.tab_controller.getSelectedTabIndex();
  186.       document.getElementById('tags-content-global').innerHTML = "";
  187.       await this.updateTagsView(currentTabIndex, true);
  188.     });
  190.     eventController.subscribe('on-body-clicked', () => {
  191.       const tagsSearchInput = document.getElementById('tags-search-input');
  192.       tagsSearchInput.blur();
  193.     });
  194.   }
  196.   tagPanelIsActive() {
  197.     let tagPanelButton = document.getElementById('tag-panel-button');
  198.     let isActive = tagPanelButton.classList.contains('active');
  199.     return isActive;
  200.   }
  202.   getCurrentTagGroup() {
  203.     let currentTagGroup = null;
  205.     if (tags_controller.currentTagGroupId != null) {
  206.       currentTagGroup = {
  207.         title: tags_controller.currentTagGroupTitle,
  208.         id: tags_controller.currentTagGroupId
  209.       };
  210.     }
  212.     return currentTagGroup;
  213.   }
  215.   isTagPanelActive() {
  216.     const panelButtons = document.getElementById('panel-buttons');
  217.     let activePanel = panelButtons.activePanel;
  218.     return activePanel != '' && (activePanel == 'tag-panel' || activePanel == 'tag-statistics-panel');
  219.   }
  221.   resetActivePanelToTagPanel(tabIndex) {
  222.     var panelButtons = document.getElementById('panel-buttons');
  223.     var tab = app_controller.tab_controller.getTab(tabIndex);
  225.     if (panelButtons.activePanel != "" && panelButtons.activePanel != 'tag-panel') {
  226.       if (tab.isNew() || tab.isVerseList()) {
  227.         panelButtons.activePanel = 'tag-panel';
  228.       }
  229.     }
  230.   }
  232.   /**
  233.    * This is used to refresh the dialogs after the locale changed
  234.    */
  235.   refreshTagDialogs() {
  236.     this.initNewTagDialog(true);
  237.     this.initAddTagsToGroupDialog(true);
  238.     this.initEditTagDialog(true);
  239.     this.initRemoveTagAssignmentConfirmationDialog(true);
  240.     this.initDeleteTagConfirmationDialog(true);
  241.   }
  243.   initNewTagDialog(force=false) {
  244.     if (!force && this.newTagDialogInitDone) {
  245.       return;
  246.     }
  248.     this.newTagDialogInitDone = true;
  250.     var dialogWidth = 450;
  251.     var dialogHeight = 420;
  252.     var draggable = true;
  253.     var position = [55, 120];
  255.     let new_standard_tag_dlg_options = uiHelper.getDialogOptions(dialogWidth, dialogHeight, draggable, position);
  256.     new_standard_tag_dlg_options.dialogClass = 'ezra-dialog new-tag-dialog';
  257.     new_standard_tag_dlg_options.title = i18n.t("tags.new-tag");
  258.     new_standard_tag_dlg_options.autoOpen = false;  
  259.     new_standard_tag_dlg_options.buttons = {};
  261.     new_standard_tag_dlg_options.buttons[i18n.t("general.cancel")] = function() {
  262.       setTimeout(() => { $(this).dialog("close"); }, 100);
  263.     };
  265.     new_standard_tag_dlg_options.buttons[i18n.t("tags.create-tag")] = {
  266.       id: 'create-tag-button',
  267.       text: i18n.t("tags.create-tag"),
  268.       click: function() {
  269.         tags_controller.saveNewTag(this);
  270.       }
  271.     };
  273.     document.getElementById('add-existing-tags-to-tag-group-link').addEventListener('click', async (event) => {
  274.       event.preventDefault();
  276.       tags_controller.initAddTagsToGroupDialog();
  278.       const addTagsToGroupFilterInput = document.getElementById('add-tags-to-group-filter-input');
  279.       addTagsToGroupFilterInput.value = '';
  281.       const addTagsToGroupTagList = document.getElementById('add-tags-to-group-tag-list');
  282.       addTagsToGroupTagList.style.removeProperty('display');
  284.       if (platformHelper.isCordova()) {
  285.         // eslint-disable-next-line no-undef
  286.         if (Keyboard.isVisible) {
  287.           // We need to remember the current window height as the keyboard is shown
  288.           // When closing the current dialog the keyboard will go away and in that moment of "flickering"
  289.           // it is hard to determine the window height right at the time when the new dialog is opened.
  290.           let currentWindowHeight = $(window).height();
  292.           // We slightly reduce the height of the add-tags-to-group-dialog - this is based on testing/experience.
  293.           $('#add-tags-to-group-dialog').dialog("option", "height", currentWindowHeight - 18);
  294.         }
  295.       }
  297.       $('#new-standard-tag-dialog').dialog("close");
  298.       $('#add-tags-to-group-dialog').dialog("open");
  299.       await waitUntilIdle();
  300.     });
  301.   
  302.     $('#new-standard-tag-dialog').dialog(new_standard_tag_dlg_options);
  303.     uiHelper.fixDialogCloseIconOnAndroid('new-tag-dialog');
  305.     // Handle the enter key in the tag title field and create the tag when it is pressed
  306.     $('#new-standard-tag-title-input:not(.bound)').addClass('bound').on("keypress", async (event) => {
  307.       if (event.which == 13) {
  308.         var tag_title = $('#new-standard-tag-title-input').val();
  309.         var tagExisting = await this.updateButtonStateBasedOnTagTitleValidation(tag_title, 'create-tag-button');
  311.         if (tagExisting) {
  312.           return;
  313.         }
  315.         $('#new-standard-tag-dialog').dialog("close");
  316.         tags_controller.saveNewTag(event);
  317.       }
  318.     // eslint-disable-next-line no-unused-vars
  319.     }).on("keyup", async (event) => {
  320.       var tag_title = $('#new-standard-tag-title-input').val();
  321.       await this.updateButtonStateBasedOnTagTitleValidation(tag_title, 'create-tag-button');
  322.     });
  323.   }
  325.   async updateAddTagToGroupTagList() {
  326.     const addTagsToGroupTagList = document.getElementById('add-tags-to-group-tag-list');
  327.     addTagsToGroupTagList.tagManager.reset();
  328.     addTagsToGroupTagList.tagManager.setFilter('');
  329.     await addTagsToGroupTagList.tagManager.refreshItemList();
  330.     let tagList = await this.tag_store.getTagList();
  331.     let tagIdList = await this.tag_store.getTagGroupMemberIds(this.currentTagGroupId, tagList);
  332.     addTagsToGroupTagList.tagManager.setExcludeItems(tagIdList);
  333.     addTagsToGroupTagList.tagManager.excludeItems();
  335.     let tagCount = addTagsToGroupTagList.tagManager.getAllItemElements().length;
  336.     return tagCount;
  337.   }
  339.   initAddTagsToGroupDialog(force=false) {
  340.     if (!force && this.addTagsToGroupDialogInitDone) {
  341.       return;
  342.     }
  344.     this.addTagsToGroupDialogInitDone = true;
  346.     var dialogWidth = 450;
  347.     var dialogHeight = 480;
  348.     var draggable = true;
  349.     var position = [55, 120];
  351.     let addTagsToGroupDialogOptions = uiHelper.getDialogOptions(dialogWidth, dialogHeight, draggable, position);
  352.     addTagsToGroupDialogOptions.dialogClass = 'ezra-dialog add-tags-to-group-dialog';
  353.     addTagsToGroupDialogOptions.title = i18n.t("tags.add-tags-to-group");
  354.     addTagsToGroupDialogOptions.autoOpen = false;
  355.   
  356.     addTagsToGroupDialogOptions.buttons = {};
  357.     addTagsToGroupDialogOptions.buttons[i18n.t("general.cancel")] = function() {
  358.       $(this).dialog("close");
  359.     };
  360.     addTagsToGroupDialogOptions.buttons[i18n.t("tags.add-tags-to-group")] = {
  361.       id: 'add-tags-to-group-button',
  362.       text: i18n.t("tags.add-tags-to-group"),
  363.       click: function() {
  364.         $(this).dialog("close");
  366.         const addTagsToGroupTagList = document.getElementById('add-tags-to-group-tag-list');
  367.         tags_controller.addTagsToGroup(tags_controller.currentTagGroupId, addTagsToGroupTagList.addList);
  368.       }
  369.     };
  371.     document.getElementById('add-tags-to-group-filter-input').addEventListener('keyup', () => {
  372.       let currentFilterString = document.getElementById('add-tags-to-group-filter-input').value;
  373.       const addTagsToGroupTagList = document.getElementById('add-tags-to-group-tag-list');
  374.       addTagsToGroupTagList.filter = currentFilterString;
  375.     });
  377.     $('#add-tags-to-group-dialog').dialog(addTagsToGroupDialogOptions);
  378.     uiHelper.fixDialogCloseIconOnAndroid('add-tags-to-group-dialog');
  379.   }
  381.   async addTagsToGroup(tagGroupId, tagList) {
  382.     for (let i = 0; i < tagList.length; i++) {
  383.       let tagId = tagList[i];
  384.       let tag = await this.tag_store.getTag(tagId);
  386.       let result = await ipcDb.updateTag(tagId, tag.title, [ tagGroupId ], []);
  388.       if (result.success == false) {
  389.         var message = `The tag <i>${tag.title}</i> could not be updated.<br>
  390.                       An unexpected database error occurred:<br><br>
  391.                       ${result.exception}<br><br>
  392.                       Please restart the app.`;
  394.         await showErrorDialog('Database Error', message);
  395.         uiHelper.hideTextLoadingIndicator();
  396.         return;
  397.       } else {
  398.         await eventController.publishAsync('on-tag-group-members-changed', {
  399.           tagId: tagId,
  400.           addTagGroups: [ tagGroupId ],
  401.           removeTagGroups: []
  402.         });
  403.       }
  404.     }
  406.     if (this.tagGroupUsed()) {
  407.       const currentTabIndex = app_controller.tab_controller.getSelectedTabIndex();
  408.       await this.updateTagsView(currentTabIndex, true);
  409.     }
  410.   }
  412.   tagGroupUsed() {
  413.     return this.currentTagGroupId != null && this.currentTagGroupId > 0;
  414.   }
  416.   async updateButtonStateBasedOnTagTitleValidation(tagTitle, buttonId) {
  417.     tagTitle = tagTitle.trim();
  418.     const tagExisting = await this.tag_store.tagExists(tagTitle);
  419.     let tagButton = document.getElementById(buttonId);
  421.     if (tagExisting || tagTitle == "") {
  422.       uiHelper.disableButton(tagButton);
  423.     } else {
  424.       uiHelper.enableButton(tagButton);
  425.     }
  427.     return tagExisting;
  428.   }
  430.   initDeleteTagConfirmationDialog(force=false) {
  431.     if (!force && this.deleteTagConfirmationDialogInitDone) {
  432.       return;
  433.     }
  435.     this.deleteTagConfirmationDialogInitDone = true;
  437.     var dialogWidth = 400;
  438.     var dialogHeight = null;
  439.     var draggable = true;
  440.     var position = [55, 120];
  442.     let delete_tag_confirmation_dlg_options = uiHelper.getDialogOptions(dialogWidth, dialogHeight, draggable, position);
  443.     delete_tag_confirmation_dlg_options.dialogClass = 'ezra-dialog delete-tag-confirmation-dialog';
  444.     delete_tag_confirmation_dlg_options.title = i18n.t("tags.delete-tag");
  445.     delete_tag_confirmation_dlg_options.autoOpen = false;
  446.   
  447.     delete_tag_confirmation_dlg_options.buttons = {};
  448.     delete_tag_confirmation_dlg_options.buttons[i18n.t("general.cancel")] = function() {
  449.       setTimeout(() => { $(this).dialog("close"); }, 100);
  450.     };
  451.     delete_tag_confirmation_dlg_options.buttons[i18n.t("tags.delete-tag")] = function() {
  452.       tags_controller.deleteTagAfterConfirmation();
  453.     };
  455.     document.getElementById('permanently-delete-tag').addEventListener('change', function() {
  456.       let permanentlyDeleteTagWarning = document.getElementById('permanently-delete-tag-warning');
  458.       if (this.checked) {
  459.         permanentlyDeleteTagWarning.style.visibility = 'visible';
  460.       } else {
  461.         permanentlyDeleteTagWarning.style.visibility = 'hidden';
  462.       }
  463.     });
  465.     $('#delete-tag-confirmation-dialog').dialog(delete_tag_confirmation_dlg_options);
  466.     uiHelper.fixDialogCloseIconOnAndroid('delete-tag-confirmation-dialog');
  467.   }
  469.   initRemoveTagAssignmentConfirmationDialog(force=false) {
  470.     if (!force && this.removeTagAssignmentConfirmationDialogInitDone) {
  471.       return;
  472.     }
  474.     this.removeTagAssignmentConfirmationDialogInitDone = true;
  476.     let remove_tag_assignment_confirmation_dlg_options = uiHelper.getDialogOptions(360, null, true, [55, 120]);
  477.     remove_tag_assignment_confirmation_dlg_options.dialogClass = 'ezra-dialog remove-tag-assignment-confirmation-dialog';
  478.     remove_tag_assignment_confirmation_dlg_options.autoOpen = false;
  479.     remove_tag_assignment_confirmation_dlg_options.title = i18n.t("tags.remove-tag-assignment");
  480.   
  481.     remove_tag_assignment_confirmation_dlg_options.buttons = {};
  482.     remove_tag_assignment_confirmation_dlg_options.buttons[i18n.t("general.cancel")] = function() {
  483.       tags_controller.remove_tag_assignment_job.tag_button.addClass('active');
  484.       tags_controller.remove_tag_assignment_job = null;
  485.   
  486.       $(this).dialog("close");
  487.     };
  489.     remove_tag_assignment_confirmation_dlg_options.buttons[i18n.t("tags.remove-tag-assignment")] = function() {
  490.       tags_controller.removeTagAssignmentAfterConfirmation();
  491.     };
  493.     $('#remove-tag-assignment-confirmation-dialog').dialog(remove_tag_assignment_confirmation_dlg_options);
  494.     uiHelper.fixDialogCloseIconOnAndroid('remove-tag-assignment-confirmation-dialog');
  496.     // eslint-disable-next-line no-unused-vars
  497.     $('#remove-tag-assignment-confirmation-dialog').bind('dialogbeforeclose', function(event) {
  498.       if (!tags_controller.persistence_ongoing && tags_controller.remove_tag_assignment_job != null) {
  499.         tags_controller.remove_tag_assignment_job.tag_button.addClass('active');
  500.         tags_controller.remove_tag_assignment_job = null;
  501.       }
  502.     });
  503.   }
  505.   initEditTagDialog(force=false) {
  506.     if (!force && this.editTagDialogInitDone) {
  507.       return;
  508.     }
  510.     this.editTagDialogInitDone = true;
  512.     var dialogWidth = 450;
  513.     var dialogHeight = 400;
  514.     var draggable = true;
  515.     var position = [55, 120];
  517.     let edit_tag_dlg_options = uiHelper.getDialogOptions(dialogWidth, dialogHeight, draggable, position);
  518.     edit_tag_dlg_options.dialogClass = 'ezra-dialog edit-tag-dialog';
  519.     edit_tag_dlg_options.title = i18n.t("tags.edit-tag");
  520.     edit_tag_dlg_options.autoOpen = false;
  522.     edit_tag_dlg_options.buttons = {};
  523.     edit_tag_dlg_options.buttons[i18n.t("general.cancel")] = function() {
  524.       setTimeout(() => { $(this).dialog("close"); }, 100);
  525.     };
  527.     edit_tag_dlg_options.buttons[i18n.t("general.save")] = {
  528.       id: 'edit-tag-button',
  529.       text: i18n.t("general.save"),
  530.       click: function() {
  531.         tags_controller.closeDialogAndUpdateTag();
  532.       }
  533.     };
  535.     $('#edit-tag-dialog').dialog(edit_tag_dlg_options);
  536.     uiHelper.fixDialogCloseIconOnAndroid('edit-tag-dialog');
  537.   
  538.     // Handle the enter key in the tag title field and rename the tag when it is pressed
  539.     $('#rename-tag-title-input:not(.bound)').addClass('bound').on("keypress", (event) => {
  540.       if (event.which == 13) {
  541.         tags_controller.closeDialogAndUpdateTag();
  542.       }
  543.     // eslint-disable-next-line no-unused-vars
  544.     }).on("keyup", (event) => {
  545.       this.handleEditTagChange();
  546.     });
  547.   }
  549.   async closeDialogAndUpdateTag() {
  550.     var oldTitle = tags_controller.edit_tag_title;
  551.     var newTitle = $('#rename-tag-title-input').val();
  552.     newTitle = newTitle.trim();
  554.     if (newTitle != oldTitle) {
  555.       let tagExisting = await this.updateButtonStateBasedOnTagTitleValidation(newTitle, 'edit-tag-button');
  557.       if (tagExisting) {
  558.         return;
  559.       }
  560.     }
  562.     var tagGroupAssignment = document.getElementById('tag-group-assignment');
  563.     var addTagGroups = tagGroupAssignment.addList;
  564.     var removeTagGroups = tagGroupAssignment.removeList;
  566.     $('#edit-tag-dialog').dialog('close');
  567.     var checkboxTag = this.getCheckboxTag(tags_controller.edit_tag_id);
  568.     var isGlobal = (checkboxTag.parent().attr('id') == 'tags-content-global');
  569.     
  570.     var result = await ipcDb.updateTag(tags_controller.edit_tag_id, newTitle, addTagGroups, removeTagGroups);
  571.     if (result.success == false) {
  572.       var message = `The tag <i>${tags_controller.edit_tag_title}</i> could not be updated.<br>
  573.                      An unexpected database error occurred:<br><br>
  574.                      ${result.exception}<br><br>
  575.                      Please restart the app.`;
  577.       await showErrorDialog('Database Error', message);
  578.       uiHelper.hideTextLoadingIndicator();
  579.       return;
  580.     }
  582.     if (newTitle != oldTitle) {
  583.       await eventController.publishAsync(
  584.         'on-tag-renamed',
  585.         {
  586.           tagId: tags_controller.edit_tag_id,
  587.           oldTitle: tags_controller.edit_tag_title,
  588.           newTitle: newTitle
  589.         }
  590.       );
  592.       tags_controller.updateTagInView(tags_controller.edit_tag_id, newTitle);
  593.       tags_controller.updateTagTitlesInVerseList(tags_controller.edit_tag_id, isGlobal, newTitle);
  595.       tags_controller.sortTagLists();
  596.       await tags_controller.updateTagsViewAfterVerseSelection(true);
  597.     }
  599.     if (addTagGroups.length > 0 || removeTagGroups.length > 0) {
  600.       await eventController.publishAsync('on-tag-group-members-changed', {
  601.         tagId: tags_controller.edit_tag_id,
  602.         addTagGroups,
  603.         removeTagGroups
  604.       });
  606.       if (this.tagGroupUsed()) {
  607.         const currentTabIndex = app_controller.tab_controller.getSelectedTabIndex();
  608.         await this.updateTagsView(currentTabIndex, true);
  609.       }
  610.     }
  612.     await eventController.publishAsync('on-latest-tag-changed', {
  613.       'tagId': tags_controller.edit_tag_id,
  614.       'added': false
  615.     });
  617.     await waitUntilIdle();
  618.     checkboxTag = this.getCheckboxTag(tags_controller.edit_tag_id);
  619.     checkboxTag.effect('bounce', 'fast');
  620.   }
  622.   updateTagInView(id, title) {
  623.     // Rename tag in tag list on the left side
  624.     var checkboxTag = tags_controller.getCheckboxTag(id);
  625.     var label = checkboxTag.find('.cb-label');
  626.     label.text(title);
  628.     // Rename tag in tag selection menu above bible browser
  629.     var tag_selection_entry = $('#tag-browser-tag-' + id).find('.tag-browser-tag-title').find('.tag-browser-tag-title-content');
  630.     tag_selection_entry.text(title);
  631.   }
  633.   async saveNewTag(e) {
  634.     uiHelper.showTextLoadingIndicator();
  635.     $(e).dialog("close");
  637.     await waitUntilIdle(); // Give the dialog some time to close
  639.     var new_tag_title = $('#new-standard-tag-title-input').val();
  640.     tags_controller.new_tag_created = true;
  641.     this.last_created_tag = new_tag_title;
  642.     new_tag_title = new_tag_title.trim();
  644.     let tagGroupAssignment = document.getElementById('new-tag-dialog-tag-group-assignment');
  645.     let tagGroups = tagGroupAssignment.addList;
  647.     var result = await ipcDb.createNewTag(new_tag_title, tagGroups);
  648.     if (result.success == false) {
  649.       var message = `The new tag <i>${new_tag_title}</i> could not be saved.<br>
  650.                      An unexpected database error occurred:<br><br>
  651.                      ${result.exception}<br><br>
  652.                      Please restart the app.`;
  654.       await showErrorDialog('Database Error', message);
  655.       uiHelper.hideTextLoadingIndicator();
  656.       return;
  657.     }
  659.     await eventController.publishAsync('on-tag-created', result.dbObject.id);
  661.     if (this.tagGroupUsed()) {
  662.       await eventController.publishAsync('on-tag-group-members-changed', {
  663.         tagId: result.dbObject.id,
  664.         addTagGroups: [ this.currentTagGroupId ],
  665.         removeTagGroups: []
  666.       });
  667.     }
  669.     await eventController.publishAsync('on-latest-tag-changed', {
  670.       'tagId': result.dbObject.id,
  671.       'added': true
  672.     });
  674.     var tab = app_controller.tab_controller.getTab();
  675.     await tags_controller.updateTagList(tab.getBook(), this.currentTagGroupId, tab.getContentId(), true);
  676.     await tags_controller.updateTagsViewAfterVerseSelection(true);
  677.     uiHelper.hideTextLoadingIndicator();
  678.   }
  680.   async handleNewTagButtonClick(event) {
  681.     if (event.target.classList.contains('ui-state-disabled')) {
  682.       return;
  683.     }
  685.     eventController.publish('on-button-clicked');
  687.     await waitUntilIdle();
  688.     tags_controller.initNewTagDialog();
  690.     const tagInput = document.getElementById('new-standard-tag-title-input');
  691.     tagInput.value = '';
  692.     var $dialogContainer = $('#new-standard-tag-dialog');
  693.     $dialogContainer.dialog('open');
  695.     await waitUntilIdle();
  697.     let allTagGroups = await ipcDb.getAllTagGroups();
  698.     let tagGroupAssignmentSection = document.getElementById('tag-group-assignment-section');
  699.     let tagGroupAssignment = document.getElementById('new-tag-dialog-tag-group-assignment');
  700.     tagGroupAssignment.tagGroupManager._addList = [];
  702.     if (allTagGroups.length == 0) {
  703.       tagGroupAssignmentSection.style.display = 'none';
  704.     } else {
  705.       tagGroupAssignmentSection.style.removeProperty('display');
  707.       await tagGroupAssignment.tagGroupManager.refreshItemList();
  709.       if (this.tagGroupUsed()) {
  710.         tagGroupAssignment.tagGroupManager.enableElementById(this.currentTagGroupId);
  711.         tagGroupAssignment.tagGroupManager._addList = [ this.currentTagGroupId ];
  712.       }
  713.     }
  715.     this.updateButtonStateBasedOnTagTitleValidation('', 'create-tag-button');
  716.     let addExistingTagsLink = document.getElementById('add-existing-tags-to-tag-group-link').parentNode;
  718.     if (this.tagGroupUsed()) {
  719.       let remainingTagCount = await this.updateAddTagToGroupTagList();
  721.       if (remainingTagCount > 0) {
  722.         addExistingTagsLink.style.removeProperty('display');
  723.       } else {
  724.         addExistingTagsLink.style.display = 'none';
  725.       }
  726.     } else {
  727.       addExistingTagsLink.style.display = 'none';
  728.     }
  730.     if (platformHelper.isCordova()) {
  731.       // Focus the input field (and show the screen keyboard) a little bit delayed
  732.       // to give the layout engine some time to render the input field.
  733.       setTimeout(async () => {
  734.         await waitUntilIdle();
  735.         tagInput.focus();
  736.       }, 1000);
  737.     } else {
  738.       tagInput.focus();
  739.     }
  740.   }
  742.   handleDeleteTagButtonClick(event) {
  743.     eventController.publish('on-button-clicked');
  744.     tags_controller.initDeleteTagConfirmationDialog();
  746.     var checkboxTag = $(event.target).closest('.checkbox-tag');
  747.     var tag_id = checkboxTag.attr('tag-id');
  748.     var parent_id = checkboxTag.parent().attr('id');
  749.     var label = checkboxTag.find('.cb-label').html();
  751.     tags_controller.tag_to_be_deleted_is_global = (parent_id == 'tags-content-global');
  752.     tags_controller.tag_to_be_deleted_title = label;
  753.     tags_controller.tag_to_be_deleted = tag_id;
  754.     tags_controller.permanently_delete_tag = tags_controller.tagGroupUsed() ? false : true;
  755.     
  756.     var number_of_tagged_verses = checkboxTag.attr('global-assignment-count');
  758.     let deleteTagFromGroupExplanation = document.getElementById('delete-tag-from-group-explanation');
  759.     let reallyDeleteTagExplanation = document.getElementById('really-delete-tag-explanation');
  760.     let permanentlyDeleteTagBox = document.getElementById('permanently-delete-tag-box');
  761.     let permanentlyDeleteTagWarning = document.getElementById('permanently-delete-tag-warning');
  762.     let tagGroup = this.currentTagGroupTitle;
  764.     let permanentlyDeleteCheckbox = document.getElementById('permanently-delete-tag');
  765.     permanentlyDeleteCheckbox.checked = false;
  767.     if (this.tagGroupUsed()) {
  768.       // Tag group used
  770.       reallyDeleteTagExplanation.style.display = 'none';
  771.       permanentlyDeleteTagWarning.style.visibility = 'hidden';
  772.       permanentlyDeleteTagBox.style.removeProperty('display');
  774.       deleteTagFromGroupExplanation.innerHTML = i18n.t('tags.delete-tag-from-group-explanation', { tag: label, group: tagGroup, interpolation: {escapeValue: false}});
  775.       deleteTagFromGroupExplanation.style.display = 'block';
  776.     } else {
  777.       // All tags - no tag group
  779.       deleteTagFromGroupExplanation.style.display = 'none';
  780.       permanentlyDeleteTagWarning.style.visibility = 'visible';
  781.       permanentlyDeleteTagBox.style.display = 'none';
  782.       reallyDeleteTagExplanation.style.display = 'block';
  783.     }
  785.     $('#delete-tag-name').html(label);
  786.     $('#delete-tag-number-of-verses').html(number_of_tagged_verses); // FIXME
  787.     $('#delete-tag-confirmation-dialog').dialog('open');
  788.   }
  790.   deleteTagAfterConfirmation() {
  791.     $('#delete-tag-confirmation-dialog').dialog('close');
  793.     tags_controller.permanently_delete_tag = document.getElementById('permanently-delete-tag').checked;
  794.    
  795.     setTimeout(async () => {
  796.       let result = null;
  798.       if (!tags_controller.tagGroupUsed() || tags_controller.permanently_delete_tag) {
  799.         // Permanently delete tag
  800.         result = await ipcDb.removeTag(tags_controller.tag_to_be_deleted);
  801.       } else {
  802.         // Remove tag from current tag group
  803.         result = await ipcDb.updateTag(tags_controller.tag_to_be_deleted,
  804.                                        tags_controller.tag_to_be_deleted_title,
  805.                                        [],
  806.                                        [ tags_controller.currentTagGroupId ]);
  807.       }
  809.       if (result.success == false) {
  810.         var message = `The tag <i>${tags_controller.tag_to_be_deleted_title}</i> could not be deleted.<br>
  811.                       An unexpected database error occurred:<br><br>
  812.                       ${result.exception}<br><br>
  813.                       Please restart the app.`;
  815.         await showErrorDialog('Database Error', message);
  816.         uiHelper.hideTextLoadingIndicator();
  817.         return;
  818.       }
  820.       await tags_controller.removeTagById(tags_controller.tag_to_be_deleted, tags_controller.tag_to_be_deleted_title);
  822.       if (tags_controller.tagGroupUsed()) {
  823.         await eventController.publishAsync('on-tag-group-members-changed', {
  824.           tagId: tags_controller.tag_to_be_deleted,
  825.           addTagGroups: [],
  826.           removeTagGroups: [ this.currentTagGroupId ]
  827.         });
  828.       } else {
  829.         await eventController.publishAsync('on-tag-deleted', tags_controller.tag_to_be_deleted);
  830.       }
  832.       await tags_controller.updateTagsViewAfterVerseSelection(true);
  833.       await tags_controller.updateTagUiBasedOnTagAvailability();
  834.     }, 50);
  835.   }
  837.   async removeTagById(tag_id, tag_title) {
  838.     var checkboxTag = tags_controller.getCheckboxTag(tag_id);
  839.     checkboxTag.detach();
  841.     if (!tags_controller.tagGroupUsed()) {
  842.       if (this.tag_store.latest_tag_id != null && this.tag_store.latest_tag_id == tag_id) {
  843.         this.tag_store.latest_tag_id = null;
  844.         await this.tag_store.refreshTagList();
  845.       }
  846.     }
  848.     tags_controller.updateTagCountAfterRendering();
  850.     // eslint-disable-next-line no-unused-vars
  851.     var tag_data_elements = $('.tag-id').filter(function(index){
  852.       return ($(this).html() == tag_id);
  853.     });
  855.     if (!tags_controller.tagGroupUsed()) {
  856.       var verse_list = $.create_xml_doc(
  857.         app_controller.verse_selection.element_list_to_xml_verse_list(tag_data_elements)
  858.       );
  860.       tags_controller.changeVerseListTagInfo(tag_id, tag_title, verse_list, "remove");
  861.     }
  862.   }
  864.   async assignLastTag() {
  865.     app_controller.hideAllMenus();
  866.     uiHelper.showTextLoadingIndicator();
  867.     await waitUntilIdle();
  869.     if (this.tag_store.latest_tag_id != null) {
  870.       var checkboxTag = this.getCheckboxTag(this.tag_store.latest_tag_id);
  871.       await this.clickCheckBoxTag(checkboxTag);
  872.     }
  874.     uiHelper.hideTextLoadingIndicator();
  875.   }
  877.   async handleTagLabelClick(event) {
  878.     var checkboxTag = $(event.target).closest('.checkbox-tag');
  879.     await this.clickCheckBoxTag(checkboxTag);
  880.   }
  882.   async clickCheckBoxTag(checkboxTag) {
  883.     var current_verse_list = app_controller.verse_selection.selectedVerseReferences;
  885.     if (!tags_controller.is_blocked && current_verse_list.length > 0) {
  886.       this.toggleTagButton(checkboxTag);
  887.       await tags_controller.handleCheckboxTagStateChange(checkboxTag);
  888.     }
  889.   }
  891.   toggleTagButton(checkboxTag) {
  892.     var tag_button = checkboxTag[0].querySelector('.tag-button');
  893.     var isActive = tag_button.classList.contains('active');
  895.     if (isActive) {
  896.       tag_button.classList.remove('active');
  897.       tag_button.classList.add('no-hl');
  899.       if (platformHelper.isElectron()) {
  900.         tag_button.addEventListener('mouseleave', tags_controller.removeTagButtonNoHl);
  901.       }
  902.     } else {
  903.       tag_button.classList.add('active');
  904.     }
  905.   }
  907.   removeTagButtonNoHl(event) {
  908.     event.target.classList.remove('no-hl');
  909.     event.target.removeEventListener('mouseleave', tags_controller.removeTagButtonNoHl);
  910.   }
  912.   async handleTagCbClick(event) {
  913.     await waitUntilIdle();
  915.     var checkboxTag = $(event.target).closest('.checkbox-tag');
  916.     this.toggleTagButton(checkboxTag);
  917.     await tags_controller.handleCheckboxTagStateChange(checkboxTag);
  918.   }
  920.   async handleCheckboxTagStateChange(checkboxTag) {
  921.     var current_verse_list = app_controller.verse_selection.selectedVerseReferences;
  923.     if (tags_controller.is_blocked || current_verse_list.length == 0) {
  924.       return;
  925.     }
  927.     tags_controller.is_blocked = true;
  928.     setTimeout(function() {
  929.       tags_controller.is_blocked = false;
  930.     }, 300);
  932.     var id = parseInt(checkboxTag.attr('tag-id'));
  933.     var tag_button = checkboxTag[0].querySelector('.tag-button');
  934.     var cb_label = checkboxTag.find('.cb-label').html();
  935.     var tag_button_is_active = tag_button.classList.contains('active');
  937.     var current_verse_selection = app_controller.verse_selection.current_verse_selection_as_xml(); 
  938.     var current_verse_reference_ids = app_controller.verse_selection.current_verse_selection_as_verse_reference_ids();
  940.     checkboxTag.find('.cb-label').removeClass('underline');
  941.     checkboxTag.find('.cb-label-postfix').html('');
  943.     var is_global = false;
  944.     if (checkboxTag.find('.is-global').html() == 'true') {
  945.       is_global = true;
  946.     }
  948.     if (tag_button_is_active) {
  949.       // Update last used timestamp
  950.       var current_timestamp = new Date(Date.now()).getTime();
  951.       checkboxTag.attr('last-used-timestamp', current_timestamp);
  953.       this.tag_store.updateTagTimestamp(id, current_timestamp);
  954.       await this.tag_store.updateLatestAndOldestTagData();
  956.       app_controller.tag_selection_menu.updateLastUsedTimestamp(id, current_timestamp);
  957.       app_controller.tag_selection_menu.applyCurrentFilters();
  959.       $(tag_button).attr('title', i18n.t("tags.remove-tag-assignment"));
  961.       var filteredVerseBoxes = [];
  962.       var currentVerseList = verseListController.getCurrentVerseList();
  964.       // Create a list of filtered ids, that only contains the verses that do not have the selected tag yet
  965.       for (let i = 0; i < current_verse_reference_ids.length; i++) {
  966.         var currentVerseReferenceId = current_verse_reference_ids[i];
  967.         var currentVerseBox = currentVerseList[0].querySelector('.verse-reference-id-' + currentVerseReferenceId);
  969.         if (currentVerseBox != null) {
  970.           var existingTagIdElements = currentVerseBox.querySelectorAll('.tag-id');
  971.           var existingTagIds = [];
  972.           
  973.           for (let j = 0; j < existingTagIdElements.length; j++) {
  974.             var currentTagId = parseInt(existingTagIdElements[j].innerText);
  975.             existingTagIds.push(currentTagId);
  976.           }
  978.           if (!existingTagIds.includes(id)) {
  979.             filteredVerseBoxes.push(currentVerseBox);
  980.           }
  981.         }
  982.       }
  984.       var result = await ipcDb.assignTagToVerses(id, filteredVerseBoxes);
  985.       if (result.success == false) {
  986.         var message = `The tag <i>${cb_label}</i> could not be assigned to the selected verses.<br>
  987.                       An unexpected database error occurred:<br><br>
  988.                       ${result.exception}<br><br>
  989.                       Please restart the app.`;
  991.         await showErrorDialog('Database Error', message);
  992.         uiHelper.hideTextLoadingIndicator();
  993.         return;
  994.       }
  996.       tags_controller.changeVerseListTagInfo(id,
  997.                                              cb_label,
  998.                                              $.create_xml_doc(current_verse_selection),
  999.                                              "assign");
  1001.       await eventController.publishAsync('on-latest-tag-changed', {
  1002.         'tagId': id,
  1003.         'added': true
  1004.       });
  1006.       var currentBook = app_controller.tab_controller.getTab().getBook();
  1008.       tags_controller.updateTagCountAfterRendering(currentBook != null);
  1009.       await tags_controller.updateTagsViewAfterVerseSelection(true);
  1010.       await tags_controller.updateTagUiBasedOnTagAvailability();
  1012.     } else {
  1014.       tags_controller.remove_tag_assignment_job = {
  1015.         'id': id,
  1016.         'is_global': is_global,
  1017.         'cb_label': cb_label,
  1018.         'checkboxTag': checkboxTag,
  1019.         'verse_list': current_verse_list,
  1020.         'verse_ids': current_verse_reference_ids,
  1021.         'xml_verse_selection': $.create_xml_doc(current_verse_selection),
  1022.         'tag_button': $(tag_button)
  1023.       };
  1025.       if (current_verse_list.length > 1) {
  1026.         tags_controller.initRemoveTagAssignmentConfirmationDialog();
  1028.         $('#remove-tag-assignment-name').html(cb_label);
  1029.         $('#remove-tag-assignment-confirmation-dialog').dialog('open');
  1030.       } else {
  1031.         await tags_controller.removeTagAssignmentAfterConfirmation();
  1032.         await tags_controller.updateTagsViewAfterVerseSelection(true);
  1033.       }
  1034.     }
  1035.   }
  1036.   
  1037.   getCheckboxTag(id) {
  1038.     var checkboxTag = $('#tags-content-global').find('.checkbox-tag[tag-id="' + id + '"]');
  1039.     return checkboxTag;
  1040.   }
  1042.   updateTagVerseCount(id, verseBoxes, to_increment) {
  1043.     var count = verseBoxes.length;
  1044.     var checkboxTag = tags_controller.getCheckboxTag(id);
  1045.     var cb_label_element = checkboxTag.find('.cb-label');
  1046.     var tag_title = cb_label_element.text();
  1047.     var tag_assignment_count_element = checkboxTag.find('.cb-label-tag-assignment-count');
  1048.     var tag_assignment_count_values = tag_assignment_count_element.text().substring(
  1049.       1, tag_assignment_count_element.text().length - 1
  1050.     );
  1052.     var current_book_count = 0;
  1053.     var current_global_count = 0;
  1054.     var new_book_count = 0;
  1055.     var new_global_count = 0;
  1057.     var currentBook = app_controller.tab_controller.getTab().getBook();
  1059.     if (currentBook == null) {
  1060.       current_global_count = parseInt(tag_assignment_count_values);
  1061.     } else {
  1062.       current_book_count = parseInt(tag_assignment_count_values.split('|')[0]);
  1063.       current_global_count = parseInt(tag_assignment_count_values.split('|')[1]);
  1064.     }
  1066.     if (to_increment) {
  1067.       new_book_count = current_book_count + count;
  1068.       new_global_count = current_global_count + count;
  1069.     } else {
  1070.       new_book_count = current_book_count - count;
  1071.       new_global_count = current_global_count - count;
  1072.     }
  1074.     if (new_book_count > 0) {
  1075.       cb_label_element.addClass('cb-label-assigned');
  1076.     } else {
  1077.       cb_label_element.removeClass('cb-label-assigned');
  1078.     }
  1080.     checkboxTag.attr('book-assignment-count', new_book_count);
  1081.     checkboxTag.attr('global-assignment-count', new_global_count);
  1083.     var new_label = "";
  1084.     if (currentBook == null) {
  1085.       new_label = "(" + new_global_count + ")";
  1086.     } else {
  1087.       new_label = "(" + new_book_count + " | " + new_global_count + ")";
  1088.     }
  1090.     tag_assignment_count_element.text(new_label);
  1092.     // Update tag count in tag store statistics
  1093.     var bookList = this.verse_box_helper.getBookListFromVerseBoxes(verseBoxes);
  1094.     tags_controller.tag_store.updateTagCount(id, bookList, count, to_increment);
  1096.     // Update tag count in tag selection menu as well
  1097.     app_controller.tag_selection_menu.updateVerseCountInTagMenu(tag_title, new_global_count);
  1098.   }
  1100.   async removeTagAssignmentAfterConfirmation() {
  1101.     tags_controller.persistence_ongoing = true;
  1102.     $('#remove-tag-assignment-confirmation-dialog').dialog('close');
  1104.     var job = tags_controller.remove_tag_assignment_job;
  1105.     tags_controller.changeVerseListTagInfo(job.id,
  1106.                                            job.cb_label,
  1107.                                            job.xml_verse_selection,
  1108.                                            "remove");
  1110.     job.tag_button.attr('title', i18n.t("tags.assign-tag"));
  1111.     job.checkboxTag.append(tags_controller.loading_indicator);
  1113.     var verse_boxes = [];
  1115.     var currentVerseList = verseListController.getCurrentVerseList();
  1117.     for (let i = 0; i < job.verse_ids.length; i++) {
  1118.       var currentVerseReferenceId = job.verse_ids[i];
  1119.       var currentVerseBox = currentVerseList[0].querySelector('.verse-reference-id-' + currentVerseReferenceId);
  1120.       verse_boxes.push(currentVerseBox);
  1121.     }
  1123.     var result = await ipcDb.removeTagFromVerses(job.id, verse_boxes);
  1124.     if (result.success == false) {
  1125.       var message = `The tag <i>${job.cb_label}</i> could not be removed from the selected verses.<br>
  1126.                     An unexpected database error occurred:<br><br>
  1127.                     ${result.exception}<br><br>
  1128.                     Please restart the app.`;
  1130.       await showErrorDialog('Database Error', message);
  1131.       uiHelper.hideTextLoadingIndicator();
  1132.       return;
  1133.     }
  1135.     await eventController.publishAsync('on-latest-tag-changed', {
  1136.       'tagId': job.id,
  1137.       'added': false
  1138.     });
  1140.     var currentBook = app_controller.tab_controller.getTab().getBook();
  1141.     tags_controller.updateTagCountAfterRendering(currentBook != null);
  1142.     tags_controller.updateTagUiBasedOnTagAvailability();
  1144.     tags_controller.remove_tag_assignment_job = null;
  1145.     tags_controller.persistence_ongoing = false;
  1146.   }
  1148.   /**
  1149.    * This function updates the tag info in existing verse lists after tags have been assigned/removed.
  1150.    * It does this for the currently opened tab and also within all other tabs where the corresponding verse is loaded.
  1151.    */
  1152.   async changeVerseListTagInfo(tag_id,
  1153.                                tag_title,
  1154.                                verse_selection,
  1155.                                action) {
  1157.     verse_selection = $(verse_selection);
  1158.     var selected_verses = verse_selection.find('verse');
  1159.     var current_verse_list_frame = verseListController.getCurrentVerseListFrame();
  1161.     for (let i = 0; i < selected_verses.length; i++) {
  1162.       let current_verse_reference_id = $(selected_verses[i]).find('verse-reference-id').text();
  1163.       let current_verse_box = current_verse_list_frame[0].querySelector('.verse-reference-id-' + current_verse_reference_id);
  1165.       let verseBoxObj = new VerseBox(current_verse_box);
  1166.       let highlight = (action == "assign");
  1168.       verseBoxObj.changeVerseListTagInfo(tag_id, tag_title, action, highlight);
  1169.     }
  1171.     for (let i = 0; i < selected_verses.length; i++) {
  1172.       let current_verse_reference_id = $(selected_verses[i]).find('verse-reference-id').text();
  1173.       let current_verse_box = current_verse_list_frame[0].querySelector('.verse-reference-id-' + current_verse_reference_id);
  1175.       await this.verse_box_helper.iterateAndChangeAllDuplicateVerseBoxes(current_verse_box, { tag_id: tag_id, tag_title: tag_title, action: action }, (changedValue, targetVerseBox) => {
  1176.         let verseBoxObj = new VerseBox(targetVerseBox);
  1177.         verseBoxObj.changeVerseListTagInfo(changedValue.tag_id, changedValue.tag_title, changedValue.action);
  1178.       });
  1179.     }
  1180.   }
  1182.   sortTagLists() {
  1183.     var global_tags_box = $('#tags-content-global');
  1184.     var sort_function = function(a,b) {
  1185.       return ($(a).find('.cb-label').text().toLowerCase() > $(b).find('.cb-label').text().toLowerCase()) ? 1 : -1;
  1186.     };
  1188.     global_tags_box.find('.checkbox-tag').sort_elements(sort_function);
  1189.   }
  1191.   async getTagList(forceRefresh=true) {
  1192.     var tagList = await this.tag_store.getTagList(forceRefresh);
  1193.     return tagList;
  1194.   }
  1196.   async updateTagList(currentBook, tagGroupId=null, contentId=null, forceRefresh=false) {
  1197.     if (tagGroupId == null) {
  1198.       tagGroupId = this.currentTagGroupId;
  1199.     }
  1201.     if (forceRefresh) {
  1202.       this.initialRenderingDone = false;
  1203.     }
  1205.     if (contentId == null) {
  1206.       contentId = currentBook;
  1207.     }
  1209.     if (contentId != this.lastContentId || forceRefresh) {
  1210.       var tagList = await this.tag_store.getTagList(forceRefresh);
  1211.       if (tagGroupId != null && tagGroupId > 0) {
  1212.         tagList = await this.tag_store.getTagGroupMembers(tagGroupId, tagList);
  1213.       }
  1215.       var tagStatistics = await this.tag_store.getBookTagStatistics(currentBook, forceRefresh);
  1216.       await this.renderTags(tagList, tagStatistics, currentBook != null);
  1217.       this.initialRenderingDone = true;
  1218.       await waitUntilIdle();
  1220.       this.lastContentId = contentId;
  1221.     } else {
  1222.       app_controller.tag_statistics.highlightFrequentlyUsedTags();
  1223.     }
  1224.   }
  1226.   async renderTags(tag_list, tag_statistics, is_book=false) {
  1227.     //console.time("renderTags");
  1228.     var current_book = app_controller.tab_controller.getTab().getBook();
  1229.     var global_tags_box_el = document.getElementById('tags-content-global');
  1231.     // Assume that verses were selected before, because otherwise the checkboxes may not be properly cleared
  1232.     this.verses_were_selected_before = true;
  1234.     // eslint-disable-next-line no-undef
  1235.     var all_tags_html = tagListTemplate({
  1236.       tags: tag_list,
  1237.       tagStatistics: tag_statistics,
  1238.       current_book: current_book,
  1239.       current_filter: $('#tags-search-input').val(),
  1240.       edit_tag_label: i18n.t("tags.edit-tag"),
  1241.       delete_tag_label: i18n.t("tags.delete-tag"),
  1242.     });
  1244.     global_tags_box_el.innerHTML = '';
  1245.     global_tags_box_el.innerHTML = all_tags_html;
  1247.     await app_controller.tag_statistics.refreshBookTagStatistics(tag_list, tag_statistics, current_book);
  1248.     uiHelper.configureButtonStyles('#tags-content');
  1250.     tags_controller.updateTagsViewAfterVerseSelection(true);
  1251.     tags_controller.updateTagCountAfterRendering(is_book);
  1252.     await tags_controller.updateTagUiBasedOnTagAvailability(tag_list.length);
  1254.     var old_tags_search_input_value = $('#tags-search-input')[0].value;    
  1255.     if (this.new_tag_created && old_tags_search_input_value != "") {
  1256.       // If the newly created tag doesn't match the current search input
  1257.       // we remove the current search condition. Otherwise the new tag
  1258.       // wouldn't show up in the list as expected.
  1259.       if (!tags_controller.tag_list_filter.stringMatches(this.last_created_tag,
  1260.                                                          $('#tags-search-input')[0].value)) {
  1261.         $('#tags-search-input')[0].value = "";
  1262.         old_tags_search_input_value = "";
  1263.       }
  1264.     }    
  1265.     this.new_tag_created = false;
  1267.     tags_controller.hideTagListLoadingIndicator();
  1268.     //console.timeEnd("renderTags");
  1269.   }
  1271.   async handleEditTagClick(event) {
  1272.     eventController.publish('on-button-clicked');
  1273.     tags_controller.initEditTagDialog();
  1275.     var checkboxTag = $(event.target).closest('.checkbox-tag');
  1276.     var cb_label = checkboxTag.find('.cb-label').text();
  1278.     tags_controller.edit_tag_id = parseInt(checkboxTag.attr('tag-id'));
  1279.     tags_controller.edit_tag_title = cb_label;
  1281.     const $tagInput = $('#rename-tag-title-input');
  1282.     let tagButton = document.getElementById('edit-tag-button');
  1283.     uiHelper.disableButton(tagButton);
  1285.     $tagInput.val(cb_label);
  1287.     $('#edit-tag-dialog').dialog('open');
  1289.     var tagGroupAssignment = document.getElementById('tag-group-assignment');
  1290.     await tagGroupAssignment.tagGroupManager.refreshItemList();
  1292.     tagGroupAssignment.tagid = tags_controller.edit_tag_id;
  1293.     tagGroupAssignment.onChange = () => {
  1294.       this.handleEditTagChange();
  1295.     };
  1297.     if (!platformHelper.isMobile()) {
  1298.       $('#rename-tag-title-input').focus();
  1299.     }
  1300.   }
  1302.   handleEditTagChange() {
  1303.     let tagGroupAssignment = document.getElementById('tag-group-assignment');
  1304.     let tagButton = document.getElementById('edit-tag-button');
  1305.     var oldTitle = tags_controller.edit_tag_title;
  1306.     var newTitle = document.getElementById('rename-tag-title-input').value;
  1308.     if (newTitle != oldTitle || tagGroupAssignment.isChanged) {
  1309.       uiHelper.enableButton(tagButton);
  1310.     } else {
  1311.       uiHelper.disableButton(tagButton);
  1312.     }
  1314.     if (!tagGroupAssignment.isChanged) {
  1315.       this.updateButtonStateBasedOnTagTitleValidation(newTitle, 'edit-tag-button');
  1316.     }
  1317.   }
  1319.   updateTagCountAfterRendering(is_book=false) {
  1320.     var global_tag_count = $('#tags-content-global').find('.checkbox-tag').length;
  1321.     var global_used_tag_count = $('#tags-content-global').find('.cb-label-assigned').length;
  1322.     var tag_list_stats = $($('#tags-content').find('#tag-list-stats'));
  1323.     var tag_list_stats_content = "";
  1325.     if (is_book) {
  1326.       tag_list_stats_content += global_used_tag_count + ' ' + i18n.t('tags.stats-used') + ' / ';
  1327.     }
  1329.     tag_list_stats_content += global_tag_count + ' ' + i18n.t('tags.stats-total');
  1330.     tag_list_stats.html(tag_list_stats_content);
  1331.   }
  1333.   removeEventListeners(element_list, type, listener) {
  1334.     for (let i = 0; i < element_list.length; i++) {
  1335.       element_list[i].removeEventListener(type, listener);
  1336.     }
  1337.   }
  1339.   addEventListeners(element_list, type, listener) {
  1340.     for (let i = 0; i < element_list.length; i++) {
  1341.       element_list[i].addEventListener(type, listener);
  1342.     }
  1343.   }
  1345.   bindTagEvents() {
  1346.     var tags_box = document.getElementById('tags-content-global');
  1348.     tags_box.addEventListener('click', async function(event) {
  1349.       // Use event delegation, so that we do not have to add an event listener to each element.
  1351.       const CLICK_TIMEOUT = 100;
  1353.       if (event.target.matches('.delete-icon') || event.target.matches('.delete-button')) {
  1354.         setTimeout(() => { tags_controller.handleDeleteTagButtonClick(event); }, CLICK_TIMEOUT);
  1355.       } else if (event.target.matches('.edit-icon') || event.target.matches('.edit-button')) {
  1356.         setTimeout(() => { tags_controller.handleEditTagClick(event); }, CLICK_TIMEOUT);
  1357.       } else if (event.target.matches('.tag-button')) {
  1358.         await waitUntilIdle();
  1359.         await tags_controller.handleTagCbClick(event);
  1360.       } else if (event.target.matches('.cb-label')) {
  1361.         await waitUntilIdle();
  1362.         await tags_controller.handleTagLabelClick(event);
  1363.       } else {
  1364.         return;
  1365.       }
  1366.     }, false);
  1367.   }
  1369.   updateTagTitlesInVerseList(tag_id, is_global, title) {
  1370.     var tag_class = is_global ? "tag-global" : "tag-book";
  1372.     // eslint-disable-next-line no-unused-vars
  1373.     var tag_data_elements = $('.tag-id').filter(function(index) {
  1374.       return (($(this).html() == tag_id) && ($(this).parent().hasClass(tag_class)));
  1375.     }).closest('.' + tag_class);
  1377.     for (let i = 0; i < tag_data_elements.length; i++) {
  1378.       var current_tag_data = $(tag_data_elements[i]);
  1379.       current_tag_data.find('.tag-title').html(title);
  1381.       var current_verse_box = new VerseBox(current_tag_data.closest('.verse-box')[0]);
  1382.       current_verse_box.updateTagTooltip();
  1383.       current_verse_box.updateVisibleTags();
  1384.     }
  1385.   }
  1387.   async updateTagsViewAfterVerseSelection(force) {
  1388.     //console.time('updateTagsViewAfterVerseSelection');
  1389.     if (tags_controller.verse_selection_blocked && force !== true) {
  1390.       return;
  1391.     }
  1393.     tags_controller.verse_selection_blocked = true;
  1394.     setTimeout(function() {
  1395.       tags_controller.verse_selection_blocked = false;
  1396.     }, 300);
  1398.     var versesSelected = app_controller.verse_selection.getSelectedVerseBoxes().length > 0;
  1399.     var selected_verse_tags = [];
  1401.     if (versesSelected) { // Verses are selected
  1403.       selected_verse_tags = app_controller.verse_selection.getCurrentSelectionTags();
  1404.       var checkboxTags = document.querySelectorAll('.checkbox-tag');
  1406.       for (let i = 0; i < checkboxTags.length; i++) {
  1407.         this.formatCheckboxElementBasedOnSelection(checkboxTags[i], selected_verse_tags);
  1408.       }
  1410.       this.verses_were_selected_before = true;
  1412.     } else { // No verses are selected!
  1414.       if (this.verses_were_selected_before) {
  1415.         this.uncheckAllCheckboxElements();
  1416.       }
  1418.       this.verses_were_selected_before = false;
  1419.     }
  1421.     //console.timeEnd('updateTagsViewAfterVerseSelection');
  1422.   }
  1424.   formatCheckboxElementBasedOnSelection(cb_element, selected_verse_tags) {
  1425.     var current_tag_button = cb_element.querySelector('.tag-button');
  1426.     var current_title_element = cb_element.querySelector('.cb-label');
  1427.     var current_title = current_title_element.innerHTML;
  1428.     var current_title_element_postfix = cb_element.querySelector('.cb-label-postfix');
  1429.     var match_found = false;
  1431.     for (let j = 0; j < selected_verse_tags.length; j++) {
  1432.       var current_tag_obj = selected_verse_tags[j];
  1434.       if (current_tag_obj.title == current_title) {
  1435.         if (current_tag_obj.complete) {
  1436.           current_tag_button.setAttribute('title', this.unassign_tag_label);
  1437.           current_tag_button.classList.add('active');
  1438.           current_title_element_postfix.innerHTML = '';
  1439.           current_title_element.classList.remove('underline');
  1440.         } else {
  1441.           current_tag_button.setAttribute('title', this.assign_tag_label);
  1442.           current_tag_button.classList.remove('active');
  1443.           current_title_element_postfix.innerHTML = '&nbsp;*';
  1444.           current_title_element.classList.add('underline');
  1445.         }
  1447.         match_found = true;
  1448.       }
  1449.     }
  1451.     if (!match_found) {
  1452.       current_tag_button.classList.remove('active');
  1453.       current_tag_button.setAttribute('title', this.assign_tag_label);
  1454.       current_title_element.classList.remove('underline');
  1455.       current_title_element_postfix.innerHTML = '';
  1456.     }
  1458.     if (!this.verses_were_selected_before) {
  1459.       current_tag_button.classList.remove('disabled');
  1460.     }
  1461.   }
  1463.   uncheckAllCheckboxElements() {
  1464.     var all_checkbox_elements = document.querySelectorAll('.checkbox-tag');
  1466.     if (all_checkbox_elements.length > 0) {
  1467.       for (let i = 0; i < all_checkbox_elements.length; i++) {
  1468.         var current_checkbox_element = all_checkbox_elements[i];
  1470.         var current_tag_button = current_checkbox_element.querySelector('.tag-button');
  1471.         current_tag_button.setAttribute('title', this.assign_tag_hint);
  1472.         current_tag_button.classList.add('disabled');
  1473.         current_tag_button.classList.remove('active');
  1475.         var current_title_element = current_checkbox_element.querySelector('.cb-label');
  1476.         current_title_element.classList.remove('underline');
  1478.         var current_title_element_postfix = current_checkbox_element.querySelector('.cb-label-postfix');
  1479.         current_title_element_postfix.innerHTML = '';
  1480.       }
  1481.     }
  1482.   }
  1484.   initTagsUI() {
  1485.     $('#tag-list-filter-button').bind('click', (e) => { this.tag_list_filter.handleFilterButtonClick(e); });
  1487.     $('#tags-content-global').bind('mouseover', () => { this.tag_list_filter.hideTagFilterMenuIfInToolBar(); });
  1488.     $('#tag-filter-menu').find('input').bind('click', (e) => { tags_controller.tag_list_filter.handleTagFilterTypeClick(e); });
  1490.     $('#tags-search-input').bind('keyup', (e) => { this.tag_list_filter.handleTagSearchInput(e); });
  1491.     $('#tags-search-input').bind('keydown', (e) => {
  1492.       e.stopPropagation();
  1493.     });
  1495.     $('#tags-search-input').bind('mouseup', (e) => {
  1496.       e.stopPropagation();
  1497.       $('#tags-search-input').select();
  1498.     });
  1500.     tags_controller.bindTagEvents();
  1501.   }
  1503.   async updateTagUiBasedOnTagAvailability(tagCount=undefined) {
  1504.     var translationCount = app_controller.translation_controller.getTranslationCount();
  1505.     if (tagCount === undefined) {
  1506.       tagCount = await ipcDb.getTagCount();
  1507.     }
  1509.     var textType = app_controller.tab_controller.getTab().getTextType();
  1511.     if (tagCount == 0) {
  1512.       $('.tag-select-button').addClass('ui-state-disabled');
  1513.       $('.show-book-tag-statistics-button').addClass('ui-state-disabled');
  1515.       if (translationCount > 0) {
  1516.         $('#new-standard-tag-button').removeClass('ui-state-disabled');
  1517.         $('#tags-content-global').html(i18n.t("help.help-text-no-tags-book-opened", { interpolation: {escapeValue: false} }));
  1518.       } else {
  1519.         $('#new-standard-tag-button').addClass('ui-state-disabled');
  1520.         $('#tags-content-global').html(i18n.t("help.help-text-no-tags-no-book-opened"));
  1521.       }
  1522.     } else {
  1523.       $('.tag-select-button').removeClass('ui-state-disabled');
  1524.       $('#new-standard-tag-button').removeClass('ui-state-disabled');
  1526.       if (textType == 'book') {
  1527.         $('.show-book-tag-statistics-button').removeClass('ui-state-disabled');
  1528.       }
  1529.     }
  1530.   }
  1532.   showTagListLoadingIndicator() {
  1533.     let tagsContentGlobal = document.getElementById('tags-content-global');
  1534.     let loadingIndicator = tagsContentGlobal.querySelector('loading-indicator');
  1536.     if (loadingIndicator == null) {
  1537.       let element = document.createElement('loading-indicator');
  1538.       tagsContentGlobal.appendChild(element);
  1539.       loadingIndicator = tagsContentGlobal.querySelector('loading-indicator');
  1540.     }
  1542.     $(loadingIndicator).find('.loader').show();
  1543.     $(loadingIndicator).show();
  1544.   }
  1546.   hideTagListLoadingIndicator() {
  1547.     let tagsContentGlobal = document.getElementById('tags-content-global');
  1548.     let loadingIndicator = tagsContentGlobal.querySelector('loading-indicator');
  1549.     $(loadingIndicator).hide();
  1550.   }
  1552.   async updateTagsView(tabIndex, forceRefresh = false) {
  1553.     var currentTab = app_controller.tab_controller.getTab(tabIndex);
  1554.     var tagCount = await ipcDb.getTagCount();
  1556.     if (currentTab !== undefined) {
  1557.       if (tagCount > 0) {
  1558.         this.showTagListLoadingIndicator();
  1559.       }
  1561.       await waitUntilIdle();
  1563.       var currentTabBook = currentTab.getBook();
  1564.       var currentTabContentId = currentTab.getContentId();
  1565.       await this.updateTagList(currentTabBook, this.currentTagGroupId, currentTabContentId, forceRefresh);
  1567.       this.hideTagListLoadingIndicator();
  1568.     }
  1570.     await this.updateTagUiBasedOnTagAvailability(tagCount);
  1571.   }
  1572. }
  1574. module.exports = TagsController;