Modernize docs/assets/js/search.js (#10621)
- reformated file with eslint's --fix - did some minor rule adjustments - removed unneccesary console debug - fixed a typo
This commit is contained in:
		
							parent
							
								
									11f7fc5621
								
							
						
					
					
						commit
						d6657644a9
					
				| 
						 | 
					@ -36,6 +36,8 @@ rules:
 | 
				
			||||||
  max-len: [0]
 | 
					  max-len: [0]
 | 
				
			||||||
  newline-per-chained-call: [0]
 | 
					  newline-per-chained-call: [0]
 | 
				
			||||||
  no-alert: [0]
 | 
					  no-alert: [0]
 | 
				
			||||||
 | 
					  no-cond-assign: [2, except-parens]
 | 
				
			||||||
 | 
					  no-console: [1, {allow: [info, warn, error]}]
 | 
				
			||||||
  no-continue: [0]
 | 
					  no-continue: [0]
 | 
				
			||||||
  no-mixed-operators: [0]
 | 
					  no-mixed-operators: [0]
 | 
				
			||||||
  no-multi-assign: [0]
 | 
					  no-multi-assign: [0]
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,5 +1,7 @@
 | 
				
			||||||
 | 
					/* global Fuse, Mark */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function ready(fn) {
 | 
					function ready(fn) {
 | 
				
			||||||
    if (document.readyState != 'loading') {
 | 
					  if (document.readyState !== 'loading') {
 | 
				
			||||||
    fn();
 | 
					    fn();
 | 
				
			||||||
  } else {
 | 
					  } else {
 | 
				
			||||||
    document.addEventListener('DOMContentLoaded', fn);
 | 
					    document.addEventListener('DOMContentLoaded', fn);
 | 
				
			||||||
| 
						 | 
					@ -20,38 +22,38 @@ const fuseOptions = {
 | 
				
			||||||
  maxPatternLength: 32,
 | 
					  maxPatternLength: 32,
 | 
				
			||||||
  minMatchCharLength: 1,
 | 
					  minMatchCharLength: 1,
 | 
				
			||||||
  keys: [{
 | 
					  keys: [{
 | 
				
			||||||
        name: "title",
 | 
					    name: 'title',
 | 
				
			||||||
    weight: 0.8
 | 
					    weight: 0.8
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  {
 | 
					  {
 | 
				
			||||||
            name: "contents",
 | 
					    name: 'contents',
 | 
				
			||||||
    weight: 0.5
 | 
					    weight: 0.5
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  {
 | 
					  {
 | 
				
			||||||
            name: "tags",
 | 
					    name: 'tags',
 | 
				
			||||||
    weight: 0.3
 | 
					    weight: 0.3
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  {
 | 
					  {
 | 
				
			||||||
            name: "categories",
 | 
					    name: 'categories',
 | 
				
			||||||
    weight: 0.3
 | 
					    weight: 0.3
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  ]
 | 
					  ]
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function param(name) {
 | 
					function param(name) {
 | 
				
			||||||
    return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ');
 | 
					  return decodeURIComponent((window.location.search.split(`${name}=`)[1] || '').split('&')[0]).replace(/\+/g, ' ');
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
let searchQuery = param("s");
 | 
					const searchQuery = param('s');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function doSearch() {
 | 
					function doSearch() {
 | 
				
			||||||
  if (searchQuery) {
 | 
					  if (searchQuery) {
 | 
				
			||||||
        document.getElementById("search-query").value = searchQuery;
 | 
					    document.getElementById('search-query').value = searchQuery;
 | 
				
			||||||
    executeSearch(searchQuery);
 | 
					    executeSearch(searchQuery);
 | 
				
			||||||
  } else {
 | 
					  } else {
 | 
				
			||||||
        const para = document.createElement("P");
 | 
					    const para = document.createElement('P');
 | 
				
			||||||
        para.innerText = "Please enter a word or phrase above";
 | 
					    para.innerText = 'Please enter a word or phrase above';
 | 
				
			||||||
        document.getElementById("search-results").appendChild(para);
 | 
					    document.getElementById('search-results').appendChild(para);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -63,51 +65,48 @@ function getJSON(url, fn) {
 | 
				
			||||||
      const data = JSON.parse(request.responseText);
 | 
					      const data = JSON.parse(request.responseText);
 | 
				
			||||||
      fn(data);
 | 
					      fn(data);
 | 
				
			||||||
    } else {
 | 
					    } else {
 | 
				
			||||||
            console.log("Target reached on " + url + " with error " + request.status);
 | 
					      console.error(`Target reached on ${url} with error ${request.status}`);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
  request.onerror = function () {
 | 
					  request.onerror = function () {
 | 
				
			||||||
        console.log("Connection error " + request.status);
 | 
					    console.error(`Connection error ${request.status}`);
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
  request.send();
 | 
					  request.send();
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function executeSearch(searchQuery) {
 | 
					function executeSearch(searchQuery) {
 | 
				
			||||||
    getJSON("/" + document.LANG + "/index.json", function (data) {
 | 
					  getJSON(`/${document.LANG}/index.json`, (data) => {
 | 
				
			||||||
    const pages = data;
 | 
					    const pages = data;
 | 
				
			||||||
    const fuse = new Fuse(pages, fuseOptions);
 | 
					    const fuse = new Fuse(pages, fuseOptions);
 | 
				
			||||||
    const result = fuse.search(searchQuery);
 | 
					    const result = fuse.search(searchQuery);
 | 
				
			||||||
        console.log({
 | 
					    document.getElementById('search-results').innerHTML = '';
 | 
				
			||||||
            "matches": result
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        document.getElementById("search-results").innerHTML = "";
 | 
					 | 
				
			||||||
    if (result.length > 0) {
 | 
					    if (result.length > 0) {
 | 
				
			||||||
      populateResults(result);
 | 
					      populateResults(result);
 | 
				
			||||||
    } else {
 | 
					    } else {
 | 
				
			||||||
            const para = document.createElement("P");
 | 
					      const para = document.createElement('P');
 | 
				
			||||||
            para.innerText = "No matches found";
 | 
					      para.innerText = 'No matches found';
 | 
				
			||||||
            document.getElementById("search-results").appendChild(para);
 | 
					      document.getElementById('search-results').appendChild(para);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function populateResults(result) {
 | 
					function populateResults(result) {
 | 
				
			||||||
    result.forEach(function (value, key) {
 | 
					  result.forEach((value, key) => {
 | 
				
			||||||
    const content = value.item.contents;
 | 
					    const content = value.item.contents;
 | 
				
			||||||
        let snippet = "";
 | 
					    let snippet = '';
 | 
				
			||||||
    const snippetHighlights = [];
 | 
					    const snippetHighlights = [];
 | 
				
			||||||
    if (fuseOptions.tokenize) {
 | 
					    if (fuseOptions.tokenize) {
 | 
				
			||||||
      snippetHighlights.push(searchQuery);
 | 
					      snippetHighlights.push(searchQuery);
 | 
				
			||||||
            value.matches.forEach(function (mvalue) {
 | 
					      value.matches.forEach((mvalue) => {
 | 
				
			||||||
                if (mvalue.key === "tags" || mvalue.key === "categories") {
 | 
					        if (mvalue.key === 'tags' || mvalue.key === 'categories') {
 | 
				
			||||||
          snippetHighlights.push(mvalue.value);
 | 
					          snippetHighlights.push(mvalue.value);
 | 
				
			||||||
                } else if (mvalue.key === "contents") {
 | 
					        } else if (mvalue.key === 'contents') {
 | 
				
			||||||
          const ind = content.toLowerCase().indexOf(searchQuery.toLowerCase());
 | 
					          const ind = content.toLowerCase().indexOf(searchQuery.toLowerCase());
 | 
				
			||||||
          const start = ind - summaryInclude > 0 ? ind - summaryInclude : 0;
 | 
					          const start = ind - summaryInclude > 0 ? ind - summaryInclude : 0;
 | 
				
			||||||
          const end = ind + searchQuery.length + summaryInclude < content.length ? ind + searchQuery.length + summaryInclude : content.length;
 | 
					          const end = ind + searchQuery.length + summaryInclude < content.length ? ind + searchQuery.length + summaryInclude : content.length;
 | 
				
			||||||
          snippet += content.substring(start, end);
 | 
					          snippet += content.substring(start, end);
 | 
				
			||||||
          if (ind > -1) {
 | 
					          if (ind > -1) {
 | 
				
			||||||
                        snippetHighlights.push(content.substring(ind, ind + searchQuery.length))
 | 
					            snippetHighlights.push(content.substring(ind, ind + searchQuery.length));
 | 
				
			||||||
          } else {
 | 
					          } else {
 | 
				
			||||||
            snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0], mvalue.indices[0][1] - mvalue.indices[0][0] + 1));
 | 
					            snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0], mvalue.indices[0][1] - mvalue.indices[0][0] + 1));
 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
| 
						 | 
					@ -118,23 +117,22 @@ function populateResults(result) {
 | 
				
			||||||
    if (snippet.length < 1) {
 | 
					    if (snippet.length < 1) {
 | 
				
			||||||
      snippet += content.substring(0, summaryInclude * 2);
 | 
					      snippet += content.substring(0, summaryInclude * 2);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
        //pull template from hugo templarte definition
 | 
					    // pull template from hugo template definition
 | 
				
			||||||
        const templateDefinition = document.getElementById("search-result-template").innerHTML;
 | 
					    const templateDefinition = document.getElementById('search-result-template').innerHTML;
 | 
				
			||||||
    // replace values
 | 
					    // replace values
 | 
				
			||||||
    const output = render(templateDefinition, {
 | 
					    const output = render(templateDefinition, {
 | 
				
			||||||
            key: key,
 | 
					      key,
 | 
				
			||||||
      title: value.item.title,
 | 
					      title: value.item.title,
 | 
				
			||||||
      link: value.item.permalink,
 | 
					      link: value.item.permalink,
 | 
				
			||||||
      tags: value.item.tags,
 | 
					      tags: value.item.tags,
 | 
				
			||||||
      categories: value.item.categories,
 | 
					      categories: value.item.categories,
 | 
				
			||||||
            snippet: snippet
 | 
					      snippet
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
        document.getElementById("search-results").appendChild(htmlToElement(output));
 | 
					    document.getElementById('search-results').appendChild(htmlToElement(output));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        snippetHighlights.forEach(function (snipvalue) {
 | 
					    snippetHighlights.forEach((snipvalue) => {
 | 
				
			||||||
            new Mark(document.getElementById("summary-" + key)).mark(snipvalue);
 | 
					      new Mark(document.getElementById(`summary-${key}`)).mark(snipvalue);
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
 | 
					 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -155,8 +153,8 @@ function render(templateString, data) {
 | 
				
			||||||
  templateString = copy;
 | 
					  templateString = copy;
 | 
				
			||||||
  // now any conditionals removed we can do simple substitution
 | 
					  // now any conditionals removed we can do simple substitution
 | 
				
			||||||
  let key, find, re;
 | 
					  let key, find, re;
 | 
				
			||||||
    for (key in data) {
 | 
					  for (key of Object.keys(data)) {
 | 
				
			||||||
        find = '\\$\\{\\s*' + key + '\\s*\\}';
 | 
					    find = `\\$\\{\\s*${key}\\s*\\}`;
 | 
				
			||||||
    re = new RegExp(find, 'g');
 | 
					    re = new RegExp(find, 'g');
 | 
				
			||||||
    templateString = templateString.replace(re, data[key]);
 | 
					    templateString = templateString.replace(re, data[key]);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue