loleaflet/build/deps.js | 1 loleaflet/dist/leaflet.css | 6 ----- loleaflet/dist/loading.html | 10 +++----- loleaflet/src/core/LOUtil.js | 30 ++++++++++++++++++++++++++ loleaflet/src/layer/marker/ProgressOverlay.js | 25 --------------------- loleaflet/src/map/handler/Map.SlideShow.js | 8 +----- 6 files changed, 38 insertions(+), 42 deletions(-)
New commits: commit d9019a2e79166732071cde84e1f8c8572a4dd281 Author: Pranav Kant <[email protected]> Date: Tue May 31 14:24:59 2016 +0530 loleaflet: Reuse html canvas spinner for slideshows Move the spinner initialization to a separate class L.LOUtil. Other similar LO related functions should also go there. Also remove superfluous class leaflet-slideshow-spinner. It was not being used anyway due to wrong spelling. Change-Id: Ie8fac0391a9c6a3771900539e8f08d1b73b9be28 diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js index eaa9f9f..105cc6b 100644 --- a/loleaflet/build/deps.js +++ b/loleaflet/build/deps.js @@ -3,6 +3,7 @@ var deps = { src: ['Leaflet.js', 'core/Log.js', 'core/Util.js', + 'core/LOUtil.js', 'core/Class.js', 'core/Events.js', 'core/Socket.js', diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css index cdb3375..e3c12b3 100644 --- a/loleaflet/dist/leaflet.css +++ b/loleaflet/dist/leaflet.css @@ -702,9 +702,3 @@ a.leaflet-control-buttons:hover:first-child { .leaflet-slideshow { background: #FFFFFF; } - -.leaflet-slideshow-spinner { - background-image: url(images/spinner.gif); - background-repeat: no-repeat; - background-position: center center; - } diff --git a/loleaflet/dist/loading.html b/loleaflet/dist/loading.html index 8c5cf1e..64cc1de 100644 --- a/loleaflet/dist/loading.html +++ b/loleaflet/dist/loading.html @@ -19,17 +19,15 @@ width: 100px; height: 100px; } - .spinner img { - display: block; - margin-left: auto; - margin-right: auto; - } </style> </head> <body> <div class="spinner"> - <img src="/loleaflet/dist/images/spinner.gif"> + <canvas id="spinner" class="leaflet-progress-spinner-canvas"></canvas> <h4>Loading...</h4> </div> </body> + <script> + var spinnerInterval = window.parent.L.LOUtil.startSpinner(document.getElementById('spinner'), 1.5); + </script> </html> diff --git a/loleaflet/src/core/LOUtil.js b/loleaflet/src/core/LOUtil.js new file mode 100644 index 0000000..cbdce2a --- /dev/null +++ b/loleaflet/src/core/LOUtil.js @@ -0,0 +1,30 @@ +/* + * L.LOUtil contains various LO related utility functions used throughout the code + */ + +L.LOUtil = { + startSpinner: function (spinnerCanvas, spinnerSpeed) { + var spinnerInterval; + spinnerCanvas.width = 50; + spinnerCanvas.height = 50; + + var context = spinnerCanvas.getContext('2d'); + context.lineWidth = 8; + context.strokeStyle = 'grey'; + var x = spinnerCanvas.width / 2; + var y = spinnerCanvas.height / 2; + var radius = y - context.lineWidth / 2; + spinnerInterval = setInterval(function() { + context.clearRect(0, 0, x * 2, y * 2); + // Move to center + context.translate(x, y); + context.rotate(spinnerSpeed * Math.PI / 180); + context.translate(-x, -y); + context.beginPath(); + context.arc(x, y, radius, 0, Math.PI * 1.3); + context.stroke(); + }, 1); + + return spinnerInterval; + } +}; diff --git a/loleaflet/src/layer/marker/ProgressOverlay.js b/loleaflet/src/layer/marker/ProgressOverlay.js index 50c6fac..91785e9 100644 --- a/loleaflet/src/layer/marker/ProgressOverlay.js +++ b/loleaflet/src/layer/marker/ProgressOverlay.js @@ -56,36 +56,13 @@ L.ProgressOverlay = L.Layer.extend({ this._container.style.width = this._size.x + 'px'; - this._initSpinner(); + this._spinnerInterval = L.LOUtil.startSpinner(this._spinnerCanvas, this.options.spinnerSpeed); L.DomEvent .disableClickPropagation(this._progress) .disableScrollPropagation(this._container); }, - _initSpinner: function () { - this._spinnerCanvas.width = 50; - this._spinnerCanvas.height = 50; - - var context = this._spinnerCanvas.getContext('2d'); - context.lineWidth = 8; - context.strokeStyle = 'grey'; - var x = this._spinnerCanvas.width / 2; - var y = this._spinnerCanvas.height / 2; - var radius = y - context.lineWidth / 2; - var self = this; - this._spinnerInterval = setInterval(function() { - context.clearRect(0, 0, x * 2, y * 2); - // Move to center - context.translate(x, y); - context.rotate(self.options.spinnerSpeed * Math.PI / 180); - context.translate(-x, -y); - context.beginPath(); - context.arc(x, y, radius, 0, Math.PI * 1.3); - context.stroke(); - }, 1); - }, - _setPos: function (pos) { L.DomUtil.setPosition(this._container, pos); }, diff --git a/loleaflet/src/map/handler/Map.SlideShow.js b/loleaflet/src/map/handler/Map.SlideShow.js index f1bb023..00c8d97 100644 --- a/loleaflet/src/map/handler/Map.SlideShow.js +++ b/loleaflet/src/map/handler/Map.SlideShow.js @@ -22,14 +22,9 @@ L.Map.SlideShow = L.Handler.extend({ this._map.off('slidedownloadready', this._onSlideDownloadReady, this); }, - _onIframeLoaded: function () { - L.DomUtil.removeClass(this._slideShow, 'leaflet-slidshow-spinner'); - }, - _onFullScreen: function () { - this._slideShow = L.DomUtil.create('iframe', 'leaflet-slideshow leaflet-slidshow-spinner', this._map._container); + this._slideShow = L.DomUtil.create('iframe', 'leaflet-slideshow', this._map._container); this._slideShow.src = this._map.options.webserver + '/loleaflet/dist/loading.html'; - this._slideShow.onload = L.bind(this._onIframeLoaded, this); if (this._slideShow.requestFullscreen) { this._slideShow.requestFullscreen(); } @@ -64,6 +59,7 @@ L.Map.SlideShow = L.Handler.extend({ _onSlideDownloadReady: function (e) { this._slideShow.src = e.url + '?mime_type=image/svg%2Bxml'; this._slideShow.contentWindow.focus(); + clearInterval(this._slideShow.contentWindow.spinnerInterval); } }); _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
