From 994fa2553500ef3559f2410bb0eb714b977b5281 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 1 Feb 2018 18:09:40 +0100
Subject: [PATCH] wip #903 @1

---
 js/libs/fluidbook/fluidbook.menu.js | 21 +++++++++++++++++++--
 js/libs/fluidbook/fluidbook.nav.js  |  5 +++--
 style/fluidbook.less                | 15 ++++++++++++++-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 275d1625..f4ebf51c 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -277,6 +277,11 @@ FluidbookMenu.prototype = {
     }
     ,
     openChapters: function (submenu, callback) {
+        if (this.fluidbook.datas.externalChaptersHTML != '') {
+            this.openExternalChapters(callback);
+            return;
+        }
+
         if (this.fluidbook.chapters == undefined) {
             this.fluidbook.chapters = new FluidbookChapters(this.fluidbook, this.fluidbook.datas.chapters);
         }
@@ -302,8 +307,19 @@ FluidbookMenu.prototype = {
         if (callback != undefined) {
             callback();
         }
-    }
-    ,
+    },
+    openExternalChapters: function (callback) {
+        var view = '<div class="caption">' + this.closeButton() + '</div>';
+        view += '<div class="content"><div class="multimediaHolder"><div class="multimediaScale">';
+        view += '<iframe data-width="' + this.fluidbook.datas.externalChaptersSize.width + '" data-height="' + this.fluidbook.datas.externalChaptersSize.height + '"  width="' + this.fluidbook.datas.externalChaptersSize.width + '" height="' + this.fluidbook.datas.externalChaptersSize.height + '" src="data/chapters/index.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>';
+        view += '</div></div></div>';
+
+        var read = ' data-readmode="1"';
+        $("#view").append('<div class="mview" dir="ltr" data-menu="externalchapters"' + read + '>' + view + '</div>');
+        if (callback != undefined) {
+            callback();
+        }
+    },
     openIndex: function (title, group, closeAll, callback) {
         var c = !closeAll ? ' one' : '';
         var index = '<div class="caption">' + this.closeButton(c) + '<h2>' + title + '</h2></div>';
@@ -460,6 +476,7 @@ FluidbookMenu.prototype = {
 
                 break;
             case 'multimedia':
+            case 'externalchapters':
                 var iframe = m.find('iframe,img');
                 var readmode = m.data('readmode') == 1;
 
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 16fe13fa..59f495b4 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -358,10 +358,11 @@ FluidbookNav.prototype = {
                 if (!this.fluidbook.datas.displayChaptersIcon) {
                     continue;
                 }
-                if (this.fluidbook.datas.chaptersPage != '') {
+                if (this.fluidbook.datas.externalChaptersHTML) {
+                    link = this.addLink(navType, 'nav-chapters', '#/chapters', 'chapters', 'chapters', 'chapters');
+                } else if (this.fluidbook.datas.chaptersPage != '') {
                     link = this.addLink(navType, 'nav-chapters', '#/page/' + this.fluidbook.datas.chaptersPage, 'chapters', 'chapters', 'chapters');
                 } else if (this.fluidbook.datas.chapters.length > 0) {
-
                     // NOTE: Currently the MMenu breaks when the non-cascading chapter UL HTML is inserted so it will
                     // be opened in a popup for now. Todo: fix this so it works as a sub panel of it's own
                     if (navType == 'menu' && this.fluidbook.datas.chaptersCascade && !this.fluidbook.datas.displayChaptersPopup) {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 3688e5e8..f2400f76 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1018,7 +1018,7 @@ html.ios body.portrait #interface {
 	-o-transition: all @menutransition;
 	transition: all @menutransition;
 
-	&[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"] {
+	&[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"] {
 		.caption {
 			height: 0;
 			padding: 0;
@@ -1041,6 +1041,19 @@ html.ios body.portrait #interface {
 
 	}
 
+	&[data-menu="externalchapters"] {
+		.caption {
+			a, div {
+				&.button.back {
+					width: 60px;
+					height: 60px;
+					padding: 22px;
+					line-height: 1;
+				}
+			}
+		}
+	}
+
 	&[data-menu="webvideo"], &[data-menu="webvideo"] {
 		iframe {
 			width: 100%;
-- 
2.39.5