From c5e7e74467f960363439b0036842d36161e27a2e Mon Sep 17 00:00:00 2001 From: kevinparkerson Date: Mon, 24 Nov 2014 17:52:30 -0600 Subject: [PATCH] repeater-thumbnail-justify: fixes #851 by coming up with an alternate justify solution repeater-thumbnail-justify: fix to 'thumbnail_setSelectedItems' after making justify changes, which also makes unit tests pass repeater-thumbnail-justify: yet another minor fix because lint yells about something dumb repeater-thumbnail-justified: minor touchups after review repeater-thumbnail-justified: additional function name improvements repeater-thumbnail-justified: converted to thumbnail_alignment option instead so now center / justify / left / right (as well as 'none' or false) is supported repeater-thumbnail-justified: added unit tests. also added "spacer" class to injected spans repeater-thumbnail-justified: added default font-size for thumbnail --- dev/dev.html | 5 ++- js/repeater-list.js | 6 +-- js/repeater-thumbnail.js | 38 +++++++++++++++--- less/repeater-thumbnail.less | 33 ++++++++++++++++ test/repeater-thumbnail-test.js | 69 ++++++++++++++++++++++++++++++++- 5 files changed, 139 insertions(+), 12 deletions(-) diff --git a/dev/dev.html b/dev/dev.html index 27380427c..9d27f7b04 100644 --- a/dev/dev.html +++ b/dev/dev.html @@ -168,6 +168,7 @@ list_highlightSortedColumn: true }, 'thumbnail.view3': { + thumbnail_alignment: 'center', dataSource: function(options, callback){ thumbnail(options, callback); }, @@ -213,13 +214,13 @@
-
diff --git a/js/repeater-list.js b/js/repeater-list.js index 2a58bdc20..2b5ae89b5 100755 --- a/js/repeater-list.js +++ b/js/repeater-list.js @@ -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){ @@ -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); } } }; diff --git a/js/repeater-thumbnail.js b/js/repeater-thumbnail.js index 38cc922f1..7bced4f28 100755 --- a/js/repeater-thumbnail.js +++ b/js/repeater-thumbnail.js @@ -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); @@ -75,18 +86,21 @@ } for(i=0; i0){ 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, @@ -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 = $('
'); + 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){ @@ -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)){ @@ -158,6 +181,9 @@ } }); } + if(this.thumbnail_injectSpacers){ + $item.after(' '); + } } if(this.viewOptions.thumbnail_itemRendered){ this.viewOptions.thumbnail_itemRendered(obj, function(){ diff --git a/less/repeater-thumbnail.less b/less/repeater-thumbnail.less index 31e058570..6f7638e11 100755 --- a/less/repeater-thumbnail.less +++ b/less/repeater-thumbnail.less @@ -2,6 +2,7 @@ border: 1px solid #ddd; color: #666; float: left; + font-size: 14px; min-height: 110px; min-width: 100px; margin: 8px 7px; @@ -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; diff --git a/test/repeater-thumbnail-test.js b/test/repeater-thumbnail-test.js index 581f75c19..dacc40acd 100644 --- a/test/repeater-thumbnail-test.js +++ b/test/repeater-thumbnail-test.js @@ -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'); @@ -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 + }); + }); });