From bce532fe0cd161a12b13c4e5782e5db2e03c63fb Mon Sep 17 00:00:00 2001
From: Christopher Jesudurai <jchris@stanford.edu>
Date: Tue, 3 Jun 2014 23:39:51 -0700
Subject: [PATCH] Add auto play and size config to carousel widget

---
 .../spotlight/blocks/item_carousel_block.js   |   2 +-
 .../spotlight/blocks/multi_up_item_grid.js    | 217 ++++++++++++------
 .../spotlight/_item_text_block.css.scss       |  15 +-
 .../blocks/_item_carousel_block.html.erb      |   2 +-
 4 files changed, 158 insertions(+), 78 deletions(-)

diff --git a/app/assets/javascripts/spotlight/blocks/item_carousel_block.js b/app/assets/javascripts/spotlight/blocks/item_carousel_block.js
index 98604a8e0..be0fc7476 100644
--- a/app/assets/javascripts/spotlight/blocks/item_carousel_block.js
+++ b/app/assets/javascripts/spotlight/blocks/item_carousel_block.js
@@ -9,6 +9,6 @@ SirTrevor.Blocks.ItemCarousel =  (function(){
 
     icon_name: "item-carousel",
 
-    description: "This widget displays one to five thumbnail images of repository items in a carousel. Optionally, you can a caption below each image.."
+    description: "This widget displays one to five thumbnail images of repository items in a carousel. You can configure the captions that appear below each carousel image and how the images are cycled."
   });
 })();;
\ No newline at end of file
diff --git a/app/assets/javascripts/spotlight/blocks/multi_up_item_grid.js b/app/assets/javascripts/spotlight/blocks/multi_up_item_grid.js
index 5fb1bff3d..271936552 100644
--- a/app/assets/javascripts/spotlight/blocks/multi_up_item_grid.js
+++ b/app/assets/javascripts/spotlight/blocks/multi_up_item_grid.js
@@ -8,7 +8,7 @@
 */
 
 SirTrevor.Blocks.MultiUpItemGrid =  (function(){
-  
+
   return Spotlight.Block.extend({
 
     key: "item-grid",
@@ -20,6 +20,9 @@ SirTrevor.Blocks.MultiUpItemGrid =  (function(){
     show_primary_caption: "show-primary-caption",
     secondary_field_key: "item-grid-secondary-caption-field",
     show_secondary_caption: "show-secondary-caption",
+    auto_play_images_key: "auto-play-images",
+    auto_play_images_interval_key: "auto-play-images-interval",
+    max_height_key: "max-height",
     title_key: "spotlight_title_field",
 
     type: "multi-up-item-grid",
@@ -28,6 +31,18 @@ SirTrevor.Blocks.MultiUpItemGrid =  (function(){
 
     icon_name: "multi-up-item-grid",
 
+    inputFieldsCount: 5,
+
+    carouselCycleTimesInSeconds: {
+      values: [ 3, 5, 8, 12, 20 ],
+      selected: 5
+    },
+
+    carouselMaxHeights: {
+      values: { 'Small': 200, 'Medium': 350, 'Large': 500 },
+      selected: 'Medium'
+    },
+
     onBlockRender: function() {
       Spotlight.Block.prototype.onBlockRender.apply();
       this.loadCaptionField();
@@ -56,86 +71,142 @@ SirTrevor.Blocks.MultiUpItemGrid =  (function(){
     description: "This widget displays one to five thumbnail images of repository items in a single row grid. Optionally, you can a caption below each image..",
 
     template: _.template([
-    '<div class="form-inline <%= key %>-admin clearfix">',
-      '<div class="widget-header">',
-        '<%= description %>',
-      '</div>',
-      '<div class="col-sm-8">',
-        '<label for="<%= formId(id_key) %>_0" class="control-label">Selected items to display</label>',
-        '<div class="form-group panel-group dd nestable-item-grid">',
-          '<ol class="dd-list">',
-            '<%= buildInputFields(inputFieldsCount) %>',
-          '</ol>',
+      '<div class="form-inline <%= key %>-admin clearfix">',
+        '<div class="widget-header">',
+          '<%= description %>',
         '</div>',
-      '</div>',
-      '<div class="col-sm-4">',
-        '<div class="field-select primary-caption" data-behavior="item-caption-admin">',
-          '<input name="<%= show_primary_caption %>" id="<%= formId(show_primary_caption) %>" type="checkbox" value="true" />',
-          '<label for="<%= formId(show_primary_caption) %>">Primary caption</label>',
-          '<select name="<%= primary_field_key %>" id="<%= formId(primary_field_key) %>">',
-            '<option value="">Select...</option>',
-            '<%= caption_field_template({field: title_key, label: "Title", selected: ""}) %>',
-          '</select>',
+        '<div class="col-sm-8">',
+          '<label for="<%= formId(id_key) %>_0" class="control-label">Selected items to display</label>',
+          '<div class="form-group panel-group dd nestable-item-grid">',
+            '<ol class="dd-list">',
+              '<%= buildInputFields(inputFieldsCount) %>',
+            '</ol>',
+          '</div>',
         '</div>',
-        '<div class="field-select secondary-caption" data-behavior="item-caption-admin">',
-          '<input name="<%= show_secondary_caption %>" id="<%= formId(show_secondary_caption) %>" type="checkbox" value="true" />',
-          '<label for="<%= formId(show_secondary_caption) %>">Secondary caption</label>',
-          '<select name="<%= secondary_field_key %>" id="<%= formId(secondary_field_key) %>">',
-            '<option value="">Select...</option>',
-            '<%= caption_field_template({field: title_key, label: "Title", selected: ""}) %>',
-          '</select>',
+        '<div class="col-sm-4">',
+          '<div class="field-select primary-caption" data-behavior="item-caption-admin">',
+            '<input name="<%= show_primary_caption %>" id="<%= formId(show_primary_caption) %>" type="checkbox" value="true" />',
+            '<label for="<%= formId(show_primary_caption) %>">Primary caption</label>',
+            '<select name="<%= primary_field_key %>" id="<%= formId(primary_field_key) %>">',
+              '<option value="">Select...</option>',
+              '<%= caption_field_template({field: title_key, label: "Title", selected: ""}) %>',
+            '</select>',
+          '</div>',
+          '<div class="field-select secondary-caption" data-behavior="item-caption-admin">',
+            '<input name="<%= show_secondary_caption %>" id="<%= formId(show_secondary_caption) %>" type="checkbox" value="true" />',
+            '<label for="<%= formId(show_secondary_caption) %>">Secondary caption</label>',
+            '<select name="<%= secondary_field_key %>" id="<%= formId(secondary_field_key) %>">',
+              '<option value="">Select...</option>',
+              '<%= caption_field_template({field: title_key, label: "Title", selected: ""}) %>',
+            '</select>',
+          '</div>',
+          '<%= addCarouselFields() %>',
         '</div>',
-      '</div>',
-    '</div>'
-  ].join("\n")),
+      '</div>'
+    ].join("\n")),
 
-  makeItemGridNestable: function() {
-    $('.nestable-item-grid').nestable({maxDepth: 1});
-    $('.nestable-item-grid').on('change', function(){
-      var i = 0;
-      $('li.dd-item', $(this)).each(function(){
-        $("[data-nestable-observe]", $(this)).each(function(){
-          replaceName($(this), i)
+    makeItemGridNestable: function() {
+      $('.nestable-item-grid').nestable({maxDepth: 1});
+      $('.nestable-item-grid').on('change', function(){
+        var i = 0;
+        $('li.dd-item', $(this)).each(function(){
+          $("[data-nestable-observe]", $(this)).each(function(){
+            replaceName($(this), i)
+          });
+          replaceName($("[data-target-panel='#" + $(this).attr('id') + "']"), i);
+          i++;
         });
-        replaceName($("[data-target-panel='#" + $(this).attr('id') + "']"), i);
-        i++;
       });
-    });
-    addRemoveAutocompletedPanelBehavior();
-  },
-
-  inputFieldsCount: 5,
-
-  buildInputFields: function(times) {
-    output = '<input type="hidden" name="<%= id_key %>_count" value="' + times + '"/>';
-    for(var i=0; i < times; i++){
-      output += '<div class="col-sm-11 field">';
-        output += '<li class="dd-item dd3-item" style="display:none" data-id="' + (i+1) + '" id="<%= formId(panel + "_' + i + '") %>">';
-          output += '<div class="dd-handle dd3-handle">Drag</div>';
-          output += '<div class="dd3-content panel panel-default">';
-            output += '<div class="panel-heading item-grid">';
-              output += '<div class="checkbox">';
-                output += '<input name="<%= display_checkbox + "_' + i + '" %>" id="<%= formId(display_checkbox + "_' + i + '") %>" type="checkbox" class="item-grid-checkbox" value="true" data-nestable-observe="true" />';
-              output += '</div>';
-              output += '<div class="pic thumbnail">';
-                output += '<img style="display:none" />';
-                output += '<input type="hidden" name="<%= thumbnail_key + "_' + i + '" %>" id="<%= formId(thumbnail_key + "_' + i + '") %>" data-item-grid-thumbnail="true" data-nestable-observe="true" />';
-              output += '</div>';
-              output += '<div class="main">';
-                output += '<div class="title panel-title" data-panel-title="true"></div>';
-                output += '<div data-panel-id-display="true"></div>';
-              output += '</div>';
-              output += '<div class="remove pull-right">';
-                output += '<a data-item-grid-panel-remove="true" href="#">Remove</a>'
+      addRemoveAutocompletedPanelBehavior();
+    },
+
+
+    buildInputFields: function(times) {
+      var output = '<input type="hidden" name="<%= id_key %>_count" value="' + times + '"/>';
+
+      for(var i=0; i < times; i++){
+        output += '<div class="col-sm-11 field">';
+          output += '<li class="dd-item dd3-item" style="display:none" data-id="' + (i+1) + '" id="<%= formId(panel + "_' + i + '") %>">';
+            output += '<div class="dd-handle dd3-handle">Drag</div>';
+            output += '<div class="dd3-content panel panel-default">';
+              output += '<div class="panel-heading item-grid">';
+                output += '<div class="checkbox">';
+                  output += '<input name="<%= display_checkbox + "_' + i + '" %>" id="<%= formId(display_checkbox + "_' + i + '") %>" type="checkbox" class="item-grid-checkbox" value="true" data-nestable-observe="true" />';
+                output += '</div>';
+                output += '<div class="pic thumbnail">';
+                  output += '<img style="display:none" />';
+                  output += '<input type="hidden" name="<%= thumbnail_key + "_' + i + '" %>" id="<%= formId(thumbnail_key + "_' + i + '") %>" data-item-grid-thumbnail="true" data-nestable-observe="true" />';
+                output += '</div>';
+                output += '<div class="main">';
+                  output += '<div class="title panel-title" data-panel-title="true"></div>';
+                  output += '<div data-panel-id-display="true"></div>';
+                output += '</div>';
+                output += '<div class="remove pull-right">';
+                  output += '<a data-item-grid-panel-remove="true" href="#">Remove</a>'
+                output += '</div>';
+                output += '<input name="<%= id_key + "_' + i + '" %>" class="item-grid-input" type="hidden" id="<%= formId(id_key + "_' + i + '") %>" data-nestable-observe="true" />';
               output += '</div>';
-              output += '<input name="<%= id_key + "_' + i + '" %>" class="item-grid-input" type="hidden" id="<%= formId(id_key + "_' + i + '") %>" data-nestable-observe="true" />';
             output += '</div>';
-          output += '</div>';
-        output += '</li>';
-        output += '<input data-target-panel="#<%= formId(panel + "_' + i + '") %>" data-checkbox_field="#<%= formId(display_checkbox + "_' + i + '") %>" data-id_field="#<%= formId(id_key + "_' + i + '") %>" name="<%= id_key + "_' + i + '_title" %>" class="st-input-string item-grid-input form-control" data-twitter-typeahead="true" type="text" id="<%= formId(id_key + "_' + i + '_title") %>" data-nestable-observe="true" />';
-      output += '</div>';
+          output += '</li>';
+          output += '<input data-target-panel="#<%= formId(panel + "_' + i + '") %>" data-checkbox_field="#<%= formId(display_checkbox + "_' + i + '") %>" data-id_field="#<%= formId(id_key + "_' + i + '") %>" name="<%= id_key + "_' + i + '_title" %>" class="st-input-string item-grid-input form-control" data-twitter-typeahead="true" type="text" id="<%= formId(id_key + "_' + i + '_title") %>" data-nestable-observe="true" />';
+        output += '</div>';
+      }
+
+      return _.template(output)(this);
+    },
+
+
+    addCarouselFields: function() {
+      var tpl = '';
+
+      if (this.type === 'item-carousel') {
+        tpl = [
+          '<div class="field-select auto-cycle-images" data-behavior="auto-cycle-images">',
+            '<input name="<%= auto_play_images_key %>" id="<%= formId(auto_play_images_key) %>" data-key="<%= auto_play_images_key %>" type="checkbox" value="true" checked/>',
+            '<label for="<%= formId(auto_play_images_key) %>">Automatically cycle images</label>',
+            '<select name="<%= auto_play_images_interval_key %>" id="<%= formId(auto_play_images_interval_key) %>" data=key="<%= auto_play_images_interval_key %>">',
+              '<option value="">Select...</option>',
+              '<%= addCarouselCycleOptions(carouselCycleTimesInSeconds) %>',
+            '</select>',
+          '</div>',
+          '<div class="field-select max-heights" data-behavior="max-heights">',
+            '<label for="<%= formId(max_height_key) %>">Maximum carousel height</label><br/>',
+            '<%= addCarouselMaxHeightOptions(carouselMaxHeights) %>',
+          '</div>',
+        ].join("\n");
+      }
+
+
+      return _.template(tpl)(this);
+    },
+
+    addCarouselCycleOptions: function(options) {
+      var html = '';
+
+      $.each(options.values, function(index, interval) {
+        var selected = (interval === options.selected) ? 'selected' : '',
+            intervalInMilliSeconds = parseInt(interval, 10) * 1000;
+
+        html += '<option value="' + intervalInMilliSeconds + '" ' + selected + '>' + interval + ' seconds</option>';
+      });
+
+      return html;
+    },
+
+    addCarouselMaxHeightOptions: function(options) {
+      var html = '',
+          _this = this;
+
+      $.each(options.values, function(size, px) {
+        var checked = (size === options.selected) ? 'checked' : '',
+            id = _this.formId(_this.max_height_key)
+
+        html += '<input data-key="' + _this.max_height_key + '" type="radio" name="' + id + '" value="' + px + '" id="' + id + '" ' + checked + '>';
+        html += '<label class="carousel-size" for="' + id + '">' + size + '</label>';
+      });
+
+      return html;
     }
-    return _.template(output)(this);
-  }
+
   });
 })();
diff --git a/app/assets/stylesheets/spotlight/_item_text_block.css.scss b/app/assets/stylesheets/spotlight/_item_text_block.css.scss
index d7d22ef33..fc38a8a57 100644
--- a/app/assets/stylesheets/spotlight/_item_text_block.css.scss
+++ b/app/assets/stylesheets/spotlight/_item_text_block.css.scss
@@ -6,7 +6,7 @@
 .item-text {
   .image-block {
     max-width: 30%;
-    
+
     .thumbnail {
       margin-bottom: 5;
     }
@@ -30,11 +30,20 @@
 .st-block input[type="text"] {
     @extend .form-control;
 }
-.primary-caption, .secondary-caption {
+.primary-caption, .secondary-caption, .auto-cyle-images {
   select {
     margin-left: 10px;
   }
 }
+
+.max-heights {
+  label.carousel-size {
+    margin-left: 5px;
+    padding-right: 10px;
+    font-weight: normal;
+  }
+}
+
 .item-text-admin {
   .text-align {
     margin-top: 15px;
@@ -53,6 +62,6 @@
       @include record-thubmnail-textarea;
     }
     @include record-thubmnail-textarea;
-    
+
   }
 }
diff --git a/app/views/sir-trevor/blocks/_item_carousel_block.html.erb b/app/views/sir-trevor/blocks/_item_carousel_block.html.erb
index 53a328095..e6303bf2e 100644
--- a/app/views/sir-trevor/blocks/_item_carousel_block.html.erb
+++ b/app/views/sir-trevor/blocks/_item_carousel_block.html.erb
@@ -1,7 +1,7 @@
 <% block_ids = item_grid_block_ids(block) %>
 <% html_id = "carousel-#{block.object_id}" %>
 
-<div class="content-block slideshow-block">
+<div class="content-block slideshow-block" data-auto-play="<%= block['auto-play-images'] %>" data-interval="<%= block['auto-play-images-interval'] %>" data-size="<%= block['max-height'] %>">
 <% unless block_ids.blank? %>
   <% documents = get_solr_response_for_field_values("id", item_grid_block_ids(block)).last.select { |doc| block_ids.include? doc.id  }.sort_by { |doc| block_ids.index doc.id } %>