<!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>[30716] trunk: Customizer: Move private helper functions to `wp.customize.utils` so they can be unit tested.</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/30716">30716</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/30716","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ocean90</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2014-12-02 22:55:48 +0000 (Tue, 02 Dec 2014)</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'>Customizer: Move private helper functions to `wp.customize.utils` so they can be unit tested.
Includes unit tests.
props ryankienstra, westonruter.
see <a href="https://core.trac.wordpress.org/ticket/28709">#28709</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizebasejs">trunk/tests/qunit/wp-admin/js/customize-base.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunktestsqunitwpadminjscustomizecontrolsutilsjs">trunk/tests/qunit/wp-admin/js/customize-controls-utils.js</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="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 2014-12-02 22:55:30 UTC (rev 30715)
+++ trunk/src/wp-admin/js/customize-controls.js 2014-12-02 22:55:48 UTC (rev 30716)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,9 +1,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* globals _wpCustomizeHeader, _wpMediaViewsL10n */
</span><span class="cx" style="display: block; padding: 0 10px"> (function( exports, $ ){
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var bubbleChildValueChanges, Container, focus, isKeydownButNotEnterEvent, areElementListsEqual, prioritySort, api = wp.customize;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var Container, focus, api = wp.customize;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // @todo Move private helper functions to wp.customize.utils so they can be unit tested
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * @class
</span><span class="cx" style="display: block; padding: 0 10px"> * @augments wp.customize.Value
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -33,12 +31,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Utility function namespace
+ */
+ api.utils = {};
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Watch all changes to Value properties, and bubble changes to parent Values instance
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {wp.customize.Class} instance
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Array} properties The names of the Value instances to watch.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- bubbleChildValueChanges = function ( instance, properties ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.utils.bubbleChildValueChanges = function ( instance, properties ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $.each( properties, function ( i, key ) {
</span><span class="cx" style="display: block; padding: 0 10px"> instance[ key ].bind( function ( to, from ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( instance.parent && to !== from ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -86,7 +89,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {(wp.customize.Panel|wp.customize.Section|wp.customize.Control)} b
</span><span class="cx" style="display: block; padding: 0 10px"> * @returns {Number}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- prioritySort = function ( a, b ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.utils.prioritySort = function ( a, b ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( a.priority() === b.priority() && typeof a.params.instanceNumber === 'number' && typeof b.params.instanceNumber === 'number' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return a.params.instanceNumber - b.params.instanceNumber;
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -100,7 +103,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {jQuery.Event} event
</span><span class="cx" style="display: block; padding: 0 10px"> * @returns {boolean}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- isKeydownButNotEnterEvent = function ( event ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.utils.isKeydownButNotEnterEvent = function ( event ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return ( 'keydown' === event.type && 13 !== event.which );
</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">@@ -111,7 +114,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Array|jQuery} listB
</span><span class="cx" style="display: block; padding: 0 10px"> * @returns {boolean}
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- areElementListsEqual = function ( listA, listB ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.utils.areElementListsEqual = function ( listA, listB ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> var equal = (
</span><span class="cx" style="display: block; padding: 0 10px"> listA.length === listB.length && // if lists are different lengths, then naturally they are not equal
</span><span class="cx" style="display: block; padding: 0 10px"> -1 === _.map( // are there any false values in the list returned by map?
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -142,7 +145,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> container.container = $( container.params.content );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> container.deferred = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ready: new $.Deferred()
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ embedded: new $.Deferred()
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> container.priority = new api.Value();
</span><span class="cx" style="display: block; padding: 0 10px"> container.active = new api.Value();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -155,22 +158,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> args = $.extend( {}, container.defaultActiveArguments, args );
</span><span class="cx" style="display: block; padding: 0 10px"> active = ( active && container.isContextuallyActive() );
</span><span class="cx" style="display: block; padding: 0 10px"> container.onChangeActive( active, args );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // @todo trigger 'activated' and 'deactivated' events based on the expanded param?
</del><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> container.expanded.bind( function ( expanded ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var args = container.expandedArgumentsQueue.shift();
</span><span class="cx" style="display: block; padding: 0 10px"> args = $.extend( {}, container.defaultExpandedArguments, args );
</span><span class="cx" style="display: block; padding: 0 10px"> container.onChangeExpanded( expanded, args );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // @todo trigger 'expanded' and 'collapsed' events based on the expanded param?
</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"> container.attachEvents();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- bubbleChildValueChanges( container, [ 'priority', 'active' ] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> container.priority.set( isNaN( container.params.priority ) ? 100 : container.params.priority );
</span><span class="cx" style="display: block; padding: 0 10px"> container.active.set( container.params.active );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- container.expanded.set( false ); // @todo True if deeplinking?
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ container.expanded.set( false );
</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">@@ -193,7 +194,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> children.push( child );
</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">- children.sort( prioritySort );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ children.sort( api.utils.prioritySort );
</ins><span class="cx" style="display: block; padding: 0 10px"> return children;
</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">@@ -202,7 +203,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @abstract
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> isContextuallyActive: function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- throw new Error( 'Must override with subclass.' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ throw new Error( 'Container.isContextuallyActive() must be overridden in a subclass.' );
</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">@@ -335,10 +336,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $( section.container ).toggleClass( 'control-subsection', !! id );
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> section.panel.set( section.params.panel || '' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- bubbleChildValueChanges( section, [ 'panel' ] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.utils.bubbleChildValueChanges( section, [ 'panel' ] );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> section.embed();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.deferred.ready.done( function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.deferred.embedded.done( function () {
</ins><span class="cx" style="display: block; padding: 0 10px"> section.ready();
</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">@@ -356,12 +357,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // The panel has been supplied, so wait until the panel object is registered
</span><span class="cx" style="display: block; padding: 0 10px"> api.panel( panelId, function ( panel ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // The panel has been registered, wait for it to become ready/initialized
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- panel.deferred.ready.done( function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel.deferred.embedded.done( function () {
</ins><span class="cx" style="display: block; padding: 0 10px"> parentContainer = panel.container.find( 'ul:first' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! section.container.parent().is( parentContainer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> parentContainer.append( section.container );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.deferred.ready.resolve(); // @todo Better to use `embedded` instead of `ready`
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.deferred.embedded.resolve();
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -370,7 +371,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! section.container.parent().is( parentContainer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> parentContainer.append( section.container );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.deferred.ready.resolve();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.deferred.embedded.resolve();
</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"> section.panel.bind( inject );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -385,7 +386,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Expand/Collapse accordion sections on click.
</span><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isKeydownButNotEnterEvent( event ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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"> event.preventDefault(); // Keep this AFTER the key filter above
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -479,7 +480,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var panel = this;
</span><span class="cx" style="display: block; padding: 0 10px"> Container.prototype.initialize.call( panel, id, options );
</span><span class="cx" style="display: block; padding: 0 10px"> panel.embed();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- panel.deferred.ready.done( function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel.deferred.embedded.done( function () {
</ins><span class="cx" style="display: block; padding: 0 10px"> panel.ready();
</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">@@ -494,7 +495,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! panel.container.parent().is( parentContainer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> parentContainer.append( panel.container );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- panel.deferred.ready.resolve();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ panel.deferred.embedded.resolve();
</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">@@ -505,7 +506,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Expand/Collapse accordion sections on click.
</span><span class="cx" style="display: block; padding: 0 10px"> panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isKeydownButNotEnterEvent( event ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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"> event.preventDefault(); // Keep this AFTER the key filter above
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -518,7 +519,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> meta = panel.container.find( '.panel-meta:first' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> meta.find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isKeydownButNotEnterEvent( event ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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"> event.preventDefault(); // Keep this AFTER the key filter above
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -676,7 +677,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> control.container = control.params.content ? $( control.params.content ) : $( control.selector );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> control.deferred = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ready: new $.Deferred()
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ embedded: new $.Deferred()
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> control.section = new api.Value();
</span><span class="cx" style="display: block; padding: 0 10px"> control.priority = new api.Value();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -720,7 +721,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> control.priority.set( isNaN( control.params.priority ) ? 10 : control.params.priority );
</span><span class="cx" style="display: block; padding: 0 10px"> control.active.set( control.params.active );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- bubbleChildValueChanges( control, [ 'section', 'priority', 'active' ] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.utils.bubbleChildValueChanges( control, [ 'section', 'priority', 'active' ] );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Associate this control with its settings when they are created
</span><span class="cx" style="display: block; padding: 0 10px"> settings = $.map( control.params.settings, function( value ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -739,7 +740,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> control.embed();
</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.deferred.ready.done( function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.deferred.embedded.done( function () {
</ins><span class="cx" style="display: block; padding: 0 10px"> control.ready();
</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">@@ -760,13 +761,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Wait for the section to be registered
</span><span class="cx" style="display: block; padding: 0 10px"> api.section( sectionId, function ( section ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // Wait for the section to be ready/initialized
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- section.deferred.ready.done( function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ section.deferred.embedded.done( function () {
</ins><span class="cx" style="display: block; padding: 0 10px"> parentContainer = section.container.find( 'ul:first' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! control.container.parent().is( parentContainer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> parentContainer.append( control.container );
</span><span class="cx" style="display: block; padding: 0 10px"> control.renderContent();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- control.deferred.ready.resolve(); // @todo Better to use `embedded` instead of `ready`
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ control.deferred.embedded.resolve();
</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">@@ -852,7 +853,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Support the .dropdown class to open/close complex elements
</span><span class="cx" style="display: block; padding: 0 10px"> this.container.on( 'click keydown', '.dropdown', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isKeydownButNotEnterEvent( event ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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">@@ -935,7 +936,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * When the control's DOM structure is ready,
</span><span class="cx" style="display: block; padding: 0 10px"> * set up internal event bindings.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ready: function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ready: function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> var control = this;
</span><span class="cx" style="display: block; padding: 0 10px"> // Shortcut so that we don't have to use _.bind every time we add a callback.
</span><span class="cx" style="display: block; padding: 0 10px"> _.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -954,9 +955,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Open the media modal.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> openFrame: function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( event.type === 'keydown' && 13 !== event.which ) { // enter
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -984,11 +985,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> text: this.params.button_labels.frame_button
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> multiple: false
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ });
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // When a file is selected, run a callback.
</span><span class="cx" style="display: block; padding: 0 10px"> this.frame.on( 'select', this.select );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- },
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
</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"> * Callback handler for when an attachment is selected in the media modal.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1008,7 +1009,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Reset the setting to the default value.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> restoreDefault: function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( event.type === 'keydown' && 13 !== event.which ) { // enter
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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"> event.preventDefault();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1023,22 +1024,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {object} event jQuery Event object
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> removeFile: function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( event.type === 'keydown' && 13 !== event.which ) { // enter
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</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"> this.params.attachment = {};
</span><span class="cx" style="display: block; padding: 0 10px"> this.setting( '' );
</span><span class="cx" style="display: block; padding: 0 10px"> this.renderContent(); // Not bound to setting change when emptying.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- },
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ },
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // @deprecated
</span><span class="cx" style="display: block; padding: 0 10px"> success: function() {},
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // @deprecated
</span><span class="cx" style="display: block; padding: 0 10px"> removerVisibility: function() {}
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ });
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * A control for uploading images.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1742,8 +1743,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> api.l10n = window._wpCustomizeControlsL10n;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Check if we can run the Customizer.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! api.settings )
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! api.settings ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Redirect to the fallback preview if any incompatibilities are found.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! $.support.postMessage || ( ! $.support.cors && api.settings.isCrossDomain ) )
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1768,7 +1770,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Expand/Collapse the main customizer customize info
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#customize-info' ).find( '> .accordion-section-title' ).on( 'click keydown', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isKeydownButNotEnterEvent( event ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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"> event.preventDefault(); // Keep this AFTER the key filter above
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1930,7 +1932,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( id && api[ type ]( id ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> instance = api[ type ]( id );
</span><span class="cx" style="display: block; padding: 0 10px"> // Wait until the element is embedded in the DOM
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- instance.deferred.ready.done( function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ instance.deferred.embedded.done( function () {
</ins><span class="cx" style="display: block; padding: 0 10px"> // Wait until the preview has activated and so active panels, sections, controls have been set
</span><span class="cx" style="display: block; padding: 0 10px"> api.previewer.deferred.active.done( function () {
</span><span class="cx" style="display: block; padding: 0 10px"> instance.focus();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1956,7 +1958,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> sectionContainers = _.pluck( sections, 'container' );
</span><span class="cx" style="display: block; padding: 0 10px"> rootNodes.push( panel );
</span><span class="cx" style="display: block; padding: 0 10px"> appendContainer = panel.container.find( 'ul:first' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> _( sections ).each( function ( section ) {
</span><span class="cx" style="display: block; padding: 0 10px"> appendContainer.append( section.container );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1972,7 +1974,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> rootNodes.push( section );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> appendContainer = section.container.find( 'ul:first' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> _( controls ).each( function ( control ) {
</span><span class="cx" style="display: block; padding: 0 10px"> appendContainer.append( control.container );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1981,10 +1983,10 @@
</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"> // Sort the root panels and sections
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- rootNodes.sort( prioritySort );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ rootNodes.sort( api.utils.prioritySort );
</ins><span class="cx" style="display: block; padding: 0 10px"> rootContainers = _.pluck( rootNodes, 'container' );
</span><span class="cx" style="display: block; padding: 0 10px"> appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! areElementListsEqual( rootContainers, appendContainer.children() ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> _( rootNodes ).each( function ( rootNode ) {
</span><span class="cx" style="display: block; padding: 0 10px"> appendContainer.append( rootNode.container );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2080,7 +2082,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Go back to the top-level Customizer accordion.
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isKeydownButNotEnterEvent( event ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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">@@ -2099,7 +2101,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"> $('.collapse-sidebar').on( 'click keydown', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isKeydownButNotEnterEvent( event ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
</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></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 2014-12-02 22:55:30 UTC (rev 30715)
+++ trunk/tests/qunit/index.html 2014-12-02 22:55:48 UTC (rev 30716)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,12 +31,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../src/wp-includes/js/customize-base.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../src/wp-includes/js/customize-models.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../src/wp-includes/js/shortcode.js"></script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script src="../../src/wp-admin/js/customize-controls.js"></script>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <!-- Unit tests -->
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/password-strength-meter.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/customize-base.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/customize-header.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-includes/js/shortcode.js"></script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script src="wp-admin/js/customize-controls.js"></script>
+ <script src="wp-admin/js/customize-controls-utils.js"></script>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> </body>
</span><span class="cx" style="display: block; padding: 0 10px"> </html>
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizebasejs"></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-base.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/customize-base.js 2014-12-02 22:55:30 UTC (rev 30715)
+++ trunk/tests/qunit/wp-admin/js/customize-base.js 2014-12-02 22:55:48 UTC (rev 30716)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,7 +1,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* global wp */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> jQuery( function( $ ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var FooSuperClass, BarSubClass, foo, bar;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var FooSuperClass, BarSubClass, foo, bar, ConstructorTestClass, newConstructor, constructorTest, $mockElement, mockString,
+ firstInitialValue, firstValueInstance, wasCallbackFired, mockValueCallback;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> module( 'Customize Base: Class' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -46,11 +47,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> equal( foo.instanceProp, 'instancePropValue' );
</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">- // @todo Test Class.constructor() manipulation
</del><span class="cx" style="display: block; padding: 0 10px"> // @todo Test Class.applicator?
</span><span class="cx" style="display: block; padding: 0 10px"> // @todo do we test object.instance?
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> module( 'Customize Base: Subclass' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> BarSubClass = FooSuperClass.extend(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -82,4 +81,81 @@
</span><span class="cx" style="display: block; padding: 0 10px"> equal( bar.extended( FooSuperClass ), 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">+
+ // Implements todo : Test Class.constructor() manipulation
+ module( 'Customize Base: Constructor Manipulation' );
+
+ newConstructor = function ( instanceProps ) {
+ $.extend( this , instanceProps || {} );
+ };
+
+ ConstructorTestClass = wp.customize.Class.extend(
+ {
+ constructor : newConstructor,
+ protoProp: 'protoPropValue'
+ },
+ {
+ staticProp: 'staticPropValue'
+ }
+ );
+
+ test( 'New constructor added to class' , function () {
+ equal( ConstructorTestClass.prototype.constructor , newConstructor );
+ });
+ test( 'Class with new constructor has protoPropValue' , function () {
+ equal( ConstructorTestClass.prototype.protoProp , 'protoPropValue' );
+ });
+
+ constructorTest = new ConstructorTestClass( { instanceProp: 'instancePropValue' } );
+ test( 'ConstructorTestClass instance constructorTest has the new constructor', function () {
+ equal( constructorTest.constructor, newConstructor );
+ });
+
+ test( 'ConstructorTestClass instance constructorTest extended Class', function () {
+ equal( constructorTest.extended( wp.customize.Class ), true );
+ });
+
+ test( 'ConstructorTestClass instance constructorTest has the added instance property', function () {
+ equal( constructorTest.instanceProp , 'instancePropValue' );
+ });
+
+
+ module( 'Customize Base: wp.customizer.ensure' );
+
+ $mockElement = $( '<div id="mockElement"></div>' );
+
+ test( 'Handles jQuery argument' , function() {
+ equal( wp.customize.ensure( $mockElement ) , $mockElement );
+ });
+
+ mockString = '<div class="mockString"></div>';
+
+ test( 'Handles string argument' , function() {
+ ok( wp.customize.ensure( mockString ) instanceof jQuery );
+ });
+
+
+ module( 'Customize Base: Value Class' );
+
+ firstInitialValue = true;
+ firstValueInstance = new wp.customize.Value( firstInitialValue );
+
+ test( 'Initialized with the right value' , function() {
+ equal( firstValueInstance.get() , firstInitialValue );
+ });
+
+ test( '.set() works' , function() {
+ firstValueInstance.set( false );
+ equal( firstValueInstance.get() , false );
+ });
+
+ test( '.bind() adds new callback that fires on set()' , function() {
+ wasCallbackFired = false;
+ mockValueCallback = function() {
+ wasCallbackFired = true;
+ };
+ firstValueInstance.bind( mockValueCallback );
+ firstValueInstance.set( 'newValue' );
+ ok( wasCallbackFired );
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizecontrolsutilsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/qunit/wp-admin/js/customize-controls-utils.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-utils.js (rev 0)
+++ trunk/tests/qunit/wp-admin/js/customize-controls-utils.js 2014-12-02 22:55:48 UTC (rev 30716)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,108 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global wp */
+
+jQuery( function( $ ) {
+ var trueMockEvent, falseMockEvent, mockElementLists, $firstMockElement, $secondMockElement, $thirdMockElement,
+ BubbleTester, BubbleTesterTwoValues, bubbleTesterParent, firstBubbleTester, secondBubbleTester;
+
+ module( 'Customizer Model Utility functions' );
+
+ trueMockEvent = {
+ type : 'keydown',
+ which : 14
+ };
+
+ falseMockEvent = {
+ type : 'keydown',
+ which : 13
+ };
+
+ test( 'isKeydownButNotEnterEvent returns true' , function () {
+ ok( wp.customize.utils.isKeydownButNotEnterEvent( trueMockEvent ) );
+ });
+
+ test( 'isKeydownButNotEnterEvent returns false' , function () {
+ equal( wp.customize.utils.isKeydownButNotEnterEvent( falseMockEvent ) , false );
+ });
+
+ $firstMockElement = $( '<div id="foo"></div>' );
+ $secondMockElement = $( '<li id="bar"></li>' );
+ $thirdMockElement = $( '<div id="thirdElement"></div>' );
+
+ mockElementLists = {
+ first : [ $firstMockElement , $secondMockElement ],
+ second : [ $secondMockElement ],
+ firstInReverseOrder : [ $secondMockElement , $firstMockElement ],
+ third : [ $firstMockElement, $secondMockElement ],
+ thirdButLonger : [ $firstMockElement, $secondMockElement, $thirdMockElement ]
+ };
+
+ test( 'areElementListsEqual returns true' , function () {
+ ok( wp.customize.utils.areElementListsEqual( mockElementLists.first , mockElementLists.first ) );
+ });
+
+ test( 'areElementListsEqual returns false' , function () {
+ equal( wp.customize.utils.areElementListsEqual( mockElementLists.first , mockElementLists.second ) , false );
+ });
+
+ test( 'areElementListsEqual: lists have same values, but in reverse order' , function () {
+ equal( wp.customize.utils.areElementListsEqual( mockElementLists.first , mockElementLists.firstInReverseOrder ) , false );
+ });
+
+ test( 'areElementListsEqual: lists have same values, but one is longer' , function () {
+ equal( wp.customize.utils.areElementListsEqual( mockElementLists.third , mockElementLists.thirdButLonger ) , false );
+ });
+
+
+ bubbleTesterParent = function() {
+ this.trigger = function( event , instance ) {
+ this.wasChangeTriggered = true;
+ this.instancePassedInTrigger = instance;
+ };
+ this.wasChangeTriggered = false;
+ this.instancePassedInTrigger = {};
+ };
+
+ BubbleTester = wp.customize.Class.extend(
+ {
+ parent : new bubbleTesterParent(),
+ fooValue : new wp.customize.Value()
+ },
+ {
+ staticProperty : 'propertyValue'
+ }
+ );
+
+ test( 'bubbleChildValueChanges notifies parent of change' , function() {
+ firstBubbleTester = new BubbleTester();
+ wp.customize.utils.bubbleChildValueChanges( firstBubbleTester , [ 'fooValue' ] );
+ firstBubbleTester.fooValue.set( 'new value' );
+ ok( firstBubbleTester.parent.wasChangeTriggered );
+ });
+
+ test( 'bubbleChildValueChanges passes a reference to its instance' , function() {
+ ok( firstBubbleTester.parent.instancePassedInTrigger instanceof BubbleTester );
+ });
+
+ BubbleTesterTwoValues = wp.customize.Class.extend(
+ {
+ parent : new bubbleTesterParent(),
+ exampleValue : new wp.customize.Value(),
+ barValue : new wp.customize.Value()
+ },
+ {
+ staticProperty : 'propertyValue'
+ }
+ );
+
+ secondBubbleTester = new BubbleTesterTwoValues();
+ wp.customize.utils.bubbleChildValueChanges( secondBubbleTester , [ 'exampleValue' , 'barValue' ] );
+ secondBubbleTester.barValue.set( 'new value' );
+
+ test( 'bubbleChildValueChanges notifies parent of change when two values are bound' , function() {
+ ok( secondBubbleTester.parent.wasChangeTriggered );
+ });
+
+ test( 'bubbleChildValueChanges passes a reference to its instance when two values are bound' , function() {
+ ok( secondBubbleTester.parent.instancePassedInTrigger instanceof BubbleTesterTwoValues );
+ });
+});
</ins></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizecontrolsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: 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 (rev 0)
+++ trunk/tests/qunit/wp-admin/js/customize-controls.js 2014-12-02 22:55:48 UTC (rev 30716)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,173 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global wp */
+
+jQuery( function() {
+
+ var controlId, controlLabel, controlType, controlContent, controlDescription, controlData, mockControl,
+ mockControlInstance, controlExpectedValues, sectionId, sectionContent, sectionData, mockSection,
+ sectionInstance, sectionExpectedValues, panelId, panelTitle, panelDescription, panelContent, panelData,
+ mockPanel, panelExpectedValues, testCustomizerModel;
+
+ testCustomizerModel = function( model, expectedValues ) {
+ var type = expectedValues.type || '';
+
+ if ( expectedValues.hasOwnProperty( 'id' ) ) {
+ test( type + ' instance has the right id' , function () {
+ equal( model.id , expectedValues.id );
+ });
+ }
+ if ( expectedValues.hasOwnProperty( 'title') ) {
+ test( type + ' instance has the right title.', function () {
+ equal( model.params.title , expectedValues.title );
+ });
+ }
+ if ( expectedValues.hasOwnProperty( 'description' ) ) {
+ test( type + ' instance has the right description.', function () {
+ equal( model.params.description , expectedValues.description );
+ });
+ }
+ if ( expectedValues.hasOwnProperty( 'content' ) ) {
+ test( type + ' instance has the right content.', function () {
+ equal( model.params.content , expectedValues.content );
+ });
+ }
+ if ( expectedValues.hasOwnProperty( 'priority' ) ) {
+ test( type + ' instance has the right priority.', function () {
+ equal( model.priority() , expectedValues.priority );
+ });
+ }
+ if ( expectedValues.textExpanded ) {
+ test( type + ' instance is not expanded', function () {
+ equal( model.expanded() , false );
+ });
+
+ test( type + ' instance is expanded after calling .expanded()', function () {
+ model.expand();
+ ok( model.expanded() );
+ });
+
+ test( type + ' instance is collapsed after calling .collapse()', function () {
+ model.collapse();
+ equal( model.expanded() , false );
+ });
+ }
+
+ };
+
+
+ module( 'Customizer Control Model' );
+
+ controlId = 'new_blogname';
+ controlLabel = 'Site Title';
+ controlType = 'text';
+ controlContent = '<li id="customize-control-blogname" class="customize-control customize-control-text"></li>';
+ controlDescription = 'Test control description';
+
+ controlData = {
+ content : controlContent,
+ description : controlDescription,
+ label : controlLabel,
+ settings : { 'default' : 'blogname' },
+ type : controlType
+ };
+
+ mockControl = new wp.customize.Control( controlId , {
+ params : controlData,
+ previewer : wp.customize.previewer
+ });
+
+ controlExpectedValues = {
+ type : 'Control',
+ content : controlContent,
+ descrption : controlDescription,
+ label : controlLabel,
+ id : controlId,
+ priority : 10,
+ textExpanded : false
+ };
+
+ testCustomizerModel( mockControl , controlExpectedValues );
+
+ test( 'Control instance does not yet belong to a section.', function () {
+ equal( mockControl.section() , undefined );
+ });
+
+ test( 'Control instance has the right selector.', function () {
+ equal( mockControl.selector , '#customize-control-new_blogname' );
+ });
+
+ wp.customize.control.add( controlId , mockControl );
+
+ test( 'Control instance was added to the control class.', function () {
+ ok( wp.customize.control.has( controlId ) );
+ });
+
+ mockControlInstance = wp.customize.control( controlId );
+
+ test( 'Control instance has the right id when accessed from api.control().', function () {
+ equal( mockControlInstance.id , controlId );
+ });
+
+
+ module( 'Customizer Section Model' );
+
+ sectionId = 'mock_title_tagline';
+ sectionContent = '<li id="accordion-section-title_tagline" class="control-section accordion-section"></li>';
+ sectionData = {
+ content : sectionContent
+ };
+
+ mockSection = new wp.customize.Section( sectionId , { params : sectionData } );
+
+ sectionExpectedValues = {
+ type : 'Section',
+ id : sectionId,
+ content : sectionContent,
+ priority : 100,
+ testExpanded : true
+ };
+
+ testCustomizerModel( mockSection , sectionExpectedValues );
+
+ wp.customize.section.add( sectionId , mockSection );
+
+ test( 'Section instance added to the wp.customize.section object', function () {
+ ok( wp.customize.section.has( sectionId ) );
+ });
+
+ sectionInstance = wp.customize.section( sectionId );
+
+ test( 'Section instance has right content when accessed from wp.customize.section()', function () {
+ equal( sectionInstance.params.content , sectionContent );
+ });
+
+
+ module( 'Customizer Panel Model' );
+
+ panelId = 'mockPanelId';
+ panelTitle = 'Mock Panel Title';
+ panelDescription = 'Mock panel description';
+ panelContent = '<li id="accordion-panel-widgets" class="control-section control-panel accordion-section">';
+ panelData = {
+ content : panelContent,
+ title : panelTitle,
+ description : panelDescription
+ };
+
+ mockPanel = new wp.customize.Panel( panelId , { params : panelData } );
+
+ panelExpectedValues = {
+ type : 'Panel',
+ id : panelId,
+ title : panelTitle ,
+ description : panelDescription,
+ content : panelContent,
+ priority : 100,
+ testExpanded : true
+ };
+
+ testCustomizerModel( mockPanel , panelExpectedValues );
+
+ test( 'Panel instance is not contextuallyActive', function () {
+ equal( mockPanel.isContextuallyActive() , false );
+ });
+});
</ins></span></pre>
</div>
</div>
</body>
</html>