ronny · December 11, 2015 04:28
diff --git a/Gemfile b/Gemfile
 source :rubygems

 # Turbolinks and jQuery.turbolinks without Rails dependencies
 gem 'turbolinks', :git => 'git://github.com/ronny/turbolinks.git', :branch => 'lite'
 gem 'jquery-turbolinks', :git => 'git://github.com/ronny/jquery.turbolinks.git', :branch => 'lite'
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Test Page</title>
    <meta charset='utf-8' />
    <style>
      #lightbox-overlay, #lightbox {
        top: 0;
        left: 0;
        overflow: hidden;
        background-color: #fff;
        z-index: 9999;
      }

      #lightbox-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        opacity: 0.8;
      }

      #lightbox {
        position: absolute;
        padding: 30px 40px;
        -webkit-box-shadow: 0px 0px 6px 0px rgba(127, 127, 127, 0.5);
                box-shadow: 0px 0px 6px 0px rgba(127, 127, 127, 0.5);
      }
    </style>
  </head>
  <body>
    <div id="spinner"><blink>Loading&hellip;</blink></div>
    
    <p><a class="lightbox" href="http://www.google.com">Google in lightbox</a></p>
    <p><a href="http://www.google.com">Google</a></p>
    
    <div id='lightbox-overlay' style='display:none'></div>
    <div id='lightbox' style='display:none'></div>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
    <!-- https://github.com/ronny/jquery.turbolinks/tree/lite -->
    <script src='jquery-turbolinks.js'></script>
    <script src='turbolinks.js'></script>
    <script>
      (function() {
        var hideSpinner, onPageLoad, showSpinner;

        onPageLoad = function() {
          return $('a.lightbox').lightbox();
        };

        showSpinner = function() {
          return $("#spinner").show();
        };

        hideSpinner = function() {
          return $("#spinner").hide();
        };

        $(onPageLoad);

        $(document).on('page:load', onPageLoad);

        $(document).on('page:fetch', showSpinner);

        $(document).on('page:change', hideSpinner);

      }).call(this);
    </script>
  </body>
 </html>
diff --git a/jquery.lightbox.js.coffee b/jquery.lightbox.js.coffee
 (($) ->
  # http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen
  $.fn.centerOnWindow = ->
    @css("top",  Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop())  + "px")
    @css("left", Math.max(0, (($(window).width()  - $(this).outerWidth())  / 2) + $(window).scrollLeft()) + "px")
    this

  $.fn.lightbox = (options) ->
    options = $.extend
      overlaySelector: '#lightbox-overlay'
      lightboxSelector: '#lightbox'
    , options

    class Lightbox
      constructor: ->
        @$el = $(options.lightboxSelector)
        @$overlay = $(options.overlaySelector)
        @bindEvents()

      bindEvents: ->
        # console.log "bindEvents"
        @$overlay.on 'click', (e) => @_onOverlayClick(e)
        $(document).on 'keydown', (e) => @_onKeyDown(e)

      unbindEvents: ->
        # console.log "unbindEvents"
        @$overlay.off 'click'
        $(document).off 'keydown'

      show: ->
        @$overlay.show()
        @$el.show()

      hide: ->
        @$el.hide()
        @$overlay.hide()

      load: ($initiator) ->
        url = $initiator.attr("href")
        $.ajax(url: url)
          .done (content, status, xhr) =>
            @$el.html(content)
          .fail (xhr, status, content) =>
            @$el.html("<h1>Unable to load content. Please try again.</h1><br/><br/>" + content)
          .always =>
            @reposition()
            @show()

      reposition: ->
        @$el.centerOnWindow()

      _onOverlayClick: (e) ->
        e.preventDefault()
        e.stopPropagation()
        @hide()

      _onKeyDown: (e) ->
        if e.keyCode is 27
          e.preventDefault()
          @hide()

    lightbox = new Lightbox()

    $initiator = this

    onInitiatorClick = (e) ->
      e.preventDefault()
      e.stopPropagation()
      lightbox.load($(this))

    $initiator.on 'click', onInitiatorClick

    # Prevent memory leaks by unbinding event listeners
    $(document).one 'page:change', =>
      $initiator.off 'click', onInitiatorClick
      lightbox.unbindEvents()

    this
 )(jQuery)
	source :rubygems

	# Turbolinks and jQuery.turbolinks without Rails dependencies
	gem 'turbolinks', :git => 'git://github.com/ronny/turbolinks.git', :branch => 'lite'
	gem 'jquery-turbolinks', :git => 'git://github.com/ronny/jquery.turbolinks.git', :branch => 'lite'
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test Page</title>
	<meta charset='utf-8' />
	<style>
	#lightbox-overlay, #lightbox {
	top: 0;
	left: 0;
	overflow: hidden;
	background-color: #fff;
	z-index: 9999;
	}

	#lightbox-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	}

	#lightbox {
	position: absolute;
	padding: 30px 40px;
	-webkit-box-shadow: 0px 0px 6px 0px rgba(127, 127, 127, 0.5);
	box-shadow: 0px 0px 6px 0px rgba(127, 127, 127, 0.5);
	}
	</style>
	</head>
	<body>
	<div id="spinner"><blink>Loading…</blink></div>

	<p><a class="lightbox" href="http://www.google.com">Google in lightbox</a></p>
	<p><a href="http://www.google.com">Google</a></p>

	<div id='lightbox-overlay' style='display:none'></div>
	<div id='lightbox' style='display:none'></div>
	<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
	<!-- https://github.com/ronny/jquery.turbolinks/tree/lite -->
	<script src='jquery-turbolinks.js'></script>
	<script src='turbolinks.js'></script>
	<script>
	(function() {
	var hideSpinner, onPageLoad, showSpinner;

	onPageLoad = function() {
	return $('a.lightbox').lightbox();
	};

	showSpinner = function() {
	return $("#spinner").show();
	};

	hideSpinner = function() {
	return $("#spinner").hide();
	};

	$(onPageLoad);

	$(document).on('page:load', onPageLoad);

	$(document).on('page:fetch', showSpinner);

	$(document).on('page:change', hideSpinner);

	}).call(this);
	</script>
	</body>
	</html>
	(($) ->
	# http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen
	$.fn.centerOnWindow = ->
	@css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px")
	@css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px")
	this

	$.fn.lightbox = (options) ->
	options = $.extend
	overlaySelector: '#lightbox-overlay'
	lightboxSelector: '#lightbox'
	, options

	class Lightbox
	constructor: ->
	@$el = $(options.lightboxSelector)
	@$overlay = $(options.overlaySelector)
	@bindEvents()

	bindEvents: ->
	# console.log "bindEvents"
	@$overlay.on 'click', (e) => @_onOverlayClick(e)
	$(document).on 'keydown', (e) => @_onKeyDown(e)

	unbindEvents: ->
	# console.log "unbindEvents"
	@$overlay.off 'click'
	$(document).off 'keydown'

	show: ->
	@$overlay.show()
	@$el.show()

	hide: ->
	@$el.hide()
	@$overlay.hide()

	load: ($initiator) ->
	url = $initiator.attr("href")
	$.ajax(url: url)
	.done (content, status, xhr) =>
	@$el.html(content)
	.fail (xhr, status, content) =>
	@$el.html("<h1>Unable to load content. Please try again.</h1><br/><br/>" + content)
	.always =>
	@reposition()
	@show()

	reposition: ->
	@$el.centerOnWindow()

	_onOverlayClick: (e) ->
	e.preventDefault()
	e.stopPropagation()
	@hide()

	_onKeyDown: (e) ->
	if e.keyCode is 27
	e.preventDefault()
	@hide()

	lightbox = new Lightbox()

	$initiator = this

	onInitiatorClick = (e) ->
	e.preventDefault()
	e.stopPropagation()
	lightbox.load($(this))

	$initiator.on 'click', onInitiatorClick

	# Prevent memory leaks by unbinding event listeners
	$(document).one 'page:change', =>
	$initiator.off 'click', onInitiatorClick
	lightbox.unbindEvents()

	this
	)(jQuery)