WordPress.org
Get WordPress

Make WordPress Core

Ticket #35947: 35947.6.patch

File 35947.6.patch, 15.7 KB (added by delawski, 7 years ago)

Try to refocus with delay on nav control in case no element was :visible initially (edge-case scenario).

  • src/wp-admin/css/customize-controls.css 

    From 8894171c45766b8d733b8f8421094ad50f635974 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <ryan.kienstra@xwp.co>
Date: Fri, 4 Mar 2016 01:48:11 -0300
Subject: [PATCH 1/9] Customize : Remove extra space at bottom of Customizer
 panel.

Before, non-active sections and panels still occupied space in the DOM.
So the active panel had a 'margin-top' property to move it to the top.
So set the height of the non-active sections to 0.
And don't add a margin-top value to the active panel's content.

Fixes #35947.
---
 src/wp-admin/css/customize-controls.css | 8 ++++++++
 src/wp-admin/js/customize-controls.js   | 1 -
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 82132e3..32d5827 100644
    a b h3.customize-section-title { 
    430430        width: 300px;
    431431}
    432432
     433.in-sub-panel #customize-info {
     434        height: 0;
     435}
     436
     437.in-sub-panel #customize-theme-controls > ul > .control-section:not(.current-panel) {
     438        height: 0;
     439}
     440
    433441.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
    434442        width: 100%;
    435443}

  • src/wp-admin/js/customize-controls.js 

    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 8fcf08b..1c1acfd 100644
    a b  
    13631363                                        content.parent().show();
    13641364                                        position = content.offset().top;
    13651365                                        scroll = container.scrollTop();
    1366                                         content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    13671366                                        accordionSection.addClass( 'current-panel' );
    13681367                                        overlay.addClass( 'in-sub-panel' );
    13691368                                        container.scrollTop( 0 );

  • src/wp-admin/js/customize-controls.js 

    From 200b497d271bedc324f21262465487210164433e Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <ryan.kienstra@xwp.co>
Date: Fri, 4 Mar 2016 02:16:23 -0300
Subject: [PATCH 2/9] Customize : Remove variables that were deleted in commit
 8894171.

These are no longer used in the function in which they're defined.
They were deleted as part of a commit to remove the 'margin-top' value.

Fixes #35947.
---
 src/wp-admin/js/customize-controls.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 1c1acfd..086472b 100644
    a b  
    13331333                        }
    13341334
    13351335                        // Note: there is a second argument 'args' passed
    1336                         var position, scroll,
    1337                                 panel = this,
     1336                        var panel = this,
    13381337                                accordionSection = panel.container.closest( '.accordion-section' ),
    13391338                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    13401339                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    … …  
    13421341                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
    13431342                                backBtn = accordionSection.find( '.customize-panel-back' ),
    13441343                                panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
    1345                                 content = accordionSection.find( '.control-panel-content' ),
    1346                                 headerActionsHeight = $( '#customize-header-actions' ).height();
     1344                                content = accordionSection.find( '.control-panel-content' );
    13471345
    13481346                        if ( expanded ) {
    13491347
    … …  
    13611359
    13621360                                content.show( 0, function() {
    13631361                                        content.parent().show();
    1364                                         position = content.offset().top;
    1365                                         scroll = container.scrollTop();
    13661362                                        accordionSection.addClass( 'current-panel' );
    13671363                                        overlay.addClass( 'in-sub-panel' );
    13681364                                        container.scrollTop( 0 );

  • src/wp-admin/js/customize-controls.js 

    From c00e5eaf37284881a363aecefcc4b06e636ca1ba Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <ryan.kienstra@xwp.co>
Date: Sat, 5 Mar 2016 01:00:12 -0300
Subject: [PATCH 3/9] Fix issue with widget's contents being too high on
 clicking in preview.

When clicking a widget in the preview, the 'onChangeExpanded' method is called.
This included a jQuery method that adds a 'margin-top' value.
Remove this method call, as it caused a spacing issue.
The inactive panels no longer occupy space, from commit 8894171c.
So there's no adjustment needed for the controls to appear properly.

Fixes #34747.
---
 src/wp-admin/js/customize-controls.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 086472b..7fd2b54 100644
    a b  
    648648                                overlay = section.container.closest( '.wp-full-overlay' ),
    649649                                backBtn = section.container.find( '.customize-section-back' ),
    650650                                sectionTitle = section.container.find( '.accordion-section-title' ).first(),
    651                                 headerActionsHeight = $( '#customize-header-actions' ).height(),
    652                                 resizeContentHeight, expand, position, scroll;
     651                                resizeContentHeight, expand;
    653652
    654653                        if ( expanded && ! section.container.hasClass( 'open' ) ) {
    655654
    … …  
    671670                                        expand = function() {
    672671                                                section.container.addClass( 'open' );
    673672                                                overlay.addClass( 'section-open' );
    674                                                 position = content.offset().top;
    675                                                 scroll = container.scrollTop();
    676                                                 content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    677673                                                resizeContentHeight();
    678674                                                sectionTitle.attr( 'tabindex', '-1' );
    679675                                                backBtn.attr( 'tabindex', '0' );

  • src/wp-admin/css/customize-controls.css 

    From 334473cb0975541e7b46935caa50061ec235fd45 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@xwp.co>
Date: Sat, 5 Mar 2016 16:44:44 +0100
Subject: [PATCH 4/9] Remove horizontal gap next to scrollbar when opening a
 panel (reverts previous changes by @kienstra).

---
 src/wp-admin/css/customize-controls.css |  8 --------
 src/wp-admin/js/customize-controls.js   | 27 ++++++++++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 32d5827..82132e3 100644
    a b h3.customize-section-title { 
    430430        width: 300px;
    431431}
    432432
    433 .in-sub-panel #customize-info {
    434         height: 0;
    435 }
    436 
    437 .in-sub-panel #customize-theme-controls > ul > .control-section:not(.current-panel) {
    438         height: 0;
    439 }
    440 
    441433.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
    442434        width: 100%;
    443435}

  • src/wp-admin/js/customize-controls.js 

    diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 7fd2b54..3a89bb7 100644
    a b  
    13291329                        }
    13301330
    13311331                        // Note: there is a second argument 'args' passed
    1332                         var panel = this,
     1332                        var position, scroll,
     1333                                panel = this,
    13331334                                accordionSection = panel.container.closest( '.accordion-section' ),
    13341335                                overlay = accordionSection.closest( '.wp-full-overlay' ),
    13351336                                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    … …  
    13371338                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
    13381339                                backBtn = accordionSection.find( '.customize-panel-back' ),
    13391340                                panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
    1340                                 content = accordionSection.find( '.control-panel-content' );
     1341                                content = accordionSection.find( '.control-panel-content' ),
     1342                                headerActionsHeight = $( '#customize-header-actions' ).height();
    13411343
    13421344                        if ( expanded ) {
    13431345
    … …  
    13551357
    13561358                                content.show( 0, function() {
    13571359                                        content.parent().show();
     1360                                        position = content.offset().top;
     1361                                        scroll = container.scrollTop();
     1362                                        content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    13581363                                        accordionSection.addClass( 'current-panel' );
    13591364                                        overlay.addClass( 'in-sub-panel' );
    13601365                                        container.scrollTop( 0 );
    1361                                         if ( args.completeCallback ) {
    1362                                                 args.completeCallback();
    1363                                         }
     1366                                        _.defer( function() {
     1367                                                panel._recalculateTopMargin();
     1368                                                topPanel.attr( 'tabindex', '-1' );
     1369                                                backBtn.attr( 'tabindex', '0' );
     1370                                        });
     1371                                        _.delay( function() {
     1372                                                backBtn.focus();
     1373                                                if ( args.completeCallback ) {
     1374                                                        args.completeCallback();
     1375                                                }
     1376                                        }, 180 );
    13641377                                } );
    1365                                 topPanel.attr( 'tabindex', '-1' );
    1366                                 backBtn.attr( 'tabindex', '0' );
    1367                                 backBtn.focus();
    1368                                 panel._recalculateTopMargin();
    13691378                        } else {
    13701379                                siblings.removeClass( 'open' );
    13711380                                accordionSection.removeClass( 'current-panel' );

  • src/wp-admin/js/customize-controls.js 

    From f0266c082fee227cf81c7d8c775e68449fe7102b Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@xwp.co>
Date: Sat, 5 Mar 2016 16:58:51 +0100
Subject: [PATCH 5/9] Revert c00e5ea and remove `_.defer` as it seems not be
 needed now.

---
 src/wp-admin/js/customize-controls.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index b945ce2..dbda12b 100644
    a b  
    648648                                overlay = section.container.closest( '.wp-full-overlay' ),
    649649                                backBtn = section.container.find( '.customize-section-back' ),
    650650                                sectionTitle = section.container.find( '.accordion-section-title' ).first(),
    651                                 resizeContentHeight, expand;
     651                                headerActionsHeight = $( '#customize-header-actions' ).height(),
     652                                resizeContentHeight, expand, position, scroll;
    652653
    653654                        if ( expanded && ! section.container.hasClass( 'open' ) ) {
    654655
    … …  
    670671                                        expand = function() {
    671672                                                section.container.addClass( 'open' );
    672673                                                overlay.addClass( 'section-open' );
     674                                                position = content.offset().top;
     675                                                scroll = container.scrollTop();
     676                                                content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    673677                                                resizeContentHeight();
    674678                                                sectionTitle.attr( 'tabindex', '-1' );
    675679                                                backBtn.attr( 'tabindex', '0' );
    … …  
    13631367                                        accordionSection.addClass( 'current-panel' );
    13641368                                        overlay.addClass( 'in-sub-panel' );
    13651369                                        container.scrollTop( 0 );
    1366                                         _.defer( function() {
    1367                                                 panel._recalculateTopMargin();
    1368                                                 topPanel.attr( 'tabindex', '-1' );
    1369                                                 backBtn.attr( 'tabindex', '0' );
    1370                                         });
     1370                                        topPanel.attr( 'tabindex', '-1' );
     1371                                        backBtn.attr( 'tabindex', '0' );
     1372                                        panel._recalculateTopMargin();
    13711373                                        _.delay( function() {
    13721374                                                backBtn.focus();
    13731375                                                if ( args.completeCallback ) {

  • src/wp-admin/css/customize-controls.css 

    From 89591f9e3c3ae42b6b1c40b350f30c51c90892fa Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@xwp.co>
Date: Sun, 6 Mar 2016 22:44:00 +0100
Subject: [PATCH 6/9] Remove vertical gap below list of panels when there is a
 lot of panels registered.

---
 src/wp-admin/css/customize-controls.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index c3b6e01..84e29f3 100644
    a b h3.customize-section-title { 
    428428.in-sub-panel #customize-theme-controls > ul > .accordion-section {
    429429        left: -300px;
    430430        width: 300px;
     431        height: 0;
    431432}
    432433
    433434.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
    434435        width: 100%;
     436        height: auto;
    435437}
    436438
    437439#customize-theme-controls .control-section.current-panel {

  • src/wp-admin/css/customize-controls.css 

    From b474bddd16a29b5b0b499a10d00028cce0da1052 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <ryan.kienstra@xwp.co>
Date: Mon, 7 Mar 2016 04:48:22 -0300
Subject: [PATCH 7/9] Customize : Set height to 0 for all sections in root
 panel that aren't open.

Before, non-open sections still took up space in the DOM.
And they caused problems with the calculation of the margin-top value.
So set height to 0 for all sections, and auto for open section.

Fixes #34344.
---
 src/wp-admin/css/customize-controls.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 84e29f3..90e006a 100644
    a b h3.customize-section-title { 
    461461        overflow-y: hidden;
    462462}
    463463
     464.wp-full-overlay.section-open #customize-theme-controls > ul > .accordion-section {
     465        height: 0;
     466}
     467
     468.wp-full-overlay.section-open #customize-theme-controls > ul > .accordion-section.open {
     469        height: auto;
     470}
     471
    464472.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
    465473        visibility: visible;
    466474}

  • src/wp-admin/js/customize-controls.js 

    From 81b7b76a7c0b6d9bf4e5ee7482efa66cd6cca554 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@xwp.co>
Date: Thu, 10 Mar 2016 14:48:05 +0100
Subject: [PATCH 8/9] Fix `focus()` inside widget customize control (try to
 focus on form elements first, then on anchors and other elements).

---
 src/wp-admin/js/customize-controls.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index dbda12b..9be6b2b 100644
    a b  
    8181                construct = this;
    8282                params = params || {};
    8383                focus = function () {
    84                         var focusContainer;
     84                        var focusContainer, focusElement;
    8585                        if ( construct.extended( api.Panel ) && construct.expanded && construct.expanded() ) {
    8686                                focusContainer = construct.container.find( 'ul.control-panel-content' );
    8787                        } else if ( construct.extended( api.Section ) && construct.expanded && construct.expanded() ) {
    … …  
    9191                        }
    9292
    9393                        // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
    94                         focusContainer.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first().focus();
     94                        focusElement = focusContainer.find( 'input, select, textarea, button' ).filter( ':visible' ).first();
     95                        // Focus on objects, links and other element only if no form element/input was found
     96                        if ( 0 === focusElement.length ) {
     97                                focusElement = focusContainer.find( 'object, a[href], [tabindex]' ).filter( ':visible' ).first();
     98                        }
     99                        focusElement.focus();
     100
    95101                };
    96102                if ( params.completeCallback ) {
    97103                        completeCallback = params.completeCallback;

  • src/wp-admin/js/customize-nav-menus.js 

    From 7f607e7c0882ab155cff072ec6b6c7ebd309c962 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@xwp.co>
Date: Sat, 19 Mar 2016 12:26:09 +0100
Subject: [PATCH 9/9] Try to refocus with delay on nav control in case no
 element was :visible initially (edge-case scenario; see #35947).

---
 src/wp-admin/js/customize-nav-menus.js | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index cad39c6..c8e95b3 100644
    a b  
    14731473                        control.expandControlSection();
    14741474
    14751475                        params.completeCallback = function() {
    1476                                 var focusable;
     1476                                var tryFocus;
     1477
     1478                                tryFocus = function() {
     1479                                        var focusable;
     1480                                       
     1481                                        // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
     1482                                        focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
     1483                                       
     1484                                        if ( 0 === focusable.length ) {
     1485                                                return false;
     1486                                        }
     1487
     1488                                        focusable.first().focus();
    14771489
    1478                                 // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
    1479                                 focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
    1480                                 focusable.first().focus();
     1490                                        if ( originalCompleteCallback ) {
     1491                                                originalCompleteCallback();
     1492                                        }
     1493
     1494                                        return true;
     1495                                };
    14811496
    1482                                 if ( originalCompleteCallback ) {
    1483                                         originalCompleteCallback();
     1497                                if ( ! tryFocus() ) {
     1498                                        _.delay( tryFocus, 180 );
    14841499                                }
    14851500                        };
    14861501