Merge pull request #24 from appirio-tech/slider-with-shadow

Updated slider code to allow shadow around preview

Author: aselbie

example/styles/main.scss

@@ -69,3 +69,7 @@ h1 {
     }
   }
 }
+
+.image-viewer-container {
+  height: 100vh;
+}

example/views/image-viewer.example.jade

@@ -1,4 +1,5 @@
-modal.flex.column(show="true" background-click-close=true)
-  image-viewer-header.flex(handle="batman" title="My Very Important Project Images" download-allowed="true")
+modal(show="true" background-click-close=true)
+  .image-viewer-container.flex.column
+    image-viewer-header.flex(handle="batman" title="My Very Important Project Images" download-allowed="true")
 
-  image-slide-viewer.flex.flex-grow(files="vm.files" starting-file="vm.startingFile" show-notifications="vm.showNotifications")
+    image-slide-viewer.flex.flex-grow(files="vm.files" starting-file="vm.startingFile" show-notifications="vm.showNotifications")

src/scripts/controllers/image-viewer.controller.coffee

@@ -1,97 +1,41 @@
 'use strict'
 
-ImageViewerController = ($scope) ->
+ImageViewerController = ->
   vm                   = this
-  vm.files             = $scope.files
-  vm.showNotifications = $scope.showNotifications
-  startingFile         = $scope.startingFile
-  vm.onFileChange      = $scope.onFileChange
-  vm.imageZoomedIn     = false
-  vm.prevFile          = null
-  vm.nextFile          = null
-  vm.showSmallImage    = false
-  $scope.setAutoBg     = false
-
-
-  updateFiles = ->
-    if vm.currentIndex + 1 < vm.files.length
-      vm.nextFile = true
-    else
-      vm.nextFile = null
-
-    if vm.currentIndex - 1 >= 0
-      vm.prevFile = true
-    else
-      vm.prevFile = null
+  vm.zoom              = false
+  vm.prevFile          = false
+  vm.nextFile          = false
+  vm.largeImage        = false
 
   activate =  ->
-    vm.file       = startingFile
-
-    vm.currentIndex = vm.files.indexOf vm.file
+    update(vm.files.indexOf vm.startingFile)
 
-    vm.nextFile = vm.currentIndex + 1 < vm.files.length
-
-    vm.prevFile =  vm.currentIndex - 1 >= 0
+  update = (fileIndex) ->
+    vm.file         = vm.files[fileIndex]
+    vm.currentIndex = fileIndex
+    vm.nextFile     = vm.currentIndex + 1 < vm.files.length
+    vm.prevFile     = vm.currentIndex > 0
+    vm.zoom         = false
 
     vm.onFileChange({file: vm.file}) if vm.onFileChange
 
-    $scope.setAutoBg = true
-
-    $scope.$watch 'showSmallImage', (newVal, OldVal) ->
-      vm.showSmallImage = newVal
-
   vm.viewNext = ->
-    vm.file = vm.files[vm.currentIndex + 1]
-
-    vm.currentIndex = vm.files.indexOf vm.file
-
-    updateFiles()
-
-    vm.imageZoomedIn = false
-
-    vm.onFileChange({file: vm.file}) if vm.onFileChange
-
-    $scope.setAutoBg = true
-
+    update(vm.currentIndex + 1)
 
   vm.viewPrevious = ->
-    vm.file = vm.files[vm.currentIndex - 1]
-
-    vm.currentIndex = vm.files.indexOf vm.file
-
-    updateFiles()
-
-    vm.imageZoomedIn = false
-
-    vm.onFileChange({file: vm.file}) if vm.onFileChange
-
-    $scope.setAutoBg = true
-
+    update(vm.currentIndex - 1)
 
   vm.selectFile = (file) ->
-    vm.file = file
-
-    vm.currentIndex = vm.files.indexOf vm.file
-
-    updateFiles()
-
-    vm.imageZoomedIn = false
-
-    vm.onFileChange({file: vm.file}) if vm.onFileChange
-
-    $scope.setAutoBg = true
-
+    update(vm.files.indexOf file)
 
   vm.isCurrent = (file) ->
     (vm.files.indexOf file) == vm.currentIndex
 
   vm.toggleZoom = ->
-    vm.imageZoomedIn = !vm.imageZoomedIn
+    vm.zoom = !vm.zoom
 
   activate()
 
   vm
 
-ImageViewerController.$inject = ['$scope']
-
 angular.module('appirio-tech-ng-ui-components').controller 'ImageViewerController', ImageViewerController

src/scripts/directives/image-viewer.directive.coffee

@@ -1,41 +1,31 @@
 'use strict'
 
 directive = ($window)->
-  link = (scope, element, attrs) ->
-      checkHeights = ->
-        container = $('.img-container')
-        backgroundContainer = $('.bg-image')[0]
-        containerHeight = container.height()
-        containerWidth = container.width()
-
-        image  = container.find('img')
-        imageHeight = image.attr('height')
-        imageWidth = image.attr('width')
-
-        if imageHeight > 0 && imageWidth > 0
-          if imageHeight < containerHeight && imageWidth < containerWidth
-            scope.showSmallImage = true
-            scope.vm.imageZoomedIn = false
-          else
-            scope.showSmallImage = false
-
-      scope.$watch 'setAutoBg', (newVal, oldVal) ->
-        if newVal
-          scope.setAutoBg = false
-          checkHeights()
-
-      $($window).bind 'resize', ->
-        checkHeights()
-        scope.$digest()
+  link = (scope) ->
+    container = document.getElementsByClassName('image-container')[0]
+    image = document.getElementsByClassName('preview-image')[0]
+
+    checkOverflow = ->
+      wide = image.naturalWidth > container.clientWidth
+      tall = image.naturalHeight > container.clientHeight
+
+      scope.$apply "vm.largeImage = #{ wide || tall }"
+
+    image.onload = ->
+      checkOverflow()
+
+    $($window).bind 'resize', ->
+      checkOverflow()
 
   restrict:    'E'
   controller:  'ImageViewerController as vm'
   templateUrl: 'views/image-viewer.directive.html'
   link: link
-  scope:
+  scope: {}
+  bindToController:
     files             : '='
     startingFile      : '='
-    showNotifications : '='
+    showNotifications : '&'
     onFileChange      : '&'
 
 directive.$inject = ['$window']

src/styles/image-viewer.scss

@@ -1,123 +1,97 @@
 @import "work/work-includes";
 
 image-slide-viewer {
-  display: block;
+  position: absolute;
+  top: 0;
+  height: 100vh;
+  margin-top: 100px;
+  padding-bottom: 100px;
+  box-sizing: border-box;
 
   main {
     width : 100vw;
-    padding: 20px;
-    padding-top: 10px;
 
-    .content {
-      overflow: hidden;
+    .meta {
       text-align: center;
-      width: 100%;
+      margin-bottom: 20px;
+    }
 
-      .slideshow {
-        width: 100%;
-        .icon.arrow {
-          width: 33px;
-          height: 74px;
-        }
+    .content {
+      align-items: stretch;
+      min-height: 1px;
 
-        .preview {
-          overflow: hidden;
-          text-align: center;
-          padding: 20px 0;
+      .previous, .next {
+        flex-basis: 75px;
 
-          .previous, .next {
-            min-width: 50px;
+        .arrow-previous, .arrow-next {
+          margin: auto;
 
-            .arrow-previous, .arrow-next {
-              margin: auto
-            }
+          .icon.arrow {
+            width: 33px;
+            height: 74px
+          }
+        }
+      }
 
-            .arrow-next {
-              margin: auto
-            }
+      .image-container {
+        position: relative;
+        text-align: center;
+
+        &.small, &.fit {
+          img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translateY(-50%) translateX(-50%);
+            max-width: 100%;
+            max-height: 100%;
           }
+        }
 
-          .image {
-            width: 100%;
-            max-width: 1000px;
-            margin-right: 80px;
-            margin-left: 80px;
-
-            .img-container {
-              width: 100%;
-              height: 100%;
-              max-height: 800px;
-              max-width: 1000px;
-
-              &.zoomed {
-
-                > .bg-image {
-                  overflow: auto;
-
-                  img {
-
-                    &:hover {
-                      cursor: zoom-out;
-                    }
-                  }
-                }
-              }
-
-              &.small {
-                > .bg-image {
-                  overflow: auto;
-                }
-              }
-
-              .bg-image {
-                margin-top: 40px;
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-position: center;
-                width: 100%;
-
-                &:hover {
-                  cursor: zoom-in;
-                }
-
-                &.small {
-                  &:hover {
-                    cursor: inherit;
-                  }
-                }
-              }
-            }
+        &.fit {
+          img {
+            cursor: zoom-in;
           }
         }
 
-        .thumbnails {
+        &.full {
+          overflow: scroll;
           text-align: center;
-          max-width: 100vw;
-          padding: 20px;
-          min-height: 100px;
-          overflow: auto;
-          white-space: nowrap;
-
-          > * {
-            display: inline-block;
-            margin: 10px;
-            position: relative;
-
-            &.elevated {
-              opacity: 0.4;
-            }
-          }
 
-          button {
-            img {
-              width  : 60px;
-              height : 50px;
-              display: block;
-            }
+          img {
+            cursor: zoom-out;
           }
         }
       }
     }
+
+    .thumbnails {
+      flex-basis: 110px;
+      flex-shrink: 0;
+      text-align: center;
+      width: 100vw;
+      padding: 25px;
+      overflow: auto;
+      white-space: nowrap;
+
+      > * {
+        display: inline-block;
+        margin: 0 10px;
+        position: relative;
+
+        &.elevated {
+          opacity: 0.4;
+        }
+      }
+
+      button {
+        img {
+          width  : 60px;
+          height : 50px;
+          display: block;
+        }
+      }
+    }
   }
 }