Skip to content

Commit

Permalink
Merge pull request ExactTarget#873 from ExactTarget/repeater-thumbnai…
Browse files Browse the repository at this point in the history 
…l-justify

Repeater Thumbnail Alignment
  • Loading branch information
Stephen Williams committed Dec 3, 2014
2 parents ab6646e + c5e7e74 commit a9ad5ae
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 12 deletions.
5 changes: 3 additions & 2 deletions dev/dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@
list_highlightSortedColumn: true
},
'thumbnail.view3': {
thumbnail_alignment: 'center',
dataSource: function(options, callback){
thumbnail(options, callback);
},
Expand Down Expand Up @@ -213,13 +214,13 @@
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<div class="btn-group repeater-views" data-toggle="buttons">
<label class="btn btn-default active">
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="list.view1"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="list.view2"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<label class="btn btn-default active">
<input name="repeaterViews" type="radio" value="thumbnail.view3"><span class="glyphicon glyphicon-th"></span>
</label>
</div>
Expand Down
6 changes: 3 additions & 3 deletions js/repeater-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,8 @@
var self = this;
var data, i, $item, l;

var eachFunc = function(){
//this function is necessary because lint yells when a function is in a loop
var checkIfItemMatchesValue = function(){
$item = $(this);
data = $item.data('item_data') || {};
if(data[items[i].property]===items[i].value){
Expand Down Expand Up @@ -115,8 +116,7 @@
selectItem($item, items[i].selected);
}
}else if(items[i].property!==undefined && items[i].value!==undefined){
//lint demanded this function not be within this loop
this.$canvas.find('.repeater-list table tbody tr').each(eachFunc);
this.$canvas.find('.repeater-list table tbody tr').each(checkIfItemMatchesValue);
}
}
};
Expand Down
38 changes: 32 additions & 6 deletions js/repeater-thumbnail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,20 @@
$.fn.repeater.Constructor.prototype.thumbnail_setSelectedItems = function(items, force){
var selectable = this.viewOptions.thumbnail_selectable;
var self = this;
var i, $item, l;
var i, $item, l, n;

var eachFunc = function(){
//this function is necessary because lint yells when a function is in a loop
var compareItemIndex = function(){
if(n===items[i].index){
$item = $(this);
return false;
}else{
n++;
}
};

//this function is necessary because lint yells when a function is in a loop
var compareItemSelector = function(){
$item = $(this);
if($item.is(items[i].selector)){
selectItem($item, items[i].selected);
Expand Down Expand Up @@ -75,18 +86,21 @@
}
for(i=0; i<l; i++){
if(items[i].index!==undefined){
$item = this.$canvas.find('.repeater-thumbnail-cont .selectable:nth-child(' + (items[i].index + 1) + ')');
$item = $();
n = 0;
this.$canvas.find('.repeater-thumbnail-cont .selectable').each(compareItemIndex);
if($item.length>0){
selectItem($item, items[i].selected);
}
}else if(items[i].selector){
this.$canvas.find('.repeater-thumbnail-cont .selectable').each(eachFunc);
this.$canvas.find('.repeater-thumbnail-cont .selectable').each(compareItemSelector);
}
}
};

//ADDITIONAL DEFAULT OPTIONS
$.fn.repeater.defaults = $.extend({}, $.fn.repeater.defaults, {
thumbnail_alignment: 'justify',
thumbnail_infiniteScroll: false,
thumbnail_itemRendered: null,
thumbnail_selectable: false,
Expand All @@ -106,13 +120,22 @@
},
renderer: {
render: function(helpers, callback){
var alignment = this.viewOptions.thumbnail_alignment;
var $item = this.$canvas.find('.repeater-thumbnail-cont');
var obj = {};
var $empty;
var $empty, validAlignments;
if($item.length>0){
obj.action = 'none';
}else{
$item = $('<div class="clearfix repeater-thumbnail-cont" data-container="true" data-infinite="true" data-preserve="shallow"></div>');
if(alignment && alignment!=='none'){
validAlignments = { 'center': 1, 'justify': 1, 'left': 1, 'right': 1 };
alignment = (validAlignments[alignment]) ? alignment : 'justify';
$item.addClass('align-' + alignment);
this.thumbnail_injectSpacers = true;
}else{
this.thumbnail_injectSpacers = false;
}
}
obj.item = $item;
if(helpers.data.items.length<1){
Expand All @@ -138,8 +161,8 @@
var $item;
if(helpers.item!==undefined){
obj.item = helpers.item;
$item = $(obj.item);
if(selectable){
$item = $(obj.item);
$item.addClass('selectable');
$item.on('click', function(){
if(!$item.hasClass(selected)){
Expand All @@ -158,6 +181,9 @@
}
});
}
if(this.thumbnail_injectSpacers){
$item.after('<span class="spacer">&nbsp;</span>');
}
}
if(this.viewOptions.thumbnail_itemRendered){
this.viewOptions.thumbnail_itemRendered(obj, function(){
Expand Down
33 changes: 33 additions & 0 deletions less/repeater-thumbnail.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
border: 1px solid #ddd;
color: #666;
float: left;
font-size: 14px;
min-height: 110px;
min-width: 100px;
margin: 8px 7px;
Expand All @@ -19,6 +20,38 @@
padding: 6px;
width: 100%;

&.align-center, &.align-justify, &.align-left, &.align-right {
position: relative;
font-size: 0.1px;

&:after {
display: inline-block;
width: 100%;
content: '';
}

.infinitescroll {
&-end, &-load {
display: inline-block;
width: 100%;
}
}

.repeater-thumbnail {
display: inline-block;
float: none;
font-size: 14px;

&:after {
content: ' ';
}
}
}
&.align-center { text-align: center; }
&.align-justify { text-align: justify; }
&.align-left { text-align: left; }
&.align-right { text-align: right; }

div.empty {
font-style: italic;
padding: 20px 10px;
Expand Down
69 changes: 68 additions & 1 deletion test/repeater-thumbnail-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,9 +231,18 @@ define(function(require){
var $cont = $repeater.find('.repeater-thumbnail-cont');

setTimeout(function(){
var n = 0;

start();

$repeater.find('.repeater-thumbnail:nth-child(5)').addClass('test');
$repeater.find('.repeater-thumbnail').each(function(){
if(n===4){
$(this).addClass('test');
return false;
}else{
n++;
}
});

$repeater.repeater('thumbnail_setSelectedItems', [{ index: 0 }]);
equal($repeater.repeater('thumbnail_getSelectedItems').length, 1, 'correct number of items selected');
Expand All @@ -253,4 +262,62 @@ define(function(require){
thumbnail_selectable: true
});
});

asyncTest('should handle alignment option properly', function(){
var alignment = 'none';
var $repeater = $(this.$markup);
var self = this;

afterSource = function(){
var $cont = $repeater.find('.repeater-thumbnail-cont');

setTimeout(function(){
start();

switch(alignment){
case 'center':
equal($cont.hasClass('align-center'), true, 'repeater-thumbnail-cont has align-center class when alignment option set to ' + alignment);
equal($cont.find('span.spacer').length>0, true, 'repeater-thumbnail-cont contains spacers when alignment option set to ' + alignment);
alignment = 'justify';
break;
case 'justify':
equal($cont.hasClass('align-justify'), true, 'repeater-thumbnail-cont has align-justify class when alignment option set to ' + alignment);
equal($cont.find('span.spacer').length>0, true, 'repeater-thumbnail-cont contains spacers when alignment option set to ' + alignment);
alignment = 'left';
break;
case 'left':
equal($cont.hasClass('align-left'), true, 'repeater-thumbnail-cont has align-left class when alignment option set to ' + alignment);
equal($cont.find('span.spacer').length>0, true, 'repeater-thumbnail-cont contains spacers when alignment option set to ' + alignment);
alignment = 'right';
break;
case 'right':
equal($cont.hasClass('align-right'), true, 'repeater-thumbnail-cont has align-right class when alignment option set to ' + alignment);
equal($cont.find('span.spacer').length>0, true, 'repeater-thumbnail-cont contains spacers when alignment option set to ' + alignment);
alignment = false;
break;
default:
equal($cont.hasClass('align-center align-justify align-left align-right'), false, 'repeater-thumbnail-cont does not have alignment classes when alignment set to ' + alignment);
equal($cont.find('span.spacer').length, 0, 'repeater-thumbnail-cont does not contain spacers when alignment option set to ' + alignment);
if(alignment==='none'){
alignment = 'center';
}else{
return;
}
}

stop();
$repeater.remove();
$repeater = $(self.$markup);
$repeater.repeater({
dataSource: dataSource,
thumbnail_alignment: alignment
});
}, 0);
};

$repeater.repeater({
dataSource: dataSource,
thumbnail_alignment: alignment
});
});
});

0 comments on commit a9ad5ae

Please sign in to comment.