done #1838 @1.5

diff --git a/_index.html b/_index.html
index 2321db15ccbdb449e22c31f020a824a95f1a07a4..95a449cd4080db531f22edf4e4123536a9678ec4 100644 (file)
--- 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 12be91adb79c79445135b6e28b5a94c530710784..e15bf7ace9bfca949a6a8604baed1c061fc0dcde 100644 (file)
--- 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 (file)
index 55bd9bf..0000000
--- a/js/libs/fluidbook/fluidbook.coquillette.js
+++ /dev/null
@@ -1,65 +0,0 @@
-function FluidbookCoquillette(fluidbook) {\r
-       this.fluidbook = fluidbook;\r
-       this.size = 48;\r
-       this.element = $("#coquillette");\r
-       this.rotation = 0;\r
-       this.speed = 1; // 1/2 tours / sec\r
-       this.deg360 = Math.PI * 2;\r
-       this.init();\r
-       this.raf;\r
-       this.start;\r
-}\r
-\r
-FluidbookCoquillette.prototype = {\r
-       init: function() {\r
-               var $this = this;\r
-               this.element.append('<canvas width="' + this.size + '" height="' + this.size + '"></canvas>');\r
-               var canvas = this.element.find('canvas').get(0);\r
-               this.ctx = canvas.getContext('2d');\r
-       },\r
-       show: function() {\r
-               this.element.show();\r
-               this.resume();\r
-       },\r
-       hide: function() {\r
-               this.element.hide();\r
-               this.pause();\r
-       },\r
-       resume: function() {\r
-               var $this = this;\r
-               this.rotation = 0;\r
-               TweenMax.to(this, 1 / this.speed, {rotation: this.deg360, repeat: -1, ease: Linear.easeNone, onUpdate: $.proxy(this.step, this)});\r
-       },\r
-       step: function() {\r
-               var radius = this.size / 2;\r
-\r
-               // Clear the whole canvas\r
-               this.ctx.clearRect(0, 0, this.size, this.size);\r
-               // Set the background\r
-               this.ctx.fillStyle = this.fluidbook.datas.coquilletteBack;\r
-               this.ctx.beginPath();\r
-               this.ctx.arc(radius, radius, radius, 0, this.deg360, false);\r
-               this.ctx.closePath();\r
-               this.ctx.fill();\r
-               // Set stroke style\r
-               this.ctx.strokeStyle = this.fluidbook.datas.coquilletteFront;\r
-               this.ctx.lineWidth = Math.round(this.size * 0.0625);\r
-               this.ctx.lineCap = 'round';\r
-               this.ctx.lineJoin = 'mitter';\r
-               this.ctx.beginPath();\r
-               this.ctx.arc(radius, radius, radius * 0.65, this.rotation, this.rotation + Math.PI * 1.4, false);\r
-\r
-               // Apply the stroke\r
-               this.ctx.stroke();\r
-       },\r
-       pause: function() {\r
-               TweenMax.killTweensOf(this);\r
-       },\r
-       resize: function(ww, hh) {\r
-               this.element.css({\r
-                       left: (ww - this.size) / 2,\r
-                       top: (hh - this.size) / 2\r
-               })\r
-       }\r
-};\r
-\r

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index d2bfac1e031b3564679d2c80a7d03894461d9b4c..48fae329424a31bad9b7fb8b735eb63ef76ca004 100644 (file)
--- 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 e85967e3a575aa1ac787075c5c6c90e336a28080..2920dad67fdc8e5c156802a4a80f93638096a138 100644 (file)
--- 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 e63279b8fce44fe1b1666c4c5375c99deeb8a0ab..f60280823b59a9caa74ead0a5dd845a1ef08aa87 100644 (file)
--- 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 */