Fix carousel and implement workaround for show/hide bug

Author: stevenmirabito

resources/js/tour.js

@@ -1,5 +1,9 @@
 // Tour Image Carousel JS
 
+$.get("resources/templates/_carouselPrototype.html", function (data) {
+        $.carouselPrototype = data;
+
+    });
 $.get("resources/templates/_loungeCarousel.html", function (data) {
         $.lounge = data;
 
@@ -39,50 +43,67 @@ $.get("resources/templates/_loungeCarousel.html", function (data) {
 // Return: None
 function switchImage(room){
     var imageHTML;
+    var containerElement = $('#carouselImages');
     $('.tourTextActive').hide();
     $('.tourTextActive').removeClass('tourTextActive');
-    if(room == "lounge"){
-        imageHTML = $.lounge;
 
-    }
-    else if(room == "software"){
-            imageHTML = $.software;
+    if(room == "server"){
+        imageHTML = $.server;
+        
+        // Show Photosphere container
+        containerElement = $('#photosphere-container');
+        containerElement.show();
 
-    }
-    else if(room == "library"){
-            imageHTML = $.library;
+        // Photosphere, remove carousel
+        // Part of the workaround for the carousel bug (see below)
+        $('.carousel').remove();
+    } else {
+        // Hide photosphere container
+        $('#photosphere-container').hide();
 
-    }
-    else if(room == "user"){
-            imageHTML = $.user;
+        if(room == "lounge"){
+                imageHTML = $.lounge;
 
-    }
-    else if(room == "conference"){
-            imageHTML = $.conference;
+        }
+        else if(room == "software"){
+                imageHTML = $.software;
 
-    }
-    else if(room == "server"){
-            imageHTML = $.server;
+        }
+        else if(room == "library"){
+                imageHTML = $.library;
 
-            // Photosphere instead of carousel, hide controls
-            $('.carousel-control').hide();
+        }
+        else if(room == "user"){
+                imageHTML = $.user;
 
-    }
-    else if(room == "project"){
-           imageHTML = $.project; 
+        }
+        else if(room == "conference"){
+                imageHTML = $.conference;
 
-    }
-    else if(room == "dorm"){
-            imageHTML = $.dorm;
+        }
+        else if(room == "project"){
+               imageHTML = $.project; 
 
+        }
+        else if(room == "dorm"){
+                imageHTML = $.dorm;
+
+        }
     }
+    
     $('.csh-active').removeClass('csh-active');
     $("#"+room+"Text").show();
     $("#"+room+"Text").addClass("tourTextActive");
-    $('#carouselImages').html(imageHTML);
+
+    // If the carousel doesn't exist in the DOM, add it
+    // Workaround for this bug: https://github.com/angular-ui/bootstrap/issues/1513
+    if (room !== 'server' && $('.carousel').length == 0) {
+        $('.image-container').append($.carouselPrototype.replace('{{images}}', imageHTML));
+        $('.carousel').carousel();
+    } else {
+        containerElement.html(imageHTML);
+    }
     $('#'+room).addClass('csh-active');
 
 
-    
-    
 }

resources/templates/_carouselPrototype.html

@@ -0,0 +1,12 @@
+<div id="myCarousel" class="carousel slide" data-ride="carousel">
+    <span id="carouselImages">{{images}}</span>
+    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
+</div>

tour.html

@@ -70,7 +70,7 @@
             <p>Though the walls are the same as regular dorm rooms, our rooms usually look rather different than the standard RIT room layout.</p>
         </span>
 
-        
+        <div id="photosphere-container"></div>
 
         <div class="image-container">
         <div id="myCarousel" class="carousel slide" data-ride="carousel">
@@ -312,11 +312,10 @@
       <span class="sr-only">Next</span>
     </a>
   </div>
-            <br>
             </div>
 
 
-        
+        <br>
 </div>