autocomplete UX updated

wp-content/themes/biuro/css/07-components/_component--ico.css

@@ -21,7 +21,6 @@
 .c-ico--offer { float: left; margin: 1px 23px 0 0; }
 
 .c-ico--easy { float: left; margin: 0 21px 0 0; }
-
 /* critical:end */
 
 

wp-content/themes/biuro/css/07-components/_component--search.css

@@ -52,7 +52,7 @@
     }
 }
 
-.c-search--input { border: 0; padding: 0 10px 0 44px; margin: 0; height: 60px; line-height: 60px; background: none;
+.c-search--input { border: 0; padding: 0 0 0 44px; margin: 0 40px 0 0; height: 60px; line-height: 60px; background: none;
     &:focus { outline: none; }
 }
 
@@ -90,6 +90,18 @@
     }
 }
 
+.c-search--ico-clear { position: absolute; top: 50%; right: 36px; padding: 17px 6px 17px 14px; cursor: pointer; transform: translate(0, -50%); }
+
+.c-search--ico-toggle { position: absolute; top: 50%; right: 0; padding: 18px 16px 18px 6px; cursor: pointer; transform: translate(0, -50%); color: #B8BCC1;
+    .c-ico--down    { display: block; }
+    .c-ico--up         { display: none; }
+    &.is-open {
+        .c-ico--down    { display: none; }
+        .c-ico--up         { display: block; }
+    }
+}
+
+
 /*.l-section--front-page .c-search*/
 
 /* critical:end */

wp-content/themes/biuro/js/components/autocomplete.min.js

-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["autocomplete"],{
-
-/***/ "./node_modules/webpack/buildin/harmony-module.js":
-/*!*******************************************!*\
-  !*** (webpack)/buildin/harmony-module.js ***!
-  \*******************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-eval("module.exports = function(originalModule) {\n\tif (!originalModule.webpackPolyfill) {\n\t\tvar module = Object.create(originalModule);\n\t\t// module.parent = undefined by default\n\t\tif (!module.children) module.children = [];\n\t\tObject.defineProperty(module, \"loaded\", {\n\t\t\tenumerable: true,\n\t\t\tget: function() {\n\t\t\t\treturn module.l;\n\t\t\t}\n\t\t});\n\t\tObject.defineProperty(module, \"id\", {\n\t\t\tenumerable: true,\n\t\t\tget: function() {\n\t\t\t\treturn module.i;\n\t\t\t}\n\t\t});\n\t\tObject.defineProperty(module, \"exports\", {\n\t\t\tenumerable: true\n\t\t});\n\t\tmodule.webpackPolyfill = 1;\n\t}\n\treturn module;\n};\n\n\n//# sourceURL=webpack:///(webpack)/buildin/harmony-module.js?");
-
-/***/ }),
-
-/***/ "./wp-content/themes/biuro/js/components/autocomplete.js":
-/*!***************************************************************!*\
-  !*** ./wp-content/themes/biuro/js/components/autocomplete.js ***!
-  \***************************************************************/
-/*! no exports provided */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _vendor_awesomplete__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../vendor/awesomplete */ \"./wp-content/themes/biuro/js/vendor/awesomplete.js\");\n\nvar city = document.getElementById('search-city');\n\nif (city) {\n  var cityBox = new _vendor_awesomplete__WEBPACK_IMPORTED_MODULE_0__[\"default\"](city, {\n    minChars: 0,\n    maxItems: 1000,\n    sort: false\n  });\n  city.addEventListener('focus', function () {\n    cityBox.evaluate();\n  });\n}\n\nvar query = document.getElementById('search-query');\n\nif (query) {\n  var queryBox = new _vendor_awesomplete__WEBPACK_IMPORTED_MODULE_0__[\"default\"](query, {\n    minChars: 0,\n    maxItems: 1000,\n    sort: false\n  });\n  query.addEventListener('focus', function () {\n    queryBox.evaluate();\n  });\n}\n\nvar search = document.getElementById('search');\n\nif (search) {\n  search.addEventListener('submit', function (e) {\n    if (!city.value && !query.value) {\n      city.focus();\n      e.preventDefault();\n    }\n  }, false);\n}\n\nvar node = document.getElementById('form-city');\nvar cityID = document.getElementById('form-city-id');\n\nif (node) {\n  var nodeBox = new _vendor_awesomplete__WEBPACK_IMPORTED_MODULE_0__[\"default\"](node, {\n    minChars: 0,\n    maxItems: 1000,\n    sort: false,\n    replace: function replace(suggestion) {\n      this.input.value = suggestion.label;\n\n      if (cityID) {\n        cityID.value = suggestion.value;\n      }\n    }\n  });\n  node.addEventListener('focus', function () {\n    nodeBox.evaluate();\n  });\n}\n\n//# sourceURL=webpack:///./wp-content/themes/biuro/js/components/autocomplete.js?");
-
-/***/ }),
-
-/***/ "./wp-content/themes/biuro/js/vendor/awesomplete.js":
-/*!**********************************************************!*\
-  !*** ./wp-content/themes/biuro/js/vendor/awesomplete.js ***!
-  \**********************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function(module) {function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n/**\n * Simple, lightweight, usable local autocomplete library for modern browsers\n * Because there weren’t enough autocomplete scripts in the world? Because I’m completely insane and have NIH syndrome? Probably both. :P\n * @author Lea Verou http://leaverou.github.io/awesomplete\n * MIT license\n */\n/* harmony default export */ __webpack_exports__[\"default\"] = ((function () {\n  var _ = function _(input, o) {\n    var me = this; // Keep track of number of instances for unique IDs\n\n    _.count = (_.count || 0) + 1;\n    this.count = _.count; // Setup\n\n    this.isOpened = false;\n    this.input = $(input);\n    this.input.setAttribute(\"autocomplete\", \"off\");\n    this.input.setAttribute(\"aria-expanded\", \"false\");\n    this.input.setAttribute(\"aria-owns\", \"awesomplete_list_\" + this.count);\n    this.input.setAttribute(\"role\", \"combobox\"); // store constructor options in case we need to distinguish\n    // between default and customized behavior later on\n\n    this.options = o = o || {};\n    configure(this, {\n      minChars: 2,\n      maxItems: 10,\n      autoFirst: false,\n      data: _.DATA,\n      filter: _.FILTER_CONTAINS,\n      sort: o.sort === false ? false : _.SORT_BYLENGTH,\n      container: _.CONTAINER,\n      item: _.ITEM,\n      replace: _.REPLACE,\n      tabSelect: false\n    }, o);\n    this.index = -1; // Create necessary elements\n\n    this.container = this.container(input);\n    this.ul = $.create(\"ul\", {\n      hidden: \"hidden\",\n      role: \"listbox\",\n      id: \"awesomplete_list_\" + this.count,\n      inside: this.container\n    });\n    this.status = $.create(\"span\", {\n      className: \"visually-hidden\",\n      role: \"status\",\n      \"aria-live\": \"assertive\",\n      \"aria-atomic\": true,\n      inside: this.container,\n      textContent: this.minChars != 0 ? \"Type \" + this.minChars + \" or more characters for results.\" : \"Begin typing for results.\"\n    }); // Bind events\n\n    this._events = {\n      input: {\n        \"input\": this.evaluate.bind(this),\n        \"blur\": this.close.bind(this, {\n          reason: \"blur\"\n        }),\n        \"keydown\": function keydown(evt) {\n          var c = evt.keyCode; // If the dropdown `ul` is in view, then act on keydown for the following keys:\n          // Enter / Esc / Up / Down\n\n          if (me.opened) {\n            if (c === 13 && me.selected) {\n              // Enter\n              evt.preventDefault();\n              me.select();\n            } else if (c === 9 && me.selected && me.tabSelect) {\n              me.select();\n            } else if (c === 27) {\n              // Esc\n              me.close({\n                reason: \"esc\"\n              });\n            } else if (c === 38 || c === 40) {\n              // Down/Up arrow\n              evt.preventDefault();\n              me[c === 38 ? \"previous\" : \"next\"]();\n            }\n          }\n        }\n      },\n      form: {\n        \"submit\": this.close.bind(this, {\n          reason: \"submit\"\n        })\n      },\n      ul: {\n        // Prevent the default mousedowm, which ensures the input is not blurred.\n        // The actual selection will happen on click. This also ensures dragging the\n        // cursor away from the list item will cancel the selection\n        \"mousedown\": function mousedown(evt) {\n          evt.preventDefault();\n        },\n        // The click event is fired even if the corresponding mousedown event has called preventDefault\n        \"click\": function click(evt) {\n          var li = evt.target;\n\n          if (li !== this) {\n            while (li && !/li/i.test(li.nodeName)) {\n              li = li.parentNode;\n            }\n\n            if (li && evt.button === 0) {\n              // Only select on left click\n              evt.preventDefault();\n              me.select(li, evt.target);\n            }\n          }\n        }\n      }\n    };\n    $.bind(this.input, this._events.input);\n    $.bind(this.input.form, this._events.form);\n    $.bind(this.ul, this._events.ul);\n\n    if (this.input.hasAttribute(\"list\")) {\n      this.list = \"#\" + this.input.getAttribute(\"list\");\n      this.input.removeAttribute(\"list\");\n    } else {\n      this.list = this.input.getAttribute(\"data-list\") || o.list || [];\n    }\n\n    _.all.push(this);\n  };\n\n  _.prototype = {\n    set list(list) {\n      if (Array.isArray(list)) {\n        this._list = list;\n      } else if (typeof list === \"string\" && list.indexOf(\",\") > -1) {\n        this._list = list.split(/\\s*,\\s*/);\n      } else {\n        // Element or CSS selector\n        list = $(list);\n\n        if (list && list.children) {\n          var items = [];\n          slice.apply(list.children).forEach(function (el) {\n            if (!el.disabled) {\n              var text = el.textContent.trim();\n              var value = el.value || text;\n              var label = el.label || text;\n\n              if (value !== \"\") {\n                items.push({\n                  label: label,\n                  value: value\n                });\n              }\n            }\n          });\n          this._list = items;\n        }\n      }\n\n      if (document.activeElement === this.input) {\n        this.evaluate();\n      }\n    },\n\n    get selected() {\n      return this.index > -1;\n    },\n\n    get opened() {\n      return this.isOpened;\n    },\n\n    close: function close(o) {\n      if (!this.opened) {\n        return;\n      }\n\n      this.input.setAttribute(\"aria-expanded\", \"false\");\n      this.ul.setAttribute(\"hidden\", \"\");\n      this.isOpened = false;\n      this.index = -1;\n      this.status.setAttribute(\"hidden\", \"\");\n      $.fire(this.input, \"awesomplete-close\", o || {});\n    },\n    open: function open() {\n      this.input.setAttribute(\"aria-expanded\", \"true\");\n      this.ul.removeAttribute(\"hidden\");\n      this.isOpened = true;\n      this.status.removeAttribute(\"hidden\");\n\n      if (this.autoFirst && this.index === -1) {\n        this[\"goto\"](0);\n      }\n\n      $.fire(this.input, \"awesomplete-open\");\n    },\n    destroy: function destroy() {\n      //remove events from the input and its form\n      $.unbind(this.input, this._events.input);\n      $.unbind(this.input.form, this._events.form); // cleanup container if it was created by Awesomplete but leave it alone otherwise\n\n      if (!this.options.container) {\n        //move the input out of the awesomplete container and remove the container and its children\n        var parentNode = this.container.parentNode;\n        parentNode.insertBefore(this.input, this.container);\n        parentNode.removeChild(this.container);\n      } //remove autocomplete and aria-autocomplete attributes\n\n\n      this.input.removeAttribute(\"autocomplete\");\n      this.input.removeAttribute(\"aria-autocomplete\"); //remove this awesomeplete instance from the global array of instances\n\n      var indexOfAwesomplete = _.all.indexOf(this);\n\n      if (indexOfAwesomplete !== -1) {\n        _.all.splice(indexOfAwesomplete, 1);\n      }\n    },\n    next: function next() {\n      var count = this.ul.children.length;\n      this[\"goto\"](this.index < count - 1 ? this.index + 1 : count ? 0 : -1);\n    },\n    previous: function previous() {\n      var count = this.ul.children.length;\n      var pos = this.index - 1;\n      this[\"goto\"](this.selected && pos !== -1 ? pos : count - 1);\n    },\n    // Should not be used, highlights specific item without any checks!\n    \"goto\": function goto(i) {\n      var lis = this.ul.children;\n\n      if (this.selected) {\n        lis[this.index].setAttribute(\"aria-selected\", \"false\");\n      }\n\n      this.index = i;\n\n      if (i > -1 && lis.length > 0) {\n        lis[i].setAttribute(\"aria-selected\", \"true\");\n        this.status.textContent = lis[i].textContent + \", list item \" + (i + 1) + \" of \" + lis.length;\n        this.input.setAttribute(\"aria-activedescendant\", this.ul.id + \"_item_\" + this.index); // scroll to highlighted element in case parent's height is fixed\n\n        this.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight;\n        $.fire(this.input, \"awesomplete-highlight\", {\n          text: this.suggestions[this.index]\n        });\n      }\n    },\n    select: function select(selected, origin) {\n      if (selected) {\n        this.index = $.siblingIndex(selected);\n      } else {\n        selected = this.ul.children[this.index];\n      }\n\n      if (selected) {\n        var suggestion = this.suggestions[this.index];\n        var allowed = $.fire(this.input, \"awesomplete-select\", {\n          text: suggestion,\n          origin: origin || selected\n        });\n\n        if (allowed) {\n          this.replace(suggestion);\n          this.close({\n            reason: \"select\"\n          });\n          $.fire(this.input, \"awesomplete-selectcomplete\", {\n            text: suggestion\n          });\n        }\n      }\n    },\n    evaluate: function evaluate() {\n      var me = this;\n      var value = this.input.value;\n\n      if (value.length >= this.minChars && this._list && this._list.length > 0) {\n        this.index = -1; // Populate list with options that match\n\n        this.ul.innerHTML = \"\";\n        this.suggestions = this._list.map(function (item) {\n          return new Suggestion(me.data(item, value));\n        }).filter(function (item) {\n          return me.filter(item, value);\n        });\n\n        if (this.sort !== false) {\n          this.suggestions = this.suggestions.sort(this.sort);\n        }\n\n        this.suggestions = this.suggestions.slice(0, this.maxItems);\n        this.suggestions.forEach(function (text, index) {\n          me.ul.appendChild(me.item(text, value, index));\n        });\n\n        if (this.ul.children.length === 0) {\n          this.status.textContent = \"No results found\";\n          this.close({\n            reason: \"nomatches\"\n          });\n        } else {\n          this.open();\n          this.status.textContent = this.ul.children.length + \" results found\";\n        }\n      } else {\n        this.close({\n          reason: \"nomatches\"\n        });\n        this.status.textContent = \"No results found\";\n      }\n    }\n  }; // Static methods/properties\n\n  _.all = [];\n\n  _.FILTER_CONTAINS = function (text, input) {\n    return RegExp($.regExpEscape(input.trim()), \"i\").test(text);\n  };\n\n  _.FILTER_STARTSWITH = function (text, input) {\n    return RegExp(\"^\" + $.regExpEscape(input.trim()), \"i\").test(text);\n  };\n\n  _.SORT_BYLENGTH = function (a, b) {\n    if (a.length !== b.length) {\n      return a.length - b.length;\n    }\n\n    return a < b ? -1 : 1;\n  };\n\n  _.CONTAINER = function (input) {\n    return $.create(\"div\", {\n      className: \"awesomplete\",\n      around: input\n    });\n  };\n\n  _.ITEM = function (text, input, item_id) {\n    var html = input.trim() === \"\" ? text : text.replace(RegExp($.regExpEscape(input.trim()), \"gi\"), \"<mark>$&</mark>\");\n    return $.create(\"li\", {\n      innerHTML: html,\n      \"role\": \"option\",\n      \"aria-selected\": \"false\",\n      \"id\": \"awesomplete_list_\" + this.count + \"_item_\" + item_id\n    });\n  };\n\n  _.REPLACE = function (text) {\n    this.input.value = text.value;\n  };\n\n  _.DATA = function (item\n  /*, input*/\n  ) {\n    return item;\n  }; // Private functions\n\n\n  function Suggestion(data) {\n    var o = Array.isArray(data) ? {\n      label: data[0],\n      value: data[1]\n    } : _typeof(data) === \"object\" && \"label\" in data && \"value\" in data ? data : {\n      label: data,\n      value: data\n    };\n    this.label = o.label || o.value;\n    this.value = o.value;\n  }\n\n  Object.defineProperty(Suggestion.prototype = Object.create(String.prototype), \"length\", {\n    get: function get() {\n      return this.label.length;\n    }\n  });\n\n  Suggestion.prototype.toString = Suggestion.prototype.valueOf = function () {\n    return \"\" + this.label;\n  };\n\n  function configure(instance, properties, o) {\n    for (var i in properties) {\n      var initial = properties[i],\n          attrValue = instance.input.getAttribute(\"data-\" + i.toLowerCase());\n\n      if (typeof initial === \"number\") {\n        instance[i] = parseInt(attrValue);\n      } else if (initial === false) {\n        // Boolean options must be false by default anyway\n        instance[i] = attrValue !== null;\n      } else if (initial instanceof Function) {\n        instance[i] = null;\n      } else {\n        instance[i] = attrValue;\n      }\n\n      if (!instance[i] && instance[i] !== 0) {\n        instance[i] = i in o ? o[i] : initial;\n      }\n    }\n  } // Helpers\n\n\n  var slice = Array.prototype.slice;\n\n  function $(expr, con) {\n    return typeof expr === \"string\" ? (con || document).querySelector(expr) : expr || null;\n  }\n\n  function $$(expr, con) {\n    return slice.call((con || document).querySelectorAll(expr));\n  }\n\n  $.create = function (tag, o) {\n    var element = document.createElement(tag);\n\n    for (var i in o) {\n      var val = o[i];\n\n      if (i === \"inside\") {\n        $(val).appendChild(element);\n      } else if (i === \"around\") {\n        var ref = $(val);\n        ref.parentNode.insertBefore(element, ref);\n        element.appendChild(ref);\n\n        if (ref.getAttribute(\"autofocus\") != null) {\n          ref.focus();\n        }\n      } else if (i in element) {\n        element[i] = val;\n      } else {\n        element.setAttribute(i, val);\n      }\n    }\n\n    return element;\n  };\n\n  $.bind = function (element, o) {\n    if (element) {\n      for (var event in o) {\n        var callback = o[event];\n        event.split(/\\s+/).forEach(function (event) {\n          element.addEventListener(event, callback);\n        });\n      }\n    }\n  };\n\n  $.unbind = function (element, o) {\n    if (element) {\n      for (var event in o) {\n        var callback = o[event];\n        event.split(/\\s+/).forEach(function (event) {\n          element.removeEventListener(event, callback);\n        });\n      }\n    }\n  };\n\n  $.fire = function (target, type, properties) {\n    var evt = document.createEvent(\"HTMLEvents\");\n    evt.initEvent(type, true, true);\n\n    for (var j in properties) {\n      evt[j] = properties[j];\n    }\n\n    return target.dispatchEvent(evt);\n  };\n\n  $.regExpEscape = function (s) {\n    return s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\");\n  };\n\n  $.siblingIndex = function (el) {\n    /* eslint-disable no-cond-assign */\n    for (var i = 0; el = el.previousElementSibling; i++) {\n      ;\n    }\n\n    return i;\n  }; // Initialization\n\n\n  function init() {\n    $$(\"input.awesomplete\").forEach(function (input) {\n      new _(input);\n    });\n  } // Make sure to export Awesomplete on self when in a browser\n\n\n  if (typeof self !== \"undefined\") {\n    self.Awesomplete = _;\n  } // Are we in a browser? Check for Document constructor\n\n\n  if (typeof Document !== \"undefined\") {\n    // DOM already loaded?\n    if (document.readyState !== \"loading\") {\n      init();\n    } else {\n      // Wait for it\n      document.addEventListener(\"DOMContentLoaded\", init);\n    }\n  }\n\n  _.$ = $;\n  _.$$ = $$; // Expose Awesomplete as a CJS module\n\n  if (( false ? undefined : _typeof(module)) === \"object\" && module.exports) {\n    module.exports = _;\n  }\n\n  return _;\n})());\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../../../node_modules/webpack/buildin/harmony-module.js */ \"./node_modules/webpack/buildin/harmony-module.js\")(module)))\n\n//# sourceURL=webpack:///./wp-content/themes/biuro/js/vendor/awesomplete.js?");
-
-/***/ })
-
-}]);
\ No newline at end of file

wp-content/themes/biuro/js/main.js

 // https://github.com/webpack/webpack/issues/8656#issuecomment-456001556
 
-import "core-js/stable";
-import "regenerator-runtime/runtime";
+// import "core-js/es";
+
+// import(/* webpackChunkName: "autocomplete" */ './components/autocomplete');
+// import(/* webpackChunkName: "feedbacks" */ './components/feedbacks');
+
+import Awesomplete from './vendor/awesomplete';
+import Swiper from './vendor/swiper';
+
+const swiper = new Swiper('.c-feedbacks--inner', {
+    speed: 900,
+    autoplay: {
+        delay: 6000,
+        disableOnInteraction: false
+    },
+    grabCursor: true,
+    loop: true,
+    pagination: {
+        el: '.swiper-pagination',
+        clickable: true
+    }
+});
+
+const autocomplete = (str) => {
+    const node = document.getElementById(str);
+    const arrow = document.querySelector('.js-toggle--' + str);
+    const clear = document.querySelector('.js-clear--' + str);
+
+    let isOpen = false;
+
+    const toggle = (status, delay = 0) => {
+        setTimeout(() => {
+            isOpen = status;
+        }, delay);
+
+        if (arrow) {
+            arrow.classList.toggle('is-open', status);
+        }
+    };
+
+    if (!node) {
+        return;
+    }
+
+    const box = new Awesomplete(node, {
+        minChars: 0,
+        maxItems: 1000,
+        sort: false
+    });
+
+    node.addEventListener('input', () => {
+        if (clear) {
+            clear.classList.toggle('u-hidden', !node.value);
+        }
+    });
+
+    node.addEventListener('focus', () => {
+        if (box.ul.childNodes.length === 0 || box.ul.hasAttribute('hidden')) {
+            toggle(true);
+            box.evaluate();
+        } else {
+            toggle(false);
+            box.close();
+        }
+    });
+
+    node.addEventListener('awesomplete-selectcomplete', () => {
+        node.blur();
+        if (clear) {
+            clear.classList.remove('u-hidden');
+        }
+    });
+
+    node.addEventListener('awesomplete-close', () => {
+        toggle(false, 150);
+    });
+
+    if (arrow) {
+        arrow.addEventListener('click', () => {
+            if (!isOpen) {
+                node.focus();
+            } else {
+                box.close();
+            }
+        });
+    }
+
+    if (clear) {
+        clear.addEventListener('click', () => {
+            node.value = '';
+            node.focus();
+            if (clear) {
+                clear.classList.add('u-hidden');
+            }
+        });
+    }
+};
+
+autocomplete('search-city');
+autocomplete('search-query');
+
+const search = document.getElementById('search');
+const city = document.getElementById('search-city');
+const query = document.getElementById('search-query');
+
+if (search) {
+    search.addEventListener('submit', (e) => {
+        if (city && !city.value && query && !query.value) {
+            city.focus();
+            e.preventDefault();
+        }
+    }, false);
+}
+
+const node = document.getElementById('form-city');
+const cityID = document.getElementById('form-city-id');
+
+if (node) {
+    const nodeBox = new Awesomplete(node, {
+        minChars: 0,
+        maxItems: 1000,
+        sort: false,
+
+        replace: function (suggestion) {
+            this.input.value = suggestion.label;
+
+            if (cityID) {
+                cityID.value = suggestion.value;
+            }
+        }
+    });
+
+    node.addEventListener('focus', () => {
+        nodeBox.evaluate();
+    });
+}
 
 if (window.NodeList && !NodeList.prototype.forEach) {
     NodeList.prototype.forEach = Array.prototype.forEach;
@@ -398,18 +531,19 @@ if (document.querySelector('.js-copy-to-clipboard')) {
     });
 })(window);
 
-async function autocomplete() {
-    await import(/* webpackChunkName: "autocomplete" */ './components/autocomplete');
-}
+// async function autocomplete() {
+//     // await import(/* webpackChunkName: "autocomplete" */ './components/autocomplete');
+//     const aaaa = require('./components/autocomplete').default;
+// }
 
-if (document.getElementById('search-city') || document.getElementById('search-query') || document.getElementById('form-city')) {
-    autocomplete();
-}
+// if (document.getElementById('search-city') || document.getElementById('search-query') || document.getElementById('form-city')) {
+//     autocomplete();
+// }
 
-async function feedbacks() {
-    await import(/* webpackChunkName: "feedbacks" */ './components/feedbacks');
-};
+// async function feedbacks() {
+//     await import(/* webpackChunkName: "feedbacks" */ './components/feedbacks');
+// };
 
-if (document.querySelectorAll('.c-feedbacks--inner').length) {
-    feedbacks();
-}
+// if (document.querySelectorAll('.c-feedbacks--inner').length) {
+//     feedbacks();
+// }

wp-content/themes/biuro/searchform.php

@@ -28,7 +28,7 @@ endif;
 ?>
 <form id="search" class="c-search" action="<?php echo home_url(); ?>" method="get">
 
-    <label for="search-city" class="c-search--col c-search--col-location">
+    <div for="search-city" class="c-search--col c-search--col-location">
         <svg xmlns="http://www.w3.org/2000/svg" width="15px" height="21px" viewBox="0 0 15 21" class="c-ico--location">
             <path fill="#B8BCC1" d="M7.5,4.25c2.068,0,3.75,1.682,3.75,3.75s-1.682,3.75-3.75,3.75S3.75,10.068,3.75,8 S5.432,4.25,7.5,4.25z M7.5,10.5C8.878,10.5,10,9.379,10,8S8.878,5.5,7.5,5.5C6.121,5.5,5,6.622,5,8C5,9.379,6.121,10.5,7.5,10.5z M7.5,0.5C11.642,0.5,15,3.858,15,8c0,3.024-1.054,3.868-6.729,12.096c-0.373,0.538-1.169,0.538-1.542,0C1.054,11.868,0,11.024,0,8 C0,3.858,3.358,0.5,7.5,0.5z M7.5,19.013c5.442-7.87,6.25-8.494,6.25-11.013c0-1.669-0.65-3.239-1.831-4.419 C10.739,2.4,9.169,1.75,7.5,1.75S4.261,2.4,3.081,3.581C1.9,4.761,1.25,6.331,1.25,8C1.25,10.519,2.059,11.144,7.5,19.013z"/>
         </svg>
@@ -42,9 +42,22 @@ endif;
 ?>
         </datalist>
         <input list="search-cities" id="search-city" aria-label="<?php _e('Locations', 'biuro'); ?>" name="city" value="<?php echo (isset($searchQuery['city'])) ? trim(urldecode($searchQuery['city'])) : ''; ?>" placeholder="<?php _e('Locations', 'biuro'); ?>" class="c-search--input c-search--location" />
-    </label><!-- .c-search--col c-search--col-location -->
+        <span class="js-clear--search-city c-search--ico-clear <?php if (!isset($searchQuery['city'])): ?>u-hidden<?php endif; ?>">
+            <svg width="10px" height="10px" viewBox="0 0 13 13">
+                <path fill="none" stroke="#ff0000" stroke-width="1" stroke-linecap="square" d="M6.5,6.5L0.843,0.843L6.5,6.5 l-5.657,5.657L6.5,6.5z M6.5,6.5l5.657,5.657L6.5,6.5l5.657-5.657L6.5,6.5z"/>
+            </svg>
+        </span>
+        <span class="js-toggle--search-city c-search--ico-toggle">
+            <svg width="13px" height="8px" class="c-ico--down">
+                <use xlink:href="#ico--down"></use>
+            </svg>
+            <svg width="13px" height="8px" class="c-ico--up">
+                <use xlink:href="#ico--up"></use>
+            </svg>
+        </span>
+    </div><!-- .c-search--col c-search--col-location -->
 
-    <label for="search-query" class="c-search--col c-search--col-keyword">
+    <div for="search-query" class="c-search--col c-search--col-keyword">
         <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="19px" viewBox="0 0 20 19" class="c-ico--area">
             <path fill="#B8BCC1" d="M18.125,4.5C19.16,4.5,20,5.339,20,6.375v10c0,1.036-0.839,1.875-1.875,1.875H1.875 C0.839,18.25,0,17.411,0,16.375v-10C0,5.339,0.839,4.5,1.875,4.5H6.25V1.688c0-0.518,0.42-0.937,0.937-0.937h5.625 c0.518,0,0.938,0.42,0.938,0.937V4.5H18.125z M7.5,2v2.5h5V2H7.5z M18.75,16.375V10.75H12.5v1.562c0,0.518-0.42,0.937-0.938,0.937 H8.437c-0.518,0-0.938-0.42-0.938-0.937V10.75H1.25v5.625C1.25,16.72,1.53,17,1.875,17h16.25C18.47,17,18.75,16.72,18.75,16.375z M8.75,12h2.5v-1.25h-2.5V12z M18.75,9.5V6.375c0-0.345-0.28-0.625-0.625-0.625H1.875C1.53,5.75,1.25,6.03,1.25,6.375V9.5H18.75z"/>
         </svg>
@@ -59,7 +72,20 @@ endif;
 ?>
         </datalist>
         <input list="search-queries" id="search-query" aria-label="<?php _e('Keyword', 'biuro'); ?>" name="s" value="<?php echo (isset($searchQuery['s'])) ? trim(urldecode($searchQuery['s'])) : ''; ?>" placeholder="<?php _e('Keyword', 'biuro'); ?>" class="c-search--input c-search--keyword" />
-    </label><!-- .c-search--col c-search--col-keyword -->
+        <span class="js-clear--search-query c-search--ico-clear <?php if (!isset($searchQuery['city'])): ?>u-hidden<?php endif; ?>">
+            <svg width="10px" height="10px" viewBox="0 0 13 13">
+                <path fill="none" stroke="#ff0000" stroke-width="1" stroke-linecap="square" d="M6.5,6.5L0.843,0.843L6.5,6.5 l-5.657,5.657L6.5,6.5z M6.5,6.5l5.657,5.657L6.5,6.5l5.657-5.657L6.5,6.5z"/>
+            </svg>
+        </span>
+        <span class="js-toggle--search-query c-search--ico-toggle">
+            <svg width="13px" height="8px" class="c-ico--down">
+                <use xlink:href="#ico--down"></use>
+            </svg>
+            <svg width="13px" height="8px" class="c-ico--up">
+                <use xlink:href="#ico--up"></use>
+            </svg>
+        </span>
+    </div><!-- .c-search--col c-search--col-keyword -->
     <button class="o-btn c-btn--main <?php if ( is_front_page() ):  ?>c-btn--search<?php else: ?>c-btn--search-small<?php endif; ?>" type="submit" value="1">
         <svg xmlns="http://www.w3.org/2000/svg" width="17px" height="17px" viewBox="0 0 17 17" class="c-ico--search">
             <path fill="#FFFFFF" d="M16.884,15.694c0.156,0.156,0.156,0.408,0,0.564l-0.75,0.75c-0.156,0.156-0.408,0.156-0.564,0 l-4.031-4.031c-0.073-0.076-0.116-0.176-0.116-0.282v-0.438c-1.212,1.046-2.789,1.68-4.516,1.68C3.091,13.938,0,10.846,0,7.031 s3.091-6.906,6.906-6.906c3.815,0,6.906,3.091,6.906,6.906c0,1.727-0.634,3.304-1.68,4.516h0.438c0.106,0,0.206,0.04,0.282,0.116 L16.884,15.694z M6.906,12.344c2.935,0,5.313-2.377,5.313-5.312S9.841,1.719,6.906,1.719c-2.935,0-5.313,2.377-5.313,5.312 S3.971,12.344,6.906,12.344z"/>

wp-content/themes/biuro/template-parts/svg/icons.php

@@ -31,11 +31,11 @@
     <symbol id="ico--section-6" viewBox="0 0 56 56">
         <path fill="#004ED4" d="M38.25,21c1.243,0,2.25,1.007,2.25,2.25v12c0,1.243-1.007,2.25-2.25,2.25h-19.5 c-1.243,0-2.25-1.007-2.25-2.25v-12c0-1.243,1.007-2.25,2.25-2.25H24v-3.375c0-0.622,0.503-1.125,1.125-1.125h6.75 c0.622,0,1.125,0.503,1.125,1.125V21H38.25z M25.5,18v3h6v-3H25.5z M39,35.25V28.5h-7.5v1.875c0,0.621-0.504,1.125-1.125,1.125 h-3.75c-0.621,0-1.125-0.504-1.125-1.125V28.5H18v6.75c0,0.413,0.337,0.75,0.75,0.75h19.5C38.663,36,39,35.663,39,35.25z M27,30h3 v-1.5h-3V30z M39,27v-3.75c0-0.413-0.337-0.75-0.75-0.75h-19.5c-0.413,0-0.75,0.337-0.75,0.75V27H39z"/>
     </symbol>
-    <symbol id="ico--up" viewBox="0 0 13 8" class="c-ico--up">
-        <path fill="#004ED4" d="M0.116,6.829c-0.138-0.138-0.138-0.36,0-0.498l6.135-6.135c0.138-0.138,0.36-0.138,0.498,0 l6.135,6.135c0.138,0.138,0.138,0.36,0,0.498l-0.58,0.58c-0.138,0.138-0.36,0.138-0.498,0L6.5,2.115L1.194,7.409 c-0.138,0.138-0.36,0.138-0.498,0L0.116,6.829z"/>
+    <symbol id="ico--up" viewBox="0 0 13 8">
+        <path class="u-fill--inherit" d="M0.116,6.829c-0.138-0.138-0.138-0.36,0-0.498l6.135-6.135c0.138-0.138,0.36-0.138,0.498,0 l6.135,6.135c0.138,0.138,0.138,0.36,0,0.498l-0.58,0.58c-0.138,0.138-0.36,0.138-0.498,0L6.5,2.115L1.194,7.409 c-0.138,0.138-0.36,0.138-0.498,0L0.116,6.829z"/>
     </symbol>
-    <symbol id="ico--down" viewBox="0 0 13 8" class="c-ico--down">
-        <path fill="#004ED4" d="M12.884,0.776c0.138,0.138,0.138,0.36,0,0.498L6.749,7.409c-0.138,0.138-0.36,0.138-0.498,0 L0.116,1.274c-0.138-0.138-0.138-0.36,0-0.498l0.58-0.58c0.138-0.138,0.36-0.138,0.498,0L6.5,5.49l5.306-5.294 c0.138-0.138,0.36-0.138,0.498,0L12.884,0.776z"/>
+    <symbol id="ico--down" viewBox="0 0 13 8">
+        <path class="u-fill--inherit" d="M12.884,0.776c0.138,0.138,0.138,0.36,0,0.498L6.749,7.409c-0.138,0.138-0.36,0.138-0.498,0 L0.116,1.274c-0.138-0.138-0.138-0.36,0-0.498l0.58-0.58c0.138-0.138,0.36-0.138,0.498,0L6.5,5.49l5.306-5.294 c0.138-0.138,0.36-0.138,0.498,0L12.884,0.776z"/>
     </symbol>
     <symbol id="ico--time" viewBox="0 0 24 24">
         <path fill="#2A3644" d="M0.931,1.117h0.464c0.307,0,0.556,0.249,0.556,0.556v4.388c2.003-3.412,5.715-5.699,9.96-5.686 c6.324,0.02,11.473,5.194,11.463,11.518c-0.01,6.343-5.155,11.482-11.5,11.482c-2.964,0-5.667-1.122-7.706-2.963 c-0.237-0.214-0.248-0.582-0.022-0.808l0.328-0.328c0.209-0.209,0.545-0.219,0.764-0.021c1.757,1.581,4.083,2.544,6.636,2.544 c5.46,0,9.923-4.421,9.923-9.923c0-5.46-4.421-9.923-9.923-9.923c-3.842,0-7.175,2.183-8.824,5.379h4.558 c0.307,0,0.556,0.249,0.556,0.556v0.464c0,0.307-0.249,0.556-0.556,0.556H0.931c-0.307,0-0.556-0.249-0.556-0.556V1.673 C0.375,1.366,0.624,1.117,0.931,1.117z M15.847,15.735c-0.181,0.249-0.529,0.303-0.777,0.123l-3.936-2.863V5.383 c0-0.307,0.249-0.556,0.556-0.556h0.371c0.307,0,0.556,0.249,0.556,0.556v6.856l3.325,2.418c0.249,0.181,0.303,0.529,0.123,0.777 L15.847,15.735z"/>
@@ -47,7 +47,9 @@
         <path fill="#2A3644" d="M22.311,12.833c0.247,1.003,0.127,2.241-0.433,3.118c0.194,1.068-0.139,2.218-0.819,3.015 c0.086,2.422-1.395,4.034-4.058,4.034c-0.151,0.001-1.595,0-1.842,0C11.711,23,8.647,21.17,7.188,21.17v0.393 C7.188,22.356,6.544,23,5.75,23H1.438C0.644,23,0,22.356,0,21.563v-11.5c0-0.794,0.644-1.438,1.438-1.438H5.75 c0.491,0,0.924,0.246,1.184,0.622c0.137-0.026,0.263-0.058,0.361-0.1c0.971-0.522,2.588-3.094,3.646-4.153 c0.445-0.445,0.589-1.188,0.742-1.974C11.94,1.703,12.44,0,13.787,0c2.678,0,3.724,1.558,3.724,4.181 c0,1.388-0.538,2.356-0.93,3.136h3.151c1.826,0,3.267,1.568,3.267,3.26C23,11.5,22.757,12.255,22.311,12.833z M1.438,21.563H5.75 v-11.5H1.438V21.563z M20.485,12.414c0.718-0.195,1.082-0.915,1.077-1.83c-0.005-0.915-0.809-1.83-1.83-1.83h-5.031 c0-1.83,1.372-2.679,1.372-4.574c0-1.149,0-2.744-2.287-2.744c-0.915,0.915-0.457,3.202-1.83,4.574 c-1.522,1.522-3.076,4.574-4.77,4.574v9.148c1.919,0,4.696,1.83,7.972,1.83c0.156,0,1.681,0.001,1.83,0 c1.718-0.017,2.943-0.828,2.57-3.188c0.735-0.394,1.282-1.763,0.675-2.785C21.203,15.094,21.203,12.938,20.485,12.414z M4.672,19.406c0,0.595-0.483,1.078-1.078,1.078s-1.078-0.483-1.078-1.078c0-0.595,0.483-1.078,1.078-1.078 S4.672,18.811,4.672,19.406z"/>
     </symbol>
     <symbol id="ico--burger" viewBox="0 0 32 16">
-        <rect fill="#2A3644" width="32" height="2"/> <rect x="9" y="7" fill="#2A3644" width="23" height="2"/> <rect y="14" fill="#2A3644" width="32" height="2"/>
+        <rect fill="#2A3644" width="32" height="2"/>
+        <rect x="9" y="7" fill="#2A3644" width="23" height="2"/>
+        <rect y="14" fill="#2A3644" width="32" height="2"/>
     </symbol>
     <symbol id="ico--phone" viewBox="0 0 21 22">
         <path class="u-fill--inherit" d="M20.0073662,1.61350199 C20.5897947,1.74475969 20.9999499,2.26157937 20.9999499,2.86039004 C20.9999499,13.2496151 12.5794702,21.6249937 2.23534623,21.6249937 C1.63653556,21.6249937 1.11971588,21.2148385 0.984372653,20.6283244 L0.0328044109,16.4980528 C-0.106624349,15.8951166 0.205077636,15.2798837 0.775209486,15.0337905 L5.2212686,13.1265685 C5.74217381,12.9009831 6.35740672,13.0527486 6.71833535,13.4916227 L8.52714413,15.7023356 C11.3695122,14.3078077 13.6786783,11.994556 15.0732063,9.15627347 L12.8624533,7.34750474 C12.4236192,6.98653606 12.2718538,6.37130315 12.4974392,5.850438 L14.4046612,1.4002533 C14.6507543,0.830121445 15.2700728,0.51841946 15.873009,0.65784822 L20.0073662,1.61350199 Z M2.25993953,20.3124969 C11.8780807,20.3002002 19.6751564,12.5072501 19.6833675,2.88910892 L15.598197,1.9457518 L13.7114827,6.35079539 L16.6974051,8.79121926 C14.7122776,13.0240297 12.4112825,15.3331958 8.16208992,17.3265745 L5.72166605,14.3406521 L1.3165824,16.2273664 L2.25993953,20.3124969 Z"></path>