P.when(“jQuery”, “ready”).execute(function($) {
'use strict'; $.fn.productNav = function(options){ this.options = options || {}; this.options.step = 100; this.targetParent = this.parent(); this.prev = this.targetParent.find('.prev'); this.next = this.targetParent.find('.next'); this.scrollLength = 0; $(window).on('resize', checkOverflow.bind(this)); this.targetParent.on('click', '.prev', prev.bind(this)); this.targetParent.on('click', '.next', next.bind(this)); checkOverflow.call(this); return this; }; var checkOverflow = function(event) { if(this[0].scrollWidth > this.innerWidth()){ showNav.call(this); } else { hideNav.call(this); } }; var prev = function(event) { event.preventDefault(); var current_scroll = this.scrollLeft(); if(current_scroll){ this.next.removeClass('disabled'); this.animate({ scrollLeft: (current_scroll - this.options.step) }, 300, setDisabled.bind(this, 'prev')); } }; var next = function(event) { event.preventDefault(); var current_scroll = this.scrollLeft(); if(current_scroll !== this.scrollLength){ this.prev.removeClass('disabled'); this.animate({ scrollLeft: (this.options.step + current_scroll) }, 300, setDisabled.bind(this, 'next')); } }; var showNav = function(){ this.removeClass('flexbox') .addClass('scroll'); this.prev.removeClass('hidden'); this.next.removeClass('hidden'); this.scrollLength = this[0].scrollWidth - this.innerWidth(); setDisabled.call(this, ""); }; var hideNav = function() { this.removeClass('scroll') .addClass('flexbox'); this.prev.addClass('hidden'); this.next.addClass('hidden'); }; var setDisabled = function(nav_type){ switch(nav_type){ case "prev": { if(this.scrollLeft() === 0) { this.prev.addClass('disabled'); } } break; case "next": { if (this.scrollLeft() === this.scrollLength) { this.next.addClass('disabled'); } } break; default:{ if(this.scrollLeft()){ if(this.scrollLeft() === this.scrollLength){ this.next.addClass('disabled'); this.prev.removeClass('disabled'); } } else { this.prev.addClass('disabled'); this.next.removeClass('disabled'); } } } }; // Autobind using Data attributes (function(){ var $elements = $(document).find('[data-toggle="productNav"]'); $elements.each(function(){ var $el = $(this), $target = $el.find($el.data('target')); $target.productNav(); }); })();
});