Skip to content

Instantly share code, notes, and snippets.

@jdaly13
Created September 4, 2013 22:48
Show Gist options
  • Save jdaly13/6443845 to your computer and use it in GitHub Desktop.
Save jdaly13/6443845 to your computer and use it in GitHub Desktop.
related products module
<script>
//this should probably be added to an external file
setTimeout(function () {
(function (w, d) {
var smallerScreen = "(max-width:990px)"; // this is set in movies.scss as part of media query
var removedTextArray = [];
var removedTextArrayone = [];
var relatedProductsContainer = $("#relatedProducts"); //normally set in ini
var $ul = $('div.btn-dropdown ul');
var liFirstChild = $('div.product_content ul.product_description_list li:first-child');
var liLastChild = $('div.product_content ul.product_description_list li:last-child');
var liOnlyChild = $('div.product_content ul.product_description_list li:only-child');
var liSpanElement = liFirstChild.children('span:first-child');
var lastLiSpanElement = liLastChild.children('span');
var more = $('<a class="more_or_less more" style="cursor:pointer">more</a>'); //more trigger
var less = $('<a class="more_or_less less" style="cursor:pointer">less</a>'); //less trigger
var headerThree = $('div.product_content h3.product_header');
var characterLineLimit = 3;
var titleLineLimit = 2;
var articleLength = relatedProductsContainer.find('.related-item').length;
more.insertAfter(liSpanElement);
less.insertAfter(lastLiSpanElement);
var borderPatrol = function (resize) {
var smallScreen = window.matchMedia(smallerScreen);
var isEven = function(n) {
return n % 2 === 0;
}(articleLength);
if (isEven && !smallScreen.matches) {
relatedProductsContainer.find('.related-item').eq(articleLength - 2).addClass('borderNone');
} else {
relatedProductsContainer.find('.related-item').eq(articleLength - 2).removeClass('borderNone');
}
if ($('html').hasClass('lt-ie9')) {
relatedProductsContainer.find('.related-item').eq(articleLength - 1).addClass('borderNone');
//ie 8 doesn't support last:child selector
}
};
borderPatrol();
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
$(window).on('resizeEnd', function() {
borderPatrol();
$('.related-item').removeAttr('style');
liLastChild.find('a.less').hammer().trigger('tap');
});
});
//drop down menu
$(d).hammer().on("tap", function(event) {
if (!event.gesture) return false;
var target = event.target;
$ul_target = $(target).next('ul');
if (target.className === "drop_trigger") {
$ul_target.toggle();
} else {
if ((target.tagName !== "A") || (target.tagName !== "LI")) {
$ul.hide();
}
}
});
relatedProductsContainer.find('.related-item:odd').addClass('right');
headerThree.each(function () {
$(this).truncateByLine(titleLineLimit);
});
liOnlyChild.each(function (index, element) {
var $that = $(this);
$that.find('a.less').remove();
var $onlyChild = $('<span class="extra onlychild"></span>');
$onlyChild.insertAfter($(element).find('span:first-child'));
removedTextArrayone[index] = $that.find('span:first-child').truncateByLine(characterLineLimit, 'relatedProducts');
if (removedTextArrayone[index] === undefined) {
$that.prev().addClass('noelipses');
$that.find('a.more').remove();
} else {
$onlyChild.text(' ' + removedTextArrayone[index]).hide();
}
$that.hammer().on('tap', 'a.more_or_less', function (e){
var $this = $(this);
var mainParent = $this.parents('article');
var smallScreen = window.matchMedia(smallerScreen);
if (($this.prev().is(':hidden'))) {
$this.siblings('span.ellipsis').removeClass('ellipsis');
$this.text('less').prev().show();
mainParent.removeAttr('style');
$this.parents('ul').animate({'max-height': '700px'}, 400, function () {
$('html,body').animate({scrollTop: mainParent.offset().top},'slow');
});
var articleHeight = mainParent.height();
setHeight(articleHeight,mainParent, smallScreen.matches);
} else {
$this.text('more').siblings('span').not('span.extra').addClass('ellipsis');
$this.prev().hide();
removeHeight(mainParent, smallScreen.matches);
}
});
});
liFirstChild.each(function (index, element) {
var $element = $(element);
var containerHeight = $element.parents('article').outerHeight();
//var ulHeight = $element.parent().height();
$element.siblings('li').css('opacity', 0);
$element.parent().css('max-height', '85px');
if ($element.siblings().length !== 0) {
var $spanExtra = $('<span class="extra"></span>');
$spanExtra.appendTo($element).hide();
}
removedTextArray[index] = $(element).find('span:first-child').truncateByLine(characterLineLimit, 'relatedProducts');
$element.hammer().on('tap', 'a.more', function (event){
if (!event.gesture) return false;
var $this = $(this);
if ($this.parent().siblings().length === 0) {return false;}
var smallScreen = window.matchMedia(smallerScreen);
var mainParent = $this.parents('article');
$this.hide().prev('span').removeClass('ellipsis');
if (!(smallScreen.matches)) {
$this.parents('ul').animate({'max-height': '700px'}, 400);
$this.parent().nextAll().animate({'opacity':100}, 400, function () {
$('html,body').animate({scrollTop: mainParent.offset().top},'slow');
});
} else {
$this.parents('ul').removeAttr('style');
$this.parents('article').addClass('slide');
$(this).parent().nextAll().addClass('slide');
}
if (removedTextArray[index] === undefined) {
$this.prev().addClass('noelipses');
} else {
$spanExtra.text(' ' + removedTextArray[index]).show();
}
setHeight(containerHeight,mainParent, smallScreen.matches);
return false;
});
});
liLastChild.each(function (index, element) {
$(this).hammer().on('tap', 'a.less', function (e){
var $this = $(this);
if ($this.parent().siblings().length === 0) {return false;}
var smallScreen = window.matchMedia(smallerScreen);
var mainParent = $this.parents('article');
var containerHeight = $(element).parents('article').outerHeight();
if (!(smallScreen.matches)) {
$this.parent().css('opacity', 0).siblings().not(":first-child").animate({opacity: 0}, 400, function () {
$('html,body').animate({scrollTop: mainParent.offset().top},'slow');
});
} else {
$this.parents('ul').removeAttr('style');
$this.parents('article').removeClass('slide');
$(this).parent().siblings().addBack().not(":first-child").removeClass('slide')
}
$this.parent().siblings(":first-child").find('span:first-child').addClass('ellipsis').next().show().next().hide();
$this.parents('ul').css('max-height', '85px');
var mainParent = $this.parents('article');
removeHeight(containerHeight, mainParent, smallScreen.matches);
e.preventDefault();
});
});
function setHeight (measurement, element, smallScreen) {
if (smallScreen) return false;
if (element.hasClass('right')) {
var prevElementHeight = element.prev().height();
if (prevElementHeight > measurement) {
element.animate({height:prevElementHeight}, 400);
} else {
element.prev().animate({height:measurement}, 400);
element.animate({height:measurement}, 400);
}
} else {
var nextElementHeight = element.next().height();
if (nextElementHeight > measurement) {
element.animate({height:nextElementHeight}, 400);
} else {
element.next().animate({height:measurement}, 400); //.height(measurement);
element.animate({height:measurement}, 400);
}
}
}
function removeHeight(measurement, element, smallScreen) {
if (smallScreen) return false;
if (element.hasClass('right')) {
element.prev().addBack().removeAttr('style');
measurement = element.height();
element.height(element.prev().height());
} else {
element.next().addBack().removeAttr('style');
measurement = element.height();
element.height(element.next().height());
}
}
}(window, document));
},250);
</script>
<style>
html ul.product_description_list li {
display:list-item;
transition:opacity 1.5s;
}
html ul.product_description_list li.slide {
opacity:100 !important;
}
html ul.product_description_list {
overflow:hidden;
}
html ul.product_description_list.removeMax {
}
html article.related-item.slide {
transition:max-height 1.0s;
max-height:1100px;
}
html ul.product_description_list.slide {
/*max-height:700px; */
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment