🩹 Search improvements

- Fix search for accented characters
- Fix search heading colors
- Larger results click target
- jQuery 3.7.1 + Bootstrap 3.4.1
- Search code style

_configuration/configuration.md

@@ -3222,7 +3222,7 @@ Enables [`G60`](/docs/gcode/G060.html) & [`G61`](/docs/gcode/G061.html) and spec
 ```
 [`G2/G3`](/docs/gcode/G002-G003.html) Arc Support
 
-### G5 Bezier Curve
+### G5 Bézier Curve
 ```cpp
 //#define BEZIER_CURVE_SUPPORT
 ```

_gcode/M876.md

@@ -10,6 +10,7 @@ group: hosts
 codes: [ M876 ]
 
 notes:
+- Host prompts are supported by OctoPrint so it can simulate a user click and other simple feedback.
 - When `EMERGENCY_PARSER` is enabled the `M876` command is handled as soon as the command arrives.
 
 parameters:

_layouts/default.html

@@ -46,7 +46,7 @@
        * with the main page.
        */
       head.load(
-          "{{ 'jquery-2.2.1.min.js' | prepend: site.js }}",
+          "{{ 'jquery-3.7.1.min.js' | prepend: site.js }}",
           "{{ 'jquery-ui.min.js' | prepend: site.js }}",
           "{{ 'bootstrap.min.js' | prepend: site.js }}",
           "{{ 'tocify.min.js' | prepend: site.js }}",

_meta/search.html

@@ -29,8 +29,10 @@ <h1>Site Search</h1>
 <script type="text/x-template" id="search-result">
   <div class="##DivClass##">
     ##CustomHTML##
-    <h2 class="title"><a href="##Url##">##Title##</a></h2>
-    <p class="excerpt"><a href="##Url##">##Excerpt##</a></p>
+    <a href="##Url##">
+      <h2 class="title">##Title##</h2>
+      <p class="excerpt">##Excerpt##</p>
+    </a>
   </div>
 </script>
 

_plugins/marlinfw_filter.rb

@@ -3,7 +3,6 @@ module MarlinSiteFilter
     def indexify(input)
       # Reduce text down to searchable terms
       some = input.downcase
-      some = some.gsub('průša', 'prusa')
       some = some.gsub(/(<[^>]*>|$$.+$$)/, '')
       some = some.gsub(/(en|dis)abled\(([^\)]+)\)/i, '\2')
       some = some.gsub(/!\[[^\]]+\]\([^\)]+\)(\s*\{[^\}]+\})?/, ' ')

_sass/_custom.scss

@@ -524,12 +524,14 @@ a.panel-wrapper:hover, a.panel-wrapper:active {
 }
 .post { background-color: var(--color-post-bg); }
 [data-search-results]>h1 { color: var(--color-data-search); background: var(--color-data-search-bg); }
-h1.gcode { background: var(--color-h1-gcode); }
-h1.basics { background: var(--color-h1-basics); }
-h1.feat { background: var(--color-h1-feat); }
-h1.hardware { background: var(--color-h1-hardware); }
-h1.devel { background: var(--color-h1-devel); }
-h1.setting { background: var(--color-h1-setting); }
+[data-search-results] {
+  h1.gcode { background: var(--color-h1-gcode); }
+  h1.basics { background: var(--color-h1-basics); }
+  h1.feat { background: var(--color-h1-feat); }
+  h1.hardware { background: var(--color-h1-hardware); }
+  h1.devel { background: var(--color-h1-devel); }
+  h1.setting { background: var(--color-h1-setting); }
+}
 
 div.panel.panel-info {
   background-color: var(--color-panel-info); border-color: var(--color-panel-info-border); color: var(--color-panel-info-bg);
@@ -999,19 +1001,25 @@ div.container.detail {
 
 .clear { clear: both; }
 .params .table>tbody>tr:first-child>td { border-top: 0; }
-.gcode.item, [data-search-results]>.item {
-  padding-bottom: 1em;
+.item.gcode, [data-search-results]>.item {
+  width: 100%;
+  float: left;
+  clear: both;
+  padding: 0 0 1em 1em;
   border-top: 2px solid #888;
+  a { margin-left: 1em; }
   p { margin-top: 1em; font-size: 120%; padding-left: 1em; }
-  >span { float: right; margin: 1em 0.5em 0 0; }
+  >span { float: right; margin: 1em 0.5em -1.5em 0; }
   h2 { margin-top: 0; }
+  h2, p { margin-top: 0; }
 }
 [data-search-results]>.item h2 {
   margin-bottom: 0;
   padding: 0;
   a { display: block; padding: 4px; }
 }
 [data-search-results]>h1 {
+  clear: both;
   text-transform: capitalize;
   color: white;
   display: block;

_tools/input_shaping/freq-calibr.html

@@ -4,7 +4,7 @@
 category:     [ tools ]
 author:       KimmoHop
 ---
-<script language="JavaScript" type="text/javascript" src="{{ site.js }}jquery-2.2.1.min.js"></script>
+<script language="JavaScript" type="text/javascript" src="{{ site.js }}jquery-3.7.1.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="{{ site.js }}jquery-ui.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="{{ site.js }}FileSaver.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="./freq-calibr.js"></script>

_tools/lin_advance/k-factor.html

@@ -3,7 +3,7 @@
 description:  'Create G-code to calibrate LIN_ADVANCE setting'
 category:     [ tools ]
 ---
-<script language="JavaScript" type="text/javascript" src="{{ site.js }}jquery-2.2.1.min.js"></script>
+<script language="JavaScript" type="text/javascript" src="{{ site.js }}jquery-3.7.1.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="{{ site.js }}jquery-ui.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="{{ site.js }}FileSaver.min.js"></script>
 <script language="JavaScript" type="text/javascript" src="./k-factor.js"></script>

assets/javascript/search.js

@@ -12,7 +12,7 @@
 //
 // Declare a jekyllSearch singleton
 //
-var jekyllSearch = (function(){
+var jekyllSearch = (() => {
 
   var q, qmatch, jsonFeedUrl = '/feeds/feed.json',
     $searchForm, $searchInput, $searchButton,
@@ -45,20 +45,34 @@ var jekyllSearch = (function(){
      * @param {String} placeholder
      * @return {String} injected content
      */
-    injectContent: function(originalContent, injection, placeholder) {
+    injectContent: (originalContent, injection, placeholder) => {
       if (injection === undefined) injection = '';
       var regex = new RegExp(placeholder, 'g');
       return originalContent.replace(regex, injection);
     },
 
     init: function() {
-      self = this;
+      self = this;  // The enclosing function()
 
       if (document.location.href.indexOf('meta/search/') == -1) {
-        setTimeout(function(){ $('#searchbox>form').css('display','inline-block'); }, 800);
+        setTimeout(() => { $('#searchbox>form').css('display','inline-block'); }, 800);
         return;
       }
 
+      // Extend String to remove accents from characters
+      String.prototype.unaccent = function() { return this.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); }
+
+      // Extend jQuery.event.fix for copy/paste to fix clipboardData
+      // $.event.fix = ((originalFix) => {
+      //   return function(e) { // Must be function to get (this, arguments)
+      //     e = originalFix.apply(this, arguments); // this == e.target
+      //     if (e.type.indexOf('copy') === 0 || e.type.indexOf('paste') === 0) {
+      //       e.clipboardData = e.originalEvent.clipboardData;
+      //     }
+      //     return e;
+      //   };
+      // })($.event.fix);
+
       $searchForm = $("[data-search-form]");
       $searchInput = $("[data-search-input]");
       $searchButton = $("[data-search-button]");
@@ -89,51 +103,65 @@ var jekyllSearch = (function(){
       // Get search results on submission of form
       // TODO: Update results on change, after a pause
       $searchInput.change(self.onSearchChanged)
-                  .keydown(function(e){
+                  .on('input cut paste', () => { setTimeout(self.searchFromField, 50) })
+                  .keydown((e) => {
                     var k = e.keyCode;
                     if (k == 10 || k == 13) return self.onSearchChanged(e);
                   })
-                  .keyup(function(e){
+                  .keyup((e) => {
                     var k = e.keyCode;
                     if (k >= 32 || k == 8) self.onSearchKeyUp();
-                  });
+                  })
 
-      $searchButton.click(function(e) { self.onSearchChanged(e); });
+      $searchButton.click((e) => { self.onSearchChanged(e); });
 
+      // Search the provided string on load
       self.searchFromField();
-    },
 
-    searchFieldString: function() {
-      return $searchInput.val().trim();
+      // Focus the search field, and also select all chars
+      $searchInput.focus().select();
     },
 
-    searchPattern: function(str) {
-      const patt = str.toLowerCase().replace(ignore_pattern, '').trim().replace(/\s+/g, '.+');
+    // Get the trimmed string from the search field
+    searchFieldString: () => { return $searchInput.val().trim(); },
+
+    // Convert a string to a regex pattern
+    searchPattern: (str) => {
+      const patt = str.toLowerCase().replace(ignore_pattern, '').trim().replace(/\s+/gm, '.+').replace(/([([\\])/gm, '\\$1');
       return new RegExp(patt);
     },
 
-    searchFromField: function() {
-      var newq = self.searchFieldString(),
+    // Execute a search using the field value
+    searchText: (intext) => {
+      var newq = intext.unaccent(),
           newm = self.searchPattern(newq);
       self.execSearch(newq, newm);
     },
 
-    onSearchChanged: function(e) {
-      e.preventDefault();
-      var newq = self.searchFieldString();
-      if (newq.length >= 3 || newq.match(/^[gm]\d+/i))
+    // Execute a search using the field value
+    searchFromField: () => { self.searchText(self.searchFieldString()); },
+
+    // When the field value changes (as on blur, paste) execute a search right away.
+    onSearchChanged: (e, allow=false) => {
+      console.log("onSearchChanged", e, allow);
+      if (!allow) e.preventDefault();
+      const newq = self.searchFieldString();
+      if (newq.length == 0 || newq.length >= 3 || newq.match(/^[gmd]\d+/i))
         self.searchFromField();
-      return false;
+      return allow;
     },
 
-    onSearchKeyUp: function() {
+    // After a keypress set a timer to run a search on the field value,
+    // canceling any previous timer.
+    onSearchKeyUp: () => {
       if (searchTimer) { clearTimeout(searchTimer); searchTimer = 0; }
-      var newq = self.searchFieldString();
-      if (newq.length >= 3 || newq.match(/^[gm]\d+/i))
-        searchTimer = setTimeout(self.searchFromField, 800);
+      const newq = self.searchFieldString();
+      if (newq.length == 0 || newq.length >= 3 || newq.match(/^[gmd]\d+/i))
+        searchTimer = setTimeout(self.searchFromField, 50);
     },
 
-    fixResultsPos: function() {
+    // Put the search results below the header
+    fixResultsPos: () => {
       $resultsPlaceholder.css('padding-top', ($("#search .overlay").height() + 6) + 'px');
       $(window).scrollTop(0);
     },
@@ -142,7 +170,7 @@ var jekyllSearch = (function(){
      * Execute search
      * @return null
      */
-    execSearch: function(newq, newm) {
+    execSearch: (newq, newm) => {
       if (newq != '' || allowEmpty) {
         q = newq;
         qmatch = newm;
@@ -157,7 +185,7 @@ var jekyllSearch = (function(){
      * Toggle loading class on results and found string
      * @return null
      */
-    toggleLoadingClass: function() {
+    toggleLoadingClass: () => {
       $resultsPlaceholder.toggleClass(loadingClass);
       $foundContainer.toggleClass(loadingClass);
     },
@@ -167,24 +195,24 @@ var jekyllSearch = (function(){
      * @param {Function} callbackFunction
      * @return null
      */
-    getSearchResults: function(callbackFunction) {
+    getSearchResults: (callbackFunction) => {
       $.get(jsonFeedUrl, callbackFunction, 'json');
     },
 
     /**
      * Process search result data
      * @return null
      */
-    resultsProcessor: function() {
+    resultsProcessor: () => {
       var results = [];
 
-      return function(data) {
+      return (data) => {
 
         //console.log("Processor data", data);
 
         var resultsCount = 0, results = '', lastclass = '';
 
-        $.each(data, function(index, item) {
+        $.each(data, (index, item) => {
           // check if search term is in content or title
           const comp = (item.name + " " + item.title + ' ' + item.content + item.excerpt).toLowerCase();
           if (comp.match(qmatch)) {
@@ -211,7 +239,7 @@ var jekyllSearch = (function(){
      * @param {String} results
      * @return null
      */
-    showSearchResults: function(results) {
+    showSearchResults: (results) => {
       // Add results HTML to placeholder
       $resultsPlaceholder.html(results);
       self.fixResultsPos();
@@ -223,7 +251,7 @@ var jekyllSearch = (function(){
      * @param {object} item
      * @return {String} Populated HTML
      */
-    populateResultContent: function(html, item) {
+    populateResultContent: (html, item) => {
       html = self.injectContent(html, item.title, '##Title##');
       html = self.injectContent(html, item.link, '##Url##');
       html = self.injectContent(html, item.excerpt, '##Excerpt##');
@@ -235,8 +263,8 @@ var jekyllSearch = (function(){
       if (item.group !== undefined)
         extra_tags += '<span class="label label-default"><i class="fa fa-tags" aria-hidden="true"></i>' + item.group + '</span>';
       if (item.requires !== undefined)
-        $.each(item.requires.split(","), function() {
-          extra_tags += '<span class="label label-requires">' + this + '</span>';
+        $.each(item.requires.split(","), (i,v) => {
+          extra_tags += '<span class="label label-requires">' + v + '</span>';
         });
       html = self.injectContent(html, extra_tags, '##CustomHTML##');
       var c = item.class ? item.class : '';
@@ -256,7 +284,7 @@ var jekyllSearch = (function(){
      * @param {String} count
      * @return null
      */
-    populateResultsString: function(count) {
+    populateResultsString: (count) => {
       $foundTerm.text(q);
       $foundCount.text(count);
       $foundContainer.show();