hermitage 0.0.2.1 → 0.0.3

data/app/assets/javascripts/hermitage.js.coffee

@@ -6,33 +6,120 @@ root = exports ? this
 
 # Hermitage options
 root.hermitage =
+  looped: true
+
   # Image viewer z-index property
-  zIndex: 10
+  default:
+    styles:
+      zIndex: 10
+      position: 'fixed'
+      top: 0
+      left: 0
+      width: '100%'
+      height: '100%'
 
   # Darkening properties
   darkening:
-    opacity: 0.75 # 0 if you don't want darkening
-    color: '#000'
+    default:
+      attributes:
+        id: 'overlay'
+      styles:
+        position: 'absolute'
+        top: 0
+        left: 0
+        width: '100%'
+        height: '100%'
+        backgroundColor: '#000'
+        
+    opacity: 0.85 # 0 if you don't want darkening
+    styles: {}
 
   # Navigation buttons' properties
-  navigationButton:
+  navigationButtons:
+    default:
+      styles:
+        position: 'absolute'
+        width: '50px'
+        height: '100%'
+        top: 0
+        cursor: 'pointer'
+        color: '#FAFAFA'
+        fontSize: '30px'
+        fontFamily: 'Tahoma,Arial,Helvetica,sans-serif'
+        textAlign: 'center'
+        verticalAlign: 'middle'
+        
     enabled: true
-    color: '#777'
-    width: 50 # px
-    borderRadius: 7 # px
-    margin: 10 # Distance between navigation buttons and image, px
+    styles: {}
+
+    next:
+      default:
+        attributes:
+          id: 'navigation-right'
+        styles:
+          right: 0
+      styles: {}
+      text: '▶'
+
+    previous:
+      default:
+        attributes:
+          id: 'navigation-left'
+        styles:
+          left: 0
+      styles: {}
+      text: '◀'
 
   # Close button properties
   closeButton:
+    default:
+      attributes:
+        id: 'close-button'
+      styles:
+        position: 'absolute'
+        top: 0
+        right: 0
+        color: '#FFF'
+        fontSize: '30px'
+        fontFamily: 'Tahoma,Arial,Helvetica,sans-serif'
+        whiteSpace: 'nowrap'
+        cursor: 'pointer'
+        
     enabled: true
     text: '×'
-    color: '#FFF'
-    fontSize: 30 # px
+    styles: {}
+
+  # Current image properties
+  image:
+    default:
+      attributes:
+        class: 'current'
+      styles:
+        cursor: 'pointer'
+        maxWidth: 'none' # Fix the conflict with Twitter Bootstrap
+    styles: {}
   
-  # Minimum distance between window borders and image, px
-  windowPadding:
-    x: 50
-    y: 50
+  # Bottom panel (for text or anything else)
+  bottomPanel:
+    default:
+      attributes:
+        class: 'bottom-panel'
+      styles:
+        position: 'absolute'
+        bottom: 0
+        height: '70px'
+    styles: {}
+
+    text:
+      default:
+        attributes:
+          class: 'text'
+        styles:
+          width: '100%'
+          height: '100%'
+          textAlign: 'center'
+          color: '#FAFAFA'
+      styles: {}
 
   # Minimum size of scaled image, px
   minimumSize:
@@ -45,21 +132,33 @@ root.hermitage =
   # Array of images of current gallery
   images: []
 
+  # Array of texts for current gallery
+  texts: []
+
+  # Timeout before adjustig elements after window resize
+  resizeTimeout: 100
+
+  # Timer for resizing
+  resizeTimer: undefined
+
   # Initializes the gallery on this page
   init: ->
     # Create Hermitage layer if it doesn't exist
     if $('#hermitage').length is 0
-      layer = $('<div>', {id: 'hermitage'})
-      layer.css('position', 'fixed')
-      layer.hide()
-      $('body').append(layer)
+      $('<div>')
+        .attr('id', 'hermitage')
+        .css(hermitage.default.styles)
+        .hide()
+        .appendTo($('body'))
 
-    # Clear old images array
+    # Clear old images and texts array
     hermitage.images.length = 0
+    hermitage.texts.length = 0
 
-    # Create new images array
+    # Create new images and texts array
     $.each $('a[rel="hermitage"]'), ->
       hermitage.images.push($(this).attr('href'))
+      hermitage.texts.push($(this).attr('title'))
 
     # Set on click handlers to all elements that
     # have 'hermitage' rel attribute
@@ -67,145 +166,142 @@ root.hermitage =
       openGallery(this)
       event.preventDefault()
 
+    # Set event on window resize
+    $(window).resize ->
+      clearTimeout(hermitage.resizeTimer) if hermitage.resizeTimer
+      hermitage.resizeTimer = setTimeout \
+        -> adjustImage(true),
+        hermitage.resizeTimeout
+
 #
 # Helpers
 #
 
 # Place element at the center of screen
-center = (element) ->
-  element.css('position', 'fixed')
-  element.css('top', "#{Math.max(0, ($(window).height() - $(element).outerHeight()) / 2)}px")
-  element.css('left', "#{Math.max(0, ($(window).width() - $(element).outerWidth()) / 2)}px")
-  element
-
-#
-# Hermitage logic
-#
-
-# Creates overlay layer, shows it and sets its click handler
-createOverlay = ->
-  overlay = $('<div>', {id: 'overlay'})
-  $('#hermitage').append(overlay)
+$.fn.center = (withAnimation = false, width = 0, height = 0, offsetX = 0, offsetY = 0) ->
+  this.css('position', 'absolute')
 
-  overlay.css('position', 'fixed')
-  overlay.css('top', '0')
-  overlay.css('left', '0')
-  overlay.css('background', hermitage.darkening.color)
-  overlay.css('display', 'block')
-  overlay.css('opacity', hermitage.darkening.opacity)
-  overlay.css('filter', "alpha(opacity='#{hermitage.darkening.opacity * 100}')")
-  overlay.css('width', '100%')
-  overlay.css('height', '100%')
+  width = $(this).outerWidth() if width is 0
+  height = $(this).outerWidth() if height is 0
 
-  overlay.hide()
-  overlay.fadeIn()
+  param =
+    top: "#{Math.max(0, ($(window).height() - height) / 2 + offsetY)}px"
+    left: "#{Math.max(0, ($(window).width() - width) / 2 + offsetX)}px"
 
-  overlay.click(closeGallery)
+  if withAnimation
+    this.animate(param, { duration: hermitage.animationDuration, queue: false })
+  else
+    this.css(param)
 
-  overlay
+$.fn.setSize = (width, height, withAnimation = false) ->
+  params = { width: width, height: height}
 
-# Creates base navigation button and returns it
-createNavigationButton = ->
-  button = $('<div>')
-  $('#hermitage').append(button)
-
-  button.css('position', 'fixed')
-  button.css('width', "#{hermitage.navigationButton.width}px")
-  button.css('display', 'block')
-  button.css('cursor', 'pointer')
+  if withAnimation
+    this.animate(params, { duration: hermitage.animationDuration, queue: false })
+  else
+    this.css(params)
 
-  button.css('border-width', '1px')
-  button.css('border-style', 'solid')
-  button.css('border-color', hermitage.navigationButton.color)
-  button.css('display', 'block')
-  button.css('border-radius', "#{hermitage.navigationButton.borderRadius}px")
-  button.css('-webkit-border-radius', "#{hermitage.navigationButton.borderRadius}px")
-  button.css('-moz-border-radius', "#{hermitage.navigationButton.borderRadius}px")
+$.fn.maximizeLineHeight = (withAnimation = false) ->
+  param = { lineHeight: "#{this.outerHeight()}px" }
+  
+  if withAnimation
+    this.animate(param, { duration: hermitage.animationDuration, queue: false })
+  else
+    this.css(param)
 
-  button.css('color', hermitage.navigationButton.color)
-  button.css('text-align', 'center')
-  button.css('vertical-align', 'middle')
-  button.css('font', '30px Tahoma,Arial,Helvetica,sans-serif')
+#
+# Hermitage logic
+#
 
-  button.hide()
+# Creates darkening overlay, shows it and sets its click handler
+createDarkening = ->
+  $('<div>')
+    .attr(hermitage.darkening.default.attributes)
+    .css(hermitage.darkening.default.styles)
+    .css('opacity', hermitage.darkening.opacity)
+    .css('filter', "alpha(opacity='#{hermitage.darkening.opacity * 100}')")
+    .css(hermitage.darkening.styles)
+    .appendTo($('#hermitage'))
+    .hide()
+    .fadeIn()
+    .click(closeGallery)
 
-  button
+# Creates base navigation button and returns it
+createNavigationButton = ->
+  $('<div>')
+    .appendTo($('#hermitage'))
+    .hide()
+    .css(hermitage.navigationButtons.default.styles)
+    .maximizeLineHeight()
+    .css(hermitage.navigationButtons.styles)
 
 # Creates right navigation button and returns it
 createRightNavigationButton = ->
-  button = createNavigationButton()
-  button.attr('id', 'navigation-right')
-  button.css('border-top-left-radius', '0')
-  button.css('-webkit-border-top-left-radius', '0')
-  button.css('-moz-border-top-left-radius', '0')
-  button.css('border-bottom-left-radius', '0')
-  button.css('-webkit-border-bottom-left-radius', '0')
-  button.css('-moz-border-bottom-left-radius', '0')
-  button.append('>')
-
-  button.click(showNextImage)
-
-  button
+  createNavigationButton()
+    .attr(hermitage.navigationButtons.next.default.attributes)
+    .css(hermitage.navigationButtons.next.default.styles)
+    .css(hermitage.navigationButtons.next.styles)
+    .text(hermitage.navigationButtons.next.text)
+    .click(showNextImage)
 
 # Create left navigation button and returns it
 createLeftNavigationButton = ->
-  button = createNavigationButton()
-  button.attr('id', 'navigation-left')
-  button.css('border-top-right-radius', '0')
-  button.css('-webkit-border-top-right-radius', '0')
-  button.css('-moz-border-top-right-radius', '0')
-  button.css('border-bottom-right-radius', '0')
-  button.css('-webkit-border-bottom-right-radius', '0')
-  button.css('-moz-border-bottom-right-radius', '0')
-  button.append('<')
-
-  button.click(showPreviousImage)
-
-  button
+  createNavigationButton()
+    .attr(hermitage.navigationButtons.previous.default.attributes)
+    .css(hermitage.navigationButtons.previous.default.styles)
+    .css(hermitage.navigationButtons.previous.styles)
+    .text(hermitage.navigationButtons.previous.text)
+    .click(showPreviousImage)
 
 # Creates close button
 createCloseButton = ->
-  button = $('<div>', {id: 'close-button'})
-  $('#hermitage').append(button)
-
-  button.hide()
-
-  button.text(hermitage.closeButton.text)
-  button.css('position', 'fixed')
-  button.css('color', hermitage.closeButton.color)
-  button.css('font-size', "#{hermitage.closeButton.fontSize}px")
-  button.css('white-space', 'nowrap')
-  button.css('cursor', 'pointer')
-
-  button.click(closeGallery)
-
-  button
-
-# Shows full size image of the chosen one
+  $('<div>')
+    .appendTo($('#hermitage'))
+    .hide()
+    .attr(hermitage.closeButton.default.attributes)
+    .css(hermitage.closeButton.default.styles)
+    .text(hermitage.closeButton.text)
+    .css(hermitage.closeButton.styles)
+    .click(closeGallery)
+
+createBotomPanel = ->
+  bottomPanel = $('<div>')
+    .appendTo($('#hermitage'))
+    .hide()
+    .attr(hermitage.bottomPanel.default.attributes)
+    .css(hermitage.bottomPanel.default.styles)
+    .css(hermitage.bottomPanel.styles)
+
+  text = $('<div>')
+    .appendTo(bottomPanel)
+    .attr(hermitage.bottomPanel.text.default.attributes)
+    .css(hermitage.bottomPanel.text.default.styles)
+    .css(hermitage.bottomPanel.text.styles)
+
+# Shows original image of the chosen one
 openGallery = (image) ->
-  $('#hermitage').css('z-index', hermitage.zIndex)
-  $('#hermitage').empty()
-  $('#hermitage').show()
+  $('#hermitage')
+    .css('z-index', hermitage.zIndex)
+    .empty()
+    .show()
   
-  createOverlay()
+  createDarkening()
   createRightNavigationButton()
   createLeftNavigationButton()
   createCloseButton()
+  createBotomPanel()
 
-  showImage(hermitage.images.indexOf($(image).attr('href')))
+  showImage(indexOfImage(image))
   
-
 # Shows image with specified index from images array
 showImage = (index) ->
-  # Create full size image at the center of screen
   img = $('<img />')
-  img.attr('src', hermitage.images[index])
-  img.attr('class', 'current')
-  img.css('cursor', 'pointer')
-  img.css('max-width', 'none') # fix the conflict with Twitter Bootstrap
-  img.hide()
-  
-  $('#hermitage').append(img)
+    .attr(hermitage.image.default.attributes)
+    .css(hermitage.image.default.styles)
+    .attr('src', hermitage.images[index])
+    .css(hermitage.image.styles)
+    .hide()
+    .appendTo($('#hermitage'))
   
   img.click (event) ->
     if event.pageX >= $(window).width() / 2
@@ -213,38 +309,14 @@ showImage = (index) ->
     else
       showPreviousImage()
 
-  # When image will be loaded set correct size,
-  # center element and show it
-  $('<img />').attr('src', hermitage.images[index]).load ->
-    maxWidth = $(window).width() - (hermitage.windowPadding.x + $('#navigation-left').outerWidth() + hermitage.navigationButton.margin) * 2
-    maxHeight = $(window).height() - hermitage.windowPadding.y * 2
-
-    scale = 1.0
-
-    if maxWidth <= hermitage.minimumSize.width or maxHeight <= hermitage.minimumSize.height
-      if maxWidth < maxHeight
-        maxWidth = hermitage.minimumSize.width
-        maxHeight = maxWidth * (this.height / this.width)
-      else
-        maxHeight = hermitage.minimumSize.height
-        maxWidth = maxHeight * (this.width / this.height)
-
-    if this.width > maxWidth or this.height > maxHeight
-      scale = Math.min(maxWidth / this.width, maxHeight / this.height)
-
-    img.width(this.width * scale)
-    img.height(this.height * scale)
-
-    center(img)
-    img.fadeIn(hermitage.animationDuration)
-    adjustNavigationButtons(img)
-    adjustCloseButton(img)
+  adjustImage(false, img)
 
 # Shows next image
 showNextImage = ->
   current = $('img.current')
   if current.length is 1
-    index = hermitage.images.indexOf(current.attr('src'))
+    index = indexOfImage(current)
+    return unless canShowNextAfter(index)
     hideCurrentImage()
     if index < hermitage.images.length - 1
       showImage(index + 1)
@@ -255,7 +327,8 @@ showNextImage = ->
 showPreviousImage = ->
   current = $('img.current')
   if current.length is 1
-    index = hermitage.images.indexOf(current.attr('src'))
+    index = indexOfImage(current)
+    return unless canShowPreviousBefore(index)
     hideCurrentImage()
     if index > 0
       showImage(index - 1)
@@ -274,49 +347,126 @@ closeGallery = ->
   $('#hermitage :not(#overlay)').fadeOut()
   $('#overlay').fadeOut hermitage.animationDuration, ->
     $('#hermitage').hide()
-    $('#hermitage').empty()
+                   .empty()
+
+
+# Moves image to correct position and sets correct size.
+# Then it calls adjusting methods for navigation and close buttons.
+# Attributes:
+# * `withAnimation` - boolean value determines if adjusting should be animated
+# * `image` - currently opened image. It is optional argument and can be evaluated by the method itself.
+adjustImage = (withAnimation = false, image = undefined) ->
+
+  if image is undefined
+    image = $('#hermitage img.current')
+    return unless image.length is 1
+
+  index = indexOfImage(image)
 
+  # Wait until source image is loaded
+  $('<img />').attr('src', hermitage.images[index]).load ->
+    
+    # Offset for image position
+    offsetY = 0
+
+    maxWidth = $(window).width() - $('#navigation-left').outerWidth() - $('#navigation-right').outerWidth()
+    maxHeight = $(window).height()
+
+    text = hermitage.texts[index]
+
+    if text
+      offsetY = - $('#hermitage .bottom-panel').outerHeight() / 2
+      maxHeight -= $('#hermitage .bottom-panel').outerHeight()
+
+    $('#hermitage .bottom-panel .text').text(text or '')
+
+    if maxWidth <= hermitage.minimumSize.width or maxHeight <= hermitage.minimumSize.height
+      if maxWidth < maxHeight
+        maxWidth = hermitage.minimumSize.width
+        maxHeight = maxWidth * (this.height / this.width)
+      else
+        maxHeight = hermitage.minimumSize.height
+        maxWidth = maxHeight * (this.width / this.height)
+
+    scale = 1.0
+
+    if this.width > maxWidth or this.height > maxHeight
+      scale = Math.min(maxWidth / this.width, maxHeight / this.height)
+
+    image
+      .setSize(this.width * scale, this.height * scale, withAnimation)
+      .center(withAnimation, this.width * scale, this.height * scale, 0, offsetY)
+      .fadeIn(hermitage.animationDuration)
+
+    adjustNavigationButtons(withAnimation, image)
+    adjustCloseButton(withAnimation, image)
+    adjustBottomPanel(withAnimation)
 
 # Moves navigation buttons to proper positions
-adjustNavigationButtons = (current) ->
-  return unless hermitage.navigationButton.enabled
+adjustNavigationButtons = (withAnimation, current) ->
+  return unless hermitage.navigationButtons.enabled
 
-  previous = $('#navigation-left')
-  next = $('#navigation-right')
+  previous = $('#hermitage #navigation-left')
+  next = $('#hermitage #navigation-right')
 
-  newPrevious = 
-    top: current.position().top
-    left: current.position().left - previous.outerWidth() - hermitage.navigationButton.margin
-    height: current.outerHeight()
+  # Set correct styles
+  previous.maximizeLineHeight(withAnimation)
+  next.maximizeLineHeight(withAnimation)
   
-  newNext = 
-    top: current.position().top
-    left: current.position().left + current.outerWidth() + hermitage.navigationButton.margin
-    height: current.outerHeight()
+  # Show or hide buttons
 
-  move = (button, dimensions) ->
-    button.animate({ height: "#{dimensions.height}px", 'line-height': "#{dimensions.height}px", left: "#{dimensions.left}px", top: "#{dimensions.top}px"}, hermitage.animationDuration)    
-    button.fadeIn(hermitage.animationDuration) if button.css('display') is 'none'
+  currentIndex = indexOfImage(current)
+  
+  duration = hermitage.animationDuration
+  
+  if canShowPreviousBefore(currentIndex)
+    previous.fadeIn(duration)
+  else
+    previous.fadeOut(duration)
 
-  move previous, newPrevious
-  move next, newNext
+  if canShowNextAfter(currentIndex)
+    next.fadeIn(duration)
+  else
+    next.fadeOut(duration)
 
 # Moves close button to proper position
-adjustCloseButton = (current) ->
+adjustCloseButton = (withAnimation, current) ->
   return unless hermitage.closeButton.enabled
+  button = $('#hermitage #close-button')
+  if button.css('display') is 'none'
+    button.fadeIn(hermitage.animationDuration)
 
-  button = $('#close-button')
+adjustBottomPanel = (withAnimation) ->
+  panel = $('#hermitage .bottom-panel')
+  if panel.text() is ''
+    panel.fadeOut(hermitage.animationDuration)
+  else
+    params =
+      width: "#{$(window).width() - $('#navigation-left').outerWidth() - $('#navigation-right').outerWidth()}px"
+      left: "#{$('#navigation-left').position().left + $('#navigation-left').outerWidth()}px"
+
+    if withAnimation
+      panel.animate(params, { duration: hermitage.animationDuration, queue: false })
+    else
+      panel.css(params)
 
-  top = current.position().top - button.outerHeight()
-  left = current.position().left + current.outerWidth() - button.outerWidth()
+    panel.fadeIn(hermitage.animationDuration)
 
-  if button.css('display') is 'none'
-    button.css('top', top)
-    button.css('left', left)
-    button.fadeIn(hermitage.animationDuration)
+indexOfImage = (image) ->
+  href = if $(image).prop('tagName') is 'IMG' then $(image).attr('src') else $(image).attr('href')
+  hermitage.images.indexOf(href)
 
-  button.animate({ top: "#{top}px", left: "#{left}px" }, hermitage.animationDuration)
-  
+canShowNextAfter = (index) ->
+  if index < hermitage.images.length - 1
+    true
+  else
+    hermitage.looped
+
+canShowPreviousBefore = (index) ->
+  if index > 0
+    true
+  else
+    hermitage.looped
 
 # Initialize gallery on page load
 $(document).ready(hermitage.init)

data/hermitage.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
   spec.version       = Hermitage::VERSION
   spec.authors       = ['Alexander Borovykh']
   spec.email         = ['immaculate.pine@gmail.com']
-  spec.description   = %q{Ruby library for generation of image galleries.}
-  spec.summary       = %q{Ruby library for generation of image galleries (thumbnails and full size images viewer).}
+  spec.description   = %q{Ruby library for image galleries generation.}
+  spec.summary       = %q{Ruby library for image galleries generation (thumbnails and original images viewer).}
   spec.homepage      = 'https://github.com/ImmaculatePine/hermitage'
   spec.license       = 'MIT'
 

data/lib/generators/hermitage/templates/hermitage.rb

@@ -4,8 +4,8 @@
 # You can configure any of its options and they will be applied for every rendering.
 #
 # Hermitage.configs[:default].merge!({
-#   attribute_full_size: 'file.url',
-#   attribute_thumbnail: 'file.url(:thumbnail)',
+#   original: 'file.url',
+#   thumbnail: 'file.url(:thumbnail)',
 #   list_tag: :ul,
 #   item_tag: :li,
 #   list_class: 'thumbnails',

data/lib/hermitage/defaults.rb

@@ -1,10 +1,13 @@
 module Hermitage
   module Defaults
-    # Model's attribute (or method) that returns the path to the full size image
-    ATTRIBUTE_FULL_SIZE = 'file.url'
+    # Model's attribute (or method) that returns the path to the original image
+    ORIGINAL = 'file.url'
 
     # Model's attribute (or method) that returns the path to the image's thumbnail
-    ATTRIBUTE_THUMBNAIL = 'file.url(:thumbnail)'
+    THUMBNAIL = 'file.url(:thumbnail)'
+
+    # Model's attribute (or method) that returns title or description of image
+    TITLE = nil
 
     # Wrapper for the whole gallery
     LIST_TAG = :ul

data/lib/hermitage/version.rb

@@ -1,3 +1,3 @@
 module Hermitage
-  VERSION = '0.0.2.1'
+  VERSION = '0.0.3'
 end