lighter_box 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1ca805cbc44387bcd1da3ecbd5d595628f44c417
+  data.tar.gz: 067d9f737fa192fb37a2f6c3a5b39cfff6bee774
+SHA512:
+  metadata.gz: bd58de1a00f2f309930f1735b0e229dd5880577df91e9e4344d7566f331b6104631e551cdd81ece4fbc83cfc6f1542eb04b4b22ff061a452c4fd055f23b571a2
+  data.tar.gz: 86ed656540f815b8f7295724cb90093632ad0fe7b2b1fc32d2959784b89381a7bc0511a02a4db51fe862fe5daf46cf696287fb50fa085bf8e68ab906ef6d804c

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in lighter_box.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Stefan Daschek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,70 @@
+# LighterBox
+
+A very lightweight lightbox with a bare minimum of features:
+
+ * Displays a single image (with caption) or arbitrary content loaded via Ajax.
+ * Fully accessible (note that all UI alt texts and titles are in german).
+ * Gallery mode (navigation between related images / contents).
+ * Supports nested lightboxes.
+
+
+## Requirements
+
+Requires a recent jQuery version (may work with Zepto, too).
+
+Designed to work with current browsers (including minor workarounds to make sure it’s not completely broken in IE9).
+
+
+## Installation
+
+Add `lighter_box` to your Gemfile. Use sprockets directives to include the code in your JS/CSS:
+
+```javascript
+//= require "lighter_box"
+```
+
+```css
+@import "lighter_box"
+```
+
+
+## Usage
+
+Create a new instance of `LighterBox.Ajax` or `LighterBox.Image`, with the link element referencing the target image or content as parameter.
+
+A common pattern is to do this in a event handler like this:
+
+```coffee
+$("body").on "click", "a[data-lightbox]", (ev) ->
+  ev.preventDefault()
+  if $(this).data("lightbox-mode") == "ajax"
+    new LighterBox.Ajax(this)
+  else
+    new LighterBox.Image(this)
+```
+
+
+### Configuration via attributes
+
+The following attributes on the source element (link) can be used to customize LighterBox:
+
+ * `data-lightbox-class`: Additional css class names for the lightbox modal.
+ * `data-lightbox-group`: Used for gallery mode: Next / previous links will be displayed to allow navigation between lightboxes for source elements that share the save value for this attribute.
+
+Image lightbox only:
+
+ * `data-lightbox-caption`: Image caption. If not set, the image’s alt text is used as caption.
+
+Ajax lightbox only:
+
+ * `data-lightbox-fragment`: A jQuery selector to specify the portion of the remote document to be loaded into the lightbox (similar to the fragment feature of [`jQuery.load()`](http://api.jquery.com/load/)).
+
+
+### Events
+
+The following events will be triggered on the lightbox modal element:
+
+ * `lighter-box-content-loaded`: When the content has been completely loaded (lightbox already visible).
+ * `lighter-box-will-hide`: Before the lightbox elements (modal, container and backdrop) are removed from the DOM.
+
+Event handlers will get passed the lightbox instance as second parameter (after the event object).

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/assets/javascripts/lighter_box.coffee

@@ -0,0 +1,252 @@
+IE9 = /MSIE 9\./.test(navigator.userAgent)
+
+
+class Backdrop
+  constructor: ->
+    @isNestedBackdrop = $(".lighter-box-backdrop").length > 0
+    @backdrop = $("<div class='lighter-box-backdrop' />").appendTo("body")
+    unless @isNestedBackdrop
+      $("body").addClass("lighter-box-has-backdrop")
+      $("body > *").wrapAll("<div class='lighter-box-aria-hide-body' aria-hidden='true' />")
+
+  remove: =>
+    @backdrop.remove()
+    unless @isNestedBackdrop
+      $(".lighter-box-aria-hide-body > *").unwrap()
+      $("body").removeClass("lighter-box-has-backdrop")
+
+
+
+class Spinner
+  constructor: (@parentEl) ->
+    @el = $("<div class='lighter-box-spinner' tabindex='0'><div class='sr-only'>wird geladen …</div><div class='rect1' /><div class='rect2' /><div class='rect3' /><div class='rect4' /><div class='rect5' /></div>").hide().appendTo(@parentEl)
+    @delay = null
+
+  showDelayed: (delayMS) =>
+    @_clearDelay()
+    @delay = window.setTimeout(@show, delayMS)
+
+  show: =>
+    @_clearDelay()
+    @el.show().focus()
+
+  remove: =>
+    @_clearDelay()
+    @el.remove()
+    @parentEl.focus()
+
+  _clearDelay: =>
+    window.clearTimeout(@delay)
+
+
+
+class LightboxGroup
+  constructor: (@currentEl) ->
+    @elems = if (groupName = @currentEl.attr("data-lightbox-group"))
+      $("[data-lightbox-group='#{groupName}']")
+    else
+      @currentEl
+
+  index: =>
+    @elems.index(@currentEl)
+
+  hasNext: =>
+    @index() + 1 < @elems.length
+
+  hasPrev: =>
+    @index() - 1 >= 0
+
+  nextHref: =>
+    @elems.eq(@index() + 1).attr("href")
+
+  prevHref: =>
+    @elems.eq(@index() - 1).attr("href")
+
+  next: =>
+    @currentEl = @elems.eq(@index() + 1)
+
+  prev: =>
+    @currentEl = @elems.eq(@index() - 1)
+
+
+
+class ImageModalResizer
+  MIN_CAPTION_WIDTH: 200
+
+  constructor: (@modal) ->
+    @figure     = @modal.find("figure")
+    @img        = @figure.find("img")
+    @figcaption = @figure.find("figcaption")
+    @minImgHeight = parseInt(@img.css("min-height"), 10)
+    @running = false
+
+  run: =>
+    return if @running
+    @running = true
+    if window.requestAnimationFrame then window.requestAnimationFrame(@_run) else @_run()
+
+  _run: =>
+    @img.css("max-height": "none")
+    @modalHeight = @modal.height()
+    @_resize()
+    @_ie9Fix() if IE9
+    @running = false
+
+  _resize: =>
+    if (overflow = @figure.height() - @modalHeight) > 0
+      if (newHeight = @img.height() - overflow) >= @minImgHeight
+        @img.css("max-height": "#{newHeight}px")
+      else
+        @img.css("max-height": "#{@minImgHeight}px")
+        return # Make sure we don't recurse any more
+    captionWidth = Math.max(@img.width(), @MIN_CAPTION_WIDTH)
+    @figcaption.css("max-width": captionWidth)
+    @_resize() if @figure.height() > @modalHeight
+
+  _ie9Fix: =>
+    left = (document.documentElement.clientWidth - @modal.outerWidth()) / 2
+    top  = (document.documentElement.clientHeight - @modal.outerHeight()) / 2
+    @modal.css(left: "#{left}px", top: "#{top}px")
+
+
+
+class LighterBox
+  constructor: (srcEl) ->
+    @eventNamespace = "lighter-box-#{new Date().getTime()}"
+    @srcEl = $(srcEl)
+    @originalFocusEl = $(":focus")
+    @lightboxGroup = new LightboxGroup(@srcEl)
+    @backdrop = new Backdrop()
+    @container = @_createContainer()
+    @modal = @_createModal(@container)
+    @modal.addClass(@srcEl.data("lightbox-class")).data("lighter-box", this)
+    @_createInnerModal()
+
+    @container.on("click.#{@eventNamespace}", (ev) => @hide() if ev.target == @container[0])
+    @container.on("click.#{@eventNamespace}", "[data-lighter-box-dismiss]", @hide)
+    @container.on("click.#{@eventNamespace}", "[data-lighter-box-prev]", (ev) => ev.preventDefault(); @_showPrev())
+    @container.on("click.#{@eventNamespace}", "[data-lighter-box-next]", (ev) => ev.preventDefault(); @_showNext())
+    @container.on("keydown.#{@eventNamespace}", @_onKeydown)
+    @_trapFocus()
+    @modal.focus()
+
+    @_setContent().then =>
+      @_ie9Fix() if IE9
+
+  hide: =>
+    @_releaseFocus()
+    @container.off(".#{@eventNamespace}")
+    $(window).off(".#{@eventNamespace}")
+    @modal.trigger("lighter-box-will-hide", [this])
+    @container.remove()
+    @backdrop.remove()
+    @originalFocusEl.focus()
+
+  _createContainer: () =>
+    $("<div class='lighter-box-container' />").appendTo("body")
+
+  _createModal: (container) =>
+    modal = $("<div class='lighter-box-modal' role='dialog' aria-hidden='false' tabindex='0'/>").appendTo(container)
+    $("<button class='lighter-box-close-button' title='Vergrößerte Ansicht schließen' data-lighter-box-dismiss><span aria-hidden='true'>×</span></button>").appendTo(modal)
+    $("<a data-lighter-box-prev class='lighter-box-prev-link' href='#' title='Voriges Bild'><span aria-hidden='true'>‹</span></a>").appendTo(container)
+    $("<a data-lighter-box-next class='lighter-box-next-link' href='#' title='Nächstes Bild'><span aria-hidden='true'>›</span></a>").appendTo(container)
+    modal
+
+  _createInnerModal: =>
+    # Template method, override in subclasses if needed
+
+  _setContent: =>
+    prevLink = @container.find("[data-lighter-box-prev]").hide()
+    nextLink = @container.find("[data-lighter-box-next]").hide()
+    spinner = new Spinner(@modal)
+    spinner.showDelayed(100)
+    @_loadContent().then =>
+      spinner.remove()
+      prevLink.attr("href", @lightboxGroup.prevHref()).show() if @lightboxGroup.hasPrev()
+      nextLink.attr("href", @lightboxGroup.nextHref()).show() if @lightboxGroup.hasNext()
+      @modal.trigger("lighter-box-content-loaded", [this])
+
+  _loadContent: =>
+    throw "_loadContent needs to be overriden in a subclass."
+
+  _trapFocus: =>
+    $(document).on "focusin.#{@eventNamespace}", (ev) =>
+      return unless @_isForemost()
+      @modal.focus() unless $.contains(@container[0], ev.target)
+
+  _releaseFocus: =>
+    $(document).off "focusin.#{@eventNamespace}"
+
+  _onKeydown: (ev) =>
+    return unless @_isForemost()
+    switch ev.which
+      when 27 then ev.preventDefault(); @hide()
+      when 39 then ev.preventDefault(); @_showNext()
+      when 37 then ev.preventDefault(); @_showPrev()
+
+  _showNext: =>
+    if @lightboxGroup.hasNext()
+      @srcEl = @lightboxGroup.next()
+      @_setContent()
+      @modal.focus()
+
+  _showPrev: =>
+    if @lightboxGroup.hasPrev()
+      @srcEl = @lightboxGroup.prev()
+      @_setContent()
+      @modal.focus()
+
+  _isForemost: =>
+    @container.nextAll(".lighter-box-container").length == 0
+
+  _ie9Fix: =>
+    @modal.addClass("ie9")
+
+
+
+class ImageLighterBox extends LighterBox
+  constructor: (srcEl) ->
+    super(srcEl)
+    @resizer = new ImageModalResizer(@modal)
+    $(window).on("resize.#{@eventNamespace}", => @resizer.run())
+
+  _createInnerModal: =>
+    figure = $("<figure />").appendTo(@modal)
+    $("<figcaption id='lighter-box-figcaption' class='lighter-box-figcaption'/>").appendTo(figure)
+    $("<img class='lighter-box-image'>").attr("aria-labelledby": "lighter-box-figcaption").prependTo(figure)
+
+  _loadContent: =>
+    $.Deferred (deferred) =>
+      href = @srcEl.attr("href")
+      caption = @srcEl.data("lightbox-caption") || @srcEl.find("img").attr("alt") || ""
+      newImg = $("<img>").attr(src: href).one "load", =>
+        @modal.find("img").attr(src: newImg.attr("src"))
+        @modal.find("figcaption").text(caption).toggleClass("empty-caption", caption.trim() == "")
+        @resizer.run()
+        deferred.resolve()
+
+  _ie9Fix: =>
+    super()
+    @resizer.run()
+
+
+
+class AjaxLighterBox extends LighterBox
+  constructor: (srcEl) ->
+    super(srcEl)
+
+  _createInnerModal: =>
+    @ajaxContainer = $("<div/>").appendTo(@modal)
+
+  _loadContent: =>
+    href = @srcEl.attr("href")
+    fragment = @srcEl.data("lightbox-fragment")
+    $.get href, (data) =>
+      data = $(data).find(fragment) if fragment
+      @ajaxContainer.html(data)
+
+
+
+window.LighterBox =
+  Ajax: AjaxLighterBox
+  Image: ImageLighterBox

data/lib/assets/stylesheets/lighter_box.sass

@@ -0,0 +1,159 @@
+$lighter-box-margin: 24px !default
+$lighter-box-padding: 24px !default
+
+body.lighter-box-has-backdrop
+  // Damit lässt sich zwar auf Desktop-Browsern bequem das Scrolling „unter“ dem Modal verhindern, aber es hat zwei Probleme:
+  //  * Funktioniert nicht auf mobilen Browsern
+  //  * Blendet einen eventuell vorhandenen Scrollbar aus, dadurch kanns passieren, dass das Layout „hüpft“. (Bootstrap fixt das, indem sie die Scrollbar-Breite ausmessen und das Bodypadding dann explizit entsprechend anpassen – geht, ist aber recht aufwändig.)
+  //overflow: hidden
+
+.lighter-box-backdrop
+  position: fixed
+  left: 0
+  top: 0
+  width: 100vw
+  height: 100vh
+  background: rgba(0, 0, 0, 0.6)
+
+.lighter-box-container
+  position: fixed
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  display: flex
+  align-items: center
+  justify-content: center
+
+.lighter-box-modal
+  position: relative
+  background: #fff
+  padding: $lighter-box-padding
+  box-sizing: border-box
+  min-width: 120px // Damit der (absolut positionierte) Spinner nicht breiter ist als die (noch leere) Lightbox
+  min-height: 100px // Damit der (absolut positionierte) Spinner nicht breiter ist als die (noch leere) Lightbox
+  max-width: calc(100vw - #{2 * $lighter-box-margin})
+  max-height: calc(100vh - #{2 * $lighter-box-margin})
+  overflow-y: auto
+
+.lighter-box-close-button
+  position: absolute
+  top: 0px
+  right: 0px
+  box-sizing: border-box
+  width: 24px
+  height: 24px
+  border: none
+  padding: 0
+  background: transparent
+  text-align: center
+  font: bold 18px/20px sans-serif
+  color: #ccc
+  cursor: pointer
+  &:hover, &:focus
+    color: #555
+
+.lighter-box-prev-link, .lighter-box-next-link
+  $width: ($lighter-box-margin + $lighter-box-padding) * 0.9
+  $height: $width
+  position: absolute
+  top: calc(50% - #{$height / 2})
+  width: $width
+  height: $height
+  text-decoration: none
+  font-size: #{$height * 0.8}
+  line-height: #{$height * 0.9}
+  background: rgba(52, 52, 52, 0.85)
+  color: #ccc
+  text-align: center
+  > span
+    font-weight: bold
+    color: inherit
+  &:hover, &:focus
+    color: #fff
+    background: rgba(22, 22, 22, 0.9)
+    text-decoration: none
+
+.lighter-box-prev-link
+  left: 0px
+.lighter-box-next-link
+  right: 0px
+
+.lighter-box-image
+  display: block
+  margin: auto
+  max-width: 100%
+  min-height: 30px
+
+.lighter-box-figcaption
+  margin: 20px 0 0
+  text-align: center
+  line-height: 1.2
+  &.empty-caption
+    margin-top: 0
+
+
+.lighter-box-spinner
+  $width: 80px
+  $height: 55px
+  box-sizing: border-box
+  padding: 15px
+  position: fixed
+  background: rgba(50, 50, 50, 0.8)
+  border-radius: 4px
+  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.25)
+  width: $width
+  height: $height
+  left: calc(50% - #{$width / 2})
+  top: calc(50% - #{$height / 2})
+  text-align: center
+  font-size: 10px
+  &:focus
+    outline: none
+
+  > div
+    background-color: #eee
+    height: 100%
+    width: 5px
+    margin: 0 1px
+    display: inline-block
+    -webkit-animation: lighter-box-loader-anim 1.2s infinite ease-in-out
+    animation: lighter-box-loader-anim 1.2s infinite ease-in-out
+
+  .rect2
+    -webkit-animation-delay: -1.1s
+    animation-delay: -1.1s
+
+  .rect3
+    -webkit-animation-delay: -1.0s
+    animation-delay: -1.0s
+
+  .rect4
+    -webkit-animation-delay: -0.9s
+    animation-delay: -0.9s
+
+  .rect5
+    -webkit-animation-delay: -0.8s
+    animation-delay: -0.8s
+
+@-webkit-keyframes lighter-box-loader-anim
+  0%, 40%, 100%
+    -webkit-transform: scaleY(0.5)
+
+  20%
+    -webkit-transform: scaleY(1)
+
+@keyframes lighter-box-loader-anim
+  0%, 40%, 100%
+    transform: scaleY(0.5)
+    -webkit-transform: scaleY(0.5)
+
+  20%
+    transform: scaleY(1)
+    -webkit-transform: scaleY(1)
+
+
+.lighter-box-modal.ie9
+  display: inline-block
+  width: auto
+  margin: 0

data/lib/lighter_box/version.rb

@@ -0,0 +1,3 @@
+module LighterBox
+  VERSION = "0.1.0"
+end

data/lib/lighter_box.rb

@@ -0,0 +1,9 @@
+require "lighter_box/version"
+
+module LighterBox
+  # We need to subclass Rails::Engine, so that Rails adds our assets directory to its assets search path.
+  if defined? Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lighter_box.gemspec

@@ -0,0 +1,26 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'lighter_box/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "lighter_box"
+  spec.version       = LighterBox::VERSION
+  spec.authors       = ["Stefan Daschek"]
+  spec.email         = ["stefan@die-antwort.eu"]
+
+  spec.summary       = %q{Lightweight accessible lightbox.}
+  spec.homepage      = "https://github.com/die-antwort/lighter_box"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "coffee-script", "~> 2.2"
+  spec.add_dependency "sass", "~> 3.2"
+
+  spec.add_development_dependency "bundler", "~> 1.9"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

metadata

@@ -0,0 +1,110 @@
+--- !ruby/object:Gem::Specification
+name: lighter_box
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Stefan Daschek
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-03-25 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: coffee-script
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.2'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.9'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: 
+email:
+- stefan@die-antwort.eu
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/assets/javascripts/lighter_box.coffee
+- lib/assets/stylesheets/lighter_box.sass
+- lib/lighter_box.rb
+- lib/lighter_box/version.rb
+- lighter_box.gemspec
+homepage: https://github.com/die-antwort/lighter_box
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.3
+signing_key: 
+specification_version: 4
+summary: Lightweight accessible lightbox.
+test_files: []