List the cue word meanings on the cue word search results - feat0027

[slugbucket]

Because a cue word can be used in different contexts it will be good to show those contexts on the hints search results page and perhaps highlight the cue word in the list of results.

[slugbucket]

Perhaps also include a link on the solutions form so that the already entered cue word (and meaning) matching what is being entered to avoid repeating the meaning of a cue.

[slugbucket]

Be very aware that the submitted cue word must be sanitized before being displayed in the list of matching clues.

[slugbucket]

The easiest way to highlight the cue word is by using the replace filter in the Jinja2 template but this has a limitation in that it cannot be applied case-insensitively so that when the cue word is in a different case in the clue it won't be highlighted on the results page. The alternative is to lower-case the clue before the replace filter.

[slugbucket]

The real problem occurs when the clue starts with the cue word. We can't use the capitalize filter on the clue because it starts with HTML markup. Perhaps there is a better way to achieve the text replacement using JavaScript.

[slugbucket]

If not in JavaScript, then another alternative would be in SQL, but SQLite3 doesn't support select a regex substring from a column so this can't be used. The next approach would be a custom filter

[slugbucket]

There are three parts to adding a custom filter:

• writing a python function for the filter, and,
• registering it in the jinja2 environment
• using it in a view template

The filter function, say, highlight_text, can be added to the view support function python file, crossword_hints/views/crossword_hints.py,

def highlight_text(text, word, cls):
    p = re.compile(word, re.IGNORECASE)
    m = p.search(text)
    if m:
        hstr = ("<span class='%s'>%s</span>" % (cls, m.group()))
        return(p.sub(hstr, text))
    else:
        return(text)

The filter is registered with the Jinja2 environment thus in the top-level init.py:

application.jinja_env.filters['highlight_text'] = highlight_text

The filter is used in a template in the same way as any other:

{{ clue.clue|highlight_text(cue_word, 'highlight-cue')|safe }}

This should be worthy of a blog post.

[slugbucket]

feature merged and committed.