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

Updated slider code to allow shadow around preview #24

Merged
merged 7 commits into from
Feb 17, 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
4 changes: 4 additions & 0 deletions example/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,7 @@ h1 {
}
}
}

.image-viewer-container {
height: 100vh;
}
7 changes: 4 additions & 3 deletions example/views/image-viewer.example.jade
Original file line number Diff line number Diff line change
@@ -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")
88 changes: 16 additions & 72 deletions src/scripts/controllers/image-viewer.controller.coffee
Original file line number Diff line number Diff line change
@@ -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
46 changes: 18 additions & 28 deletions src/scripts/directives/image-viewer.directive.coffee
Original file line number Diff line number Diff line change
@@ -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']
Expand Down
166 changes: 70 additions & 96 deletions src/styles/image-viewer.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}

Loading