$('#menuList > ul, #chapterList').perfectScrollbar({
suppressScrollX: true, minScrollbarLength: 40, //maxScrollbarLength: 60
});
- }, closeMenu: function () {
+ },
+ closeMenu: function () {
this.menuAPI.close();
}, // getIcon: function (name) {
// var src = 'data/images/' + name + '.';
$nav.find("ul #" + before).before(li);
}
return $("#" + elementID).get(0);
- }, getLink: function (name, href, id, title, help, className, showIcon, navType, keyboardShortcut) {
+ },
+ getLink: function (name, href, id, title, help, className, showIcon, navType, keyboardShortcut) {
if (showIcon === undefined) {
showIcon = true;
}
} else {
return '<a href="' + href + '"' + res + '</a>';
}
- }, getNavFromType: function (navType) {
+ },
+ getNavFromType: function (navType) {
switch (navType) {
case 'horizontalNav':
return this.horizontalNav;
console.error('navType ' + navType + ' not found!');
return false;
}
- }, setNav: function (navType) {
+ },
+ setNav: function (navType) {
if (typeof navType === 'undefined') {
return false;
this.fluidbook = fluidbook;
this.featureEnabled = true;
this.enabled = false;
+ // Can be auto, horizontal, burger
+ this.nav = 'auto';
this.init();
}
this.background = '#' + this.background;
}
}
+ this.nav = $_GET.hasOwnProperty('nav') ? $_GET['nav'] : 'auto';
this.action = $_GET.hasOwnProperty('action') ? $_GET['action'] : 'fullscreen';
this.enabled = true;
var $this = this;
if (this.action === 'fullscreen') {
screenfull.toggle();
} else if (this.action === 'tab') {
- window.open(window.location.toString().replace("widget=1", "widget=0"),'_blank');
+ window.open(window.location.toString().replace("widget=1", "widget=0"), '_blank');
}
}
return !active;
},
enable: function () {
-
$("body").addClass('widget');
if (this.background !== false) {
$("#background,#splash").attr('style', 'background-color: ' + this.background + ' !important;background-image:none !important');
}
+ if (this.nav == 'auto') {
+ $('body').removeClass('nav-horizontal').removeClass('nav-burger');
+ } else if (this.nav === 'horizontal') {
+ $('body').addClass('nav-horizontal').removeClass('nav-burger');
+ } else if (this.nav === 'burger') {
+ $('body').removeClass('nav-horizontal').addClass('nav-burger');
+ }
},
disable: function () {
$("body").removeClass('widget');
+ // Background
$("#background,#splash").attr('style', '');
+ // Nav
+ $('body').removeClass('nav-horizontal').removeClass('nav-burger');
},
isWidgetModeActive: function () {
@media all and (max-width: @menu-breakpoint) {
display: none;
}
+
+ .nav-horizontal & {
+ display: block !important;
+ }
+
+ .nav-burger & {
+ display: none !important;
+ }
}
.portrait & .icon.afterSearch {
color: #ccc;
}
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 100%;
+ font-size: 16px;
+ line-height: 1;
+ align-items: center;
+
@media all and (max-width: @menu-breakpoint) {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- height: 100%;
- font-size: 16px;
- line-height: 1;
display: flex;
- align-items: center;
+ }
+
+ .nav-horizontal & {
+ display: none !important;
+ }
+
+ .nav-burger & {
+ display: flex !important;
}
// Positioning for left-to-right Fluidbooks + inverted menu on RTL
#horizontalNav {
- position: absolute;
- top: 50%;
- //transform: translateY(-50%); // Now handled in fluidbook.resize.js due to dynamic scaling in the transform
-
- @media all and (max-width: @menu-breakpoint) {
- display: none;
- }
-
- // Positioning for left-to-right Fluidbooks + inverted menu on RTL
- .ltr &, .rtl.menu-inverted & {
- left: 0;
- right: auto;
- transform-origin: 0 0;
- }
-
- // Positioning for right-to-left Fluidbooks + inverted menu on LTR
- .rtl &, .ltr.menu-inverted & {
- right: 0;
- left: auto;
- transform-origin: 100% 0;
- }
-
- // Locales icon + text link
- &_locales {
- border-left: 1px solid;
- margin-right: 1.5em;
- margin-left: 14px;
-
- .rtl & {
- border-left: none;
- border-right: 1px solid;
- }
-
- .svg-icon {
- margin: 0 7px 0 30px !important;
-
- .rtl & {
- margin: 0 30px 0 7px !important;
- }
- }
- }
-
- // Optional extra image
- &_extra {
- > img {
- vertical-align: middle;
- margin: 0 17px;
- }
- }
+ position: absolute;
+ top: 50%;
+ //transform: translateY(-50%); // Now handled in fluidbook.resize.js due to dynamic scaling in the transform
+
+ @media all and (max-width: @menu-breakpoint) {
+ display: none;
+ }
+
+ .nav-horizontal & {
+ display: block !important;
+ }
+
+ .nav-burger & {
+ display: none !important;
+ }
+
+ // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+ .ltr &, .rtl.menu-inverted & {
+ left: 0;
+ right: auto;
+ transform-origin: 0 0;
+ }
+
+ // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+ .rtl &, .ltr.menu-inverted & {
+ right: 0;
+ left: auto;
+ transform-origin: 100% 0;
+ }
+
+ // Locales icon + text link
+ &_locales {
+ border-left: 1px solid;
+ margin-right: 1.5em;
+ margin-left: 14px;
+
+ .rtl & {
+ border-left: none;
+ border-right: 1px solid;
+ }
+
+ .svg-icon {
+ margin: 0 7px 0 30px !important;
+
+ .rtl & {
+ margin: 0 30px 0 7px !important;
+ }
+ }
+ }
+
+ // Optional extra image
+ &_extra {
+ > img {
+ vertical-align: middle;
+ margin: 0 17px;
+ }
+ }
}
#iconList {
- list-style-type: none;
- margin: 0;
- padding: 0;
- white-space: nowrap;
-
- li {
- display: inline-block;
- vertical-align: middle;
- }
-
- a {
- color: @icon-color;
- display: inline-block;
-
-
- // Styling when help overlay is open
- .help & {
- color: #ccc;
- }
- &.hidden {
- display: none !important;
- opacity: 0;
- width: 0;
- height: 0;
- visibility: hidden;
- margin: 0;
- padding: 0;
- }
- }
-
- img, .svg-icon {
- height: 25px;
- width: auto;
-
- margin: 0 17px;
- color: @icon-color;
- vertical-align: middle;
- transition: color @page-transition-duration;
-
- .help & {
- color: #ccc;
- }
- }
-
- .svg-icon{
- .msie & {
- width: 25px;
- }
- }
-
- &.v2 {
- .svg-icon {
- width: auto;
- height: 20px;
- }
- }
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
+
+ li {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ a {
+ color: @icon-color;
+ display: inline-block;
+
+
+ // Styling when help overlay is open
+ .help & {
+ color: #ccc;
+ }
+
+ &.hidden {
+ display: none !important;
+ opacity: 0;
+ width: 0;
+ height: 0;
+ visibility: hidden;
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ img, .svg-icon {
+ height: 25px;
+ width: auto;
+
+ margin: 0 17px;
+ color: @icon-color;
+ vertical-align: middle;
+ transition: color @page-transition-duration;
+
+ .help & {
+ color: #ccc;
+ }
+ }
+
+ .svg-icon {
+ .msie & {
+ width: 25px;
+ }
+ }
+
+ &.v2 {
+ .svg-icon {
+ width: auto;
+ height: 20px;
+ }
+ }
}
// Small dropdown arrow after locale name
.icon-locales .menu-item-title:after {
- content: '';
- width: 6px;
- height: 6px;
- vertical-align: middle;
- margin: -3px 0 0 10px;
- border-style: solid;
- border-width: 0 2px 2px 0; // Make right angle for arrow
- transform: rotate(45deg); // Rotate to downwards position
- display: inline-block;
-
- .rtl & {
- margin-right: 10px;
- }
+ content: '';
+ width: 6px;
+ height: 6px;
+ vertical-align: middle;
+ margin: -3px 0 0 10px;
+ border-style: solid;
+ border-width: 0 2px 2px 0; // Make right angle for arrow
+ transform: rotate(45deg); // Rotate to downwards position
+ display: inline-block;
+
+ .rtl & {
+ margin-right: 10px;
+ }
}
#afterSearch {
- position: absolute;
- margin: 0 17px;
-
- .c {
- position: relative;
- top: 0px;
- left: 0px;
- z-index: 9;
- display: block;
- }
-
- .links {
- position: absolute;
- top: 0px;
- left: 0px;
- z-index: 10;
-
- .link {
- position: absolute;
- }
- }
-
- @media all and (max-width: @menu-breakpoint) {
- display: none;
- }
+ position: absolute;
+ margin: 0 17px;
+
+ .c {
+ position: relative;
+ top: 0px;
+ left: 0px;
+ z-index: 9;
+ display: block;
+ }
+
+ .links {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: 10;
+
+ .link {
+ position: absolute;
+ }
+ }
+
+ @media all and (max-width: @menu-breakpoint) {
+ display: none;
+ }
}
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff