<symbol id="interface-chevron" viewBox="0 0 512 512">
<path d="m342 179l-175-174-62 62 178 177-178 198 62 65 240-266z"/>
</symbol>
+
+
+ <symbol id="interface-search" viewBox="0 0 512 512">
+ <path d="m194 388c-52 0-101-20-137-57-76-75-76-199 0-274 36-37 85-57 137-57 52 0 101 20 137 57 76 76 76 199 0 274-36 37-85 57-137 57z m0-337c-38 0-74 15-101 42-55 56-55 146 0 202 27 27 63 42 101 42 38 0 74-15 101-42 56-56 56-146 0-202-27-27-63-42-101-42z m119 262l0 0z m173 199c-6 0-13-3-18-8l-170-169c-10-10-10-27 0-37 10-10 27-10 37 0l169 170c10 10 10 26 0 36-5 5-11 8-18 8z"/>
+ </symbol>
+
+
+ <symbol id="interface-index" viewBox="0 0 512 512">
+ <path d="m315 243l-118 0c-9 0-17-7-17-16l0-148c0-9 8-16 17-16l118 0c9 0 17 7 17 16l0 148c0 9-8 16-17 16z m-102-33l86 0 0-114-86 0z m102 239l-118 0c-9 0-17-7-17-16l0-148c0-9 8-16 17-16l118 0c9 0 17 7 17 16l0 148c0 9-8 16-17 16z m-102-33l86 0 0-114-86 0z m283-173l-119 0c-9 0-16-7-16-16l0-148c0-9 7-16 16-16l119 0c9 0 16 7 16 16l0 148c0 9-7 16-16 16z m-102-33l85 0 0-114-85 0z m-259 33l-119 0c-9 0-16-7-16-16l0-148c0-9 7-16 16-16l119 0c9 0 16 7 16 16l0 148c0 9-7 16-16 16z m-102-33l85 0 0-114-85 0z m102 239l-119 0c-9 0-16-7-16-16l0-148c0-9 7-16 16-16l119 0c9 0 16 7 16 16l0 148c0 9-7 16-16 16z m-102-33l85 0 0-114-85 0z"/>
+ </symbol>
+
+
+ <symbol id="interface-chapters" viewBox="0 0 512 512">
+ <path d="m494 126l-312 0c-10 0-18-8-18-18 0-10 8-18 18-18l312 0c10 0 18 8 18 18 0 10-8 18-18 18z m0 148l-312 0c-10 0-18-8-18-18 0-10 8-18 18-18l312 0c10 0 18 8 18 18 0 10-8 18-18 18z m0 148l-312 0c-10 0-18-8-18-18 0-10 8-18 18-18l312 0c10 0 18 8 18 18 0 10-8 18-18 18z m-427-246c-37 0-67-31-67-68 0-37 30-67 67-67 37 0 68 30 68 67 0 37-31 68-68 68z m0-99c-17 0-31 14-31 31 0 17 14 31 31 31 17 0 31-14 31-31 0-17-14-31-31-31z m0 246c-37 0-67-30-67-67 0-37 30-67 67-67 37 0 68 30 68 67 0 37-31 67-68 67z m0-98c-17 0-31 14-31 31 0 17 14 31 31 31 17 0 31-14 31-31 0-17-14-31-31-31z m0 246c-37 0-67-30-67-67 0-37 30-68 67-68 37 0 68 31 68 68 0 37-31 67-68 67z m0-99c-17 0-31 14-31 32 0 17 14 31 31 31 17 0 31-14 31-31 0-18-14-32-31-32z"/>
+ </symbol>
+
+
+ <symbol id="interface-print" viewBox="0 0 512 512">
+ <path d="m460 422l-66 0c-11 0-19-9-19-20 0-11 8-20 19-20l66 0c6 0 12-6 12-13l0-146c0-7-6-13-12-13l-408 0c-7 0-12 6-12 13l0 146c0 7 5 13 12 13l66 0c10 0 19 9 19 20 0 11-9 20-19 20l-66 0c-29 0-52-24-52-53l0-146c0-29 23-53 52-53l408 0c28 0 52 24 52 53l0 146c0 29-24 53-52 53z m-66-245c-10 0-19-9-19-20l0-103-238 0 0 103c0 11-9 20-19 20-11 0-20-9-20-20l0-123c0-11 9-19 20-19l276 0c11 0 20 8 20 19l0 123c0 11-9 20-20 20z m0 320l-276 0c-11 0-20-8-20-19l0-141c0-11 9-20 20-20l276 0c11 0 20 9 20 20l0 141c0 11-9 19-20 19z m-257-39l238 0 0-102-238 0z m1-166l-41 0c-11 0-20-9-20-20 0-11 9-20 20-20l41 0c11 0 20 9 20 20 0 11-9 20-20 20z m197 132l-158 0c-11 0-20-9-20-20 0-11 9-20 20-20l158 0c11 0 20 9 20 20 0 11-9 20-20 20z"/>
+ </symbol>
+
+
+ <symbol id="interface-bookmarks" viewBox="0 0 512 512">
+ <path d="m264 478c-3 0-6-1-9-2-9-5-12-17-7-26 16-27 47-44 84-44l143 0 0-301-51 0c-11 0-19-8-19-19 0-10 8-18 19-18l69 0c10 0 19 8 19 18l0 339c0 10-9 19-19 19l-161 0c-24 0-43 9-52 25-3 6-9 9-16 9z m-16 0c-7 0-13-3-16-9-9-16-28-25-52-25l-161 0c-10 0-19-9-19-19l0-339c0-10 9-18 19-18l169 0c26 0 48 8 63 23 2 2 3 3 5 5 1-2 3-3 5-5 15-15 37-23 63-23 10 0 18 8 18 18 0 11-8 19-18 19-33 0-49 16-49 49 0 10-9 19-19 19-10 0-19-9-19-19 0-33-16-49-49-49l-151 0 0 301 143 0c37 0 69 17 84 44 5 9 2 21-7 26-3 1-6 2-9 2z m8-2c-10 0-19-9-19-19l0-311c0-11 9-19 19-19 10 0 19 8 19 19l0 311c0 10-9 19-19 19z m78-219c-2 0-4 0-7-1-7-3-11-10-11-17l0-187c0-10 8-18 18-18l85 0c10 0 19 8 19 18l0 187c0 7-5 14-12 17-7 3-15 1-20-4l-29-29-29 29c-4 3-9 5-14 5z m43-79c5 0 9 2 13 5l11 11 0-123-48 0 0 123 11-11c3-3 8-5 13-5z"/>
+ </symbol>
+
+
+ <symbol id="interface-help" viewBox="0 0 512 512">
+ <path d="m256 512c-68 0-133-27-181-75-48-48-75-113-75-181 0-68 27-133 75-181 48-48 113-75 181-75 68 0 133 27 181 75 48 48 75 113 75 181 0 68-27 133-75 181-48 48-113 75-181 75z m0-470c-57 0-111 22-151 63-41 40-63 94-63 151 0 57 22 111 63 151 40 41 94 63 151 63 57 0 111-22 151-63 41-40 63-94 63-151 0-57-22-111-63-151-40-41-94-63-151-63z m0 304c-11 0-20 9-20 21 0 11 9 20 20 20 11 0 20-9 20-20 0-12-9-21-20-21z m0-24c-12 0-21-10-21-21l0-53c0-12 9-21 21-21 22 0 40-19 40-41 0-22-18-40-40-40-22 0-40 18-40 40 0 12-10 21-21 21-12 0-21-9-21-21 0-45 37-82 82-82 45 0 82 37 82 82 0 38-26 71-61 80l0 35c0 11-9 21-21 21z"/>
+ </symbol>
+
+
+ <symbol id="interface-fullscreen" viewBox="0 0 512 512">
+ <path d="m303 231c-6 0-11-2-16-6-8-9-8-23 0-31l188-188c8-8 22-8 31 0 8 9 8 22 0 31l-188 188c-4 4-10 6-15 6z m187 0c-12 0-21-10-21-22l0-166-166 0c-12 0-22-9-22-21 0-12 10-22 22-22l187 0c12 0 22 10 22 22l0 187c0 12-10 22-22 22z m-468 281c-6 0-11-2-16-6-8-9-8-22 0-31l188-188c8-8 22-8 31 0 8 9 8 23 0 31l-188 188c-4 4-10 6-15 6z m187 0l-187 0c-12 0-22-10-22-22l0-187c0-12 10-22 22-22 12 0 21 10 21 22l0 166 166 0c12 0 22 9 22 21 0 12-10 22-22 22z"/>
+ </symbol>
+
</svg>
return this.datas.numerotation.indexOf(page) + 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);
+ },
+
+
initSearchHints: function () {
this.menuSearchHints = $('#menuSearchHints');
+ this.hideMenuItems('#menuSearch'); // Hide everything except the search form so we can have space for the hints
- if (this.menuSearchHints.hasClass('mm-hidden')) {
- this.nav.menuAPI.openPanel(this.menuSearchHints, false);
- }
+ this.menuSearchHints.fadeIn(300);
+ // if (this.menuSearchHints.hasClass('mm-hidden')) {
+ // this.nav.menuAPI.openPanel(this.menuSearchHints, false);
+ // }
},
getSearchHints: function (q) {
// this.killLastSearchHint();
// $("#searchHints").html('');
// $("#searchHints").hide();
- this.nav.menuAPI.closeAllPanels(); // Todo: see if we can just close the hints panel. Doesn't seem to work using .closePanel(...). See how built-in search plugin works
+ this.menuSearchHints.html('').hide(); // Clear and hide all hints
+ this.showMenuItems('#menuSearch'); // Show menu items that were hidden previously
},
getLocationToShare: function () {
if (this.datas.phonegap) {
FluidbookNav.prototype = {
initMenu: function () {
- var $this = this,
- navbars = [
- {
- "position": "bottom",
- "content": [
- '<a href="#">[Sharing links]</a>'
- ]
- }
- ];
-
- if (this.fluidbook.datas.search) {
- navbars.push({
- "position": "top",
- "content": [ this.getSearch() ]
- });
- }
+ var $this = this;
+ // navbars = [
+ // {
+ // "position": "bottom",
+ // "content": [
+
// '<a href="#">[Sharing links]</a>'
+ // ]
+ // }
+ // ];
+ //
+ // if (this.fluidbook.datas.search) {
+ // navbars.push({
+ // "position": "top",
+ // "content": [ this.getSearch() ]
+ // });
+ // }
this.menu.mmenu({
//add: false // Removes main title bars completely
title: "" // Hides the default "Menu" text
},
- "navbars": navbars
+ //"navbars": navbars
});
this.menuAPI = this.menu.data('mmenu');
}
res += '>';
if (icon) {
- res += this.getIcon(name);
+ res += getSpriteIcon(name);
}
// Temporary: use the help text as the link text - we probably need a dedicated string for these
// Add holder list element for menu items
this.menu.append('<ul id="menuList"></ul>');
+ // Add Search form
+ $('#menuList').prepend('<li id="menuSearch">' + this.getSearch() + '</li>');
+
try {
var skipHome = (window.localStorage.getItem('home') === '0');
var forceHome = (window.localStorage.getItem('home') === '1');
return false;
})
} else if (icon == 'index') {
- this.addLink('nav-index', '#/index', 'index', 'overview');
+ this.addLink('interface-index', '#/index', 'index', 'overview');
} else if (icon == 'chapters') {
if (this.fluidbook.datas.displayChaptersIcon) {
if (this.fluidbook.datas.chaptersPage != '') {
- this.addLink('nav-sommaire', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters');
+ this.addLink('interface-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters');
} else if (this.fluidbook.datas.chapters.length > 0) {
// this.addLink('nav-sommaire', '#/chapters', 'chapters', 'chapters');
- this.addLink('nav-sommaire', '', 'chapters', 'chapters');
+ this.addLink('interface-chapters', '', 'chapters', 'chapters');
// Get HTML for submenus (appended later)
this.chaptersMenuHTML = this.makeChapterLists(this.fluidbook.datas.chapters);
}
} else if (icon == 'bookmark') {
if (this.fluidbook.datas.bookmark) {
- this.addLink('nav-bookmark', '#/bookmark', 'bookmarks', 'bookmarks');
+ this.addLink('interface-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks');
$("#bookmarks").click(function () {
if (!$this.fluidbook.bookmarks.hasBookmarkedPages()) {
var message = $this.fluidbook.l10n.__("you don't have any bookmarks");
}
} else if (icon == 'pdf' || icon == 'print') {
if ($("#print").length == 0 && (this.fluidbook.datas.print || this.fluidbook.datas.pdf)) {
- this.addLink('nav-print', '#', 'print', '!' + this.fluidbook.l10n.__('print') + ' | ' + this.fluidbook.l10n.__('download pdf'));
+ this.addLink('interface-print', '#', 'print', '!' + this.fluidbook.l10n.__('print') + ' | ' + this.fluidbook.l10n.__('download pdf'));
$("#print").on('click', function () {
$this.fluidbook.print();
return false;
this.addLink('nav-archives', '#/archives', 'archives', '!' + this.fluidbook.datas.archivesLabel);
}
} else if (icon == 'help') {
- this.addLink('nav-help', '#', 'help', 'help');
+ this.addLink('interface-help', '#', 'help', 'help');
} else if (icon == 'zoom' && !this.fluidbook.support.isMobile) {
this.addLink('nav-zoomin', '#', 'zoomin', 'zoom in');
this.addLink('nav-zoomout', '#', 'zoomout', 'zoom out');
return false;
});
} else if (icon == 'fullscreen' && Modernizr.fullscreen && !DATAS.phonegap) {
- this.addLink('nav-fullscreen', '#', 'fullscreen', 'switch between fullscreen and normal');
+ this.addLink('interface-fullscreen', '#', 'fullscreen', 'switch between fullscreen and normal');
$("#fullscreen").click(function () {
screenfull.toggle();
return false;
}
});
- $('#menu').append('<div id="menuSearchResults" class="Panel"></div>');
- $('#menu').append('<div id="menuSearchHints" class="Panel"></div>');
// 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.datas.chaptersCascade) {
//console.log($('#menuList').parent().html());
}
+ // Add close button to menu
+ this.menu.append(this.getMenuCloseButton());
+
this.initMenu();
$(this.fluidbook).trigger('fluidbooknavready');
this.menu.append(l);
this.menu.find("#locales").css('background-image', 'url("images/flags/' + flag + '.png")');
},
+
+ getMenuCloseButton: function () {
+ var $this = this,
+ buttonID = 'menuClose';
+
+ // Click handler to close menu
+ $(document).on('click', '#' + buttonID, function(e) {
+ e.preventDefault();
+ $this.menuAPI.close();
+ });
+
+ return '<a href="#" id="'+ buttonID +'">'+ getSpriteIcon('interface-close') +'</a>';
+ },
+
getSearch: function () {
var $this = this;
var res = '<form action="#" id="searchForm" method="post">';
res += '<input type="text" id="q" name="q" type="search" value="" placeholder="' + this.fluidbook.l10n.__('search') + '" autocorrect="off" autocomplete="off" autocapitalize="off" />';
res += this.getLink('interface-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
return false;
})
- // Search form
+ // Search form handler
$(document).on('submit', '#searchForm', function () {
var q = $("#q").val();
if (q == '') {
return false;
}
- window.location.hash = '/search/' + q;
+ $this.fluidbook.search.find(q, function (results) {
+ // Todo: see FluidbookMenu displayResults function...
+ //$this.displayResults(r, group, cb);
+ console.log('Search results...');
+ console.log(results);
+ });
- if ($this.menuIsOpen) {
- $this.menuAPI.close();
- }
+ // window.location.hash = '/search/' + q;
+ //
+ // if ($this.menuIsOpen) {
+ // $this.menuAPI.close();
+ // }
return false;
});
// MMenu overrides
.mm-menu {
+ &.mm-offcanvas {
+ max-width: 320px;
+ }
+
.mm-navbar {
height: auto;
}
}
+// Menu title bar
+.mm-navbar .mm-title {
+ line-height: 60px;
+ padding: 0 !important;
+}
+
+// < Title bar back arrow
+.mm-btn.mm-prev {
+ height: 60px;
+}
+
+// Make menu items sit properly under title bar
+.mm-panels>.mm-panel>.mm-listview:first-child, .mm-panels>.mm-panel>.mm-navbar+.mm-listview {
+ margin-top: 0;
+}
+
// Submenu arrows < >
.mm-menu .mm-btn:after, .mm-menu .mm-btn:before, .mm-menu .mm-listview>li .mm-next:after {
border-color: @menu-text;
}
-.mm-hasnavbar-top-1 .mm-panels {
- top: 60px;
-}
+//.mm-hasnavbar-top-1 .mm-panels {
+// top: 60px;
+//}
// Page overlay opacity
html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
// Fluidbook menu styles
+#menu {
+ //position: relative;
+ //white-space: nowrap;
+ background-color: @menu-background;
+ color: @menu-text;
+
+ a, span {
+ padding: 10px;
+
+ img {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 0.7em;
+ }
+ }
+
+ //> a {
+ // vertical-align: top;
+ // display: inline-block;
+ //}
+}
+
+#menuOpener {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ color: @menu-text;
+}
+
+#menuSearch {
+ &:after {
+ border: none;
+ }
+}
+
+// Main menu with icons
+#menuList {
+ &:before {
+ height: 0; // Fix spacing with search box
+ }
+
+ .svg-icon {
+ width: 25px;
+ height: 25px;
+ vertical-align: middle;
+ margin-right: 10px;
+ }
+}
+
+
+#menuClose {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 60px;
+ height: 60px;
+ padding: 22px !important; // Controls size of icon and position within the element
+ color: @menu-text;
+ background-color: overlay(@menu-background, #c0c0c0);
+}
+
+
#searchForm {
+ position: relative;
padding: 0;
text-align: left;
+}
- #q {
- background-color: @menu-field-background;
- color: @menu-field-text;
- -webkit-appearance: none;
- border: none;
- height: 60px;
- font-size: 16px;
- padding: 0 2em;
+#q {
+ background-color: @menu-field-background;
+ color: @menu-field-text;
+ -webkit-appearance: none;
+ border: none;
+ height: 60px;
+ font-size: 16px;
+ padding: 0 1em 0 2.8em;
+ width: 260px;
+}
+
+#submitSearch {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ color: @menu-background;
+
+ .svg-icon {
+ width: 20px;
+ height: 20px;
}
}
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff
