related products module

marvel

<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>