From: Vincent Vanwaelscappel Date: Tue, 4 Mar 2025 16:41:51 +0000 (+0100) Subject: wait #7347 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1416a7c93963f02df728fe2eeec713654254ca58;p=fluidbook-html5.git wait #7347 @4 --- diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index ccf46509..5d036fc9 100644 --- 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 3dee765f..1709969b 100644 --- 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 += '
'; + view += '
'; 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 8ccf07ed..52e7ab58 100644 --- 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 1f3d19e2..ba0e98c8 100644 --- 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%; }