Merge branch 'dev' into patch-3

zestedesavoir · Aug 7, 2017 · 58bc9ec · 58bc9ec
2 parents 4cd952b + e2ab5d1
commit 58bc9ec
Show file tree

Hide file tree

Showing 18 changed files with 217 additions and 233 deletions.
diff --git a/Gulpfile.js b/Gulpfile.js
@@ -37,7 +37,6 @@ gulp.task('clean', () => del([
 gulp.task('js:lint', () =>
     gulp.src([
         'assets/js/*.js',
-        '!assets/js/_custom.modernizr.js',
         '!assets/js/editor.js', // We'll fix that later
     ])
         .pipe(jshint())
@@ -49,8 +48,6 @@ gulp.task('js', () =>
     gulp.src([
         require.resolve('jquery'),
         require.resolve('cookies-eu-banner'),
-        'assets/js/_custom.modernizr.js',
-
         // Used by other scripts, must be first
         'assets/js/modal.js',
         'assets/js/tooltips.js',
@@ -61,12 +58,12 @@ gulp.task('js', () =>
         'assets/js/autocompletion.js',
         'assets/js/close-alert-box.js',
         'assets/js/compare-commits.js',
-        'assets/js/data-click.js',
         'assets/js/dropdown-menu.js',
         'assets/js/editor.js',
         'assets/js/featured-resource-preview.js',
         'assets/js/form-email-username.js',
         'assets/js/gallery.js',
+        'assets/js/index.js',
         'assets/js/jquery-tabbable.js',
         'assets/js/karma.js',
         'assets/js/keyboard-navigation.js',
@@ -86,6 +83,10 @@ gulp.task('js', () =>
         .pipe(sourcemaps.init({ loadMaps: true }))
         .pipe(concat('script.js', { newline: ';\r\n' }))
         .pipe(uglify())
+        .on('error', function (err) {
+            // gulp-uglify sucks
+            console.log(err.toString());
+        })
         .pipe(sourcemaps.write('.', { includeContent: true, sourceRoot: '../../' }))
         .pipe(gulp.dest('dist/js/')));
 

diff --git a/assets/js/_custom.modernizr.js b/assets/js/_custom.modernizr.js
diff --git a/assets/js/data-click.js b/assets/js/data-click.js
diff --git a/assets/js/dropdown-menu.js b/assets/js/dropdown-menu.js
@@ -4,128 +4,193 @@
    Author: Alex-D / Alexandre Demode
    ========================================================================== */
 
-(function($, undefined){
+(function ($) {
     "use strict";
-
-    var mouseDown = false,
-        shiftHold = false;
 
-    $(document).on("keydown keyup", function(e){
-        shiftHold = e.shiftKey;
-    });
+    var mouseDown = false;
+    var shiftHeld = false;
 
-    $(".dropdown").each(function(){
-        var $dropdown = $(this),
-            $elem = $(this).parent().find("> a");
-
-        if(!$elem.parents(".logbox").length)
-            $elem.addClass("has-dropdown");
-
-        $elem
-        .on("mousedown", function(){
-            mouseDown = true;
-        })
-        .on("mouseup", function(){
-            mouseDown = false;
-        })
-        .on("click", function(e){
-            if(($(this).parents(".header-menu-list").length > 0 && parseInt($("html").css("width")) < 960))
-                return true;
+    function hoveringModeEnabled() {
+        return $(".header-menu").is("[data-hovering-mode]");
+    }
+
+    var handlers = $(".dropdown")
+        .map(function (_, dropdown) {
+            return setupDropdown($(dropdown));
+        });
 
-            e.preventDefault();
-            e.stopPropagation();
+    function closeAll() {
+        handlers.each(function (_, handler) {
+            handler.close();
+        });
+    }
 
-            if(!$(this).hasClass("active")){
-                activeDropdown($(this));
-                $(this).off("blur");
-            } else {
-                $(this).removeClass("active");
-                triggerCloseDropdown($(this));
+    function isDropdownContainer(element) {
+        for (var i = 0; i < handlers.length; i++) {
+            if (handlers[i].$container[0] === element) {
+                return true;
             }
-        })
-        .on("focus", function(e){
-            e.preventDefault();
-
-            if(!mouseDown && !$elem.hasClass("active")){
-                activeDropdown($elem);
-
-                $elem
-                .off("blur")
-                .on("blur", function(){
-                    $elem
-                    .one("blur", function(){
-                        if(shiftHold)
-                            triggerCloseDropdown($elem);
-                    });
-
-                    setTimeout(function(){
-                        if($(":tabbable:focus", $dropdown).length){
-                            var listenBlurLast = function(){
-                                $(":tabbable:last", $dropdown)
-                                .one("blur", function(){
-                                    if(shiftHold){
-                                        listenBlurLast();
-                                        return;
-                                    }
-                                    $elem.removeClass("active");
-                                    triggerCloseDropdown($elem);
-                                });
-                            };
-                            listenBlurLast();
-                        } else {
-                            $elem.removeClass("active");
-                            triggerCloseDropdown($elem);
-                        }
-                    }, 10);
-                })
-                .one("mousemove", function(){
-                    $(this).off("blur");
-                });
+        }
+        return false;
+    }
+
+    function areSomeDropdownsFocused() {
+        return $(document.activeElement)
+            .parents()
+            .filter(function (_, element) {
+                return isDropdownContainer(element);
+            })
+            .length;
+    }
+
+    $("body")
+        .on("click", closeAll)
+        .on("keydown", function (event) {
+            if (event.key === "Tab") {
+                setTimeout(function () {
+                    if (!areSomeDropdownsFocused()) {
+                        closeAll();
+                    }
+                }, 5);
             }
         });
-    });
 
-    $(".dropdown-list").on("focus", function(){
-        $(this).find(":tabbable:first").focus();
+    $(document).on("keydown keyup", function (event) {
+        shiftHeld = event.shiftKey;
     });
 
-    $("body").on("keydown", function(e){
-        if(e.which === 27)
-            $(".has-dropdown.active, .ico-link.active, #my-account.active").focus().removeClass("active");
-    });
+    function getTabIndex(element) {
+        var tabbables = $(":tabbable");
+        for (var i = 0; i < tabbables.length; i++) {
+            if (tabbables[i] === element) {
+                return i;
+            }
+        }
+        return -1;
+    }
 
-    function activeDropdown($elem){
-        $("body").trigger("click");
-        $elem.addClass("active");
-        $elem.parent().find(".dropdown-list").scrollTop(0);
+    function moveFocus(element, container, direction) {
+        var index = getTabIndex(element);
+        if (index === -1) {
+            return;
+        }
 
-        if($elem.is("[data-active]"))
-            $("#" + $elem.attr("data-active")).addClass("active");
+        var tabbables = $(":tabbable");
+        for (var i = index + direction; i < tabbables.length; i += direction) {
+            if (!container.contains(tabbables[i])) {
+                closeAll();
+                tabbables[i].focus();
+                return;
+            }
+        }
+    }
 
-        if($elem.parents(".logbox").length)
-            $("html").addClass("dropdown-active");
 
-        triggerCloseDropdown($elem);
-    }
-    function triggerCloseDropdown($that){
-        if($that.hasClass("active")){
-            $("body").one("click", function(e){
-                if(!$(e.target).hasClass("dropdown") && !$(e.target).parents(".dropdown").length) {
-                    $that.removeClass("active");
-                    $that.next(":tabbable").focus();
-
-                    if($that.is("[data-active]"))
-                        $("#" + $that.attr("data-active")).removeClass("active");
+
+    // Returns a dropdown handler
+    function setupDropdown($dropdown) {
+        var $container = $dropdown.parent();
+        var $toggleLink = $container.find("> a");
+        var closingTimer;
+
+        function open() {
+            cancelClosingTimer();
+
+            // Close any other dropdown
+            $("body").trigger("click");
+
+            $toggleLink.addClass("active");
+            $dropdown.find(".dropdown-list").scrollTop(0);
+        }
+
+        function cancelClosingTimer() {
+            if (closingTimer) {
+                clearTimeout(closingTimer);
+                closingTimer = null;
+            }
+        }
+
+        function close() {
+            cancelClosingTimer();
+            $toggleLink.removeClass("active");
+        }
+
+        function closeLater() {
+            if (closingTimer) {
+                return;
+            }
+            closingTimer = setTimeout(close, 200);
+        }
+
+        $container
+            .on("mouseenter", function () {
+                if (hoveringModeEnabled()) {
+                    open();
+                }
+            })
+
+            .on("mouseleave", function () {
+                if (hoveringModeEnabled()) {
+                    closeLater();
+                }
+            })
+
+            .on("keydown", function (event) {
+                if (event.key === "ArrowRight") {
+                    event.preventDefault();
+                    moveFocus($toggleLink[0], $container[0], 1);
+                }
+
+                if (event.key === "ArrowLeft") {
+                    event.preventDefault();
+                    moveFocus($toggleLink[0], $container[0], -1);
                 }
-
-                triggerCloseDropdown($that);
             });
-        } else {
-            $("html").removeClass("dropdown-active");
-            $(".dropdown :tabbable").off("blur");
 
-            if($that.is("[data-active]"))
-                $("#" + $that.attr("data-active")).removeClass("active");
-        }
+        $toggleLink
+
+            // Mutates global state but there is only one mouse
+            .on("mousedown", function () {
+                mouseDown = true;
+            })
+            .on("mouseup", function () {
+                mouseDown = false;
+            })
+
+            .on("click", function (event) {
+                if (hoveringModeEnabled()) {
+                    return;
+                }
+
+                event.preventDefault();
+                event.stopPropagation();
+
+                if ($toggleLink.hasClass("active")) {
+                    close();
+                } else {
+                    open();
+                }
+            })
+
+            .on("focus", function (event) {
+                event.preventDefault();
+
+                if(mouseDown || $toggleLink.hasClass("active")) {
+                    return;
+                }
+
+                open();
+
+                if (!shiftHeld) {
+                    $dropdown.find(":tabbable:first").focus();
+                }
+            });
+
+        return {
+            open: open,
+            close: close,
+            $container: $container,
+        };
     }
-})(jQuery);
+
+})(jQuery);
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -0,0 +1,3 @@
+(function () {
+    document.documentElement.classList.add("js");
+})();