Merge branch 'issue_537_bulk_term_actions' into develop

lute/book/model.py

@@ -65,7 +65,7 @@ def find_by_title(self, book_title, language_id):
     def get_book_tags(self):
         "Get all available book tags, helper method."
         bts = self.session.query(BookTag).all()
-        return [t.text for t in bts]
+        return sorted([t.text for t in bts])
 
     def add(self, book):
         """

lute/models/term.py

@@ -249,7 +249,8 @@ def add_term_tag(self, term_tag):
             self.term_tags.append(term_tag)
 
     def remove_term_tag(self, term_tag):
-        self.term_tags.remove(term_tag)
+        if term_tag in self.term_tags:
+            self.term_tags.remove(term_tag)
 
     def remove_all_parents(self):
         self.parents = []

lute/read/routes.py

@@ -224,6 +224,18 @@ def edit_term_form(term_id):
     )
 
 
+@bp.route("/term_bulk_edit_form", methods=["GET"])
+def term_bulk_edit_form():
+    """
+    show_bulk_form
+    """
+    repo = Repository(db.session)
+    return render_template(
+        "read/term_bulk_edit_form.html",
+        tags=repo.get_term_tags(),
+    )
+
+
 @bp.route("/termpopup/<int:termid>", methods=["GET"])
 def term_popup(termid):
     """

lute/static/css/styles.css

@@ -1279,6 +1279,12 @@ div.help-text {
     gap: 0.2rem;
 }
 
+#term-bulk-form-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
 #term-form #text {
     width: 100%;
 }
@@ -1783,6 +1789,12 @@ input[type="checkbox"][disabled] + label {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636" /></svg>');
 }
 
+input[name='status']:disabled + label {
+    color: grey; /* Make the label text grey */
+    cursor: not-allowed; /* Change cursor to indicate non-interactivity */
+    opacity: 0.6; /* Dim the appearance */
+}
+
 /* SETTINGS TABLE */
 #custom_styles {
     height: 100px;
@@ -2116,12 +2128,21 @@ input[type="checkbox"][disabled] + label {
     display: flex;
 }
 
+/*
 .term-action-dropdown,
-#set_parent_div {
+.actionDiv {
     display: flex;
     align-items: center;
     margin-right: 10px;
 }
+*/
+
+#bulkEditDiv {
+    margin: 0.5rem;
+    padding: 1rem;
+    width: 50%;
+    border: 1px solid lightgrey;
+}
 
 /* The container <div> to position the dropdown content */
 .term-action-dropdown {

lute/static/js/lute.js

@@ -21,7 +21,7 @@ let LUTE_CURR_TERM_DATA_ORDER = -1;  // initially not set.
  * The template lute/templates/read/page_content.html calls
  * this method on reload to reset the cursor etc.
  */
-function start_hover_mode(should_clear_frames = true) {
+function start_hover_mode() {
   $('span.kwordmarked').removeClass('kwordmarked');
 
   const curr_word = $('span.word').filter(function() {
@@ -33,14 +33,11 @@ function start_hover_mode(should_clear_frames = true) {
     apply_status_class($(w));
   }
 
-  if (should_clear_frames) {
-    $('#wordframeid').attr('src', '/read/empty');
-    $('.dictcontainer').hide();
-  }
-
+  _hide_term_edit_form();
   clear_newmultiterm_elements();
 
-  // https://stackoverflow.com/questions/35022716/keydown-not-detected-until-window-is-clicked
+  // Refocus on window so keyboard events work.
+  // ref https://stackoverflow.com/questions/35022716
   $(window).focus();
 }
 
@@ -184,12 +181,37 @@ function _show_wordframe_url(url) {
   applyInitialPaneSizes();  // in resize.js
 }
 
-
 function show_term_edit_form(el) {
   const wid = parseInt(el.data('wid'));
   _show_wordframe_url(`/read/edit_term/${wid}`);
 }
 
+function show_bulk_term_edit_form(count_of_terms) {
+  const url = '/read/term_bulk_edit_form';
+
+  const wordFrame = top.frames.wordframe;
+
+  function updateSpanContent() {
+    const frameDocument = wordFrame.document;
+    const spanElement = $(frameDocument).find('#bulkUpdateCount');
+    if (spanElement.length) {
+      spanElement.text(`Updating ${count_of_terms} term(s)`);
+    }
+  }
+
+  if (!wordFrame.location.href.endsWith(url))
+    wordFrame.location.href = url;
+  else
+    updateSpanContent();
+}
+
+function _hide_term_edit_form() {
+  $('.dictcontainer').hide();
+  const curr_url = top.frames.wordframe.location.href;
+  if (curr_url.includes('edit_term') || curr_url.includes('term_bulk_edit_form')) {
+    $('#wordframeid').attr('src', '/read/empty');
+  }
+}
 
 function show_multiword_term_edit_form(selected) {
   if (selected.length == 0)
@@ -292,25 +314,31 @@ function hover_out(e) {
 let word_clicked = function(el, e) {
   el.removeClass('wordhover');
   save_curr_data_order(el);
+  el.toggleClass('kwordmarked');
 
-  // If already clicked, remove the click marker.
-  if (el.hasClass('kwordmarked')) {
-    el.removeClass('kwordmarked');
-    if ($('span.kwordmarked').length == 0) {
-      el.addClass('wordhover');
-      start_hover_mode();
+  // If Shift isn't held, this is a regular click.
+  if (! e.shiftKey) {
+    // No other elements should be marked clicked.
+    $('span.kwordmarked').not(el).removeClass('kwordmarked');
+    if (el.hasClass('kwordmarked')) {
+      el.removeClass('hasflash');
+      show_term_edit_form(el);
+    }
+    else {
+      _hide_term_edit_form();
     }
     return;
   }
 
-  // Not already clicked.
-  if (! e.shiftKey) {
-    // Only one element should be marked clicked.
-    $('span.kwordmarked').removeClass('kwordmarked');
-    show_term_edit_form(el);
+  // Shift is held ... have 0 or more elements clicked.
+  const count_marked = $('span.kwordmarked').length;
+  if (count_marked == 0) {
+    el.addClass('wordhover');
+    start_hover_mode();
+  }
+  else {
+    show_bulk_term_edit_form(count_marked);
   }
-  el.addClass('kwordmarked');
-  el.removeClass('hasflash');
 }
 
 
@@ -378,7 +406,7 @@ function select_ended(el, e) {
   const selected = get_selected_in_range(selection_start_el, el);
   if (selection_start_shift_held) {
     copy_text_to_clipboard(selected.toArray());
-    start_hover_mode(false);
+    start_hover_mode();
     return;
   }
 

lute/templates/read/index.html

@@ -465,7 +465,7 @@ <h2>&#127881;</h2>
         $('#thetext').html(data);
         add_status_classes();
         reset_cursor();
-        start_hover_mode(false);
+        start_hover_mode();
         $('#page_num').val(actualPage);
         enable_page_nav_links();
         set_page_fraction();

lute/templates/read/page_content.html

@@ -19,6 +19,6 @@
 
 <script>
   // Defined in lute.js
-  parent.start_hover_mode(false);
+  parent.start_hover_mode();
   parent.add_status_classes();
 </script>

lute/templates/read/term_bulk_edit_form.html

@@ -0,0 +1,58 @@
+{% extends 'read/term_form_base.html' %}
+
+{% block include_term_form %}
+<script type="text/javascript" src="{{ url_for('static', filename='js/lute-hotkey-utils.js') }}" charset="utf-8"></script>
+<script type="text/javascript">
+  const LUTE_USER_SETTINGS = {{ user_settings | safe }}
+</script>
+
+<div id="term-form-container">
+    <div style="margin-bottom: 1em;">
+      <i><span id="bulkUpdateCount">Updating terms</span></i>
+    </div>
+    <form id="term-form" name="term_form" method="POST" action="/term/bulk_edit_from_reading_pane">
+      <div id="term-bulk-form-fields">
+      {% include 'term/_bulk_edit_form_fields.html' %}
+      <div id="term-button-container">
+        <button id="btnsubmit" type="submit" class="btn btn-primary" onclick="return get_selected_word_ids();">Save</button>
+      </div>
+      <div id="term">
+    </form>
+  </div>
+
+  <script>
+    /** Get the selected words, submit if any selected. */      
+    function get_selected_word_ids() {
+      const elements = $(parent.document).find("span.kwordmarked");
+      const wordIds = elements.map(function () {
+        return $(this).data("wid");
+      }).get();
+      if (wordIds.length == 0)
+        return false;
+      $("#txtWordIds").val(wordIds.join(","));
+      return true;
+    }
+
+    /** Function required by _bulk_edit_form_fields.html */
+    // Probably a better way to do this ...
+    function get_lang_id() {
+      const elements = $(parent.document).find("span.word");
+      if (elements.length == 0) {
+        console.log("No words on page ...");
+        return -999;  // dummy
+      }
+      const first = elements.first();
+      return $(first).data("lang-id");
+    }
+
+    // "Save" shortcut
+    $(document).keydown(function(event) {
+      const s = get_pressed_keys_as_string(event);
+      if (s == LUTE_USER_SETTINGS.hotkey_SaveTerm) {
+        $("#btnsubmit").click();
+      }
+    });
+
+  </script>      
+
+{% endblock %}

lute/templates/read/term_edit_form.html

@@ -1,36 +1,8 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <title>Form</title>
-
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/jquery/jquery-ui.css') }}" />
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/tagify/tagify.css') }}" />
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/tagify/tagify_overrides.css') }}" />
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}" />
+{% extends 'read/term_form_base.html' %}
 
-    <link rel="stylesheet" type="text/css" href="/theme/current">
-    <link rel="stylesheet" type="text/css" href="/theme/custom_styles">
-
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.js') }}" charset="utf-8"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.scrollTo.min.js') }}" charset="utf-8"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery-ui.min.js') }}"  charset="utf-8"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.jeditable.mini.js') }}" charset="utf-8"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/tagify/tagify.min.js') }}" charset="utf-8"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='vendor/tagify/tagify.polyfills.min.js') }}" charset="utf-8"></script>
-
-    <script type="text/javascript">
-      var temp_tags = '{{ tags | tojson }}';
-      var TAGS = Array.from(JSON.parse(temp_tags));
-    </script>
-
-  </head>
-
-  <body>
-    {% if term.flash_message %}
+{% block include_term_form %}
+  {% if term.flash_message %}
     <p class='small-flash-notice'>{{ term.flash_message }}</p>
-    {% endif %}
-    {% include 'term/_form.html' %}
-  </body>
-
-</html>
+  {% endif %}
+  {% include 'term/_form.html' %}
+{% endblock %}

lute/templates/read/term_form_base.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>Form</title>
+
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/jquery/jquery-ui.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/tagify/tagify.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/tagify/tagify_overrides.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}" />
+
+    <link rel="stylesheet" type="text/css" href="/theme/current">
+    <link rel="stylesheet" type="text/css" href="/theme/custom_styles">
+
+    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.js') }}" charset="utf-8"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.scrollTo.min.js') }}" charset="utf-8"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery-ui.min.js') }}"  charset="utf-8"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/jquery.jeditable.mini.js') }}" charset="utf-8"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='vendor/tagify/tagify.min.js') }}" charset="utf-8"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='vendor/tagify/tagify.polyfills.min.js') }}" charset="utf-8"></script>
+
+  </head>
+
+  <body>
+    {% block include_term_form %}{% endblock %}
+  </body>
+
+</html>

lute/templates/read/updated.html

@@ -15,7 +15,11 @@
   <body>
 
     <div id="flash" class="flash">
+      {% if term_text %}
       <p>&quot;{{ term_text }}&quot; updated.</p>
+      {% else %}
+      <p>Updated.</p>
+      {% endif %}
     </div>
 
     <script>