wait #7347 @4

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index ccf46509b886f225ec05169f06b46ea7a7f487e7..5d036fc98c611c0447711f2e767052f6f6b5985e 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -1062,7 +1062,9 @@ Fluidbook.prototype = {
         $("#currentDoublePage").css({
             translateX: offset
         });
-    }, displayLoader: function () {
+    },
+
+    displayLoader: function () {
         $("#loader").addClass('show');
         if (!this.support.isMobile) {
             $('body').addClass('loading');
@@ -1243,11 +1245,16 @@ Fluidbook.prototype = {
         this.contentlock.unlockCurrentPage();
     },
 
-    initO3DV: function (containerID, model) {
+    initO3DV: function (containerID, model, bgc) {
+        let $this = this;
         // See https://kovacsv.github.io/Online3DViewer/Page_Usage.html
 
+        this.displayLoader();
+
         let parentDiv = document.getElementById(containerID);
 
+        let bgca = colorValues(bgc);
+
         // initialize the viewer with the parent element and some parameters
         let viewer = new OV.EmbeddedViewer(parentDiv, {
             // camera : new OV.Camera (
@@ -1256,7 +1263,7 @@ Fluidbook.prototype = {
             //     new OV.Coord3D (0.0, 1.0, 0.0),
             //     45.0
             // ),
-            backgroundColor: new OV.RGBAColor(255, 255, 255, 0), // defaultColor : new OV.RGBColor (200, 200, 200),
+            backgroundColor: new OV.RGBAColor(bgca[0], bgca[1], bgca[2], Math.round(bgca[3] * 255)), // defaultColor : new OV.RGBColor (200, 200, 200),
             // edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
             // environmentSettings : new OV.EnvironmentSettings (
             //     [
@@ -1274,8 +1281,20 @@ Fluidbook.prototype = {
         // load a model providing model urls
         viewer.LoadModelFromUrlList(['data/links/' + model,]);
         $("#" + containerID).data('o3dv', viewer);
-        setInterval(function () {
+
+        let i = setInterval(function () {
             try {
+                if ($("#" + containerID + " canvas").length === 0) {
+                    $this.hideLoader();
+                    clearInterval(i);
+                    return;
+                }
+                if ($("#" + containerID + " canvas:visible").length > 0) {
+                    $this.hideLoader();
+                    clearInterval(i);
+                } else {
+                    $this.displayLoader();
+                }
                 viewer.Resize();
             } catch (e) {
 

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 3dee765f9fbacb666a24b50e132143c44ba99a1e..1709969b14a711e075dec481a806be18ffa179c3 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -255,13 +255,14 @@ FluidbookMenu.prototype = {
         var hash = '#/o3d/' + o3d;
         var a = $('a[href="' + hash + '"]');
         var model = $(a).attr('data-model');
+        var bgc = $(a).attr('data-background-color');
         var view = this.getCaption('', $(a).attr('data-popup-close') === null || $(a).attr('data-popup-close') === undefined || $(a).attr('data-popup-close') === '1');
 
         this.fluidbook.stats.trackEvent($(a).data('stats-type'), 'show', $(a).data('stats-name'));
-        view += '<div class="content"><div id="o3dv_' + o3d + '" class="o3dviewer"></div></div>';
+        view += '<div class="content"><div id="o3dv_' + o3d + '" class="o3dviewer" style="background-color:' + bgc + ';"></div></div>';
         this.viewWrap(view, 'o3d', '', '', false, hash);
 
-        this.fluidbook.initO3DV('o3dv_' + o3d, model);
+        this.fluidbook.initO3DV('o3dv_' + o3d, model, 'transparent');
 
         if (callback != undefined) {
             callback();
@@ -982,11 +983,6 @@ FluidbookMenu.prototype = {
                 w = ww * 0.9;
                 h = hh * 0.9;
                 forceHeight = true;
-
-                let o3dv = m.find('.o3dviewer');
-                console.log(o3dv);
-                //o3dv.data('viewer').Resize(w, h);
-
                 break;
             case 'webvideo':
                 w = Math.max(ww * 0.8, 600);

diff --git a/js/libs/fluidbook/fluidbook.utils.js b/js/libs/fluidbook/fluidbook.utils.js
index 8ccf07ed97322e7faf5fd93622e7d722a7d03f67..52e7ab58d1bf2c068ee2aabfc612375092dd86b7 100644 (file)
--- a/js/libs/fluidbook/fluidbook.utils.js
+++ b/js/libs/fluidbook/fluidbook.utils.js
@@ -19,6 +19,44 @@ function isMobile(returnTrueIfTouch) {
     return false;
 }
 
+// https://gist.github.com/oriadam/396a4beaaad465ca921618f2f2444d49
+function colorValues(color) {
+    if (!color)
+        return;
+    if (color.toLowerCase() === 'transparent')
+        return [0, 0, 0, 0];
+    if (color[0] === '#') {
+        if (color.length < 7) {
+            // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
+            color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '');
+        }
+        return [parseInt(color.substr(1, 2), 16),
+            parseInt(color.substr(3, 2), 16),
+            parseInt(color.substr(5, 2), 16),
+            color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1];
+    }
+    if (color.indexOf('rgb') === -1) {
+        // convert named colors
+        var temp_elem = document.body.appendChild(document.createElement('fictum')); // intentionally use unknown tag to lower chances of css rule override with !important
+        var flag = 'rgb(1, 2, 3)'; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
+        temp_elem.style.color = flag;
+        if (temp_elem.style.color !== flag)
+            return; // color set failed - some monstrous css rule is probably taking over the color of our object
+        temp_elem.style.color = color;
+        if (temp_elem.style.color === flag || temp_elem.style.color === '')
+            return; // color parse failed
+        color = getComputedStyle(temp_elem).color;
+        document.body.removeChild(temp_elem);
+    }
+    if (color.indexOf('rgb') === 0) {
+        if (color.indexOf('rgba') === -1)
+            color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
+        return color.match(/[\.\d]+/g).map(function (a) {
+            return +a
+        });
+    }
+}
+
 function parseGet() {
     var couples = window.location.search.substr(1).split('&');
     var res = {};

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 1f3d19e27e872d763b7759c1c52fcd7917f65616..ba0e98c8034d35133a70142d4865bce238380e20 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -499,7 +499,6 @@ body, html {
 }
 
 
-
 .portrait {
   .doublePage {
     &._2d.axis_x {
@@ -1750,7 +1749,7 @@ html.ios body.portrait #interface {
     }
   }
 
-  &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"], &[data-menu="audio"] {
+  &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"], &[data-menu="audio"], &[data-menu="o3d"] {
     .caption {
       height: 0;
       padding: 0;
@@ -1773,8 +1772,9 @@ html.ios body.portrait #interface {
     }
   }
 
-  &[data-menu="o3d"]{
-    .o3dviewer{
+  &[data-menu="o3d"] {
+    .o3dviewer {
+      color: transparent;
       width: 100%;
       height: 100%;
     }