<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[38648] trunk: Customize: Re-architect and harden panel/section UI logic.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/38648">38648</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/38648","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>westonruter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-09-23 22:22:09 +0000 (Fri, 23 Sep 2016)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Customize: Re-architect and harden panel/section UI logic.
Removes contents for sections and panels from being logically nested (in the DOM) in order to eliminate many issues related to using `margin-top` hacks. The element containing the link to expand the content element for panels and sections is now a sibling element to its content element: the content is removed from being nested at initialization. The content element is now available in a `contentContainer` property whereas the head element (containing the link to open the construct) is in a `headContainer` property. The existing `container` property is now a jQuery collection that contains both of these elements. Since the head element is no longer in an ancestor element to the `content` element, the `aria-owns` property is now used to maintain the relationship between the `headContainer` and the `contentContainer`. These changes are also accompanied by an improvement to the animation performance for the sliding panes.
Props delawski, celloexpressions.
Fixes <a href="https://core.trac.wordpress.org/ticket/34391">#34391</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/34344">#34344</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/35947">#35947</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadmincsscustomizenavmenuscss">trunk/src/wp-admin/css/customize-nav-menus.css</a></li>
<li><a href="#trunksrcwpadmincustomizephp">trunk/src/wp-admin/customize.php</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminjscustomizenavmenusjs">trunk/src/wp-admin/js/customize-nav-menus.js</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizecontrolsjs">trunk/tests/qunit/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizewidgetsjs">trunk/tests/qunit/wp-admin/js/customize-widgets.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/src/wp-admin/css/common.css 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3367,7 +3367,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section .accordion-section-title {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section .accordion-section-title,
+.customize-pane-child .accordion-section-title {
</ins><span class="cx" style="display: block; padding: 0 10px"> border-left: none;
</span><span class="cx" style="display: block; padding: 0 10px"> border-right: none;
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 10px 10px 11px 14px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3375,7 +3376,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section .accordion-section-title:after {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section .accordion-section-title:after,
+.customize-pane-child .accordion-section-title:after {
</ins><span class="cx" style="display: block; padding: 0 10px"> top: 11px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/src/wp-admin/css/customize-controls.css 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -77,8 +77,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 24px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-controls .control-section .customize-section-title h3,
-#customize-controls .control-section h3.customize-section-title,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-pane-child .customize-section-title h3,
+#customize-controls .customize-pane-child h3.customize-section-title,
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-info .panel-title {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 200;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -229,6 +229,103 @@
</span><span class="cx" style="display: block; padding: 0 10px"> box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-info,
+#customize-theme-controls .customize-pane-parent,
+#customize-theme-controls .customize-pane-child {
+ overflow: visible;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
+}
+
+#customize-info,
+#customize-theme-controls .customize-pane-parent {
+ position: relative;
+ visibility: visible;
+ height: auto;
+ max-height: none;
+ overflow: auto;
+ -webkit-transform: none;
+ -ms-transform: none;
+ transform: none;
+}
+
+#customize-theme-controls .customize-pane-child {
+ position: absolute;
+ top: 0;
+ left: 0;
+ visibility: hidden;
+ height: 0;
+ max-height: none;
+ overflow: hidden;
+ -webkit-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+}
+
+#customize-theme-controls .customize-pane-child.open,
+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
+ -webkit-transform: none;
+ -ms-transform: none;
+ transform: none;
+}
+
+#customize-theme-controls .customize-themes-panel.customize-pane-child,
+.section-open #customize-theme-controls .customize-pane-parent,
+.in-sub-panel #customize-theme-controls .customize-pane-parent,
+.section-open #customize-info,
+.in-sub-panel #customize-info,
+.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
+.in-themes-panel #customize-theme-controls .customize-pane-parent,
+.in-themes-panel #customize-info {
+ visibility: hidden;
+ height: 0;
+ overflow: hidden;
+ -webkit-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+}
+
+.section-open #customize-theme-controls .customize-pane-parent.busy,
+.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
+.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
+.section-open #customize-info.busy,
+.in-sub-panel #customize-info.busy,
+.in-themes-panel #customize-info.busy,
+.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-pane-child.open,
+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-pane-child.busy {
+ visibility: visible;
+ height: auto;
+ overflow: auto;
+}
+
+.in-themes-panel #customize-theme-controls .customize-pane-parent,
+.in-themes-panel #customize-info {
+ -webkit-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+}
+
+#customize-theme-controls .customize-pane-child.accordion-section-content,
+#customize-theme-controls .customize-pane-child.accordion-sub-container {
+ display: block;
+ overflow-x: hidden;
+}
+
+#customize-theme-controls .customize-pane-child.accordion-section-content {
+ padding: 12px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-section-description-container {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 15px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -268,39 +365,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #555;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-theme-controls {
- position: relative;
- left: 0;
- -webkit-transition: .18s left ease-in-out;
- transition: .18s left ease-in-out;
-}
-
-.ios #customize-theme-controls {
- -webkit-transition: left 0s;
- transition: left 0s;
-}
-
-.section-open #customize-info,
-.section-open #customize-theme-controls {
- left: -100%;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .accordion-sub-container.control-panel-content {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- left: 100%;
</del><span class="cx" style="display: block; padding: 0 10px"> top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- -webkit-transition: left ease-in-out .18s;
- transition: left ease-in-out .18s;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.ios .accordion-sub-container.control-panel-content {
- -webkit-transition: left 0s;
- transition: left 0s;
-}
-
-.accordion-sub-container.control-panel-content.animating {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.accordion-sub-container.control-panel-content.busy {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -343,20 +415,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
- transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+ transition: color .1s ease-in-out, background .1s ease-in-out;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-section-back {
</span><span class="cx" style="display: block; padding: 0 10px"> height: 74px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.ios .customize-panel-back,
-.ios .customize-section-back {
- -webkit-transition: left 0s;
- transition: left 0s;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .ios .customize-panel-back {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -423,63 +489,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: 62px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-info,
-#customize-theme-controls > ul > .accordion-section {
- position: relative;
- left: 0;
- -webkit-transition: left ease-in-out .18s;
- transition: left ease-in-out .18s;
-}
-
-.ios #customize-info,
-.ios #customize-theme-controls > ul > .accordion-section {
- -webkit-transition: left 0s;
- transition: left 0s;
-}
-
-.in-sub-panel #customize-info,
-.in-sub-panel #customize-theme-controls > ul > .accordion-section {
- left: -100%;
- width: 100%;
-}
-
-.in-sub-panel #customize-theme-controls .accordion-section.current-panel {
- width: 100%;
-}
-
-#customize-theme-controls .control-section.current-panel {
- padding: 0;
-}
-
-#customize-theme-controls .control-section > h3.accordion-section-title {
- position: relative;
- left: 0;
-}
-
-#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
- left: -354px;
- -webkit-transition: left ease-in-out .18s;
- transition: left ease-in-out .18s;
-}
-
-.ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
- -webkit-transition: left 0s;
- transition: left 0s;
-}
-
-.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
- visibility: hidden;
- overflow-y: hidden;
-}
-
-.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
- visibility: visible;
-}
-
-.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
- overflow-y: auto;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> p.customize-section-description {
</span><span class="cx" style="display: block; padding: 0 10px"> font-style: normal;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 22px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1005,26 +1014,27 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .control-section-themes > .accordion-section-title {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 15px 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 0 0 15px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-themes-panel .accordion-section-title {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel .accordion-section-title {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 15px -8px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-themes .accordion-section-title {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section-themes .accordion-section-title,
+#customize-controls .customize-themes-panel .accordion-section-title {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-right: 100px; /* Space for the button */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-themes .accordion-section-title span.customize-action,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section-themes .accordion-section-title span.customize-action,
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-section-title span.customize-action {
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 400;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-themes .accordion-section-title .change-theme,
-.control-section-themes .accordion-section-title .customize-theme {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section-themes .accordion-section-title .change-theme,
+#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 50%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1032,12 +1042,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 400;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-themes .accordion-section-title:before {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .control-section-themes .accordion-section-title:before {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-themes-panel {
- display: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 0 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> background: #f1f1f1;
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-box-sizing: border-box;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1045,7 +1054,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> box-sizing: border-box;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-themes-panel .accordion-section-title:first-child {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel .accordion-section-title:first-child {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1054,14 +1063,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: 600;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.customize-themes-panel > h2 {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-controls .customize-themes-panel > h2 {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 15px 8px 0 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section.open .customize-themes-panel {
- display: block;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> #customize-theme-controls .customize-themes-panel .accordion-section-content {
</span><span class="cx" style="display: block; padding: 0 10px"> background: transparent;
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1107,27 +1112,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#accordion-section-themes .accordion-section-title:after {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section-themes .accordion-section-title:after,
+.customize-themes-panel .accordion-section-title:after {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
- left: 0;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .customize-themes-panel.control-panel-content {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- position: absolute;
- left: -100%;
- top: 0;
- width: 100%;
</del><span class="cx" style="display: block; padding: 0 10px"> border-top: 1px solid #ddd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.in-themes-panel #customize-info,
-.in-themes-panel #customize-theme-controls > ul > .accordion-section {
- left: 100%;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /* Details View */
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-customizer .theme-overlay {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1161,10 +1154,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
- overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .ie8 .wp-customizer .theme-overlay .theme-header,
</span><span class="cx" style="display: block; padding: 0 10px"> .ie8 .wp-customizer .theme-overlay .theme-about,
</span><span class="cx" style="display: block; padding: 0 10px"> .ie8 .wp-customizer .theme-overlay .theme-actions {
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizenavmenuscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-nav-menus.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-nav-menus.css 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/src/wp-admin/css/customize-nav-menus.css 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -381,15 +381,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
</span><span class="cx" style="display: block; padding: 0 10px"> .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-nav_menu .menu .menu-item-edit-active {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section-nav_menu.menu .menu-item-edit-active {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-nav_menu .menu .sortable-placeholder {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section-nav_menu.menu .sortable-placeholder {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 1px;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: -webkit-calc(100% - 2px);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -403,7 +403,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> float: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpadmincustomizephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/customize.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/customize.php 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/src/wp-admin/customize.php 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -142,7 +142,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="customize-theme-controls">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <ul><?php // Panels and sections are managed here via JavaScript ?></ul>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/src/wp-admin/js/customize-controls.js 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
</span><span class="cx" style="display: block; padding: 0 10px"> (function( exports, $ ){
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var Container, focus, api = wp.customize;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var Container, focus, normalizedTransitionendEventName, api = wp.customize;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * A Customizer Setting.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -101,10 +101,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> params = params || {};
</span><span class="cx" style="display: block; padding: 0 10px"> focus = function () {
</span><span class="cx" style="display: block; padding: 0 10px"> var focusContainer;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( construct.extended( api.Panel ) && construct.expanded && construct.expanded() ) {
- focusContainer = construct.container.find( 'ul.control-panel-content' );
- } else if ( construct.extended( api.Section ) && construct.expanded && construct.expanded() ) {
- focusContainer = construct.container.find( 'ul.accordion-section-content' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) {
+ focusContainer = construct.contentContainer;
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> focusContainer = construct.container;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -188,6 +186,32 @@
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Return browser supported `transitionend` event name.
+ *
+ * @since 4.7.0
+ *
+ * @returns {string|null} Normalized `transitionend` event name or null if CSS transitions are not supported.
+ */
+ normalizedTransitionendEventName = (function () {
+ var el, transitions, prop;
+ el = document.createElement( 'div' );
+ transitions = {
+ 'transition' : 'transitionend',
+ 'OTransition' : 'oTransitionEnd',
+ 'MozTransition' : 'transitionend',
+ 'WebkitTransition': 'webkitTransitionEnd'
+ };
+ prop = _.find( _.keys( transitions ), function( prop ) {
+ return ! _.isUndefined( el.style[ prop ] );
+ } );
+ if ( prop ) {
+ return transitions[ prop ];
+ } else {
+ return null;
+ }
+ })();
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Base class for Panel and Section.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.1.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -238,6 +262,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 0 === container.container.length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> container.container = $( container.getContainer() );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container.headContainer = container.container;
+ container.contentContainer = container.getContent();
+ container.container = container.container.add( container.contentContainer );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> container.deferred = {
</span><span class="cx" style="display: block; padding: 0 10px"> embedded: new $.Deferred()
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -325,7 +352,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} args.completeCallback
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> onChangeActive: function( active, args ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var duration, construct = this, expandedOtherPanel;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var construct = this,
+ headContainer = construct.headContainer,
+ duration, expandedOtherPanel;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( args.unchanged ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -352,31 +382,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! $.contains( document, construct.container[0] ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! $.contains( document, headContainer ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- construct.container.toggle( active );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ headContainer.toggle( active );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } else if ( active ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- construct.container.stop( true, true ).slideDown( duration, args.completeCallback );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ headContainer.stop( true, true ).slideDown( duration, args.completeCallback );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( construct.expanded() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> construct.collapse({
</span><span class="cx" style="display: block; padding: 0 10px"> duration: duration,
</span><span class="cx" style="display: block; padding: 0 10px"> completeCallback: function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle.
- if ( expandedOtherPanel ) {
- expandedOtherPanel._recalculateTopMargin();
- }
</del><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -483,6 +508,66 @@
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Animate container state change if transitions are supported by the browser.
+ *
+ * @since 4.7.0
+ *
+ * @param {function} completeCallback Function to be called after transition is completed.
+ * @returns {void}
+ * @private
+ */
+ _animateChangeExpanded: function( completeCallback ) {
+ // Return if CSS transitions are not supported.
+ if ( ! normalizedTransitionendEventName ) {
+ if ( completeCallback ) {
+ completeCallback();
+ }
+ return;
+ }
+
+ var construct = this,
+ content = construct.contentContainer,
+ overlay = content.closest( '.wp-full-overlay' ),
+ elements, transitionEndCallback;
+
+ // Determine set of elements that are affected by the animation.
+ elements = overlay.add( content );
+ if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) {
+ elements = elements.add( '#customize-info, .customize-pane-parent' );
+ }
+
+ // Handle `transitionEnd` event.
+ transitionEndCallback = function( e ) {
+ if ( 2 !== e.eventPhase || ! $( e.target ).is( content ) ) {
+ return;
+ }
+ content.off( normalizedTransitionendEventName, transitionEndCallback );
+ elements.removeClass( 'busy' );
+ if ( completeCallback ) {
+ completeCallback();
+ }
+ };
+ content.on( normalizedTransitionendEventName, transitionEndCallback );
+ elements.addClass( 'busy' );
+
+ // Prevent screen flicker when pane has been scrolled before expanding.
+ _.defer( function() {
+ var container = content.closest( '.wp-full-overlay-sidebar-content' ),
+ currentScrollTop = container.scrollTop(),
+ previousScrollTop = content.data( 'previous-scrollTop' ) || 0,
+ expanded = construct.expanded();
+
+ if ( expanded && 0 < currentScrollTop ) {
+ content.css( 'top', currentScrollTop + 'px' );
+ content.data( 'previous-scrollTop', currentScrollTop );
+ } else if ( ! expanded && 0 < currentScrollTop + previousScrollTop ) {
+ content.css( 'top', previousScrollTop - currentScrollTop + 'px' );
+ container.scrollTop( previousScrollTop );
+ }
+ } );
+ },
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Bring the container into view and then expand this and bring it into view
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} [params]
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -507,6 +592,39 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return '<li></li>';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
+
+ /**
+ * Find content element which is displayed when the section is expanded.
+ *
+ * After a construct is initialized, the return value will be available via the `contentContainer` property.
+ * By default the element will be related it to the parent container with `aria-owns` and detached.
+ * Custom panels and sections (such as the `NewMenuSection`) that do not have a sliding pane should
+ * just return the content element without needing to add the `aria-owns` element or detach it from
+ * the container. Such non-sliding pane custom sections also need to override the `onChangeExpanded`
+ * method to handle animating the panel/section into and out of view.
+ *
+ * @since 4.7.0
+ *
+ * @returns {jQuery} Detached content element.
+ */
+ getContent: function() {
+ var construct = this,
+ container = construct.container,
+ content = container.find( '.accordion-section-content, .control-panel-content' ).first(),
+ contentId = 'sub-' + container.attr( 'id' ),
+ ownedElements = contentId,
+ alreadyOwnedElements = container.attr( 'aria-owns' );
+
+ if ( alreadyOwnedElements ) {
+ ownedElements = ownedElements + ' ' + alreadyOwnedElements;
+ }
+ container.attr( 'aria-owns', ownedElements );
+
+ return content.detach().attr( {
+ 'id': contentId,
+ 'class': 'customize-pane-child ' + content.attr( 'class' ) + ' ' + container.attr( 'class' )
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -552,7 +670,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> section.id = id;
</span><span class="cx" style="display: block; padding: 0 10px"> section.panel = new api.Value();
</span><span class="cx" style="display: block; padding: 0 10px"> section.panel.bind( function ( id ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( section.container ).toggleClass( 'control-subsection', !! id );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( section.headContainer ).toggleClass( 'control-subsection', !! id );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> section.panel.set( section.params.panel || '' );
</span><span class="cx" style="display: block; padding: 0 10px"> api.utils.bubbleChildValueChanges( section, [ 'panel' ] );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -569,7 +687,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.1.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> embed: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var section = this, inject;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var inject,
+ section = this,
+ container = $( '#customize-theme-controls' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Watch for changes to the panel state
</span><span class="cx" style="display: block; padding: 0 10px"> inject = function ( panelId ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -579,31 +699,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> api.panel( panelId, function ( panel ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // The panel has been registered, wait for it to become ready/initialized
</span><span class="cx" style="display: block; padding: 0 10px"> panel.deferred.embedded.done( function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- parentContainer = panel.container.find( 'ul:first' );
- if ( ! section.container.parent().is( parentContainer ) ) {
- parentContainer.append( section.container );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ parentContainer = panel.contentContainer;
+ if ( ! section.headContainer.parent().is( parentContainer ) ) {
+ parentContainer.append( section.headContainer );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
+ container.append( section.contentContainer );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> section.deferred.embedded.resolve();
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> // There is no panel, so embed the section in the root of the customizer
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- parentContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
- if ( ! section.container.parent().is( parentContainer ) ) {
- parentContainer.append( section.container );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
+ if ( ! section.headContainer.parent().is( parentContainer ) ) {
+ parentContainer.append( section.headContainer );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
+ container.append( section.contentContainer );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> section.deferred.embedded.resolve();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> section.panel.bind( inject );
</span><span class="cx" style="display: block; padding: 0 10px"> inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- section.deferred.embedded.done(function() {
- // Fix the top margin after reflow.
- api.bind( 'pane-contents-reflowed', _.debounce( function() {
- section._recalculateTopMargin();
- }, 100 ) );
- });
</del><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -669,50 +788,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> onChangeExpanded: function ( expanded, args ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var section = this,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
- content = section.container.find( '.accordion-section-content' ),
- overlay = section.container.closest( '.wp-full-overlay' ),
- backBtn = section.container.find( '.customize-section-back' ),
- sectionTitle = section.container.find( '.accordion-section-title' ).first(),
- headerActionsHeight = $( '#customize-header-actions' ).height(),
- resizeContentHeight, expand, position, scroll;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ),
+ content = section.contentContainer,
+ overlay = section.headContainer.closest( '.wp-full-overlay' ),
+ backBtn = content.find( '.customize-section-back' ),
+ sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
+ expand;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( expanded && ! section.container.hasClass( 'open' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( expanded && ! content.hasClass( 'open' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( args.unchanged ) {
</span><span class="cx" style="display: block; padding: 0 10px"> expand = args.completeCallback;
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- container.scrollTop( 0 );
- resizeContentHeight = function() {
- var matchMedia, offset;
- matchMedia = window.matchMedia || window.msMatchMedia;
- offset = 90; // 45px for customize header actions + 45px for footer actions.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ expand = $.proxy( function() {
+ section._animateChangeExpanded( function() {
+ sectionTitle.attr( 'tabindex', '-1' );
+ backBtn.attr( 'tabindex', '0' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // No footer on small screens.
- if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
- offset = 45;
- }
- content.css( 'height', ( window.innerHeight - offset ) );
- };
- expand = function() {
- section.container.addClass( 'open' );
- overlay.addClass( 'section-open' );
- position = content.offset().top;
- scroll = container.scrollTop();
- content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
- resizeContentHeight();
- sectionTitle.attr( 'tabindex', '-1' );
- backBtn.attr( 'tabindex', '0' );
- backBtn.focus();
- if ( args.completeCallback ) {
- args.completeCallback();
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ backBtn.focus();
+ content.css( 'top', '' );
+ container.scrollTop( 0 );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Fix the height after browser resize.
- $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( args.completeCallback ) {
+ args.completeCallback();
+ }
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- setTimeout( _.bind( section._recalculateTopMargin, section ), 0 );
- };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ content.addClass( 'open' );
+ overlay.addClass( 'section-open' );
+ }, this );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! args.allowMultiple ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -735,42 +839,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> expand();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- } else if ( ! expanded && section.container.hasClass( 'open' ) ) {
- section.container.removeClass( 'open' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } else if ( ! expanded && content.hasClass( 'open' ) ) {
+ section._animateChangeExpanded( function() {
+ backBtn.attr( 'tabindex', '-1' );
+ sectionTitle.attr( 'tabindex', '0' );
+
+ sectionTitle.focus();
+ content.css( 'top', '' );
+
+ if ( args.completeCallback ) {
+ args.completeCallback();
+ }
+ } );
+
+ content.removeClass( 'open' );
</ins><span class="cx" style="display: block; padding: 0 10px"> overlay.removeClass( 'section-open' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content.css( 'margin-top', '' );
- container.scrollTop( 0 );
- backBtn.attr( 'tabindex', '-1' );
- sectionTitle.attr( 'tabindex', '0' );
- sectionTitle.focus();
- if ( args.completeCallback ) {
- args.completeCallback();
- }
- $( window ).off( 'resize.customizer-section' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- },
-
- /**
- * Recalculate the top margin.
- *
- * @since 4.4.0
- * @private
- */
- _recalculateTopMargin: function() {
- var section = this, content, offset, headerActionsHeight;
- content = section.container.find( '.accordion-section-content' );
- if ( 0 === content.length ) {
- return;
- }
- headerActionsHeight = $( '#customize-header-actions' ).height();
- offset = ( content.offset().top - headerActionsHeight );
- if ( 0 < offset ) {
- content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
- }
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -948,18 +1037,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Note: there is a second argument 'args' passed
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var position, scroll,
- panel = this,
- section = panel.container.closest( '.accordion-section' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var panel = this,
+ section = panel.contentContainer,
</ins><span class="cx" style="display: block; padding: 0 10px"> overlay = section.closest( '.wp-full-overlay' ),
</span><span class="cx" style="display: block; padding: 0 10px"> container = section.closest( '.wp-full-overlay-sidebar-content' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- siblings = container.find( '.open' ),
</del><span class="cx" style="display: block; padding: 0 10px"> customizeBtn = section.find( '.customize-theme' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- changeBtn = section.find( '.change-theme' ),
- content = section.find( '.control-panel-content' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ changeBtn = panel.headContainer.find( '.change-theme' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( expanded ) {
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( expanded && ! section.hasClass( 'current-panel' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> // Collapse any sibling sections/panels
</span><span class="cx" style="display: block; padding: 0 10px"> api.section.each( function ( otherSection ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( otherSection !== panel ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -970,48 +1055,41 @@
</span><span class="cx" style="display: block; padding: 0 10px"> otherPanel.collapse( { duration: 0 } );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content.show( 0, function() {
- position = content.offset().top;
- scroll = container.scrollTop();
- content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
- section.addClass( 'current-panel' );
- overlay.addClass( 'in-themes-panel' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel._animateChangeExpanded( function() {
+ changeBtn.attr( 'tabindex', '-1' );
+ customizeBtn.attr( 'tabindex', '0' );
+
+ customizeBtn.focus();
+ section.css( 'top', '' );
</ins><span class="cx" style="display: block; padding: 0 10px"> container.scrollTop( 0 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
- panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- customizeBtn.focus();
- } else {
- siblings.removeClass( 'open' );
- section.removeClass( 'current-panel' );
- overlay.removeClass( 'in-themes-panel' );
- panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
- content.delay( 180 ).hide( 0, function() {
- content.css( 'margin-top', 'inherit' ); // Reset
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ overlay.addClass( 'in-themes-panel' );
+ section.addClass( 'current-panel' );
+
+ } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
+ panel._animateChangeExpanded( function() {
+ changeBtn.attr( 'tabindex', '0' );
+ customizeBtn.attr( 'tabindex', '-1' );
+
+ changeBtn.focus();
+ section.css( 'top', '' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- customizeBtn.attr( 'tabindex', '0' );
- changeBtn.focus();
- container.scrollTop( 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ overlay.removeClass( 'in-themes-panel' );
+ section.removeClass( 'current-panel' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Recalculate the top margin.
- *
- * @since 4.4.0
- * @private
- */
- _recalculateTopMargin: function() {
- api.Panel.prototype._recalculateTopMargin.call( this );
- },
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Render control's screenshot if the control comes into view.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.2.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1237,17 +1315,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> embed: function () {
</span><span class="cx" style="display: block; padding: 0 10px"> var panel = this,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- parentContainer = $( '#customize-theme-controls > ul' ); // @todo This should be defined elsewhere, and to be configurable
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container = $( '#customize-theme-controls' ),
+ parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! panel.container.parent().is( parentContainer ) ) {
- parentContainer.append( panel.container );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! panel.headContainer.parent().is( parentContainer ) ) {
+ parentContainer.append( panel.headContainer );
+ }
+ if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
+ container.append( panel.contentContainer );
</ins><span class="cx" style="display: block; padding: 0 10px"> panel.renderContent();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- api.bind( 'pane-contents-reflowed', _.debounce( function() {
- panel._recalculateTopMargin();
- }, 100 ) );
-
</del><span class="cx" style="display: block; padding: 0 10px"> panel.deferred.embedded.resolve();
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1258,7 +1336,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var meta, panel = this;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Expand/Collapse accordion sections on click.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1289,7 +1367,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault(); // Keep this AFTER the key filter above
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- meta = panel.container.find( '.panel-meta' );
</del><span class="cx" style="display: block; padding: 0 10px"> if ( meta.hasClass( 'cannot-expand' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1359,20 +1436,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Note: there is a second argument 'args' passed
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var position, scroll,
- panel = this,
- accordionSection = panel.container.closest( '.accordion-section' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var panel = this,
+ accordionSection = panel.contentContainer,
</ins><span class="cx" style="display: block; padding: 0 10px"> overlay = accordionSection.closest( '.wp-full-overlay' ),
</span><span class="cx" style="display: block; padding: 0 10px"> container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- siblings = container.find( '.open' ),
- topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
- backBtn = accordionSection.find( '.customize-panel-back' ),
- panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
- content = accordionSection.find( '.control-panel-content' ),
- headerActionsHeight = $( '#customize-header-actions' ).height();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ topPanel = panel.headContainer.find( '.accordion-section-title' ),
+ backBtn = accordionSection.find( '.customize-panel-back' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( expanded ) {
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> // Collapse any sibling sections/panels
</span><span class="cx" style="display: block; padding: 0 10px"> api.section.each( function ( section ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( panel.id !== section.panel() ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1385,54 +1456,41 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content.show( 0, function() {
- content.parent().show();
- position = content.offset().top;
- scroll = container.scrollTop();
- content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
- accordionSection.addClass( 'current-panel' );
- overlay.addClass( 'in-sub-panel' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel._animateChangeExpanded( function() {
+ topPanel.attr( 'tabindex', '-1' );
+ backBtn.attr( 'tabindex', '0' );
+
+ backBtn.focus();
+ accordionSection.css( 'top', '' );
</ins><span class="cx" style="display: block; padding: 0 10px"> container.scrollTop( 0 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- topPanel.attr( 'tabindex', '-1' );
- backBtn.attr( 'tabindex', '0' );
- backBtn.focus();
- panel._recalculateTopMargin();
- } else {
- siblings.removeClass( 'open' );
- accordionSection.removeClass( 'current-panel' );
- overlay.removeClass( 'in-sub-panel' );
- content.delay( 180 ).hide( 0, function() {
- content.css( 'margin-top', 'inherit' ); // Reset
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ overlay.addClass( 'in-sub-panel' );
+ accordionSection.addClass( 'current-panel' );
+
+ } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
+ panel._animateChangeExpanded( function() {
+ topPanel.attr( 'tabindex', '0' );
+ backBtn.attr( 'tabindex', '-1' );
+
+ topPanel.focus();
+ accordionSection.css( 'top', '' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( args.completeCallback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> args.completeCallback();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- topPanel.attr( 'tabindex', '0' );
- backBtn.attr( 'tabindex', '-1' );
- panelTitle.focus();
- container.scrollTop( 0 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ overlay.removeClass( 'in-sub-panel' );
+ accordionSection.removeClass( 'current-panel' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Recalculate the top margin.
- *
- * @since 4.4.0
- * @private
- */
- _recalculateTopMargin: function() {
- var panel = this, headerActionsHeight, content, accordionSection;
- headerActionsHeight = $( '#customize-header-actions' ).height();
- accordionSection = panel.container.closest( '.accordion-section' );
- content = accordionSection.find( '.control-panel-content' );
- content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
- },
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Render the panel from its JS template, if it exists.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * The panel's container must already exist in the DOM.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1449,8 +1507,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> template = wp.template( 'customize-panel-default-content' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( template && panel.container ) {
- panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( template && panel.headContainer ) {
+ panel.contentContainer.html( template( panel.params ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1626,7 +1684,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> api.section( sectionId, function ( section ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // Wait for the section to be ready/initialized
</span><span class="cx" style="display: block; padding: 0 10px"> section.deferred.embedded.done( function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- parentContainer = section.container.find( 'ul:first' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! control.container.parent().is( parentContainer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> parentContainer.append( control.container );
</span><span class="cx" style="display: block; padding: 0 10px"> control.renderContent();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3542,7 +3600,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> api.reflowPaneContents = _.bind( function () {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var appendContainer, activeElement, rootContainers, rootNodes = [], wasReflowed = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var appendContainer, activeElement, rootHeadContainers, rootNodes = [], wasReflowed = false;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( document.activeElement ) {
</span><span class="cx" style="display: block; padding: 0 10px"> activeElement = $( document.activeElement );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3551,12 +3609,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Sort the sections within each panel
</span><span class="cx" style="display: block; padding: 0 10px"> api.panel.each( function ( panel ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var sections = panel.sections(),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- sectionContainers = _.pluck( sections, 'container' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ sectionHeadContainers = _.pluck( sections, 'headContainer' );
</ins><span class="cx" style="display: block; padding: 0 10px"> rootNodes.push( panel );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- appendContainer = panel.container.find( 'ul:first' );
- if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ appendContainer = ( panel.contentContainer.is( 'ul' ) ) ? panel.contentContainer : panel.contentContainer.find( 'ul:first' );
+ if ( ! api.utils.areElementListsEqual( sectionHeadContainers, appendContainer.children( '[id]' ) ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> _( sections ).each( function ( section ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- appendContainer.append( section.container );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ appendContainer.append( section.headContainer );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> wasReflowed = true;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3569,7 +3627,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! section.panel() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> rootNodes.push( section );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- appendContainer = section.container.find( 'ul:first' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ appendContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> _( controls ).each( function ( control ) {
</span><span class="cx" style="display: block; padding: 0 10px"> appendContainer.append( control.container );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3580,11 +3638,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Sort the root panels and sections
</span><span class="cx" style="display: block; padding: 0 10px"> rootNodes.sort( api.utils.prioritySort );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- rootContainers = _.pluck( rootNodes, 'container' );
- appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
- if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ rootHeadContainers = _.pluck( rootNodes, 'headContainer' );
+ appendContainer = $( '#customize-theme-controls .customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
+ if ( ! api.utils.areElementListsEqual( rootHeadContainers, appendContainer.children() ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> _( rootNodes ).each( function ( rootNode ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- appendContainer.append( rootNode.container );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ appendContainer.append( rootNode.headContainer );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> wasReflowed = true;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizenavmenusjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-nav-menus.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-nav-menus.js 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/src/wp-admin/js/customize-nav-menus.js 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -851,7 +851,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> api.bind( 'pane-contents-reflowed', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> // Skip menus that have been removed.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! section.container.parent().length ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! section.contentContainer.parent().length ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.menu-item .menu-item-reorder-nav button' ).attr({ 'tabindex': '0', 'aria-hidden': 'false' });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -969,7 +969,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var section = this;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expanded ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wpNavMenu.menuList = section.container.find( '.accordion-section-content:first' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wpNavMenu.menuList = section.contentContainer;
</ins><span class="cx" style="display: block; padding: 0 10px"> wpNavMenu.targetList = wpNavMenu.menuList;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Add attributes needed by wpNavMenu
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1031,8 +1031,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> onChangeExpanded: function( expanded ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var section = this,
</span><span class="cx" style="display: block; padding: 0 10px"> button = section.container.find( '.add-menu-toggle' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content = section.container.find( '.new-menu-section-content' ),
- customizer = section.container.closest( '.wp-full-overlay-sidebar-content' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ content = section.contentContainer,
+ customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( expanded ) {
</span><span class="cx" style="display: block; padding: 0 10px"> button.addClass( 'open' );
</span><span class="cx" style="display: block; padding: 0 10px"> button.attr( 'aria-expanded', 'true' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1045,6 +1045,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> content.slideUp( 'fast' );
</span><span class="cx" style="display: block; padding: 0 10px"> content.find( '.menu-name-field' ).removeClass( 'invalid' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
+
+ /**
+ * Find the content element.
+ *
+ * @since 4.7.0
+ *
+ * @returns {jQuery} Content UL element.
+ */
+ getContent: function() {
+ return this.container.find( 'ul:first' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2001,6 +2012,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> ready: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section = api.section( control.section() ),
</ins><span class="cx" style="display: block; padding: 0 10px"> menuId = control.params.menu_id,
</span><span class="cx" style="display: block; padding: 0 10px"> menu = control.setting(),
</span><span class="cx" style="display: block; padding: 0 10px"> name,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2017,7 +2029,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * being deactivated.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> control.active.validate = function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var value, section = api.section( control.section() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var value;
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( section ) {
</span><span class="cx" style="display: block; padding: 0 10px"> value = section.active();
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2026,7 +2038,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return value;
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.$controlSection = control.container.closest( '.control-section' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.$controlSection = section.headContainer;
</ins><span class="cx" style="display: block; padding: 0 10px"> control.$sectionContent = control.container.closest( '.accordion-section-content' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> this._setupModel();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2300,11 +2312,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var section = control.container.closest( '.accordion-section' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var section = api.section( control.section() ),
</ins><span class="cx" style="display: block; padding: 0 10px"> menuId = control.params.menu_id,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- controlTitle = section.find( '.accordion-section-title' ),
- sectionTitle = section.find( '.customize-section-title h3' ),
- location = section.find( '.menu-in-location' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ controlTitle = section.headContainer.find( '.accordion-section-title' ),
+ sectionTitle = section.contentContainer.find( '.customize-section-title h3' ),
+ location = section.headContainer.find( '.menu-in-location' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> action = sectionTitle.find( '.customize-action' ),
</span><span class="cx" style="display: block; padding: 0 10px"> name = displayNavMenuName( menu.name );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2328,7 +2340,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Update the nav menu name in all location checkboxes.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.find( '.customize-control-checkbox input' ).each( function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.contentContainer.find( '.customize-control-checkbox input' ).each( function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( $( this ).prop( 'checked' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2642,9 +2654,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Focus on the new menu section.
</span><span class="cx" style="display: block; padding: 0 10px"> api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // Fix an issue with extra space at top immediately after creating new menu.
- $( '#menu-to-edit' ).css( 'margin-top', 0 );
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/customize-controls.js 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/tests/qunit/wp-admin/js/customize-controls.js 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -211,9 +211,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> section = wp.customize.section( id );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( ! section.params.content );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! section.container );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( section.container.is( '.control-section.control-section-default' ) );
- ok( 1 === section.container.find( '> .accordion-section-title' ).length );
- ok( 1 === section.container.find( '> .accordion-section-content' ).length );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( !! section.headContainer );
+ ok( !! section.contentContainer );
+ ok( section.container.has( section.headContainer ) );
+ ok( section.container.has( section.contentContainer ) );
+ ok( section.headContainer.is( '.control-section.control-section-default' ) );
+ ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length );
+ ok( section.contentContainer.is( '.accordion-section-content' ) );
+ equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> module( 'Customizer Custom Type (titleless) Section with Template in Fixture' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -225,9 +230,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> section = wp.customize.section( id );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( ! section.params.content );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! section.container );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( !! section.headContainer );
+ ok( !! section.contentContainer );
+ ok( section.container.has( section.headContainer ) );
+ ok( section.container.has( section.contentContainer ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> ok( section.container.is( '.control-section.control-section-titleless' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( 0 === section.container.find( '> .accordion-section-title' ).length );
- ok( 1 === section.container.find( '> .accordion-section-content' ).length );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( 0 === section.headContainer.find( '> .accordion-section-title' ).length );
+ ok( section.contentContainer.is( '.accordion-section-content' ) );
+ equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> module( 'Customizer Custom Type Section Lacking Specific Template' );
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Fixture section has expected content', function () {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -235,9 +245,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> section = wp.customize.section( id );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( ! section.params.content );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! section.container );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( section.container.is( '.control-section.control-section-' + section.params.type ) );
- ok( 1 === section.container.find( '> .accordion-section-title' ).length );
- ok( 1 === section.container.find( '> .accordion-section-content' ).length );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( !! section.headContainer );
+ ok( !! section.contentContainer );
+ ok( section.container.has( section.headContainer ) );
+ ok( section.container.has( section.contentContainer ) );
+ ok( section.headContainer.is( '.control-section.control-section-' + section.params.type ) );
+ ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length );
+ ok( section.contentContainer.is( '.accordion-section-content' ) );
+ equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> module( 'Customizer Section lacking any params' );
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Fixture section has default params supplied', function () {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -270,6 +285,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var panel = wp.customize.panel( 'fixture-panel' );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! panel.params.content );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! panel.container );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( !! panel.headContainer );
+ ok( !! panel.contentContainer );
+ ok( panel.container.has( panel.headContainer ) );
+ ok( panel.container.has( panel.contentContainer ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Fixture panel has section among its sections()', function () {
</span><span class="cx" style="display: block; padding: 0 10px"> var panel = wp.customize.panel( 'fixture-panel' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -304,9 +323,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> panel = wp.customize.panel( id );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( ! panel.params.content );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! panel.container );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( panel.container.is( '.control-panel.control-panel-default' ) );
- ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
- ok( 1 === panel.container.find( '> .control-panel-content' ).length );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( !! panel.headContainer );
+ ok( !! panel.contentContainer );
+ ok( panel.container.has( panel.headContainer ) );
+ ok( panel.container.has( panel.contentContainer ) );
+ ok( panel.headContainer.is( '.control-panel.control-panel-default' ) );
+ ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length );
+ ok( panel.contentContainer.is( '.control-panel-content' ) );
+ equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> module( 'Customizer Custom Type Panel (titleless) with Template in Fixture' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -318,9 +342,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> panel = wp.customize.panel( id );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( ! panel.params.content );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! panel.container );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( panel.container.is( '.control-panel.control-panel-titleless' ) );
- ok( 0 === panel.container.find( '> .accordion-section-title' ).length );
- ok( 1 === panel.container.find( '> .control-panel-content' ).length );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( !! panel.headContainer );
+ ok( !! panel.contentContainer );
+ ok( panel.container.has( panel.headContainer ) );
+ ok( panel.container.has( panel.contentContainer ) );
+ ok( panel.headContainer.is( '.control-panel.control-panel-titleless' ) );
+ ok( 0 === panel.headContainer.find( '> .accordion-section-title' ).length );
+ ok( panel.contentContainer.is( '.control-panel-content' ) );
+ equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> module( 'Customizer Custom Type Panel Lacking Specific Template' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -329,9 +358,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> panel = wp.customize.panel( id );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( ! panel.params.content );
</span><span class="cx" style="display: block; padding: 0 10px"> ok( !! panel.container );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( panel.container.is( '.control-panel.control-panel-' + panel.params.type ) );
- ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
- ok( 1 === panel.container.find( '> .control-panel-content' ).length );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( !! panel.headContainer );
+ ok( !! panel.contentContainer );
+ ok( panel.container.has( panel.headContainer ) );
+ ok( panel.container.has( panel.contentContainer ) );
+ ok( panel.headContainer.is( '.control-panel.control-panel-' + panel.params.type ) );
+ ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length );
+ ok( panel.contentContainer.is( '.control-panel-content' ) );
+ equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> module( 'Customizer Panel lacking any params' );
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Fixture panel has default params supplied', function () {
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizewidgetsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/wp-admin/js/customize-widgets.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/customize-widgets.js 2016-09-23 20:32:48 UTC (rev 38647)
+++ trunk/tests/qunit/wp-admin/js/customize-widgets.js 2016-09-23 22:22:09 UTC (rev 38648)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -58,12 +58,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ok( panel.extended( api.Widgets.WidgetsPanel ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> panel.deferred.embedded.done( function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( 1 === panel.container.find( '.no-widget-areas-rendered-notice' ).length );
- ok( panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( 1 === panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).length );
+ ok( panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> api.section( 'sidebar-widgets-sidebar-1' ).active( true );
</span><span class="cx" style="display: block; padding: 0 10px"> api.control( 'sidebars_widgets[sidebar-1]' ).active( true );
</span><span class="cx" style="display: block; padding: 0 10px"> api.trigger( 'pane-contents-reflowed' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ok( ! panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( ! panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> expect( 4 );
</span></span></pre>
</div>
</div>
</body>
</html>