Lightbox Script

Lightbox.coffee

class Lightbox
  lightboxID:"#lightbox"
  contentID:"#content"
  descriptionID:"#description"
  galleryID:"#gallery-lightbox"
  linksClass:".lightbox-open"

  constructor:(opt, initialize=true)->
    @setDefaults(opt) if _.isObject(opt)
    @init() if initialize

  init:()->
    @addTrigger()
    @addClose()

  addImg:(obj)->
    lb  = document.querySelector(@lightboxID)
    img = lb.querySelector("img")
    img.src = obj.src
    that = @
    $(img).on "load", {align:@align, that:@}, (e)->
      al = e.data
      al.align.call(al.that, @.parentNode)
      $(@).parent().width($(@).width())

    des = lb.querySelector(@descriptionID)
    des.innerText = obj.description

  addTrigger:()->
    $("body").on "click", @linksClass, {handler:@triggerHandler, that:@}, (e)->
      e.preventDefault()
      lb = e.data
      lb.handler.call(lb.that, this)

  addClose:()->
    $("body").on "click", @lightboxID, {handler:@closeHandler, that:@}, (e)->
      e.preventDefault()
      lb = e.data
      lb.handler.call(lb.that, this)

  align:(lb)->
    middle =  ($(window).height()/2) - ($(lb).height()/2)
    center =  ($(window).width()/2) - ($(lb).width()/2)
    $(lb).css('top', middle)
    $(lb).css('left', center)

  closeHandler:(node)->
    node.removeAttribute("style")
    $(node).hide()


  getImg:(node)->
    link= node.getElementsByTagName("a")[0]
    obj = {}
    obj.src = link.href
    obj.description = link.title

    obj

  setDefaults:(opt)->
    @lightboxID = opt.lightbox  if _.has(opt, "lightbox") && _.isString(opt.lightbox)
    @descriptionID = opt.description if _.has(opt, "description") && _.isString(opt.description)
    @galleryID = opt.gallery if _.has(opt, "gallery") && _.isString(opt.gallery)
    @linksClass = opt.links if _.has(opt, "links") && _.isString(opt.links)

  triggerHandler:(node)->
    lb_obj = @getImg(node)
    @addImg(lb_obj)

    $(@lightboxID).fadeIn("slow")

@gll = window.gll ? {}
@gll.Lightbox = Lightbox

jQuery ($) ->
  if $("#lightbox").length > 0
    lightbox = new Lightbox()

lightbox_spec.coffee

describe "Lighbox", ->

  beforeEach ->
    loadFixtures("lightbox")
    @lightbox = new window.gll.Lightbox({}, false)

  it 'It should exist', ->
    expect(@lightbox).toBeDefined()


  describe "Opening Click event", ->

    beforeEach ->
      @clicked = spyOnEvent(".lightbox-open", 'click')

      @lightbox.triggerHandler = jasmine.createSpy('triggerHandler')


    it "should apply click", ->
      @lightbox.addTrigger()
      $(".lightbox-open:first").click()
      expect(@clicked).toHaveBeenPrevented()
      expect(@clicked).toHaveBeenTriggered()
      expect(@lightbox.triggerHandler).toHaveBeenCalled()

  describe "Trigger Handler", ->

    beforeEach ->
      node = "<li class=\"lightbox-open\"><span><a href=\"http://test.com/test.jpg\" title=\"Test1\">Test</a></span></li>"

      div = document.createElement('div')
      div.innerHTML = node
      @el = div.querySelector(".lightbox-open")


    it "should call the correct functions", ->
      @lightbox.getImg = jasmine.createSpy('getImg')
      @lightbox.addImg = jasmine.createSpy('addImg')

      @lightbox.triggerHandler(@el)
      jasmine.Clock.useMock();

      expect(@lightbox.getImg).toHaveBeenCalled()
      expect(@lightbox.addImg).toHaveBeenCalled()


    it "should return an object of img & description",->

      obj = @lightbox.getImg(@el)

      expect(obj).toBeDefined()
      expect(obj.src).toEqual("http://test.com/test.jpg")
      expect(obj.description).toEqual("Test1")

    it "should add image & description to lightbox", ->
      @lightbox.addImg({src:"test.jpg", description:"Test"})
      expect($("#lightbox img")).toHaveAttr("src", "test.jpg")
      expect($("#description")).toContainText("Test")

  describe "close Handler", ->
    beforeEach ->
      @clicked = spyOnEvent(".lightbox-open", 'click')

      @lightbox.triggerHandler = jasmine.createSpy('triggerHandler')


    it "should apply close click", ->
      @clicked = spyOnEvent("#lightbox", 'click')

      @lightbox.closeHandler = jasmine.createSpy('closeHandler')
      @lightbox.addClose()
      $("#lightbox").click()
      expect(@clicked).toHaveBeenTriggered()
      expect(@lightbox.closeHandler).toHaveBeenCalled()


    it "should reset the lightbox", ->
      lb = document.querySelector("#lightbox")
      lb.style.width = "300"
      lb.style.display = "block"
      @lightbox.closeHandler(lb)

      expect($(lb)).not.toBeVisible()