js/script.js

//modal close button
(function(){
    //π.modalCloseButton = function(closingFunction){
    //	return π.button('pi-modal-close-button', null, null, closingFunction);
    //};
})();

// globals
var body;

//helper functions
function booleanAttributeValue(element, attribute, defaultValue){
    // returns true if an attribute is present with no value
    // e.g. booleanAttributeValue(element, 'data-modal', false);
    if (element.hasAttribute(attribute)) {
        var value = element.getAttribute(attribute);
        if (value === '' || value === 'true') {
            return true;
        } else if (value === 'false') {
            return false;
        }
    }

    return defaultValue;
}

function classOnCondition(element, className, condition) {
    if (condition)
        $(element).addClass(className);
    else
        $(element).removeClass(className);
}

function highestZ() {
    var Z = 1000;

    $("*").each(function(){
        var thisZ = $(this).css('z-index');

        if (thisZ != "auto" && thisZ > Z) Z = ++thisZ;
    });

    return Z;
}

function newDOMElement(tag, className, id){
    var el = document.createElement(tag);

    if (className) el.className = className;
    if (id) el.id = id;

    return el;
}

function px(n){
    return n + 'px';
}

var kub = (function () {
    var HEADER_HEIGHT;
    var html, header, mainNav, quickstartButton, hero, encyclopedia, footer, headlineWrapper;

    $(document).ready(function () {
        html = $('html');
        body = $('body');
        header = $('header');
        mainNav = $('#mainNav');
        quickstartButton = $('#quickstartButton');
        hero = $('#hero');
        encyclopedia = $('#encyclopedia');
        footer = $('footer');
        headlineWrapper = $('#headlineWrapper');
        HEADER_HEIGHT = header.outerHeight();

        document.documentElement.classList.remove('no-js');

        resetTheView();

        window.addEventListener('resize', resetTheView);
        window.addEventListener('scroll', resetTheView);
        window.addEventListener('keydown', handleKeystrokes);

        document.onunload = function(){
            window.removeEventListener('resize', resetTheView);
            window.removeEventListener('scroll', resetTheView);
            window.removeEventListener('keydown', handleKeystrokes);
        };

        setInterval(setFooterType, 10);
    });

    function setFooterType() {
        var windowHeight = window.innerHeight;
        var bodyHeight;

        switch (html[0].id) {
            case 'docs': {
                bodyHeight = hero.outerHeight() + encyclopedia.outerHeight();
                break;
            }

            case 'home':
            // case 'caseStudies':
                bodyHeight = windowHeight;
                break;
            case 'blog':
                bodyHeight = windowHeight;
            case 'caseStudies':
            case 'partners':
                bodyHeight = windowHeight * 2;
                break;

            default: {
                bodyHeight = hero.outerHeight() + $('#mainContent').outerHeight();
            }
        }

        var footerHeight = footer.outerHeight();
        classOnCondition(body, 'fixed', windowHeight - footerHeight > bodyHeight);
    }

    function resetTheView() {
        if (html.hasClass('open-nav')) {
            toggleMenu();
        } else {
            HEADER_HEIGHT = header.outerHeight();
        }

        if (html.hasClass('open-toc')) {
            toggleToc();
        }

        classOnCondition(html, 'flip-nav', window.pageYOffset > 0);

        if (html[0].id == 'home') {
            setHomeHeaderStyles();
        }
    }

    function setHomeHeaderStyles() {
        if (!quickstartButton[0]) {
            return;
        }
        var Y = window.pageYOffset;
        var quickstartBottom = quickstartButton[0].getBoundingClientRect().bottom;

        classOnCondition(html[0], 'y-enough', Y > quickstartBottom);
    }

    function toggleMenu() {
        if (window.innerWidth < 800) {
            pushmenu.show('primary');
        }

        else {
            var newHeight = HEADER_HEIGHT;

            if (!html.hasClass('open-nav')) {
                newHeight = mainNav.outerHeight();
            }

            header.css({height: px(newHeight)});
            html.toggleClass('open-nav');
        }
    }

    function handleKeystrokes(e) {
        switch (e.which) {
            case 27: {
                if (html.hasClass('open-nav')) {
                    toggleMenu();
                }
                break;
            }
        }
    }

    function showVideo() {
        $('body').css({overflow: 'hidden'});

        var videoPlayer = $("#videoPlayer");
        var videoIframe = videoPlayer.find("iframe")[0];
        videoIframe.src = videoIframe.getAttribute("data-url");
        videoPlayer.css({zIndex: highestZ()});
        videoPlayer.fadeIn(300);
        videoPlayer.click(function(){
            $('body').css({overflow: 'auto'});

            videoPlayer.fadeOut(300, function(){
                videoIframe.src = '';
            });
        });
    }

    function tocWasClicked(e) {
        var target = $(e.target);
        var docsToc = $("#docsToc");
        return (target[0] === docsToc[0] || target.parents("#docsToc").length > 0);
    }

    function listenForTocClick(e) {
        if (!tocWasClicked(e)) toggleToc();
    }

    function toggleToc() {
        html.toggleClass('open-toc');

        setTimeout(function () {
            if (html.hasClass('open-toc')) {
                window.addEventListener('click', listenForTocClick);
            } else {
                window.removeEventListener('click', listenForTocClick);
            }
        }, 100);
    }

    return {
        toggleToc: toggleToc,
        toggleMenu: toggleMenu,
        showVideo: showVideo
    };
})();


// accordion
(function(){
    var yah = true;
    var moving = false;
    var CSS_BROWSER_HACK_DELAY = 25;

    $(document).ready(function(){
        // Safari chokes on the animation here, so...
        if (navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Safari') != -1){
            var hackStyle = newDOMElement('style');
            hackStyle.innerHTML = '.pi-accordion .wrapper{transition: none}';
            body.append(hackStyle);
        }
        // Gross.

        $('.pi-accordion').each(function () {
            var accordion = this;
            var content = this.innerHTML;
            var container = newDOMElement('div', 'container');
            container.innerHTML = content;
            $(accordion).empty();
            accordion.appendChild(container);
            CollapseBox($(container));
        });

        setYAH();

        setTimeout(function () {
            yah = false;
        }, 500);
    });

    function CollapseBox(container){
        container.children('.item').each(function(){
            // build the TOC DOM
            // the animated open/close is enabled by having each item's content exist in the flow, at its natural height,
            // enclosed in a wrapper with height = 0 when closed, and height = contentHeight when open.
            var item = this;

            // only add content wrappers to containers, not to links
            var isContainer = item.tagName === 'DIV';

            var titleText = item.getAttribute('data-title');
            var title = newDOMElement('div', 'title');
            title.innerHTML = titleText;

            var wrapper, content;

            if (isContainer) {
                wrapper = newDOMElement('div', 'wrapper');
                content = newDOMElement('div', 'content');
                content.innerHTML = item.innerHTML;
                wrapper.appendChild(content);
            }

            item.innerHTML = '';
            item.appendChild(title);

            if (wrapper) {
                item.appendChild(wrapper);
                $(wrapper).css({height: 0});
            }


            $(title).click(function(){
                if (!yah) {
                    if (moving) return;
                    moving = true;
                }

                if (container[0].getAttribute('data-single')) {
                    var openSiblings = item.siblings().filter(function(sib){return sib.hasClass('on');});
                    openSiblings.forEach(function(sibling){
                        toggleItem(sibling);
                    });
                }

                setTimeout(function(){
                    if (!isContainer) {
                        moving = false;
                        return;
                    }
                    toggleItem(item);
                }, CSS_BROWSER_HACK_DELAY);
            });

            function toggleItem(thisItem){
                var thisWrapper = $(thisItem).find('.wrapper').eq(0);

                if (!thisWrapper) return;

                var contentHeight = thisWrapper.find('.content').eq(0).innerHeight() + 'px';

                if ($(thisItem).hasClass('on')) {
                    thisWrapper.css({height: contentHeight});
                    $(thisItem).removeClass('on');

                    setTimeout(function(){
                        thisWrapper.css({height: 0});
                        moving = false;
                    }, CSS_BROWSER_HACK_DELAY);
                } else {
                    $(item).addClass('on');
                    thisWrapper.css({height: contentHeight});

                    var duration = parseFloat(getComputedStyle(thisWrapper[0]).transitionDuration) * 1000;

                    setTimeout(function(){
                        thisWrapper.css({height: ''});
                        moving = false;
                    }, duration);
                }
            }

            if (content) {
                var innerContainers = $(content).children('.container');
                if (innerContainers.length > 0) {
                    innerContainers.each(function(){
                        CollapseBox($(this));
                    });
                }
            }
        });
    }

    function setYAH() {
        var pathname = location.href.split('#')[0]; // on page load, make sure the page is YAH even if there's a hash
        var currentLinks = [];

        $('.pi-accordion a').each(function () {
            if (pathname === this.href) currentLinks.push(this);
        });

        currentLinks.forEach(function (yahLink) {
            $(yahLink).parents('.item').each(function(){
                $(this).addClass('on');
                $(this).find('.wrapper').eq(0).css({height: 'auto'});
                $(this).find('.content').eq(0).css({opacity: 1});
            });

            $(yahLink).addClass('yah');
            yahLink.onclick = function(e){e.preventDefault();};
        });
    }
})();


var pushmenu = (function(){
    var allPushMenus = {};

    $(document).ready(function(){
        $('[data-auto-burger]').each(function(){
            var container = this;
            var id = container.getAttribute('data-auto-burger');

            var autoBurger = document.getElementById(id) || newDOMElement('div', 'pi-pushmenu', id);
            var ul = autoBurger.querySelector('ul') || newDOMElement('ul');

            $(container).find('a[href], button').each(function () {
                if (!booleanAttributeValue(this, 'data-auto-burger-exclude', false)) {
                    var clone = this.cloneNode(true);
                    clone.id = '';

                    if (clone.tagName == "BUTTON") {
                        var aTag = newDOMElement('a');
                        aTag.href = '';
                        aTag.innerHTML = clone.innerHTML;
                        aTag.onclick = clone.onclick;
                        clone = aTag;
                    }
                    var li = newDOMElement('li');
                    li.appendChild(clone);
                    ul.appendChild(li);
                }
            });

            autoBurger.appendChild(ul);
            body.append(autoBurger);
        });

        $(".pi-pushmenu").each(function(){
            allPushMenus[this.id] = PushMenu(this);
        });
    });

    function show(objId) {
        allPushMenus[objId].expose();
    }

    function PushMenu(el) {
        var html = document.querySelector('html');

        var overlay = newDOMElement('div', 'overlay');
        var content = newDOMElement('div', 'content');
        content.appendChild(el.querySelector('*'));

        var side = el.getAttribute("data-side") || "right";

        var sled = newDOMElement('div', 'sled');
        $(sled).css(side, 0);

        sled.appendChild(content);

        var closeButton = newDOMElement('button', 'push-menu-close-button');
        closeButton.onclick = closeMe;

        sled.appendChild(closeButton);

        overlay.appendChild(sled);
        el.innerHTML = '';
        el.appendChild(overlay);

        sled.onclick = function(e){
            e.stopPropagation();
        };

        overlay.onclick = closeMe;

        window.addEventListener('resize', closeMe);

        function closeMe(e) {
            if (e.target == sled) return;

            $(el).removeClass('on');
            setTimeout(function(){
                $(el).css({display: 'none'});

                $(body).removeClass('overlay-on');
            }, 300);
        }

        function exposeMe(){
            $(body).addClass('overlay-on'); // in the default config, kills body scrolling

            $(el).css({
                display: 'block',
                zIndex: highestZ()
            });

            setTimeout(function(){
                $(el).addClass('on');
            }, 10);
        }

        return {
            expose: exposeMe
        };
    }

    return {
        show: show
    };
})();

$(function() {
    // If vendor strip doesn't exist add className
    // if ( !$('#vendorStrip').length > 0 ) {
    //     $('.header-hero').addClass('bot-bar');
    // }

    // If is not homepage add class to hero section
    if (!$('.td-home').length > 0 ) {
        $('.header-hero').addClass('no-sub');
    }
});