Pat-spotlight proposal

[cornae]

Synopsis

The pattern is designed to help users locate content within a page or article without needing to know how to use the browser’s built-in in-page search. It also ensures, if desired, a consistent appearance and behaviour across devices and platforms.

The class pat-spotlight may be applied to an input field. When a user enters a search term, all matching text strings within the defined scope element will be wrapped in special spans. Simultaneously, the script will update the content of any element matching the counter CSS selector to reflect the number of occurrences found.

Designers can also use additional patterns, such as Switch, to create dimmed overlays, backgrounds, or other visual cues that further assist users in finding content on a page.

Specs

An initial version of pat-spotlight could be limited to the following syntax:

data-pat-spotlight=" scope: some-css-selector; counter: some-css-selector; "

• Input fields of type"search" and type="text" accept a pat-spotlight class.
• Wrapper spans look like <span class="spotlight">search string</span>
• Substrings are also wrapped.
• Only content is wrapped. Attributes, values of attributes or other HTML code will never be wrapped or added to the search count.
• Instances of pat-collapsible within the scope that contain the lemma will be opened so that instances of the search term can be made visible and highlighted.
• Instances of pat-collapsible within the scope that do not contain the lemma will be closed.
• Pat-collapsible states that are altered by pat-spotlight are not stored locally, even if 'store: local' is present on pat-collapsible instances.
• When the search box is emptied, all wrapper spans disappear.
• Search is case insensitive.

Nice to haves

• Search is diacritic insensitive.