Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Show small images in actual size & prevent zoom #23

Merged
merged 5 commits into from
Feb 2, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added example/images/shortimage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]

Expand Down
18 changes: 17 additions & 1 deletion src/scripts/controllers/image-viewer.controller.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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]

Expand All @@ -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]
Expand All @@ -55,6 +65,9 @@ ImageViewerController = ($scope) ->

vm.onFileChange({file: vm.file}) if vm.onFileChange

$scope.setAutoBg = true


vm.selectFile = (file) ->
vm.file = file

Expand All @@ -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

Expand Down
32 changes: 31 additions & 1 deletion src/scripts/directives/image-viewer.directive.coffee
Original file line number Diff line number Diff line change
@@ -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
12 changes: 12 additions & 0 deletions src/styles/image-viewer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@ image-slide-viewer {
}
}

&.small {
> .bg-image {
overflow: auto;
}
}

.bg-image {
margin-top: 40px;
background-size: contain;
Expand All @@ -73,6 +79,12 @@ image-slide-viewer {
&:hover {
cursor: zoom-in;
}

&.small {
&:hover {
cursor: inherit;
}
}
}
}
}
Expand Down
10 changes: 7 additions & 3 deletions src/views/image-viewer.directive.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down