lightbox-rails 0.0.2

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2012 Vinny Diehl
+
+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,4 @@
+# lightbox-rails
+
+This plugin allows easy implementation of Lightbox 2 into a Rails app. Better
+documentation and more features are to come.

data/Rakefile

@@ -0,0 +1,25 @@
+#!/usr/bin/env rake
+
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+begin
+  require "rdoc/task"
+rescue LoadError
+  require "rdoc/rdoc"
+  require "rake/rdoctask"
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "doc"
+  rdoc.title = "Lightbox 2 Rails"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.rdoc")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+Bundler::GemHelper.install_tasks

data/lib/lightbox-rails.rb

@@ -0,0 +1,6 @@
+require "lightbox-rails/railtie" if defined? Rails
+
+module LightboxRails
+  class Engine < Rails::Engine
+  end
+end

data/lib/lightbox-rails/lightbox_helper.rb

@@ -0,0 +1,60 @@
+module LightboxRails
+  module LightboxHelper
+    # Takes the photo gallery at +dir+, with the name +name+, and creates a
+    # Lightbox 2 group from them. Within +dir+ there may be a directory named
+    # <tt>thumbs</tt> containing the respective thumbnails for each image.
+    def lightbox_group(name, dir)
+      images = Dir[File.join(dir, "*.{jpg,JPG,png,PNG,gif,GIF}")].
+               sort { |a, b| image_name(a).to_i <=> image_name(b).to_i }
+
+      singles = images.each_with_index.map do |f, i|
+        filename = File.join("/", "assets", f.split(File::SEPARATOR)[-3..-1])
+        thumbname = File.exists?(thumbs_path f) \
+                    ? thumbs_path(filename)
+                    : filename
+
+        title = "#{i + 1} of #{images.size}"
+        cls =
+          "single#{i.zero? ? " first" : i == images.size - 1 ? " last" : ""}"
+
+        content_tag(:div, :class => cls) do
+          content_tag(:a,
+                      :class => "lightbox[#{name.downcase.gsub(" ", "-")}]",
+                      href: filename) do
+            image_tag thumbname, alt: title, size: "100x100"
+          end
+        end
+      end
+
+      lightbox_set singles
+    end
+
+    private
+
+    # Returns the basename of an image without its file extension.
+    #
+    #   image_name "/path/to/name_of_image.jpg"  # => "name_of_image"
+    def image_name(image)
+      File.basename image, "*.{jpg,JPG,png,PNG,gif,GIF}"
+    end
+
+    # Collects +singles+, an array of Lightbox 2 singles, into an image
+    # row/set.
+    def lightbox_set(singles)
+      content_tag(:div, :class => "image-row") do
+        content_tag(:div, :class => "set") do
+          singles.map { |s| concat s }
+        end
+      end
+    end
+
+    # Takes the image at +path+ and returns the path to the thumbnail for that
+    # image, assuming that the thumbnail has the same filename and resides in
+    # a child directory named <tt>thumbs</tt>.
+    #
+    #   thumbs_path "/path/to/image.jpg"  # => "/path/to/thumbs/image.jpg"
+    def thumbs_path(path)
+      File.join File.dirname(path), "thumbs", File.basename(path)
+    end
+  end
+end

data/lib/lightbox-rails/railtie.rb

@@ -0,0 +1,9 @@
+require "lightbox-rails/lightbox_helper"
+
+module LightboxRails
+  class Railtie < Rails::Railtie
+    initializer "lightbox-rails.lightbox_helper" do |app|
+      ActionView::Base.send :include, LightboxHelper
+    end
+  end
+end

data/lib/lightbox-rails/version.rb

@@ -0,0 +1,4 @@
+module LightboxRails
+  # The current version of lightbox-rails.
+  VERSION = "0.0.2"
+end

data/lightbox-rails.gemspec

@@ -0,0 +1,19 @@
+require File.expand_path("../lib/lightbox-rails/version", __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.name = "lightbox-rails"
+  gem.version = LightboxRails::VERSION
+
+  gem.authors = "Vinny Diehl"
+  gem.email = "gbchaosmaster926@gmail.com"
+  gem.homepage = "https://github.com/gbchaosmaster/lightbox-rails"
+
+  gem.summary = "Rails plugin for Lightbox 2"
+  gem.description = "Adds helpers for easy creation of Lightbox 2 groups."
+
+  gem.files = Dir["{lib,vendor}/**/*"] + %w[
+    MIT-LICENSE Rakefile README.md lightbox-rails.gemspec
+  ]
+
+  gem.add_dependency "rails", "~> 3.2.8"
+end

data/vendor/assets/javascripts/lightbox.js.coffee

@@ -0,0 +1,321 @@
+# Lightbox v2.51 by Lokesh Dhakar - http://www.lokeshdhakar.com
+# For more information, visit: http://lokeshdhakar.com/projects/lightbox2/
+# Licensed under the Creative Commons Attribution 2.5 License
+# Modified by Vinny Diehl for the PHS Student Council website
+
+# Use local alias
+$ = jQuery
+
+class LightboxOptions
+  constructor: ->
+    # Image resources (next/previous arrows are in the CSS)
+    @fileLoadingImage = '/assets/lightbox/loading.gif'
+    @fileCloseImage = '/assets/lightbox/close.png'
+
+    # Transition settings
+    @resizeDuration = 700
+    @fadeDuration = 500
+
+    # Labels for "Image # of #"
+    @labelImage = "Image"
+    @labelOf = "of"
+
+class Lightbox
+  constructor: (@options) ->
+    @album = []
+    @currentImageIndex = undefined
+    @init()
+
+  init: ->
+    @enable()
+    @build()
+
+  # Loop through anchors and areamaps looking for rel attributes that contain
+  # 'lightbox'. On clicking these, start lightbox.
+  enable: ->
+    $('body').on 'click', 'a[rel^=lightbox], area[rel^=lightbox]', (e) =>
+      @start $(e.currentTarget)
+      false
+
+  # Build HTML for the lightbox and the overlay.
+  # Attach event handlers to the new DOM elements. click click click
+  build: ->
+    $('<div>', id: 'lightboxOverlay' ).after(
+      $('<div/>', id: 'lightbox').append(
+        $('<div/>', class: 'lb-outerContainer').append(
+          $('<div/>', class: 'lb-container').append(
+            $('<img/>', class: 'lb-image'),
+            $('<div/>', class: 'lb-nav').append(
+              $('<a/>', class: 'lb-prev'),
+              $('<a/>', class: 'lb-next')
+            ),
+            $('<div/>', class: 'lb-loader').append(
+              $('<a/>', class: 'lb-cancel').append(
+                $('<img/>', src: @options.fileLoadingImage)
+              )
+            )
+          )
+        ),
+        $('<div/>', class: 'lb-dataContainer').append(
+          $('<div/>', class: 'lb-data').append(
+            $('<div/>', class: 'lb-details').append(
+              $('<span/>', class: 'lb-caption'),
+              $('<span/>', class: 'lb-number')
+            ),
+            $('<div/>', class: 'lb-closeContainer').append(
+              $('<a/>', class: 'lb-close').append(
+                $('<img/>', src: @options.fileCloseImage)
+              )
+            )
+          )
+        )
+      )
+    ).appendTo $('body')
+
+    # Attach event handlers to the newly minted DOM elements
+    $('#lightboxOverlay').hide().on 'click', (e) =>
+        @end()
+        return false
+
+    $lightbox = $('#lightbox')
+
+    $lightbox.hide().on 'click', (e) =>
+        @end() if $(e.target).attr('id') == 'lightbox'
+        return false
+
+    $lightbox.find('.lb-outerContainer').on 'click', (e) =>
+        @end() if $(e.target).attr('id') == 'lightbox'
+        return false
+
+    $lightbox.find('.lb-prev').on 'click', (e) =>
+      @changeImage @currentImageIndex - 1
+      return false
+
+    $lightbox.find('.lb-next').on 'click', (e) =>
+      @changeImage @currentImageIndex + 1
+      return false
+
+    $lightbox.find('.lb-loader, .lb-close').on 'click', (e) =>
+      @end()
+      return false
+
+    return
+
+  # Show overlay and lightbox. If the image is part of a set, add siblings to
+  # album array.
+  start: ($link) ->
+    $(window).on 'resize', @sizeOverlay
+
+    $('select, object, embed').css visibility: 'hidden'
+    $('#lightboxOverlay')
+      .width($(document).width())
+      .height($(document).height())
+      .fadeIn @options.fadeDuration
+
+    @album = []
+    imageNumber = 0
+
+    if $link.attr('rel') == 'lightbox'
+      # If image is not part of a set
+      @album.push link: $link.attr('href'), title: $link.attr('title')
+    else
+      # Image is part of a set
+      for a, i in $("#{$link.prop 'tagName'}[rel=\"#{$link.attr 'rel'}\"]")
+        @album.push link: $(a).attr('href'), title: $(a).attr('title')
+        if $(a).attr('href') == $link.attr('href')
+          imageNumber = i
+
+    # Position lightbox
+    $window = $(window)
+    top = $window.scrollTop() + $window.height() / 10
+    left = $window.scrollLeft()
+    $lightbox = $('#lightbox')
+    $lightbox
+      .css
+        top: "#{top}px"
+        left: "#{left}px"
+      .fadeIn @options.fadeDuration
+
+    @changeImage(imageNumber)
+    return
+
+  # Hide most UI elements in preparation for the animated resizing of the
+  # lightbox.
+  changeImage: (imageNumber) ->
+    @disableKeyboardNav()
+    $lightbox = $('#lightbox')
+    $image = $lightbox.find('.lb-image')
+
+    @sizeOverlay()
+    $('#lightboxOverlay').fadeIn(@options.fadeDuration)
+
+    $('.loader').fadeIn 'slow'
+    $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide()
+
+    $lightbox.find('.lb-outerContainer').addClass 'animating'
+
+    # When image to show is preloaded, we send the width and height to
+    # sizeContainer()
+    preloader = new Image
+
+    preloader.onload = () =>
+      $image.attr 'src', @album[imageNumber].link
+      $image.width = preloader.width
+      $image.height = preloader.height
+      @sizeContainer preloader.width, preloader.height
+
+    preloader.src = @album[imageNumber].link
+    @currentImageIndex = imageNumber
+
+    return
+
+  # Stretch overlay to fit the document
+  sizeOverlay: () ->
+    $('#lightboxOverlay')
+      .width($(document).width())
+      .height($(document).height())
+
+  # Animate the size of the lightbox to fit the image we are showing
+  sizeContainer: (imageWidth, imageHeight) ->
+    $lightbox = $('#lightbox')
+
+    $outerContainer = $lightbox.find('.lb-outerContainer')
+    oldWidth = $outerContainer.outerWidth()
+    oldHeight = $outerContainer.outerHeight()
+
+    $container = $lightbox.find('.lb-container')
+    containerTopPadding = parseInt $container.css('padding-top'), 10
+    containerRightPadding = parseInt $container.css('padding-right'), 10
+    containerBottomPadding = parseInt $container.css('padding-bottom'), 10
+    containerLeftPadding = parseInt $container.css('padding-left'), 10
+
+    newWidth = imageWidth + containerLeftPadding + containerRightPadding
+    newHeight = imageHeight + containerTopPadding + containerBottomPadding
+
+    # Animate just the width, just the height, or both, depending on what is
+    # different
+    if newWidth != oldWidth && newHeight != oldHeight
+      $outerContainer.animate
+        width: newWidth,
+        height: newHeight
+      , @options.resizeDuration, 'swing'
+    else if newWidth != oldWidth
+      $outerContainer.animate
+        width: newWidth
+      , @options.resizeDuration, 'swing'
+    else if newHeight != oldHeight
+      $outerContainer.animate
+        height: newHeight
+      , @options.resizeDuration, 'swing'
+
+    # Wait for resize animation to finsh before showing the image
+    setTimeout =>
+      $lightbox.find('.lb-dataContainer').width(newWidth)
+      $lightbox.find('.lb-prevLink').height(newHeight)
+      $lightbox.find('.lb-nextLink').height(newHeight)
+      @showImage()
+      return
+    , @options.resizeDuration
+
+    return
+
+
+  # Display the image and it's details and begin preload neighboring images.
+  showImage: ->
+    $lightbox = $('#lightbox')
+    $lightbox.find('.lb-loader').hide()
+    $lightbox.find('.lb-image').fadeIn 'slow'
+
+    @updateNav()
+    @updateDetails()
+    @preloadNeighboringImages()
+    @enableKeyboardNav()
+
+    return
+
+  # Display previous and next navigation if appropriate.
+  updateNav: ->
+    $lightbox = $('#lightbox')
+    $lightbox.find('.lb-nav').show()
+    $lightbox.find('.lb-prev').show() if @currentImageIndex > 0
+    $lightbox.find('.lb-next').show() if @currentImageIndex < @album.length - 1
+    return
+
+  # Display caption, image number, and closing button.
+  updateDetails: ->
+    $lightbox = $('#lightbox')
+
+    if typeof @album[@currentImageIndex].title != 'undefined' && @album[@currentImageIndex].title != ""
+      $lightbox.find('.lb-caption')
+        .html( @album[@currentImageIndex].title)
+        .fadeIn('fast')
+
+    if @album.length > 1
+      $lightbox
+        .find('.lb-number')
+        .html([
+          @options.labelImage, @currentImageIndex + 1,
+          @options.labelOf, @album.length
+        ].join ' ')
+        .fadeIn 'fast'
+    else
+      $lightbox.find('.lb-number').hide()
+
+    $lightbox.find('.lb-outerContainer').removeClass 'animating'
+
+    $lightbox.find('.lb-dataContainer')
+      .fadeIn @resizeDuration, () =>
+        @sizeOverlay()
+
+    return
+
+  # Preload previos and next images in set.
+  preloadNeighboringImages: ->
+    if @album.length > @currentImageIndex + 1
+      preloadNext = new Image
+      preloadNext.src = @album[@currentImageIndex + 1].link
+
+    if @currentImageIndex > 0
+      preloadPrev = new Image
+      preloadPrev.src = @album[@currentImageIndex - 1].link
+
+    return
+
+  enableKeyboardNav: ->
+    $(document).on 'keyup.keyboard', $.proxy(@keyboardAction, this)
+    return
+
+  disableKeyboardNav: ->
+    $(document).off '.keyboard'
+    return
+
+  keyboardAction: (event) ->
+    KEYCODE_ESC = 27
+    KEYCODE_LEFTARROW = 37
+    KEYCODE_RIGHTARROW = 39
+
+    keycode = event.keyCode
+    key = String.fromCharCode(keycode).toLowerCase()
+
+    if keycode == KEYCODE_ESC || key.match(/x|o|c/)
+      @end()
+    else if key == 'p' || keycode == KEYCODE_LEFTARROW
+      if @currentImageIndex != 0
+        @changeImage @currentImageIndex - 1
+    else if key == 'n' || keycode == KEYCODE_RIGHTARROW
+      if @currentImageIndex != @album.length - 1
+        @changeImage @currentImageIndex + 1
+
+    return
+
+  # Closing time
+  end: ->
+    @disableKeyboardNav()
+    $(window).off 'resize', @sizeOverlay
+    $('#lightbox').fadeOut @options.fadeDuration
+    $('#lightboxOverlay').fadeOut @options.fadeDuration
+    $('select, object, embed').css visibility: 'visible'
+
+$ ->
+  options = new LightboxOptions
+  lightbox = new Lightbox options

data/vendor/assets/stylesheets/lightbox.css.sass

@@ -0,0 +1,171 @@
+@import "compass/css3"
+@import "compass/utilities/general/clearfix"
+
+/** Variables **/
+
+$thumbHoverColor: #08C
+$gutter: 20px
+$radius: 4px
+
+/** Styles **/
+
+#lightboxOverlay
+  position: absolute
+  top: 0
+  left: 0
+  z-index: 9999
+  background-color: #000
+  +opacity(0.85)
+  display: none
+
+#lightbox
+  position: absolute
+  left: 0
+  width: 100%
+  z-index: 10000
+  text-align: center
+  line-height: 0
+  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif
+  font-weight: normal
+  img
+    width: auto
+    height: auto
+  a img
+    border: none
+
+.lb-outerContainer
+  position: relative
+  background-color: #fff
+  +pie-clearfix
+  width: 250px
+  height: 250px
+  margin: 0 auto
+  +border-radius($radius)
+
+.lb-container
+  padding: 10px
+
+.lb-loader
+  position: absolute
+  top: 40%
+  left: 0%
+  height: 25%
+  width: 100%
+  text-align: center
+  line-height: 0
+
+.lb-nav
+  position: absolute
+  top: 0
+  left: 0
+  height: 100%
+  width: 100%
+  z-index: 10
+
+.lb-container > .nav
+  left: 0
+
+.lb-nav a
+  outline: none
+
+.lb-prev, .lb-next
+  width: 49%
+  height: 100%
+  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
+  /* Trick IE into showing hover
+  display: block
+
+.lb-prev
+  left: 0
+  float: left
+
+.lb-next
+  right: 0
+  float: right
+
+.lb-prev
+  &:hover
+    background: url(/assets/lightbox/prev.png) left 48% no-repeat
+
+.lb-next
+  &:hover
+    background: url(/assets/lightbox/next.png) right 48% no-repeat
+
+.lb-dataContainer
+  margin: 0 auto
+  padding-top: 5px
+  +pie-clearfix
+  width: 100%
+  +border-bottom-radius($radius)
+
+.lb-data
+  padding: 0 10px
+  color: #bbb
+  .lb-details
+    width: 85%
+    float: left
+    text-align: left
+    line-height: 1.1em
+  .lb-caption
+    font-size: 13px
+    font-weight: bold
+    line-height: 1em
+  .lb-number
+    display: block
+    clear: left
+    padding-bottom: 1.0em
+    font-size: 11px
+  .lb-close
+    width: 35px
+    float: right
+    padding-bottom: 0.7em
+    outline: none
+    &:hover
+      cursor: pointer
+
+/** Page Styles **/
+
+.image-row
+  +pie-clearfix
+  margin: $gutter/2 0
+  .single
+    float: left
+    a
+      float: left
+      display: block
+      background: rgba(255, 255, 255, .1)
+      padding: 7px
+      line-height: 1em
+      +border-radius($radius)
+      +box-shadow(0 1px 4px 0 rgba(0, 0, 0, 0.5))
+      margin-right: $gutter
+      +transition(all .2s ease-out)
+      img
+        +border-radius($radius)
+        border: 1px solid rgba(0, 0, 0, 0.3)
+      &:hover
+        background-color: $thumbHoverColor
+  .set
+    float: left
+    margin-bottom: 5px
+    background: rgba(255, 255, 255, .1)
+    +border-radius($radius)
+    +box-shadow(0 1px 4px 0 rgba(0, 0, 0, 0.5))
+    +transition(all .2s ease-out)
+    &:hover
+      background: rgba(255, 255, 255, .2)
+    .single
+      a
+        background: none
+        +border-radius(0)
+        +box-shadow(none)
+        margin-right: 0
+        &:hover
+          background-color: $thumbHoverColor
+          +box-shadow(0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5))
+    .single.first
+      a
+        +border-left-radius($radius)
+    .single.last
+      a
+        +border-right-radius($radius)

metadata

@@ -0,0 +1,76 @@
+--- !ruby/object:Gem::Specification
+name: lightbox-rails
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+  prerelease: 
+platform: ruby
+authors:
+- Vinny Diehl
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-10-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.8
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.8
+description: Adds helpers for easy creation of Lightbox 2 groups.
+email: gbchaosmaster926@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/lightbox-rails.rb
+- lib/lightbox-rails/version.rb
+- lib/lightbox-rails/lightbox_helper.rb
+- lib/lightbox-rails/railtie.rb
+- vendor/assets/javascripts/lightbox.js.coffee
+- vendor/assets/stylesheets/lightbox.css.sass
+- MIT-LICENSE
+- Rakefile
+- README.md
+- lightbox-rails.gemspec
+homepage: https://github.com/gbchaosmaster/lightbox-rails
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: -2053133620550091799
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: -2053133620550091799
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Rails plugin for Lightbox 2
+test_files: []