###
Lightbox for Bootstrap 3 by @ashleydw
https://github.com/ashleydw/lightbox
License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
###
"use strict";
$ = jQuery
EkkoLightbox = ( element, options ) ->
@options = $.extend({
title : null
footer : null
remote : null
}, $.fn.ekkoLightbox.defaults, options || {})
@$element = $(element)
content = ''
@modal_id = if @options.modal_id then @options.modal_id else 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1)
header = ''
footer = ''
$(document.body).append '' + header + '
' + footer + '
'+@options.loadingMessage+'
'
@
showYoutubeVideo : (id) ->
width = @checkDimensions( @$element.data('width') || 560 )
height = width / ( 560/315 ) # aspect ratio
@showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1', width, height)
showVimeoVideo : (id) ->
width = @checkDimensions( @$element.data('width') || 560 )
height = width / ( 500/281 ) # aspect ratio
@showVideoIframe(id + '?autoplay=1', width, height)
showInstagramVideo : (id) ->
# instagram load their content into iframe's so this can be put straight into the element
width = @checkDimensions @$element.data('width') || 612
@resize width
height = width + 80
@lightbox_body.html ''
@options.onContentLoaded.call(@)
@modal_arrows.css 'display', 'none' if @modal_arrows #hide the arrows when showing video
showVideoIframe: (url, width, height) -> # should be used for videos only. for remote content use loadRemoteContent (data-type=url)
height = height || width # default to square
@resize width
@lightbox_body.html ''
@options.onContentLoaded.call(@)
@modal_arrows.css 'display', 'none' if @modal_arrows #hide the arrows when showing video
@
loadRemoteContent : (url) ->
width = @$element.data('width') || 560
@resize width
disableExternalCheck = @$element.data('disableExternalCheck') || false
# external urls are loading into an iframe
if !disableExternalCheck && !@isExternal(url)
@lightbox_body.load url, $.proxy =>
@$element.trigger('loaded.bs.modal')
else
@lightbox_body.html ''
@options.onContentLoaded.call(@)
@modal_arrows.css 'display', 'none' if @modal_arrows #hide the arrows when remote content
@
isExternal : (url) ->
match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
return true if typeof match[1] == "string" && match[1].length > 0 && match[1].toLowerCase() != location.protocol
return true if typeof match[2] == "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"), "") != location.host
false
error : ( message ) ->
@lightbox_body.html message
@
preloadImage : ( src, onLoadShowImage) ->
img = new Image()
if !onLoadShowImage? || onLoadShowImage == true
img.onload = =>
image = $('![]()
')
image.attr('src', img.src)
image.addClass('img-responsive')
@lightbox_body.html image
@modal_arrows.css 'display', 'block' if @modal_arrows
image.load =>
@resize img.width
@options.onContentLoaded.call(@)
img.onerror = =>
@error 'Failed to load image: ' + src
img.src = src
img
resize : ( width ) ->
#resize the dialog based on the width given, and adjust the directional arrow padding
width_total = width + @border.left + @padding.left + @padding.right + @border.right
@modal_dialog.css('width', 'auto') .css('max-width', width_total);
@lightbox_container.find('a').css 'line-height', ->
$(@).parent().height() + 'px'
@
checkDimensions: (width) ->
#check that the width given can be displayed, if not return the maximum size that can be
width_total = width + @border.left + @padding.left + @padding.right + @border.right
body_width = document.body.clientWidth
if width_total > body_width
width = @modal_body.width()
width
close : ->
@modal.modal('hide');
addTrailingSlash: (url) ->
if url.substr(-1) != '/'
url += '/'
url
}
$.fn.ekkoLightbox = ( options ) ->
@each ->
$this = $(this)
options = $.extend({
remote : $this.attr('data-remote') || $this.attr('href')
gallery_parent_selector : $this.attr('data-parent')
type : $this.attr('data-type')
}, options, $this.data())
new EkkoLightbox(@, options)
@
$.fn.ekkoLightbox.defaults = {
gallery_parent_selector: 'document.body'
left_arrow_class: '.glyphicon .glyphicon-chevron-left' #include class . here - they are stripped out later
right_arrow_class: '.glyphicon .glyphicon-chevron-right' #include class . here - they are stripped out later
directional_arrows: true #display the left / right arrows or not
type: null #force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
always_show_close: true #always show the close button, even if there is no title
loadingMessage: 'Loading...',
onShow : ->
onShown : ->
onHide : ->
onHidden : ->
onNavigate : ->
onContentLoaded : ->
}