demo update + search fix

FrDH · Apr 4, 2022 · 3e2210a · 3e2210a
1 parent a68a3ed
commit 3e2210a
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 73 deletions.
diff --git a/demo/advanced.html b/demo/advanced.html
@@ -42,7 +42,7 @@
                 Demo
             </div>
             <div id="content">
-                <h1>This is an advanced demo.</h1>
+                <h1>This is a demo.</h1>
                 <p>Click the menu icon to open the menu.</p>
             </div>
             <nav id="menu">
@@ -97,7 +97,7 @@ <h1>This is an advanced demo.</h1>
             new Mmenu(
                 document.querySelector("#menu"),
                 {
-                    theme: "dark",
+                    theme: "white",
                     setSelected: {
                         hover: true,
                         parent: true,

diff --git a/demo/css/demo.css b/demo/css/demo.css
@@ -51,7 +51,7 @@ nav:not(.mm-menu) {
     color: #fff;
     line-height: 44px;
     text-align: center;
-    background: #4bb5ef;
+    background: #bba6a2;
 }
 #header a {
     display: block;

diff --git a/demo/css/site.css b/demo/css/site.css
@@ -5,13 +5,16 @@ body {
 	height: 100%;
 }
 body {
-	background-color: #3ea7e1;
-	-webkit-text-size-adjust: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
 	font-family: Arial, Helvetica, Verdana;
 	font-size: 18px;
 	line-height: 26px;
 	color: #fff;
-	position: relative;
+	background-color: #5888aa;
+	-webkit-text-size-adjust: none;
 }
 h1 {
 	text-shadow: 8px 10px 1px rgba(0,0,0,.1);
@@ -31,45 +34,55 @@ a:hover
 }
 
 .phone {
-    position: fixed;
-	top: 50%;
-	right: 50%;
-    height: 760px;
-    width: 430px;
-	margin-top: -380px;
-    background: url( ../img/iphonex-example-blue.png ) center top / 395px auto no-repeat transparent;
-}
+	display: flex;
+	flex-direction: column;
+    position: relative;
+    height: 600px;
+    width: 300px;
+	margin-right: 100px;
+	overflow: hidden;
+	overflow-y: auto;
+	background: #1d2327;
+	border-radius: 45px;
+	border: 5px solid #000;
+	outline: 8px solid #222;
+	box-shadow: 0 5px 50px #2a6787;
 
+}
 .phone:before {
-	content: '';
+	content: "";
+	position: relative;
+	z-index: 1;
+	display: block;
+	height: 35px;
+	flex-shrink: 0;
+	margin-top: 0;
 	border-radius: 30px 30px 0 0;
-	background: url( ../img/iphonex-example-camera.png ) center top no-repeat #4bb5ef;
+	background: url(../img/iphonex-example-camera.png) center top no-repeat
+		#bba6a2;
+}
+.phone:after {
+	content: "";
 	display: block;
-	width: 290px;
-	height: 25px;
 	position: absolute;
-	top: 62px;
-	left: calc( 50% - 290px / 2);
-	z-index: 1;
+	bottom: 8px;
+	left: calc(50% - 50px);
+	z-index: 3;
+	width: 100px;
+	height: 6px;
+	border-radius: 3px;
+	background: rgb(0 0 0 / 30%);
 }
-
 .phone iframe {
-	position: absolute;
-	top: 87px;
-	left: 70px;
-	z-index: 0;
-	width: 290px;
-	height: 600px;
-	border: none;
-	border-radius: 0 0 30px 30px;
+	flex-grow: 1;
+    display: block;
+    position: relative;
+    z-index: 2;
+	width: 100%;
+	margin: 0;
+    border: unset;
 }
 
-#page {
+.page {
 	width: 350px;
-	position: fixed;
-	margin-top: -20px;
-	margin-left: 0;
-	top: 50%;
-	left: 50%;
-	transform: translateY(-50%);
 }
diff --git a/demo/img/iphonex-example-blue.png b/demo/img/iphonex-example-blue.png
diff --git a/dist/_modules/dom.js b/dist/_modules/dom.js
@@ -53,9 +53,8 @@ export const childText = (element) => {
  * @return  {string}                The text.
  */
 export const text = (element) => {
-    return Array.prototype.slice
-        .call(element.childNodes)
-        .filter((child) => child.nodeType == 3)
+    return [].slice.call(element.childNodes)
+        .filter((child) => !child.ariaHidden)
         .map((child) => child.textContent)
         .join(' ');
 };

diff --git a/dist/addons/counters/mmenu.counters.js b/dist/addons/counters/mmenu.counters.js
@@ -47,8 +47,11 @@ export default function () {
         }
         //	Check if no counter already excists.
         if (!DOM.find(parent, '.mm-counter').length) {
+            const ctr = DOM.create('span.mm-counter');
+            //  @ts-ignore
+            ctr.ariaHidden = 'true';
             const btn = DOM.children(parent, '.mm-btn')[0];
-            btn === null || btn === void 0 ? void 0 : btn.prepend(DOM.create('span.mm-counter'));
+            btn === null || btn === void 0 ? void 0 : btn.prepend(ctr);
         }
         //  Count immediately.
         count(panel);

diff --git a/dist/mmenu.js b/dist/mmenu.js
diff --git a/index.html b/index.html
@@ -1,28 +1,52 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="author" content="www.frebsite.nl" />
-		<meta content="width=600px user-scalable=yes" name="viewport" />
-		<meta name="robots" content="noindex, nofollow" />
+    <head>
+        <meta charset="utf-8" />
+        <meta name="author" content="www.frebsite.nl" />
+        <meta content="width=600px user-scalable=yes" name="viewport" />
+        <meta name="robots" content="noindex, nofollow" />
 
-		<title>mmenu.js, app look-alike menus with sliding submenus.</title>
+        <title>mmenu.js, app look-alike menus with sliding submenus.</title>
 
-		<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
-		<link type="text/css" rel="stylesheet" href="demo/css/site.css" />
-	</head>
-	<body>
-		<div id="wrapper">
-			<div class="phone">
-				<iframe name="phone" src="demo/advanced.html" frameborder="0" width="320" height="480"></iframe>
-			</div>
-			<div id="page">
-				<h1>mmenu</h1>
-				<p>The best javascript plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and web-app.</p>
-				<p>Check out the example on the left or <a href="https://mmenujs.com/examples.html" target="_blank">play around with the options</a>.</p>
-				<p>For the full documentation please visit: <a href="https://mmenujs.com" target="_blank">mmenujs.com</a></p>
-				<p>There also is a <a href="http://mmenujs.com/wordpress-plugin">WordPress plugin available</a>.</p>
-			</div>
-		</div>
-	</body>
-</html>
+        <link
+            type="text/css"
+            rel="stylesheet"
+            href="http://fonts.googleapis.com/css?family=Pacifico"
+        />
+        <link type="text/css" rel="stylesheet" href="demo/css/site.css" />
+    </head>
+    <body>
+        <div class="phone">
+            <iframe
+                name="phone"
+                src="demo/advanced.html"
+                frameborder="0"
+                width="320"
+                height="480"
+            ></iframe>
+        </div>
+        <div class="page">
+            <h1>mmenu</h1>
+            <p>
+                The best javascript plugin for app look-alike on- and off-canvas
+                menus with sliding submenus for your website and web-app.
+            </p>
+            <p>
+                Check out the example on the left or
+                <a href="https://mmenujs.com/examples.html" target="_blank"
+                    >play around with the options</a
+                >.
+            </p>
+            <p>
+                For the full documentation please visit:
+                <a href="https://mmenujs.com" target="_blank">mmenujs.com</a>
+            </p>
+            <p>
+                There also is a
+                <a href="http://mmenujs.com/wordpress-plugin"
+                    >WordPress plugin available</a
+                >.
+            </p>
+        </div>
+    </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mmenu-js",
-    "version": "9.1.4",
+    "version": "9.1.5",
     "main": "dist/mmenu.js",
     "module": "src/mmenu.js",
     "author": "Fred Heusschen <[email protected]>",

diff --git a/src/_modules/dom.ts b/src/_modules/dom.ts
@@ -70,9 +70,8 @@ export const childText = (
  * @return  {string}                The text.
  */
 export const text = (element: HTMLElement): string => {
-    return Array.prototype.slice
-        .call(element.childNodes)
-        .filter((child) => child.nodeType == 3)
+    return [].slice.call(element.childNodes)
+        .filter((child) => !child.ariaHidden)
         .map((child) => child.textContent)
         .join(' ');
 };

diff --git a/src/addons/counters/mmenu.counters.ts b/src/addons/counters/mmenu.counters.ts
@@ -62,8 +62,12 @@ export default function (this: Mmenu) {
 
         //	Check if no counter already excists.
         if (!DOM.find(parent, '.mm-counter').length) {
+            const ctr = DOM.create('span.mm-counter');
+            //  @ts-ignore
+            ctr.ariaHidden = 'true';
+
             const btn = DOM.children(parent, '.mm-btn')[0];
-            btn?.prepend(DOM.create('span.mm-counter'));
+            btn?.prepend(ctr);
         }
 
         //  Count immediately.