Fix stored css bug in all typeahead functions (update typeahead -> bugfix typeahead)

2025-10-31 15:23:02 +00:00 · 2021-10-10 18:02:18 +02:00
parent cd53d57516
commit bad4c01474
5 changed files with 1855 additions and 1001 deletions
--- a/cps/db.py
+++ b/cps/db.py
@@ -737,6 +737,7 @@ class CalibreDB():
        self.session.connection().connection.connection.create_function("lower", 1, lcase)
        entries = self.session.query(database).filter(tag_filter). \
            filter(func.lower(database.name).ilike("%" + query + "%")).all()
+        # json_dumps = json.dumps([dict(name=escape(r.name.replace(*replace))) for r in entries])
        json_dumps = json.dumps([dict(name=r.name.replace(*replace)) for r in entries])
        return json_dumps

--- a/cps/static/css/libs/typeahead.css
+++ b/cps/static/css/libs/typeahead.css
@@ -145,7 +145,7 @@ fieldset[disabled] .twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
 }
-.tt-dropdown-menu {
+.tt-menu {
  position: absolute;
  top: 100%;
  left: 0;
@@ -166,7 +166,7 @@ fieldset[disabled] .twitter-typeahead .tt-input {
  *border-right-width: 2px;
  *border-bottom-width: 2px;
 }
-.tt-dropdown-menu .tt-suggestion {
+.tt-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
@@ -175,15 +175,15 @@ fieldset[disabled] .twitter-typeahead .tt-input {
  color: #333333;
  white-space: nowrap;
 }
-.tt-dropdown-menu .tt-suggestion.tt-cursor {
+.tt-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #f5f5f5;
  color: #262626;
 }
-.tt-dropdown-menu .tt-suggestion.tt-cursor a {
+.tt-menu .tt-suggestion.tt-cursor a {
  color: #262626;
 }
-.tt-dropdown-menu .tt-suggestion p {
+.tt-menu .tt-suggestion p {
  margin: 0;
 }
--- a/cps/static/js/edit_books.js
+++ b/cps/static/js/edit_books.js
@@ -46,90 +46,20 @@ $(".datepicker_delete").click(function() {
 Takes a prefix, query typeahead callback, Bloodhound typeahead adapter
 and returns the completions it gets from the bloodhound engine prefixed.
 */
-function prefixedSource(prefix, query, cb, bhAdapter) {
-    bhAdapter(query, function(retArray) {
+function prefixedSource(prefix, query, cb, source) {
+    function async(retArray) {
+        retArray = retArray || [];
        var matches = [];
        for (var i = 0; i < retArray.length; i++) {
            var obj = {name : prefix + retArray[i].name};
            matches.push(obj);
        }
        cb(matches);
-    });
+    }
+    source.search(query, cb, async);
 }

-var authors = new Bloodhound({
-    name: "authors",
-    datumTokenizer: function datumTokenizer(datum) {
-        return [datum.name];
-    },
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-    remote: {
-        url: getPath() + "/get_authors_json?q=%QUERY"
-    }
-});
-
-var series = new Bloodhound({
-    name: "series",
-    datumTokenizer: function datumTokenizer(datum) {
-        return [datum.name];
-    },
-    queryTokenizer: function queryTokenizer(query) {
-        return [query];
-    },
-    remote: {
-        url: getPath() + "/get_series_json?q=",
-        replace: function replace(url, query) {
-            return url + encodeURIComponent(query);
-        }
-    }
-});
-
-
-var tags = new Bloodhound({
-    name: "tags",
-    datumTokenizer: function datumTokenizer(datum) {
-        return [datum.name];
-    },
-    queryTokenizer: function queryTokenizer(query) {
-        var tokens = query.split(",");
-        tokens = [tokens[tokens.length - 1].trim()];
-        return tokens;
-    },
-    remote: {
-        url: getPath() + "/get_tags_json?q=%QUERY"
-    }
-});
-
-var languages = new Bloodhound({
-    name: "languages",
-    datumTokenizer: function datumTokenizer(datum) {
-        return [datum.name];
-    },
-    queryTokenizer: function queryTokenizer(query) {
-        return [query];
-    },
-    remote: {
-        url: getPath() + "/get_languages_json?q=",
-        replace: function replace(url, query) {
-            return url + encodeURIComponent(query);
-        }
-    }
-});
-
-var publishers = new Bloodhound({
-    name: "publisher",
-    datumTokenizer: function datumTokenizer(datum) {
-        return [datum.name];
-    },
-    queryTokenizer: Bloodhound.tokenizers.whitespace,
-    remote: {
-        url: getPath() + "/get_publishers_json?q=%QUERY"
-    }
-});
-
 function sourceSplit(query, cb, split, source) {
-    var bhAdapter = source.ttAdapter();
-
    var tokens = query.split(split);
    var currentSource = tokens[tokens.length - 1].trim();

@@ -144,84 +74,148 @@ function sourceSplit(query, cb, split, source) {
    for (var i = 0; i < tokens.length; i++) {
        prefix += tokens[i].trim() + newSplit;
    }
-    prefixedSource(prefix, currentSource, cb, bhAdapter);
+    prefixedSource(prefix, currentSource, cb, source);
 }

-var promiseAuthors = authors.initialize();
-promiseAuthors.done(function() {
-    $("#bookAuthor").typeahead(
-        {
-            highlight: true, minLength: 1,
-            hint: true
-        }, {
-            name: "authors",
-            displayKey: "name",
-            source: function source(query, cb) {
-                return sourceSplit(query, cb, "&", authors); //sourceSplit //("&")
-            }
-        }
-    );
+var authors = new Bloodhound({
+    name: "authors",
+    identify: function(obj) { return obj.name; },
+    datumTokenizer: function datumTokenizer(datum) {
+        return [datum.name];
+    },
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    remote: {
+        url: getPath() + "/get_authors_json?q=%QUERY",
+        wildcard: '%QUERY',
+    },
 });

-var promiseSeries = series.initialize();
-promiseSeries.done(function() {
-    $("#series").typeahead(
-        {
-            highlight: true, minLength: 0,
-            hint: true
-        }, {
-            name: "series",
-            displayKey: "name",
-            source: series.ttAdapter()
+$(".form-group #bookAuthor").typeahead(
+    {
+        highlight: true,
+        minLength: 1,
+        hint: true
+    }, {
+        name: "authors",
+        display: 'name',
+        source: function source(query, cb, asyncResults) {
+            return sourceSplit(query, cb, "&", authors);
        }
-    );
+    }
+);
+
+
+var series = new Bloodhound({
+    name: "series",
+    datumTokenizer: function datumTokenizer(datum) {
+        return [datum.name];
+    },
+    // queryTokenizer: Bloodhound.tokenizers.whitespace,
+    queryTokenizer: function queryTokenizer(query) {
+        return [query];
+    },
+    remote: {
+        url: getPath() + "/get_series_json?q=%QUERY",
+        wildcard: '%QUERY',
+        /*replace: function replace(url, query) {
+            return url + encodeURIComponent(query);
+        }*/
+    }
+});
+$(".form-group #series").typeahead(
+    {
+        highlight: true,
+        minLength: 0,
+        hint: true
+    }, {
+        name: "series",
+        displayKey: "name",
+        source: series
+    }
+);
+
+var tags = new Bloodhound({
+    name: "tags",
+    datumTokenizer: function datumTokenizer(datum) {
+        return [datum.name];
+    },
+    queryTokenizer: function queryTokenizer(query) {
+        var tokens = query.split(",");
+        tokens = [tokens[tokens.length - 1].trim()];
+        return tokens;
+    },
+    remote: {
+        url: getPath() + "/get_tags_json?q=%QUERY",
+        wildcard: '%QUERY'
+    }
 });

-var promiseTags = tags.initialize();
-promiseTags.done(function() {
-    $("#tags").typeahead(
-        {
-            highlight: true, minLength: 0,
-            hint: true
-        }, {
-            name: "tags",
-            displayKey: "name",
-            source: function source(query, cb) {
-                return sourceSplit(query, cb, ",", tags);
-            }
+$(".form-group #tags").typeahead(
+    {
+        highlight: true,
+        minLength: 0,
+        hint: true
+    }, {
+        name: "tags",
+        display: "name",
+        source: function source(query, cb, asyncResults) {
+            return sourceSplit(query, cb, ",", tags);
        }
-    );
+    }
+);
+
+var languages = new Bloodhound({
+    name: "languages",
+    datumTokenizer: function datumTokenizer(datum) {
+        return [datum.name];
+    },
+    queryTokenizer: function queryTokenizer(query) {
+        return [query];
+    },
+    remote: {
+        url: getPath() + "/get_languages_json?q=%QUERY",
+        wildcard: '%QUERY'
+        /*replace: function replace(url, query) {
+            return url + encodeURIComponent(query);
+        }*/
+    }
 });

-var promiseLanguages = languages.initialize();
-promiseLanguages.done(function() {
-    $("#languages").typeahead(
-        {
-            highlight: true, minLength: 0,
-            hint: true
-        }, {
-            name: "languages",
-            displayKey: "name",
-            source: function source(query, cb) {
-                return sourceSplit(query, cb, ",", languages); //(",")
-            }
+$(".form-group #languages").typeahead(
+    {
+        highlight: true, minLength: 0,
+        hint: true
+    }, {
+        name: "languages",
+        display: "name",
+        source: function source(query, cb, asyncResults) {
+            return sourceSplit(query, cb, ",", languages);
        }
-    );
+    }
+);
+
+var publishers = new Bloodhound({
+    name: "publisher",
+    datumTokenizer: function datumTokenizer(datum) {
+        return [datum.name];
+    },
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    remote: {
+        url: getPath() + "/get_publishers_json?q=%QUERY",
+        wildcard: '%QUERY'
+    }
 });

-var promisePublishers = publishers.initialize();
-promisePublishers.done(function() {
-    $("#publisher").typeahead(
-        {
-            highlight: true, minLength: 0,
-            hint: true
-        }, {
-            name: "publishers",
-            displayKey: "name",
-            source: publishers.ttAdapter()
-        }
-    );
-});
+$(".form-group #publisher").typeahead(
+    {
+        highlight: true, minLength: 0,
+        hint: true
+    }, {
+        name: "publishers",
+        displayKey: "name",
+        source: publishers
+    }
+);

 $("#search").on("change input.typeahead:selected", function(event) {
    if (event.target.type === "search" && event.target.tagName === "INPUT") {
--- a/cps/static/js/libs/typeahead.bundle.js
+++ b/cps/static/js/libs/typeahead.bundle.js
--- a/cps/templates/book_edit.html
+++ b/cps/templates/book_edit.html
@@ -58,11 +58,11 @@
    <div class="text-center">
        <button type="button" class="btn btn-default" id="xchange" ><span class="glyphicon glyphicon-arrow-up"></span><span class="glyphicon glyphicon-arrow-down"></span></button>
    </div>
-
-    <div class="form-group">
+    <div id="author_div" class="form-group">
      <label for="bookAuthor">{{_('Author')}}</label>
      <input type="text" class="form-control typeahead" name="author_name" id="bookAuthor" value="{{' & '.join(authors)}}" autocomplete="off">
    </div>
+
    <div class="form-group">
      <label for="description">{{_('Description')}}</label>
      <textarea class="form-control" name="description" id="description" rows="7">{% if book.comments %}{{book.comments[0].text}}{%endif%}</textarea>