fix: prevent flash effect without style input

steve-lebleu · Mar 30, 2024 · ae486a3 · ae486a3
1 parent bbddb15
commit ae486a3
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 263 deletions.
diff --git a/demo/css/kompletr.demo.min.css b/demo/css/kompletr.demo.min.css
diff --git a/demo/index.html b/demo/index.html
@@ -43,16 +43,16 @@
       <cite>10kb of vanilla lightweight for a simple & efficient autocomplete</cite>
     </hgroup>
 
-    <div id="searcher" class="form--search">
+    <div class="form--search">
       <input
         type="text"
         name="auto-complete"
         id="auto-complete"
+        class="input--search"
         autocomplete="off"
         placeholder="Enter a city name ..."
         value="" />
     </div>
-
     <footer>
       <p>
         © 2017 Konfer

diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/main.js.map b/dist/main.js.map
diff --git a/package.json b/package.json
@@ -47,8 +47,9 @@
   ],
   "license": "ISC",
   "scripts": {
-    "build": "mkdir -p build && cp src/index.html build/ & cp test/fixtures/data.json build/ & npm run build:css && npm run build:js",
-    "build:css": "node-sass ./src/sass/kompletr.demo.scss ./build/css/kompletr.demo.min.css --output-style compressed",
+    "build": "mkdir -p build && cp src/index.html build/ & cp test/fixtures/data.json build/ & npm run build:css & npm run build:css-demo && npm run build:js",
+    "build:css": "node-sass ./src/sass/kompletr.scss ./build/css/kompletr.min.css --output-style compressed",
+    "build:css-demo": "node-sass ./src/sass/kompletr.demo.scss ./build/css/kompletr.demo.min.css --output-style compressed",
     "build:js": "webpack",
     "ci:dev": "webpack serve",
     "ci:e2e": "cypress run --browser chrome ./cypress",

diff --git a/src/index.html b/src/index.html
@@ -11,6 +11,7 @@
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <![endif]-->
 
+    <link href="css/kompletr.min.css" rel="stylesheet" type="text/css" media="screen" />
     <link href="css/kompletr.demo.min.css" rel="stylesheet" type="text/css" media="screen" />
 
     <!--[if lt IE 9]>
@@ -33,11 +34,12 @@
     <cite>10kb of vanilla lightweight for a simple & efficient autocomplete</cite>
   </hgroup>
 
-  <div id="searcher" class="form--search">
+  <div class="form--search">
     <input
       type="text"
       name="auto-complete"
       id="auto-complete"
+      class="input--search"
       autocomplete="off"
       placeholder="Enter a city name ..."
       value="" />
@@ -46,7 +48,9 @@
   <footer>
     <p>
       © 2017 Konfer
-      <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Kømpletr.js</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br>Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="https://www.konfer.be" rel="cc:morePermissions">https://www.konfer.be</a>.
+      <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Kømpletr.js</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
+      <br>
+      Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="https://www.konfer.be" rel="cc:morePermissions">https://www.konfer.be</a>.
     </p>
   </footer>
 
@@ -95,20 +99,20 @@
               done(d);
             },*/
             onSelect: (selected) => {
-                Toastify({
-                  text: `Hey, I'm your callback there is something for you ${selected.Name} 👀`,
-                  duration: 5000,
-                  newWindow: true,
-                  close: false,
-                  gravity: "bottom", // `top` or `bottom`
-                  position: "center", // `left`, `center` or `right`
-                  stopOnFocus: true, // Prevents dismissing of toast on hover
-                  style: {
-                    background: "#4cb56b",
-                    color: '#fff'
-                  },
-                }).showToast();
-              },
+              Toastify({
+                text: `Hey, I'm your callback there is something for you ${selected.Name} 👀`,
+                duration: 5000,
+                newWindow: true,
+                close: false,
+                gravity: "bottom", // `top` or `bottom`
+                position: "center", // `left`, `center` or `right`
+                stopOnFocus: true, // Prevents dismissing of toast on hover
+                style: {
+                  background: "#4cb56b",
+                  color: '#fff'
+                },
+              }).showToast();
+            },
             onError: (error) => {
               console.log('cb.onError ', error);
             },

diff --git a/src/js/dom.js b/src/js/dom.js
@@ -5,18 +5,18 @@ export class DOM {
    * @description Identifiers for the DOM elements
    */
   _identifiers = {
-    results: 'kpl-result',
+    wrapper: 'kompletr-wrapper',
+    results: 'kompletr-results',
   };
 
   /**
    * @description Classes for the DOM elements
    */
   _classes = {
     main: 'kompletr',
-    input: 'input--search',
-    results: 'form--search__result',
-    result: 'item--result',
-    data: 'item--data',
+    results: 'container--search-results',
+    result: 'item--row',
+    data: 'item--property',
     focus: 'focus',
   };
 
@@ -95,13 +95,17 @@ export class DOM {
 
     this.body = document.getElementsByTagName('body')[0];
 
-    this.input = input instanceof HTMLInputElement ? input : document.getElementById(input); // TODO: if the input is in the DOM, don't set class here but directly in the HTML
-    this.input.setAttribute('class', `${this._input.getAttribute('class')} ${this._classes.input}`);
+    this.input = input instanceof HTMLInputElement ? input : document.getElementById(input); 
 
     this.result = this.build('div', [ { id: this._identifiers.results }, { class: this._classes.results } ]);
 
-    this.input.parentElement.setAttribute('class', `${this._input.parentElement.getAttribute('class')} ${this._classes.main} ${options.theme}`);
-    this.input.parentElement.appendChild(this._result);
+    this.wrapper = this.build('div', [ { id: this._identifiers.wrapper }, { class: this._classes.results } ]);
+    this.wrapper.setAttribute('class', `${this._input.parentElement.getAttribute('class')} ${this._classes.main} ${options.theme}`);
+
+    this.input.parentNode.insertBefore(this.wrapper, this.input);
+
+    this.wrapper.appendChild(this.input);
+    this.wrapper.appendChild(this.result);
   }
 
   /**
@@ -176,6 +180,6 @@ export class DOM {
 
     this.result.innerHTML = html;
 
-    this._broadcaster.trigger(event.domDone, this.result); // TODO: to be validated
+    this._broadcaster.trigger(event.domDone, this.result);
   }
 }