hermitage 0.0.1 → 0.0.2.1

data/CHANGELOG.md

@@ -0,0 +1,17 @@
+### 0.0.2.1 ###
+
+* Fixed conflict with Twitter Bootstrap in Firefox and Opera.
+
+### 0.0.2 ###
+
+* Added ability to split the gallery into several parts by `each_slice` option 
+* Added ability to customize image viewer appearance
+* Close button added to the image viewer
+* Fixed bug when image was incorrectly positioned because of scroll
+* Removed raising exception when the first argument in `render_gallery_for` method is not Array
+* Fixed the way of the image path evaluation
+* CoffeeScript code refactoring
+
+### 0.0.1 ###
+
+The first release.

data/README.md

@@ -1,5 +1,7 @@
 # Hermitage
 
+[![Build Status](https://travis-ci.org/ImmaculatePine/hermitage.png?branch=master)](https://travis-ci.org/ImmaculatePine/hermitage)
+
 Ruby library for generation of image galleries (thumbnails and full size images viewer).
 
 ## Requirements
@@ -38,7 +40,7 @@ The example from Quick Start section works well when you are using Paperclip gem
 
     class Image < ActiveRecord::Base
       attr_accessible :file
-      has_attached_file :file, styles: { thumbnail: "100x100>" }
+      has_attached_file :file, styles: { thumbnail: '100x100>' }
     end
 
 Then
@@ -94,6 +96,17 @@ will render the following markup:
       </p>
     </div>
 
+#### Slicing
+
+If you are using Twitter Bootstrap framework and your gallery is inside `.row-fluid` block the markup above will not look awesome.
+Or maybe you have any other reasons to split the gallery into several separate galleries.
+Then pass `each_slice` options to `render_gallery_for` method:
+
+    @images = Array.new(5, Image.new) # weird, but it's just an example
+    render_gallery_for @images, each_slice: 3
+
+This code will render 2 `ul` tags with 3 and 2 items in each, respectively. Nevertheless they both will be available in navigation flow when you open the image viewer.
+
 ### Configuration
 
 It is more handy to use configs to customize Hermitage behavior.
@@ -104,7 +117,7 @@ If there is no proper config :default config is used.
 
 Hermitage configs are described in config/initializers/hermitage.rb file.
 
-#### Overwrite Defaults
+#### Overwriting Defaults
 
 You can overwrite :default config. These changes will be applied to all the galleries in your application.
 
@@ -133,7 +146,7 @@ and
 
     class Post < ActiveRecord::Base
       attr_accessible :attachment
-      has_attached_file :attachment, styles: { tiny: "200x200>" }
+      has_attached_file :attachment, styles: { tiny: '200x200>' }
     end
 
 Suppose that pictures should be rendered with Twitter Bootstrap style, but posts should be wrapped by simple blocks.
@@ -146,7 +159,7 @@ Then your config/initializers/hermitage.rb could looks like this:
       attribute_thumbnail: 'image_path(:small)'
     }
 
-    Hermitage.configs[:pictures] = {
+    Hermitage.configs[:posts] = {
       attribute_full_size: 'attachment',
       attribute_thumbnail: 'attachment(:tiny)',
       list_tag: :div,
@@ -166,6 +179,35 @@ So, Hermitage looks for parameters with the following priority:
 * Then it overwrites some of them by custom config's parameters if they were specified;
 * Finally it overwrites both of them by the values from options hash passed to `render_gallery_for` method (if there are such values, of course).
 
+### Viewer Customization
+
+You can customize appearance of Hermitage image viewer. All you need is to add to any of your .js or .coffee files lines like this:
+
+    hermitage.darkening.opacity = 0
+    hermitage.navigationButton.color = '#faeedd'
+
+In the example above the darkening will be disabled and navigation buttons will change their color.
+
+You can customize the following parameters:
+
+* `zIndex` - image viewer's z-index property
+* `darkening.opacity` - opacity of darkening layer (0 if it should be disabled)
+* `darkening.color` - color of darkening layer
+* `navigationButton.enabled` - are there navigation buttons
+* `navigationButton.color` - color of navigation buttons
+* `navigationButton.width` - width of navigation buttons, px
+* `navigationButton.borderRadius` - border radius of outer corners of navigation buttons, px
+* `navigationButton.margin` - distance between navigation buttons and the image, px
+* `closeButton.enabled` - is there close button
+* `closeButton.text` - close button's text
+* `closeButton.color` - close button's color
+* `closeButton.fontSize` - close button's font size
+* `windowPadding.x` - minimum distance between window borders and the image by x axis, px
+* `windowPadding.y` - minimum distance between window borders and the image by y axis, px
+* `minimumSize.width` - minimum width of scaled image, px
+* `minimumSize.height` - minimum height of scaled image, px
+* `animationDuration` - duration of UI animations, ms
+  
 ## Contributing
 
 1. Fork it

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

@@ -4,260 +4,320 @@ root = exports ? this
 # Data
 #
 
-# Array of images of current gallery
-root.images = []
-
-# Distance between navigation buttons and image
-root.navigation_button_margin = 10
-
-# Color of navigation button's border and symbols
-root.navigation_button_color = "#777"
-
-# Minimum distance between window borders and image
-root.window_padding_x = 50
-root.window_padding_y = 50
-
-# Minimum size of scaled image
-root.minimum_scaled_width = 100
-root.minimum_scaled_height = 100
-
-# Initializes the gallery on this page
-root.init_hermitage = ->
-  # Create simple gallery layer if it doesn't exist
-  if ($("#hermitage").length == 0)
-    hermitage = $("<div>", {id: "hermitage"})
-    $("body").append(hermitage)
-    hermitage.css("z-index", 10)
-    hermitage.hide()
-
-  # Clear old images array
-  images.length = 0
-
-  # Create new images array
-  $.each $('a[rel="hermitage"]'), ->
-    images.push($(this).attr('href'))
-
-  # Set on click handlers to all elements that
-  # have 'hermitage' rel attribute
-  $('a[rel="hermitage"]').click (event) ->
-    open_gallery(this)
-    event.preventDefault()
+# Hermitage options
+root.hermitage =
+  # Image viewer z-index property
+  zIndex: 10
+
+  # Darkening properties
+  darkening:
+    opacity: 0.75 # 0 if you don't want darkening
+    color: '#000'
+
+  # Navigation buttons' properties
+  navigationButton:
+    enabled: true
+    color: '#777'
+    width: 50 # px
+    borderRadius: 7 # px
+    margin: 10 # Distance between navigation buttons and image, px
+
+  # Close button properties
+  closeButton:
+    enabled: true
+    text: '×'
+    color: '#FFF'
+    fontSize: 30 # px
+  
+  # Minimum distance between window borders and image, px
+  windowPadding:
+    x: 50
+    y: 50
+
+  # Minimum size of scaled image, px
+  minimumSize:
+    width: 100
+    height: 100
+
+  # Duration of all animations, ms
+  animationDuration: 400
+
+  # Array of images of current gallery
+  images: []
+
+  # 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)
+
+    # Clear old images array
+    hermitage.images.length = 0
+
+    # Create new images array
+    $.each $('a[rel="hermitage"]'), ->
+      hermitage.images.push($(this).attr('href'))
+
+    # Set on click handlers to all elements that
+    # have 'hermitage' rel attribute
+    $('a[rel="hermitage"]').click (event) ->
+      openGallery(this)
+      event.preventDefault()
 
 #
 # Helpers
 #
 
 # Place element at the center of screen
-jQuery.fn.center = () ->
-  this.css("position", "fixed")
-  this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px")
-  this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px")
-  this
-
+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
 
 #
-# Simple gallery logic
+# Hermitage logic
 #
 
 # Creates overlay layer, shows it and sets its click handler
-create_overlay = () ->
-  overlay = $("<div>", {id: "overlay"})
-  $("#hermitage").append(overlay)
-
-  overlay.css("position", "fixed")
-  overlay.css("top", "0")
-  overlay.css("left", "0")
-  overlay.css("background", "#000")
-  overlay.css("display", "block")
-  overlay.css("opacity", "0.75")
-  overlay.css("filter", "alpha(opacity=75)")
-  overlay.css("width", "100%")
-  overlay.css("height", "100%")
+createOverlay = ->
+  overlay = $('<div>', {id: 'overlay'})
+  $('#hermitage').append(overlay)
+
+  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%')
 
   overlay.hide()
   overlay.fadeIn()
 
-  overlay.click (event) ->
-    close_gallery()
+  overlay.click(closeGallery)
 
   overlay
 
-
 # Creates base navigation button and returns it
-create_navigation_button = () ->
-  button = $("<div>")
-  $("#hermitage").append(button)
-
-  button.css("position", "fixed")
-  button.css("width", "50px")
-  button.css("display", "block")
-  button.css("cursor", "pointer")
-
-  button.css("border-width", "1px")
-  button.css("border-style", "solid")
-  button.css("border-color", navigation_button_color)
-  button.css("display", "block")
-  button.css("border-radius", "7px")
-  button.css("-webkit-border-radius", "7px")
-  button.css("-moz-border-radius", "7px")
-
-  button.css("color", navigation_button_color)
-  button.css("text-align", "center")
-  button.css("vertical-align", "middle")
-  button.css("font", "30px Tahoma,Arial,Helvetica,sans-serif")
+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')
+
+  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")
+
+  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')
 
   button.hide()
 
   button
 
 # Creates right navigation button and returns it
-create_right_navigation_button = () ->
-  button = create_navigation_button()
-  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 (event) ->
-    show_next_image()
+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
 
 # Create left navigation button and returns it
-create_left_navigation_button = () ->
-  button = create_navigation_button()
-  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 (event) ->
-    show_previous_image()
+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
 
+# 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
-open_gallery = (image) ->
-  $("#hermitage").empty()
-  $("#hermitage").show()
-  create_overlay()
-  create_right_navigation_button()
-  create_left_navigation_button()
-
-  show_image(images.indexOf($(image).attr("href")))
+openGallery = (image) ->
+  $('#hermitage').css('z-index', hermitage.zIndex)
+  $('#hermitage').empty()
+  $('#hermitage').show()
+  
+  createOverlay()
+  createRightNavigationButton()
+  createLeftNavigationButton()
+  createCloseButton()
+
+  showImage(hermitage.images.indexOf($(image).attr('href')))
   
 
 # Shows image with specified index from images array
-show_image = (index) ->
+showImage = (index) ->
   # Create full size image at the center of screen
-  img = $("<img />")
-  img.attr("src", images[index])
-  img.attr("class", "current")
-  img.css("cursor", "pointer")
+  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)
+  $('#hermitage').append(img)
   
   img.click (event) ->
-    if (event.pageX >= $(window).width() / 2)
-      show_next_image()
+    if event.pageX >= $(window).width() / 2
+      showNextImage()
     else
-      show_previous_image()
+      showPreviousImage()
 
   # When image will be loaded set correct size,
   # center element and show it
-  $("<img />").attr("src", images[index]).load ->
-    max_width = $(window).width() - (window_padding_x + $("#navigation-left").outerWidth() + navigation_button_margin) * 2
-    max_height = $(window).height() - window_padding_y * 2
+  $('<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 (max_width <= minimum_scaled_width || max_height <= minimum_scaled_height)
-      if (max_width < max_height)
-        max_width = minimum_scaled_width
-        max_height = max_width * (this.height / this.width)
+    if maxWidth <= hermitage.minimumSize.width or maxHeight <= hermitage.minimumSize.height
+      if maxWidth < maxHeight
+        maxWidth = hermitage.minimumSize.width
+        maxHeight = maxWidth * (this.height / this.width)
       else
-        max_height = minimum_scaled_height
-        max_width = max_height * (this.width / this.height)
+        maxHeight = hermitage.minimumSize.height
+        maxWidth = maxHeight * (this.width / this.height)
 
-    if (this.width > max_width || this.height > max_height)
-      scale = Math.min(max_width / this.width, max_height / 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)
 
-    img.center()
-    img.fadeIn()
-    adjust_navigation_buttons()
+    center(img)
+    img.fadeIn(hermitage.animationDuration)
+    adjustNavigationButtons(img)
+    adjustCloseButton(img)
 
 # Shows next image
-show_next_image = ->
-  current = $("img.current")
-  if (current.length == 1)
-    index = images.indexOf(current.attr("src"))
-    hide_current_image()
-    if (index < images.length - 1)
-      show_image(index + 1)
+showNextImage = ->
+  current = $('img.current')
+  if current.length is 1
+    index = hermitage.images.indexOf(current.attr('src'))
+    hideCurrentImage()
+    if index < hermitage.images.length - 1
+      showImage(index + 1)
     else
-      show_image(0)
+      showImage(0)
 
 # Shows previous image
-show_previous_image = ->
-  current = $("img.current")
-  if (current.length == 1)
-    index = images.indexOf(current.attr("src"))
-    hide_current_image()
-    if (index > 0)
-      show_image(index - 1)
+showPreviousImage = ->
+  current = $('img.current')
+  if current.length is 1
+    index = hermitage.images.indexOf(current.attr('src'))
+    hideCurrentImage()
+    if index > 0
+      showImage(index - 1)
     else
-      show_image(images.length - 1)
+      showImage(hermitage.images.length - 1)
 
 # Hides current image
-hide_current_image = ->
-  current = $("img.current")
-  if (current.length == 1)
-    current.attr("class", "")
-    current.fadeOut 400, ->
+hideCurrentImage = ->
+  current = $('img.current')
+  if current.length is 1
+    current.fadeOut hermitage.animationDuration, ->
       current.remove()
 
-# Starts fade out animation and clears simple gallery at the end of animation
-close_gallery = () ->
-  $("#hermitage :not(#overlay)").fadeOut()
-  $("#overlay").fadeOut 400, ->
-    $("#hermitage").hide()
-    $("#hermitage").empty()
+# Starts fade out animation and clears Hermitage at the end of animation
+closeGallery = ->
+  $('#hermitage :not(#overlay)').fadeOut()
+  $('#overlay').fadeOut hermitage.animationDuration, ->
+    $('#hermitage').hide()
+    $('#hermitage').empty()
 
 
 # Moves navigation buttons to proper positions
-adjust_navigation_buttons = () ->
-  left = $("#navigation-left")
-  right = $("#navigation-right")
+adjustNavigationButtons = (current) ->
+  return unless hermitage.navigationButton.enabled
 
-  current = $(".current")
+  previous = $('#navigation-left')
+  next = $('#navigation-right')
 
-  left_new_height = current.outerHeight() + "px"
-  left_new_left = (current.position().left - left.outerWidth() - navigation_button_margin) + "px"
-  left_new_top = current.position().top + "px"
+  newPrevious = 
+    top: current.position().top
+    left: current.position().left - previous.outerWidth() - hermitage.navigationButton.margin
+    height: current.outerHeight()
+  
+  newNext = 
+    top: current.position().top
+    left: current.position().left + current.outerWidth() + hermitage.navigationButton.margin
+    height: current.outerHeight()
+
+  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'
+
+  move previous, newPrevious
+  move next, newNext
 
-  right_new_height = current.outerHeight() + "px"
-  right_new_left = (current.position().left + current.outerWidth() + navigation_button_margin) + "px"
-  right_new_top = current.position().top + "px"
+# Moves close button to proper position
+adjustCloseButton = (current) ->
+  return unless hermitage.closeButton.enabled
 
-  left.animate({ height: left_new_height, 'line-height': left_new_height, left: left_new_left, top: left_new_top}, 400)
-  right.animate({ height: right_new_height, 'line-height': right_new_height, left: right_new_left, top: right_new_top}, 400)
+  button = $('#close-button')
 
-  left.fadeIn() if (left.css("display") == "none")
-  right.fadeIn() if (right.css("display") == "none")
+  top = current.position().top - button.outerHeight()
+  left = current.position().left + current.outerWidth() - button.outerWidth()
+
+  if button.css('display') is 'none'
+    button.css('top', top)
+    button.css('left', left)
+    button.fadeIn(hermitage.animationDuration)
+
+  button.animate({ top: "#{top}px", left: "#{left}px" }, hermitage.animationDuration)
+  
 
 # Initialize gallery on page load
-$(document).ready(init_hermitage)
-$(document).on('page:load', init_hermitage)
+$(document).ready(hermitage.init)
+$(document).on('page:load', hermitage.init)

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

@@ -11,7 +11,8 @@
 #   list_class: 'thumbnails',
 #   item_class: 'span4',
 #   link_class: 'thumbnail',
-#   image_class: nil
+#   image_class: nil,
+#   each_slice: nil
 # })
 
 # Also you can create your own configs that will be merged with default config to overwrite default options.

data/lib/hermitage/defaults.rb

@@ -19,6 +19,11 @@ module Hermitage
     LINK_CLASS = 'thumbnail'
     IMAGE_CLASS = nil
 
+    # Slices each N images into the separate gallery.
+    # It is helpful e.g. when using Twitter Bootstrap framework
+    # and your gallery is inside `.row-fluid` block.
+    EACH_SLICE = nil
+
     # Returns hash of default options
     def self.to_hash
       hash = {}

data/lib/hermitage/version.rb

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

data/lib/hermitage/view_helpers.rb

@@ -17,24 +17,40 @@ module Hermitage
     # Config names are formed by the class name of the first element in array.
     #
     def render_gallery_for(objects, options = {})
-      raise(ArgumentError, 'First argument in render_gallery_for method can be string, symbol or array only.') unless objects.is_a? Array
-  
+      # Choose config accoring to class name of objects in passed array
       config_name = objects.first.class.to_s.pluralize.underscore.to_sym if defined?(Rails) && !objects.empty?
       config = Hermitage.configs.include?(config_name) ? config_name : :default
       
+      # Merge default options with the chosen config and with passed options
       options = Hermitage.configs[:default].merge(Hermitage.configs[config]).merge(options)
       
-      items = []
-      objects.each do |object|
-        full_image_path = object.instance_eval(options[:attribute_full_size])
-        thumbnail_image_path = object.instance_eval(options[:attribute_thumbnail])
-        image = image_tag(thumbnail_image_path, class: options[:image_class])
-        items << link_to(image, full_image_path, rel: 'hermitage', class: options[:link_class])
+      # Create array of all list tags
+      lists = unless options[:each_slice]
+        [objects]
+      else
+        objects.each_slice(options[:each_slice]).to_a
       end
-      
-      content_tag options[:list_tag], class: options[:list_class] do
-        items.collect { |item| concat(content_tag(options[:item_tag], item, class: options[:item_class])) }
+
+      # The resulting tag
+      tag = ''
+
+      # Render each list into `tag` variable
+      lists.each do |list|
+        # Array of items in current list
+        items = list.collect do |item|
+          full_image_path = eval("item.#{options[:attribute_full_size]}")
+          thumbnail_image_path = eval("item.#{options[:attribute_thumbnail]}")
+          image = image_tag(thumbnail_image_path, class: options[:image_class])
+          link_to(image, full_image_path, rel: 'hermitage', class: options[:link_class])
+        end
+        
+        # Convert these items into content tag string
+        tag << content_tag(options[:list_tag], class: options[:list_class]) do
+          items.collect { |item| concat(content_tag(options[:item_tag], item, class: options[:item_class])) }
+        end
       end
+
+      tag.html_safe
     end
 
   end

data/spec/features/navigation_spec.rb

@@ -1,23 +1,8 @@
 require 'spec_helper'
+require 'features_helper'
 
 describe 'navigation', type: :feature, js: true do
 
-  # Workaround for clicking exactly on the specified position of the element
-  def click_at(selector, offset_x, offset_y)
-    x = evaluate_script("$('#{selector}').position().left + $('#{selector}').outerWidth() * #{offset_x}")
-    y = evaluate_script("$('#{selector}').position().top + $('#{selector}').outerHeight() * #{offset_y}")
-    page.driver.click(x, y)
-  end
-
-  def click_at_left(selector)
-    click_at(selector, 0.25, 0.5)
-  end
-
-  def click_at_right(selector)
-    click_at(selector, 0.75, 0.5)
-  end
-
-
   shared_examples 'navigation to next' do
     before(:each) { click_action.call() }
 

data/spec/features/render_gallery_spec.rb

@@ -13,7 +13,7 @@ describe 'render gallery', type: :feature, js: true do
   end
 
   it 'fills images array' do
-    evaluate_script("images").should == ['/assets/0-full.png', '/assets/1-full.png', '/assets/2-full.png']
+    evaluate_script('hermitage.images').should == ['/assets/0-full.png', '/assets/1-full.png', '/assets/2-full.png']
   end
 
 end

data/spec/features/scale_spec.rb

@@ -1,15 +1,8 @@
 require 'spec_helper'
+require 'features_helper'
 
 describe 'scale', type: :feature, js: true do
 
-  def width(selector)
-    evaluate_script("$('#{selector}').outerWidth()")
-  end
-
-  def height(selector)
-    evaluate_script("$('#{selector}').outerHeight()")
-  end
-
   before(:each) do
     visit images_path
     page.driver.resize(window_width, window_height) 

data/spec/features/viewer_customization_spec.rb

@@ -0,0 +1,152 @@
+require 'spec_helper'
+require 'features_helper'
+
+describe 'viewer_customization', type: :feature, js: true do
+
+  let(:before_click) { nil }
+
+  before(:each) do
+    visit images_path
+    evaluate_script(js)
+    before_click.call() if before_click
+    page.first('a[rel=hermitage]').click
+    page.should have_css('div#hermitage img.current')
+    # There will be sleep(1) in tests where we should wait until fade in animation is ended
+  end
+
+  context 'zIndex' do
+    let(:js) { 'hermitage.zIndex = 5'}
+    it { css('#hermitage', 'z-index').should == '5' }
+  end
+
+  context 'darkening.opacity' do
+    let(:js) { 'hermitage.darkening.opacity = 0.5'}
+    before(:each) { sleep(1) }
+    it { css('#overlay', 'opacity').should == '0.5' }
+  end
+
+  context 'darkening.color' do
+    let(:js) { 'hermitage.darkening.color = "#FAFAFA"' }
+    it { css('#overlay', 'background-color').should == 'rgb(250, 250, 250)' }
+  end
+
+  context 'navigationButton.enabled' do
+    let(:js) { 'hermitage.navigationButton.enabled = false' }
+    it { should_not have_css('#navigation-left') }
+    it { should_not have_css('#navigation-right') }
+  end
+
+  context 'navigationButton.color' do
+    let(:js) { 'hermitage.navigationButton.color = "#000"'}
+
+    shared_examples 'navigation button' do
+      it 'sets border color' do
+        css(selector, 'border-top-color').should == 'rgb(0, 0, 0)'
+        css(selector, 'border-right-color').should == 'rgb(0, 0, 0)'
+        css(selector, 'border-bottom-color').should == 'rgb(0, 0, 0)'
+        css(selector, 'border-left-color').should == 'rgb(0, 0, 0)'
+      end  
+    end
+    
+    context 'left' do
+      let(:selector) { '#navigation-left' }
+      it_behaves_like 'navigation button'
+    end
+
+    context 'right' do
+      let(:selector) { '#navigation-right' }
+      it_behaves_like 'navigation button'
+    end
+  end
+
+  context 'navigationButton.width' do
+    let(:js) { 'hermitage.navigationButton.width = 100' }
+    it { css('#navigation-left', 'width').should == '100px' }
+    it { css('#navigation-right', 'width').should == '100px' }
+  end
+
+  context 'navigationButton.borderRadius' do
+    let(:js) { 'hermitage.navigationButton.borderRadius = 5' }
+
+    it 'sets border radiuses for left button' do
+      css('#navigation-left', 'border-top-left-radius').should == '5px'
+      css('#navigation-left', 'border-bottom-left-radius').should == '5px'
+      css('#navigation-left', 'border-top-right-radius').should == '0px'
+      css('#navigation-left', 'border-bottom-right-radius').should == '0px'
+    end
+    
+    it 'sets border radiuses for right button' do
+      css('#navigation-right', 'border-top-left-radius').should == '0px'
+      css('#navigation-right', 'border-bottom-left-radius').should == '0px'
+      css('#navigation-right', 'border-top-right-radius').should == '5px'
+      css('#navigation-right', 'border-bottom-right-radius').should == '5px'
+    end
+  end
+  
+  context 'navigationButton.margin' do
+    let(:js) { 'hermitage.navigationButton.margin = 30' }
+    before(:each) { sleep(1) }
+    it { css('#navigation-left', 'left').should == "#{left('.current') - 30 - width('#navigation-left')}px" }
+    it { css('#navigation-right', 'left').should == "#{left('.current') + width('.current') + 30}px" }
+  end
+
+  context 'closeButton.enabled' do
+    let(:js) { 'hermitage.closeButton.enabled = false' }
+    it { should_not have_css('#close-button') }
+  end
+  
+  context 'closeButton.text' do
+    let(:js) { 'hermitage.closeButton.text = "Close"' }
+    it { text('#close-button').should == 'Close' }
+  end
+
+  context 'closeButton.color' do
+    let(:js) { 'hermitage.closeButton.color = "#777"' }
+    it { css('#close-button', 'color').should == 'rgb(119, 119, 119)' }
+  end
+
+  context 'closeButton.fontSize' do
+    let(:js) { 'hermitage.closeButton.fontSize = 10' }
+    it { css('#close-button', 'font-size').should == '10px' }
+  end
+
+  context 'windowPadding.x' do
+    let(:js) { 'hermitage.windowPadding.x = 100'}
+    let(:before_click) { Proc.new{ page.driver.resize(500, 1000) } }
+
+    it 'scales the image' do
+      width('.current').should == 176
+      height('.current').should == 176
+    end
+  end
+
+  context 'windowPadding.y' do
+    let(:js) { 'hermitage.windowPadding.y = 100'}
+    let(:before_click) { Proc.new{ page.driver.resize(1000, 400) } }
+
+    it 'scales the image' do
+      width('.current').should == 200
+      height('.current').should == 200
+    end
+  end
+
+  shared_examples 'image scaled to the minimum allowed size' do
+    it 'scales the image to the minimum allowed size' do
+      width('.current').should == 200
+      height('.current').should == 200
+    end
+  end
+
+  context 'minimumSize.width' do
+    let(:js) { 'hermitage.minimumSize.width = 200'}
+    let(:before_click) { Proc.new{ page.driver.resize(300, 1000) } }
+    it_behaves_like 'image scaled to the minimum allowed size'
+  end
+
+  context 'minimumSize.width' do
+    let(:js) { 'hermitage.minimumSize.height = 200'}
+    let(:before_click) { Proc.new{ page.driver.resize(1000, 250) } }
+    it_behaves_like 'image scaled to the minimum allowed size'
+  end
+
+end

data/spec/features/viewer_spec.rb

@@ -27,14 +27,26 @@ describe 'viewer', type: :feature, js: true do
     page.should have_css("div#hermitage div#navigation-right")
   end
 
-  describe 'visitor clicks on shadow in the viewer' do
-    # Workaround for clicking at the shadow div
-    before(:each) { evaluate_script "$('#overlay').click()" }
+  it 'has close button' do
+    page.should have_css('div#hermitage div#close-button')
+  end
 
+  shared_examples 'close button' do
     it 'hides hermitage layer and removes everything from it' do
       page.should_not have_css('div#hermitage')
       page.find('div#hermitage', visible: false).all('*').length.should == 0
     end
   end
 
+  describe 'click on the close button' do
+    before(:each) { page.find('#close-button').click }
+    it_behaves_like 'close button'
+  end
+
+  describe 'click on shadow in the viewer' do
+    # Workaround for clicking at the shadow div
+    before(:each) { evaluate_script "$('#overlay').click()" }
+    it_behaves_like 'close button'
+  end
+
 end

data/spec/features_helper.rb

@@ -0,0 +1,42 @@
+#
+# There are helper methods for features specs
+#
+
+def css(selector, css)
+  evaluate_script("$('#{selector}').css('#{css}')")
+end
+
+def width(selector)
+  evaluate_script("$('#{selector}').outerWidth()")
+end
+
+def height(selector)
+  evaluate_script("$('#{selector}').outerHeight()")
+end
+
+def top(selector)
+  evaluate_script("$('#{selector}').position().top")
+end
+
+def left(selector)
+  evaluate_script("$('#{selector}').position().left")
+end
+
+# Workaround for clicking exactly on the specified position of the element
+def click_at(selector, offset_x, offset_y)
+  x = left(selector) + width(selector) * offset_x
+  y = top(selector) + height(selector) * offset_y
+  page.driver.click(x, y)
+end
+
+def click_at_left(selector)
+  click_at(selector, 0.25, 0.5)
+end
+
+def click_at_right(selector)
+  click_at(selector, 0.75, 0.5)
+end
+
+def text(selector)
+  evaluate_script("$('#{selector}').text()")
+end

data/spec/lib/hermitage/defaults_spec.rb

@@ -11,7 +11,8 @@ describe Hermitage::Defaults do
         list_class: 'thumbnails',
         item_class: 'span4',
         link_class: 'thumbnail',
-        image_class: nil
+        image_class: nil,
+        each_slice: nil
       }
     end
   end

data/spec/lib/hermitage/view_helpers_spec.rb

@@ -36,6 +36,12 @@ describe Hermitage::ViewHelpers, type: :helper do
         let(:expected) { '<ul><li><a class="thumb link" href="/assets/0-full.png" rel="hermitage"><img alt="0 thumbnail" class="thumb" src="/assets/0-thumbnail.png" /></a></li><li><a class="thumb link" href="/assets/1-full.png" rel="hermitage"><img alt="1 thumbnail" class="thumb" src="/assets/1-thumbnail.png" /></a></li></ul>' }
         it { should == expected }
       end
+
+      context 'each_slice' do
+        subject { template.render_gallery_for images, each_slice: 1 }
+        let(:expected) { '<ul class="thumbnails"><li class="span4"><a class="thumbnail" href="/assets/0-full.png" rel="hermitage"><img alt="0 thumbnail" src="/assets/0-thumbnail.png" /></a></li></ul><ul class="thumbnails"><li class="span4"><a class="thumbnail" href="/assets/1-full.png" rel="hermitage"><img alt="1 thumbnail" src="/assets/1-thumbnail.png" /></a></li></ul>' }
+        it { should == expected }
+      end
     end
 
     context 'with configs' do

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hermitage
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-04 00:00:00.000000000 Z
+date: 2013-09-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -198,6 +198,7 @@ files:
 - .rspec
 - .rvmrc
 - .travis.yml
+- CHANGELOG.md
 - Gemfile
 - LICENSE.txt
 - README.md
@@ -266,7 +267,9 @@ files:
 - spec/features/navigation_spec.rb
 - spec/features/render_gallery_spec.rb
 - spec/features/scale_spec.rb
+- spec/features/viewer_customization_spec.rb
 - spec/features/viewer_spec.rb
+- spec/features_helper.rb
 - spec/generators/install_spec.rb
 - spec/lib/hermitage/defaults_spec.rb
 - spec/lib/hermitage/railtie_spec.rb
@@ -353,7 +356,9 @@ test_files:
 - spec/features/navigation_spec.rb
 - spec/features/render_gallery_spec.rb
 - spec/features/scale_spec.rb
+- spec/features/viewer_customization_spec.rb
 - spec/features/viewer_spec.rb
+- spec/features_helper.rb
 - spec/generators/install_spec.rb
 - spec/lib/hermitage/defaults_spec.rb
 - spec/lib/hermitage/railtie_spec.rb