From fa9d4f5911ef3ba97fef620530fa71b843bb0c24 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 19 Dec 2017 13:02:28 +0100
Subject: [PATCH] done #1838 @1.5

---
 _index.html                                |  2 +-
 images/interface.svg                       |  6 ++
 js/libs/fluidbook/fluidbook.coquillette.js | 65 ----------------------
 js/libs/fluidbook/fluidbook.js             | 10 ++--
 js/libs/fluidbook/fluidbook.resize.js      |  2 +-
 style/fluidbook.less                       | 17 +++++-
 6 files changed, 27 insertions(+), 75 deletions(-)
 delete mode 100644 js/libs/fluidbook/fluidbook.coquillette.js

diff --git a/_index.html b/_index.html
index 2321db15..95a449cd 100644
--- a/_index.html
+++ b/_index.html
@@ -83,7 +83,7 @@
 <div id="op"></div>
 <div id="ol"></div>
 
-<div id="coquillette"></div>
+<div id="loader"></div>
 <div id="hiddencontents"><!-- $hiddenContents --></div>
 <div id="splash"><!-- $splash --></div>
 <div id="popinOverlay"></div>
diff --git a/images/interface.svg b/images/interface.svg
index 12be91ad..e15bf7ac 100644
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -1,4 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="interface-loader" viewBox="0 0 48 48">
+        <circle cx="24" cy="24" r="23"></circle>
+        <circle cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16" stroke-dasharray="80 80" transform="rotate(102 24 24)">
+            <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 24 24;360 24 24" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
+        </circle>
+    </symbol>
 
     <symbol id="interface-chevron" viewBox="0 0 512 512">
         <path d="m342 179l-175-174-62 62 178 177-178 198 62 65 240-266z"/>
diff --git a/js/libs/fluidbook/fluidbook.coquillette.js b/js/libs/fluidbook/fluidbook.coquillette.js
deleted file mode 100644
index 55bd9bf9..00000000
--- a/js/libs/fluidbook/fluidbook.coquillette.js
+++ /dev/null
@@ -1,65 +0,0 @@
-function FluidbookCoquillette(fluidbook) {
-	this.fluidbook = fluidbook;
-	this.size = 48;
-	this.element = $("#coquillette");
-	this.rotation = 0;
-	this.speed = 1; // 1/2 tours / sec
-	this.deg360 = Math.PI * 2;
-	this.init();
-	this.raf;
-	this.start;
-}
-
-FluidbookCoquillette.prototype = {
-	init: function() {
-		var $this = this;
-		this.element.append('<canvas width="' + this.size + '" height="' + this.size + '"></canvas>');
-		var canvas = this.element.find('canvas').get(0);
-		this.ctx = canvas.getContext('2d');
-	},
-	show: function() {
-		this.element.show();
-		this.resume();
-	},
-	hide: function() {
-		this.element.hide();
-		this.pause();
-	},
-	resume: function() {
-		var $this = this;
-		this.rotation = 0;
-		TweenMax.to(this, 1 / this.speed, {rotation: this.deg360, repeat: -1, ease: Linear.easeNone, onUpdate: $.proxy(this.step, this)});
-	},
-	step: function() {
-		var radius = this.size / 2;
-
-		// Clear the whole canvas
-		this.ctx.clearRect(0, 0, this.size, this.size);
-		// Set the background
-		this.ctx.fillStyle = this.fluidbook.datas.coquilletteBack;
-		this.ctx.beginPath();
-		this.ctx.arc(radius, radius, radius, 0, this.deg360, false);
-		this.ctx.closePath();
-		this.ctx.fill();
-		// Set stroke style
-		this.ctx.strokeStyle = this.fluidbook.datas.coquilletteFront;
-		this.ctx.lineWidth = Math.round(this.size * 0.0625);
-		this.ctx.lineCap = 'round';
-		this.ctx.lineJoin = 'mitter';
-		this.ctx.beginPath();
-		this.ctx.arc(radius, radius, radius * 0.65, this.rotation, this.rotation + Math.PI * 1.4, false);
-
-		// Apply the stroke
-		this.ctx.stroke();
-	},
-	pause: function() {
-		TweenMax.killTweensOf(this);
-	},
-	resize: function(ww, hh) {
-		this.element.css({
-			left: (ww - this.size) / 2,
-			top: (hh - this.size) / 2
-		})
-	}
-};
-
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index d2bfac1e..48fae329 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -79,7 +79,6 @@ Fluidbook.prototype = {
         $('html').addClass(this.datas.mobileLVersion);
         this.currentPage = -1;
         this.resize = new FluidbookResize(this);
-        this.coquillette = new FluidbookCoquillette(this);
         this.stats = new FluidbookStats(this);
         this.stats.track(10);
 
@@ -100,6 +99,7 @@ Fluidbook.prototype = {
         this.initLoading();
     },
     initLoading: function () {
+        $("#loader").append(getSpriteIcon('interface-loader'));
         this.displayLoader();
     },
     reloadErrorImages: function () {
@@ -432,7 +432,7 @@ Fluidbook.prototype = {
         if (center != 0) {
             left = this.resize.centerOffset * center;
         }
-        
+
         if (currentLeft == left) {
             return;
         }
@@ -970,7 +970,7 @@ Fluidbook.prototype = {
         });
     },
     displayLoader: function () {
-        this.coquillette.show();
+        $("#loader").show();
         if (!this.support.isMobile) {
             $('body').addClass('loading');
         }
@@ -998,9 +998,9 @@ Fluidbook.prototype = {
             return;
         }
         if (this.support.isMobile) {
-            this.coquillette.hide();
+            $("#loader").hide();
         } else {
-            this.coquillette.hide();
+            $("#loader").hide();
             $('body').removeClass('loading');
         }
     },
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index e85967e3..2920dad6 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -206,7 +206,7 @@ FluidbookResize.prototype = {
         if (this.fluidbook.help) {
             this.fluidbook.help.resize(this.ww, this.hh, interfaceScale, navScale);
         }
-        this.fluidbook.coquillette.resize(this.ww, this.hh);
+        $('#loader').css({top:this.hh/2,left:this.ww/2});
         this.fluidbook.background.resize(this.ww, this.hh);
         if (this.fluidbook.slider) {
             this.fluidbook.slider.resize(this.ww, this.hh, this.orientation == 'portrait');
diff --git a/style/fluidbook.less b/style/fluidbook.less
index e63279b8..f6028082 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -124,7 +124,7 @@ html.screenshot #main {
 	display: block !important;
 }
 
-html.screenshot #coquillette {
+html.screenshot #loader {
 	visibility: hidden !important;
 }
 
@@ -240,12 +240,23 @@ body, html {
 
 }
 
-/* Coquillette */
-#coquillette {
+/* Loader */
+#loader {
 	position: absolute;
+	@loaderSize: 48px;
+	@loaderMargin: unit(@loaderSize/-2, px);
 	top: 0px;
 	left: 0px;
 	z-index: 1000;
+	width: @loaderSize;
+	height: @loaderSize;
+	margin: @loaderMargin 0 0 @loaderMargin;
+	svg {
+		width: 100%;
+		height: 100%;
+		fill: @loader-background-color;
+		color: @loader-foreground-color;
+	}
 }
 
 /* Pages */
-- 
2.39.5