128 lines
3.9 KiB
CoffeeScript
128 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.complete
|
||
|
|
callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
|
||
|
|
else
|
||
|
|
img.on 'load', =>
|
||
|
|
callback.call(this, domImg.naturalWidth, domImg.naturalHeight)
|
||
|
|
|
||
|
|
this.ImageFile = ImageFile
|