Port keyboard accessibility updates to lightbox modal

bbc · Mar 3, 2017 · f9014e9 · f9014e9
1 parent a948724
commit f9014e9
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/lib/wraith/gallery_template/slideshow_template.erb b/lib/wraith/gallery_template/slideshow_template.erb
@@ -109,6 +109,7 @@
   <script type="text/javascript">
     $(function() {
       var slideshow = $('.slideshow');
+      var compareModal = $('.compare-modal');
 
       slideshow.cycle({
         fx:     'scrollHorz',
@@ -117,17 +118,27 @@
         next:   '.next',
         before: function (curr, next, opts) {
           $('.current').removeClass('current');
-          var path = $(next).find('.path').attr('name');
+          var $next = $(next);
+          var path = $next.find('.path').attr('name');
           $.each($('.list-group .list-group-item a'), function() {
             if ($(this).attr('href').substring(1) == path) {
               $(this).parent().addClass('checked');
               $(this).parent().addClass('current');
             }
-          })
+          });
+
+          var newImage = $next.find('a.shot:eq(0)').attr('href');
+          var oldImage = $next.find('a.shot:eq(1)').attr('href');
+          var diffImage = $next.find('a.shot:eq(2)').attr('href');
+          compareModal.html('<div class="compare-container"><img src="'+newImage+'"/><img src="'+oldImage+'"/><img src="'+diffImage+'"/></div>');
         },
         timeout: 0
       });
 
+      $(document).on('click', '.compare', function() {
+        compareModal.show();
+      });
+
       $('.list-group .list-group-item a').unbind().on('click', function(){
         var href = $(this).attr('href').substring(1);
 
@@ -140,28 +151,24 @@
         window.open(url,'_blank');
       })
 
-      $('.compare').unbind().on('click', function(){
-        var slide = $(this).closest(".slide"),
-            newImage = slide.find('a.shot:eq(0)').attr('href'),
-            oldImage = slide.find('a.shot:eq(1)').attr('href'),
-            diffImage = slide.find('a.shot:eq(2)').attr('href');
-        $('.container').append('<div class="compare-modal"><div class="compare-container"><img src="'+newImage+'"/><img src="'+oldImage+'"/><img src="'+diffImage+'"/></div></div>');
-        $('.compare-modal').unbind().on('click', function(){
-          $(this).remove();
-        })
-      })
+      compareModal.on('click', function(){
+        $(this).remove();
+      });
 
       $(document).on('keyup', function(e) {
-        if (e.keyCode === 37) {
+        if (e.keyCode === 27) { // Escape
+          compareModal.hide();
+        } else if (e.keyCode === 37) { // Left
           slideshow.cycle('prev');
-        } else if (e.keyCode === 39) {
+        } else if (e.keyCode === 39) { // Right
           slideshow.cycle('next');
         }
       });
     })
 </script>
 </head>
 <body>
+  <div class="compare-modal" style="display: none;"></div>
   <div class="container">
     <div class="row">
       <div class="col-sm-12 col-md-3">