chore: details branding, demo and code quality

steve-lebleu · Mar 31, 2024 · 6ae46d2 · 6ae46d2
1 parent c8446e6
commit 6ae46d2
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 76 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,27 @@
-# Kømpletr - JS autocompletion
+# JS autocompletion library - Kømpletr
+
+<img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png#gh-light-mode-only" alt="Kompletr logo dark" />
+<img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png#gh-lightdark-mode-only" alt="Kompletr logo light" />
+
+*10kb of vanilla lightweight for a simple & efficient autocomplete*
 
 ![Github action workflow status](https://github.com/steve-lebleu/kompletr/actions/workflows/build.yml/badge.svg?branch=master)
-[![Coverage Status](https://coveralls.io/repos/github/steve-lebleu/kompletr/badge.svg?branch=master)](https://coveralls.io/github/steve-lebleu/kompletr?branch=master)
-[![CodeFactor](https://www.codefactor.io/repository/github/steve-lebleu/kompletr/badge)](https://www.codefactor.io/repository/github/steve-lebleu/kompletr)
 ![GitHub Release](https://img.shields.io/github/v/release/steve-lebleu/kompletr?logo=Github)
+[![CodeFactor](https://www.codefactor.io/repository/github/steve-lebleu/kompletr/badge)](https://www.codefactor.io/repository/github/steve-lebleu/kompletr)
+[![Coverage Status](https://coveralls.io/repos/github/steve-lebleu/kompletr/badge.svg?branch=master)](https://coveralls.io/github/steve-lebleu/kompletr?branch=master)
 [![GPL Licence](https://badges.frapsoft.com/os/gpl/gpl.svg?v=103)](https://github.com/steve-lebleu/kompletr/blob/master/LICENSE)
+[![JsDelivr Statistics](https://data.jsdelivr.com/v1/package/npm/kompletr/badge)](https://data.jsdelivr.com/v1/package/npm/kompletr/badge)
 
-*10kb of vanilla lightweight for a simple & efficient autocomplete*
+## Features
+
+- :white_check_mark: Sync / async querying
+- :white_check_mark: Cache management
+- :white_check_mark: Keyboard navigation
+- :white_check_mark: Flexible research (begining, whole word or ... on your own)
+- :white_check_mark: Flexible suggestions display (1, 2, 3, ... fields)
+- :white_check_mark: Support string or object values
+- :white_check_mark: No dependencies
+- :white_check_mark: 10kb fully included
 
 ## Installation
 
@@ -24,34 +39,26 @@ $ npm i kompletr --save
 
 ## Getting started
 
-Load Kømpletr styles:
+Load Kømpletr assets:
 
 ``` html 
-<head>
 ...
 <link href="kompletr.min.css" rel="stylesheet" type="text/css" />
+<script src="kompletr.min.js" type="module"></script>
 ...
-</head>
-```
-
-Load kompletr script:
-
-``` html 
-<script src="kompletr.min.js"></script>
 ```
 
-Define an input element:
+Define input element:
 
 ``` html 
-<input type="text" id="auto-complete" class="input--search" autocomplete="off" placeholder="Whatever you want..." />
+<input type="text" id="auto-complete" autocomplete="off" placeholder="Whatever you want..." />
 ```
 
 Invoke Kømpletr:
 
 ``` javascript
-const input = document.getElementById('autocomplete');
 kompletr({
-  input,
+  input: 'auto-complete',
   data: [],
   onSelect: (selected) => {
     console.log('There is the selected value', selected);
@@ -61,10 +68,6 @@ kompletr({
 
 ## Options
 
-Following options are available:
-
-* **animationType**: string, style of animation ('fadeIn','slideDown'). Default fadeIn
-* **animationDuration**: int, speed of the animation. Default 500ms
 * **fieldsToDisplay**: string[], properties to display in the suggestion field when suggestions are Objects
 * **mapPropertyAsValue**: string, property to map as input value when the suggestions are Objects
 * **filterOn**: string, check expression from beginning of the value or on the whole word. Default 'prefix'
@@ -73,3 +76,7 @@ Following options are available:
 * **onKeyup**: function(value), callback fired each time the user press a keyboard touch
 * **onSelect**: function(selected), callback fired after selection of on result item
 * **onError**: function(error), callback fired when an error occurs
+
+## Licence
+
+[GPL](https://www.gnu.org/licenses/gpl-3.0.html)
diff --git a/demo/index.html b/demo/index.html
@@ -51,13 +51,16 @@
         id="auto-complete"
         class="input--search"
         autocomplete="off"
-        placeholder="Enter a city name ..."
+        placeholder="Enter a city name..."
         value="" />
     </div>
+
     <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="https://www.gnu.org/licenses/gpl-3.0.html">Gnu General Public License 3.0</a>.
+        <br>
+        Permissions beyond the scope of this license may be available at <a href="https://www.konfer.be">https://www.konfer.be</a>.
       </p>
     </footer>
 
@@ -84,34 +87,21 @@
               input,
               data,
               options: {
-                /*animation: {
-                  type: 'slideDown',
-                  duration: 1000
-                },*/
                 theme: 'dark',  
                 fieldsToDisplay: [
                   'Name',
                   'CountryCode',
                   'Population'
                 ],
-                maxResults: 5,
+                maxResults: 4,
                 propToMapAsValue: 'Name',
                 startQueriyngFromChar: 2,
                 filterOn: 'prefix',
                 // cache: 50000
               },
-              /*onKeyup: async function (value, done) {
-                console.log('cb.onKeyup ', value);
-                console.log('I\'m doing scrappy stuffs with the data!');
-                const result = await fetch(`http://localhost:3000/api?q=${value}`, headers);
-                const d = await result.json();
-                console.log('DATA', d)
-                // data = ['string', 'string', 'string'];
-                done(d);
-              },*/
               onSelect: (selected) => {
                 Toastify({
-                  text: `Hey, I'm your callback! There is something for you 👀 : "${selected.Name}"`,
+                  text: `Hey oh "${selected.Name}" 👀`,
                   duration: 5000,
                   newWindow: true,
                   close: false,

diff --git a/jest.setup.js b/jest.setup.js
@@ -1,2 +1,2 @@
-import { TextEncoder, TextDecoder } from 'util'
+import { TextEncoder, TextDecoder } from 'util';
 Object.assign(global, { TextDecoder, TextEncoder });
diff --git a/src/index.html b/src/index.html
@@ -48,9 +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>.
+      <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Kømpletr.js</span> is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.html">Gnu General Public License 3.0</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>.
+      Permissions beyond the scope of this license may be available at <a href="https://www.konfer.be">https://www.konfer.be</a>.
     </p>
   </footer>
 
@@ -99,19 +99,7 @@
               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();
+              console.log('cb.onSelect ', selected);
             },
             onError: (error) => {
               console.log('cb.onError ', error);

diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
@@ -769,12 +769,12 @@ $base-font-size: 16px !default;
 ///
 @mixin gradient ($startColor: #eee, $endColor: white) {
   background-color: $startColor;
-  background: -webkit-gradient(linear,left top,left bottom,color-stop(0,$startColor),color-stop(100%,$endColor));
-  background: -webkit-linear-gradient(top, $startColor 0, $endColor 100%);
-  background: -moz-linear-gradient(top, $startColor 0, $endColor 100%);
-  background: -ms-linear-gradient(top, $startColor 0, $endColor 100%);
-  background: -o-linear-gradient(top, $startColor 0, $endColor 100%);
-  background: linear-gradient(to bottom,$startColor 0,$endColor 100%);
+  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,$startColor),color-stop(100%,$endColor));
+  background-image: -webkit-linear-gradient(top, $startColor 0, $endColor 100%);
+  background-image: -moz-linear-gradient(top, $startColor 0, $endColor 100%);
+  background-image: -ms-linear-gradient(top, $startColor 0, $endColor 100%);
+  background-image: -o-linear-gradient(top, $startColor 0, $endColor 100%);
+  background-image: linear-gradient(to bottom,$startColor 0,$endColor 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=0 );
 }
 
@@ -803,5 +803,4 @@ $base-font-size: 16px !default;
   } @else {
     background-color: rgba(255, 255, 255, $opacity);
   }
-
 }
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -13,6 +13,7 @@ $color-5: #777;
 $color-6: #666;
 $color-7: #444;
 $color-8: #333;
+$color-9: #2cc1fb;
 
 ////
 /// Fonts variables

diff --git a/src/sass/kompletr.demo.scss b/src/sass/kompletr.demo.scss
@@ -19,9 +19,9 @@ html {
   & svg {
     height: 80px;
     width: 80px;
-    color: #333;
-    fill: #2cc1fb;
-    fill: var(--theme-color, #2cc1fb);
+    color: $color-8;
+    fill: $color-9;
+    fill: var(--theme-color, $color-9);
   }
   &:hover {
     transform: scale(1.1);
@@ -35,7 +35,7 @@ body {
   margin: 0;
   min-height: 100vh;
   font-family: $font-base;
-  background: #333;
+  background: $color-8;
 }
 
 hgroup {
@@ -49,19 +49,19 @@ hgroup {
   }
 
   cite {
-    color: #fff;
+    color: $color-1;
     z-index: 999999999;
     position: relative;
   }
 }
 
 a {
-  color: #2cc1fb;
+  color: $color-9;
 }
 
 footer {
   margin-top: auto;
-  color: #fff;
+  color: $color-1;
   text-align: center;
   font-size: 0.9em;
 }
@@ -71,7 +71,6 @@ footer {
   max-width: 400px;
   position: relative;
   margin: 0 auto;
-
   -webkit-box-shadow:0px 0px 105px 45px rgba(44,193,251,0.9);
   -moz-box-shadow: 0px 0px 105px 45px rgba(44,193,251,0.9);
   box-shadow: 0px 0px 105px 45px rgba(44,193,251,0.9);
@@ -81,11 +80,6 @@ footer {
   }
 }
 
-.input--search {
-  font-family: $font-base;
-  font-size: 100%;
-}
-
 .input--search {
   display: block;
   box-sizing: border-box;
@@ -95,18 +89,20 @@ footer {
   min-width: 240px;
   max-width: 600px;
   height: auto;
-  font-size: 1.2rem;
+  font-size: 1rem;
   line-height: 1.5;
   border-radius: 0;
   color: $color-1;
   background: $color-8;
   border: none;
   outline: none;
+  font-family: $font-base;
+  font-size: 100%;
   &:focus {
     outline: none;
   }
 }
 
 ::placeholder {
-  color: $color-2;
+  color: $color-5;
 }