Skip to content

Commit

Permalink
Merge pull request #693 from sul-dlss/carousel-widget-config
Browse files Browse the repository at this point in the history 
Add auto play and size config to carousel widget
  • Loading branch information
@cbeer
cbeer committed Jun 4, 2014
2 parents b151414 + bce532f commit 3edb6b6
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 78 deletions.
2 changes: 1 addition & 1 deletion app/assets/javascripts/spotlight/blocks/item_carousel_block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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."
});
})();;
217 changes: 144 additions & 73 deletions app/assets/javascripts/spotlight/blocks/multi_up_item_grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

SirTrevor.Blocks.MultiUpItemGrid = (function(){

return Spotlight.Block.extend({

key: "item-grid",
Expand All @@ -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",
Expand All @@ -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();
Expand Down Expand Up @@ -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);
}

});
})();
15 changes: 12 additions & 3 deletions app/assets/stylesheets/spotlight/_item_text_block.css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
.item-text {
.image-block {
max-width: 30%;

.thumbnail {
margin-bottom: 5;
}
Expand All @@ -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;
Expand All @@ -53,6 +62,6 @@
@include record-thubmnail-textarea;
}
@include record-thubmnail-textarea;

}
}
2 changes: 1 addition & 1 deletion app/views/sir-trevor/blocks/_item_carousel_block.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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 } %>

Expand Down

0 comments on commit 3edb6b6

Please sign in to comment.