-function FluidbookBurger(fluidbook) {
- this.fluidbook = fluidbook;
- this.init();
+function FluidbookBurger(nav) {
+ this.nav = nav;
+ this.fluidbook = nav.fluidbook;
+ this.closeTimeout;
}
FluidbookBurger.prototype = {
+
init: function () {
+ // Copy credits
+ var credits = $("footer#credits").clone().attr('id', 'mobile-credits');
+ var a = credits.find('a');
+ var t = a.text();
+ credits.find('a').text(t);
+ $("#menuList").append(credits);
+
+ // Insert Chapters submenus
+ if (this.chaptersMenuHTML !== '') {
+ $('#menu_chapters').parent().append(this.chaptersMenuHTML);
+ }
+
+ // Remove unwanted links from chapters menu
+ // For any items that have a submenu, we want to remove the page link
+ // from the parent item to make it easier to open the submenu
+ $('#chapterList li a').each(function () { // Process all links in the chapters submenu
+ if ($(this).siblings('ul').length > 0) { // Check if any have a <ul> element beside them (indicates a submenu)
+ // MMenu requires non-link elements to be wrapped in a <span>
+ // so we need to first wrap the contents of the link in a span before removing the wrapping <a>
+ $(this).contents().wrap('<span></span>').parent().unwrap('a');
+ }
+ });
+
+
+ // If the chapters menu is not cascading, wrap submenu lists in <div>s so that MMenu will show them in the same panel
+ if (!this.fluidbook.settings.chaptersCascade) {
+
+ // Create a single panel around the chapters
+ $('#chapterList').wrap('<div id="chaptersPanel" class="Panel"></div>');
+
+ // Tell MMenu not to render any child lists as subpanels (ref: https://github.com/FrDH/jQuery.mmenu/issues/499#issuecomment-170649868)
+ $('#chaptersPanel ul').addClass('mm-nopanel');
+
+ $('#chapters').wrap('<a href="#chaptersPanel"></a>'); // Link to
+
+ //console.log($('#menuList').parent().html());
+ }
+
+
+ // Add close button to menu
+ this.getElement().append(this.getMenuCloseButton());
+
+ this.initBurger();
+ },
+
+ initNav() {
+ var v2 = '';
+ if (this.fluidbook.settings.iconSet < 15) {
+ v2 = ' class="v2"';
+ }
+
+ let navOrder;
+ // Use navOrderH (mobile icon order) if it is set
+ if (this.fluidbook.settings.navOrderH.length > 0) {
+ navOrder = this.fluidbook.settings.navOrderH;
+ } else {
+ navOrder = this.fluidbook.settings.navOrder;
+ }
+
+ var menuOpener = '<a href="#" id="menuOpener">' + getSpriteIcon('interface-menu') + '<span class="label">' + this.fluidbook.l10n.__('Menu') + '</span></a>';
+ $('#main header').append(menuOpener);
+
+ // Add holder list element for menu items
+ $("#menu").append('<ul id="menuList"' + v2 + '></ul>');
+
+ // Add Search form
+ var searchElement = (this.fluidbook.settings.search) ? this.getSearch() : '';
+ this.searchHTML = '<div id="menuSearch">' + searchElement + '</div>'; // Save for later so it can be injected after MMenu is rendered
+ },
+
+ initBurger: function () {
+
+ var $this = this, dir = this.fluidbook.l10n.dir, inverted = this.nav.isInverted(),
+ side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'right' : 'left';
+
+
+ $("#menu").insertAfter('#main');
+ $('<div id="menuOverlay"></div>').insertAfter('#menu');
+
+ // var extensions = ['pagedim-black', 'position-front'];
+ // if (side === 'right') {
+ // extensions.push('position-right');
+ // }
+ //
+ // this.menu.mmenu({
+ //
+ // // Allow #anchor links to trigger correctly and close the menu
+ // // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172
+ // onClick: {
+ // close: function () {
+ // if (fluidbook.settings.phonegap === 'ios') {
+ // return !$(this).is('#menu_download,#menu_print');
+ // }
+ // return true;
+ // }, preventDefault: function () {
+ // return false;
+ // },
+ // },
+ //
+ // "extensions": extensions, "offCanvas": {
+ // "position": side, "zposition": "front",
+ // }, "navbar": {
+ // //add: false // Removes main title bars completely
+ // title: "" // Hides the default "Menu" text
+ // }, "rtl": {
+ // "use": "detect" // Auto detect when in RTL mode based on html dir attribute
+ // },
+ //
+ // }, {
+ // offCanvas: {
+ // page: {
+ // noSelector: ['#loader']
+ // }
+ // }
+ // });
+ //
+ // this.menuAPI = this.menu.data('mmenu');
+ //
+ // // Bind API hooks (see http://mmenu.frebsite.nl/documentation/core/off-canvas.html#h4)
+ // this.menuAPI.bind("open:finish", function () {
+ // $('body').addClass('menu-open');
+ // $("nav#menu").addClass('mm-menu_opened');
+ // $this.menuIsOpen = true;
+ //
+ // setInterval(function () {
+ // $this.fluidbook.resize.resizeMenu()
+ // }, 500);
+ //
+ // //$('#q').focus(); // Disabled for now because it triggers the keyboard to open on some mobile devices
+ // });
+ //
+ // this.menuAPI.bind("close:finish", function () {
+ // $('body').removeClass('menu-open');
+ // $this.menuIsOpen = false;
+ // });
+
+
+ $(document).on(this.fluidbook.input.clickEvent, '#menuOpener', function (e) {
+ e.preventDefault();
+ $this.open();
+ });
+
+ // Close menu when a search result is clicked
+ $(document).on(this.fluidbook.input.clickEvent, '#menuSearchResults a', function (e) {
+ $this.closeMenu();
+ });
+
+ // Recalculate available size for menu search results
+ $(this.fluidbook).on('fluidbook.resize', function () {
+ $this.fluidbook.resize.resizeMenu();
+ });
+
+ // Add search and share links to main menu panel
+ $('#menuList').append(this.searchHTML + this.shareLinksHTML);
+
+ // Add scrollbar to main menu
+ $('#menuList > ul, #chapterList').perfectScrollbar({
+ suppressScrollX: true, minScrollbarLength: 40, //maxScrollbarLength: 60
+ });
+
+ $("#menuOverlay").on(this.fluidbook.input.clickEvent, function () {
+ $this.closeMenu();
+ });
+
+ $(this.fluidbook).on('fluidbook.help.show', function () {
+
+ });
},
+
+ open: function () {
+ clearTimeout(this.closeTimeout);
+ $("#menu,#menuOverlay").show();
+ setTimeout(function () {
+ $("#menu").addClass('open');
+ }, 10);
+ },
+
+ closeAll: function () {
+ this.close();
+ },
+
+ close: function () {
+ clearTimeout(this.closeTimeout);
+ $("#menu").removeClass('open');
+ this.closeTimeout = setTimeout(function () {
+ $("#menu,#menuOverlay").hide();
+ }, 500);
+ },
+
+ openSearch: function (q, cb) {
+ if (!this.fluidbook.search.isSearchActive()) {
+ if (!this.fluidbook.settings.searchFullBurger) {
+ this.fluidbook.search.initSearchHints(); // Clears menu and only displays search box
+ this.closeAll(); // Make sure we're on the main panel with the search box
+ }
+ }
+
+
+ if (q !== undefined) {
+ $("#q").val(q);
+ if ($("#menuSearchResults .content").length === 0) {
+ this.fluidbook.search.submitForm();
+ }
+ } else {
+ this.burger.open();
+ $('#q').focus(); // Put cursor in the search field
+ }
+
+ if (cb !== undefined) {
+ cb();
+ }
+ },
+
+ isActive: function () {
+ return $('#menuOpener').is(':visible');
+ },
+
+ getMenuCloseButton: function () {
+ var $this = this, buttonID = 'menuClose';
+
+ // Click handler to close menu
+ $(document).on(this.fluidbook.input.clickEvent, '#' + buttonID, function (e) {
+ e.preventDefault();
+
+ // If the search is active, the close button should clear the search
+ // and return the user to the main menu instead of closing the menu
+ if ($this.fluidbook.search.isSearchActive()) {
+ $this.fluidbook.search.closeSearch();
+ if ($("#horizontalNav").is(':visible')) {
+ $this.closeMenu();
+ }
+ } else {
+ // If we're closing the menu but the search was open and nothing
+ // was searched for, we need to reset the menu...
+ var sHints = $this.fluidbook.search.menuSearchHints,
+ sResults = $this.fluidbook.search.menuSearchResults;
+
+ // Make sure the search really is empty
+ if (sHints && sHints.html().length === 0 && sResults && sResults.html().length === 0) {
+ $this.fluidbook.search.closeSearch();
+ }
+
+ $this.burger.close();
+ }
+ });
+
+ return '<a href="#" id="' + buttonID + '" aria-label="' + $this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape">' + getSpriteIcon('interface-close') + '</a>';
+ },
+
+ getSearch: function () {
+ var search = $("#search");
+
+ var $this = this;
+ var res = '<form action="#" id="searchForm" method="post">';
+ res += '<input id="q" name="q" type="search" value="" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
+ res += this.nav.getLink('nav-search', '#', 'submitSearch');
+ res += '</form>';
+ res += '<div id="menuSearchHints" class="mm-nopanel"></div>';
+ res += '<div id="menuSearchResults" class="mm-nopanel"></div>';
+ search.append(res);
+
+ // Search submit button
+ $(document).on(this.fluidbook.input.clickEvent, '#submitSearch', function (e) {
+ $("#searchForm").submit();
+ e.preventDefault();
+ return false;
+ })
+
+ // Search form handler
+ $(document).on('submit', '#searchForm', function () {
+ $this.fluidbook.search.submitForm();
+ return false;
+ });
+
+ //$("#q").keyup(searchHints);
+ $(document).on('keyup', '#q', function (key) {
+ switch (key.which) {
+ case 13: // Enter key
+ case 37: // Left arrow
+ case 38: // Up arrow
+ case 39: // Right arrow
+ case 40: // Down arrow
+ return; // Ignore these keys
+ default:
+ searchHints();
+ }
+ });
+
+ $(document).on(this.fluidbook.input.clickEvent, ".hint", function () {
+ var e = $("#q").val().split(' ');
+ e.pop();
+ e.push($(this).attr('term'));
+ $("#q").val(e.join(' '));
+ $("#searchForm").submit();
+ return false;
+ })
+
+ // $("#q").blur(function (e) {
+ // setTimeout(function () {
+ // $this.fluidbook.hideSearchHints();
+ // }, 250);
+ // });
+
+ //this.menu.append(search);
+ var searchHTML = search.html();
+ search.remove();
+ return searchHTML;
+ },
+
+ getElement: function () {
+ return $("#menu");
+ },
+
}
\ No newline at end of file
}
this.view.html(help);
- }, initEvents: function () {
+ },
+
+ initEvents: function () {
var $this = this;
$(document).on(this.fluidbook.input.clickEvent, '.icon-help', function (e) {
$this.hide();
}
})
- }, isVisible: function () {
+ },
+
+ isVisible: function () {
return this.view.is(":visible");
- }, show: function (time) {
+ },
+
+ show: function (time) {
this.clearTimeout();
if (time === undefined) {
time = 0;
this.fluidbook.showAllButtons();
$this.view.css('opacity', 1);
}, 50);
+
setTimeout(function () {
$this.resize();
$("#help-illustrations").css('opacity', '1');
$(this.fluidbook).trigger('fluidbook.help.show');
return false;
- }, hide: function () {
+ },
+
+ hide: function () {
this.clearTimeout();
this.fluidbook.interface.checkHidden();
var $this = this;
$(this.fluidbook).trigger('fluidbook.help.hide');
}
return false;
- }, toggle: function () {
+ },
+
+ toggle: function () {
if (this.isVisible()) {
this.hide();
} else {
this.show();
}
- }, resize: function () {
+ },
+
+ resize: function () {
this.view.find('#help-illustrations').css({
transform: ''
var top = (hh - $("#help-illustrations").outerHeight()) / 2;
$("#help-illustrations").css('top', top);
- }, clearTimeout: function () {
+ },
+
+ clearTimeout: function () {
clearTimeout(this.autoTimeout);
},
this.chaptersMenuHTML = '';
this.searchHTML = '';
this.shareLinksHTML = '';
- this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference)
+ this.burger = new FluidbookBurger(this);
this.horizontalNav = $("#horizontalNav");
this._inited = {};
- this.closeTimeout;
+
this.setNav('horizontalNav');
if ($("#iconList").html() !== '') {
this.setNav('menu');
},
initMenu: function () {
- var $this = this, dir = this.fluidbook.l10n.dir, inverted = this.isInverted(),
- side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'right' : 'left';
-
-
- $("#menu").insertAfter('#main');
- $('<div id="menuOverlay"></div>').insertAfter('#menu');
-
- // var extensions = ['pagedim-black', 'position-front'];
- // if (side === 'right') {
- // extensions.push('position-right');
- // }
- //
- // this.menu.mmenu({
- //
- // // Allow #anchor links to trigger correctly and close the menu
- // // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172
- // onClick: {
- // close: function () {
- // if (fluidbook.settings.phonegap === 'ios') {
- // return !$(this).is('#menu_download,#menu_print');
- // }
- // return true;
- // }, preventDefault: function () {
- // return false;
- // },
- // },
- //
- // "extensions": extensions, "offCanvas": {
- // "position": side, "zposition": "front",
- // }, "navbar": {
- // //add: false // Removes main title bars completely
- // title: "" // Hides the default "Menu" text
- // }, "rtl": {
- // "use": "detect" // Auto detect when in RTL mode based on html dir attribute
- // },
- //
- // }, {
- // offCanvas: {
- // page: {
- // noSelector: ['#loader']
- // }
- // }
- // });
- //
- // this.menuAPI = this.menu.data('mmenu');
- //
- // // Bind API hooks (see http://mmenu.frebsite.nl/documentation/core/off-canvas.html#h4)
- // this.menuAPI.bind("open:finish", function () {
- // $('body').addClass('menu-open');
- // $("nav#menu").addClass('mm-menu_opened');
- // $this.menuIsOpen = true;
- //
- // setInterval(function () {
- // $this.fluidbook.resize.resizeMenu()
- // }, 500);
- //
- // //$('#q').focus(); // Disabled for now because it triggers the keyboard to open on some mobile devices
- // });
- //
- // this.menuAPI.bind("close:finish", function () {
- // $('body').removeClass('menu-open');
- // $this.menuIsOpen = false;
- // });
-
-
- $(document).on(this.fluidbook.input.clickEvent, '#menuOpener', function (e) {
- e.preventDefault();
- $this.openMenu();
- });
-
- // Close menu when a search result is clicked
- $(document).on(this.fluidbook.input.clickEvent, '#menuSearchResults a', function (e) {
- $this.closeMenu();
- });
-
- // Recalculate available size for menu search results
- $(this.fluidbook).on('fluidbook.resize', function () {
- $this.fluidbook.resize.resizeMenu();
- });
-
- // Add search and share links to main menu panel
- $('#menuList').append(this.searchHTML + this.shareLinksHTML);
-
- // Add scrollbar to main menu
- $('#menuList > ul, #chapterList').perfectScrollbar({
- suppressScrollX: true, minScrollbarLength: 40, //maxScrollbarLength: 60
- });
-
- $("#menuOverlay").on(this.fluidbook.input.clickEvent, function () {
- $this.closeMenu();
- });
- },
-
- openMenu: function () {
- clearTimeout(this.closeTimeout);
- $("#menu,#menuOverlay").show();
- setTimeout(function () {
- $("#menu").addClass('open');
- },10);
+ this.burger.init();
},
- closeAll: function () {
- this.closeMenu();
- },
-
- closeMenu: function () {
- clearTimeout(this.closeTimeout);
- $("#menu").removeClass('open');
- this.closeTimeout = setTimeout(function () {
- $("#menu,#menuOverlay").hide();
- }, 500);
- },
// getIcon: function (name) {
// var src = 'data/images/' + name + '.';
} else {
return '<a href="' + href + '"' + res + '</a>';
}
- }, getNavFromType: function (navType) {
+ },
+
+ getNavFromType: function (navType) {
switch (navType) {
case 'horizontalNav':
return this.horizontalNav;
- break;
case 'menu':
- return this.menu;
- break;
+ return this.burger.getElement();
default:
console.error('navType ' + navType + ' not found!');
return false;
}
- }, setNav: function (navType) {
+ },
+
+ setNav: function (navType) {
if (typeof navType === 'undefined') {
return false;
// MMenu specific elements
if (navType === 'menu') {
-
- // Use navOrderH (mobile icon order) if it is set
- if (this.fluidbook.settings.navOrderH.length > 0) {
- navOrder = this.fluidbook.settings.navOrderH;
- }
-
- var menuOpener = '<a href="#" id="menuOpener">' + getSpriteIcon('interface-menu') + '<span class="label">' + this.fluidbook.l10n.__('Menu') + '</span></a>';
- $('#main header').append(menuOpener);
-
- // Add holder list element for menu items
- $nav.append('<ul id="menuList"' + v2 + '></ul>');
-
- // Add Search form
- var searchElement = (this.fluidbook.settings.search) ? this.getSearch() : '';
- this.searchHTML = '<div id="menuSearch">' + searchElement + '</div>'; // Save for later so it can be injected after MMenu is rendered
+ this.burger.initNav();
// Horizontal icon nav
} else if (navType === 'horizontalNav') {
-
$nav.append('<ul id="iconList"' + v2 + '></ul>');
-
}
}
} else if (navType === 'menu') {
// Save HTML so it can be added to menu once MMenu is initialised
- this.shareLinksHTML = '<div id="shareLinks"><div class="share-icons">' + this.fluidbook.share.getShareLinks(true, undefined, 'publication') + '</div></div>';
+ this.
burger.shareLinksHTML = '<div id="shareLinks"><div class="share-icons">' + this.fluidbook.share.getShareLinks(true, undefined, 'publication') + '</div></div>';
}
}
}
if (navType === 'menu') {
+ this.burger.init();
- // Copy credits
- var credits = $("footer#credits").clone().attr('id', 'mobile-credits');
- var a = credits.find('a');
- var t = a.text();
- credits.find('a').text(t);
- $("#menuList").append(credits);
-
- // Insert Chapters submenus
- if (this.chaptersMenuHTML !== '') {
- $('#menu_chapters').parent().append(this.chaptersMenuHTML);
- }
-
- // Remove unwanted links from chapters menu
- // For any items that have a submenu, we want to remove the page link
- // from the parent item to make it easier to open the submenu
- $('#chapterList li a').each(function () { // Process all links in the chapters submenu
- if ($(this).siblings('ul').length > 0) { // Check if any have a <ul> element beside them (indicates a submenu)
- // MMenu requires non-link elements to be wrapped in a <span>
- // so we need to first wrap the contents of the link in a span before removing the wrapping <a>
- $(this).contents().wrap('<span></span>').parent().unwrap('a');
- }
- });
-
-
- // If the chapters menu is not cascading, wrap submenu lists in <div>s so that MMenu will show them in the same panel
- if (!this.fluidbook.settings.chaptersCascade) {
-
- // Create a single panel around the chapters
- $('#chapterList').wrap('<div id="chaptersPanel" class="Panel"></div>');
-
- // Tell MMenu not to render any child lists as subpanels (ref: https://github.com/FrDH/jQuery.mmenu/issues/499#issuecomment-170649868)
- $('#chaptersPanel ul').addClass('mm-nopanel');
-
- $('#chapters').wrap('<a href="#chaptersPanel"></a>'); // Link to
-
- //console.log($('#menuList').parent().html());
- }
-
-
- // Add close button to menu
- this.menu.append(this.getMenuCloseButton());
-
- this.initMenu();
this.initEventHandlers();
$(this.fluidbook).trigger('fluidbook.navigation.ready');
});
},
- openSearch: function (q, cb) {
- if (!this.fluidbook.search.isSearchActive()) {
- if (!this.fluidbook.settings.searchFullBurger) {
- this.fluidbook.search.initSearchHints(); // Clears menu and only displays search box
- this.closeAll(); // Make sure we're on the main panel with the search box
- }
- }
-
-
- if (q !== undefined) {
- $("#q").val(q);
- if ($("#menuSearchResults .content").length === 0) {
- this.fluidbook.search.submitForm();
- }
- } else {
- this.menu.openMenu();
- $('#q').focus(); // Put cursor in the search field
- }
-
- if (cb !== undefined) {
- cb();
- }
- },
-
- getMenuCloseButton: function () {
- var $this = this, buttonID = 'menuClose';
-
- // Click handler to close menu
- $(document).on(this.fluidbook.input.clickEvent, '#' + buttonID, function (e) {
- e.preventDefault();
-
- // If the search is active, the close button should clear the search
- // and return the user to the main menu instead of closing the menu
- if ($this.fluidbook.search.isSearchActive()) {
- $this.fluidbook.search.closeSearch();
- if ($("#horizontalNav").is(':visible')) {
- $this.closeMenu();
- }
- } else {
- // If we're closing the menu but the search was open and nothing
- // was searched for, we need to reset the menu...
- var sHints = $this.fluidbook.search.menuSearchHints,
- sResults = $this.fluidbook.search.menuSearchResults;
-
- // Make sure the search really is empty
- if (sHints && sHints.html().length === 0 && sResults && sResults.html().length === 0) {
- $this.fluidbook.search.closeSearch();
- }
-
- $this.closeMenu();
- }
- });
-
- return '<a href="#" id="' + buttonID + '" aria-label="' + $this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape">' + getSpriteIcon('interface-close') + '</a>';
- },
-
- getSearch: function () {
- var search = $("#search");
-
- var $this = this;
- var res = '<form action="#" id="searchForm" method="post">';
- res += '<input id="q" name="q" type="search" value="" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
- res += this.getLink('nav-search', '#', 'submitSearch');
- res += '</form>';
- res += '<div id="menuSearchHints" class="mm-nopanel"></div>';
- res += '<div id="menuSearchResults" class="mm-nopanel"></div>';
- search.append(res);
-
- // Search submit button
- $(document).on(this.fluidbook.input.clickEvent, '#submitSearch', function (e) {
- $("#searchForm").submit();
- e.preventDefault();
- return false;
- })
-
- // Search form handler
- $(document).on('submit', '#searchForm', function () {
- $this.fluidbook.search.submitForm();
- return false;
- });
-
- //$("#q").keyup(searchHints);
- $(document).on('keyup', '#q', function (key) {
- switch (key.which) {
- case 13: // Enter key
- case 37: // Left arrow
- case 38: // Up arrow
- case 39: // Right arrow
- case 40: // Down arrow
- return; // Ignore these keys
- default:
- searchHints();
- }
- });
-
- $(document).on(this.fluidbook.input.clickEvent, ".hint", function () {
- var e = $("#q").val().split(' ');
- e.pop();
- e.push($(this).attr('term'));
- $("#q").val(e.join(' '));
- $("#searchForm").submit();
- return false;
- })
-
- // $("#q").blur(function (e) {
- // setTimeout(function () {
- // $this.fluidbook.hideSearchHints();
- // }, 250);
- // });
-
- //this.menu.append(search);
- var searchHTML = search.html();
- search.remove();
- return searchHTML;
- },
setInterface: function () {
},
burgerActive: function () {
- return $('#menuOpener').is(':visible');
+ return this.burger.isActive();
}
};
projects / fluidbook-html5.git / commitdiff