Implemented startup photo gallery. Closes fredwu#9.

Gemfile

@@ -8,6 +8,7 @@ gem 'devise',              '~> 1.4.2'
 gem 'omniauth',            '~> 0.2.0'
 gem 'inherited_resources', '~> 1.2.0'
 gem 'simple_form',         '~> 1.4.0'
+gem 'nested_form',                    :git => 'git://github.com/ryanb/nested_form.git'
 gem 'squeel',              '~> 0.8.0'
 gem 'rails_config'
 gem 'has_scope'

Gemfile.lock

@@ -1,3 +1,9 @@
+GIT
+  remote: git://github.com/ryanb/nested_form.git
+  revision: 57f32788f1952bcd633057b4b56b69b51df17610
+  specs:
+    nested_form (0.1.1)
+
 GIT
   remote: git://github.com/stonean/slim.git
   revision: a3465a03f913fb1c724797c785f13703265acd12
@@ -290,6 +296,7 @@ DEPENDENCIES
   mini_magick
   modernizr-rails
   mysql2
+  nested_form!
   omniauth (~> 0.2.0)
   pickle
   rails (~> 3.1.0.rc4)

app/assets/javascripts/_global_variables.js.coffee.erb

@@ -1 +1,2 @@
-window.label = <%= I18n.t('label').to_json %>
+window.label    = <%= I18n.t('label').to_json %>
+window.settings = <%= Settings.to_json %>

app/assets/javascripts/concerns/editable.js.coffee

@@ -45,7 +45,7 @@ jQuery ->
   edit_action = (parent) ->
     edit_target = parent.data('edit_target')
     cached_html = $(edit_target).html()
-    target_link = $('a', parent).attr('href')
+    target_link = $(parent).data('edit_href') || $('a', parent).attr('href')
 
     $(edit_target).wrapInner('<div class="cached" />') unless $('.cached', edit_target).length > 0
     $('.cached', edit_target).after('<div class="inline_edit"></div>') unless $('.inline_edit', edit_target).length > 0

app/assets/javascripts/concerns/gallery.js.coffee

@@ -0,0 +1,9 @@
+jQuery ->
+  $("#slideshow").livequery(->
+    $(@).slideshow(
+      pauseSeconds: 5
+      width: window.settings.group.logo.full.width
+      height: window.settings.group.logo.full.height
+      caption: false
+    )
+  )

app/assets/javascripts/libs/jquery/jquery.slideshow.lite.js

@@ -0,0 +1,209 @@
+/**
+ * Slideshow Lite plugin for jQuery
+ *
+ * v0.8.0
+ *
+ * Copyright (c) 2009 Fred Wu
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * Usage:
+ *
+ * // using default options
+ * $("#slideshow").slideshow();
+ *
+ * // using some custom options
+ * $("#slideshow2").slideshow({
+ *   pauseSeconds: 4,
+ *   height: 200,
+ *   caption: false
+ * });
+ *
+ * Configuration options:
+ *
+ * pauseSeconds  float    number of seconds between each photo to be displayed
+ * fadeSpeed     float    number of seconds for the fading transition, the value should not exceed `pauseSeconds`
+ * width         integer  width of the slideshow, in pixels
+ * height        integer  height of the slideshow, in pixels
+ * caption       boolean  display photo caption?
+ * cssClass      string   name of the CSS class, defaults to `slideshowlite`
+ * anchorTarget  string   name for the target="_xxx" attribute, defaults to `_self`
+ */
+
+(function($){
+  $.fn.slideshow = function(options){
+
+    var defaults = {
+      pauseSeconds: 2,
+      fadeSpeed: 0.5,
+      width: 468,
+      height: 120,
+      caption: true,
+      cssClass: 'slideshowlite',
+      anchorTarget: '_self'
+    };
+
+    var options = $.extend(defaults, options);
+
+    // ----------------------------------------
+    // slideshow instance
+    // ----------------------------------------
+
+    var runInstance = function(target) {
+      var items  = $("a", target);
+      var instance;
+
+      // ----------------------------------------
+      // some mandontory styling
+      // ----------------------------------------
+
+      if ( ! $(target).hasClass(options.cssClass)) $(target).addClass(options.cssClass);
+
+      $(target).css({
+        width: options.width + "px",
+        height: options.height + "px"
+      });
+
+      // ----------------------------------------
+      // create anchor links to make the structure simpler for manupilation
+      // ----------------------------------------
+
+      $("> img", target).wrap(document.createElement("a"));
+      $("a", target).attr("target", options.anchorTarget);
+
+      // ----------------------------------------
+      // add item sequence markups
+      // ----------------------------------------
+
+      var i = 1;
+      $("a", target).each(function(){
+        $(this).attr("rel", i++);
+      });
+
+      // ----------------------------------------
+      // create pagination and caption
+      // ----------------------------------------
+
+      $(target).append("<ul></ul>");
+      $(target).append("<ol></ol>");
+      var pagination = $("> ul", target);
+      var caption = $("> ol", target);
+
+      var i = 1;
+      var j = 0;
+      $("a", target).each(function(){
+        pagination.append("<li><a href=\"#\">" + i++ + "</a></li>");
+        caption.append("<li>" + $("img:nth(" + j++ + ")", target).attr("alt") + "</li>");
+      });
+      pagination.fadeTo(0, 0.8);
+      caption.fadeTo(0, 0.6);
+      caption.hide();
+
+      // ----------------------------------------
+      // shortcuts
+      // ----------------------------------------
+
+      var firstItem   = $("> a:first", target);
+      var lastItem    = $("> a:last", target);
+      var currentItem = firstItem;
+
+      // ----------------------------------------
+      // pagination highlight
+      // ----------------------------------------
+
+      var paginationHighlight = function(sequence){
+        $("> li > a", pagination).removeClass("current");
+        $("> li > a:nth(" + sequence + ")", pagination).addClass("current");
+      }
+
+      // ----------------------------------------
+      // caption
+      // ----------------------------------------
+
+      var showCaption = function(sequence){
+        caption.show();
+        $("> li", caption).hide();
+        $("> li:nth(" + sequence + ")", caption).fadeIn();
+      }
+
+      // ----------------------------------------
+      // slideshow logic
+      // ----------------------------------------
+
+      var makeSlideshow = function(){
+
+        // pagination click
+        $("> li > a", pagination).click(function(){
+          if ( ! $(this).hasClass("current"))
+          {
+            // select the current item after the pagination click
+            currentItem = $("a:nth(" + ($(this).text()-1) + ")", target);
+
+            currentItem.show();
+            startSlideshow();
+          }
+          return false;
+        });
+
+        // pagination highlight
+        paginationHighlight(currentItem.attr("rel")-1);
+
+        // show caption
+        if (options.caption == true)
+        {
+          showCaption(currentItem.attr("rel")-1);
+        }
+
+        currentItem.css("z-index", 2);
+
+        // show the current slide
+        currentItem.fadeIn(options.fadeSpeed*1000, function(){
+          $("> a", target).hide();
+          $(this).show().css("z-index", 1);
+        });
+
+        // prepare for the next slide
+        // determines the next item (or we need to rewind to the first item?)
+        if ($("img", currentItem).attr("src") == $("img", lastItem).attr("src"))
+        {
+          currentItem = firstItem;
+        }
+        else
+        {
+          currentItem = currentItem.next();
+        }
+
+        currentItem.css("z-index", 1);
+      };
+
+      var startSlideshow = function(){
+        clearInterval(instance);
+        makeSlideshow();
+        instance = setInterval(makeSlideshow, options.pauseSeconds*1000);
+      };
+
+      // ----------------------------------------
+      // start the slideshow!
+      // ----------------------------------------
+
+      startSlideshow();
+    }
+
+    // ----------------------------------------
+    // run the slideshow instances!
+    // ----------------------------------------
+
+    if (this.length > 1) {
+      this.each(function() {
+        runInstance(this);
+      });
+    } else {
+      runInstance(this);
+    }
+
+  };
+})(jQuery);

app/assets/javascripts/libs/nested_form.js

@@ -0,0 +1,51 @@
+jQuery(function($) {
+  $('form a.add_nested_fields').live('click', function() {
+    // Setup
+    var assoc   = $(this).attr('data-association');            // Name of child
+    var content = $('#' + assoc + '_fields_blueprint').html(); // Fields template
+
+    // Make the context correct by replacing new_<parents> with the generated ID
+    // of each of the parent objects
+    var context = ($(this).closest('.fields').find('input:first').attr('name') || '').replace(new RegExp('\[[a-z]+\]$'), '');
+
+    // context will be something like this for a brand new form:
+    // project[tasks_attributes][new_1255929127459][assignments_attributes][new_1255929128105]
+    // or for an edit form:
+    // project[tasks_attributes][0][assignments_attributes][1]
+    if(context) {
+      var parent_names = context.match(/[a-z_]+_attributes/g) || [];
+      var parent_ids   = context.match(/(new_)?[0-9]+/g) || [];
+
+      for(var i = 0; i < parent_names.length; i++) {
+        if(parent_ids[i]) {
+          content = content.replace(
+            new RegExp('(_' + parent_names[i] + ')_.+?_', 'g'),
+            '$1_' + parent_ids[i] + '_');
+
+          content = content.replace(
+            new RegExp('(\\[' + parent_names[i] + '\\])\\[.+?\\]', 'g'),
+            '$1[' + parent_ids[i] + ']');
+        }
+      }
+    }
+
+    // Make a unique ID for the new child
+    var regexp  = new RegExp('new_' + assoc, 'g');
+    var new_id  = new Date().getTime();
+    content     = content.replace(regexp, "new_" + new_id);
+
+    var field = $(content).insertBefore(this);
+    $(this).closest("form").trigger({type: 'nested:fieldAdded', field: field});
+    return false;
+  });
+
+  $('form a.remove_nested_fields').live('click', function() {
+    var hidden_field = $(this).prev('input[type=hidden]')[0];
+    if(hidden_field) {
+      hidden_field.value = '1';
+    }
+    $(this).closest('.fields').hide();
+    $(this).closest("form").trigger('nested:fieldRemoved');
+    return false;
+  });
+});

app/assets/javascripts/startup_photos.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

app/assets/stylesheets/application.css.scss

@@ -7,7 +7,8 @@
 */
 
 /*@import 'inc/reset.css';*/
-@import 'inc/jquery.autoSuggest.css';
 @import 'inc/html5-boilerplate.css';
 @import 'inc/960_12_10_10.css';
+@import 'inc/jquery.autoSuggest.css';
+@import 'inc/jquery.slideshow.lite.css';
 @import 'style.css';