]> _ Git - fluidbook-html5.git/commitdiff
wait #1903 @6
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 30 Jan 2018 15:06:53 +0000 (16:06 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 30 Jan 2018 15:06:53 +0000 (16:06 +0100)
js/libs/fluidbook/fluidbook.links.js
js/libs/fluidbook/fluidbook.menu.js
js/libs/fluidbook/menu/fluidbook.chapters.js
style/fluidbook.less
style/mixins.less

index 459029b39aabded633ec76dfcf1e76359e5d45d4..e5a78cf185bbeb8a3f01157f8a13360c06cfabcd 100644 (file)
@@ -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) {
index a86b891eaf6898fe83836ec06933c15260367880..e7ec70647889e34e54e40502455019c6888939d8 100644 (file)
@@ -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 = '<div class="caption">' + this.closeButton() + '<h2>' + this.fluidbook.l10n.__('chapters') + '</h2></div>';
+        var v = this.fluidbook.chapters.getView(submenu);
+        var menuId = 'mview-chapters-' + v.sub;
+
+        var view = '<div class="caption">' + this.closeButton() + '<h2>' + v.title + '</h2></div>';
         view += '<div class="content">';
-        view += this.fluidbook.chapters.getView();
+        view += v.view;
         view += '</div>';
-        $("#view").append('<div class="mview" data-menu="chapters">' + view + '</div>');
+
+        var color = "";
+        if (v.color != 'default') {
+            color = ' c_' + v.color;
+        }
+
+        $("#view").append('<div id="' + menuId + '" class="mview' + color + '" data-menu="chapters">' + view + '</div>');
         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;
                 }
 
index 3569640aa30c19a9299a544135a3b053426ea357..34d0bce2f1442643a052da1d553a6d93f1dfd82e 100644 (file)
@@ -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 = '<ul class="chapters">';
-        $.each(this.chapters, function (k, v) {
-            $this.html += $this.addItem(v);
+        this.html[sub] = '<ul class="chapters">';
+        $.each(base, function (k, v) {
+            $this.html[sub] += $this.addItem(v, baseLevel);
         });
-        this.html += '</ul>';
+        this.html[sub] += '</ul>';
     },
-    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 += '<li data-level="' + chapter.level + '"><a ' + href + ' class="level' + chapter.level + '">';
+            res += '<li data-level="' + level + '"><a ' + href + ' class="level' + level + '">';
         } else if (this.style == 'ina') {
-            res += '<li style="background-color:#' + color + ';" data-level="' + chapter.level + '"><a ' + href + ' class="nodark level' + chapter.level + '">';
+            res += '<li style="background-color:#' + color + ';" data-level="' + level + '"><a ' + href + ' class="nodark level' + level + '">';
         }
         res += '<span>' + chapter.label + '</span>';
         if (href != 'nohref') {
index 09173c23058c8832111d1109b825e40a8927383f..3688e5e8817fb99a5d2ffa885f2188808697afa0 100644 (file)
@@ -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
index 28cd0a0f019adf38be793e976609bfe8a89993e8..493f641c51b04cafc0fe998580c95d47ca2782d3 100644 (file)
        -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