diff --git a/_shared_assets/themes/nextcloud_com/static/js/main.js b/_shared_assets/themes/nextcloud_com/static/js/main.js
new file mode 100644
index 000000000..d68ef17fe
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/main.js
@@ -0,0 +1,98 @@
+define(['jquery', 'lodash', 'enquire', 'TweenMax', 'velocity'],
+ function ($, _, enquire, TweenMax) {
+ $(document).ready(function() {
+ 'use strict';
+ var main = {
+ init: function() {
+ this.variables.buttonDropdownSelector.on('click', _.bind(this.buttonDropdown, this));
+ $(window).on('scroll.fadeOnce', _.bind(this.revealOnScroll, this));
+ this.animationOnLoadPage();
+ this.removeRevealOnScroll();
+ this.consoleMessage();
+ },
+
+ variables: {
+ topHeaderSelector: '.topheader',
+ heroHeading: '.topheader h1',
+ heroSubtitle: '.topheader h2',
+ heroSectionBackgroundSelector: '.background',
+ buttonDropdownSelector: $('.button--dropdown'),
+ buttonDropdownContentSelector: $('.dropdown-content'),
+ SlideshowTextTriggerSelector: $('.textTrigger'),
+ spriteSlideshowSelector: $('.image-top-container'),
+ slideshowContentSelector: '.slideshow',
+ slideshowIndicatorsSelector: '.indicators',
+ slideshowImageOnTopSelector: '.image-top',
+ textTriggerSelector: '.textTrigger',
+ indicatorSlideshow: 'btn_carousel',
+ visibleClass : 'visible',
+ activeClass: 'active'
+ },
+
+ consoleMessage: function() {
+ console.log('%c\nNextcloud, A safe home for all your data', 'font-size:20px');
+ console.log(
+ '%c',
+ 'font-size: 100px; background: white url(' + window.location + 'wp-content/themes/next/assets/img/logo/logo_nextcloud_blue.png) no-repeat left bottom; background-repeat: no-repeat; background-size: 100px 64px;'
+ );
+ },
+
+ checkScrollPosition: function() {
+ var currentScrollPosition = $(document).scrollTop().valueOf();
+
+ if (currentScrollPosition > 500) {
+ $('.revealOnScroll:not(.fade-in)').each(_.bind(this.removeRevealOnScroll, this));
+ } else {
+ return;
+ }
+ },
+
+ removeRevealOnScroll: function(index, element) {
+ $(element).addClass('fade-in');
+ },
+
+ buttonDropdown: function() {
+ this.variables.buttonDropdownSelector.toggleClass(this.variables.activeClass);
+ this.variables.buttonDropdownContentSelector.toggleClass(this.variables.visibleClass);
+ },
+
+ animationOnLoadPage: function() {
+ var animationOnLoadPageTimeline = new TimelineMax ();
+
+ animationOnLoadPageTimeline.to($(this.variables.topHeaderSelector), 1, {autoAlpha: 1});
+ animationOnLoadPageTimeline.to($(this.variables.heroSectionBackgroundSelector), 1, {autoAlpha: 1});
+ animationOnLoadPageTimeline.to($(this.variables.heroHeading), 1, {y:0 , autoAlpha: 1});
+ animationOnLoadPageTimeline.to($(this.variables.heroSubtitle), 1, {y:0 , autoAlpha: 1}, '-= 0.6');
+ },
+
+ smoothScroll: function() {
+ $('a[href*="#"]:not([href="#"]):not([data-toggle="collapse"])').click(function() {
+
+ if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
+ if (target.length) {
+ $('html, body').animate({
+ scrollTop: target.offset().top
+ }, 1000);
+
+ return false;
+ }
+ }
+ });
+ },
+
+ revealOnScroll: function(event) {
+ var scrollTop = $(window).scrollTop();
+ $('.revealOnScroll:not(.fade-in)').each(function(index, element) {
+ var selectorOffset = $(element).offset();
+ if (scrollTop + window.innerHeight - 100 > selectorOffset.top) {
+ $(element).addClass('fade-in').velocity('transition.slideUpIn');
+ }
+ });
+ },
+ };
+ main.init();
+ });
+ });
diff --git a/_shared_assets/themes/nextcloud_com/static/js/modules/codeHighlights.js b/_shared_assets/themes/nextcloud_com/static/js/modules/codeHighlights.js
new file mode 100644
index 000000000..20eed1e4f
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/modules/codeHighlights.js
@@ -0,0 +1,17 @@
+// This use the highlight,js plugin, for more information use the link above
+// https://highlightjs.org/
+
+// TODO Use workers for better performance
+
+define(['jquery', 'lodash', 'highlight'],
+ function ($, _, hljs) {
+ $(document).ready(function() {
+ 'use strict';
+ var codeHighlight = {
+ init: function() {
+ hljs.initHighlightingOnLoad();
+ },
+ };
+ codeHighlight.init();
+ });
+ });
diff --git a/_shared_assets/themes/nextcloud_com/static/js/modules/cookieconsent.js b/_shared_assets/themes/nextcloud_com/static/js/modules/cookieconsent.js
new file mode 100644
index 000000000..5b02d480c
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/modules/cookieconsent.js
@@ -0,0 +1,39 @@
+define(['jquery'],
+ function ($, _, enquire, Velocity, velocityUI, ScrollMagic) {
+ $(document).ready(function(){
+ var sCookieName = "cookiewarning";
+ function createCookie(name, value, days) {
+ if (days) {
+ var date = new Date();
+ date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+ var expires = "; expires=" + date.toGMTString();
+ } else var expires = "";
+ document.cookie = name + "=" + value + expires + "; path=/";
+ }
+
+ function readCookie(name) {
+ var nameEQ = name + "=";
+ var ca = document.cookie.split(';');
+ for (var i = 0; i < ca.length; i++) {
+ var c = ca[i];
+ while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+ if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+ }
+ return null;
+ }
+
+ // actually give cookie warning
+ if (readCookie(sCookieName) != 1) {
+ setTimeout(function () {
+ $("#cookieConsent").fadeIn(500);
+ }, 2000);
+ }
+
+ $("#closeCookieConsent, .cookieConsentOK").click(function() {
+ $("#cookieConsent").fadeOut(200);
+ createCookie(sCookieName, 1, 365)
+ });
+ });
+ });
+
+
diff --git a/_shared_assets/themes/nextcloud_com/static/js/modules/header.js b/_shared_assets/themes/nextcloud_com/static/js/modules/header.js
new file mode 100644
index 000000000..28bfd2515
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/modules/header.js
@@ -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();
+ });
+ });
diff --git a/_shared_assets/themes/nextcloud_com/static/js/modules/slideshow.js b/_shared_assets/themes/nextcloud_com/static/js/modules/slideshow.js
new file mode 100644
index 000000000..201ea9e2b
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/modules/slideshow.js
@@ -0,0 +1,330 @@
+define(['jquery', 'lodash', 'enquire', 'scrollMagic', 'hammer', 'inview'],
+ function ($, _, enquire, ScrollMagic, Hammer, isInView) {
+ $(document).ready(function() {
+ 'use strict';
+ var slideshow = {
+ init: function() {
+
+ enquire.register('screen and (max-width: 991px)', {
+ match: _.bind(this.modulesBindMobile, this),
+ unmatch: _.bind(this.cleanModulesMobile, this)
+ });
+
+ enquire.register('screen and (min-width: 992px)', {
+ match: _.bind(this.modulesBindDesktop, this),
+ unmatch: _.bind(this.cleanModulesDesktop, this)
+ });
+ },
+
+ variables : {
+ buttonDropdownSelector: $('.button--dropdown'),
+ buttonDropdownContentSelector: $('.dropdown-content'),
+ SlideshowTextTriggerSelector: $('.textTrigger'),
+ spriteSlideshowSelector: $('.image-top-container'),
+ slideshowContentSelector: '.slideshow',
+ slideshowIndicatorsSelector: '.indicators',
+ slideshowImageOnTopSelector: '.image-top',
+ textTriggerSelector: '.textTrigger',
+ indicatorSlideshow: 'btn_carousel',
+ visibleClass : 'visible',
+ activeClass: 'active'
+ },
+
+ modulesBindDesktop: function() {
+ this.slideshowDesktop();
+ this.updateSlideshowImageSizes();
+ $(window).resize(_.bind(this.updateSlideshowImageSizes, this));
+ },
+
+ modulesBindMobile: function() {
+ this.slideshowMobile();
+ },
+
+ cleanModulesDesktop: function() {
+ this.destroyMagicScrollOnMobile();
+ },
+
+ cleanModulesMobile: function() {
+ this.removeInlineCssOnDesktop();
+ this.removeInlineCssOnMobile();
+ },
+
+ slideshowTablet: function() {
+ $('.image__mobile').hide();
+ $(window).resize(_.bind(this.updateSlideshowImageSizes, this));
+ },
+
+ smoothScroll: function() {
+ $('a[href*="#"]:not([href="#"]):not([data-toggle="collapse"])').click(function() {
+
+ if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
+ if (target.length) {
+ $('html, body').animate({
+ scrollTop: target.offset().top
+ }, 1000);
+
+ return false;
+ }
+ }
+ });
+ },
+
+ indicatorSlideshow: function() {
+ var visibleElement = $(this.variables.textTriggerSelector).parent();
+
+ $(visibleElement).on('inview', function(event, isInView) {
+ if (isInView) {
+ var currentSlide = $(event.currentTarget).data('slide');
+ var $indicator = $('.btn_carousel:nth-child(' + (parseInt(currentSlide) + 1)+')');
+ var $active = $('.btn_carousel.active');
+ var imageFeatures = $('.image-top');
+
+ $active.removeClass('active');
+ $indicator.addClass('active');
+ }
+ });
+ },
+
+ slideshowImagePosition: function(currentSlide) {
+ var visibleElement = $(this.variables.textTriggerSelector).parent();
+
+ $(visibleElement).on('inview', function(event, isInView) {
+ if (isInView) {
+ var currentSlide = $(event.currentTarget).data('slide');
+ var imageFeatures = $('.image-top');
+ var currentHeight = $('.image-top').height() / 4;
+
+ if (currentSlide === 1) {
+ imageFeatures.css({
+ 'top': '0' + 'px',
+ });
+ }
+
+ if (currentSlide === 2) {
+ imageFeatures.css({
+ 'top': '-' + currentHeight + 'px'
+ });
+ }
+
+ if (currentSlide === 3) {
+ imageFeatures.css({
+ 'top': '-' + currentHeight * 2 + 'px'
+ });
+ }
+
+ if (currentSlide === 4) {
+ imageFeatures.css({
+ 'top': '-' + currentHeight * 3 + 'px'
+ });
+ }
+ }
+ });
+ },
+
+ slideshowDesktop : function () {
+ this.indicatorSlideshow();
+ this.slideshowImagePosition();
+ this.slideshowChangeImageDesktop();
+
+ this.controller = new ScrollMagic.Controller();
+ this.variables.SlideshowTextTriggerSelector.each(function() {
+
+ var imageFeatures = $('.image-top');
+ var animateImage = new ScrollMagic.Scene ({
+ triggerElement: this,
+ offset: '100%',
+ reverse: true,
+ triggerHook: 1
+ })
+ .addTo(this.controller);
+ });
+
+ var imagePin = new ScrollMagic.Scene ({
+ triggerElement: '#imageTrigger',
+ duration: '300%',
+ triggerHook: 0
+ })
+
+ .setPin('#imageTrigger')
+ .setClassToggle('.indicators', 'active') // add indicators to scene
+ .addTo(this.controller);
+ },
+
+ slideshowMobile: function() {
+ $(this.variables.slideshowIndicatorsSelector).addClass(this.variables.activeClass);
+ this.slideshowImagePositionMobile();
+ this.slideshowChangeImageMobile();
+ this.indicatorSlideshow();
+ this.updateSlideshowImageSizes();
+ this.toggleTextSlideshowMobile();
+ $(window).resize(_.bind(this.updateSlideshowImageSizes, this));
+
+ $(this.variables.slideshowIndicatorsSelector).addClass(this.variables.activeClass);
+
+ var sectionHeadingheight = $('#slideshow').find('.section--heading-1').height();
+ var currentImageDevice = $('.image-back').height() + sectionHeadingheight + 200;
+ $(this.variables.slideshowIndicatorsSelector).css({
+ 'top': currentImageDevice + 'px'
+ });
+ $(this.variables.indicatorSlideshow).on('click', _.bind(this.indicatorsAnchorMobile, this));
+ },
+
+ indicatorsAnchorMobile: function(event) {
+ event.prevent;
+ },
+
+ updateSlideshowImageSizes: function() {
+ var imageDeviceWidth = $('.image-back').width() * '0.9376733', // Using proportions to do the math
+ imageDeviceHeight = $('.image-back').height() * '0.722727273', // Using proportions to do the math
+ imageOnTopMargins = $('.image-back').width() * '0.0314'; // Using proportions to do the math
+
+
+ $('.image-top-container').css({
+ 'width': imageDeviceWidth + 'px',
+ 'height': imageDeviceHeight + 'px',
+ 'top': imageOnTopMargins + 'px',
+ 'left': imageOnTopMargins + 'px'
+ });
+ },
+
+ slideshowChangeImageMobile: function() {
+ $('.image-top-container').find('.image__desktop').hide();
+ $('.image-top-container').find('.image__mobile').show();
+ },
+
+ slideshowChangeImageDesktop: function() {
+ $('.image-top-container').find('.image__desktop').show();
+ $('.image-top-container').find('.image__mobile').hide();
+ },
+
+ toggleTextSlideshowMobile: function() {
+ var firstText = $('.right-text-grey').first();
+ firstText.addClass(this.variables.activeClass);
+
+ var element = document.getElementById('slideshow');
+ Hammer(element).on('swipeleft', _.bind(this.showNextTextSlideshow, this));
+ Hammer(element).on('swiperight', _.bind(this.showPreviousTextSlideshow, this));
+ },
+
+ showNextTextSlideshow: function(event) {
+ var lastElement = $('.right-text-grey').last(),
+ visibleElement = $('.textTrigger').parent(),
+ slidesCount = $('.right-text-grey').last().data('slide'),
+ currentSlide = $('.right-text-grey.active').data('slide');
+
+ if (slidesCount > currentSlide) {
+ var currentText = $('.right-text-grey.active');
+ var nextText = $('.right-text-grey.active').next();
+
+ nextText.addClass('swipeleft active');
+ currentText.removeClass('active');
+
+ setTimeout(function() {
+ nextText.removeClass('swipeleft');
+ }, 200 );
+
+ } else {
+ nextText = $('.right-text-grey').first();
+ var currentText = $('.right-text-grey.active');
+
+ nextText.addClass('swipeleft active');
+ currentText.removeClass('active');
+
+ setTimeout(function() {
+ nextText.removeClass('swipeleft');
+ }, 200 );
+ }
+ },
+
+ showPreviousTextSlideshow: function(event) {
+ var currentText = $('.right-text-grey.active'),
+ previousText = $('.right-text-grey.active').prev(),
+ lastElement = $('.right-text-grey').last(),
+ visibleElement = $('.textTrigger').parent(),
+ slidesCount = $('.right-text-grey').first().data('slide'),
+ NoMoreSlides = $('.right-text-grey.active').data('slide');
+
+ if (slidesCount < NoMoreSlides) {
+ var currentText = $('.right-text-grey.active'),
+ previousText = $('.right-text-grey.active').prev();
+
+ previousText.addClass('swiperight active');
+ currentText.removeClass('active');
+
+ setTimeout(function() {
+ previousText.removeClass('swiperight');
+ }, 200 );
+
+ } else {
+ previousText = $('.right-text-grey').last();
+ currentText = $('.right-text-grey.active');
+
+ previousText.addClass('active');
+ currentText.removeClass('active');
+
+ setTimeout(function() {
+ previousText.removeClass('swiperight');
+ }, 200 );
+ }
+ },
+
+ slideshowImagePositionMobile: function() {
+ var visibleElement = $('.textTrigger').parent();
+
+ $(visibleElement).on('inview', function(event, isInView) {
+ if (isInView) {
+ var currentSlide = $(event.currentTarget).data('slide'),
+ imageFeatures = $('.image-top'),
+ slidesCount = $('.right-text-grey').last().data('slide'),
+ imageTopHeight = $('.image__mobile').width() / slidesCount;
+
+ if (currentSlide === 1) {
+ imageFeatures.css({
+ 'left': '0' + 'px'
+ });
+ }
+
+ if (currentSlide === 2) {
+ imageFeatures.css({
+ 'left': - imageTopHeight + 'px'
+ });
+ }
+
+ if (currentSlide === 3) {
+ imageFeatures.css({
+ 'left': - imageTopHeight * 2 + 'px'
+ });
+ }
+
+ if (currentSlide === 4) {
+ imageFeatures.css({
+ 'left': - imageTopHeight * 3 + 'px'
+ });
+ }
+ }
+ });
+ },
+
+ destroyMagicScrollOnMobile: function(event, slideshowDesktop) {
+ this.controller.destroy(true);
+ this.controller = null;
+ this.slideshowDesktopCss = $('.scrollmagic-pin-spacer').attr('style');
+ $('.scrollmagic-pin-spacer').removeAttr('style');
+ },
+
+ removeInlineCssOnDesktop: function(destroyMagicScrollOnMobile) {
+ $('.image__desktop').removeAttr('style');
+ $('.scrollmagic-pin-spacer').css('style');
+ },
+
+ removeInlineCssOnMobile: function() {
+ $(this.variables.slideshowIndicatorsSelector).removeAttr('style');
+ $(this.variables.slideshowIndicatorsSelector).css('style');
+ }
+ };
+ slideshow.init();
+ });
+ });
diff --git a/_shared_assets/themes/nextcloud_com/static/js/modules/submenu.js b/_shared_assets/themes/nextcloud_com/static/js/modules/submenu.js
new file mode 100644
index 000000000..1f0286736
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/modules/submenu.js
@@ -0,0 +1,84 @@
+define(['jquery', 'lodash', 'enquire', 'velocity', 'velocityUI', 'scrollMagic'],
+ function ($, _, enquire, Velocity, velocityUI, ScrollMagic) {
+ $(document).ready(function() {
+ 'use strict';
+ var subMenuModule = {
+ init: function() {
+ console.log('starting submenu function');
+ $(this.variables.menuAnchorSelector).velocity('transition.fadeIn', 1000 );
+
+ enquire.register('screen and (max-width: 480px)', {
+ //match: _.bind(this.resultsBindMobile, this)
+ });
+
+ enquire.register('screen and (min-width: 481px)', {
+ match: _.bind(this.subMenuEvent, this)
+ });
+ },
+
+ variables : {
+ topHeaderSelector: '.topheader',
+ heroSectionBackgroundSelector: '.background',
+ menuAnchorSelector: '#menuAnchor'
+ },
+
+ subMenuEvent: function() {
+ this.pinFiltersBar();
+ this.smothscrollToggleActive();
+ },
+
+ pinFiltersBar: function() {
+ var controller = new ScrollMagic.Controller();
+ var scene = new ScrollMagic.Scene({
+ triggerElement: this.variables.menuAnchorSelector,
+ triggerHook:0,
+ offset:-90
+ })
+ .setPin(this.variables.menuAnchorSelector)
+ .setClassToggle('.nav', 'no-shadow')
+ .addTo(controller);
+ },
+
+ smothscrollToggleActive: function() {
+ $('a[href^="#"]:not([data-toggle="collapse"])').click(function(event) {
+ var id = $(this).attr('href');
+ var target = $(id).offset().top - 200;
+ $('html, body').animate({scrollTop:target}, 500);
+ event.preventDefault();
+
+ });
+
+ function getTargetTop(elem){
+ var id = elem.attr('href');
+ var offset = 60;
+ return $(id).offset().top - offset;
+ }
+
+
+ $(window).scroll(function(e){
+ isSelected($(window).scrollTop());
+ });
+
+ var sections = $('a[href^="#"]');
+
+ function isSelected(scrolledTo){
+
+ var threshold = 100;
+ var i;
+
+ for (i = 0; i < sections.length; i++) {
+ var section = $(sections[i]);
+ var target = getTargetTop(section);
+
+ if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
+ sections.removeClass('active');
+ section.addClass('active');
+ }
+
+ }
+ }
+ }
+ };
+ subMenuModule.init();
+ });
+ });
diff --git a/_shared_assets/themes/nextcloud_com/static/js/modules/youtubePlayer.js b/_shared_assets/themes/nextcloud_com/static/js/modules/youtubePlayer.js
new file mode 100644
index 000000000..5e3dfd427
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/modules/youtubePlayer.js
@@ -0,0 +1,32 @@
+// This use the plyr plugin, for more information use the link above
+// https://github.com/sampotts/plyr
+
+define(['jquery', 'lodash', 'plyr'],
+ function ($, _, plyr) {
+ $(document).ready(function() {
+ 'use strict';
+ var YoutubePlayer = {
+ init: function() {
+ this.startPlayer();
+ this.getCss();
+ },
+
+ getCss: function() {
+ $('head').append('');
+ var css = $('head').children(':last');
+ css.attr({
+ rel: 'stylesheet',
+ type: 'text/css',
+ href: 'https://cdn.plyr.io/2.0.13/plyr.css'
+ });
+ },
+
+ startPlayer: function() {
+ plyr.setup({
+ //Pass extra options here if needed
+ });
+ }
+ };
+ YoutubePlayer.init();
+ });
+ });
diff --git a/_shared_assets/themes/nextcloud_com/static/js/navigation.js b/_shared_assets/themes/nextcloud_com/static/js/navigation.js
new file mode 100644
index 000000000..12ee8effd
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/navigation.js
@@ -0,0 +1,265 @@
+$(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();
+});
diff --git a/_shared_assets/themes/nextcloud_com/static/js/require.config.js b/_shared_assets/themes/nextcloud_com/static/js/require.config.js
new file mode 100644
index 000000000..27a335f09
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/require.config.js
@@ -0,0 +1,49 @@
+requirejs.config({
+ waitSeconds : 0,
+ baseURL: 'js/',
+ paths: {
+ jquery: ['https://code.jquery.com/jquery-3.2.1.min', '../../node_modules/jquery/dist/jquery.min'],
+ modernizr: ['https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min', 'old/vendor/modernizr-2.7.0.min'],
+ waypoints: ['https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min', '../../node_modules/waypoints/lib/jquery.waypoints.min'],
+ enquire: ['https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min', 'old/vendor/enquire.min'],
+ bodymovin: ['https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.7.0/bodymovin.min', 'old/vendor/bodymovin.min'],
+ headroom: ['https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/headroom.min', 'old/vendor/headroom.min'],
+ headroomJquery: ['https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.3/jQuery.headroom.min', 'old/vendor/jQuery.headroom.min'],
+ lodash: ['https://cdn.jsdelivr.net/lodash/4.17.4/lodash.core.min', '../../node_modules/lodash/core.min'],
+ TweenLite: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenLite.min', '../../node_modules/gsap/src/minified/TweenLite.min'],
+ TimelineLite: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TimelineLite.min', '../../node_modules/gsap/src/minified/TimelineLite.min'],
+ TimelineMax: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TimelineMax.min', '../../node_modules/gsap/src/minified/TimelineMax.min'],
+ TweenMax: ['https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min', '../../node_modules/gsap/src/minified/TweenMax.min'],
+ velocity: ['https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min', 'old/vendor/velocity.min'],
+ velocityUI: ['https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min', 'old/vendor/velocity.ui.min'],
+ scrollMagic: ['https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min', 'old/vendor/ScrollMagic.min'],
+ hammer: ['https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min', 'old/vendor/hammer.min'],
+ inview: ['https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min', 'old/vendor/jquery.inview.min'],
+ plyr: ['https://cdnjs.cloudflare.com/ajax/libs/plyr/2.0.18/plyr', '../../node_modules/plyr/dist/plyr'],
+ bootstrap: ['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min', '../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min'],
+ highlight: ['https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min', '../../node_modules/highliht.js/lib/highlight'],
+ },
+ shim: {
+ headroomJquery: {
+ deps: ['jquery', 'headroom']
+ },
+ enquire: {
+ deps: ['jquery']
+ },
+ bodymovin: {
+ deps: ['jquery']
+ },
+ velocity: {
+ deps: ['jquery']
+ },
+ waypoints: {
+ deps: ['jquery', 'bodymovin']
+ },
+ velocityUI: {
+ deps: ['velocity']
+ },
+ bootstrap: {
+ deps: ['jquery']
+ }
+ }
+});
diff --git a/_shared_assets/themes/nextcloud_com/static/js/require.min.js b/_shared_assets/themes/nextcloud_com/static/js/require.min.js
new file mode 100644
index 000000000..5549ebdd4
--- /dev/null
+++ b/_shared_assets/themes/nextcloud_com/static/js/require.min.js
@@ -0,0 +1,134 @@
+var requirejs,require,define;(function(global,setTimeout){var req,s,head,baseElement,dataMain,src,interactiveScript,currentlyAddingScript,mainScript,subPath,version='2.3.3',commentRegExp=/\/\*[\s\S]*?\*\/|([^:"'=]|^)\/\/.*$/mg,cjsRequireRegExp=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,jsSuffixRegExp=/\.js$/,currDirRegExp=/^\.\//,op=Object.prototype,ostring=op.toString,hasOwn=op.hasOwnProperty,isBrowser=!!(typeof window!=='undefined'&&typeof navigator!=='undefined'&&window.document),isWebWorker=!isBrowser&&typeof importScripts!=='undefined',readyRegExp=isBrowser&&navigator.platform==='PLAYSTATION 3'?/^complete$/:/^(complete|loaded)$/,defContextName='_',isOpera=typeof opera!=='undefined'&&opera.toString()==='[object Opera]',contexts={},cfg={},globalDefQueue=[],useInteractive=false;function commentReplace(match,singlePrefix){return singlePrefix||'';}
+function isFunction(it){return ostring.call(it)==='[object Function]';}
+function isArray(it){return ostring.call(it)==='[object Array]';}
+function each(ary,func){if(ary){var i;for(i=0;i-1;i-=1){if(ary[i]&&func(ary[i],i,ary)){break;}}}}
+function hasProp(obj,prop){return hasOwn.call(obj,prop);}
+function getOwn(obj,prop){return hasProp(obj,prop)&&obj[prop];}
+function eachProp(obj,func){var prop;for(prop in obj){if(hasProp(obj,prop)){if(func(obj[prop],prop)){break;}}}}
+function mixin(target,source,force,deepStringMixin){if(source){eachProp(source,function(value,prop){if(force||!hasProp(target,prop)){if(deepStringMixin&&typeof value==='object'&&value&&!isArray(value)&&!isFunction(value)&&!(value instanceof RegExp)){if(!target[prop]){target[prop]={};}
+mixin(target[prop],value,force,deepStringMixin);}else{target[prop]=value;}}});}
+return target;}
+function bind(obj,fn){return function(){return fn.apply(obj,arguments);};}
+function scripts(){return document.getElementsByTagName('script');}
+function defaultOnError(err){throw err;}
+function getGlobal(value){if(!value){return value;}
+var g=global;each(value.split('.'),function(part){g=g[part];});return g;}
+function makeError(id,msg,err,requireModules){var e=new Error(msg+'\nhttp://requirejs.org/docs/errors.html#'+id);e.requireType=id;e.requireModules=requireModules;if(err){e.originalError=err;}
+return e;}
+if(typeof define!=='undefined'){return;}
+if(typeof requirejs!=='undefined'){if(isFunction(requirejs)){return;}
+cfg=requirejs;requirejs=undefined;}
+if(typeof require!=='undefined'&&!isFunction(require)){cfg=require;require=undefined;}
+function newContext(contextName){var inCheckLoaded,Module,context,handlers,checkLoadedTimeoutId,config={waitSeconds:7,baseUrl:'./',paths:{},bundles:{},pkgs:{},shim:{},config:{}},registry={},enabledRegistry={},undefEvents={},defQueue=[],defined={},urlFetched={},bundlesMap={},requireCounter=1,unnormalizedCounter=1;function trimDots(ary){var i,part;for(i=0;i0){ary.splice(i-1,2);i-=2;}}}}
+function normalize(name,baseName,applyMap){var pkgMain,mapValue,nameParts,i,j,nameSegment,lastIndex,foundMap,foundI,foundStarMap,starI,normalizedBaseParts,baseParts=(baseName&&baseName.split('/')),map=config.map,starMap=map&&map['*'];if(name){name=name.split('/');lastIndex=name.length-1;if(config.nodeIdCompat&&jsSuffixRegExp.test(name[lastIndex])){name[lastIndex]=name[lastIndex].replace(jsSuffixRegExp,'');}
+if(name[0].charAt(0)==='.'&&baseParts){normalizedBaseParts=baseParts.slice(0,baseParts.length-1);name=normalizedBaseParts.concat(name);}
+trimDots(name);name=name.join('/');}
+if(applyMap&&map&&(baseParts||starMap)){nameParts=name.split('/');outerLoop:for(i=nameParts.length;i>0;i-=1){nameSegment=nameParts.slice(0,i).join('/');if(baseParts){for(j=baseParts.length;j>0;j-=1){mapValue=getOwn(map,baseParts.slice(0,j).join('/'));if(mapValue){mapValue=getOwn(mapValue,nameSegment);if(mapValue){foundMap=mapValue;foundI=i;break outerLoop;}}}}
+if(!foundStarMap&&starMap&&getOwn(starMap,nameSegment)){foundStarMap=getOwn(starMap,nameSegment);starI=i;}}
+if(!foundMap&&foundStarMap){foundMap=foundStarMap;foundI=starI;}
+if(foundMap){nameParts.splice(0,foundI,foundMap);name=nameParts.join('/');}}
+pkgMain=getOwn(config.pkgs,name);return pkgMain?pkgMain:name;}
+function removeScript(name){if(isBrowser){each(scripts(),function(scriptNode){if(scriptNode.getAttribute('data-requiremodule')===name&&scriptNode.getAttribute('data-requirecontext')===context.contextName){scriptNode.parentNode.removeChild(scriptNode);return true;}});}}
+function hasPathFallback(id){var pathConfig=getOwn(config.paths,id);if(pathConfig&&isArray(pathConfig)&&pathConfig.length>1){pathConfig.shift();context.require.undef(id);context.makeRequire(null,{skipMap:true})([id]);return true;}}
+function splitPrefix(name){var prefix,index=name?name.indexOf('!'):-1;if(index>-1){prefix=name.substring(0,index);name=name.substring(index+1,name.length);}
+return[prefix,name];}
+function makeModuleMap(name,parentModuleMap,isNormalized,applyMap){var url,pluginModule,suffix,nameParts,prefix=null,parentName=parentModuleMap?parentModuleMap.name:null,originalName=name,isDefine=true,normalizedName='';if(!name){isDefine=false;name='_@r'+(requireCounter+=1);}
+nameParts=splitPrefix(name);prefix=nameParts[0];name=nameParts[1];if(prefix){prefix=normalize(prefix,parentName,applyMap);pluginModule=getOwn(defined,prefix);}
+if(name){if(prefix){if(isNormalized){normalizedName=name;}else if(pluginModule&&pluginModule.normalize){normalizedName=pluginModule.normalize(name,function(name){return normalize(name,parentName,applyMap);});}else{normalizedName=name.indexOf('!')===-1?normalize(name,parentName,applyMap):name;}}else{normalizedName=normalize(name,parentName,applyMap);nameParts=splitPrefix(normalizedName);prefix=nameParts[0];normalizedName=nameParts[1];isNormalized=true;url=context.nameToUrl(normalizedName);}}
+suffix=prefix&&!pluginModule&&!isNormalized?'_unnormalized'+(unnormalizedCounter+=1):'';return{prefix:prefix,name:normalizedName,parentMap:parentModuleMap,unnormalized:!!suffix,url:url,originalName:originalName,isDefine:isDefine,id:(prefix?prefix+'!'+normalizedName:normalizedName)+suffix};}
+function getModule(depMap){var id=depMap.id,mod=getOwn(registry,id);if(!mod){mod=registry[id]=new context.Module(depMap);}
+return mod;}
+function on(depMap,name,fn){var id=depMap.id,mod=getOwn(registry,id);if(hasProp(defined,id)&&(!mod||mod.defineEmitComplete)){if(name==='defined'){fn(defined[id]);}}else{mod=getModule(depMap);if(mod.error&&name==='error'){fn(mod.error);}else{mod.on(name,fn);}}}
+function onError(err,errback){var ids=err.requireModules,notified=false;if(errback){errback(err);}else{each(ids,function(id){var mod=getOwn(registry,id);if(mod){mod.error=err;if(mod.events.error){notified=true;mod.emit('error',err);}}});if(!notified){req.onError(err);}}}
+function takeGlobalQueue(){if(globalDefQueue.length){each(globalDefQueue,function(queueItem){var id=queueItem[0];if(typeof id==='string'){context.defQueueMap[id]=true;}
+defQueue.push(queueItem);});globalDefQueue=[];}}
+handlers={'require':function(mod){if(mod.require){return mod.require;}else{return(mod.require=context.makeRequire(mod.map));}},'exports':function(mod){mod.usingExports=true;if(mod.map.isDefine){if(mod.exports){return(defined[mod.map.id]=mod.exports);}else{return(mod.exports=defined[mod.map.id]={});}}},'module':function(mod){if(mod.module){return mod.module;}else{return(mod.module={id:mod.map.id,uri:mod.map.url,config:function(){return getOwn(config.config,mod.map.id)||{};},exports:mod.exports||(mod.exports={})});}}};function cleanRegistry(id){delete registry[id];delete enabledRegistry[id];}
+function breakCycle(mod,traced,processed){var id=mod.map.id;if(mod.error){mod.emit('error',mod.error);}else{traced[id]=true;each(mod.depMaps,function(depMap,i){var depId=depMap.id,dep=getOwn(registry,depId);if(dep&&!mod.depMatched[i]&&!processed[depId]){if(getOwn(traced,depId)){mod.defineDep(i,defined[depId]);mod.check();}else{breakCycle(dep,traced,processed);}}});processed[id]=true;}}
+function checkLoaded(){var err,usingPathFallback,waitInterval=config.waitSeconds*1000,expired=waitInterval&&(context.startTime+waitInterval)1)){ext=moduleNamePlusExt.substring(index,moduleNamePlusExt.length);moduleNamePlusExt=moduleNamePlusExt.substring(0,index);}
+return context.nameToUrl(normalize(moduleNamePlusExt,relMap&&relMap.id,true),ext,true);},defined:function(id){return hasProp(defined,makeModuleMap(id,relMap,false,true).id);},specified:function(id){id=makeModuleMap(id,relMap,false,true).id;return hasProp(defined,id)||hasProp(registry,id);}});if(!relMap){localRequire.undef=function(id){takeGlobalQueue();var map=makeModuleMap(id,relMap,true),mod=getOwn(registry,id);mod.undefed=true;removeScript(id);delete defined[id];delete urlFetched[map.url];delete undefEvents[id];eachReverse(defQueue,function(args,i){if(args[0]===id){defQueue.splice(i,1);}});delete context.defQueueMap[id];if(mod){if(mod.events.defined){undefEvents[id]=mod.events;}
+cleanRegistry(id);}};}
+return localRequire;},enable:function(depMap){var mod=getOwn(registry,depMap.id);if(mod){getModule(depMap).enable();}},completeLoad:function(moduleName){var found,args,mod,shim=getOwn(config.shim,moduleName)||{},shExports=shim.exports;takeGlobalQueue();while(defQueue.length){args=defQueue.shift();if(args[0]===null){args[0]=moduleName;if(found){break;}
+found=true;}else if(args[0]===moduleName){found=true;}
+callGetModule(args);}
+context.defQueueMap={};mod=getOwn(registry,moduleName);if(!found&&!hasProp(defined,moduleName)&&mod&&!mod.inited){if(config.enforceDefine&&(!shExports||!getGlobal(shExports))){if(hasPathFallback(moduleName)){return;}else{return onError(makeError('nodefine','No define call for '+moduleName,null,[moduleName]));}}else{callGetModule([moduleName,(shim.deps||[]),shim.exportsFn]);}}
+checkLoaded();},nameToUrl:function(moduleName,ext,skipExt){var paths,syms,i,parentModule,url,parentPath,bundleId,pkgMain=getOwn(config.pkgs,moduleName);if(pkgMain){moduleName=pkgMain;}
+bundleId=getOwn(bundlesMap,moduleName);if(bundleId){return context.nameToUrl(bundleId,ext,skipExt);}
+if(req.jsExtRegExp.test(moduleName)){url=moduleName+(ext||'');}else{paths=config.paths;syms=moduleName.split('/');for(i=syms.length;i>0;i-=1){parentModule=syms.slice(0,i).join('/');parentPath=getOwn(paths,parentModule);if(parentPath){if(isArray(parentPath)){parentPath=parentPath[0];}
+syms.splice(0,i,parentPath);break;}}
+url=syms.join('/');url+=(ext||(/^data\:|^blob\:|\?/.test(url)||skipExt?'':'.js'));url=(url.charAt(0)==='/'||url.match(/^[\w\+\.\-]+:/)?'':config.baseUrl)+url;}
+return config.urlArgs&&!/^blob\:/.test(url)?url+config.urlArgs(moduleName,url):url;},load:function(id,url){req.load(context,id,url);},execCb:function(name,callback,args,exports){return callback.apply(exports,args);},onScriptLoad:function(evt){if(evt.type==='load'||(readyRegExp.test((evt.currentTarget||evt.srcElement).readyState))){interactiveScript=null;var data=getScriptData(evt);context.completeLoad(data.id);}},onScriptError:function(evt){var data=getScriptData(evt);if(!hasPathFallback(data.id)){var parents=[];eachProp(registry,function(value,key){if(key.indexOf('_@r')!==0){each(value.depMaps,function(depMap){if(depMap.id===data.id){parents.push(key);return true;}});}});return onError(makeError('scripterror','Script error for "'+data.id+(parents.length?'", needed by: '+parents.join(', '):'"'),evt,[data.id]));}}};context.require=context.makeRequire();return context;}
+req=requirejs=function(deps,callback,errback,optional){var context,config,contextName=defContextName;if(!isArray(deps)&&typeof deps!=='string'){config=deps;if(isArray(callback)){deps=callback;callback=errback;errback=optional;}else{deps=[];}}
+if(config&&config.context){contextName=config.context;}
+context=getOwn(contexts,contextName);if(!context){context=contexts[contextName]=req.s.newContext(contextName);}
+if(config){context.configure(config);}
+return context.require(deps,callback,errback);};req.config=function(config){return req(config);};req.nextTick=typeof setTimeout!=='undefined'?function(fn){setTimeout(fn,4);}:function(fn){fn();};if(!require){require=req;}
+req.version=version;req.jsExtRegExp=/^\/|:|\?|\.js$/;req.isBrowser=isBrowser;s=req.s={contexts:contexts,newContext:newContext};req({});each(['toUrl','undef','defined','specified'],function(prop){req[prop]=function(){var ctx=contexts[defContextName];return ctx.require[prop].apply(ctx,arguments);};});if(isBrowser){head=s.head=document.getElementsByTagName('head')[0];baseElement=document.getElementsByTagName('base')[0];if(baseElement){head=s.head=baseElement.parentNode;}}
+req.onError=defaultOnError;req.createNode=function(config,moduleName,url){var node=config.xhtml?document.createElementNS('http://www.w3.org/1999/xhtml','html:script'):document.createElement('script');node.type=config.scriptType||'text/javascript';node.charset='utf-8';node.async=true;return node;};req.load=function(context,moduleName,url){var config=(context&&context.config)||{},node;if(isBrowser){node=req.createNode(config,moduleName,url);node.setAttribute('data-requirecontext',context.contextName);node.setAttribute('data-requiremodule',moduleName);if(node.attachEvent&&!(node.attachEvent.toString&&node.attachEvent.toString().indexOf('[native code')<0)&&!isOpera){useInteractive=true;node.attachEvent('onreadystatechange',context.onScriptLoad);}else{node.addEventListener('load',context.onScriptLoad,false);node.addEventListener('error',context.onScriptError,false);}
+node.src=url;if(config.onNodeCreated){config.onNodeCreated(node,config,moduleName,url);}
+currentlyAddingScript=node;if(baseElement){head.insertBefore(node,baseElement);}else{head.appendChild(node);}
+currentlyAddingScript=null;return node;}else if(isWebWorker){try{setTimeout(function(){},0);importScripts(url);context.completeLoad(moduleName);}catch(e){context.onError(makeError('importscripts','importScripts failed for '+moduleName+' at '+url,e,[moduleName]));}}};function getInteractiveScript(){if(interactiveScript&&interactiveScript.readyState==='interactive'){return interactiveScript;}
+eachReverse(scripts(),function(script){if(script.readyState==='interactive'){return(interactiveScript=script);}});return interactiveScript;}
+if(isBrowser&&!cfg.skipDataMain){eachReverse(scripts(),function(script){if(!head){head=script.parentNode;}
+dataMain=script.getAttribute('data-main');if(dataMain){mainScript=dataMain;if(!cfg.baseUrl&&mainScript.indexOf('!')===-1){src=mainScript.split('/');mainScript=src.pop();subPath=src.length?src.join('/')+'/':'./';cfg.baseUrl=subPath;}
+mainScript=mainScript.replace(jsSuffixRegExp,'');if(req.jsExtRegExp.test(mainScript)){mainScript=dataMain;}
+cfg.deps=cfg.deps?cfg.deps.concat(mainScript):[mainScript];return true;}});}
+define=function(name,deps,callback){var node,context;if(typeof name!=='string'){callback=deps;deps=name;name=null;}
+if(!isArray(deps)){callback=deps;deps=null;}
+if(!deps&&isFunction(callback)){deps=[];if(callback.length){callback.toString().replace(commentRegExp,commentReplace).replace(cjsRequireRegExp,function(match,dep){deps.push(dep);});deps=(callback.length===1?['require']:['require','exports','module']).concat(deps);}}
+if(useInteractive){node=currentlyAddingScript||getInteractiveScript();if(node){if(!name){name=node.getAttribute('data-requiremodule');}
+context=contexts[node.getAttribute('data-requirecontext')];}}
+if(context){context.defQueue.push([name,deps,callback]);context.defQueueMap[name]=true;}else{globalDefQueue.push([name,deps,callback]);}};define.amd={jQuery:true};req.exec=function(text){return eval(text);};req(cfg);}(this,(typeof setTimeout==='undefined'?undefined:setTimeout)));
\ No newline at end of file
diff --git a/index.html b/index.html
index 04f3aec42..fcdf33620 100644
--- a/index.html
+++ b/index.html
@@ -38,8 +38,11 @@
-
+
+
+
+
+