Faner med AJAX-innlasting av innhold som sett på ekornes.no før nettstedet ble flyttet.

ekornes-tabs.js

if(typeof jQuery !== 'undefined')
{
    function Tabs(args)
    {
        if($(args.selector.wrap).length)
        {
            this.init(args);
        }
    }
    
    Tabs.prototype = {
        init: function(args)
        {            
            var self = this;
            this.args = args;
            
            this.tabsInitialized = false;
            if(window.location.hash && (window.location.hash.indexOf('/tab-') > -1))
            {
                 this.tabsInitialized = true;
            }
            
            this.$wrap = $(this.args.selector.wrap);
            if(args.leftMenu)
            {
                this.$menus = this.$wrap.find(this.args.selector.menu).add('#distant-tab-menu');
            }
            else
            {
                this.$menus = this.$wrap.find(this.args.selector.menu);
            }
            
            this.$menuItems = this.$menus.find('a');
            this.$content = this.$wrap.find(this.args.selector.content);
            this.$tabs = this.$content.find(this.args.selector.tab);
            if(this.args.selector.close)
            {
                this.$closeButton = this.$content.find(this.args.selector.close);
            }
            
            this.$menuItems
                .each(function()
                {
                    var identifier = $(this).attr('href').replace(/#/g, '');
                    var cid = $(this).attr('rel');
                    
                    $.History.bind(identifier, function(state)
                    {
                        self.runCallbacks(state, cid);
                    });
                    
                    $(this)
                        .click(function(e)
                        {
                            (e.preventDefault) ? e.preventDefault() : e.returnValue = false;
                            $.History.trigger(identifier);
                            
                            self.runCallbacks(identifier, cid);
                            
                            if($(this).closest('ul').siblings('#sub-menu-left').length)
                            {
                                var fromTop = parseInt($('#product-in-depth').offset().top, 10) - 20;

                                $.scrollTo(fromTop, 500);
                            }
                        });
                });
            
            if(this.$closeButton && self.args.callback.closeTabContentHolder)
            {
                this.$closeButton
                    .click(function(e)
                    {
                        self.args.callback.closeTabContentHolder.call(self, e);
                    });
            }
            
            window.setTimeout(function()
            {
                if(this.tabsInitialized === false)
                {
                    $.History.trigger(this.$menus.find('.active').eq(0).find('a').attr('href').replace(/#/g, ''));
                    this.tabsInitialized = true;
                }
            }, 1000);
        },
        
        runCallbacks: function(identifier, cid)
        {
            var self = this;
            
            if(this.args.callback.updateMenu)
            {
                this.args.callback.updateMenu.call(self, identifier);
            }
            
            if(this.args.callback.updateTabContentHolder)
            {
                this.args.callback.updateTabContentHolder.call(self, identifier);
            }
            
            if(this.args.callback.doAJAX)
            {
                this.args.callback.doAJAX.call(self, identifier, cid);
            }
        }
    };
    
    $(function()
    {
        window.EkornesTabs = {};
        
        window.EkornesTabs.ProductInDepth = new Tabs(
        {
            selector: {
                wrap: '.tabs',
                menu: '.tab-menu',
                content: '.tab-content',
                tab: '.tab',
                close: '.close'
            },
            
            leftMenu: true,
            
            callback: {
                updateTabContentHolder: function(identifier)
                {
                    var id = identifier.replace(/\//g, '');
                    var $tabToShow = this.$tabs.filter('#' + id);
                    var currentHeight = this.$content.outerHeight();
                    var toHeight = $tabToShow.outerHeight();
                    var duration = Math.abs(toHeight - currentHeight) / 6;
                    
                    this.$content
                        .css('paddingBottom', '1px')
                        .animate(
                        {
                            height: toHeight + 'px'
                        },
                        {
                            duration: duration,
                            complete: function()
                            {
                                $tabToShow.siblings().filter('.tab')
                                    .animate(
                                    {
                                        opacity: 0
                                    },
                                    {
                                        duration: 250,
                                        complete: function()
                                        {
                                            $(this)
                                                .removeClass('show')
                                                .removeAttr('style');
                                            
                                            $tabToShow
                                                .css(
                                                {
                                                    display: 'block',
                                                    opacity: 0
                                                })
                                                .animate(
                                                {
                                                    opacity: 1
                                                },
                                                {
                                                    duration: 150,
                                                    complete: function()
                                                    {
                                                        $(this)
                                                            .addClass('show')
                                                            .removeAttr('style');
                                                        
                                                    }
                                                });
                                        }
                                    });
                            }
                        });
                    
                    if(this.tabsInitialized)
                    {
                        var $target = this.$wrap;
                        
                        var currentScrollPos = $(window).scrollTop();
                        var fromTop = $target.offset().top - 120;
    
                        if(currentScrollPos < (fromTop - 250))
                        {
                            duration = Math.abs(fromTop - currentScrollPos) * 2;
                            $.scrollTo(fromTop, duration);
                        }
                    }
                },
                
                closeTabContentHolder: function(e)
                {
                    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;

                    var self = this;
                    
                    var currentHeight = this.$content.outerHeight();
                    var toHeight = 0;
                    var duration = Math.abs(toHeight - currentHeight) / 6;
                    
                    if(!this.$content.is(':animated'))
                    {
                        this.$content
                            .css('paddingBottom', 0)
                            .animate(
                            {
                                height: toHeight + 'px'
                            },
                            {
                                duration: duration,
                                complete: function()
                                {
                                    self.$tabs.filter('.show').removeClass('show');
                                    self.$menus.find('.active').removeClass('active');
                                }
                            });
                    }
                },
                
                updateMenu: function(state)
                {
                    this.$menus.find('li:has(a[href="#' + state + '"])')
                        .addClass('active')
                    .siblings('.active')
                        .removeClass('active');
                },
                
                doAJAX: function(identifier, cid)
                {
                    if(cid)
                    {
                        var self = this;
                        this.type = identifier.replace(/\//g, '');
                        this.tab = $('#' + this.type);
                        
                        // Add a <div class="ajax-placeholder"> anywhere inside the tab, to make it the target for AJAX content
                        // instad of the whole div, which is the default.
                        
                        this.target = (this.tab.find('.ajax-placeholder').length) ? this.tab.find('.ajax-placeholder') : this.tab;
                        
                        this.menuItem = this.$menuItems.eq(this.tab.index());
                        this.loader = this.menuItem.find('.loader');
                        
                        // Add cases to make the tab's content load with AJAX from a category's content ([CONTENT]).
                        // Mind the rel attribute of the trigger link, which should be the category ID
                        // of the page you want to load. Use rel="[translate(catid_keyword)]" to make it language compitable.
                        
                        switch(this.type)
                        {
                            case 'tab-aboutsurfaces':
                            case 'tab-sizeguide':
                            
                                if(!this.target.data('hasContent'))
                                {
                                    if(this.loader.length)
                                        this.loader.closest('li').addClass('loading');
                                    
                                    $.ajax(
                                    {
                                        url: '/index.php?c_=CategoryContentGUI&m_=writeCategoryAjax',
                                        type: 'get',
                                        data: {
                                            cid: cid
                                        },
                                        dataType: 'html',
                                        success: function(response)
                                        {
                                            self.target
                                                .html(response)
                                                .data('hasContent', true);
                                            
                                            window.setTimeout(function()
                                            {
                                                self.args.callback.updateTabContentHolder.call(self, identifier);
                                                
                                                if(self.type == 'tab-aboutsurfaces')
                                                {
                                                    if(typeof ScrollToAnchor != 'undefined')
                                                    {
                                                        var EkornesScrollToAnchor = new ScrollToAnchor(
                                                        {
                                                            selector: {
                                                                wrap: '.anchored-articles',
                                                                menus: '.anchor-navi',
                                                                anchors: 'a'
                                                            }
                                                        });
                                                    }
                                                }
                                                
                                                if(self.loader.length)
                                                {
                                                    self.loader.closest('li').removeClass('loading');
                                                }
                                                
                                            }, 300);
                                        }
                                    });
                                }
                                break;
                            
                            default:
                                return;
                        }
                    }
                }
            }
        });
        
        window.EkornesTabs.ProductVariantsAndAccessories = new Tabs(
        {
            selector: {
                wrap: '.product-details',
                menu: '.variants-family-menu',
                content: '.variances',
                tab: '.variance'
            },
            
            leftMenu: false,
            
            callback: {
                updateTabContentHolder: function(identifier)
                {
                    var id = identifier.replace(/\//g, '');
                    var $tabToShow = this.$tabs.filter('#' + id);
                    
                    $tabToShow
                        .addClass('show')
                    .siblings().filter('.show')
                        .removeClass('show');
                },
                
                updateMenu: function(state)
                {
                    this.$menus.find('li:has(a[href="#' + state + '"])')
                        .addClass('active')
                    .siblings()
                        .removeClass('active')
                    .end().closest('ul').siblings().find('li.active')
                        .removeClass('active');
                }
            }
        });
    });
}