127 lines
3.9 KiB
CoffeeScript
127 lines
3.9 KiB
CoffeeScript
class @ImageFile
|
|
|
|
# Width where images must fits in, for 2-up this gets divided by 2
|
|
@availWidth = 900
|
|
@viewModes = ['two-up', 'swipe']
|
|
|
|
constructor: (@file) ->
|
|
# Determine if old and new file has same dimensions, if not show 'two-up' view
|
|
this.requestImageInfo $('.two-up.view .frame.deleted img', @file), (deletedWidth, deletedHeight) =>
|
|
this.requestImageInfo $('.two-up.view .frame.added img', @file), (width, height) =>
|
|
if width == deletedWidth && height == deletedHeight
|
|
this.initViewModes()
|
|
else
|
|
this.initView('two-up')
|
|
|
|
initViewModes: ->
|
|
viewMode = ImageFile.viewModes[0]
|
|
|
|
$('.view-modes', @file).removeClass 'hide'
|
|
$('.view-modes-menu', @file).on 'click', 'li', (event) =>
|
|
unless $(event.currentTarget).hasClass('active')
|
|
this.activateViewMode(event.currentTarget.className)
|
|
|
|
this.activateViewMode(viewMode)
|
|
|
|
activateViewMode: (viewMode) ->
|
|
$('.view-modes-menu li', @file)
|
|
.removeClass('active')
|
|
.filter(".#{viewMode}").addClass 'active'
|
|
$(".view:visible:not(.#{viewMode})", @file).fadeOut 200, =>
|
|
$(".view.#{viewMode}", @file).fadeIn(200)
|
|
this.initView viewMode
|
|
|
|
initView: (viewMode) ->
|
|
this.views[viewMode].call(this)
|
|
|
|
prepareFrames = (view) ->
|
|
maxWidth = 0
|
|
maxHeight = 0
|
|
$('.frame', view).each (index, frame) =>
|
|
width = $(frame).width()
|
|
height = $(frame).height()
|
|
maxWidth = if width > maxWidth then width else maxWidth
|
|
maxHeight = if height > maxHeight then height else maxHeight
|
|
.css
|
|
width: maxWidth
|
|
height: maxHeight
|
|
|
|
[maxWidth, maxHeight]
|
|
|
|
views:
|
|
'two-up': ->
|
|
$('.two-up.view .wrap', @file).each (index, wrap) =>
|
|
$('img', wrap).each ->
|
|
currentWidth = $(this).width()
|
|
if currentWidth > ImageFile.availWidth / 2
|
|
$(this).width ImageFile.availWidth / 2
|
|
|
|
this.requestImageInfo $('img', wrap), (width, height) ->
|
|
$('.image-info .meta-width', wrap).text "#{width}px"
|
|
$('.image-info .meta-height', wrap).text "#{height}px"
|
|
$('.image-info', wrap).removeClass('hide')
|
|
|
|
'swipe': ->
|
|
maxWidth = 0
|
|
maxHeight = 0
|
|
|
|
$('.swipe.view', @file).each (index, view) =>
|
|
|
|
[maxWidth, maxHeight] = prepareFrames(view)
|
|
|
|
$('.swipe-frame', view).css
|
|
width: maxWidth + 16
|
|
height: maxHeight + 28
|
|
|
|
$('.swipe-wrap', view).css
|
|
width: maxWidth + 1
|
|
height: maxHeight + 2
|
|
|
|
$('.swipe-bar', view).css
|
|
left: 0
|
|
.draggable
|
|
axis: 'x'
|
|
containment: 'parent'
|
|
drag: (event) ->
|
|
$('.swipe-wrap', view).width (maxWidth + 1) - $(this).position().left
|
|
stop: (event) ->
|
|
$('.swipe-wrap', view).width (maxWidth + 1) - $(this).position().left
|
|
|
|
'onion-skin': ->
|
|
maxWidth = 0
|
|
maxHeight = 0
|
|
|
|
dragTrackWidth = $('.drag-track', @file).width() - $('.dragger', @file).width()
|
|
|
|
$('.onion-skin.view', @file).each (index, view) =>
|
|
|
|
[maxWidth, maxHeight] = prepareFrames(view)
|
|
|
|
$('.onion-skin-frame', view).css
|
|
width: maxWidth + 16
|
|
height: maxHeight + 28
|
|
|
|
$('.swipe-wrap', view).css
|
|
width: maxWidth + 1
|
|
height: maxHeight + 2
|
|
|
|
$('.dragger', view).css
|
|
left: dragTrackWidth
|
|
.draggable
|
|
axis: 'x'
|
|
containment: 'parent'
|
|
drag: (event) ->
|
|
$('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth)
|
|
stop: (event) ->
|
|
$('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth)
|
|
|
|
|
|
|
|
requestImageInfo: (img, callback) ->
|
|
domImg = img.get(0)
|
|
if domImg
|
|
if domImg.complete
|
|
callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
|
|
else
|
|
img.on 'load', =>
|
|
callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
|