<!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>[41670] trunk: Customize: Fix `WP_Customize_Date_Time_Control` to be re-usable for plugins and custom settings.</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/41670">41670</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/41670","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>2017-10-02 04:11:50 +0000 (Mon, 02 Oct 2017)</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: Fix `WP_Customize_Date_Time_Control` to be re-usable for plugins and custom settings.
* Allow time fields to be omitted by constructing with `timeIncluded` as `false`.
* Ensure `reportValidity` is only called on a control when it is in an expanded section.
* Rename "ampm" to "meridian".
* Improve accessibility and fix HTML validation and style issues for both the date/time control and the preview link control.
* Fix styling of dropdowns and clean CSS.
* Improve accessibility of nav menus component.
Props westonruter, afercia, sayedwp, melchoyce.
Amends <a href="https://core.trac.wordpress.org/changeset/41626">[41626]</a>.
See <a href="https://core.trac.wordpress.org/ticket/39896">#39896</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/42022">#42022</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<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="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizenavmenusphp">trunk/src/wp-includes/class-wp-customize-nav-menus.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizedatetimecontrolphp">trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php</a></li>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizecontrolsjs">trunk/tests/qunit/wp-admin/js/customize-controls.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<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 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/src/wp-admin/css/customize-controls.css 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -173,27 +173,9 @@
</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"> #customize-controls .date-input:invalid {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-color: red;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: #dc3232;
</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">-.date-time-fields .month-field {
- width: 79px;
-}
-
-.date-time-fields .day-field,
-.date-time-fields .hour-field,
-.date-time-fields .minute-field {
- width: 46px;
-}
-
-.date-time-fields .year-field {
- width: 60px;
-}
-
-.date-time-fields .am-pm-field {
- width: 53px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> #customize-control-changeset_status label {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-top: 10px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-bottom: 10px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -225,7 +207,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-copy-preview-link:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-copy-preview-link:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content: '';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ content: "";
</ins><span class="cx" style="display: block; padding: 0 10px"> height: 28px;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> background: #ffffff;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -250,7 +232,7 @@
</span><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"> text-indent: -999px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: white;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #fff;
</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-control-changeset_preview_link label {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -258,7 +240,7 @@
</span><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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-#customize-control-changeset_preview_link a.preview-control-element {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-control-changeset_preview_link a {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> white-space: nowrap;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -269,10 +251,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> text-decoration: 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-control-changeset_preview_link a.preview-control-element.disabled,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:active,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:focus,
-#customize-control-changeset_preview_link a.preview-control-element.disabled:visited {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#customize-control-changeset_preview_link a.disabled,
+#customize-control-changeset_preview_link a.disabled:active,
+#customize-control-changeset_preview_link a.disabled:focus,
+#customize-control-changeset_preview_link a.disabled:visited {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: black;
</span><span class="cx" style="display: block; padding: 0 10px"> opacity: 0.4;
</span><span class="cx" style="display: block; padding: 0 10px"> cursor: default;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -293,18 +275,38 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding-bottom: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">-.date-time-fields label,
-.date-time-fields .date-time-separator {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control.customize-control-date_time .date-time-fields .date-input,
+.customize-control.customize-control-date_time .date-time-fields .date-time-separator {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-right:5px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-right: 5px;
</ins><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">+.date-time-fields .date-input.month {
+ width: auto;
+ margin: 0;
+}
+
+.date-time-fields .date-input.day,
+.date-time-fields .date-input.hour,
+.date-time-fields .date-input.minute {
+ width: 46px;
+}
+
+.date-time-fields .date-input.year {
+ width: 60px;
+}
+
+.date-time-fields .date-input.meridian {
+ width: auto;
+ margin: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .date-time-fields .date-time-separator {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 2;
</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"> .date-time-fields .time-row {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- padding-top: 12px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 12px;
</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"> .date-time-fields .date-timezone {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1035,7 +1037,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"> .customize-control-dropdown-pages .new-content-item .create-item-input.invalid {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border: 1px solid #f00;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border: 1px solid #dc3232;
</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-control-dropdown-pages .add-new-toggle {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1198,7 +1200,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-control-show_on_front.has-error .customize-control-notifications-container {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top:12px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 12px;
</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">@@ -1383,7 +1385,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> content: '';
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 0; left: 0; bottom: 0; right: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> border: 4px solid #00a0d2;
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 2px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2685,23 +2690,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: 39px;
</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">- .date-time-fields .month-field {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .date-time-fields .date-input.month {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 79px;
</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">- .date-time-fields .day-field,
- .date-time-fields .hour-field,
- .date-time-fields .minute-field {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .date-time-fields .date-input.day,
+ .date-time-fields .date-input.hour,
+ .date-time-fields .date-input.minute {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 55px;
</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">- .date-time-fields .year-field {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .date-time-fields .date-input.year {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 80px;
</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">+ .date-time-fields .date-time-separator,
</ins><span class="cx" style="display: block; padding: 0 10px"> .date-time-fields .date-timezone {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 3.2;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui.wp-customizer .button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 12px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</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 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/src/wp-admin/css/customize-nav-menus.css 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -132,7 +132,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control input.menu-name-field {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 12px 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"> .wp-customizer .menu-item .item-edit {
</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 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/src/wp-admin/js/customize-controls.js 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4929,10 +4929,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> api.DateTimeControl = api.Control.extend({
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- dateInputs: {},
- inputElements: {},
- invalidDate: false,
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Initialize behaviors.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4942,50 +4938,68 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ready: function ready() {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.inputElements = {};
+ control.invalidDate = false;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.dateInputs = control.container.find( '.date-input' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'updateMinutesForHour', 'populateDateInputs' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // @todo This needs https://core.trac.wordpress.org/ticket/37964
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! control.setting ) {
</span><span class="cx" style="display: block; padding: 0 10px"> control.setting = new api.Value();
</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">+ // @todo Should this be? Default should be on client. The default value should be in the setting itself.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! control.setting.get() && control.params.defaultValue ) {
</span><span class="cx" style="display: block; padding: 0 10px"> control.setting.set( control.params.defaultValue );
</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.dateInputs.each( function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.container.find( '.date-input' ).each( function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> var input = $( this ), component, element;
</span><span class="cx" style="display: block; padding: 0 10px"> component = input.data( 'component' );
</span><span class="cx" style="display: block; padding: 0 10px"> element = new api.Element( input );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- element.validate = function( value ) {
- return _.contains( [ 'am', 'pm' ], value ) ? value : parseInt( value, 10 );
- };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'meridian' === component ) {
+ element.validate = function( value ) {
+ if ( 'am' !== value && 'pm' !== value ) {
+ return null;
+ }
+ return value;
+ };
+ } else {
+ element.validate = function( value ) {
+ var val = parseInt( value, 10 );
+ if ( isNaN( val ) ) {
+ return null;
+ }
+ return val;
+ };
+ }
+ element.bind( control.populateSetting );
</ins><span class="cx" style="display: block; padding: 0 10px"> control.inputElements[ component ] = element;
</span><span class="cx" style="display: block; padding: 0 10px"> control.elements.push( element );
</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.dateInputs.on( 'input', control.populateSetting );
</del><span class="cx" style="display: block; padding: 0 10px"> control.inputElements.month.bind( control.updateDaysForMonth );
</span><span class="cx" style="display: block; padding: 0 10px"> control.inputElements.year.bind( control.updateDaysForMonth );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.inputElements.hour.bind( control.updateMinutesForHour );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( control.params.includeTime ) {
+ control.inputElements.hour.bind( control.updateMinutesForHour );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> control.populateDateInputs();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.setting.bind( control.populateDateInputs );
</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"> * Parse datetime string.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.9.0
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {string} datetime Date/Time string. Accepts Y-m-d H:i:s format.
- * @param {boolean} twelveHourFormat If twelve hour format array is required.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ *
+ * @param {string} datetime - Date/Time string. Accepts Y-m-d[ H:i[:s]] format.
</ins><span class="cx" style="display: block; padding: 0 10px"> * @returns {object|null} Returns object containing date components or null if parse error.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- parseDateTime: function parseDateTime( datetime, twelveHourFormat ) {
- var matches, date, midDayHour = 12;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ parseDateTime: function parseDateTime( datetime ) {
+ var control = this, matches, date, midDayHour = 12;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( datetime ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)$/ );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d)(?: (\d\d):(\d\d)(?::(\d\d))?)?$/ );
</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 ( ! matches ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4998,16 +5012,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> year: matches.shift(),
</span><span class="cx" style="display: block; padding: 0 10px"> month: matches.shift(),
</span><span class="cx" style="display: block; padding: 0 10px"> day: matches.shift(),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- hour: matches.shift(),
- minute: matches.shift(),
- second: matches.shift()
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ hour: matches.shift() || '00',
+ minute: matches.shift() || '00',
+ second: matches.shift() || '00'
</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">- if ( twelveHourFormat ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( control.params.includeTime && control.params.twelveHourFormat ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> date.hour = parseInt( date.hour, 10 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- date.ampm = date.hour >= midDayHour ? 'pm' : 'am';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ date.meridian = date.hour >= midDayHour ? 'pm' : 'am';
</ins><span class="cx" style="display: block; padding: 0 10px"> date.hour = date.hour % midDayHour ? String( date.hour % midDayHour ) : String( midDayHour );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- delete date.second;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ delete date.second; // @todo Why only if twelveHourFormat?
</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"> return date;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5020,25 +5034,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {boolean} If date input fields has error.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> validateInputs: function validateInputs() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var control = this, errorMessage;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var control = this, errorMessage, components;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> control.invalidDate = false;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _.each( [ 'day', 'hour', 'year', 'minute' ], function( component ) {
- var element, el, max, min, maxLength, value;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ components = [ 'year', 'day' ];
+ if ( control.params.includeTime ) {
+ components.push( 'hour', 'minute' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _.each( components, function( component ) {
+ var element, el, max, min, value;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! control.invalidDate ) {
</span><span class="cx" style="display: block; padding: 0 10px"> element = control.inputElements[ component ];
</span><span class="cx" style="display: block; padding: 0 10px"> el = element.element.get( 0 );
</span><span class="cx" style="display: block; padding: 0 10px"> max = parseInt( element.element.attr( 'max' ), 10 );
</span><span class="cx" style="display: block; padding: 0 10px"> min = parseInt( element.element.attr( 'min' ), 10 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- maxLength = parseInt( element.element.attr( 'maxlength' ), 10 );
</del><span class="cx" style="display: block; padding: 0 10px"> value = element();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.invalidDate = value > max || value < min || String( value ).length > maxLength;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.invalidDate = value > max || value < min;
</ins><span class="cx" style="display: block; padding: 0 10px"> errorMessage = control.invalidDate ? api.l10n.invalid + ' ' + component : '';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> el.setCustomValidity( errorMessage );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _.result( el, 'reportValidity' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) {
+ _.result( el, 'reportValidity' );
+ }
</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">@@ -5077,7 +5097,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> updateMinutesForHour: function updateMinutesForHour() {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this, maxHours = 24, minuteEl;
</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 ( control.inputElements.ampm ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( control.inputElements.meridian ) {
</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">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5086,11 +5106,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( maxHours === control.inputElements.hour() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> control.inputElements.minute( 0 );
</span><span class="cx" style="display: block; padding: 0 10px"> minuteEl.data( 'default-max', minuteEl.attr( 'max' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- minuteEl.data( 'default-maxlength', minuteEl.attr( 'maxlength' ) );
</del><span class="cx" style="display: block; padding: 0 10px"> minuteEl.attr( 'max', '0' );
</span><span class="cx" style="display: block; padding: 0 10px"> } else if ( minuteEl.data( 'default-max' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> minuteEl.attr( 'max', minuteEl.data( 'default-max' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- minuteEl.attr( 'maxlength', minuteEl.data( 'maxlength' ) );
</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">@@ -5142,8 +5160,11 @@
</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">- hourInTwentyFourHourFormat = control.inputElements.ampm ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.ampm() ) : control.inputElements.hour();
- dateFormat = [ 'year', '-', 'month', '-', 'day', ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ dateFormat = [ 'year', '-', 'month', '-', 'day' ];
+ if ( control.params.includeTime ) {
+ hourInTwentyFourHourFormat = control.inputElements.meridian ? control.convertHourToTwentyFourHourFormat( control.inputElements.hour(), control.inputElements.meridian() ) : control.inputElements.hour();
+ dateFormat = dateFormat.concat( [ ' ', pad( hourInTwentyFourHourFormat, 2 ), ':', 'minute', ':', '00' ] );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> _.each( dateFormat, function( component ) {
</span><span class="cx" style="display: block; padding: 0 10px"> date += control.inputElements[ component ] ? getElementValue( component ) : component;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5167,18 +5188,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Convert hour in twelve hour format to twenty four hour format.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 4.9.0
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {string} hourInTwelveHourFormat Hour in twelve hour format.
- * @param {string} ampm am/pm
- * @return {string} Hour in twenty four hour format.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {string} hourInTwelveHourFormat - Hour in twelve hour format.
+ * @param {string} meridian - Either 'am' or 'pm'.
+ * @returns {string} Hour in twenty four hour format.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, ampm ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, meridian ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var hourInTwentyFourHourFormat, hour, midDayHour = 12;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> hour = parseInt( hourInTwelveHourFormat, 10 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( isNaN( hour ) ) {
+ return '';
+ }
</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 ( 'pm' === ampm && hour < midDayHour ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'pm' === meridian && hour < midDayHour ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> hourInTwentyFourHourFormat = hour + midDayHour;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- } else if ( 'am' === ampm && midDayHour === hour ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } else if ( 'am' === meridian && midDayHour === hour ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> hourInTwentyFourHourFormat = hour - midDayHour;
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> hourInTwentyFourHourFormat = hour;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5196,7 +5220,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> populateDateInputs: function populateDateInputs() {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this, parsed;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- parsed = control.parseDateTime( control.setting.get(), control.params.twelveHourFormat );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ parsed = control.parseDateTime( control.setting.get() );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! parsed ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5245,8 +5269,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> api.PreviewLinkControl = api.Control.extend({
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- previewElements: {},
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Override the templateSelector before embedding the control into the page.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5266,7 +5288,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @returns {void}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> ready: function ready() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var control = this, element, component, node, link, input, button;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var control = this, element, component, node, url, input, button;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> _.bindAll( control, 'updatePreviewLink' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5274,6 +5296,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> control.setting = new api.Value();
</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">+ control.previewElements = {};
+
</ins><span class="cx" style="display: block; padding: 0 10px"> control.container.find( '.preview-control-element' ).each( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> node = $( this );
</span><span class="cx" style="display: block; padding: 0 10px"> component = node.data( 'component' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5282,21 +5306,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> control.elements.push( element );
</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">- link = control.previewElements.link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ url = control.previewElements.url;
</ins><span class="cx" style="display: block; padding: 0 10px"> input = control.previewElements.input;
</span><span class="cx" style="display: block; padding: 0 10px"> button = control.previewElements.button;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> input.link( control.setting );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- link.link( control.setting );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ url.link( control.setting );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- link.bind( function( value ) {
- link.element.attr( 'href', value );
- link.element.attr( 'target', api.settings.changeset.uuid );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ url.bind( function( value ) {
+ url.element.parent().attr( {
+ href: value,
+ target: api.settings.changeset.uuid
+ } );
</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"> api.bind( 'ready', control.updatePreviewLink );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- api.bind( 'change', control.updatePreviewLink );
</del><span class="cx" style="display: block; padding: 0 10px"> api.state( 'saved' ).bind( control.updatePreviewLink );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.state( 'changesetStatus' ).bind( control.updatePreviewLink );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> button.element.on( 'click', function( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5307,8 +5333,8 @@
</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">- link.element.on( 'click', function( event ) {
- if ( link.element.hasClass( 'disabled' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ url.element.parent().on( 'click', function( event ) {
+ if ( $( this ).hasClass( 'disabled' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</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">@@ -5329,12 +5355,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> updatePreviewLink: function updatePreviewLink() {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this, unsavedDirtyValues;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- unsavedDirtyValues = ! _.isEmpty( api.dirtyValues( {
- unsaved: true
- } ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ unsavedDirtyValues = ! api.state( 'saved' ).get() || '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> control.toggleSaveNotification( unsavedDirtyValues );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.previewElements.link.element.toggleClass( 'disabled', unsavedDirtyValues );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.previewElements.url.element.parent().toggleClass( 'disabled', unsavedDirtyValues );
</ins><span class="cx" style="display: block; padding: 0 10px"> control.previewElements.button.element.prop( 'disabled', unsavedDirtyValues );
</span><span class="cx" style="display: block; padding: 0 10px"> control.setting.set( api.previewer.getFrontendPreviewUrl() );
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6508,9 +6532,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">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /**
- * Find all invalid setting less controls with notification type error.
- */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Find all invalid setting less controls with notification type error.
</ins><span class="cx" style="display: block; padding: 0 10px"> api.control.each( function( control ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! control.setting || ! control.setting.id && control.active.get() ) {
</span><span class="cx" style="display: block; padding: 0 10px"> control.notifications.each( function( notification ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7930,9 +7952,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">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /**
- * Publish settings section and controls.
- */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Publish settings section and controls.
</ins><span class="cx" style="display: block; padding: 0 10px"> api.control( 'changeset_status', 'changeset_scheduled_date', function( statusControl, dateControl ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $.when( statusControl.deferred.embedded, dateControl.deferred.embedded ).done( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var radioNodes, statusElement, toggleDateControl, publishWhenTime, pollInterval, updateTimeArrivedPoller, timeArrivedPollingInterval = 1000;
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/src/wp-includes/class-wp-customize-manager.php 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3622,18 +3622,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </ul>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-preview-link-control" >
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="customize-control-title">
- <label><?php esc_html_e( 'Share Preview Link' ); ?></label>
- </span>
- <span class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
+ <p class="customize-control-title">
+ <?php esc_html_e( 'Share Preview Link' ); ?>
+ </p>
+ <p class="description customize-control-description"><?php esc_html_e( 'See how changes would look live on your website, and share the preview with people who can\'t access the Customizer.' ); ?></p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-control-notifications-container"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="preview-link-wrapper">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label>
- <span class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></span>
- <a class="preview-control-element" data-component="link" href="" target=""></a>
- <input readonly class="preview-control-element" data-component="input" value="test" >
- <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text"><?php esc_html_e( 'Preview Link' ); ?></label>
+ <a href="" target="">
+ <span class="preview-control-element" data-component="url"></span>
+ <span class="screen-reader-text"><?php _e( '(opens in a new window)' ); ?></span>
+ </a>
+ <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+ <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-trash-changeset-control">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4236,6 +4238,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> $initial_date = current_time( 'mysql', false );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->add_control( new WP_Customize_Date_Time_Control( $this, 'changeset_scheduled_date', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'publish_settings',
</span><span class="cx" style="display: block; padding: 0 10px"> 'priority' => 20,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4243,6 +4246,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'date_time',
</span><span class="cx" style="display: block; padding: 0 10px"> 'min_year' => date( 'Y' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'allow_past_date' => false,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'include_time' => true,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'twelve_hour_format' => false !== stripos( get_option( 'time_format' ), 'a' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'description' => __( 'Schedule your customization changes to publish ("go live") at a future date.' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'capability' => 'customize',
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizenavmenusphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-nav-menus.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-nav-menus.php 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/src/wp-includes/class-wp-customize-nav-menus.php 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -674,13 +674,12 @@
</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"> $this->manager->add_control( 'new_menu_name', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'label' => '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'label' => __( 'New menu name' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'add_menu',
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'text',
</span><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array(),
</span><span class="cx" style="display: block; padding: 0 10px"> 'input_attrs' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'class' => 'menu-name-field',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'placeholder' => __( 'New menu name' ),
</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">@@ -1017,7 +1016,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="new-content-item">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <input type="text" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
+ <input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
</ins><span class="cx" style="display: block; padding: 0 10px"> <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizedatetimecontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -49,6 +49,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public $allow_past_date = true;
</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">+ * Whether hours, minutes, and meridian should be shown.
+ *
+ * @since 4.9.0
+ * @var boolean
+ */
+ public $include_time = true;
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * If set to false the control will appear in 24 hour format,
</span><span class="cx" style="display: block; padding: 0 10px"> * the value will still be saved in Y-m-d H:i:s format.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -83,8 +91,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $data['maxYear'] = intval( $this->max_year );
</span><span class="cx" style="display: block; padding: 0 10px"> $data['minYear'] = intval( $this->min_year );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $data['allowPastDate'] = $this->allow_past_date ? true : false;
- $data['twelveHourFormat'] = $this->twelve_hour_format ? true : false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $data['allowPastDate'] = (bool) $this->allow_past_date;
+ $data['twelveHourFormat'] = (bool) $this->twelve_hour_format;
+ $data['includeTime'] = (bool) $this->include_time;
</ins><span class="cx" style="display: block; padding: 0 10px"> $data['defaultValue'] = $this->default_value;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return $data;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -101,68 +110,58 @@
</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"> <# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="customize-control-title">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label>{{ data.label }}</label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ {{ data.label }}
</ins><span class="cx" style="display: block; padding: 0 10px"> </span>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-control-notifications-container"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="description customize-control-description">{{ data.description }}</span>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="date-time-fields">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="day-row">
- <span class="title-day"><?php esc_html_e( 'Day' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="day-row">
+ <legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="day-fields clear">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="month-field">
- <span class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></span>
- <select class="date-input month" data-component="month">
- <# _.each( data.month_choices, function( choice ) {
- if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
- text = choice.text;
- value = choice.value;
- }
- #>
- <option value="{{ value }}" >
- {{ text }}
- </option>
- <# } ); #>
- </select>
- </label>
- <label class="day-field">
- <span class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></span>
- <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
+ <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
+ <# _.each( data.month_choices, function( choice ) {
+ if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+ text = choice.text;
+ value = choice.value;
+ }
+ #>
+ <option value="{{ value }}" >
+ {{ text }}
+ </option>
+ <# } ); #>
+ </select>
+ <label for="{{ idPrefix }}date-time-day" class="screen-reader-text"><?php esc_html_e( 'Day' ); ?></label>
+ <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="time-special-char date-time-separator">,</span>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="year-field">
- <span class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></span>
- <# var maxYearLength = String( data.maxYear ).length; #>
- <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ idPrefix }}date-time-year" class="screen-reader-text"><?php esc_html_e( 'Year' ); ?></label>
+ <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
- <div class="time-row clear">
- <span class="title-time"><?php esc_html_e( 'Time' ); ?></span>
- <div class="time-fields clear">
- <label class="hour-field">
- <span class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </fieldset>
+ <# if ( data.includeTime ) { #>
+ <fieldset class="time-row clear">
+ <legend class="title-time"><?php esc_html_e( 'Time' ); ?></legend>
+ <div class="time-fields clear">
+ <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text"><?php esc_html_e( 'Hour' ); ?></label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
- </label>
- <span class="time-special-char date-time-separator">:</span>
- <label class="minute-field">
- <span class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></span>
- <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
- </label>
- <# if ( data.twelveHourFormat ) { #>
- <label class="am-pm-field">
- <span class="screen-reader-text"><?php esc_html_e( 'AM / PM' ); ?></span>
- <select class="date-input" data-component="ampm">
- <option value="am"><?php esc_html_e( 'AM' ); ?></option>
- <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
- </select>
- </label>
- <# } #>
- <abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
- </div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
+ <span class="time-special-char date-time-separator">:</span>
+ <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text"><?php esc_html_e( 'Minute' ); ?></label>
+ <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+ <# if ( data.twelveHourFormat ) { #>
+ <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text"><?php esc_html_e( 'Meridian' ); ?></label>
+ <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
+ <option value="am"><?php esc_html_e( 'AM' ); ?></option>
+ <option value="pm"><?php esc_html_e( 'PM' ); ?></option>
+ </select>
+ <# } #>
+ <abbr class="date-timezone" aria-label="<?php esc_attr_e( 'Timezone' ); ?>" title="<?php echo esc_attr( $timezone_info['description'] ); ?>"><?php echo esc_html( $timezone_info['abbr'] ); ?></abbr>
+ </div>
+ </fieldset>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunktestsqunitindexhtml"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/index.html</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/index.html 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/tests/qunit/index.html 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -872,86 +872,77 @@
</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"> </script>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <script type="text/html" id="tmpl-customize-control-date_time-content">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script type="text/html" id="tmpl-customize-control-date_time-content">
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":69,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr","value":4},&q
uot;5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# _.defaults( data, {"settings":[],"type":"date_time","priority":10,"active":true,"section":"","content":"<li id=\"customize-control-temp\" class=\"customize-control customize-control-date_time\">\n\t\t\t\t\t<\/li>","label":"","description":"","instanceNumber":73,"maxYear":9999,"minYear":1000,"allowPastDate":true,"twelveHourFormat":true,"includeTime":true,"defaultValue":null,"month_choices":{"1":{"text":"1-Jan","value":1},"2":{"text":"2-Feb","value":2},"3":{"text":"3-Mar","value":3},"4":{"text":"4-Apr&q
uot;,"value":4},"5":{"text":"5-May","value":5},"6":{"text":"6-Jun","value":6},"7":{"text":"7-Jul","value":7},"8":{"text":"8-Aug","value":8},"9":{"text":"9-Sep","value":9},"10":{"text":"10-Oct","value":10},"11":{"text":"11-Nov","value":11},"12":{"text":"12-Dec","value":12}}} ); #>
+ <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="customize-control-title">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label>{{ data.label }}</label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ {{ data.label }}
</ins><span class="cx" style="display: block; padding: 0 10px"> </span>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-control-notifications-container"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="description customize-control-description">{{ data.description }}</span>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="date-time-fields">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div class="day-row">
- <span class="title-day">Day</span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <fieldset class="day-row">
+ <legend class="title-day">Date</legend>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="day-fields clear">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="month-field">
- <span class="screen-reader-text">Month</span>
- <select class="date-input month" data-component="month">
- <# _.each( data.month_choices, function( choice ) {
- if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
- text = choice.text;
- value = choice.value;
- }
- #>
- <option value="{{ value }}" >
- {{ text }}
- </option>
- <# } ); #>
- </select>
- </label>
- <label class="day-field">
- <span class="screen-reader-text">Day</span>
- <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31"" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ idPrefix }}date-time-month" class="screen-reader-text">Month</label>
+ <select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
+ <# _.each( data.month_choices, function( choice ) {
+ if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+ text = choice.text;
+ value = choice.value;
+ }
+ #>
+ <option value="{{ value }}" >
+ {{ text }}
+ </option>
+ <# } ); #>
+ </select>
+ <label for="{{ idPrefix }}date-time-day" class="screen-reader-text">Day</label>
+ <input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <span class="time-special-char date-time-separator">,</span>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label class="year-field">
- <span class="screen-reader-text">Year</span>
- <# var maxYearLength = String( data.maxYear ).length; #>
- <input type="number" size="4" maxlength="{{ maxYearLength }}" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}" />
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ idPrefix }}date-time-year" class="screen-reader-text">Year</label>
+ <input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </div>
- <div class="time-row clear">
- <span class="title-time">Time</span>
- <div class="time-fields clear">
- <label class="hour-field">
- <span class="screen-reader-text">Hour</span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ </fieldset>
+ <# if ( data.includeTime ) { #>
+ <fieldset class="time-row clear">
+ <legend class="title-time">Time</legend>
+ <div class="time-fields clear">
+ <label for="{{ idPrefix }}date-time-hour" class="screen-reader-text">Hour</label>
</ins><span class="cx" style="display: block; padding: 0 10px"> <# var maxHour = data.twelveHourFormat ? 12 : 24; #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}"" />
- </label>
- <span class="time-special-char date-time-separator">:</span>
- <label class="minute-field">
- <span class="screen-reader-text">Minute</span>
- <input type="number" size="2" maxlength="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59" />
- </label>
- <# if ( data.twelveHourFormat ) { #>
- <label class="am-pm-field">
- <span class="screen-reader-text">AM / PM</span>
- <select class="date-input" data-component="ampm">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="1" max="{{ maxHour }}">
+ <span class="time-special-char date-time-separator">:</span>
+ <label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">Minute</label>
+ <input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+ <# if ( data.twelveHourFormat ) { #>
+ <label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">Meridian</label>
+ <select id="{{ idPrefix }}date-time-meridian" class="date-input meridian" data-component="meridian">
</ins><span class="cx" style="display: block; padding: 0 10px"> <option value="am">AM</option>
</span><span class="cx" style="display: block; padding: 0 10px"> <option value="pm">PM</option>
</span><span class="cx" style="display: block; padding: 0 10px"> </select>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- </label>
</del><span class="cx" style="display: block; padding: 0 10px"> <# } #>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <abbr class="date-timezone" aria-label="Timezone" title="Timezone is Asia/Kolkata (IST), currently UTC+5:30.">IST</abbr>
- </div>
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <abbr class="date-timezone" aria-label="Timezone" title="Timezone is America/Los Angeles (PDT), currently UTC-7.">PDT</abbr>
+ </div>
+ </fieldset>
+ <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-preview-link-control" >
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <span class="customize-control-title">
- <label>Share Preview Link</label>
- </span>
- <span class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can't access the Customizer.</span>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <# var elementPrefix = _.uniqueId( 'el' ) + '-' #>
+ <p class="customize-control-title">
+ Share Preview Link </p>
+ <p class="description customize-control-description">See how changes would look live on your website, and share the preview with people who can't access the Customizer.</p>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="customize-control-notifications-container"></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="preview-link-wrapper">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <label>
- <span class="screen-reader-text">Preview Link</span>
- <a class="preview-control-element" data-component="link" href="" target=""></a>
- <input readonly class="preview-control-element" data-component="input" value="test" >
- <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
- </label>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <label for="{{ elementPrefix }}customize-preview-link-input" class="screen-reader-text">Preview Link</label>
+ <a href="" target="">
+ <span class="preview-control-element" data-component="url"></span>
+ <span class="screen-reader-text">(opens in a new window)</span>
+ </a>
+ <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+ <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="Copy" data-copied-text="Copied" >Copy</button>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-media-modal">
</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 2017-10-02 03:59:50 UTC (rev 41669)
+++ trunk/tests/qunit/wp-admin/js/customize-controls.js 2017-10-02 04:11:50 UTC (rev 41670)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -702,7 +702,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Test DateTimeControl creation and its methods', function( assert ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var control, controlId = 'date_time', section, sectionId = 'fixture-section',
</span><span class="cx" style="display: block; padding: 0 10px"> datetime = '2599-08-06 18:12:13', dateTimeArray, dateTimeArrayInampm, timeString,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- day, year, month, minute, ampm, hour;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ day, year, month, minute, meridian, hour;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> section = wp.customize.section( sectionId );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -710,6 +710,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> params: {
</span><span class="cx" style="display: block; padding: 0 10px"> section: section.id,
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'date_time',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ includeTime: true,
</ins><span class="cx" style="display: block; padding: 0 10px"> content: '<li id="customize-control-' + controlId + '" class="customize-control"></li>',
</span><span class="cx" style="display: block; padding: 0 10px"> defaultValue: datetime
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -728,15 +729,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> year = control.inputElements.year;
</span><span class="cx" style="display: block; padding: 0 10px"> minute = control.inputElements.minute;
</span><span class="cx" style="display: block; padding: 0 10px"> hour = control.inputElements.hour;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ampm = control.inputElements.ampm;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meridian = control.inputElements.meridian;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> year( '23' );
</span><span class="cx" style="display: block; padding: 0 10px"> assert.equal( typeof year(), 'number', 'Should always return integer' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ month( '8' );
</ins><span class="cx" style="display: block; padding: 0 10px"> month( 'test' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- assert.notOk( month(), 'Should not accept text' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ assert.equal( 8, month(), 'Should not accept text' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Test control.parseDateTime();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.params.twelveHourFormat = false;
</ins><span class="cx" style="display: block; padding: 0 10px"> dateTimeArray = control.parseDateTime( datetime );
</span><span class="cx" style="display: block; padding: 0 10px"> assert.deepEqual( dateTimeArray, {
</span><span class="cx" style="display: block; padding: 0 10px"> year: '2599',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -747,13 +750,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> day: '06'
</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">- dateTimeArrayInampm = control.parseDateTime( datetime, true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.params.twelveHourFormat = true;
+ dateTimeArrayInampm = control.parseDateTime( datetime );
</ins><span class="cx" style="display: block; padding: 0 10px"> assert.deepEqual( dateTimeArrayInampm, {
</span><span class="cx" style="display: block; padding: 0 10px"> year: '2599',
</span><span class="cx" style="display: block; padding: 0 10px"> month: '08',
</span><span class="cx" style="display: block; padding: 0 10px"> hour: '6',
</span><span class="cx" style="display: block; padding: 0 10px"> minute: '12',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ampm: 'pm',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meridian: 'pm',
</ins><span class="cx" style="display: block; padding: 0 10px"> day: '06'
</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">@@ -762,16 +766,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> day( '18' );
</span><span class="cx" style="display: block; padding: 0 10px"> hour( '3' );
</span><span class="cx" style="display: block; padding: 0 10px"> minute( '44' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ampm( 'am' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meridian( 'am' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Test control.convertInputDateToString().
</span><span class="cx" style="display: block; padding: 0 10px"> timeString = control.convertInputDateToString();
</span><span class="cx" style="display: block; padding: 0 10px"> assert.equal( timeString, '2010-12-18 03:44:00' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ampm( 'pm' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meridian( 'pm' );
</ins><span class="cx" style="display: block; padding: 0 10px"> timeString = control.convertInputDateToString();
</span><span class="cx" style="display: block; padding: 0 10px"> assert.equal( timeString, '2010-12-18 15:44:00' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.params.includeTime = false;
+ timeString = control.convertInputDateToString();
+ assert.equal( timeString, '2010-12-18' );
+ control.params.includeTime = true;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Test control.updateDaysForMonth();.
</span><span class="cx" style="display: block; padding: 0 10px"> year( 2017 );
</span><span class="cx" style="display: block; padding: 0 10px"> month( 2 );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -796,11 +805,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> assert.notOk( control.notifications.has( 'not_future_date' ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Test control.populateDateInputs();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.setting._value = '2000-12-30 12:34:56';
</ins><span class="cx" style="display: block; padding: 0 10px"> control.populateDateInputs();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.dateInputs.each( function() {
- var node = jQuery( this );
- assert.equal( node.val(), control.inputElements[ node.data( 'component' ) ].get() );
- } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ assert.equal( '2000', control.inputElements.year.get() );
+ assert.equal( '12', control.inputElements.month.get() );
+ assert.equal( '30', control.inputElements.day.get() );
+ assert.equal( '12', control.inputElements.hour.get() );
+ assert.equal( '34', control.inputElements.minute.get() );
+ assert.equal( 'pm', control.inputElements.meridian.get() );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Test control.validateInputs();
</span><span class="cx" style="display: block; padding: 0 10px"> hour( 33 );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -818,7 +830,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> year( 2018 );
</span><span class="cx" style="display: block; padding: 0 10px"> hour( 4 );
</span><span class="cx" style="display: block; padding: 0 10px"> minute( 20 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ampm( 'pm' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meridian( 'pm' );
</ins><span class="cx" style="display: block; padding: 0 10px"> control.populateSetting();
</span><span class="cx" style="display: block; padding: 0 10px"> assert.equal( control.setting(), '2018-11-02 16:20:00' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -836,7 +848,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> year( 2318 );
</span><span class="cx" style="display: block; padding: 0 10px"> hour( 4 );
</span><span class="cx" style="display: block; padding: 0 10px"> minute( 20 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ampm( 'pm' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ meridian( 'pm' );
</ins><span class="cx" style="display: block; padding: 0 10px"> assert.ok( control.isFutureDate() );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> year( 2016 );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -848,7 +860,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> hour( 24 );
</span><span class="cx" style="display: block; padding: 0 10px"> minute( 32 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.inputElements.ampm = false; // Because it works only when the time is twenty four hour format.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.inputElements.meridian = false; // Because it works only when the time is twenty four hour format.
</ins><span class="cx" style="display: block; padding: 0 10px"> control.updateMinutesForHour();
</span><span class="cx" style="display: block; padding: 0 10px"> assert.deepEqual( minute(), 0 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -910,9 +922,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> control.setting.set( newLink );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> assert.equal( control.previewElements.input(), newLink );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- assert.equal( control.previewElements.link(), newLink );
- assert.equal( control.previewElements.link.element.attr( 'href' ), newLink );
- assert.equal( control.previewElements.link.element.attr( 'target' ), wp.customize.settings.changeset.uuid );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ assert.equal( control.previewElements.url(), newLink );
+ assert.equal( control.previewElements.url.element.parent().attr( 'href' ), newLink );
+ assert.equal( control.previewElements.url.element.parent().attr( 'target' ), wp.customize.settings.changeset.uuid );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Test control.toggleSaveNotification().
</span><span class="cx" style="display: block; padding: 0 10px"> control.toggleSaveNotification( true );
</span></span></pre>
</div>
</div>
</body>
</html>