mirror of
https://github.com/nextcloud/documentation.git
synced 2026-01-04 10:46:21 +07:00
Fix docs home page
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
268
static/js/modules/header.js
Normal file
268
static/js/modules/header.js
Normal file
@@ -0,0 +1,268 @@
|
||||
define(['jquery', 'lodash', 'enquire', 'bodymovin', 'headroom', 'headroomJquery', 'velocity', 'velocityUI' ],
|
||||
function ($, _, enquire, bodymovin, Headroom, headroomJquery, Velocity, velocityUI) {
|
||||
$(document).ready(function() {
|
||||
'use strict';
|
||||
var HeaderApp = {
|
||||
init: function() {
|
||||
|
||||
this.didScroll = false;
|
||||
this.menuOpened = false;
|
||||
this.enquireInitializedMobile = false;
|
||||
|
||||
//Fade In animation
|
||||
$(this.variables.navigationId).velocity('transition.fadeIn', 1000 );
|
||||
this.animatedLogoSprite();
|
||||
|
||||
enquire.register('screen and (max-width: 992px)', {
|
||||
match: _.bind(this.mobileEvent, this)
|
||||
});
|
||||
|
||||
enquire.register('screen and (max-height: 700px)', {
|
||||
match: _.bind(this.showAndHideHeader, this)
|
||||
});
|
||||
|
||||
enquire.register('screen and (min-width: 993px)', {
|
||||
match: _.bind(this.desktopDropdownEvent, this)
|
||||
});
|
||||
},
|
||||
|
||||
variables : {
|
||||
toggleSelector: '#toggle',
|
||||
navigationId: '#nav',
|
||||
navigationSelector: '.nav',
|
||||
subMenuSelector: '#menuAnchor',
|
||||
sectionsSelector: '.nav__sections',
|
||||
sectionsContainerSelector: '.nav__sections-wrapper',
|
||||
sectionSelector: '.nav__section',
|
||||
navBackgroundSelector: '.nav__bg',
|
||||
navBackgroundWrapper: '.nav__bg-wrapper',
|
||||
rightNavigationSelector: '.right-buttons',
|
||||
linksSelector: '.nav__links',
|
||||
logoSelector: '.logo',
|
||||
mobileClass: 'mobile',
|
||||
activeClass: 'active',
|
||||
scrolledClass:'scrolled',
|
||||
backgroundAnimationClass: 'is-animatable',
|
||||
linksVisibleClass: 'is-visible',
|
||||
mobileBackgroundSelector: '.mobile-bg',
|
||||
mobileMenuClass: 'menu-open',
|
||||
showNavigationClass:'nav-down',
|
||||
hideNavigationClass: 'nav-up',
|
||||
playOnHoverClass: 'hoverPlay',
|
||||
stopAnimationClass: 'stopedAnimation',
|
||||
mobileBackgroundContainerSelector: '.mobile-bg-container',
|
||||
},
|
||||
|
||||
toggleMobileMenu: function(event) {
|
||||
$(this.variables.linksSelector).hide().removeClass(this.variables.activeClass); //hide all submenus without animation
|
||||
$(event.currentTarget).toggleClass(this.variables.activeClass);
|
||||
$(this.variables.mobileBackgroundSelector).toggleClass(this.variables.activeClass);
|
||||
$(this.variables.sectionsSelector).toggleClass(this.variables.activeClass);
|
||||
$(this.variables.rightNavigationSelector).toggleClass(this.variables.activeClass);
|
||||
$(this.variables.logoSelector).toggleClass(this.variables.mobileMenuClass);
|
||||
$(this.variables.mobileBackgroundContainerSelector).toggleClass(this.variables.backgroundAnimationClass);
|
||||
},
|
||||
|
||||
resetMobile: function() {
|
||||
$(this.variables.navigationId).removeClass(this.variables.mobileClass);
|
||||
$(this.variables.toggleSelector).off('click');
|
||||
$(this.variables.sectionSelector).off('click');
|
||||
$(this.variables.linksSelector).css('display', 'inherit').removeClass(this.variables.activeClass);
|
||||
},
|
||||
|
||||
resetDesktop: function() {
|
||||
$(this.variables.sectionSelector).off('mouseover');
|
||||
$(this.variables.sectionSelector).off('mouseleave');
|
||||
$(this.variables.linksSelector).hide();
|
||||
},
|
||||
|
||||
showSubMenu: function(event) {
|
||||
if ($(event.currentTarget).find(this.variables.linksSelector).hasClass(this.variables.activeClass)) {
|
||||
$(this.variables.linksSelector).slideUp().removeClass(this.variables.activeClass);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$(this.variables.linksSelector).slideUp().removeClass(this.variables.activeClass);
|
||||
$(event.currentTarget).find(this.variables.linksSelector).slideToggle().addClass(this.variables.activeClass);
|
||||
},
|
||||
|
||||
mobileBgAnimation: function() {
|
||||
var windowDiameter = ($(window).width() * 2) * $(window).height() * 2,
|
||||
returnBiggest = (Math.sqrt(windowDiameter)) * 1.5;
|
||||
|
||||
$(this.variables.mobileBackgroundSelector).css({
|
||||
'top': - returnBiggest / 2+ 'px',
|
||||
'right': - returnBiggest / 2 + 'px',
|
||||
'width': returnBiggest + 'px',
|
||||
'height': returnBiggest + 'px'
|
||||
});
|
||||
},
|
||||
|
||||
showAndHideHeader: function(variables) {
|
||||
|
||||
var myElement = document.querySelector('.nav');
|
||||
|
||||
//I should pass the variable object inside the headroom
|
||||
this.headroom = new Headroom(myElement, {
|
||||
offset: 510,
|
||||
tolerance : {
|
||||
up : 20,
|
||||
down : 20
|
||||
},
|
||||
|
||||
onTop: function(variables) {
|
||||
$('#nav').removeClass('scrolled');
|
||||
$('.logo').removeClass('scrolled');
|
||||
$('.mobile-bg-container').addClass('visible');
|
||||
},
|
||||
|
||||
onPin: function() {
|
||||
$('.menu').removeClass('hidedPrincipalNavigation');
|
||||
$('#nav').addClass('scrolled');
|
||||
$('.logo').addClass('scrolled');
|
||||
},
|
||||
|
||||
onNotTop : function() {
|
||||
$('.mobile-bg-container').addClass('visible');
|
||||
},
|
||||
|
||||
onUnpin: function() {
|
||||
$('.menu').addClass('hidedPrincipalNavigation');
|
||||
$('.mobile-bg-container').addClass('visible');
|
||||
}
|
||||
});
|
||||
this.headroom.init();
|
||||
},
|
||||
|
||||
mobileEvent: function() {
|
||||
this.resetDesktop();
|
||||
if (!this.enquireInitializedMobile) {
|
||||
this.enquireInitializedMobile = true;
|
||||
this.createMenuButton();
|
||||
}
|
||||
$(window).on('resize', _.bind(this.mobileBgAnimation, this));
|
||||
this.mobileBgAnimation();
|
||||
$(this.variables.navigationId).addClass(this.variables.mobileClass);
|
||||
$(this.variables.toggleSelector).click(_.bind(this.toggleMobileMenu, this));
|
||||
$(this.variables.sectionSelector).click(_.bind(this.showSubMenu, this));
|
||||
},
|
||||
|
||||
setBackgroundDropdown: function(bg) {
|
||||
bg.addClass(this.variables.backgroundAnimationClass);
|
||||
},
|
||||
|
||||
backgroundDropdown: function(event) {
|
||||
var cssPadding = 30,
|
||||
bg = $(this.variables.navBackgroundSelector),
|
||||
bgWrapper = $(this.variables.navBackgroundWrapper),
|
||||
selectedDropdown = $(event.currentTarget).find(this.variables.linksSelector),
|
||||
height = selectedDropdown.innerHeight(),
|
||||
width = selectedDropdown.innerWidth(),
|
||||
windowWidth = $(this.variables.navigationSelector).outerWidth(),
|
||||
navigationWidth = $('.nav .container').outerWidth(),
|
||||
marginNavigation = (windowWidth - navigationWidth) / 2,
|
||||
backgroundDropdownPosition = $(event.currentTarget).offset().left + cssPadding + ($(event.currentTarget).innerWidth() - cssPadding) /2 - width/2 - marginNavigation;
|
||||
|
||||
setTimeout(_.bind(this.setBackgroundDropdown, this, bg));
|
||||
bgWrapper.addClass(this.variables.linksVisibleClass);
|
||||
|
||||
bg.css({
|
||||
'-moz-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
|
||||
'-webkit-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
|
||||
'-ms-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
|
||||
'-o-transform': 'translateX(' + backgroundDropdownPosition + 'px)',
|
||||
'transform': 'translateX(' + backgroundDropdownPosition + 'px)',
|
||||
'width': width + 'px',
|
||||
'height': height + 'px'
|
||||
});
|
||||
},
|
||||
|
||||
desktopDropdownEvent: function() {
|
||||
this.resetMobile();
|
||||
$(this.variables.sectionSelector).on('mouseover', _.bind(this.backgroundDropdown, this));
|
||||
$(this.variables.sectionSelector).on('mouseleave', _.bind(this.destroyDropdown, this));
|
||||
this.showAndHideHeader();
|
||||
},
|
||||
|
||||
// Clear dropdowns in mouse leave
|
||||
destroyDropdown: function(event) {
|
||||
var bg = $(this.variables.navBackgroundSelector),
|
||||
bgWrapper = $(this.variables.navBackgroundWrapper);
|
||||
|
||||
setTimeout(_.bind(function() {
|
||||
bg.removeClass(this.variables.backgroundAnimationClass);
|
||||
},this));
|
||||
|
||||
var bgWrapper = $(this.variables.navBackgroundWrapper);
|
||||
bgWrapper.removeClass(this.variables.linksVisibleClass);
|
||||
},
|
||||
|
||||
|
||||
//Bodymovin menu Animation
|
||||
createMenuButton: function() {
|
||||
var menuAnimation,
|
||||
animContainer = document.querySelectorAll('.container button')[0],
|
||||
params = {
|
||||
container: animContainer,
|
||||
renderer: 'svg',
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
autoloadSegments: true,
|
||||
path: templateUrl + '/assets/img/menu/data.json'
|
||||
};
|
||||
menuAnimation = bodymovin.loadAnimation(params);
|
||||
menuAnimation.stop();
|
||||
|
||||
$('.container button').click(function () {
|
||||
if(this.menuOpened) {
|
||||
menuAnimation.setDirection(-1);
|
||||
} else {
|
||||
menuAnimation.setDirection(0);
|
||||
}
|
||||
menuAnimation.play();
|
||||
this.menuOpened = !this.menuOpened;
|
||||
});
|
||||
},
|
||||
|
||||
//Listen to scroll to change header opacity class
|
||||
toggleScrolledClass: function() {
|
||||
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
|
||||
|
||||
if (bodyScrollTop !== 0) {
|
||||
$(this.variables.navigationId).addClass(this.variables.scrolledClass);
|
||||
$(this.variables.logoSelector).addClass(this.variables.scrolledClass);
|
||||
}
|
||||
|
||||
else {
|
||||
$(this.variables.navigationId).removeClass(this.variables.scrolledClass);
|
||||
$(this.variables.logoSelector).removeClass(this.variables.scrolledClass);
|
||||
}
|
||||
},
|
||||
|
||||
checkScroll: function() {
|
||||
if ($(this.variables.navigationId).length > 0) {
|
||||
$(window).on('scroll load resize', _.bind(this.toggleScrolledClass, this));
|
||||
}
|
||||
},
|
||||
|
||||
animatedLogoSprite: function() {
|
||||
this.hoverLogo();
|
||||
$(this.variables.logoSelector).on('mouseover', _.bind(this.hoverLogo, this));
|
||||
},
|
||||
|
||||
hoverLogo: function () {
|
||||
$(this.variables.logoSelector).removeClass(this.variables.stopAnimationClass);
|
||||
$(this.variables.logoSelector).addClass(this.variables.playOnHoverClass);
|
||||
setTimeout(_.bind(this.stopLogoAnimation, this), 2000);
|
||||
},
|
||||
|
||||
stopLogoAnimation: function() {
|
||||
$(this.variables.logoSelector).removeClass(this.variables.playOnHoverClass);
|
||||
$(this.variables.logoSelector).addClass(this.variables.stopAnimationClass);
|
||||
}
|
||||
};
|
||||
HeaderApp.init();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user