From ae80a09d2a89c544d18c6d387ab9ebf5c94ec33c Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 30 Jan 2018 16:06:53 +0100 Subject: [PATCH] wait #1903 @6 --- js/libs/fluidbook/fluidbook.links.js | 11 ++- js/libs/fluidbook/fluidbook.menu.js | 21 +++-- js/libs/fluidbook/menu/fluidbook.chapters.js | 86 +++++++++++++++----- style/fluidbook.less | 15 ++-- style/mixins.less | 37 +++++++++ 5 files changed, 135 insertions(+), 35 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 459029b3..e5a78cf1 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -78,8 +78,10 @@ FluidbookLinks.prototype = { $(document).on('click touchend', '[data-action]', function () { + var map = {'pdf': 'print', 'fullScreen': "fullscreen", 'locales': 'localesContainers'}; var action = $(this).data('action'); + var extra = $(this).data('extra'); if (action == 'share') { // Let share class handle this return true; @@ -89,6 +91,11 @@ FluidbookLinks.prototype = { action = map[action]; } + if (action == 'chapters' && extra) { + window.location.hash='#/chapters/'+extra; + return false; + } + var navitem = $("#horizontalNav_" + action); if (navitem.length > 0) { $(navitem).get(0).click(); @@ -145,7 +152,7 @@ FluidbookLinks.prototype = { } }); - if(animateBookmarks) { + if (animateBookmarks) { var bookmarks = $("#links .bookmark:not([data-enabled])"); $(bookmarks).addClass('animating').css('opacity', 1); TweenMax.to($(bookmarks), $this.fluidbook.datas.linkBlinkTime, { @@ -154,8 +161,6 @@ FluidbookLinks.prototype = { } }); } - - }, zoomLink: function (link) { diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index a86b891e..e7ec7064 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -85,7 +85,7 @@ FluidbookMenu.prototype = { } else if (view == 'multimedia') { this.openMultimedia(param1, cb); } else if (view == 'chapters') { - this.openChapters(cb); + this.openChapters(param1, cb); } else if (view == 'archives') { this.openArchives($("#nav #archives").data('tooltip'), cb); } else if (view == 'text') { @@ -273,16 +273,25 @@ FluidbookMenu.prototype = { } } , - openChapters: function (callback) { + openChapters: function (submenu, callback) { if (this.fluidbook.chapters == undefined) { this.fluidbook.chapters = new FluidbookChapters(this.fluidbook, this.fluidbook.datas.chapters); } - var view = '
' + this.closeButton() + '

' + this.fluidbook.l10n.__('chapters') + '

'; + var v = this.fluidbook.chapters.getView(submenu); + var menuId = 'mview-chapters-' + v.sub; + + var view = '
' + this.closeButton() + '

' + v.title + '

'; view += '
'; - view += this.fluidbook.chapters.getView(); + view += v.view; view += '
'; - $("#view").append('
' + view + '
'); + + var color = ""; + if (v.color != 'default') { + color = ' c_' + v.color; + } + + $("#view").append(''); if (callback != undefined) { callback(); } @@ -487,7 +496,7 @@ FluidbookMenu.prototype = { h = nh * s; } - x = (w - (nw * s) ) / 2; + x = (w - (nw * s)) / 2; y = (h - (nh * s)) / 2; } diff --git a/js/libs/fluidbook/menu/fluidbook.chapters.js b/js/libs/fluidbook/menu/fluidbook.chapters.js index 3569640a..34d0bce2 100644 --- a/js/libs/fluidbook/menu/fluidbook.chapters.js +++ b/js/libs/fluidbook/menu/fluidbook.chapters.js @@ -3,28 +3,34 @@ function FluidbookChapters(fluidbook, chapters) { this.chapters = chapters; this.style = 'classic'; this.cascade = this.fluidbook.datas.chaptersCascade; + this.cascadeEventsInited = false; if (this.fluidbook.datas.mobileChaptersStyle) { this.style = this.fluidbook.datas.mobileChaptersStyle; } - this.html = ''; + this.html = []; + this.titles = {'null': this.fluidbook.l10n.__('chapters')}; + this.colors = {'null': 'default'}; this.lastColor; } FluidbookChapters.prototype = { - getView: function () { - if (this.html == '') { - this.makeView(); + getView: function (sub) { + if (sub == undefined || sub == null || sub == '') { + sub = 'null'; } - return this.html; + if (this.html[sub] == null) { + this.makeView(sub); + } + return {sub:sub,view: this.html[sub], title: this.titles[sub], color: this.colors[sub]}; }, - makeView: function () { - this.makeClassicMenu(); + makeView: function (sub) { + this.makeClassicMenu(sub); if (this.cascade) { - this.makeCascadeMenu(); + this.makeCascadeMenu(sub); } }, - makeCascadeMenu: function () { - var h = $(this.html); + makeCascadeMenu: function (sub) { + var h = $(this.html[sub]); for (var i = 3; i >= 0; i--) { $(h).find('li[data-level=' + i + ']').each(function () { @@ -37,8 +43,15 @@ FluidbookChapters.prototype = { } }); } - this.html = $(h).get(0).outerHTML; + this.html[sub] = $(h).get(0).outerHTML; + + if (!this.cascadeEventsInited) { + this.initCascadeEvents(); + } + }, + initCascadeEvents: function () { + this.cascadeEventsInited = true; if (this.style == 'ina') { $(document).on('click', 'ul.chapters a .right', function (e) { var p = $(this).data('page'); @@ -63,15 +76,49 @@ FluidbookChapters.prototype = { } }); }, - makeClassicMenu: function () { + + makeClassicMenu: function (sub) { + var $this = this; + var base; + var baseLevel = 0; + if (sub == 'null') { + base = this.chapters; + } else { + var base = []; + var vu = false; + var level; + $.each(this.chapters, function (k, v) { + if (!vu) { + if (v.page == '#' + sub) { + vu = true; + level = v.level; + baseLevel = v.level + 1; + $this.titles[sub] = v.label; + $this.colors[sub] = v.color; + } + return true; + } else { + if (v.level > level) { + base.push(v); + } else { + return false; + } + } + }); + } + var $this = this; - this.html = ''; }, - addItem: function (chapter) { + addItem: function (chapter, baseLevel) { + if (baseLevel == undefined) { + baseLevel = 0; + } + if (chapter.label == '--' || chapter.label == '++') { return ""; } @@ -93,6 +140,7 @@ FluidbookChapters.prototype = { var res = ''; var href; + var level = chapter.level - baseLevel; if (chapter.page != '') { var p = this.fluidbook.virtualToPhysical(chapter.page); @@ -105,9 +153,9 @@ FluidbookChapters.prototype = { href = this.cascade ? 'href="#"' : "nohref"; } if (this.style == 'classic') { - res += '
  • '; + res += '
  • '; } else if (this.style == 'ina') { - res += '
  • '; + res += '
  • '; } res += '' + chapter.label + ''; if (href != 'nohref') { diff --git a/style/fluidbook.less b/style/fluidbook.less index 09173c23..3688e5e8 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -303,7 +303,7 @@ body, html { left: -1px; } - .background{ + .background { position: absolute; top: 0px; left: 0px; @@ -316,14 +316,14 @@ body, html { top: 0px; } - &.right{ + &.right { .shade { left: 0px; } } - &.left{ - .shade{ + &.left { + .shade { right: 0px; } } @@ -997,7 +997,7 @@ html.ios body.portrait #interface { } .mview { - background-color: @menu-background; + .menu-color(@menu-background, @menu-button-background); color: @menu-text; position: absolute; top: 0; @@ -1053,7 +1053,6 @@ html.ios body.portrait #interface { text-align: right; a { line-height: 12px; - background-color: @menu-button-background; border-radius: 2px; text-transform: uppercase; margin: 0 0 0 10px; @@ -1115,7 +1114,6 @@ html.ios body.portrait #interface { height: 60px; padding: 22px; line-height: 1; - background-color: @menu-button-background; z-index: 1; .rtl & { @@ -1628,6 +1626,7 @@ ul.chapters { display: block; text-align: left; padding: 5px 32px; + transition: background-color 250ms; .rtl & { text-align: right; } @@ -2263,3 +2262,5 @@ body > input { font-weight: 600; font-style: normal; } + +@import "additional.less"; \ No newline at end of file diff --git a/style/mixins.less b/style/mixins.less index 28cd0a0f..493f641c 100644 --- a/style/mixins.less +++ b/style/mixins.less @@ -19,4 +19,41 @@ -ms-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; -o-transition: all unit(@page-transition-duration*@factor, s) ease-in-out; transition: all unit(@page-transition-duration*@factor, s) ease-in-out; +} + +.menu-color(@base-color) { + @green: max(45, min(255 - 45, green(@base-color))); + @red: max(45, min(255 - 45, red(@base-color))); + @blue: max(45, min(255 - 45, blue(@base-color))); + @secondary: overlay(rgb(@red, @green, @blue), #c0c0c0); + .menu-color-a(@base-color, @secondary); +} + +.menu-color(@base-color,@secondary) { + .menu-color-a(@base-color, @secondary); +} + +.menu-color-a(@background,@button) { + background: @background; + + .fonctions { + a { + background-color: @button; + } + } + + .caption { + div.button, a { + &.back { + background-color: @button; + } + } + } + + .chapters{ + a:hover{ + + background-color: @button; + } + } } \ No newline at end of file -- 2.39.5