Added image scrollbar to viewports (LT-20)

2015-12-14 08:06:28 -05:00
1 parent 5a2ebfab0b
commit bde599ed7b
@@ -0,0 +1,7 @@
+<template name="imageControls">
+    <div class="imageControls">
+        <div id="scrollbar">
+            <input id="imageSlider" type="range" min="1" val="1"/>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,14 @@
+Template.imageControls.events({
+    'input #imageSlider': function(e) {
+        // Using the slider in an inactive viewport
+        // should cause that viewport to become active
+        var slider = $(e.currentTarget);
+        var newActiveElement = slider.parents().eq(2).siblings('.imageViewerViewport').get(0);
+        setActiveViewport(newActiveElement);
+
+        // Subtract 1 here since the slider goes from 1 to N images
+        // But the stack indexing starts at 0
+        var newImageIdIndex = parseInt(slider.val(), 10) - 1;
+        switchToImageByIndex(newImageIdIndex);
+    }
+});
@@ -0,0 +1,103 @@
+.imageControls
+  position: absolute
+  top: 0
+  right: 0
+  height: 100%
+  padding: 5px
+  
+  #scrollbar
+    margin-top: 5px
+    width: 31px
+
+    #imageSlider
+      height: 2px
+      position: absolute
+      left: 20px
+
+      -webkit-appearance: none
+
+      transform: rotate(90deg)
+      -webkit-transform: rotate(90deg)
+      -moz-transform :rotate(90deg)
+      -o-transform: rotate(90deg)
+      -ms-transform: rotate(90deg)
+
+      transform-origin: top left
+      -webkit-transform-origin: top left
+      -moz-transform-origin: top left
+      -o-transform-origin: top left
+      -ms-transform-origin: top left
+
+      // Remove focus highlights on range input
+      &:focus
+        outline: none
+        -moz-box-shadow: none
+        -webkit-box-shadow: none
+        box-shadow: none
+
+      // Remove focus border in Firefox
+      &::-moz-focus-outer
+        border: none
+        
+      // --- Style the range track --- //
+      &::-webkit-slider-runnable-track
+        height: 2px
+        border: 2px solid #bdc3c7
+        background-color: darkgrey
+        z-index: 6
+
+      &::-moz-range-track
+        height: 1px
+        border: 1px solid #bdc3c7
+        background-color: darkgrey
+        z-index: 6
+
+      &::-ms-track
+        height: 2px
+        border: 1px solid #bdc3c7
+        background-color: darkgrey
+        z-index: 6
+
+      // Hide any fill IE tries to add
+      &::-ms-fill-lower
+        background: transparent
+
+      &::-ms-fill-upper
+        background: transparent
+
+      // --- Style the range thumb --- //
+      &::-webkit-slider-thumb
+        -webkit-appearance: none !important
+        background-color: rgb(169, 169, 169)
+        border: 2px solid rgb(169, 169, 169)
+        border-radius: 2px
+        height: 15px
+        width: 25px
+        cursor: pointer
+        margin-top: -7px
+
+        &:active
+          background-color: rgb(34, 126, 163)
+
+      &::-moz-range-thumb
+        background-color: rgb(169, 169, 169)
+        border: 2px solid rgb(169, 169, 169)
+        border-radius: 2px
+        height: 11px
+        width: 20px
+        cursor: pointer
+        z-index: 7
+
+        &:active
+          background-color: rgb(34, 126, 163)
+
+      &::-ms-thumb
+        background-color: rgb(169, 169, 169)
+        border: 2px solid rgb(169, 169, 169)
+        border-radius: 2px
+        height: 11px
+        width: 20px
+        cursor: pointer
+
+        &:active
+          background-color: rgb(34, 126, 163)