autocomplete UX updated

.babelrc

@@ -31,11 +31,11 @@
     // ]
 
     "plugins": [
-        // ["@babel/plugin-transform-runtime",
-        //   {
-        //     "regenerator": true
-        //   }
-        // ],
+            // ["@babel/plugin-transform-runtime",
+            //   {
+            //     "regenerator": true
+            //   }
+            // ],
         "@babel/plugin-syntax-dynamic-import",
         // "@babel/plugin-transform-arrow-functions"
     ]

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/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>