From 1e247d75bbf0635f367234a966c87ed4e90bf2ec Mon Sep 17 00:00:00 2001 From: Nikhil Tanwar <2002nikhiltanwar@gmail.com> Date: Sun, 24 Jul 2022 23:43:19 +0530 Subject: [PATCH] Welcome, autoComplete.js Added autoComplete.css and .js files. Linked files in head_taskbar.html --- static/resources_list.txt | 3 + static/skin/autoComplete.min.js | 1 + static/skin/css/autoComplete.css | 91 ++++++++++++++++++++++++++++++ static/skin/css/images/search.svg | 8 +++ static/templates/head_taskbar.html | 2 + test/server.cpp | 6 ++ 6 files changed, 111 insertions(+) create mode 100644 static/skin/autoComplete.min.js create mode 100644 static/skin/css/autoComplete.css create mode 100644 static/skin/css/images/search.svg diff --git a/static/resources_list.txt b/static/resources_list.txt index c3b9c0d56..5c72aded0 100644 --- a/static/resources_list.txt +++ b/static/resources_list.txt @@ -27,6 +27,7 @@ skin/taskbar.js skin/iso6391To3.js skin/isotope.pkgd.min.js skin/index.js +skin/autoComplete.min.js skin/taskbar.css skin/index.css skin/fonts/Poppins.ttf @@ -53,3 +54,5 @@ templates/url_of_search_results_css opensearchdescription.xml ft_opensearchdescription.xml catalog_v2_searchdescription.xml +skin/css/autoComplete.css +skin/css/images/search.svg diff --git a/static/skin/autoComplete.min.js b/static/skin/autoComplete.min.js new file mode 100644 index 000000000..bd530b0a9 --- /dev/null +++ b/static/skin/autoComplete.min.js @@ -0,0 +1 @@ +var t,e;t=this,e=function(){"use strict";function t(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function e(e){for(var n=1;nt.length)&&(e=t.length);for(var n=0,r=new Array(e);n=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,u=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return u=t.done,t},e:function(t){a=!0,s=t},f:function(){try{u||null==n.return||n.return()}finally{if(a)throw s}}}}(n.keys);try{for(l.s();!(c=l.n()).done;)a(c.value)}catch(t){l.e(t)}finally{l.f()}}else a()})),n.filter&&(i=n.filter(i));var s=i.slice(0,e.resultsList.maxResults);e.feedback={query:t,matches:i,results:s},f("results",e)},m="aria-expanded",b="aria-activedescendant",y="aria-selected",v=function(t,n){t.feedback.selection=e({index:n},t.feedback.results[n])},g=function(t){t.isOpen||((t.wrapper||t.input).setAttribute(m,!0),t.list.removeAttribute("hidden"),t.isOpen=!0,f("open",t))},w=function(t){t.isOpen&&((t.wrapper||t.input).setAttribute(m,!1),t.input.setAttribute(b,""),t.list.setAttribute("hidden",""),t.isOpen=!1,f("close",t))},O=function(t,e){var n=e.resultItem,r=e.list.getElementsByTagName(n.tag),o=!!n.selected&&n.selected.split(" ");if(e.isOpen&&r.length){var s,u,a=e.cursor;t>=r.length&&(t=0),t<0&&(t=r.length-1),e.cursor=t,a>-1&&(r[a].removeAttribute(y),o&&(u=r[a].classList).remove.apply(u,i(o))),r[t].setAttribute(y,!0),o&&(s=r[t].classList).add.apply(s,i(o)),e.input.setAttribute(b,r[e.cursor].id),e.list.scrollTop=r[t].offsetTop-e.list.clientHeight+r[t].clientHeight+5,e.feedback.cursor=e.cursor,v(e,t),f("navigate",e)}},A=function(t){O(t.cursor+1,t)},k=function(t){O(t.cursor-1,t)},L=function(t,e,n){(n=n>=0?n:t.cursor)<0||(t.feedback.event=e,v(t,n),f("selection",t),w(t))};function j(t,n){var r=this;return new Promise((function(i,o){var s,u;return s=n||((u=t.input)instanceof HTMLInputElement||u instanceof HTMLTextAreaElement?u.value:u.innerHTML),function(t,e,n){return e?e(t):t.length>=n}(s=t.query?t.query(s):s,t.trigger,t.threshold)?d(t,s).then((function(n){try{return t.feedback instanceof Error?i():(h(s,t),t.resultsList&&function(t){var n=t.resultsList,r=t.list,i=t.resultItem,o=t.feedback,s=o.matches,u=o.results;if(t.cursor=-1,r.innerHTML="",s.length||n.noResults){var c=new DocumentFragment;u.forEach((function(t,n){var r=a(i.tag,e({id:"".concat(i.id,"_").concat(n),role:"option",innerHTML:t.match,inside:c},i.class&&{class:i.class}));i.element&&i.element(r,t)})),r.append(c),n.element&&n.element(r,o),g(t)}else w(t)}(t),c.call(r))}catch(t){return o(t)}}),o):(w(t),c.call(r));function c(){return i()}}))}var S=function(t,e){for(var n in t)for(var r in t[n])e(n,r)},T=function(t){var n,r,i,o=t.events,s=(n=function(){return j(t)},r=t.debounce,function(){clearTimeout(i),i=setTimeout((function(){return n()}),r)}),u=t.events=e({input:e({},o&&o.input)},t.resultsList&&{list:o?e({},o.list):{}}),a={input:{input:function(){s()},keydown:function(e){!function(t,e){switch(t.keyCode){case 40:case 38:t.preventDefault(),40===t.keyCode?A(e):k(e);break;case 13:e.submit||t.preventDefault(),e.cursor>=0&&L(e,t);break;case 9:e.resultsList.tabSelect&&e.cursor>=0&&L(e,t);break;case 27:e.input.value="",w(e)}}(e,t)},blur:function(){w(t)}},list:{mousedown:function(t){t.preventDefault()},click:function(e){!function(t,e){var n=e.resultItem.tag.toUpperCase(),r=Array.from(e.list.querySelectorAll(n)),i=t.target.closest(n);i&&i.nodeName===n&&L(e,t,r.indexOf(i))}(e,t)}}};S(a,(function(e,n){(t.resultsList||"input"===n)&&(u[e][n]||(u[e][n]=a[e][n]))})),S(u,(function(e,n){t[e].addEventListener(n,u[e][n])}))};function E(t){var n=this;return new Promise((function(r,i){var o,s,u;if(o=t.placeHolder,u={role:"combobox","aria-owns":(s=t.resultsList).id,"aria-haspopup":!0,"aria-expanded":!1},a(t.input,e(e({"aria-controls":s.id,"aria-autocomplete":"both"},o&&{placeholder:o}),!t.wrapper&&e({},u))),t.wrapper&&(t.wrapper=a("div",e({around:t.input,class:t.name+"_wrapper"},u))),s&&(t.list=a(s.tag,e({dest:[s.destination,s.position],id:s.id,role:"listbox",hidden:"hidden"},s.class&&{class:s.class}))),T(t),t.data.cache)return d(t).then((function(t){try{return c.call(n)}catch(t){return i(t)}}),i);function c(){return f("init",t),r()}return c.call(n)}))}function x(t){var e=t.prototype;e.init=function(){E(this)},e.start=function(t){j(this,t)},e.unInit=function(){if(this.wrapper){var t=this.wrapper.parentNode;t.insertBefore(this.input,this.wrapper),t.removeChild(this.wrapper)}var e;S((e=this).events,(function(t,n){e[t].removeEventListener(n,e.events[t][n])}))},e.open=function(){g(this)},e.close=function(){w(this)},e.goTo=function(t){O(t,this)},e.next=function(){A(this)},e.previous=function(){k(this)},e.select=function(t){L(this,null,t)},e.search=function(t,e,n){return p(t,e,n)}}return function t(e){this.options=e,this.id=t.instances=(t.instances||0)+1,this.name="autoComplete",this.wrapper=1,this.threshold=1,this.debounce=0,this.resultsList={position:"afterend",tag:"ul",maxResults:5},this.resultItem={tag:"li"},function(t){var e=t.name,r=t.options,i=t.resultsList,o=t.resultItem;for(var s in r)if("object"===n(r[s]))for(var a in t[s]||(t[s]={}),r[s])t[s][a]=r[s][a];else t[s]=r[s];t.selector=t.selector||"#"+e,i.destination=i.destination||t.selector,i.id=i.id||e+"_list_"+t.id,o.id=o.id||e+"_result",t.input=u(t.selector)}(this),x.call(this,t),E(this)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).autoComplete=e(); diff --git a/static/skin/css/autoComplete.css b/static/skin/css/autoComplete.css new file mode 100644 index 000000000..19267485c --- /dev/null +++ b/static/skin/css/autoComplete.css @@ -0,0 +1,91 @@ +.autoComplete_wrapper { + display: inline-block; + position: relative; +} + +.autoComplete_wrapper > input { + width: 370px; + height: 40px; + padding-left: 20px; + font-size: 1rem; + color: rgba(123, 123, 123, 1); + border-radius: 8px; + border: 0; + outline: none; + background-color: #f1f3f4; +} + +.autoComplete_wrapper > input::placeholder { + color: rgba(123, 123, 123, 0.5); + transition: all 0.3s ease; +} + +.autoComplete_wrapper > ul { + position: absolute; + max-height: 226px; + overflow-y: scroll; + top: 100%; + left: 0; + right: 0; + padding: 0; + margin: 0.5rem 0 0; + border-radius: 0.6rem; + background-color: #fff; + box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15); + border: 1px solid rgba(33, 33, 33, 0.07); + z-index: 1000; + outline: none; +} + +.autoComplete_wrapper > ul[hidden], +.autoComplete_wrapper > ul:empty { + display: block; + opacity: 0; + transform: scale(0); +} + +.autoComplete_wrapper > ul > li { + margin: 0.3rem; + padding: 0.3rem 0.5rem; + list-style: none; + text-align: left; + font-size: 1rem; + color: #212121; + border-radius: 0.35rem; + background-color: rgba(255, 255, 255, 1); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: all 0.2s ease; +} + +.autoComplete_wrapper > ul > li::selection { + color: rgba(#ffffff, 0); + background-color: rgba(#ffffff, 0); +} + +.autoComplete_wrapper > ul > li:hover { + cursor: pointer; + background-color: rgba(123, 123, 123, 0.1); +} + +.autoComplete_wrapper > ul > li mark { + background-color: transparent; + color: rgba(255, 122, 122, 1); + font-weight: bold; +} + +.autoComplete_wrapper > ul > li mark::selection { + color: rgba(#ffffff, 0); + background-color: rgba(#ffffff, 0); +} + +.autoComplete_wrapper > ul > li[aria-selected="true"] { + background-color: rgba(123, 123, 123, 0.1); +} + +@media only screen and (max-width: 600px) { + .autoComplete_wrapper > input { + width: 18rem; + } +} diff --git a/static/skin/css/images/search.svg b/static/skin/css/images/search.svg new file mode 100644 index 000000000..8063ea104 --- /dev/null +++ b/static/skin/css/images/search.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/static/templates/head_taskbar.html b/static/templates/head_taskbar.html index e595ac138..429939f0a 100644 --- a/static/templates/head_taskbar.html +++ b/static/templates/head_taskbar.html @@ -1,6 +1,8 @@ + + diff --git a/test/server.cpp b/test/server.cpp index 8f85945d7..2866ed307 100644 --- a/test/server.cpp +++ b/test/server.cpp @@ -196,9 +196,11 @@ R"EXPECTEDRESULT( + + )EXPECTEDRESULT" }, @@ -210,9 +212,11 @@ R"EXPECTEDRESULT( + + )EXPECTEDRESULT" }, @@ -442,9 +446,11 @@ std::string TestContentIn404HtmlResponse::expectedResponse() const + +