Merge pull request #23 from appirio-tech/auto-bg

Show small images in actual size & prevent zoom

Author: samsep

example/images/shortimage.png

@@ -29,6 +29,12 @@ ImageViewerExampleController = ($scope, $stateParams) ->
       path: "work/1447877190406-e9c02ed7-00bf-4e52-8c57-4d73fec009ac/fe819b7d-2534-4878-994b-35f7b2fec185/Screen Shot 2015-12-01 at 12.35.18 PM.png",
       caption: "this is another one of the images",
       url: require "../../images/turtles-breaking.jpg"
+    },
+    {
+     fileId: "nop",
+     path: "work/1447877190406-e9c02ed7-00bf-4e52-8c57-4d73fec009ac/fe819b7d-2534-4878-994b-35f7b2fec185/Screen Shot 2015-12-01 at 12.35.18 PM.png",
+     caption: "this is another one too",
+     url: require "../../images/shortimage.png" 
     }
   ]
 

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

@@ -6,9 +6,12 @@ ImageViewerController = ($scope) ->
   vm.showNotifications = $scope.showNotifications
   startingFile         = $scope.startingFile
   vm.onFileChange      = $scope.onFileChange
+  vm.imageZoomedIn     = false
   vm.prevFile          = null
   vm.nextFile          = null
-  vm.imageZoomedIn     = false
+  vm.showSmallImage    = false
+  $scope.setAutoBg     = false
+
 
   updateFiles = ->
     if vm.currentIndex + 1 < vm.files.length
@@ -32,6 +35,11 @@ ImageViewerController = ($scope) ->
 
     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]
 
@@ -43,6 +51,8 @@ ImageViewerController = ($scope) ->
 
     vm.onFileChange({file: vm.file}) if vm.onFileChange
 
+    $scope.setAutoBg = true
+
 
   vm.viewPrevious = ->
     vm.file = vm.files[vm.currentIndex - 1]
@@ -55,6 +65,9 @@ ImageViewerController = ($scope) ->
 
     vm.onFileChange({file: vm.file}) if vm.onFileChange
 
+    $scope.setAutoBg = true
+
+
   vm.selectFile = (file) ->
     vm.file = file
 
@@ -66,6 +79,9 @@ ImageViewerController = ($scope) ->
 
     vm.onFileChange({file: vm.file}) if vm.onFileChange
 
+    $scope.setAutoBg = true
+
+
   vm.isCurrent = (file) ->
     (vm.files.indexOf file) == vm.currentIndex
 

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

@@ -1,13 +1,43 @@
 'use strict'
 
-directive = ->
+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()
+
   restrict:    'E'
   controller:  'ImageViewerController as vm'
   templateUrl: 'views/image-viewer.directive.html'
+  link: link
   scope:
     files             : '='
     startingFile      : '='
     showNotifications : '='
     onFileChange      : '&'
 
+directive.$inject = ['$window']
+
 angular.module('appirio-tech-ng-ui-components').directive 'imageSlideViewer', directive

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

@@ -63,6 +63,12 @@ image-slide-viewer {
                 }
               }
 
+              &.small {
+                > .bg-image {
+                  overflow: auto;
+                }
+              }
+
               .bg-image {
                 margin-top: 40px;
                 background-size: contain;
@@ -73,6 +79,12 @@ image-slide-viewer {
                 &:hover {
                   cursor: zoom-in;
                 }
+
+                &.small {
+                  &:hover {
+                    cursor: inherit;
+                  }
+                }
               }
             }
           }

src/styles/image-viewer.scss

@@ -11,13 +11,17 @@ main.flex.column.middle.light-bg
             button.clean.icon.arrow
 
         .image.flex.column.center
-          .img-container.flex.flex-grow(ng-class="{zoomed: vm.imageZoomedIn}")
+          .img-container.flex.flex-grow(ng-class="{zoomed: vm.imageZoomedIn, small: showSmallImage}")
 
-            .bg-image(ng-if="!vm.imageZoomedIn" ng-click="vm.toggleZoom()" style="background-image: url({{vm.file.url}})")
+            .bg-image(ng-show="!vm.imageZoomedIn && !vm.showSmallImage" ng-click="vm.toggleZoom()" style="background-image: url({{vm.file.url}})")
 
-            .bg-image.zoomed.elevated(ng-if="vm.imageZoomedIn" ng-click="vm.toggleZoom()")
+            .bg-image.zoomed.elevated(ng-show="vm.imageZoomedIn && !vm.showSmallImage" ng-click="vm.toggleZoom()")
               img(ng-src="{{vm.file.url}}")
 
+            .bg-image.zoomed.small.flex.center.middle(ng-show="!vm.imageZoomedIn && vm.showSmallImage")
+              img(ng-src="{{vm.file.url}}")
+
+
         .next.flex.flex-grow
           a.arrow-next(ng-class="{invisible: !vm.nextFile}" ng-click="vm.viewNext()")
             button.clean.icon.arrow.right