Don't show frame controls outside of the geojs viewer

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Bug Fixes
 - Pass style to histogram endpoint as json ([#1220](../../pull/1220))
+- Don't show frame controls outside of the geojs viewer ([#1226](../../pull/1226))
 
 ## 1.23.0
 

girder/girder_large_image/web_client/stylesheets/imageViewerSelectWidget.styl

@@ -23,18 +23,3 @@
   position absolute
   top 0
   left 0
-
-.image-controls-frame
-  label
-    margin-right 8px
-
-  input.image-controls-number
-    display inline-block
-    vertical-align middle
-    width 60px
-    margin-right 8px
-
-  input.image-controls-slider
-    display inline-block
-    vertical-align middle
-    width 30%

girder/girder_large_image/web_client/templates/imageViewerSelectWidget.pug

@@ -7,9 +7,5 @@
       option(value=viewer.name) #{viewer.label}
 .image-controls
   #vue-container
-  span.image-controls-frame.hidden
-    label(for='image-frame') Frame:
-    input#image-frame-number.image-controls-number(type='number', min='0', value='0')
-    input#image-frame.image-controls-slider(type='range', min='0', value='0')
 each viewer in viewers
   .image-viewer.hidden(id=viewer.name)

girder/girder_large_image/web_client/views/imageViewerSelectWidget.js

@@ -88,7 +88,7 @@ var ImageViewerSelectWidget = View.extend({
             this.currentViewer = null;
         }
         // hide general image controls; individual viewers must enable them
-        this.$('.image-controls>span').toggleClass('hidden', true);
+        this.$('.image-controls>div').toggleClass('hidden', true);
         this._frameUpdate = null;
         this.$('.image-viewer').toggleClass('hidden', true);
 
@@ -121,6 +121,7 @@ var ImageViewerSelectWidget = View.extend({
      *      there is only one frame.
      */
     setFrames: function (metadata, frameUpdate) {
+        this.$('.image-controls>div').toggleClass('hidden', false);
         // Vue frame control
         this._createVue(metadata, frameUpdate);
     },

girder/test_girder/web_client_specs/imageViewerSpec.js

@@ -64,12 +64,12 @@ $(function () {
         });
         it('adjust frame slider', function () {
             runs(function () {
-                expect($('.image-controls-frame').length).toBe(1);
-                $('.image-controls-number').val(1).trigger('input');
+                expect($('.image-frame-control-box').length).toBe(1);
+                $('.image-frame-control-box input:visible').eq(1).val(1).trigger('input');
             });
             girderTest.waitForLoad();
             waitsFor(function () {
-                return $('.image-controls-slider').val() === '1';
+                return $('.image-frame-control-box input:visible').eq(1).val() === '1';
             }, 'control slider to update');
         });
     });