From 099f3950c0e801796ea16a7ce22396fdec27a0be Mon Sep 17 00:00:00 2001
From: Nathan Grebowiec <njgreb@gmail.com>
Date: Mon, 16 Oct 2017 15:53:41 -0500
Subject: [PATCH] show loading notice while images load

optional display with optional text
---
 README.md             |  2 +-
 src/regthreesixty.css |  8 ++++++++
 src/regthreesixty.js  | 19 +++++++++++++++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 8dc3b88..6c44884 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ Angular JS.
 ```
 2. Include **threesixty** directive in HTML. Set image list using `images` attribute.
 ```html
-<threesixty images="imageList" animate-after-loading="true" speed-multiplier="20">
+<threesixty images="imageList" animate-after-loading="true" speed-multiplier="20" loading-notice="true">
 ```
 
 3. Trigger a rotation by emitting the event `threesixty-animate` to the directive scope
diff --git a/src/regthreesixty.css b/src/regthreesixty.css
index b7903e8..429a1af 100644
--- a/src/regthreesixty.css
+++ b/src/regthreesixty.css
@@ -26,3 +26,11 @@
 .reg-threesixty img.current{
   visibility: visible;
 }
+
+.reg-threesixty-loading {
+  position: absolute;
+  z-index: 1;
+  background-color: blue;
+  color: white;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/regthreesixty.js b/src/regthreesixty.js
index b0d14f7..e7750f8 100644
--- a/src/regthreesixty.js
+++ b/src/regthreesixty.js
@@ -9,14 +9,16 @@
 angular.module('reg.threesixty', [])
   .directive('threesixty', ['$document', '$window',function ($document, $window) {
     return {
-      template: '<div class="reg-threesixty"></div>',
+      template: '<div class="reg-threesixty"><div class="reg-threesixty-loading"></div></div>',
       restrict: 'E',
       replace:true,
       scope:{
         images: '=',
         reverse: '=',
         animateAfterLoading: '=',
-        speedMultiplier: '='
+        speedMultiplier: '=',
+        loadingMessage: '=',
+        loadingNotice: '='
       },
       link: function(scope, element, attrs) {
 
@@ -38,6 +40,7 @@ angular.module('reg.threesixty', [])
         var monitorInt = 0;
         var speedMultiplier = scope.speedMultiplier ? parseInt(scope.speedMultiplier) : 20;
         var ROTATION_EVENT = 'threesixty-animate';
+        var loadingMessage = scope.loadingMessage ? scope.loadingMessage : 'Loading images...';
 
         var adjustHeight = function(){
           if( loadedImages > 0 ){
@@ -48,6 +51,13 @@ angular.module('reg.threesixty', [])
           }
         };
 
+        // setup loading notice
+        if (scope.loadingNotice) {
+          $('.reg-threesixty-loading').html(loadingMessage);
+        } else {
+          $('.reg-threesixty-loading').remove();
+        }
+
         angular.element($window).on('resize', adjustHeight );
 
         var load360Images = function(){
@@ -72,6 +82,11 @@ angular.module('reg.threesixty', [])
             if (scope.animateAfterLoading) {
               refresh();
             }
+
+            // remove loading notice
+            if (scope.loadingNotice) {
+              $('.reg-threesixty-loading').remove();
+            }
           }
         };