From: Stephen Cameron Date: Mon, 10 Jul 2017 10:11:07 +0000 (+0200) Subject: Merge branch 'master' into burgermenu X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ddbd91f6d8f2803098d7304b242d2cb0228feb79;p=fluidbook-html5.git Merge branch 'master' into burgermenu # Conflicts: # js/libs/fluidbook/fluidbook.nav.js # style/fluidbook.less --- ddbd91f6d8f2803098d7304b242d2cb0228feb79 diff --cc js/libs/fluidbook/fluidbook.js index f5af0018,10d8cf9e..7b46c347 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@@ -711,61 -710,13 +711,65 @@@ Fluidbook.prototype = return this.datas.numerotation[page - 1]; }, virtualToPhysical: function (page) { - return this.datas.numerotation.indexOf(page) + 1; + var i=this.datas.numerotation.indexOf(page); + if(i==-1){ + return false; + } + return i + 1; }, + hideMenuItems: function (exception) { + exception = exception || ''; + $('#menuList > ul > li').not(exception).fadeOut(100); + }, + + showMenuItems: function (exception) { + exception = exception || ''; + $('#menuList > ul > li').not(exception).fadeIn(300); + }, + + initSearchResults: function () { + this.menuSearchResults = $('#menuSearchResults'); + this.resizeSearchResults(); + this.menuSearchResults.hide(); + }, + + resizeSearchResults: function () { + + //console.warn('calling resizeSR'); + //console.log('menu open?', this.nav.menuIsOpen); + + if (!fluidbook.nav.menuIsOpen) return false; + + var wh = $(window).height(), + formHeight = $('#searchForm').height(); + marginTop = marginBottom = 50, + maxHeight = wh - formHeight - marginTop - marginBottom; + + // Search results element may not exist when resize is called + if (fluidbook.menuSearchResults == undefined) { + fluidbook.initSearchResults(); + return false; // initSearchResults will call this resize function anyway + } + + // Set max-height for search results section (using CSS vh units was unreliable) + fluidbook.menuSearchResults.css('maxHeight', maxHeight); + fluidbook.menuSearchResults.perfectScrollbar('update'); + }, + + initSearchHints: function () { + + this.menuSearchHints = $('#menuSearchHints'); + this.hideMenuItems('#menuSearch'); // Hide everything except the search form so we can have space for the hints + + this.menuSearchHints.fadeIn(300); + + this.initSearchResults(); + + // if (this.menuSearchHints.hasClass('mm-hidden')) { + // this.nav.menuAPI.openPanel(this.menuSearchHints, false); + // } + }, getSearchHints: function (q) { var $this = this; diff --cc js/libs/fluidbook/fluidbook.nav.js index b9cdbb6b,1792d367..90f6c2ac --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@@ -10,86 -7,32 +10,88 @@@ function FluidbookNav(fluidbook) } FluidbookNav.prototype = { - getIcon: function (name) { - var src = 'data/images/' + name + '.'; - if (this.fluidbook.support.SVG) { - src += 'svg'; - } else { - src += 'png'; - } - if (this._dimensions[name] == undefined) { - return ''; - } - return this.fluidbook.loader.getImage(src, this._dimensions[name][0], this._dimensions[name][1]); + initMenu: function () { + var $this = this; + + 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: { + preventDefault: function() { + $this.menuAPI.close(); + } + }, + + "extensions": [ + "pagedim-black" + ], + "offCanvas": { + "position": "right", + "zposition": "front" + }, + "navbar": { + //add: false // Removes main title bars completely + title: "" // Hides the default "Menu" text + } + }); + + 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'); + $this.menuIsOpen = true; + + $('#q').focus(); + }); + + this.menuAPI.bind("close:finish", function () { + $('body').removeClass('menu-open'); + $this.menuIsOpen = false; + }); + + + $(document).on('click', '#menuOpener', function (e) { + e.preventDefault(); + $this.menuAPI.open(); + }); + + // Close menu when a search result is clicked + $(document).on('click', '#menuSearchResults a', function (e) { + $this.menuAPI.close(); + }); + + // Recalculate available size for menu search results + $(window).on('fluidbookresize', fluidbook.resizeSearchResults); + }, - addLink: function (name, href, id, help, before, c) { - if ($("#nav").find('#' + id).length > 0) { + // getIcon: function (name) { + // var src = 'data/images/' + name + '.'; + // if (this.fluidbook.support.SVG) { + // src += 'svg'; + // } else { + // src += 'png'; + // } + // if (this._dimensions[name] == undefined) { + // return ''; + // } + // 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) { return; } - var l = '
  • ' + this.getLink(name, href, id, title, help, c) + '
    • '; - var l = $(this.getLink(name, href, id, help, c)); ++ var l = $(this.getLink(name, href, id, title, help, c)), ++ li = '
  • ' + l[0].outerHTML + '
    • '; if (before == undefined) { - this.menu.find('ul').append(l); - $("#nav").append(l); ++ this.menu.find('ul').append(li); } else { - this.menu.find("ul #" + before).before(l); - $("#nav #" + before).before(l); ++ this.menu.find("ul #" + before).before(li); } + return l; }, - - getLink: function (name, href, id, help, className, icon) { + getLink: function (name, href, id, title, help, className, icon) { if (icon == undefined) { icon = true; } @@@ -107,19 -48,10 +109,19 @@@ } res += '>'; if (icon) { - res += this.getIcon(name); + res += getSpriteIcon(name); + } + - if (help != undefined && help != '') { ++ if (title != undefined && title != '') { + res += ' ' + this.fluidbook.l10n.__(title); + } + + // If there's no link defined, return the text an icon wrapped in a (useful for MMenu) + if (href == '') { + return ''; + } else { + return ''; } - res += ''; - return res; }, setNav: function () { if (this._inited == true) { @@@ -173,7 -103,7 +183,7 @@@ } try { if (homeURL != '') { - this.addLink('nav-home', homeURL, 'home', 'home', 'home'); - link = this.addLink('nav-home', homeURL, 'home', 'home'); ++ link = this.addLink('nav-home', homeURL, 'home', 'home', 'home'); } } catch (err) { @@@ -188,71 -118,29 +198,71 @@@ return false; }) } else if (icon == 'index') { - this.addLink('interface-index', '#/index', 'index', 'overview', 'overview'); - link = this.addLink('nav-index', '#/index', 'index', 'overview'); ++ link = this.addLink('interface-index', '#/index', 'index', 'overview', 'overview'); } else if (icon == 'chapters') { if (this.fluidbook.datas.displayChaptersIcon) { if (this.fluidbook.datas.chaptersPage != '') { - this.addLink('interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters'); - link = this.addLink('nav-sommaire', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters'); ++ link = this.addLink('interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters'); } else if (this.fluidbook.datas.chapters.length > 0) { - link = this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters'); + // this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters'); - this.addLink('interface-chapters', '', 'chapters', 'chapters', 'chapters'); ++ link = this.addLink('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 } 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; - }); + // if (this.fluidbook.datas.share) { - // this.addLink('nav-friend', '#/share', 'share', '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 += ''; + } + } + + // Append to menu + this.menu.find('ul').append(''); + + } else if (icon == 'bookmark') { if (this.fluidbook.datas.bookmark) { - this.addLink('interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks'); - link = this.addLink('nav-bookmark', '#/bookmark', 'bookmarks', 'bookmarks'); ++ link = this.addLink('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"); @@@ -266,17 -154,9 +276,17 @@@ } }); } - } else if (icon == 'pdf' || icon == 'print') { - if ($("#print").length == 0 && (this.fluidbook.datas.print || this.fluidbook.datas.pdf)) { - link = this.addLink('nav-print', '#', 'print', '!' + this.fluidbook.l10n.__('print') + ' | ' + this.fluidbook.l10n.__('download pdf')); + } else if (icon == 'pdf') { + if ($("#download").length == 0 && this.fluidbook.datas.pdf) { - this.addLink('interface-download', '#', 'download', 'download', 'download'); ++ link = this.addLink('interface-download', '#', 'download', 'download', 'download'); + $("#download").on('click', function () { + $this.fluidbook.print(); + return false; + }); + } + } else if (icon == 'print') { + if ($("#print").length == 0 && this.fluidbook.datas.print) { - this.addLink('interface-print', '#', 'print', 'print', 'print'); ++ link = this.addLink('interface-print', '#', 'print', 'print', 'print'); $("#print").on('click', function () { $this.fluidbook.print(); return false; @@@ -288,15 -168,15 +298,15 @@@ } } else if (icon == 'archives') { if (this.fluidbook.datas.archivesLink != '') { - this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); - link = this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel); ++ link = this.addLink('nav-archives', this.fluidbook.datas.archivesLink, 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); } else if (this.fluidbook.datas.externalArchives != '') { - this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); - link = this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel); ++ link = this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel, '!' + this.fluidbook.datas.archivesLabel); } } else if (icon == 'help') { - this.addLink('interface-help', '#', 'help', 'help', 'help'); - link = this.addLink('nav-help', '#', 'help', ''); ++ link = this.addLink('interface-help', '#', 'help', 'help', 'help'); } else if (icon == 'zoom' && !this.fluidbook.support.isMobile) { - this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in'); - this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out'); - link = this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in'); - link = this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out'); ++ link = this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in', 'zoom in'); ++ link = this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out', 'zoom out'); $("#zoomin").click(function (e) { $this.fluidbook.desktop.clickZoom(e, 'in'); @@@ -308,18 -188,21 +318,22 @@@ return false; }); } else if (icon == 'fullscreen' && Modernizr.fullscreen && !DATAS.phonegap) { - this.addLink('interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal'); - link = this.addLink('nav-fullscreen', '#', 'fullscreen', 'switch between fullscreen and normal'); ++ link = this.addLink('interface-fullscreen', '#', 'fullscreen', 'full screen', 'switch between fullscreen and normal'); $("#fullscreen").click(function () { + $this.menuAPI.close(); screenfull.toggle(); return false; }) } + + if (!visible) { + $(link).addClass('hidden'); + } } - if (this.fluidbook.datas.search) { - this.setSearch(); - } + // if (this.fluidbook.datas.search) { + // this.setSearch(); + // } if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.themeEnableAfterSearch) { this.setAfterSearch(); } @@@ -370,34 -216,12 +384,36 @@@ return; } - $("#nav").append(l); - $("#nav #locales").css('background-image', 'url("images/flags/' + flag + '.png")'); + this.menu.append(l); + this.menu.find("#locales").css('background-image', 'url("images/flags/' + flag + '.png")'); + + return l; }, - setSearch: function () { + + getMenuCloseButton: function () { + var $this = this, + buttonID = 'menuClose'; + + // Click handler to close menu + $(document).on('click', '#' + 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.isSearchActive()) { + $this.fluidbook.closeSearch(); + } else { + $this.menuAPI.close(); + } + + + }); + + return ''+ getSpriteIcon('interface-close') +''; + }, + + getSearch: function () { var $this = this; var res = '
    '; res += ''; @@@ -570,43 -269,6 +586,44 @@@ $('#interface').append(res); $(document).on('click', '#next', goNextPage); $(document).on('click', '#previous', goPreviousPage); + }, + + // Build nested lists from chapters + makeChapterLists: function (chapters) { + + var currentLevel = 0, + loopIndex = 0, + html = '
      '; + + // Loop through all chapters and build new ULs based on level/depth + chapters.forEach(function(chapter) { + loopIndex++; + + if (chapter.level > currentLevel) { + html += '
        '; // Going one level deeper, start new list + // It's assumed that consecutive items will never be more than 1 level deeper than the previous + } else if (chapter.level < currentLevel) { + var levelDifference = currentLevel - chapter.level; + // We need to close a list for every level change (eg. jumping from level 5 back to level 2) + for (var i = 0; i < levelDifference; i++) { + html += '
      '; // Going one level higher, end previous list + } + } else { + if (loopIndex > 1) { // On the first run through, there's nothing to close + html += ''; // Same level so close off current item + } + } + + currentLevel = chapter.level; + + var page = (this.fluidbook.virtualToPhysical(chapter.page)); + + html += '
    • ' + chapter.label + ''; + }); + + html += '
    '; + + return html; } - }; + }; + diff --cc style/fluidbook.less index ab1e0ebc,ed549d74..9e54227e --- a/style/fluidbook.less +++ b/style/fluidbook.less @@@ -315,8 -319,8 +319,8 @@@ body, html display: none; } --/* Nav */ -#nav #locales { ++/* Nav */ // #nav ? +#menu #locales { display: inline-block; width: 22px; height: 17px; @@@ -971,92 -1029,119 +1029,121 @@@ form input[type="text"], form input[typ } } - .doubleThumb { - height: @thumb-height; - &.left { - margin-right: 10px; + } + + .doubleThumb { + height: @thumb-height; + &.left { + margin-right: 10px; + } + &.simple { + .overlay { + width: 100px; } - &.simple { - .overlay { - width: 100px; - } - &.left { - .hits { - left: -50px; - } - } - &.right { - .hits { - left: 50px; - } + &.left { + .hits { + left: -50px; } - } - .overlay { - background-color: rgba(0, 0, 0, 0.5); - position: absolute; - top: 0px; - left: 0px; - width: 200px; - z-index: 4; + &.right { + .hits { + left: 50px; + } } + } - @hits-top: (@thumb-height - 26) / 2; + .overlay { + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + top: 0px; + left: 0px; + width: 200px; + z-index: 4; + } - .hits { - position: relative; - display: inline; + @hits-top: (@thumb-height - 26) / 2; - z-index: 5; - font-size: 12px; - height: 26px; - top: @hits-top; - &.yes { - padding: 5px; - border-radius: 1px; - color: @menu-text; - background-color: @menu-background; - } + .hits { + position: relative; + display: inline; + + z-index: 5; + font-size: 12px; + height: 26px; + top: @hits-top; + &.yes { + padding: 5px; + border-radius: 1px; + color: @menu-text; + background-color: @menu-background; } } + } - .padding { - height: 1px; + .padding { + height: 1px; + } + + .thumb { + position: absolute; + top: 0px; + left: 0px; - font-size: 12px; + + .bookmark { + width: 35px; + height: 35px; + z-index: 2; } - .thumb { - position: absolute; - top: 0px; - left: 0px; - img { - width: 100px; - height: @thumb-height; - background: #fff - } - .number { - text-align: center; - display: block; - margin: 0; - padding: 5px 0 0 0; - max-width: 100px; - font-size: 14px; - font-weight: bold; - line-height: 1; - } + .img { + width: 100px; + height: @thumb-height; + background-color: transparent; + position: relative; + z-index: 1; + background-blend-mode: normal, overlay; + background-repeat: no-repeat; + } + .number { + text-align: center; + display: block; - font-family: Arial, Helvetica, sans-serif; - margin: 5px 0 0 0; ++ margin: 0; ++ padding: 5px 0 0 0; + max-width: 100px; + position: relative; + z-index: 1; ++ font-size: 14px; ++ font-weight: bold; ++ line-height: 1; + } + &.right { + left: 100px; + } + &.simple { + width: 100px; &.right { - left: 100px; - } - &.simple { - width: 100px; - &.right { - margin-left: 110px; - } - } - &.left { - margin-right: 110px; + margin-left: 110px; } + } + &.left { + margin-right: 110px; + } + @shade-height: unit(@thumb-height+22, px); + &:before { + position: absolute; + content: ""; + background-image: url("../images/icon-shad.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + opacity: 0.65; + top: -5px; + left: -5px; + width: 111px; + height: @shade-height; + z-index: 0; } + } /* Search */