searchfield.search option

demo/default.html

@@ -34,7 +34,7 @@ <h1>This is a demo.</h1>
                             <li>
                                 <span>The team</span>
                                 <ul>
-                                    <li class="Selected">
+                                    <li>
                                         <a href="#/">Management</a>
                                     </li>
                                     <li>
@@ -60,17 +60,7 @@ <h1>This is a demo.</h1>
         <!-- mmenu scripts -->
         <script src="../dist/mmenu.js"></script>
         <script>
-            new Mmenu(document.querySelector("#menu"), {
-                searchfield: {
-                    add: true,
-                },
-                // navbars: [
-                //     {
-                //         content: ["searchfield"],
-                //     },
-                // ],
-                slidingSubmenus: false,
-            });
+            new Mmenu(document.querySelector("#menu"));
 
             document.addEventListener("click", function (evnt) {
                 var anchor = evnt.target.closest('a[href="#/"]');

dist/addons/searchfield/mmenu.searchfield.js

@@ -249,6 +249,15 @@ const initSearch = function (form) {
     const search = () => {
         /** The searchquery */
         const query = input.value.toLowerCase().trim();
+        if (query.length) {
+            form.classList.add('mm-searchfield--searching');
+        }
+        else {
+            form.classList.remove('mm-searchfield--searching');
+        }
+        if (!options.search) {
+            return;
+        }
         /** All listitems */
         const listitems = [];
         searchIn.forEach(panel => {
@@ -261,7 +270,6 @@ const initSearch = function (form) {
         if (query.length) {
             // Trigger event.
             this.trigger('search:before');
-            form.classList.add('mm-searchfield--searching');
             resultspanel.classList.add('mm-panel--searching');
             //	Add data attribute to the matching listitems.
             listitems.forEach((listitem) => {
@@ -288,7 +296,6 @@ const initSearch = function (form) {
         else {
             // Trigger event.
             this.trigger('clear:before');
-            form.classList.remove('mm-searchfield--searching');
             resultspanel.classList.remove('mm-panel--searching', 'mm-panel--noresults');
             //  Resultspanel.
             if (resultspanel.matches('.mm-panel--search')) {

dist/addons/searchfield/options.js

@@ -3,6 +3,7 @@ const options = {
     addTo: 'panels',
     noResults: 'No results found.',
     placeholder: 'Search',
+    search: true,
     searchIn: 'panels',
     splash: '',
     title: 'Search',

dist/core/offcanvas/mmenu.offcanvas.js

@@ -63,7 +63,10 @@ export default function () {
         //	Setup the menu.
         this.node.menu.classList.add('mm-menu--offcanvas');
         this.node.menu.setAttribute('inert', 'true');
-        this.position(options.position);
+        if (possiblePositions.includes(options.position)) {
+            this.node.wrpr.classList.add(`mm-wrapper--position-${options.position}`);
+            this.node.menu.classList.add(`mm-menu--position-${options.position}`);
+        }
         //	Open if url hash equals menu id (usefull when user clicks the hamburger icon before the menu is created)
         let hash = window.location.hash;
         if (hash) {
@@ -100,26 +103,6 @@ export default function () {
         }
     });
 }
-/**
- * Get or set the postion for the menu.
- *
- * @param {string} [position] The position for the menu.
- */
-Mmenu.prototype.position = function (position = null) {
-    const options = this.opts.offCanvas;
-    if (position) {
-        if (possiblePositions.includes(position)) {
-            this.node.wrpr.classList.remove(`mm-wrapper--position-${options.position}`);
-            this.node.wrpr.classList.add(`mm-wrapper--position-${position}`);
-            this.node.menu.classList.remove(`mm-menu--position-${options.position}`);
-            this.node.menu.classList.add(`mm-menu--position-${position}`);
-            options.position = position;
-        }
-    }
-    else {
-        return options.position;
-    }
-};
 /**
  * Open the menu.
  */

src/addons/searchfield/mmenu.searchfield.ts

@@ -340,6 +340,16 @@ const initSearch = function (
         /** The searchquery */
         const query = input.value.toLowerCase().trim();
 
+        if (query.length) {
+            form.classList.add('mm-searchfield--searching');
+        } else {
+            form.classList.remove('mm-searchfield--searching');
+        }
+
+        if (!options.search) {
+            return;
+        }
+
         /** All listitems */
         const listitems = [];
 
@@ -355,8 +365,6 @@ const initSearch = function (
         if (query.length) {
             // Trigger event.
             this.trigger('search:before');
-
-            form.classList.add('mm-searchfield--searching');
             resultspanel.classList.add('mm-panel--searching');
 
             //	Add data attribute to the matching listitems.
@@ -389,7 +397,6 @@ const initSearch = function (
             // Trigger event.
             this.trigger('clear:before');
 
-            form.classList.remove('mm-searchfield--searching');
             resultspanel.classList.remove('mm-panel--searching', 'mm-panel--noresults');
 
             //  Resultspanel.

src/addons/searchfield/options.ts

@@ -3,6 +3,7 @@ const options: mmOptionsSearchfield = {
     addTo: 'panels',
     noResults: 'No results found.',
     placeholder: 'Search',
+    search: true,
     searchIn: 'panels',
     splash: '',
     title: 'Search',

src/addons/searchfield/typings.d.ts

@@ -13,6 +13,9 @@ interface mmOptionsSearchfield {
 	/** The placeholder text for the searchfield. */
 	placeholder?: string
 
+	/** Whether or not to search. */
+	search?: boolean
+
 	/** QuerySelector for the panels to search in. */
 	searchIn?: string
 

src/core/offcanvas/mmenu.offcanvas.ts

@@ -87,7 +87,10 @@ export default function (this: Mmenu) {
         this.node.menu.classList.add('mm-menu--offcanvas');
         this.node.menu.setAttribute('inert', 'true');
 
-        this.position(options.position);
+        if (possiblePositions.includes(options.position)) {
+            this.node.wrpr.classList.add(`mm-wrapper--position-${options.position}`);
+            this.node.menu.classList.add(`mm-menu--position-${options.position}`);
+        }
 
         //	Open if url hash equals menu id (usefull when user clicks the hamburger icon before the menu is created)
         let hash = window.location.hash;
@@ -130,27 +133,6 @@ export default function (this: Mmenu) {
     });
 }
 
-/**
- * Get or set the postion for the menu.
- * 
- * @param {string} [position] The position for the menu.
- */
-Mmenu.prototype.position = function(this: Mmenu, position: mmOptionsOffcanvasPositions = null) {
-    const options = this.opts.offCanvas;
-
-    if (position) {
-        if (possiblePositions.includes(position)) {
-            this.node.wrpr.classList.remove(`mm-wrapper--position-${options.position}`);
-            this.node.wrpr.classList.add(`mm-wrapper--position-${position}`);
-            this.node.menu.classList.remove(`mm-menu--position-${options.position}`);
-            this.node.menu.classList.add(`mm-menu--position-${position}`);
-            options.position = position;
-        }
-    } else {
-        return options.position;
-    }
-}
-
 /**
  * Open the menu.
  */

src/core/oncanvas/mmenu.oncanvas.ts

@@ -71,9 +71,6 @@ export default class Mmenu {
     /** Set the page HTML element. */
     setPage: Function;
 
-    /** Set the menu position. */
-    position: Function;
-
     /**
      * Create a mobile menu.
      * @param {HTMLElement|string} 	menu		The menu node.