radiology slices scroller app

app.coffee

q = (q)-> document.querySelector q
qa = (q)-> document.querySelectorAll q

createImgTag = (url) ->
  img = document.createElement 'img'
  img.src = url
  q '#slices-container'
    .appendChild img

imgIndex = 0
imgCount = 0
nextImg = (down)->
  imgCount = qa '#slices-container img'
    .length
  if down then next = imgIndex + 1 else next = imgIndex - 1
  next = 0 if next < 0
  next = imgCount - 1 if next >= imgCount
  for imgElem in qa '#slices-container img'
    imgElem.classList.remove 'visible'
    imgElem.classList.add 'invisible'
  q("#slices-container img:nth-child(#{ next + 1 })").classList.remove 'invisible'
  q("#slices-container img:nth-child(#{ next + 1 })").classList.add 'visible'
  imgIndex = next

handleFileSelect = (evt)->
  files = evt.target.files
  for f in files
    continue if not f.type.match 'image.*'
    reader = new FileReader
    reader.onload = do (theFile = f)-> func = (e)-> createImgTag e.target.result
    reader.readAsDataURL f

handleScroll = (evt)->
  down = evt.wheelDelta < 0 || evt.detail > 0
  down = evt.originalEvent.wheelDelta < 0 || evt.originalEvent.detail > 0 if evt.originalEvent
  nextImg down

q '#fileinput'
  .addEventListener 'change', (e)->
    q '#slices-container'
      .innerHTML = ''
    handleFileSelect e
  , false

q('#slices-container').addEventListener 'mousewheel', handleScroll
q('#slices-container').addEventListener 'DOMMouseScroll', handleScroll

app.styl

#slices-container
  position relative
  width 100%
  height 75vh
  overflow scroll
  img
    position absolute
    top 0
    left 50%
    transform translateX(-50%)
    visibility hidden
    
    &:first-child
    &.visible
      visibility visible
      
    .invisible
      visibility none

index.jade

doctype
html
  head
    link(rel="stylesheet" href="./app.css")
  body
    h1 Radiology Slices Scroller

    input#fileinput(type="file", multiple)
    #slices-container

    script(src="./app.js")