(function ($) { $(document).ready(function () { // ======= Define variables ======= // ================================= // -- Screen resolutions var screen_md = 992; // -- Window, window's properties var $win = $(window), win_w = $win.width(); // -- Main elements var $body = $('body'), $header = $body.find('> header'), $sub_nav = $header.find(".o_sub_nav"); $wrap = $body.find('> #wrap'), $card_top = $wrap.find('> .card.top'), $card_top_t = $card_top.find('> .container'), $main = $wrap.find('main'), $footer = $body.find('> footer'); // -- Floating action var $mask = $body.find('#mask'), $float = $body.find("#floating_action"), $float_menu = $body.find("#floating_action_menu"); // -- Elements' heights var body_h = $body.height(), header_h = $header.outerHeight(), sub_nav_h = $sub_nav.height(); // -- Aside var $aside = $main.find('aside'), has_aside = $aside.length > 0, $aside_nav = undefined; aside_links = undefined; if (has_aside) { $aside_nav = $aside.find('> .navbar-aside'); aside_links = $aside_nav.find("li > a"); } // ======= Affix ================= // =============================== function set_affix(body_h) { var aside_offset = $aside.offset().top - sub_nav_h, aside_width = $aside.width(), main_bottom = 40; $aside_nav.css('width', aside_width); $aside_nav.affix({ target: window, offset: { top : aside_offset, bottom : main_bottom } }); }; // ======= Footer animations ===== // =============================== var footer_animation = function () { var footer_effect = $main.outerHeight() >= $win.outerHeight(); if (!footer_effect) { footer_stop(); return; }; $footer.toggleClass('o_footer_effect', footer_effect); $body.css('padding-bottom', $footer.outerHeight()); var checkIfSearch = function(e) { if ((e.ctrlKey || e.metaKey) && String.fromCharCode(e.which).toLowerCase() === 'f') { footer_stop(); } }; $win.on('keydown.footer', function(e) { checkIfSearch(e); }); }; var footer_stop = function() { $footer.removeClass('o_footer_effect'); $body.css('padding-bottom', 0); $win.off('keydown.footer'); }; // ======= Docs Functions ========== // ================================= // -- Layouting var layouting = function () { if ($main.hasClass("index")) { $main.find("#index .index-tree > .row").each(function() { var childs = $(this).find(".col-md-3"); if (childs.length == 2) { childs.removeClass("col-md-3").addClass("col-md-6"); } if (childs.length == 3) { childs.removeClass("col-md-3").addClass("col-md-4"); } }) $(".floating_action_container").remove(); } if (has_aside) { $aside_nav.find("li").has("ul").addClass("parent"); }; } // -- Float action menu var floating_menu_layout = function() { var lis = $aside_nav.find("> ul > li").clone(true) .addClass("ripple") .css({ position: 'relative', overflow: 'hidden' }); lis.find("ul").remove().end() .find("a").removeClass("ripple").on("click", function() { floating_menu_toggle(); }); $float_menu.find(".content").empty().append(lis); $float.add($mask).on("click", function () { floating_menu_toggle(); return false; }); } var floating_menu_toggle = function() { $float.toggleClass("active"); setTimeout(function() { $float_menu.toggleClass("active"); $mask.toggleClass("active"); }, 300); }; // -- Scroll To var scroll_to = function(el_list) { var offset = 80; el_list.each(function() { var $link = $(this), href = $link.attr("href"); $link.on("click", function() { var val = $(href).offset().top - 60; $('html, body').animate({ scrollTop: val }, 400); $aside_nav.find("li").removeClass("active"); $link.parents("li").addClass("active"); window.location.hash = $link.prop('hash'); return false; }) }) } // -- Ripple buttons var ripple_animation = function(el_list) { el_list.each(function() { var btn = $(this); btn .css({ position: 'relative', overflow: 'hidden' }) .bind('mousedown', function(e) { var ripple; if (btn.find('.inner-ripple').length === 0) { ripple = $(''); btn.prepend(ripple); } else { ripple = btn.find('.inner-ripple'); } ripple.removeClass('inner-ripple-animated'); if (!ripple.height() && !ripple.width()) { var diameter = Math.max(btn.outerWidth(), btn.outerHeight()); ripple.css({ height: diameter, width: diameter }); } var x = e.pageX - btn.offset().left - ripple.width() / 2; var y = e.pageY - btn.offset().top - ripple.height() / 2; ripple.css({ top: y + 'px', left: x + 'px' }).addClass('inner-ripple-animated'); setTimeout(function() { ripple.removeClass('inner-ripple-animated'); }, 351); }); }); }; // -- Cards animation var cards_animate = function(type, speed) { type = type || 'in'; speed = speed || 2000; var $container = $("main.index"), $cards = $container.find(".card"), $titles = $container.find("h2"); $cards.each(function() { var $card = $(this), cardOffset = this.getBoundingClientRect(), offset = cardOffset.left * 0.8 + cardOffset.top, delay = parseFloat(offset / speed).toFixed(2); $card.css("transition-delay", delay + "s"); }); if (type === "in") { $titles.fadeTo(0, 0); $titles.fadeTo(1000, 1); $container.addClass("animating"); } else { $titles.fadeTo(300, 0); $container.removeClass("animating"); } }; // -- Header buttons var header_buttons = function () { var timer; $header.on('click', '.o_primary_nav .dropdown-toggle', function(e) { e.preventDefault(); var $a = $(this); clearTimeout(timer); $a.parent().toggleClass('open'); $a.closest('ul').toggleClass('o_sub_opened', $a.parent().hasClass('open')); if ($a.closest('.o_primary_nav').children('.open').length > 0) { $header.addClass("o_sub_opened"); } else { timer = setTimeout(function() { $header.removeClass("o_sub_opened"); }, 200); } }); $header.on('click', '.o_primary_nav .o_secondary_nav', function(e) { if (e.target === e.currentTarget) { $header.find('.open').removeClass('open'); $header.find('.o_sub_opened').andSelf().removeClass('o_sub_opened'); } }); // -- Mobile menu opening $header.on('click', '.o_mobile_menu_toggle', function(e) { e.preventDefault(); $(this).find('i').toggleClass('fa-bars fa-times'); $header.toggleClass('o_mobile_menu_opened'); }); }; var card_top_animation = function (win_top){ var scrollFactor = 1.6, bannerHeight = Math.max(450, $card_top.outerHeight(true) - 60), top = Math.min(win_top, bannerHeight/scrollFactor), base_value = top * (scrollFactor - 1), opacity = top/bannerHeight * scrollFactor; $card_top.css('transform', 'translateY(' + base_value + 'px)'); $card_top_t.css({ 'transform' : 'translateY( -' + ( base_value - (top/2)) + 'px)', 'opacity' : 1 - opacity }); } $(".content-switcher").each(function(index, switcher) { var $switcher = $(switcher), $links = $switcher.find('> ul > li'), $tabs = $switcher.find('> .tabs > *'), $all = $links.add($tabs); function select(index) { $all.removeClass('active'); $links.eq(index).add($tabs.eq(index)).addClass('active'); } select(0); $switcher.on('click', '> ul > li', function() { select($(this).index()); return false; }); }); // ======= Onload ================== // ================================= // -- Call default functions layouting(); cards_animate(); header_buttons(); ripple_animation($(".ripple")); if (has_aside) { floating_menu_layout(); scroll_to(aside_links); ripple_animation(aside_links); } // -- Conditionally call specific functions according to resolution if (win_w >= screen_md){ footer_animation(); if (has_aside) { $win.load(function (){ // wait until page load before affix body_h = $body.height(); set_affix(body_h); }) } }; // ======= On resize ============== // ================================ // Update properties and conditionally call functions according to resolution $win.on('resize', function () { win_w = $win.width(); body_h = $body.height(); if (win_w >= screen_md){ footer_animation(); if (has_aside) { set_affix(body_h); }; } else { footer_stop(); }; }); // ======= On scroll ============== // ================================ $win.on('scroll', function () { if (win_w >= screen_md) { var win_top = $win.scrollTop(); header_h = $header.outerHeight(); $header.toggleClass('o_scrolled', win_top > header_h); card_top_animation(win_top); } else { $card_top.css('transform', ''); } }); }); })(jQuery);