<!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>[41958] trunk/src/wp-admin/js/customize-controls.js: Customize: Add `codemirror` deferred object to `CodeEditorControl` which is resolved when CodeMirror is initialized.</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/41958">41958</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/41958","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-20 21:47:13 +0000 (Fri, 20 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: Add `codemirror` deferred object to `CodeEditorControl` which is resolved when CodeMirror is initialized.
CodeMirror gets initialized once the control's containing section is expanded. The deferred will be rejected if user preference for syntax highlighting is disabled.
Also move jsdoc from `wp.customize.Control` to intended `wp.customize.Control#initialize()`.
See <a href="https://core.trac.wordpress.org/ticket/41897">#41897</a>, <a href="https://core.trac.wordpress.org/ticket/12423">#12423</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/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 2017-10-20 16:38:35 UTC (rev 41957)
+++ trunk/src/wp-admin/js/customize-controls.js 2017-10-20 21:47:13 UTC (rev 41958)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3341,23 +3341,6 @@
</span><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.Class
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- *
- * @param {string} id - Unique identifier for the control instance.
- * @param {object} options - Options hash for the control instance.
- * @param {object} options.type - Type of control (e.g. text, radio, dropdown-pages, etc.)
- * @param {string} [options.content] - The HTML content for the control or at least its container. This should normally be left blank and instead supplying a templateId.
- * @param {string} [options.templateId] - Template ID for control's content.
- * @param {string} [options.priority=10] - Order of priority to show the control within the section.
- * @param {string} [options.active=true] - Whether the control is active.
- * @param {string} options.section - The ID of the section the control belongs to.
- * @param {mixed} [options.setting] - The ID of the main setting or an instance of this setting.
- * @param {mixed} options.settings - An object with keys (e.g. default) that maps to setting IDs or Setting/Value objects, or an array of setting IDs or Setting/Value objects.
- * @param {mixed} options.settings.default - The ID of the setting the control relates to.
- * @param {string} options.settings.data - @todo Is this used?
- * @param {string} options.label - Label.
- * @param {string} options.description - Description.
- * @param {number} [options.instanceNumber] - Order in which this instance was created in relation to other instances.
- * @param {object} [options.params] - Deprecated wrapper for the above properties.
</del><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> api.Control = api.Class.extend({
</span><span class="cx" style="display: block; padding: 0 10px"> defaultActiveArguments: { duration: 'fast', completeCallback: $.noop },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3369,6 +3352,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> priority: 10
</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">+ /**
+ * Initialize.
+ *
+ * @param {string} id - Unique identifier for the control instance.
+ * @param {object} options - Options hash for the control instance.
+ * @param {object} options.type - Type of control (e.g. text, radio, dropdown-pages, etc.)
+ * @param {string} [options.content] - The HTML content for the control or at least its container. This should normally be left blank and instead supplying a templateId.
+ * @param {string} [options.templateId] - Template ID for control's content.
+ * @param {string} [options.priority=10] - Order of priority to show the control within the section.
+ * @param {string} [options.active=true] - Whether the control is active.
+ * @param {string} options.section - The ID of the section the control belongs to.
+ * @param {mixed} [options.setting] - The ID of the main setting or an instance of this setting.
+ * @param {mixed} options.settings - An object with keys (e.g. default) that maps to setting IDs or Setting/Value objects, or an array of setting IDs or Setting/Value objects.
+ * @param {mixed} options.settings.default - The ID of the setting the control relates to.
+ * @param {string} options.settings.data - @todo Is this used?
+ * @param {string} options.label - Label.
+ * @param {string} options.description - Description.
+ * @param {number} [options.instanceNumber] - Order in which this instance was created in relation to other instances.
+ * @param {object} [options.params] - Deprecated wrapper for the above properties.
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> initialize: function( id, options ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var control = this, deferredSettingIds = [], settings, gatherSettings;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5114,6 +5118,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> api.CodeEditorControl = api.Control.extend({
</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">+ * Initialize.
+ *
+ * @since 4.9.0
+ * @param {string} id - Unique identifier for the control instance.
+ * @param {object} options - Options hash for the control instance.
+ * @returns {void}
+ */
+ initialize: function( id, options ) {
+ var control = this;
+ api.Control.prototype.initialize.call( this, id, options );
+ control.deferred.codemirror = $.Deferred();
+ },
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Initialize the editor when the containing section is ready and expanded.
</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><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5272,6 +5290,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> event.stopPropagation();
</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.deferred.codemirror.resolveWith( control, [ control.editor.codemirror ] );
</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">@@ -5380,6 +5400,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> event.stopPropagation();
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</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.deferred.codemirror.rejectWith( control );
</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></pre>
</div>
</div>
</body>
</html>