v10.2.6 => Release Notes for details, resolve #158

TarekRaafat · Jul 15, 2021 · f7d8d04 · f7d8d04
1 parent 6f98e16
commit f7d8d04
Show file tree

Hide file tree

Showing 18 changed files with 150 additions and 87 deletions.
diff --git a/README.md b/README.md
@@ -51,13 +51,13 @@ autoComplete.js is a simple, pure vanilla Javascript library progressively desig
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
 ```
 
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
 ```
 #### Package Manager
 

diff --git a/dist/autoComplete.js b/dist/autoComplete.js
@@ -419,12 +419,10 @@
     }
   };
   var next = function next(ctx) {
-    var index = ctx.cursor + 1;
-    goTo(index, ctx);
+    goTo(ctx.cursor + 1, ctx);
   };
   var previous = function previous(ctx) {
-    var index = ctx.cursor - 1;
-    goTo(index, ctx);
+    goTo(ctx.cursor - 1, ctx);
   };
   var select = function select(ctx, event, index) {
     index = index >= 0 ? index : ctx.cursor;
@@ -439,8 +437,7 @@
     var items = Array.from(ctx.list.querySelectorAll(itemTag));
     var item = event.target.closest(itemTag);
     if (item && item.nodeName === itemTag) {
-      var index = items.indexOf(item);
-      select(ctx, event, index);
+      select(ctx, event, items.indexOf(item));
     }
   };
   var navigate = function navigate(event, ctx) {
@@ -627,7 +624,7 @@
     prototype.select = function (index) {
       select(this, null, index);
     };
-    autoComplete.search = prototype.search = function (query, record, options) {
+    prototype.search = function (query, record, options) {
       return search(query, record, options);
     };
   }

diff --git a/dist/autoComplete.js.gz b/dist/autoComplete.js.gz
diff --git a/dist/autoComplete.min.js b/dist/autoComplete.min.js
diff --git a/dist/autoComplete.min.js.gz b/dist/autoComplete.min.js.gz
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -77,7 +77,7 @@ wrapper: false,
 
 #### `src` <sub><sup>(required)</sup></sub>
 - Type: `Array`|`Function` returns `Array` of results values
-  - Parameters: (`query`)
+  - Parameters: (`query`) <small>(works only if `data.cache` is `false`)</small>
 - Default: `null`
 
 #### `keys` <sub><sup>(required)</sup></sub>

diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -72,7 +72,7 @@
 	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
 	<meta name="theme-color" content="#ffffff">
 	<link rel="stylesheet" type="text/css" media="screen"
-		href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/css/autoComplete.min.css">
+		href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
 	<!-- <link rel="stylesheet" type="text/css" media="screen" href="./css/autoComplete.css"> -->
 	<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
 	<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
@@ -150,7 +150,7 @@ <h4>mode</h4>
 			</div>
 		</footer>
 	</div>
-	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/autoComplete.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
 	<!-- <script src="./js/autoComplete.js"></script> -->
 	<script src="./js/index.js"></script>
 </body>

diff --git a/docs/demo/js/autoComplete.js b/docs/demo/js/autoComplete.js
@@ -419,12 +419,10 @@
     }
   };
   var next = function next(ctx) {
-    var index = ctx.cursor + 1;
-    goTo(index, ctx);
+    goTo(ctx.cursor + 1, ctx);
   };
   var previous = function previous(ctx) {
-    var index = ctx.cursor - 1;
-    goTo(index, ctx);
+    goTo(ctx.cursor - 1, ctx);
   };
   var select = function select(ctx, event, index) {
     index = index >= 0 ? index : ctx.cursor;
@@ -439,8 +437,7 @@
     var items = Array.from(ctx.list.querySelectorAll(itemTag));
     var item = event.target.closest(itemTag);
     if (item && item.nodeName === itemTag) {
-      var index = items.indexOf(item);
-      select(ctx, event, index);
+      select(ctx, event, items.indexOf(item));
     }
   };
   var navigate = function navigate(event, ctx) {
@@ -627,7 +624,7 @@
     prototype.select = function (index) {
       select(this, null, index);
     };
-    autoComplete.search = prototype.search = function (query, record, options) {
+    prototype.search = function (query, record, options) {
       return search(query, record, options);
     };
   }

diff --git a/docs/demo/js/autoComplete.js.gz b/docs/demo/js/autoComplete.js.gz
diff --git a/docs/demo/js/autoComplete.min.js b/docs/demo/js/autoComplete.min.js
diff --git a/docs/demo/js/autoComplete.min.js.gz b/docs/demo/js/autoComplete.min.js.gz
diff --git a/docs/how-to-guides.md b/docs/how-to-guides.md
@@ -15,7 +15,7 @@ Guided examples on how-to use autoComplete.js in different use-cases
 events: {
     input: {
         focus() {
-            const inputValue = document.querySelector("#autoComplete").value;
+            const inputValue = autoCompleteJS.input.value;
 
             if (inputValue.length) autoCompleteJS.start();
         },
@@ -33,6 +33,42 @@ events: {
 
 ***
 
+## `Dynamic list position`
+
+<!-- panels:start -->
+<!-- div:left-panel -->
+
+##### Code:
+
+```js
+// autoComplete.js Config Options
+events: {
+    input: {
+        open() {
+            const position =
+                autoCompleteJS.input.getBoundingClientRect().bottom + autoCompleteJS.list.getBoundingClientRect().height >
+                (window.innerHeight || document.documentElement.clientHeight);
+
+            if (position) {
+                autoCompleteJS.list.style.bottom = autoCompleteJS.input.offsetHeight + 8 + "px";
+            } else {
+                autoCompleteJS.list.style.bottom = -autoCompleteJS.list.offsetHeight - 8 + "px";
+            }
+        },
+    },
+},
+```
+
+<!-- div:right-panel -->
+
+##### Example
+
+<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_02">
+
+<!-- panels:end -->
+
+***
+
 ## `No Results Found`
 
 <!-- panels:start -->
@@ -62,7 +98,7 @@ resultsList: {
 
 ##### Example
 
-<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_02">
+<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_03">
 
 <!-- panels:end -->
 
@@ -90,7 +126,7 @@ events: {
     input: {
         selection(event) {
             const feedback = event.detail;
-            const input = document.querySelector("#autoComplete");
+            const input = autoCompleteJS.input;
             // Trim selected Value
             const selection = feedback.selection.value.trim();
             // Split query into array and trim each value
@@ -110,7 +146,7 @@ events: {
 
 ##### Example:
 
-<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_03">
+<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_04">
 
 <!-- panels:end -->
 
@@ -158,7 +194,7 @@ events: {
     input: {
         selection(event) {
             const feedback = event.detail;
-            const input = document.querySelector("#autoComplete");
+            const input = autoCompleteJS.input;
             // Get selected Value
             const selection = feedback.selection.value.trim();
             // Add selected value to "history" array
@@ -172,7 +208,7 @@ events: {
 
 ##### Example:
 
-<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_04">
+<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_05">
 
 <!-- panels:end -->
 
@@ -188,7 +224,7 @@ events: {
 // autoComplete.js Config Options
 filter: (list) => {
     const results = list.filter((item) => {
-        const inputValue = document.querySelector("#autoComplete").value.toLowerCase();
+        const inputValue = autoCompleteJS.input.value.toLowerCase();
         const itemValue = item.value.toLowerCase();
 
         if (itemValue.startsWith(inputValue)) {
@@ -204,7 +240,7 @@ filter: (list) => {
 
 ##### Example:
 
-<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_05">
+<input type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off" id="autoComplete_06">
 
 <!-- panels:end -->
 
@@ -258,18 +294,45 @@ filter: (list) => {
         resultItem,
         events: {
             input: {
+                open() {
+                    const position =
+                        autoCompleteJS_02.input.getBoundingClientRect().bottom + autoCompleteJS_02.list.getBoundingClientRect().height >
+                        (window.innerHeight || document.documentElement.clientHeight);
+
+                    if (position) {
+                        autoCompleteJS_02.list.style.bottom = autoCompleteJS_02.input.offsetHeight + 8 + "px";
+                    } else {
+                        autoCompleteJS_02.list.style.bottom = -autoCompleteJS_02.list.offsetHeight - 8 + "px";
+                    }
+                },
                 selection(event) {
                     const selection = event.detail.selection.value;
                     autoCompleteJS_02.input.value = selection;
                 }
-            }
-        }
+            },
+        },
     });
 
     const autoCompleteJS_03 = new autoComplete({
         selector: "#autoComplete_03",
         placeHolder,
         data,
+        resultsList,
+        resultItem,
+        events: {
+            input: {
+                selection(event) {
+                    const selection = event.detail.selection.value;
+                    autoCompleteJS_03.input.value = selection;
+                }
+            }
+        }
+    });
+
+    const autoCompleteJS_04 = new autoComplete({
+        selector: "#autoComplete_04",
+        placeHolder,
+        data,
         query(query) {
             // Split query into array
             const querySplit = query.split(",");
@@ -286,7 +349,7 @@ filter: (list) => {
             input: {
                 selection(event) {
                     const feedback = event.detail;
-                    const input = autoCompleteJS_03.input;
+                    const input = autoCompleteJS_04.input;
                     // Trim selected Value
                     const selection = feedback.selection.value.trim();
                     // Split query into array and trim each value
@@ -304,8 +367,8 @@ filter: (list) => {
 
     let history = [];
 
-    const autoCompleteJS_04 = new autoComplete({
-        selector: "#autoComplete_04",
+    const autoCompleteJS_05 = new autoComplete({
+        selector: "#autoComplete_05",
         placeHolder,
         data,
         resultsList: {
@@ -338,26 +401,26 @@ filter: (list) => {
             input: {
                 selection(event) {
                     const feedback = event.detail;
-                    const input = autoCompleteJS_04.input;
+                    const input = autoCompleteJS_05.input;
                     // Get selected Value
                     const selection = feedback.selection.value;
                     // Add selected value to "history" array
                     history.push(selection);
 
-                    autoCompleteJS_04.input.value = selection;
+                    autoCompleteJS_05.input.value = selection;
                 }
             }
         }
     });
 
-    const autoCompleteJS_05 = new autoComplete({
-        selector: "#autoComplete_05",
+    const autoCompleteJS_06 = new autoComplete({
+        selector: "#autoComplete_06",
         placeHolder,
         data: {
             ...data,
             filter(list) {
                 const results = list.filter((item) => {
-                    const inputValue = document.querySelector("#autoComplete_05").value.toLowerCase();
+                    const inputValue = document.querySelector("#autoComplete_06").value.toLowerCase();
                     const itemValue = item.value.toLowerCase();
 
                     if (itemValue.startsWith(inputValue)) {
@@ -374,7 +437,7 @@ filter: (list) => {
             input: {
                 selection(event) {
                     const selection = event.detail.selection.value;
-                    autoCompleteJS_05.input.value = selection;
+                    autoCompleteJS_06.input.value = selection;
                 }
             }
         }

diff --git a/docs/index.html b/docs/index.html
@@ -158,7 +158,7 @@
         src="//platform-api.sharethis.com/js/sharethis.js#property=5c213660c276020011d38212&product=inline-share-buttons"
         async="async"></script>
     <link rel="stylesheet"
-        href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/css/autoComplete.min.css">
+        href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
 </head>
 
 <body>
@@ -209,7 +209,7 @@
             mustache: {
                 data: ["../package.json", {
                     minVersion: "10.2",
-                    version: "10.2.5"
+                    version: "10.2.6"
                 }]
             }
         }
@@ -224,7 +224,7 @@
     <script src="https://cdn.jsdelivr.net/npm/docsify-example-panels"></script>
     <script src="//cdn.jsdelivr.net/npm/codeblock-iframe@latest/dist/index.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-codeblock-iframe@latest/dist/index.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.5/dist/autoComplete.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
 </body>
 
 </html>
diff --git a/docs/release-notes.md b/docs/release-notes.md
@@ -35,7 +35,17 @@ For more information on semantic versioning, please visit <http://semver.org/>.
 
 ***
 
-### v10.2.5 ✨
+### v10.2.6 ✨
+- ➕ Added:
+  - New `How-to Guides` example for `Dynamic list position` based on it's position inside viewport [#158]
+- 🎛️ Updated: 
+  - Library code with minor cleanup & optimizations resulted in minor size reduction for faster loading time
+  - `Configuration` documentation section
+  - Development dependencies
+- 🧹 Removed:
+  - `autoComplete.search()` API method to be only available per `autoComplete.js` instance instead of global
+
+### v10.2.5
 - 🔧 Fixed: `response` eventEmitter not firing in `data.cache` mode
 
 ### v10.2.4