Skip to content

Commit

Permalink
bugfixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Fred Heusschen committed Feb 10, 2019
1 parent 8bf3a59 commit 640caf8
Show file tree
Hide file tree
Showing 18 changed files with 4,789 additions and 171 deletions.
18 changes: 10 additions & 8 deletions demo/advanced.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,18 @@
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />

<title>jQuery.mmenu demo</title>
<title>mmenu.js demo</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/demo.css" />
<link rel="stylesheet" href="../dist/jquery.mmenu.all.css" />
<link rel="stylesheet" href="../dist/mmenu.css" />

<style>
.mm-menu {
--mm-listitem-size: 50px;
--mm-navbar-size: 50px;
}

@media (min-width: 992px) {
.header a {
display: none;
Expand All @@ -30,19 +35,18 @@
</style>

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="../dist/jquery.mmenu.all.js"></script>
<script src="../dist/mmenu.js"></script>
<script>
$(function() {
$('nav#menu').mmenu({
extensions : [ 'theme-dark' ],
extensions : [ 'theme-dark', 'shadow-page' ],
setSelected : true,
counters : true,
searchfield : {
placeholder : 'Search menu items'
},
iconbar : {
add : true,
size : 40,
top : [
'<a href="#/"><span class="fa fa-home"></span></a>'
],
Expand All @@ -55,12 +59,10 @@
sidebar : {
collapsed : {
use : '(min-width: 450px)',
size : 40,
hideNavbar : false
},
expanded : {
use : '(min-width: 992px)',
size : 35
use : '(min-width: 992px)'
}
},
navbars : [
Expand Down
4 changes: 2 additions & 2 deletions demo/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
<title>jQuery.mmenu demo</title>

<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/jquery.mmenu.css" />
<link type="text/css" rel="stylesheet" href="../dist/mmenu.css" />

<!-- <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="../dist/jquery.mmenu.js"></script>
<script src="../dist/mmenu.js"></script>
<script>
$(function() {
$('nav#menu').mmenu();
Expand Down
4 changes: 2 additions & 2 deletions demo/onepage.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<title>jQuery.mmenu demo</title>

<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/jquery.mmenu.all.css" />
<link type="text/css" rel="stylesheet" href="../dist/mmenu.css" />

<!-- for the one page layout -->
<style type="text/css">
Expand Down Expand Up @@ -52,7 +52,7 @@
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/hammerjs/2.0.8/hammer.min.js"></script>

<script type="text/javascript" src="../dist/jquery.mmenu.all.js"></script>
<script type="text/javascript" src="../dist/mmenu.js"></script>
<script type="text/javascript">
$(function() {
$('nav#menu').mmenu({
Expand Down
2 changes: 1 addition & 1 deletion dist/mmenu.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4,764 changes: 4,686 additions & 78 deletions dist/mmenu.js

Large diffs are not rendered by default.

36 changes: 20 additions & 16 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
/*
Tasks:
$ gulp : Runs "css" and "js" tasks
$ gulp watch : Starts a watch on "css" and "js" tasks
$ gulp : Runs "css" and "js" tasks.
$ gulp watch : Starts a watch on "css" and "js" tasks.
Flags:
--o ../path/to : Sets the "output" directory to the specified directory
--c ../path/to : Creates a "custom build" using _build.json and _variables.custom.scss from the specified directory
--o ../path/to : Sets the "output" directory to the specified directory.
--c ../path/to : Creates a "custom build" using _build.json and _variables.custom.scss from the specified directory.
Examples:
Expand Down Expand Up @@ -187,9 +187,17 @@ const css = series(
*/

// 1) Compile and concatenate all TS files to JS.
const jsCompile = () => {
var files = [
const js = () => {

var files = [];

// Add typings.
files.push(
inputDir + '**/*.d.ts',
);

// Add files.
files.push(
inputDir + '/core/oncanvas/[!_]*.ts',
inputDir + '/core/oncanvas/[_]*.ts',
inputDir + '/core/@(' + build.files.core.join( '|' ) + ')/[!_]*.ts',
Expand All @@ -199,23 +207,19 @@ const jsCompile = () => {
inputDir + '/addons/@(' + build.files.addons.join( '|' ) + ')/[_]*.ts',
inputDir + '/addons/@(' + build.files.addons.join( '|' ) + ')/translations/@(' + build.files.translations.join( '|' ) + ').ts',
inputDir + '/wrappers/@(' + build.files.wrappers.join( '|' ) + ')/*.ts'
];
);

return src( files )
.pipe( typescript({
"target": "es5"
}) )
.pipe( uglify({
output: {
comments: "/^!/"
}
}) )
// .pipe( uglify({
// output: {
// comments: "/^!/"
// }
// }) )
.on( 'error', ( err ) => { console.log( err ) } )
.pipe( concat( build.name + '.js' ) )
.pipe( dest( outputDir ) );
};

const js = series(
jsCompile
);

2 changes: 1 addition & 1 deletion src/_build.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,6 @@
"turbolinks",
"wordpress"
],
"translations" : [ "de", "nl", "ru" ]
"translations" : [ "de", "nl", "ru", "fa" ]
}
}
31 changes: 14 additions & 17 deletions src/addons/pagescroll/mmenu.pagescroll.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,15 @@ Mmenu.addons.pageScroll = function(
try
{
if ( href != '#' &&
href.slice( 0, 1 ) == '#' &&
Mmenu.node.page.querySelector( href )
href.slice( 0, 1 ) == '#'
) {
return true;
return (Mmenu.node.page.querySelector( href ) as HTMLElement);
}
return false;
return null;
}
catch( err )
{
return false;
return null;
}
}

Expand Down Expand Up @@ -78,13 +77,13 @@ Mmenu.addons.pageScroll = function(

// Don't continue if the targeted section is not on the page.
var href = anchor.getAttribute( 'href' );
if ( !anchorInPage( href ) )

section = anchorInPage( href );
if ( !section )
{
return;
}

section = document.querySelector( href );

// If the sidebar add-on is "expanded"...
if ( this.node.menu.matches( '.mm-menu_sidebar-expanded' ) &&
document.documentElement.matches( '.mm-wrapper_sidebar-expanded' )
Expand All @@ -107,26 +106,23 @@ Mmenu.addons.pageScroll = function(
// Update selected menu item after scrolling.
if ( options.update )
{
let orgs = [],
scts = [];
let scts : HTMLElement[] = [];

this.bind( 'initListview:after', (
panel : HTMLElement
) => {
// TODO de sections zouden geordend moeten worden op de hoogte in de DOM, niet op volgorde in het menu.
// TODO querySelector haalt een enkel HTML element op, er kunnen meerdere lisviews in een panel zitten.
let listitems = Mmenu.DOM.children( panel.querySelector( '.mm-listview' ), 'li' );
let listitems = Mmenu.DOM.find( panel, '.mm-listitem' );
Mmenu.filterListItemAnchors( listitems )
.forEach(( anchor ) => {
var href = anchor.getAttribute( 'href' );
var section = anchorInPage( href );

if ( anchorInPage( href ) )
if ( section )
{
orgs.push( href );
scts.unshift( section );
}
});

scts = orgs.reverse();
});

let _selected = -1;
Expand All @@ -145,7 +141,8 @@ Mmenu.addons.pageScroll = function(
let panel = Mmenu.DOM.children( this.node.pnls, '.mm-panel_opened' )[ 0 ],
listitems = Mmenu.DOM.find( panel, '.mm-listitem' ),
anchors = Mmenu.filterListItemAnchors( listitems );
anchors = anchors.filter( anchor => anchor.matches( '[href="' + scts[ s ] + '"]' ) );

anchors = anchors.filter( anchor => anchor.matches( '[href="#' + scts[ s ].id + '"]' ) );

if ( anchors.length )
{
Expand Down
66 changes: 30 additions & 36 deletions src/addons/searchfield/mmenu.searchfield.ts
Original file line number Diff line number Diff line change
Expand Up @@ -353,14 +353,15 @@ Mmenu.prototype._initSearching = function(
data.listitems = listitems.filter( listitem => !listitem.matches( '.mm-listitem_divider' ) );
data.dividers = listitems.filter( listitem => listitem.matches( '.mm-listitem_divider' ) );

input[ 'mmSearchfield' ] = data;


var searchpanel : HTMLElement = Mmenu.DOM.children( this.node.pnls, '.mm-panel_search' )[ 0 ],
input : HTMLElement = Mmenu.DOM.find( form, 'input' )[ 0 ],
cancel : HTMLElement = Mmenu.DOM.find( form, '.mm-searchfield__cancel' )[ 0 ];


input[ 'mmSearchfield' ] = data;


// Open the splash panel when focussing the input.
if ( options.panel.add && options.panel.splash )
{
Expand Down Expand Up @@ -465,7 +466,7 @@ Mmenu.prototype._initSearching = function(
};

// Add the focus eventlistener to the input.
input.addEventListener( 'focus', this.evnt.inputInputSearchfieldSearch );
input.addEventListener( 'input', this.evnt.inputInputSearchfieldSearch );


// Fire once initially
Expand Down Expand Up @@ -514,7 +515,7 @@ Mmenu.prototype.search = function(

var form : HTMLElement = (input.closest( '.mm-searchfield' ) as HTMLElement),
buttons : HTMLElement[] = Mmenu.DOM.find( (form as HTMLElement), '.mm-btn' ),
searchpanel : HTMLElement = Mmenu.DOM.children( this.node.pnls, '.mm-panel_search' )[ 0 ];
searchpanel : HTMLElement = Mmenu.DOM.children( this.node.pnls, '.mm-panel_search' )[ 0 ];

var panels : HTMLElement[] = data.panels,
noresults : HTMLElement[] = data.noresults,
Expand All @@ -532,8 +533,10 @@ Mmenu.prototype.search = function(
// TODO: dit klopt niet meer
// Mmenu.$(listitems).find( '.mm-btn_fullwidth-search' )
// .removeClass( 'mm-btn_fullwidth-search mm-btn_fullwidth' );

Mmenu.DOM.children( searchpanel, '.mm-listview' )[ 0 ].innerHTML = '';
if ( searchpanel )
{
Mmenu.DOM.children( searchpanel, '.mm-listview' )[ 0 ].innerHTML = '';
}

panels.forEach(( panel ) => {
panel.scrollTop = 0;
Expand Down Expand Up @@ -685,24 +688,25 @@ Mmenu.prototype.search = function(
let listitems = Mmenu.DOM.find( panel, '.mm-listitem' );
Mmenu.filterListItems( listitems )
.forEach(( listitem ) => {
Mmenu.DOM.prevAll( listitem, '.mm-listitem_divider' )[ 0 ]
.classList.remove( 'mm-hidden' );
let divider = Mmenu.DOM.prevAll( listitem, '.mm-listitem_divider' )[ 0 ];
if ( divider )
{
divider.classList.remove( 'mm-hidden' );
}
});
});

}


// Show submit / clear button
buttons.forEach(( button ) => {
button.classList.remove( 'mm-hidden' );
});
buttons.forEach( button => button.classList.remove( 'mm-hidden' ) );


// Show/hide no results message
noresults.forEach(( wrapper ) => {
Mmenu.DOM.find( wrapper, '.mm-panel__noresultsmsg' )[ 0 ]
.classList[ listitems.filter( listitem => !listitem.matches( '.mm-hidden' ) ).length ? 'add' : 'remove' ]( 'mm-hidden' );
noresults.forEach( wrapper => {
Mmenu.DOM.find( wrapper, '.mm-panel__noresultsmsg' )
.forEach( message => message.classList[ listitems.filter( listitem => !listitem.matches( '.mm-hidden' ) ).length ? 'add' : 'remove' ]( 'mm-hidden' ) );
});


Expand All @@ -711,17 +715,13 @@ Mmenu.prototype.search = function(
// Hide splash
if ( options.panel.splash )
{
Mmenu.DOM.find( searchpanel, '.mm-panel__searchsplash' )[ 0 ]
.classList.add( 'mm-hidden' );
Mmenu.DOM.find( searchpanel, '.mm-panel__searchsplash' )
.forEach( splash => splash.classList.add( 'mm-hidden' ) );
}

// Re-show original listitems when in search panel
listitems.forEach(( listitem ) => {
listitem.classList.remove( 'mm-hidden' );
});
dividers.forEach(( divider ) => {
divider.classList.remove( 'mm-hidden' );
});
listitems.forEach( listitem => listitem.classList.remove( 'mm-hidden' ) );
dividers.forEach( divider => divider.classList.remove( 'mm-hidden' ) );
}
}

Expand All @@ -731,22 +731,16 @@ Mmenu.prototype.search = function(
{

// Show all items
listitems.forEach(( listitem ) => {
listitem.classList.remove( 'mm-hidden' );
});
dividers.forEach(( divider ) => {
divider.classList.remove( 'mm-hidden' );
});
listitems.forEach( listitem => listitem.classList.remove( 'mm-hidden' ) );
dividers.forEach( divider => divider.classList.remove( 'mm-hidden' ) );

// Hide submit / clear button
buttons.forEach(( button ) => {
button.classList.add( 'mm-hidden' );
});
buttons.forEach( button => button.classList.add( 'mm-hidden' ) );

// Hide no results message
noresults.forEach(( wrapper ) => {
Mmenu.DOM.find( wrapper, '.mm-panel__noresultsmsg' )[ 0 ]
.classList.add( 'mm-hidden' );
noresults.forEach( wrapper => {
Mmenu.DOM.find( wrapper, '.mm-panel__noresultsmsg' )
.forEach( message => message.classList.add( 'mm-hidden' ) );
});


Expand All @@ -755,8 +749,8 @@ Mmenu.prototype.search = function(
// Show splash
if ( options.panel.splash )
{
Mmenu.DOM.find( searchpanel, '.mm-panel__searchsplash' )[ 0 ]
.classList.remove( 'mm-hidden' );
Mmenu.DOM.find( searchpanel, '.mm-panel__searchsplash' )
.forEach( splash => splash.classList.remove( 'mm-hidden' ) );
}

// Close panel
Expand Down
File renamed without changes.
Loading

0 comments on commit 640caf8

Please sign in to comment.