From: Stephen Cameron Date: Mon, 10 Jul 2017 18:03:11 +0000 (+0200) Subject: WIP #1495 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ff1f7c95c838d8d01826af2463eec9ddac48ca54;p=fluidbook-html5.git WIP #1495 @4 --- diff --git a/_index.html b/_index.html index 95225c66..21343d5d 100644 --- a/_index.html +++ b/_index.html @@ -26,6 +26,7 @@
+ diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index 1b0d34a5..6e33c0f2 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -1,12 +1,13 @@ function FluidbookNav(fluidbook) { this.fluidbook = fluidbook; this._dimensions = this.fluidbook.datas.iconsDimensions; - this._inited = false; this.menuIsOpen = false; - this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference) this.chaptersMenuHTML = ''; - this.setNav(); - + this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference) + this.horizontalNav = $("#horizontalNav"); + this._inited = {}; + this.setNav('horizontalNav'); + this.setNav('menu'); } FluidbookNav.prototype = { @@ -27,7 +28,7 @@ FluidbookNav.prototype = { "pagedim-black" ], "offCanvas": { - "position": "right", + "position": this.fluidbook.datas.menuPosition, "zposition": "front" }, "navbar": { @@ -78,22 +79,25 @@ FluidbookNav.prototype = { // } // return this.fluidbook.loader.getImage(src, this._dimensions[name][0], this._dimensions[name][1]); // }, - addLink: function (name, href, id, title, help, before, c) { - if (this.menu.find('#' + id).length > 0) { + addLink: function (navType, name, href, id, title, help, before, className, showIcon) { + + var $nav = this.getNavFromType(navType); + + if ($nav.find('#' + id).length > 0) { return; } - var l = $(this.getLink(name, href, id, title, help, c)), + var l = $(this.getLink(name, href, id, title, help, className, showIcon, navType)), li = '
  • ' + l[0].outerHTML + '
    • '; if (before == undefined) { - this.menu.find('ul').append(li); + $nav.find('ul').append(li); } else { - this.menu.find("ul #" + before).before(li); + $nav.find("ul #" + before).before(li); } return l; }, - getLink: function (name, href, id, title, help, className, icon) { - if (icon == undefined) { - icon = true; + getLink: function (name, href, id, title, help, className, showIcon, navType) { + if (showIcon == undefined) { + showIcon = true; } var res = ''; @@ -104,12 +108,17 @@ FluidbookNav.prototype = { if (className != undefined) { res += ' class="' + className + '"'; } - // ToDo: Allow tooltips for horizontal icon nav but not for menu version - // if (help != undefined && help != '') { - // res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"'; - // } + + // Only the horizontal icon menu should have the tooltips + if (navType == 'horizontalNav') { + if (help != undefined && help != '') { + res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"'; + } + } + res += '>'; - if (icon) { + + if (showIcon) { res += getSpriteIcon(name); } @@ -124,11 +133,31 @@ FluidbookNav.prototype = { return ''; } }, - setNav: function () { - if (this._inited == true) { + getNavFromType: function (navType) { + switch (navType) { + case 'horizontalNav': + return this.horizontalNav; + break; + case 'menu': + return this.menu; + break; + default: + console.error('navType ' + navType + ' not found!'); + return false; + } + }, + setNav: function (navType) { + + if (typeof navType == 'undefined') { + return false; + } + + var $nav = this.getNavFromType(navType); + + if (this._inited[navType] == true) { return; } - this._inited = true; + this._inited[navType] = true; /* * __('overview') * __('chapters') @@ -141,17 +170,21 @@ FluidbookNav.prototype = { var $this = this; // index, chapters, print, friend, bookmark, pdf, archives, basket, fullscreen, sound, 3d, help - var menuOpener = '' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + ''; - $('#main header').append(menuOpener); + if (navType == 'menu') { - // Add holder list element for menu items - this.menu.append(''); + var menuOpener = '' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + ''; + $('#main header').append(menuOpener); - // Add Search form - if (this.fluidbook.datas.search) { - $('#menuList').prepend(''); + // Add holder list element for menu items + this.menu.append(''); + + // Add Search form + if (this.fluidbook.datas.search) { + $('#menuList').prepend(''); + } } + try { var skipHome = (window.localStorage.getItem('home') === '0'); var forceHome = (window.localStorage.getItem('home') === '1'); @@ -186,7 +219,7 @@ FluidbookNav.prototype = { } try { if (homeURL != '') { - link = this.addLink('nav-home', homeURL, 'home', 'home', 'home'); + link = this.addLink(navType, 'nav-home', homeURL, 'home', 'home', 'home'); } } catch (err) { @@ -201,71 +234,77 @@ FluidbookNav.prototype = { return false; }) } else if (icon == 'index') { - link = this.addLink('interface-index', '#/index', 'index', 'overview', 'overview'); + link = this.addLink(navType, 'interface-index', '#/index', 'index', 'overview', 'overview'); } else if (icon == 'chapters') { if (this.fluidbook.datas.displayChaptersIcon) { if (this.fluidbook.datas.chaptersPage != '') { - link = this.addLink('interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters'); - } else if (this.fluidbook.datas.chapters.length > 0) { + link = this.addLink(navType, 'interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters'); + } else if (navType == 'menu' && this.fluidbook.datas.chapters.length > 0) { // this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters'); - link = this.addLink('interface-chapters', '', 'chapters', 'chapters', 'chapters'); + link = this.addLink(navType, 'interface-chapters', '', 'chapters', 'chapters', 'chapters'); // Get HTML for submenus (appended later) this.chaptersMenuHTML = this.makeChapterLists(this.fluidbook.datas.chapters); } } - // Sharing icons - this may contain many different icons + // Sharing icons - this may contain many different icons } else if (icon == 'friend') { - // if (this.fluidbook.datas.share) { - // link = this.addLink('nav-friend', '#/share', 'share', 'share'); - // $("#share").click(function () { - // if ($this.fluidbook.datas.phonegap != 'android') { - // return true; - // } - // $this.fluidbook.intentShare(); - // return false; - // }); - // } - - var shareLinks = {}, - shareHTML = ''; - - if (this.fluidbook.datas.friend) { - shareLinks['email'] = 'E-mail'; - } - if (this.fluidbook.datas.facebook) { - shareLinks['facebook'] = 'Facebook'; - } - if (this.fluidbook.datas.twitter) { - shareLinks['twitter'] = 'Twitter'; - } - if (this.fluidbook.datas.googleplus) { - shareLinks['googleplus'] = 'Google Plus'; - } - if (this.fluidbook.datas.linkedin) { - shareLinks['linkedin'] = 'LinkedIn'; - } - if (this.fluidbook.datas.viadeo) { - shareLinks['viadeo'] = 'Viadeo'; - } - // Generate links - for (var shareType in shareLinks) { - if (shareLinks.hasOwnProperty(shareType)) { // Ensure we don't get inherited properties - shareHTML += ''; + if (navType == 'horizontalNav') { + + if (this.fluidbook.datas.share) { + link = this.addLink(navType, 'nav-friend', '#/share', 'share', 'share'); + $("#share").click(function () { + if ($this.fluidbook.datas.phonegap != 'android') { + return true; + } + $this.fluidbook.intentShare(); + return false; + }); + } + + } else if (navType == 'menu') { + + var shareLinks = {}, + shareHTML = ''; + + if (this.fluidbook.datas.friend) { + shareLinks['email'] = 'E-mail'; + } + if (this.fluidbook.datas.facebook) { + shareLinks['facebook'] = 'Facebook'; + } + if (this.fluidbook.datas.twitter) { + shareLinks['twitter'] = 'Twitter'; + } + if (this.fluidbook.datas.googleplus) { + shareLinks['googleplus'] = 'Google Plus'; + } + if (this.fluidbook.datas.linkedin) { + shareLinks['linkedin'] = 'LinkedIn'; + } + if (this.fluidbook.datas.viadeo) { + shareLinks['viadeo'] = 'Viadeo'; + } + + // Generate links + for (var shareType in shareLinks) { + if (shareLinks.hasOwnProperty(shareType)) { // Ensure we don't get inherited properties + shareHTML += ''; + } } - } - // Append to menu - this.menu.find('ul').append(''); + // Append to menu + this.menu.find('ul').append(''); + } } else if (icon == 'bookmark') { if (this.fluidbook.datas.bookmark) { - link = this.addLink('interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks'); + link = this.addLink(navType, 'interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks'); $("#bookmarks").click(function () { if (!$this.fluidbook.bookmarks.hasBookmarkedPages()) { var message = $this.fluidbook.l10n.__("you don't have any bookmarks"); @@ -281,7 +320,7 @@ FluidbookNav.prototype = { } } else if (icon == 'pdf') { if ($("#download").length == 0 && this.fluidbook.datas.pdf) { - link = this.addLink('interface-download', '#', 'download', 'download', 'download'); + link = this.addLink(navType, 'interface-download', '#', 'download', 'download', 'download'); $("#download").on('click', function () { $this.fluidbook.print(); return false; @@ -289,7 +328,7 @@ FluidbookNav.prototype = { } } else if (icon == 'print') { if ($("#print").length == 0 && this.fluidbook.datas.print) { - link = this.addLink('interface-print', '#', 'print', 'print', 'print'); + link = this.addLink(navType, 'interface-print', '#', 'print', 'print', 'print'); $("#print").on('click', function () { $this.fluidbook.print(); return false; @@ -301,15 +340,15 @@ FluidbookNav.prototype = { } } else if (icon == 'archives') { if (this.fluidbook.datas.archivesLink != '') { - link = this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); + link = this.addLink(navType, 'nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); } else if (this.fluidbook.datas.externalArchives != '') { - link = this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); + link = this.addLink(navType, 'nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); } } else if (icon == 'help') { - link = this.addLink('interface-help', '#', 'help', 'help', 'help'); + link = this.addLink(navType, 'interface-help', '#', 'help', 'help', 'help'); } else if (icon == 'zoom' && !this.fluidbook.support.isMobile) { - link = this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in'); - link = this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out'); + link = this.addLink(navType, 'nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in'); + link = this.addLink(navType, 'nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out'); $("#zoomin").click(function (e) { $this.fluidbook.desktop.clickZoom(e, 'in'); @@ -321,7 +360,7 @@ FluidbookNav.prototype = { return false; }); } else if (icon == 'fullscreen' && Modernizr.fullscreen && !DATAS.phonegap) { - link = this.addLink('interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal'); + link = this.addLink(navType, 'interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal'); $("#fullscreen").click(function () { $this.menuAPI.close(); screenfull.toggle(); @@ -334,6 +373,8 @@ FluidbookNav.prototype = { } } + + // Todo: handle search icon in horizontal menu only... // if (this.fluidbook.datas.search) { // this.setSearch(); // } @@ -342,43 +383,49 @@ FluidbookNav.prototype = { } this.setInterface(); - // Insert Chapters submenus - if (this.chaptersMenuHTML != '') { - $('#chapters').parent().append(this.chaptersMenuHTML); - } + if (navType == 'menu') { - // 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