icon bar and navbar update

xmqywx · Mar 23, 2019 · d4694bd · d4694bd
1 parent 6113d3b
commit d4694bd
Show file tree

Hide file tree

Showing 15 changed files with 170 additions and 51 deletions.
diff --git a/dist/addons/iconbar/_options.js b/dist/addons/iconbar/_options.js
@@ -1,7 +1,8 @@
 const options = {
-    add: false,
+    use: false,
     top: [],
     bottom: [],
+    position: 'left',
     type: 'default'
 };
 export default options;
diff --git a/dist/addons/iconbar/mmenu.iconbar.css b/dist/addons/iconbar/mmenu.iconbar.css
diff --git a/dist/addons/iconbar/mmenu.iconbar.js b/dist/addons/iconbar/mmenu.iconbar.js
@@ -6,12 +6,24 @@ export default function () {
     //	Extend shorthand options
     if (Mmenu.typeof(options) == 'array') {
         options = {
-            add: true,
+            use: true,
             top: options
         };
     }
+    if (Mmenu.typeof(options) != 'object') {
+        options = {};
+    }
+    if (typeof options.use == 'undefined') {
+        options.use = true;
+    }
+    if (typeof options.use == 'boolean' && options.use) {
+        options.use = true;
+    }
+    if (typeof options.use == 'number') {
+        options.use = '(min-width: ' + options.use + 'px)';
+    }
     //	/Extend shorthand options
-    if (!options.add) {
+    if (!options.use) {
         return;
     }
     var iconbar;
@@ -22,27 +34,27 @@ export default function () {
             ctnt = [ctnt];
         }
         //	Create node
-        var ibar = Mmenu.DOM.create('div.mm-iconbar__' + position);
+        var part = Mmenu.DOM.create('div.mm-iconbar__' + position);
         //	Add content
         for (let c = 0, l = ctnt.length; c < l; c++) {
             if (typeof ctnt[c] == 'string') {
-                ibar.innerHTML += ctnt[c];
+                part.innerHTML += ctnt[c];
             }
             else {
-                ibar.append(ctnt[c]);
+                part.append(ctnt[c]);
             }
         }
-        if (ibar.children.length) {
+        if (part.children.length) {
             if (!iconbar) {
                 iconbar = Mmenu.DOM.create('div.mm-iconbar');
             }
-            iconbar.append(ibar);
+            iconbar.append(part);
         }
     });
     //	Add to menu
     if (iconbar) {
         this.bind('initMenu:after', () => {
-            this.node.menu.classList.add('mm-menu_iconbar');
+            this.node.menu.classList.add('mm-menu_iconbar-' + options.position);
             this.node.menu.prepend(iconbar);
         });
         //	Tabs
@@ -85,6 +97,14 @@ export default function () {
             };
             this.bind('openPanel:start', selectTab);
         }
+        //	En-/disable the iconbar for media queries.
+        if (typeof options.use != 'boolean') {
+            this.matchMedia(options.use, () => {
+                this.node.menu.classList.add('mm-menu_iconbar-' + options.position);
+            }, () => {
+                this.node.menu.classList.remove('mm-menu_iconbar-' + options.position);
+            });
+        }
     }
 }
 ;
diff --git a/dist/addons/navbars/mmenu.navbars.js b/dist/addons/navbars/mmenu.navbars.js
@@ -43,7 +43,7 @@ export default function () {
         if (typeof options == 'boolean' && options) {
             options = {};
         }
-        if (typeof options != 'object') {
+        if (Mmenu.typeof(options) != 'object') {
             options = {};
         }
         if (typeof options.content == 'undefined') {
@@ -52,7 +52,19 @@ export default function () {
         if (!(options.content instanceof Array)) {
             options.content = [options.content];
         }
+        if (typeof options.use == 'undefined') {
+            options.use = true;
+        }
+        if (typeof options.use == 'boolean' && options.use) {
+            options.use = true;
+        }
+        if (typeof options.use == 'number') {
+            options.use = '(min-width: ' + options.use + 'px)';
+        }
         //	/Extend shorthand options.
+        if (!options.use) {
+            return false;
+        }
         //	Create the navbar element.
         var navbar = Mmenu.DOM.create('div.mm-navbar');
         //	Get the position for the navbar.
@@ -97,6 +109,14 @@ export default function () {
                 func.call(this, navbar);
             }
         }
+        //	en-/disable the navbar for media queries.
+        if (typeof options.use != 'boolean') {
+            this.matchMedia(options.use, () => {
+                navbar.classList.remove('mm-hidden');
+            }, () => {
+                navbar.classList.add('mm-hidden');
+            });
+        }
     });
     //	Add to menu.
     this.bind('initMenu:after', () => {

diff --git a/dist/addons/sidebar/mmenu.sidebar.js b/dist/addons/sidebar/mmenu.sidebar.js
@@ -20,7 +20,7 @@ export default function () {
     //	Extend collapsed shorthand options.
     if (typeof options.collapsed == 'boolean' && options.collapsed) {
         options.collapsed = {
-            use: 'all'
+            use: true
         };
     }
     if (typeof options.collapsed == 'string' ||
@@ -38,7 +38,7 @@ export default function () {
     //	Extend expanded shorthand options.
     if (typeof options.expanded == 'boolean' && options.expanded) {
         options.expanded = {
-            use: 'all'
+            use: true
         };
     }
     if (typeof options.expanded == 'string' ||

diff --git a/dist/mmenu.css b/dist/mmenu.css
diff --git a/dist/mmenu.js b/dist/mmenu.js
diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -102,14 +102,6 @@
 	}
 }
 
-@mixin mm_sectionindexer_position( $pos, $nr ) {
-	.mm-menu_navbar_#{$pos}-#{$nr} {
-		.mm-sectionindexer {
-			#{$pos}: calc( ( var( --mm-navbar-size ) * #{$nr} ) + 2px );
-		}
-	}
-}
-
 @mixin mm_effect_listitem_delay( $i ) {
 	&:nth-child( #{$i} ) {
 		transition-delay: ( $i * 50ms );

diff --git a/src/addons/iconbar/_options.ts b/src/addons/iconbar/_options.ts
@@ -1,7 +1,8 @@
 const options : mmOptionsIconbar = {
-	add: false,
+	use: false,
 	top: [],
 	bottom : [],
+	position: 'left',
 	type: 'default'
 };
 export default options;
diff --git a/src/addons/iconbar/_typings.d.ts b/src/addons/iconbar/_typings.d.ts
@@ -1,15 +1,18 @@
 /**	Options for the iconbar add-on. */
 interface mmOptionsIconbar {
 
-	/** Whether or not to prepend an iconbar to the menu. */
-	add ?: boolean,
+	/** Whether or not (and at what breakpoint) to add an iconbar to the menu. */
+	use ?: boolean | number | string,
 
 	/** An array of strings (for text or HTML) or HTML elements for icons to put in the top of the iconbar. */
 	top ?: string[] | HTMLElement[],
 
 	/** An array of strings (for text or HTML) or HTML elements for icons to put in the bottom of the iconbar. */
 	bottom ?: string[] | HTMLElement[],
 
+	/** Where to position the iconbar, on the left or right. */
+	position ?: 'left' | 'right'
+
 	/** The type of iconbar. */
 	type ?: 'default' | 'tabs'
 }
diff --git a/src/addons/iconbar/mmenu.iconbar.scss b/src/addons/iconbar/mmenu.iconbar.scss
@@ -10,33 +10,55 @@ $mm_module: '.mm-iconbar';
 	--mm-iconbar-size: #{$mm_iconbarSize};
 }
 
+.mm-menu {
+	&_iconbar-left {
+		.mm-panels,
+		.mm-navbars_top,
+		.mm-navbars_bottom {
+			margin-left: var( --mm-iconbar-size );
+		}
+
+		#{$mm_module} {
+			border-right-width: 1px;
+			display: block;
+			left: 0;
+		}
+	}
+
+	&_iconbar-right {
+		.mm-panels,
+		.mm-navbars_top,
+		.mm-navbars_bottom {
+			margin-right: var( --mm-iconbar-size );
+		}
+
+		#{$mm_module} {
+			border-left-width: 1px;
+			display: block;
+			right: 0;
+		}
+	}
+}
+
 #{$mm_module} {
 	background: var( --mm-color-background );
 	color: var( --mm-color-text-dimmed );
 	border: 0 solid $mm_borderColor;
 	border-color: var( --mm-color-border );
-	border-right-width: 1px;
 
 	text-align: center;
 
 	overflow: hidden;
+	display: none;
 	box-sizing: border-box;
 	width: var( --mm-iconbar-size );
 
 	position: absolute;
 	top: 0;
-	left: 0;
 	bottom: 0;
 	z-index: 2;
 }
 
-.mm-menu_iconbar {
-	.mm-panels,
-	.mm-navbars_top,
-	.mm-navbars_bottom {
-		margin-left: var( --mm-iconbar-size );
-	}
-}
 
 %mm_iconbar_part {
 	width: inherit;

diff --git a/src/addons/iconbar/mmenu.iconbar.ts b/src/addons/iconbar/mmenu.iconbar.ts
@@ -14,14 +14,30 @@ export default function(
 	//	Extend shorthand options
 	if ( Mmenu.typeof( options ) == 'array' ) {
 		(options as mmLooseObject) = {
-			add: true,
+			use: true,
 			top: options
 		};
 	}
+
+	if ( Mmenu.typeof( options ) != 'object' ) {
+		options = {};
+	}
+
+	if ( typeof options.use == 'undefined' ) {
+		options.use = true;
+	}
+
+	if ( typeof options.use == 'boolean' && options.use ) {
+		options.use = true;
+	}
+
+	if ( typeof options.use == 'number' ) {
+		options.use = '(min-width: ' + options.use + 'px)';
+	}
 	//	/Extend shorthand options
 
 
-	if ( !options.add ) {
+	if ( !options.use ) {
 		return;
 	}
 
@@ -38,33 +54,33 @@ export default function(
 		}
 
 		//	Create node
-		var ibar = Mmenu.DOM.create( 'div.mm-iconbar__' + position );
+		var part = Mmenu.DOM.create( 'div.mm-iconbar__' + position );
 
 
 		//	Add content
 		for ( let c = 0, l = ctnt.length; c < l; c++ ) {
 			if ( typeof ctnt[ c ] == 'string' ) {
-				ibar.innerHTML += ctnt[ c ];
+				part.innerHTML += ctnt[ c ];
 			}
 			else
 			{
-				ibar.append( ctnt[ c ] );
+				part.append( ctnt[ c ] );
 			}
 		}
 
-		if ( ibar.children.length ) {
+		if ( part.children.length ) {
 			if ( !iconbar ) {
 				iconbar = Mmenu.DOM.create( 'div.mm-iconbar' );
 			}
-			iconbar.append( ibar );
+			iconbar.append( part );
 		}
 	});
 
 
 	//	Add to menu
 	if ( iconbar ) {
 		this.bind( 'initMenu:after', () => {
-			this.node.menu.classList.add( 'mm-menu_iconbar' );
+			this.node.menu.classList.add( 'mm-menu_iconbar-' + options.position );
 			this.node.menu.prepend( iconbar );
 		});
 
@@ -118,5 +134,17 @@ export default function(
 			};
 			this.bind( 'openPanel:start', selectTab );
 		}
+
+		//	En-/disable the iconbar for media queries.
+		if ( typeof options.use != 'boolean' ) {
+			this.matchMedia( options.use,
+				() => {
+					this.node.menu.classList.add( 'mm-menu_iconbar-' + options.position );
+				},
+				() => {
+					this.node.menu.classList.remove( 'mm-menu_iconbar-' + options.position );
+				}
+			);
+		}
 	}
 };
diff --git a/src/addons/navbars/_typings.d.ts b/src/addons/navbars/_typings.d.ts
@@ -10,6 +10,9 @@ interface mmOptionsNavbarsNavbar {
 	/** The position for the navbar. */
 	position ?: 'top' | 'bottom'
 
+	/** Whether or not to enable the navbar. */
+	use ?: boolean | string | number
+
 	/** The type of navbar. */
 	type ?: 'tabs'
 }