From a415c29efee45520ae252d2aa28f1083a521cd7b Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Wed, 17 Apr 2024 09:56:49 +0200 Subject: Adding upstream version 6.4.3+dfsg1. Signed-off-by: Daniel Baumann --- wp-admin/js/accordion.js | 94 + wp-admin/js/accordion.min.js | 2 + wp-admin/js/application-passwords.js | 219 + wp-admin/js/application-passwords.min.js | 2 + wp-admin/js/auth-app.js | 165 + wp-admin/js/auth-app.min.js | 2 + wp-admin/js/code-editor.js | 346 + wp-admin/js/code-editor.min.js | 2 + wp-admin/js/color-picker.js | 356 + wp-admin/js/color-picker.min.js | 2 + wp-admin/js/comment.js | 102 + wp-admin/js/comment.min.js | 2 + wp-admin/js/common.js | 2247 ++++++ wp-admin/js/common.min.js | 2 + wp-admin/js/custom-background.js | 147 + wp-admin/js/custom-background.min.js | 2 + wp-admin/js/custom-header.js | 88 + wp-admin/js/customize-controls.js | 9353 +++++++++++++++++++++++ wp-admin/js/customize-controls.min.js | 2 + wp-admin/js/customize-nav-menus.js | 3429 +++++++++ wp-admin/js/customize-nav-menus.min.js | 2 + wp-admin/js/customize-widgets.js | 2372 ++++++ wp-admin/js/customize-widgets.min.js | 2 + wp-admin/js/dashboard.js | 839 ++ wp-admin/js/dashboard.min.js | 2 + wp-admin/js/edit-comments.js | 1356 ++++ wp-admin/js/edit-comments.min.js | 2 + wp-admin/js/editor-expand.js | 1617 ++++ wp-admin/js/editor-expand.min.js | 2 + wp-admin/js/editor.js | 1416 ++++ wp-admin/js/editor.min.js | 2 + wp-admin/js/farbtastic.js | 282 + wp-admin/js/gallery.js | 239 + wp-admin/js/gallery.min.js | 2 + wp-admin/js/image-edit.js | 1462 ++++ wp-admin/js/image-edit.min.js | 2 + wp-admin/js/inline-edit-post.js | 604 ++ wp-admin/js/inline-edit-post.min.js | 2 + wp-admin/js/inline-edit-tax.js | 294 + wp-admin/js/inline-edit-tax.min.js | 2 + wp-admin/js/iris.min.js | 5 + wp-admin/js/language-chooser.js | 36 + wp-admin/js/language-chooser.min.js | 2 + wp-admin/js/link.js | 140 + wp-admin/js/link.min.js | 2 + wp-admin/js/media-gallery.js | 43 + wp-admin/js/media-gallery.min.js | 2 + wp-admin/js/media-upload.js | 113 + wp-admin/js/media-upload.min.js | 2 + wp-admin/js/media.js | 242 + wp-admin/js/media.min.js | 2 + wp-admin/js/nav-menu.js | 1575 ++++ wp-admin/js/nav-menu.min.js | 2 + wp-admin/js/password-strength-meter.js | 149 + wp-admin/js/password-strength-meter.min.js | 2 + wp-admin/js/password-toggle.js | 40 + wp-admin/js/password-toggle.min.js | 2 + wp-admin/js/plugin-install.js | 229 + wp-admin/js/plugin-install.min.js | 2 + wp-admin/js/post.js | 1375 ++++ wp-admin/js/post.min.js | 2 + wp-admin/js/postbox.js | 654 ++ wp-admin/js/postbox.min.js | 2 + wp-admin/js/privacy-tools.js | 346 + wp-admin/js/privacy-tools.min.js | 2 + wp-admin/js/revisions.js | 1175 +++ wp-admin/js/revisions.min.js | 2 + wp-admin/js/set-post-thumbnail.js | 28 + wp-admin/js/set-post-thumbnail.min.js | 2 + wp-admin/js/site-health.js | 484 ++ wp-admin/js/site-health.min.js | 2 + wp-admin/js/svg-painter.js | 238 + wp-admin/js/svg-painter.min.js | 2 + wp-admin/js/tags-box.js | 440 ++ wp-admin/js/tags-box.min.js | 2 + wp-admin/js/tags-suggest.js | 209 + wp-admin/js/tags-suggest.min.js | 2 + wp-admin/js/tags.js | 167 + wp-admin/js/tags.min.js | 2 + wp-admin/js/theme-plugin-editor.js | 1026 +++ wp-admin/js/theme-plugin-editor.min.js | 2 + wp-admin/js/theme.js | 2120 +++++ wp-admin/js/theme.min.js | 2 + wp-admin/js/updates.js | 3020 ++++++++ wp-admin/js/updates.min.js | 2 + wp-admin/js/user-profile.js | 497 ++ wp-admin/js/user-profile.min.js | 2 + wp-admin/js/user-suggest.js | 64 + wp-admin/js/user-suggest.min.js | 2 + wp-admin/js/widgets.js | 763 ++ wp-admin/js/widgets.min.js | 2 + wp-admin/js/widgets/custom-html-widgets.js | 462 ++ wp-admin/js/widgets/custom-html-widgets.min.js | 2 + wp-admin/js/widgets/media-audio-widget.js | 154 + wp-admin/js/widgets/media-audio-widget.min.js | 2 + wp-admin/js/widgets/media-gallery-widget.js | 341 + wp-admin/js/widgets/media-gallery-widget.min.js | 2 + wp-admin/js/widgets/media-image-widget.js | 170 + wp-admin/js/widgets/media-image-widget.min.js | 2 + wp-admin/js/widgets/media-video-widget.js | 256 + wp-admin/js/widgets/media-video-widget.min.js | 2 + wp-admin/js/widgets/media-widgets.js | 1336 ++++ wp-admin/js/widgets/media-widgets.min.js | 2 + wp-admin/js/widgets/text-widgets.js | 550 ++ wp-admin/js/widgets/text-widgets.min.js | 2 + wp-admin/js/word-count.js | 220 + wp-admin/js/word-count.min.js | 2 + wp-admin/js/xfn.js | 23 + wp-admin/js/xfn.min.js | 2 + 109 files changed, 45823 insertions(+) create mode 100644 wp-admin/js/accordion.js create mode 100644 wp-admin/js/accordion.min.js create mode 100644 wp-admin/js/application-passwords.js create mode 100644 wp-admin/js/application-passwords.min.js create mode 100644 wp-admin/js/auth-app.js create mode 100644 wp-admin/js/auth-app.min.js create mode 100644 wp-admin/js/code-editor.js create mode 100644 wp-admin/js/code-editor.min.js create mode 100644 wp-admin/js/color-picker.js create mode 100644 wp-admin/js/color-picker.min.js create mode 100644 wp-admin/js/comment.js create mode 100644 wp-admin/js/comment.min.js create mode 100644 wp-admin/js/common.js create mode 100644 wp-admin/js/common.min.js create mode 100644 wp-admin/js/custom-background.js create mode 100644 wp-admin/js/custom-background.min.js create mode 100644 wp-admin/js/custom-header.js create mode 100644 wp-admin/js/customize-controls.js create mode 100644 wp-admin/js/customize-controls.min.js create mode 100644 wp-admin/js/customize-nav-menus.js create mode 100644 wp-admin/js/customize-nav-menus.min.js create mode 100644 wp-admin/js/customize-widgets.js create mode 100644 wp-admin/js/customize-widgets.min.js create mode 100644 wp-admin/js/dashboard.js create mode 100644 wp-admin/js/dashboard.min.js create mode 100644 wp-admin/js/edit-comments.js create mode 100644 wp-admin/js/edit-comments.min.js create mode 100644 wp-admin/js/editor-expand.js create mode 100644 wp-admin/js/editor-expand.min.js create mode 100644 wp-admin/js/editor.js create mode 100644 wp-admin/js/editor.min.js create mode 100644 wp-admin/js/farbtastic.js create mode 100644 wp-admin/js/gallery.js create mode 100644 wp-admin/js/gallery.min.js create mode 100644 wp-admin/js/image-edit.js create mode 100644 wp-admin/js/image-edit.min.js create mode 100644 wp-admin/js/inline-edit-post.js create mode 100644 wp-admin/js/inline-edit-post.min.js create mode 100644 wp-admin/js/inline-edit-tax.js create mode 100644 wp-admin/js/inline-edit-tax.min.js create mode 100644 wp-admin/js/iris.min.js create mode 100644 wp-admin/js/language-chooser.js create mode 100644 wp-admin/js/language-chooser.min.js create mode 100644 wp-admin/js/link.js create mode 100644 wp-admin/js/link.min.js create mode 100644 wp-admin/js/media-gallery.js create mode 100644 wp-admin/js/media-gallery.min.js create mode 100644 wp-admin/js/media-upload.js create mode 100644 wp-admin/js/media-upload.min.js create mode 100644 wp-admin/js/media.js create mode 100644 wp-admin/js/media.min.js create mode 100644 wp-admin/js/nav-menu.js create mode 100644 wp-admin/js/nav-menu.min.js create mode 100644 wp-admin/js/password-strength-meter.js create mode 100644 wp-admin/js/password-strength-meter.min.js create mode 100644 wp-admin/js/password-toggle.js create mode 100644 wp-admin/js/password-toggle.min.js create mode 100644 wp-admin/js/plugin-install.js create mode 100644 wp-admin/js/plugin-install.min.js create mode 100644 wp-admin/js/post.js create mode 100644 wp-admin/js/post.min.js create mode 100644 wp-admin/js/postbox.js create mode 100644 wp-admin/js/postbox.min.js create mode 100644 wp-admin/js/privacy-tools.js create mode 100644 wp-admin/js/privacy-tools.min.js create mode 100644 wp-admin/js/revisions.js create mode 100644 wp-admin/js/revisions.min.js create mode 100644 wp-admin/js/set-post-thumbnail.js create mode 100644 wp-admin/js/set-post-thumbnail.min.js create mode 100644 wp-admin/js/site-health.js create mode 100644 wp-admin/js/site-health.min.js create mode 100644 wp-admin/js/svg-painter.js create mode 100644 wp-admin/js/svg-painter.min.js create mode 100644 wp-admin/js/tags-box.js create mode 100644 wp-admin/js/tags-box.min.js create mode 100644 wp-admin/js/tags-suggest.js create mode 100644 wp-admin/js/tags-suggest.min.js create mode 100644 wp-admin/js/tags.js create mode 100644 wp-admin/js/tags.min.js create mode 100644 wp-admin/js/theme-plugin-editor.js create mode 100644 wp-admin/js/theme-plugin-editor.min.js create mode 100644 wp-admin/js/theme.js create mode 100644 wp-admin/js/theme.min.js create mode 100644 wp-admin/js/updates.js create mode 100644 wp-admin/js/updates.min.js create mode 100644 wp-admin/js/user-profile.js create mode 100644 wp-admin/js/user-profile.min.js create mode 100644 wp-admin/js/user-suggest.js create mode 100644 wp-admin/js/user-suggest.min.js create mode 100644 wp-admin/js/widgets.js create mode 100644 wp-admin/js/widgets.min.js create mode 100644 wp-admin/js/widgets/custom-html-widgets.js create mode 100644 wp-admin/js/widgets/custom-html-widgets.min.js create mode 100644 wp-admin/js/widgets/media-audio-widget.js create mode 100644 wp-admin/js/widgets/media-audio-widget.min.js create mode 100644 wp-admin/js/widgets/media-gallery-widget.js create mode 100644 wp-admin/js/widgets/media-gallery-widget.min.js create mode 100644 wp-admin/js/widgets/media-image-widget.js create mode 100644 wp-admin/js/widgets/media-image-widget.min.js create mode 100644 wp-admin/js/widgets/media-video-widget.js create mode 100644 wp-admin/js/widgets/media-video-widget.min.js create mode 100644 wp-admin/js/widgets/media-widgets.js create mode 100644 wp-admin/js/widgets/media-widgets.min.js create mode 100644 wp-admin/js/widgets/text-widgets.js create mode 100644 wp-admin/js/widgets/text-widgets.min.js create mode 100644 wp-admin/js/word-count.js create mode 100644 wp-admin/js/word-count.min.js create mode 100644 wp-admin/js/xfn.js create mode 100644 wp-admin/js/xfn.min.js (limited to 'wp-admin/js') diff --git a/wp-admin/js/accordion.js b/wp-admin/js/accordion.js new file mode 100644 index 0000000..c420e8c --- /dev/null +++ b/wp-admin/js/accordion.js @@ -0,0 +1,94 @@ +/** + * Accordion-folding functionality. + * + * Markup with the appropriate classes will be automatically hidden, + * with one section opening at a time when its title is clicked. + * Use the following markup structure for accordion behavior: + * + *
+ *
+ *

+ *
+ *
+ *
+ *
+ *

+ *
+ *
+ *
+ *
+ *

+ *
+ *
+ *
+ *
+ * + * Note that any appropriate tags may be used, as long as the above classes are present. + * + * @since 3.6.0 + * @output wp-admin/js/accordion.js + */ + +( function( $ ){ + + $( function () { + + // Expand/Collapse accordion sections on click. + $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { + if ( e.type === 'keydown' && 13 !== e.which ) { // "Return" key. + return; + } + + e.preventDefault(); // Keep this AFTER the key filter above. + + accordionSwitch( $( this ) ); + }); + + }); + + /** + * Close the current accordion section and open a new one. + * + * @param {Object} el Title element of the accordion section to toggle. + * @since 3.6.0 + */ + function accordionSwitch ( el ) { + var section = el.closest( '.accordion-section' ), + sectionToggleControl = section.find( '[aria-expanded]' ).first(), + container = section.closest( '.accordion-container' ), + siblings = container.find( '.open' ), + siblingsToggleControl = siblings.find( '[aria-expanded]' ).first(), + content = section.find( '.accordion-section-content' ); + + // This section has no content and cannot be expanded. + if ( section.hasClass( 'cannot-expand' ) ) { + return; + } + + // Add a class to the container to let us know something is happening inside. + // This helps in cases such as hiding a scrollbar while animations are executing. + container.addClass( 'opening' ); + + if ( section.hasClass( 'open' ) ) { + section.toggleClass( 'open' ); + content.toggle( true ).slideToggle( 150 ); + } else { + siblingsToggleControl.attr( 'aria-expanded', 'false' ); + siblings.removeClass( 'open' ); + siblings.find( '.accordion-section-content' ).show().slideUp( 150 ); + content.toggle( false ).slideToggle( 150 ); + section.toggleClass( 'open' ); + } + + // We have to wait for the animations to finish. + setTimeout(function(){ + container.removeClass( 'opening' ); + }, 150); + + // If there's an element with an aria-expanded attribute, assume it's a toggle control and toggle the aria-expanded value. + if ( sectionToggleControl ) { + sectionToggleControl.attr( 'aria-expanded', String( sectionToggleControl.attr( 'aria-expanded' ) === 'false' ) ); + } + } + +})(jQuery); diff --git a/wp-admin/js/accordion.min.js b/wp-admin/js/accordion.min.js new file mode 100644 index 0000000..d54a50e --- /dev/null +++ b/wp-admin/js/accordion.min.js @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +!function(s){s(function(){s(".accordion-container").on("click keydown",".accordion-section-title",function(e){var n,o,a,i,t;"keydown"===e.type&&13!==e.which||(e.preventDefault(),e=(e=s(this)).closest(".accordion-section"),n=e.find("[aria-expanded]").first(),o=e.closest(".accordion-container"),a=o.find(".open"),i=a.find("[aria-expanded]").first(),t=e.find(".accordion-section-content"),e.hasClass("cannot-expand"))||(o.addClass("opening"),e.hasClass("open")?(e.toggleClass("open"),t.toggle(!0).slideToggle(150)):(i.attr("aria-expanded","false"),a.removeClass("open"),a.find(".accordion-section-content").show().slideUp(150),t.toggle(!1).slideToggle(150),e.toggleClass("open")),setTimeout(function(){o.removeClass("opening")},150),n&&n.attr("aria-expanded",String("false"===n.attr("aria-expanded"))))})})}(jQuery); \ No newline at end of file diff --git a/wp-admin/js/application-passwords.js b/wp-admin/js/application-passwords.js new file mode 100644 index 0000000..c79cdb8 --- /dev/null +++ b/wp-admin/js/application-passwords.js @@ -0,0 +1,219 @@ +/** + * @output wp-admin/js/application-passwords.js + */ + +( function( $ ) { + var $appPassSection = $( '#application-passwords-section' ), + $newAppPassForm = $appPassSection.find( '.create-application-password' ), + $newAppPassField = $newAppPassForm.find( '.input' ), + $newAppPassButton = $newAppPassForm.find( '.button' ), + $appPassTwrapper = $appPassSection.find( '.application-passwords-list-table-wrapper' ), + $appPassTbody = $appPassSection.find( 'tbody' ), + $appPassTrNoItems = $appPassTbody.find( '.no-items' ), + $removeAllBtn = $( '#revoke-all-application-passwords' ), + tmplNewAppPass = wp.template( 'new-application-password' ), + tmplAppPassRow = wp.template( 'application-password-row' ), + userId = $( '#user_id' ).val(); + + $newAppPassButton.on( 'click', function( e ) { + e.preventDefault(); + + if ( $newAppPassButton.prop( 'aria-disabled' ) ) { + return; + } + + var name = $newAppPassField.val(); + + if ( 0 === name.length ) { + $newAppPassField.trigger( 'focus' ); + return; + } + + clearNotices(); + $newAppPassButton.prop( 'aria-disabled', true ).addClass( 'disabled' ); + + var request = { + name: name + }; + + /** + * Filters the request data used to create a new Application Password. + * + * @since 5.6.0 + * + * @param {Object} request The request data. + * @param {number} userId The id of the user the password is added for. + */ + request = wp.hooks.applyFilters( 'wp_application_passwords_new_password_request', request, userId ); + + wp.apiRequest( { + path: '/wp/v2/users/' + userId + '/application-passwords?_locale=user', + method: 'POST', + data: request + } ).always( function() { + $newAppPassButton.removeProp( 'aria-disabled' ).removeClass( 'disabled' ); + } ).done( function( response ) { + $newAppPassField.val( '' ); + $newAppPassButton.prop( 'disabled', false ); + + $newAppPassForm.after( tmplNewAppPass( { + name: response.name, + password: response.password + } ) ); + $( '.new-application-password-notice' ).attr( 'tabindex', '-1' ).trigger( 'focus' ); + + $appPassTbody.prepend( tmplAppPassRow( response ) ); + + $appPassTwrapper.show(); + $appPassTrNoItems.remove(); + + /** + * Fires after an application password has been successfully created. + * + * @since 5.6.0 + * + * @param {Object} response The response data from the REST API. + * @param {Object} request The request data used to create the password. + */ + wp.hooks.doAction( 'wp_application_passwords_created_password', response, request ); + } ).fail( handleErrorResponse ); + } ); + + $appPassTbody.on( 'click', '.delete', function( e ) { + e.preventDefault(); + + if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke this password? This action cannot be undone.' ) ) ) { + return; + } + + var $submitButton = $( this ), + $tr = $submitButton.closest( 'tr' ), + uuid = $tr.data( 'uuid' ); + + clearNotices(); + $submitButton.prop( 'disabled', true ); + + wp.apiRequest( { + path: '/wp/v2/users/' + userId + '/application-passwords/' + uuid + '?_locale=user', + method: 'DELETE' + } ).always( function() { + $submitButton.prop( 'disabled', false ); + } ).done( function( response ) { + if ( response.deleted ) { + if ( 0 === $tr.siblings().length ) { + $appPassTwrapper.hide(); + } + $tr.remove(); + + addNotice( wp.i18n.__( 'Application password revoked.' ), 'success' ).trigger( 'focus' ); + } + } ).fail( handleErrorResponse ); + } ); + + $removeAllBtn.on( 'click', function( e ) { + e.preventDefault(); + + if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke all passwords? This action cannot be undone.' ) ) ) { + return; + } + + var $submitButton = $( this ); + + clearNotices(); + $submitButton.prop( 'disabled', true ); + + wp.apiRequest( { + path: '/wp/v2/users/' + userId + '/application-passwords?_locale=user', + method: 'DELETE' + } ).always( function() { + $submitButton.prop( 'disabled', false ); + } ).done( function( response ) { + if ( response.deleted ) { + $appPassTbody.children().remove(); + $appPassSection.children( '.new-application-password' ).remove(); + $appPassTwrapper.hide(); + + addNotice( wp.i18n.__( 'All application passwords revoked.' ), 'success' ).trigger( 'focus' ); + } + } ).fail( handleErrorResponse ); + } ); + + $appPassSection.on( 'click', '.notice-dismiss', function( e ) { + e.preventDefault(); + var $el = $( this ).parent(); + $el.removeAttr( 'role' ); + $el.fadeTo( 100, 0, function () { + $el.slideUp( 100, function () { + $el.remove(); + $newAppPassField.trigger( 'focus' ); + } ); + } ); + } ); + + $newAppPassField.on( 'keypress', function ( e ) { + if ( 13 === e.which ) { + e.preventDefault(); + $newAppPassButton.trigger( 'click' ); + } + } ); + + // If there are no items, don't display the table yet. If there are, show it. + if ( 0 === $appPassTbody.children( 'tr' ).not( $appPassTrNoItems ).length ) { + $appPassTwrapper.hide(); + } + + /** + * Handles an error response from the REST API. + * + * @since 5.6.0 + * + * @param {jqXHR} xhr The XHR object from the ajax call. + * @param {string} textStatus The string categorizing the ajax request's status. + * @param {string} errorThrown The HTTP status error text. + */ + function handleErrorResponse( xhr, textStatus, errorThrown ) { + var errorMessage = errorThrown; + + if ( xhr.responseJSON && xhr.responseJSON.message ) { + errorMessage = xhr.responseJSON.message; + } + + addNotice( errorMessage, 'error' ); + } + + /** + * Displays a message in the Application Passwords section. + * + * @since 5.6.0 + * + * @param {string} message The message to display. + * @param {string} type The notice type. Either 'success' or 'error'. + * @returns {jQuery} The notice element. + */ + function addNotice( message, type ) { + var $notice = $( '
' ) + .attr( 'role', 'alert' ) + .attr( 'tabindex', '-1' ) + .addClass( 'is-dismissible notice notice-' + type ) + .append( $( '

' ).text( message ) ) + .append( + $( '' ) + .attr( 'type', 'button' ) + .addClass( 'notice-dismiss' ) + .append( $( '' ).addClass( 'screen-reader-text' ).text( wp.i18n.__( 'Dismiss this notice.' ) ) ) + ); + + $newAppPassForm.after( $notice ); + + return $notice; + } + + /** + * Clears notice messages from the Application Passwords section. + * + * @since 5.6.0 + */ + function clearNotices() { + $( '.notice', $appPassSection ).remove(); + } +}( jQuery ) ); diff --git a/wp-admin/js/application-passwords.min.js b/wp-admin/js/application-passwords.min.js new file mode 100644 index 0000000..12d7cf7 --- /dev/null +++ b/wp-admin/js/application-passwords.min.js @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +!function(o){var a=o("#application-passwords-section"),i=a.find(".create-application-password"),t=i.find(".input"),n=i.find(".button"),p=a.find(".application-passwords-list-table-wrapper"),r=a.find("tbody"),d=r.find(".no-items"),e=o("#revoke-all-application-passwords"),l=wp.template("new-application-password"),c=wp.template("application-password-row"),u=o("#user_id").val();function w(e,s,a){f(a=e.responseJSON&&e.responseJSON.message?e.responseJSON.message:a,"error")}function f(e,s){s=o("
").attr("role","alert").attr("tabindex","-1").addClass("is-dismissible notice notice-"+s).append(o("

").text(e)).append(o("").attr("type","button").addClass("notice-dismiss").append(o("").addClass("screen-reader-text").text(wp.i18n.__("Dismiss this notice."))));return i.after(s),s}function v(){o(".notice",a).remove()}n.on("click",function(e){var s;e.preventDefault(),n.prop("aria-disabled")||(0===(e=t.val()).length?t.trigger("focus"):(v(),n.prop("aria-disabled",!0).addClass("disabled"),s={name:e},s=wp.hooks.applyFilters("wp_application_passwords_new_password_request",s,u),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords?_locale=user",method:"POST",data:s}).always(function(){n.removeProp("aria-disabled").removeClass("disabled")}).done(function(e){t.val(""),n.prop("disabled",!1),i.after(l({name:e.name,password:e.password})),o(".new-application-password-notice").attr("tabindex","-1").trigger("focus"),r.prepend(c(e)),p.show(),d.remove(),wp.hooks.doAction("wp_application_passwords_created_password",e,s)}).fail(w)))}),r.on("click",".delete",function(e){var s,a;e.preventDefault(),window.confirm(wp.i18n.__("Are you sure you want to revoke this password? This action cannot be undone."))&&(s=o(this),e=(a=s.closest("tr")).data("uuid"),v(),s.prop("disabled",!0),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords/"+e+"?_locale=user",method:"DELETE"}).always(function(){s.prop("disabled",!1)}).done(function(e){e.deleted&&(0===a.siblings().length&&p.hide(),a.remove(),f(wp.i18n.__("Application password revoked."),"success").trigger("focus"))}).fail(w))}),e.on("click",function(e){var s;e.preventDefault(),window.confirm(wp.i18n.__("Are you sure you want to revoke all passwords? This action cannot be undone."))&&(s=o(this),v(),s.prop("disabled",!0),wp.apiRequest({path:"/wp/v2/users/"+u+"/application-passwords?_locale=user",method:"DELETE"}).always(function(){s.prop("disabled",!1)}).done(function(e){e.deleted&&(r.children().remove(),a.children(".new-application-password").remove(),p.hide(),f(wp.i18n.__("All application passwords revoked."),"success").trigger("focus"))}).fail(w))}),a.on("click",".notice-dismiss",function(e){e.preventDefault();var s=o(this).parent();s.removeAttr("role"),s.fadeTo(100,0,function(){s.slideUp(100,function(){s.remove(),t.trigger("focus")})})}),t.on("keypress",function(e){13===e.which&&(e.preventDefault(),n.trigger("click"))}),0===r.children("tr").not(d).length&&p.hide()}(jQuery); \ No newline at end of file diff --git a/wp-admin/js/auth-app.js b/wp-admin/js/auth-app.js new file mode 100644 index 0000000..99478d1 --- /dev/null +++ b/wp-admin/js/auth-app.js @@ -0,0 +1,165 @@ +/** + * @output wp-admin/js/auth-app.js + */ + +/* global authApp */ + +( function( $, authApp ) { + var $appNameField = $( '#app_name' ), + $approveBtn = $( '#approve' ), + $rejectBtn = $( '#reject' ), + $form = $appNameField.closest( 'form' ), + context = { + userLogin: authApp.user_login, + successUrl: authApp.success, + rejectUrl: authApp.reject + }; + + $approveBtn.on( 'click', function( e ) { + var name = $appNameField.val(), + appId = $( 'input[name="app_id"]', $form ).val(); + + e.preventDefault(); + + if ( $approveBtn.prop( 'aria-disabled' ) ) { + return; + } + + if ( 0 === name.length ) { + $appNameField.trigger( 'focus' ); + return; + } + + $approveBtn.prop( 'aria-disabled', true ).addClass( 'disabled' ); + + var request = { + name: name + }; + + if ( appId.length > 0 ) { + request.app_id = appId; + } + + /** + * Filters the request data used to Authorize an Application Password request. + * + * @since 5.6.0 + * + * @param {Object} request The request data. + * @param {Object} context Context about the Application Password request. + * @param {string} context.userLogin The user's login username. + * @param {string} context.successUrl The URL the user will be redirected to after approving the request. + * @param {string} context.rejectUrl The URL the user will be redirected to after rejecting the request. + */ + request = wp.hooks.applyFilters( 'wp_application_passwords_approve_app_request', request, context ); + + wp.apiRequest( { + path: '/wp/v2/users/me/application-passwords?_locale=user', + method: 'POST', + data: request + } ).done( function( response, textStatus, jqXHR ) { + + /** + * Fires when an Authorize Application Password request has been successfully approved. + * + * In most cases, this should be used in combination with the {@see 'wp_authorize_application_password_form_approved_no_js'} + * action to ensure that both the JS and no-JS variants are handled. + * + * @since 5.6.0 + * + * @param {Object} response The response from the REST API. + * @param {string} response.password The newly created password. + * @param {string} textStatus The status of the request. + * @param {jqXHR} jqXHR The underlying jqXHR object that made the request. + */ + wp.hooks.doAction( 'wp_application_passwords_approve_app_request_success', response, textStatus, jqXHR ); + + var raw = authApp.success, + url, message, $notice; + + if ( raw ) { + url = raw + ( -1 === raw.indexOf( '?' ) ? '?' : '&' ) + + 'site_url=' + encodeURIComponent( authApp.site_url ) + + '&user_login=' + encodeURIComponent( authApp.user_login ) + + '&password=' + encodeURIComponent( response.password ); + + window.location = url; + } else { + message = wp.i18n.sprintf( + /* translators: %s: Application name. */ + '', + '' + ) + ' '; + $notice = $( '
' ) + .attr( 'role', 'alert' ) + .attr( 'tabindex', -1 ) + .addClass( 'notice notice-success notice-alt' ) + .append( $( '

' ).addClass( 'application-password-display' ).html( message ) ) + .append( '

' + wp.i18n.__( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ) + '

' ); + + // We're using .text() to write the variables to avoid any chance of XSS. + $( 'strong', $notice ).text( response.name ); + $( 'input', $notice ).val( response.password ); + + $form.replaceWith( $notice ); + $notice.trigger( 'focus' ); + } + } ).fail( function( jqXHR, textStatus, errorThrown ) { + var errorMessage = errorThrown, + error = null; + + if ( jqXHR.responseJSON ) { + error = jqXHR.responseJSON; + + if ( error.message ) { + errorMessage = error.message; + } + } + + var $notice = $( '
' ) + .attr( 'role', 'alert' ) + .addClass( 'notice notice-error' ) + .append( $( '

' ).text( errorMessage ) ); + + $( 'h1' ).after( $notice ); + + $approveBtn.removeProp( 'aria-disabled', false ).removeClass( 'disabled' ); + + /** + * Fires when an Authorize Application Password request encountered an error when trying to approve the request. + * + * @since 5.6.0 + * @since 5.6.1 Corrected action name and signature. + * + * @param {Object|null} error The error from the REST API. May be null if the server did not send proper JSON. + * @param {string} textStatus The status of the request. + * @param {string} errorThrown The error message associated with the response status code. + * @param {jqXHR} jqXHR The underlying jqXHR object that made the request. + */ + wp.hooks.doAction( 'wp_application_passwords_approve_app_request_error', error, textStatus, errorThrown, jqXHR ); + } ); + } ); + + $rejectBtn.on( 'click', function( e ) { + e.preventDefault(); + + /** + * Fires when an Authorize Application Password request has been rejected by the user. + * + * @since 5.6.0 + * + * @param {Object} context Context about the Application Password request. + * @param {string} context.userLogin The user's login username. + * @param {string} context.successUrl The URL the user will be redirected to after approving the request. + * @param {string} context.rejectUrl The URL the user will be redirected to after rejecting the request. + */ + wp.hooks.doAction( 'wp_application_passwords_reject_app', context ); + + // @todo: Make a better way to do this so it feels like less of a semi-open redirect. + window.location = authApp.reject; + } ); + + $form.on( 'submit', function( e ) { + e.preventDefault(); + } ); +}( jQuery, authApp ) ); diff --git a/wp-admin/js/auth-app.min.js b/wp-admin/js/auth-app.min.js new file mode 100644 index 0000000..110fcdf --- /dev/null +++ b/wp-admin/js/auth-app.min.js @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +!function(t,s){var p=t("#app_name"),r=t("#approve"),e=t("#reject"),n=p.closest("form"),i={userLogin:s.user_login,successUrl:s.success,rejectUrl:s.reject};r.on("click",function(e){var a=p.val(),o=t('input[name="app_id"]',n).val();e.preventDefault(),r.prop("aria-disabled")||(0===a.length?p.trigger("focus"):(r.prop("aria-disabled",!0).addClass("disabled"),e={name:a},0'+wp.i18n.__("Your new password for %s is:")+"","")+' ',o=t("
").attr("role","alert").attr("tabindex",-1).addClass("notice notice-success notice-alt").append(t("

").addClass("application-password-display").html(a)).append("

"+wp.i18n.__("Be sure to save this in a safe location. You will not be able to retrieve it.")+"

"),t("strong",o).text(e.name),t("input",o).val(e.password),n.replaceWith(o),o.trigger("focus"))}).fail(function(e,a,o){var s=o,p=null,s=(e.responseJSON&&(p=e.responseJSON).message&&(s=p.message),t("
").attr("role","alert").addClass("notice notice-error").append(t("

").text(s)));t("h1").after(s),r.removeProp("aria-disabled",!1).removeClass("disabled"),wp.hooks.doAction("wp_application_passwords_approve_app_request_error",p,a,o,e)})))}),e.on("click",function(e){e.preventDefault(),wp.hooks.doAction("wp_application_passwords_reject_app",i),window.location=s.reject}),n.on("submit",function(e){e.preventDefault()})}(jQuery,authApp); \ No newline at end of file diff --git a/wp-admin/js/code-editor.js b/wp-admin/js/code-editor.js new file mode 100644 index 0000000..68365d7 --- /dev/null +++ b/wp-admin/js/code-editor.js @@ -0,0 +1,346 @@ +/** + * @output wp-admin/js/code-editor.js + */ + +if ( 'undefined' === typeof window.wp ) { + /** + * @namespace wp + */ + window.wp = {}; +} +if ( 'undefined' === typeof window.wp.codeEditor ) { + /** + * @namespace wp.codeEditor + */ + window.wp.codeEditor = {}; +} + +( function( $, wp ) { + 'use strict'; + + /** + * Default settings for code editor. + * + * @since 4.9.0 + * @type {object} + */ + wp.codeEditor.defaultSettings = { + codemirror: {}, + csslint: {}, + htmlhint: {}, + jshint: {}, + onTabNext: function() {}, + onTabPrevious: function() {}, + onChangeLintingErrors: function() {}, + onUpdateErrorNotice: function() {} + }; + + /** + * Configure linting. + * + * @param {CodeMirror} editor - Editor. + * @param {Object} settings - Code editor settings. + * @param {Object} settings.codeMirror - Settings for CodeMirror. + * @param {Function} settings.onChangeLintingErrors - Callback for when there are changes to linting errors. + * @param {Function} settings.onUpdateErrorNotice - Callback to update error notice. + * + * @return {void} + */ + function configureLinting( editor, settings ) { // eslint-disable-line complexity + var currentErrorAnnotations = [], previouslyShownErrorAnnotations = []; + + /** + * Call the onUpdateErrorNotice if there are new errors to show. + * + * @return {void} + */ + function updateErrorNotice() { + if ( settings.onUpdateErrorNotice && ! _.isEqual( currentErrorAnnotations, previouslyShownErrorAnnotations ) ) { + settings.onUpdateErrorNotice( currentErrorAnnotations, editor ); + previouslyShownErrorAnnotations = currentErrorAnnotations; + } + } + + /** + * Get lint options. + * + * @return {Object} Lint options. + */ + function getLintOptions() { // eslint-disable-line complexity + var options = editor.getOption( 'lint' ); + + if ( ! options ) { + return false; + } + + if ( true === options ) { + options = {}; + } else if ( _.isObject( options ) ) { + options = $.extend( {}, options ); + } + + /* + * Note that rules must be sent in the "deprecated" lint.options property + * to prevent linter from complaining about unrecognized options. + * See . + */ + if ( ! options.options ) { + options.options = {}; + } + + // Configure JSHint. + if ( 'javascript' === settings.codemirror.mode && settings.jshint ) { + $.extend( options.options, settings.jshint ); + } + + // Configure CSSLint. + if ( 'css' === settings.codemirror.mode && settings.csslint ) { + $.extend( options.options, settings.csslint ); + } + + // Configure HTMLHint. + if ( 'htmlmixed' === settings.codemirror.mode && settings.htmlhint ) { + options.options.rules = $.extend( {}, settings.htmlhint ); + + if ( settings.jshint ) { + options.options.rules.jshint = settings.jshint; + } + if ( settings.csslint ) { + options.options.rules.csslint = settings.csslint; + } + } + + // Wrap the onUpdateLinting CodeMirror event to route to onChangeLintingErrors and onUpdateErrorNotice. + options.onUpdateLinting = (function( onUpdateLintingOverridden ) { + return function( annotations, annotationsSorted, cm ) { + var errorAnnotations = _.filter( annotations, function( annotation ) { + return 'error' === annotation.severity; + } ); + + if ( onUpdateLintingOverridden ) { + onUpdateLintingOverridden.apply( annotations, annotationsSorted, cm ); + } + + // Skip if there are no changes to the errors. + if ( _.isEqual( errorAnnotations, currentErrorAnnotations ) ) { + return; + } + + currentErrorAnnotations = errorAnnotations; + + if ( settings.onChangeLintingErrors ) { + settings.onChangeLintingErrors( errorAnnotations, annotations, annotationsSorted, cm ); + } + + /* + * Update notifications when the editor is not focused to prevent error message + * from overwhelming the user during input, unless there are now no errors or there + * were previously errors shown. In these cases, update immediately so they can know + * that they fixed the errors. + */ + if ( ! editor.state.focused || 0 === currentErrorAnnotations.length || previouslyShownErrorAnnotations.length > 0 ) { + updateErrorNotice(); + } + }; + })( options.onUpdateLinting ); + + return options; + } + + editor.setOption( 'lint', getLintOptions() ); + + // Keep lint options populated. + editor.on( 'optionChange', function( cm, option ) { + var options, gutters, gutterName = 'CodeMirror-lint-markers'; + if ( 'lint' !== option ) { + return; + } + gutters = editor.getOption( 'gutters' ) || []; + options = editor.getOption( 'lint' ); + if ( true === options ) { + if ( ! _.contains( gutters, gutterName ) ) { + editor.setOption( 'gutters', [ gutterName ].concat( gutters ) ); + } + editor.setOption( 'lint', getLintOptions() ); // Expand to include linting options. + } else if ( ! options ) { + editor.setOption( 'gutters', _.without( gutters, gutterName ) ); + } + + // Force update on error notice to show or hide. + if ( editor.getOption( 'lint' ) ) { + editor.performLint(); + } else { + currentErrorAnnotations = []; + updateErrorNotice(); + } + } ); + + // Update error notice when leaving the editor. + editor.on( 'blur', updateErrorNotice ); + + // Work around hint selection with mouse causing focus to leave editor. + editor.on( 'startCompletion', function() { + editor.off( 'blur', updateErrorNotice ); + } ); + editor.on( 'endCompletion', function() { + var editorRefocusWait = 500; + editor.on( 'blur', updateErrorNotice ); + + // Wait for editor to possibly get re-focused after selection. + _.delay( function() { + if ( ! editor.state.focused ) { + updateErrorNotice(); + } + }, editorRefocusWait ); + }); + + /* + * Make sure setting validities are set if the user tries to click Publish + * while an autocomplete dropdown is still open. The Customizer will block + * saving when a setting has an error notifications on it. This is only + * necessary for mouse interactions because keyboards will have already + * blurred the field and cause onUpdateErrorNotice to have already been + * called. + */ + $( document.body ).on( 'mousedown', function( event ) { + if ( editor.state.focused && ! $.contains( editor.display.wrapper, event.target ) && ! $( event.target ).hasClass( 'CodeMirror-hint' ) ) { + updateErrorNotice(); + } + }); + } + + /** + * Configure tabbing. + * + * @param {CodeMirror} codemirror - Editor. + * @param {Object} settings - Code editor settings. + * @param {Object} settings.codeMirror - Settings for CodeMirror. + * @param {Function} settings.onTabNext - Callback to handle tabbing to the next tabbable element. + * @param {Function} settings.onTabPrevious - Callback to handle tabbing to the previous tabbable element. + * + * @return {void} + */ + function configureTabbing( codemirror, settings ) { + var $textarea = $( codemirror.getTextArea() ); + + codemirror.on( 'blur', function() { + $textarea.data( 'next-tab-blurs', false ); + }); + codemirror.on( 'keydown', function onKeydown( editor, event ) { + var tabKeyCode = 9, escKeyCode = 27; + + // Take note of the ESC keypress so that the next TAB can focus outside the editor. + if ( escKeyCode === event.keyCode ) { + $textarea.data( 'next-tab-blurs', true ); + return; + } + + // Short-circuit if tab key is not being pressed or the tab key press should move focus. + if ( tabKeyCode !== event.keyCode || ! $textarea.data( 'next-tab-blurs' ) ) { + return; + } + + // Focus on previous or next focusable item. + if ( event.shiftKey ) { + settings.onTabPrevious( codemirror, event ); + } else { + settings.onTabNext( codemirror, event ); + } + + // Reset tab state. + $textarea.data( 'next-tab-blurs', false ); + + // Prevent tab character from being added. + event.preventDefault(); + }); + } + + /** + * @typedef {object} wp.codeEditor~CodeEditorInstance + * @property {object} settings - The code editor settings. + * @property {CodeMirror} codemirror - The CodeMirror instance. + */ + + /** + * Initialize Code Editor (CodeMirror) for an existing textarea. + * + * @since 4.9.0 + * + * @param {string|jQuery|Element} textarea - The HTML id, jQuery object, or DOM Element for the textarea that is used for the editor. + * @param {Object} [settings] - Settings to override defaults. + * @param {Function} [settings.onChangeLintingErrors] - Callback for when the linting errors have changed. + * @param {Function} [settings.onUpdateErrorNotice] - Callback for when error notice should be displayed. + * @param {Function} [settings.onTabPrevious] - Callback to handle tabbing to the previous tabbable element. + * @param {Function} [settings.onTabNext] - Callback to handle tabbing to the next tabbable element. + * @param {Object} [settings.codemirror] - Options for CodeMirror. + * @param {Object} [settings.csslint] - Rules for CSSLint. + * @param {Object} [settings.htmlhint] - Rules for HTMLHint. + * @param {Object} [settings.jshint] - Rules for JSHint. + * + * @return {CodeEditorInstance} Instance. + */ + wp.codeEditor.initialize = function initialize( textarea, settings ) { + var $textarea, codemirror, instanceSettings, instance; + if ( 'string' === typeof textarea ) { + $textarea = $( '#' + textarea ); + } else { + $textarea = $( textarea ); + } + + instanceSettings = $.extend( {}, wp.codeEditor.defaultSettings, settings ); + instanceSettings.codemirror = $.extend( {}, instanceSettings.codemirror ); + + codemirror = wp.CodeMirror.fromTextArea( $textarea[0], instanceSettings.codemirror ); + + configureLinting( codemirror, instanceSettings ); + + instance = { + settings: instanceSettings, + codemirror: codemirror + }; + + if ( codemirror.showHint ) { + codemirror.on( 'keyup', function( editor, event ) { // eslint-disable-line complexity + var shouldAutocomplete, isAlphaKey = /^[a-zA-Z]$/.test( event.key ), lineBeforeCursor, innerMode, token; + if ( codemirror.state.completionActive && isAlphaKey ) { + return; + } + + // Prevent autocompletion in string literals or comments. + token = codemirror.getTokenAt( codemirror.getCursor() ); + if ( 'string' === token.type || 'comment' === token.type ) { + return; + } + + innerMode = wp.CodeMirror.innerMode( codemirror.getMode(), token.state ).mode.name; + lineBeforeCursor = codemirror.doc.getLine( codemirror.doc.getCursor().line ).substr( 0, codemirror.doc.getCursor().ch ); + if ( 'html' === innerMode || 'xml' === innerMode ) { + shouldAutocomplete = + '<' === event.key || + '/' === event.key && 'tag' === token.type || + isAlphaKey && 'tag' === token.type || + isAlphaKey && 'attribute' === token.type || + '=' === token.string && token.state.htmlState && token.state.htmlState.tagName; + } else if ( 'css' === innerMode ) { + shouldAutocomplete = + isAlphaKey || + ':' === event.key || + ' ' === event.key && /:\s+$/.test( lineBeforeCursor ); + } else if ( 'javascript' === innerMode ) { + shouldAutocomplete = isAlphaKey || '.' === event.key; + } else if ( 'clike' === innerMode && 'php' === codemirror.options.mode ) { + shouldAutocomplete = 'keyword' === token.type || 'variable' === token.type; + } + if ( shouldAutocomplete ) { + codemirror.showHint( { completeSingle: false } ); + } + }); + } + + // Facilitate tabbing out of the editor. + configureTabbing( codemirror, settings ); + + return instance; + }; + +})( window.jQuery, window.wp ); diff --git a/wp-admin/js/code-editor.min.js b/wp-admin/js/code-editor.min.js new file mode 100644 index 0000000..1e35ef5 --- /dev/null +++ b/wp-admin/js/code-editor.min.js @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +void 0===window.wp&&(window.wp={}),void 0===window.wp.codeEditor&&(window.wp.codeEditor={}),function(u,d){"use strict";function s(r,s){var a=[],d=[];function c(){s.onUpdateErrorNotice&&!_.isEqual(a,d)&&(s.onUpdateErrorNotice(a,r),d=a)}function i(){var i,t=r.getOption("lint");return!!t&&(!0===t?t={}:_.isObject(t)&&(t=u.extend({},t)),t.options||(t.options={}),"javascript"===s.codemirror.mode&&s.jshint&&u.extend(t.options,s.jshint),"css"===s.codemirror.mode&&s.csslint&&u.extend(t.options,s.csslint),"htmlmixed"===s.codemirror.mode&&s.htmlhint&&(t.options.rules=u.extend({},s.htmlhint),s.jshint&&(t.options.rules.jshint=s.jshint),s.csslint)&&(t.options.rules.csslint=s.csslint),t.onUpdateLinting=(i=t.onUpdateLinting,function(t,e,n){var o=_.filter(t,function(t){return"error"===t.severity});i&&i.apply(t,e,n),!_.isEqual(o,a)&&(a=o,s.onChangeLintingErrors&&s.onChangeLintingErrors(o,t,e,n),!r.state.focused||0===a.length||0' ) + .after( self.button ); + + /* + * The input wrapper now contains the label+input+Clear/Default button. + * Store a reference to the input wrapper: we'll use this to toggle + * the controls visibility. + */ + self.inputWrapper = el.closest( '.wp-picker-input-wrap' ); + + el.iris( { + target: self.pickerContainer, + hide: self.options.hide, + width: self.options.width, + mode: self.options.mode, + palettes: self.options.palettes, + /** + * Handles the onChange event if one has been defined in the options and additionally + * sets the background color for the toggler element. + * + * @since 3.5.0 + * + * @ignore + * + * @param {Event} event The event that's being called. + * @param {HTMLElement} ui The HTMLElement containing the color picker. + * + * @return {void} + */ + change: function( event, ui ) { + self.toggler.css( { backgroundColor: ui.color.toString() } ); + + if ( typeof self.options.change === 'function' ) { + self.options.change.call( this, event, ui ); + } + } + } ); + + el.val( self.initialValue ); + self._addListeners(); + + // Force the color picker to always be closed on initial load. + if ( ! self.options.hide ) { + self.toggler.click(); + } + }, + /** + * Binds event listeners to the color picker. + * + * @since 3.5.0 + * @access private + * + * @return {void} + */ + _addListeners: function() { + var self = this; + + /** + * Prevent any clicks inside this widget from leaking to the top and closing it. + * + * @since 3.5.0 + * + * @param {Event} event The event that's being called. + * + * @return {void} + */ + self.wrap.on( 'click.wpcolorpicker', function( event ) { + event.stopPropagation(); + }); + + /** + * Open or close the color picker depending on the class. + * + * @since 3.5.0 + */ + self.toggler.on( 'click', function(){ + if ( self.toggler.hasClass( 'wp-picker-open' ) ) { + self.close(); + } else { + self.open(); + } + }); + + /** + * Checks if value is empty when changing the color in the color picker. + * If so, the background color is cleared. + * + * @since 3.5.0 + * + * @param {Event} event The event that's being called. + * + * @return {void} + */ + self.element.on( 'change', function( event ) { + var me = $( this ), + val = me.val(); + + if ( val === '' || val === '#' ) { + self.toggler.css( 'backgroundColor', '' ); + // Fire clear callback if we have one. + if ( typeof self.options.clear === 'function' ) { + self.options.clear.call( this, event ); + } + } + }); + + /** + * Enables the user to either clear the color in the color picker or revert back to the default color. + * + * @since 3.5.0 + * + * @param {Event} event The event that's being called. + * + * @return {void} + */ + self.button.on( 'click', function( event ) { + var me = $( this ); + if ( me.hasClass( 'wp-picker-clear' ) ) { + self.element.val( '' ); + self.toggler.css( 'backgroundColor', '' ); + if ( typeof self.options.clear === 'function' ) { + self.options.clear.call( this, event ); + } + } else if ( me.hasClass( 'wp-picker-default' ) ) { + self.element.val( self.options.defaultColor ).change(); + } + }); + }, + /** + * Opens the color picker dialog. + * + * @since 3.5.0 + * + * @return {void} + */ + open: function() { + this.element.iris( 'toggle' ); + this.inputWrapper.removeClass( 'hidden' ); + this.wrap.addClass( 'wp-picker-active' ); + this.toggler + .addClass( 'wp-picker-open' ) + .attr( 'aria-expanded', 'true' ); + $( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close ); + }, + /** + * Closes the color picker dialog. + * + * @since 3.5.0 + * + * @return {void} + */ + close: function() { + this.element.iris( 'toggle' ); + this.inputWrapper.addClass( 'hidden' ); + this.wrap.removeClass( 'wp-picker-active' ); + this.toggler + .removeClass( 'wp-picker-open' ) + .attr( 'aria-expanded', 'false' ); + $( 'body' ).off( 'click.wpcolorpicker', this.close ); + }, + /** + * Returns the iris object if no new color is provided. If a new color is provided, it sets the new color. + * + * @param newColor {string|*} The new color to use. Can be undefined. + * + * @since 3.5.0 + * + * @return {string} The element's color. + */ + color: function( newColor ) { + if ( newColor === undef ) { + return this.element.iris( 'option', 'color' ); + } + this.element.iris( 'option', 'color', newColor ); + }, + /** + * Returns the iris object if no new default color is provided. + * If a new default color is provided, it sets the new default color. + * + * @param newDefaultColor {string|*} The new default color to use. Can be undefined. + * + * @since 3.5.0 + * + * @return {boolean|string} The element's color. + */ + defaultColor: function( newDefaultColor ) { + if ( newDefaultColor === undef ) { + return this.options.defaultColor; + } + + this.options.defaultColor = newDefaultColor; + } + }; + + // Register the color picker as a widget. + $.widget( 'wp.wpColorPicker', ColorPicker ); +}( jQuery ) ); diff --git a/wp-admin/js/color-picker.min.js b/wp-admin/js/color-picker.min.js new file mode 100644 index 0000000..7718bbd --- /dev/null +++ b/wp-admin/js/color-picker.min.js @@ -0,0 +1,2 @@ +/*! This file is auto-generated */ +!function(i,t){var a=wp.i18n.__;i.widget("wp.wpColorPicker",{options:{defaultColor:!1,change:!1,clear:!1,hide:!0,palettes:!0,width:255,mode:"hsv",type:"full",slider:"horizontal"},_createHueOnly:function(){var e,o=this,t=o.element;t.hide(),e="hsl("+t.val()+", 100, 50)",t.iris({mode:"hsl",type:"hue",hide:!1,color:e,change:function(e,t){"function"==typeof o.options.change&&o.options.change.call(this,e,t)},width:o.options.width,slider:o.options.slider})},_create:function(){if(i.support.iris){var o=this,e=o.element;if(i.extend(o.options,e.data()),"hue"===o.options.type)return o._createHueOnly();o.close=o.close.bind(o),o.initialValue=e.val(),e.addClass("wp-color-picker"),e.parent("label").length||(e.wrap(""),o.wrappingLabelText=i('').insertBefore(e).text(a("Color value"))),o.wrappingLabel=e.parent(),o.wrappingLabel.wrap('
'),o.wrap=o.wrappingLabel.parent(),o.toggler=i('').insertBefore(o.wrappingLabel).css({backgroundColor:o.initialValue}),o.toggler.find(".wp-color-result-text").text(a("Select Color")),o.pickerContainer=i('
').insertAfter(o.wrappingLabel),o.button=i(''),o.options.defaultColor?o.button.addClass("wp-picker-default").val(a("Default")).attr("aria-label",a("Select default color")):o.button.addClass("wp-picker-clear").val(a("Clear")).attr("aria-label",a("Clear color")),o.wrappingLabel.wrap('
').insertAfter("#wpcontent").hide().on("click.wp-responsive",function(){v.find(".menupop.hover").removeClass("hover"),W(this).hide()})),b.on("click.wp-responsive",function(){g.show()})},disableOverlay:function(){b.off("click.wp-responsive"),g.hide()},disableSortables:function(){if(w.length)try{w.sortable("disable"),w.find(".ui-sortable-handle").addClass("is-non-sortable")}catch(e){}},enableSortables:function(){if(w.length)try{w.sortable("enable"),w.find(".ui-sortable-handle").removeClass("is-non-sortable")}catch(e){}}},W(document).on("ajaxComplete",function(){K()}),Q.on("wp-window-resized.set-menu-state",B),Q.on("wp-menu-state-set wp-collapse-menu",function(e,t){var n,i=W("#collapse-button"),t="folded"===t.state?(n="false",H("Expand Main menu")):(n="true",H("Collapse Main menu"));i.attr({"aria-expanded":n,"aria-label":t})}),$.wpResponsive.init(),O(),B(),M(),D(),K(),Q.on("wp-pin-menu wp-window-resized.pin-menu postboxes-columnchange.pin-menu postbox-toggled.pin-menu wp-collapse-menu.pin-menu wp-scroll-start.pin-menu",O),W(".wp-initial-focus").trigger("focus"),q.on("click",".js-update-details-toggle",function(){var e=W(this).closest(".js-update-details"),t=W("#"+e.data("update-details"));t.hasClass("update-details-moved")||t.insertAfter(e).addClass("update-details-moved"),t.toggle(),W(this).attr("aria-expanded",t.is(":visible"))})}),W(function(e){var t,n;q.hasClass("update-php")&&(t=e("a.update-from-upload-overwrite"),n=e(".update-from-upload-expired"),t.length)&&n.length&&$.setTimeout(function(){t.hide(),n.removeClass("hidden"),$.wp&&$.wp.a11y&&$.wp.a11y.speak(n.text())},714e4)}),V.on("resize.wp-fire-once",function(){$.clearTimeout(t),t=$.setTimeout(d,200)}),"-ms-user-select"in document.documentElement.style&&navigator.userAgent.match(/IEMobile\/10\.0/)&&((n=document.createElement("style")).appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")),document.getElementsByTagName("head")[0].appendChild(n))}(jQuery,window),function(){var e,i={},o={};i.pauseAll=!1,!window.matchMedia||(e=window.matchMedia("(prefers-reduced-motion: reduce)"))&&!e.matches||(i.pauseAll=!0),i.freezeAnimatedPluginIcons=function(l){function e(){var e=l.width,t=l.height,n=document.createElement("canvas");if(n.width=e,n.height=t,n.className=l.className,l.closest("#update-plugins-table"))for(var i=window.getComputedStyle(l),o=0,a=i.length;o} Notifications. + */ + get: function( args ) { + var collection = this, notifications, errorTypePriorities, params; + notifications = _.values( collection._value ); + + params = _.extend( + { sort: false }, + args + ); + + if ( params.sort ) { + errorTypePriorities = { error: 4, warning: 3, success: 2, info: 1 }; + notifications.sort( function( a, b ) { + var aPriority = 0, bPriority = 0; + if ( ! _.isUndefined( errorTypePriorities[ a.type ] ) ) { + aPriority = errorTypePriorities[ a.type ]; + } + if ( ! _.isUndefined( errorTypePriorities[ b.type ] ) ) { + bPriority = errorTypePriorities[ b.type ]; + } + if ( aPriority !== bPriority ) { + return bPriority - aPriority; // Show errors first. + } + return collection._addedOrder[ b.code ] - collection._addedOrder[ a.code ]; // Show newer notifications higher. + }); + } + + return notifications; + }, + + /** + * Render notifications area. + * + * @since 4.9.0 + * @return {void} + */ + render: function() { + var collection = this, + notifications, hadOverlayNotification = false, hasOverlayNotification, overlayNotifications = [], + previousNotificationsByCode = {}, + listElement, focusableElements; + + // Short-circuit if there are no container to render into. + if ( ! collection.container || ! collection.container.length ) { + return; + } + + notifications = collection.get( { sort: true } ); + collection.container.toggle( 0 !== notifications.length ); + + // Short-circuit if there are no changes to the notifications. + if ( collection.container.is( collection.previousContainer ) && _.isEqual( notifications, collection.previousNotifications ) ) { + return; + } + + // Make sure list is part of the container. + listElement = collection.container.children( 'ul' ).first(); + if ( ! listElement.length ) { + listElement = $( '
    ' ); + collection.container.append( listElement ); + } + + // Remove all notifications prior to re-rendering. + listElement.find( '> [data-code]' ).remove(); + + _.each( collection.previousNotifications, function( notification ) { + previousNotificationsByCode[ notification.code ] = notification; + }); + + // Add all notifications in the sorted order. + _.each( notifications, function( notification ) { + var notificationContainer; + if ( wp.a11y && ( ! previousNotificationsByCode[ notification.code ] || ! _.isEqual( notification.message, previousNotificationsByCode[ notification.code ].message ) ) ) { + wp.a11y.speak( notification.message, 'assertive' ); + } + notificationContainer = $( notification.render() ); + notification.container = notificationContainer; + listElement.append( notificationContainer ); // @todo Consider slideDown() as enhancement. + + if ( notification.extended( api.OverlayNotification ) ) { + overlayNotifications.push( notification ); + } + }); + hasOverlayNotification = Boolean( overlayNotifications.length ); + + if ( collection.previousNotifications ) { + hadOverlayNotification = Boolean( _.find( collection.previousNotifications, function( notification ) { + return notification.extended( api.OverlayNotification ); + } ) ); + } + + if ( hasOverlayNotification !== hadOverlayNotification ) { + $( document.body ).toggleClass( 'customize-loading', hasOverlayNotification ); + collection.container.toggleClass( 'has-overlay-notifications', hasOverlayNotification ); + if ( hasOverlayNotification ) { + collection.previousActiveElement = document.activeElement; + $( document ).on( 'keydown', collection.constrainFocus ); + } else { + $( document ).off( 'keydown', collection.constrainFocus ); + } + } + + if ( hasOverlayNotification ) { + collection.focusContainer = overlayNotifications[ overlayNotifications.length - 1 ].container; + collection.focusContainer.prop( 'tabIndex', -1 ); + focusableElements = collection.focusContainer.find( ':focusable' ); + if ( focusableElements.length ) { + focusableElements.first().focus(); + } else { + collection.focusContainer.focus(); + } + } else if ( collection.previousActiveElement ) { + $( collection.previousActiveElement ).trigger( 'focus' ); + collection.previousActiveElement = null; + } + + collection.previousNotifications = notifications; + collection.previousContainer = collection.container; + collection.trigger( 'rendered' ); + }, + + /** + * Constrain focus on focus container. + * + * @since 4.9.0 + * + * @param {jQuery.Event} event - Event. + * @return {void} + */ + constrainFocus: function constrainFocus( event ) { + var collection = this, focusableElements; + + // Prevent keys from escaping. + event.stopPropagation(); + + if ( 9 !== event.which ) { // Tab key. + return; + } + + focusableElements = collection.focusContainer.find( ':focusable' ); + if ( 0 === focusableElements.length ) { + focusableElements = collection.focusContainer; + } + + if ( ! $.contains( collection.focusContainer[0], event.target ) || ! $.contains( collection.focusContainer[0], document.activeElement ) ) { + event.preventDefault(); + focusableElements.first().focus(); + } else if ( focusableElements.last().is( event.target ) && ! event.shiftKey ) { + event.preventDefault(); + focusableElements.first().focus(); + } else if ( focusableElements.first().is( event.target ) && event.shiftKey ) { + event.preventDefault(); + focusableElements.last().focus(); + } + } + }); + + api.Setting = api.Value.extend(/** @lends wp.customize.Setting.prototype */{ + + /** + * Default params. + * + * @since 4.9.0 + * @var {object} + */ + defaults: { + transport: 'refresh', + dirty: false + }, + + /** + * A Customizer Setting. + * + * A setting is WordPress data (theme mod, option, menu, etc.) that the user can + * draft changes to in the Customizer. + * + * @see PHP class WP_Customize_Setting. + * + * @constructs wp.customize.Setting + * @augments wp.customize.Value + * + * @since 3.4.0 + * + * @param {string} id - The setting ID. + * @param {*} value - The initial value of the setting. + * @param {Object} [options={}] - Options. + * @param {string} [options.transport=refresh] - The transport to use for previewing. Supports 'refresh' and 'postMessage'. + * @param {boolean} [options.dirty=false] - Whether the setting should be considered initially dirty. + * @param {Object} [options.previewer] - The Previewer instance to sync with. Defaults to wp.customize.previewer. + */ + initialize: function( id, value, options ) { + var setting = this, params; + params = _.extend( + { previewer: api.previewer }, + setting.defaults, + options || {} + ); + + api.Value.prototype.initialize.call( setting, value, params ); + + setting.id = id; + setting._dirty = params.dirty; // The _dirty property is what the Customizer reads from. + setting.notifications = new api.Notifications(); + + // Whenever the setting's value changes, refresh the preview. + setting.bind( setting.preview ); + }, + + /** + * Refresh the preview, respective of the setting's refresh policy. + * + * If the preview hasn't sent a keep-alive message and is likely + * disconnected by having navigated to a non-allowed URL, then the + * refresh transport will be forced when postMessage is the transport. + * Note that postMessage does not throw an error when the recipient window + * fails to match the origin window, so using try/catch around the + * previewer.send() call to then fallback to refresh will not work. + * + * @since 3.4.0 + * @access public + * + * @return {void} + */ + preview: function() { + var setting = this, transport; + transport = setting.transport; + + if ( 'postMessage' === transport && ! api.state( 'previewerAlive' ).get() ) { + transport = 'refresh'; + } + + if ( 'postMessage' === transport ) { + setting.previewer.send( 'setting', [ setting.id, setting() ] ); + } else if ( 'refresh' === transport ) { + setting.previewer.refresh(); + } + }, + + /** + * Find controls associated with this setting. + * + * @since 4.6.0 + * @return {wp.customize.Control[]} Controls associated with setting. + */ + findControls: function() { + var setting = this, controls = []; + api.control.each( function( control ) { + _.each( control.settings, function( controlSetting ) { + if ( controlSetting.id === setting.id ) { + controls.push( control ); + } + } ); + } ); + return controls; + } + }); + + /** + * Current change count. + * + * @alias wp.customize._latestRevision + * + * @since 4.7.0 + * @type {number} + * @protected + */ + api._latestRevision = 0; + + /** + * Last revision that was saved. + * + * @alias wp.customize._lastSavedRevision + * + * @since 4.7.0 + * @type {number} + * @protected + */ + api._lastSavedRevision = 0; + + /** + * Latest revisions associated with the updated setting. + * + * @alias wp.customize._latestSettingRevisions + * + * @since 4.7.0 + * @type {object} + * @protected + */ + api._latestSettingRevisions = {}; + + /* + * Keep track of the revision associated with each updated setting so that + * requestChangesetUpdate knows which dirty settings to include. Also, once + * ready is triggered and all initial settings have been added, increment + * revision for each newly-created initially-dirty setting so that it will + * also be included in changeset update requests. + */ + api.bind( 'change', function incrementChangedSettingRevision( setting ) { + api._latestRevision += 1; + api._latestSettingRevisions[ setting.id ] = api._latestRevision; + } ); + api.bind( 'ready', function() { + api.bind( 'add', function incrementCreatedSettingRevision( setting ) { + if ( setting._dirty ) { + api._latestRevision += 1; + api._latestSettingRevisions[ setting.id ] = api._latestRevision; + } + } ); + } ); + + /** + * Get the dirty setting values. + * + * @alias wp.customize.dirtyValues + * + * @since 4.7.0 + * @access public + * + * @param {Object} [options] Options. + * @param {boolean} [options.unsaved=false] Whether only values not saved yet into a changeset will be returned (differential changes). + * @return {Object} Dirty setting values. + */ + api.dirtyValues = function dirtyValues( options ) { + var values = {}; + api.each( function( setting ) { + var settingRevision; + + if ( ! setting._dirty ) { + return; + } + + settingRevision = api._latestSettingRevisions[ setting.id ]; + + // Skip including settings that have already been included in the changeset, if only requesting unsaved. + if ( api.state( 'changesetStatus' ).get() && ( options && options.unsaved ) && ( _.isUndefined( settingRevision ) || settingRevision <= api._lastSavedRevision ) ) { + return; + } + + values[ setting.id ] = setting.get(); + } ); + return values; + }; + + /** + * Request updates to the changeset. + * + * @alias wp.customize.requestChangesetUpdate + * + * @since 4.7.0 + * @access public + * + * @param {Object} [changes] - Mapping of setting IDs to setting params each normally including a value property, or mapping to null. + * If not provided, then the changes will still be obtained from unsaved dirty settings. + * @param {Object} [args] - Additional options for the save request. + * @param {boolean} [args.autosave=false] - Whether changes will be stored in autosave revision if the changeset has been promoted from an auto-draft. + * @param {boolean} [args.force=false] - Send request to update even when there are no changes to submit. This can be used to request the latest status of the changeset on the server. + * @param {string} [args.title] - Title to update in the changeset. Optional. + * @param {string} [args.date] - Date to update in the changeset. Optional. + * @return {jQuery.Promise} Promise resolving with the response data. + */ + api.requestChangesetUpdate = function requestChangesetUpdate( changes, args ) { + var deferred, request, submittedChanges = {}, data, submittedArgs; + deferred = new $.Deferred(); + + // Prevent attempting changeset update while request is being made. + if ( 0 !== api.state( 'processing' ).get() ) { + deferred.reject( 'already_processing' ); + return deferred.promise(); + } + + submittedArgs = _.extend( { + title: null, + date: null, + autosave: false, + force: false + }, args ); + + if ( changes ) { + _.extend( submittedChanges, changes ); + } + + // Ensure all revised settings (changes pending save) are also included, but not if marked for deletion in changes. + _.each( api.dirtyValues( { unsaved: true } ), function( dirtyValue, settingId ) { + if ( ! changes || null !== changes[ settingId ] ) { + submittedChanges[ settingId ] = _.extend( + {}, + submittedChanges[ settingId ] || {}, + { value: dirtyValue } + ); + } + } ); + + // Allow plugins to attach additional params to the settings. + api.trigger( 'changeset-save', submittedChanges, submittedArgs ); + + // Short-circuit when there are no pending changes. + if ( ! submittedArgs.force && _.isEmpty( submittedChanges ) && null === submittedArgs.title && null === submittedArgs.date ) { + deferred.resolve( {} ); + return deferred.promise(); + } + + // A status would cause a revision to be made, and for this wp.customize.previewer.save() should be used. + // Status is also disallowed for revisions regardless. + if ( submittedArgs.status ) { + return deferred.reject( { code: 'illegal_status_in_changeset_update' } ).promise(); + } + + // Dates not beung allowed for revisions are is a technical limitation of post revisions. + if ( submittedArgs.date && submittedArgs.autosave ) { + return deferred.reject( { code: 'illegal_autosave_with_date_gmt' } ).promise(); + } + + // Make sure that publishing a changeset waits for all changeset update requests to complete. + api.state( 'processing' ).set( api.state( 'processing' ).get() + 1 ); + deferred.always( function() { + api.state( 'processing' ).set( api.state( 'processing' ).get() - 1 ); + } ); + + // Ensure that if any plugins add data to save requests by extending query() that they get included here. + data = api.previewer.query( { excludeCustomizedSaved: true } ); + delete data.customized; // Being sent in customize_changeset_data instead. + _.extend( data, { + nonce: api.settings.nonce.save, + customize_theme: api.settings.theme.stylesheet, + customize_changeset_data: JSON.stringify( submittedChanges ) + } ); + if ( null !== submittedArgs.title ) { + data.customize_changeset_title = submittedArgs.title; + } + if ( null !== submittedArgs.date ) { + data.customize_changeset_date = submittedArgs.date; + } + if ( false !== submittedArgs.autosave ) { + data.customize_changeset_autosave = 'true'; + } + + // Allow plugins to modify the params included with the save request. + api.trigger( 'save-request-params', data ); + + request = wp.ajax.post( 'customize_save', data ); + + request.done( function requestChangesetUpdateDone( data ) { + var savedChangesetValues = {}; + + // Ensure that all settings updated subsequently will be included in the next changeset update request. + api._lastSavedRevision = Math.max( api._latestRevision, api._lastSavedRevision ); + + api.state( 'changesetStatus' ).set( data.changeset_status ); + + if ( data.changeset_date ) { + api.state( 'changesetDate' ).set( data.changeset_date ); + } + + deferred.resolve( data ); + api.trigger( 'changeset-saved', data ); + + if ( data.setting_validities ) { + _.each( data.setting_validities, function( validity, settingId ) { + if ( true === validity && _.isObject( submittedChanges[ settingId ] ) && ! _.isUndefined( submittedChanges[ settingId ].value ) ) { + savedChangesetValues[ settingId ] = submittedChanges[ settingId ].value; + } + } ); + } + + api.previewer.send( 'changeset-saved', _.extend( {}, data, { saved_changeset_values: savedChangesetValues } ) ); + } ); + request.fail( function requestChangesetUpdateFail( data ) { + deferred.reject( data ); + api.trigger( 'changeset-error', data ); + } ); + request.always( function( data ) { + if ( data.setting_validities ) { + api._handleSettingValidities( { + settingValidities: data.setting_validities + } ); + } + } ); + + return deferred.promise(); + }; + + /** + * Watch all changes to Value properties, and bubble changes to parent Values instance + * + * @alias wp.customize.utils.bubbleChildValueChanges + * + * @since 4.1.0 + * + * @param {wp.customize.Class} instance + * @param {Array} properties The names of the Value instances to watch. + */ + api.utils.bubbleChildValueChanges = function ( instance, properties ) { + $.each( properties, function ( i, key ) { + instance[ key ].bind( function ( to, from ) { + if ( instance.parent && to !== from ) { + instance.parent.trigger( 'change', instance ); + } + } ); + } ); + }; + + /** + * Expand a panel, section, or control and focus on the first focusable element. + * + * @alias wp.customize~focus + * + * @since 4.1.0 + * + * @param {Object} [params] + * @param {Function} [params.completeCallback] + */ + focus = function ( params ) { + var construct, completeCallback, focus, focusElement, sections; + construct = this; + params = params || {}; + focus = function () { + // If a child section is currently expanded, collapse it. + if ( construct.extended( api.Panel ) ) { + sections = construct.sections(); + if ( 1 < sections.length ) { + sections.forEach( function ( section ) { + if ( section.expanded() ) { + section.collapse(); + } + } ); + } + } + + var focusContainer; + if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) { + focusContainer = construct.contentContainer; + } else { + focusContainer = construct.container; + } + + focusElement = focusContainer.find( '.control-focus:first' ); + if ( 0 === focusElement.length ) { + // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583 + focusElement = focusContainer.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first(); + } + focusElement.focus(); + }; + if ( params.completeCallback ) { + completeCallback = params.completeCallback; + params.completeCallback = function () { + focus(); + completeCallback(); + }; + } else { + params.completeCallback = focus; + } + + api.state( 'paneVisible' ).set( true ); + if ( construct.expand ) { + construct.expand( params ); + } else { + params.completeCallback(); + } + }; + + /** + * Stable sort for Panels, Sections, and Controls. + * + * If a.priority() === b.priority(), then sort by their respective params.instanceNumber. + * + * @alias wp.customize.utils.prioritySort + * + * @since 4.1.0 + * + * @param {(wp.customize.Panel|wp.customize.Section|wp.customize.Control)} a + * @param {(wp.customize.Panel|wp.customize.Section|wp.customize.Control)} b + * @return {number} + */ + api.utils.prioritySort = function ( a, b ) { + if ( a.priority() === b.priority() && typeof a.params.instanceNumber === 'number' && typeof b.params.instanceNumber === 'number' ) { + return a.params.instanceNumber - b.params.instanceNumber; + } else { + return a.priority() - b.priority(); + } + }; + + /** + * Return whether the supplied Event object is for a keydown event but not the Enter key. + * + * @alias wp.customize.utils.isKeydownButNotEnterEvent + * + * @since 4.1.0 + * + * @param {jQuery.Event} event + * @return {boolean} + */ + api.utils.isKeydownButNotEnterEvent = function ( event ) { + return ( 'keydown' === event.type && 13 !== event.which ); + }; + + /** + * Return whether the two lists of elements are the same and are in the same order. + * + * @alias wp.customize.utils.areElementListsEqual + * + * @since 4.1.0 + * + * @param {Array|jQuery} listA + * @param {Array|jQuery} listB + * @return {boolean} + */ + api.utils.areElementListsEqual = function ( listA, listB ) { + var equal = ( + listA.length === listB.length && // If lists are different lengths, then naturally they are not equal. + -1 === _.indexOf( _.map( // Are there any false values in the list returned by map? + _.zip( listA, listB ), // Pair up each element between the two lists. + function ( pair ) { + return $( pair[0] ).is( pair[1] ); // Compare to see if each pair is equal. + } + ), false ) // Check for presence of false in map's return value. + ); + return equal; + }; + + /** + * Highlight the existence of a button. + * + * This function reminds the user of a button represented by the specified + * UI element, after an optional delay. If the user focuses the element + * before the delay passes, the reminder is canceled. + * + * @alias wp.customize.utils.highlightButton + * + * @since 4.9.0 + * + * @param {jQuery} button - The element to highlight. + * @param {Object} [options] - Options. + * @param {number} [options.delay=0] - Delay in milliseconds. + * @param {jQuery} [options.focusTarget] - A target for user focus that defaults to the highlighted element. + * If the user focuses the target before the delay passes, the reminder + * is canceled. This option exists to accommodate compound buttons + * containing auxiliary UI, such as the Publish button augmented with a + * Settings button. + * @return {Function} An idempotent function that cancels the reminder. + */ + api.utils.highlightButton = function highlightButton( button, options ) { + var animationClass = 'button-see-me', + canceled = false, + params; + + params = _.extend( + { + delay: 0, + focusTarget: button + }, + options + ); + + function cancelReminder() { + canceled = true; + } + + params.focusTarget.on( 'focusin', cancelReminder ); + setTimeout( function() { + params.focusTarget.off( 'focusin', cancelReminder ); + + if ( ! canceled ) { + button.addClass( animationClass ); + button.one( 'animationend', function() { + /* + * Remove animation class to avoid situations in Customizer where + * DOM nodes are moved (re-inserted) and the animation repeats. + */ + button.removeClass( animationClass ); + } ); + } + }, params.delay ); + + return cancelReminder; + }; + + /** + * Get current timestamp adjusted for server clock time. + * + * Same functionality as the `current_time( 'mysql', false )` function in PHP. + * + * @alias wp.customize.utils.getCurrentTimestamp + * + * @since 4.9.0 + * + * @return {number} Current timestamp. + */ + api.utils.getCurrentTimestamp = function getCurrentTimestamp() { + var currentDate, currentClientTimestamp, timestampDifferential; + currentClientTimestamp = _.now(); + currentDate = new Date( api.settings.initialServerDate.replace( /-/g, '/' ) ); + timestampDifferential = currentClientTimestamp - api.settings.initialClientTimestamp; + timestampDifferential += api.settings.initialClientTimestamp - api.settings.initialServerTimestamp; + currentDate.setTime( currentDate.getTime() + timestampDifferential ); + return currentDate.getTime(); + }; + + /** + * Get remaining time of when the date is set. + * + * @alias wp.customize.utils.getRemainingTime + * + * @since 4.9.0 + * + * @param {string|number|Date} datetime - Date time or timestamp of the future date. + * @return {number} remainingTime - Remaining time in milliseconds. + */ + api.utils.getRemainingTime = function getRemainingTime( datetime ) { + var millisecondsDivider = 1000, remainingTime, timestamp; + if ( datetime instanceof Date ) { + timestamp = datetime.getTime(); + } else if ( 'string' === typeof datetime ) { + timestamp = ( new Date( datetime.replace( /-/g, '/' ) ) ).getTime(); + } else { + timestamp = datetime; + } + + remainingTime = timestamp - api.utils.getCurrentTimestamp(); + remainingTime = Math.ceil( remainingTime / millisecondsDivider ); + return remainingTime; + }; + + /** + * Return browser supported `transitionend` event name. + * + * @since 4.7.0 + * + * @ignore + * + * @return {string|null} Normalized `transitionend` event name or null if CSS transitions are not supported. + */ + normalizedTransitionendEventName = (function () { + var el, transitions, prop; + el = document.createElement( 'div' ); + transitions = { + 'transition' : 'transitionend', + 'OTransition' : 'oTransitionEnd', + 'MozTransition' : 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd' + }; + prop = _.find( _.keys( transitions ), function( prop ) { + return ! _.isUndefined( el.style[ prop ] ); + } ); + if ( prop ) { + return transitions[ prop ]; + } else { + return null; + } + })(); + + Container = api.Class.extend(/** @lends wp.customize~Container.prototype */{ + defaultActiveArguments: { duration: 'fast', completeCallback: $.noop }, + defaultExpandedArguments: { duration: 'fast', completeCallback: $.noop }, + containerType: 'container', + defaults: { + title: '', + description: '', + priority: 100, + type: 'default', + content: null, + active: true, + instanceNumber: null + }, + + /** + * Base class for Panel and Section. + * + * @constructs wp.customize~Container + * @augments wp.customize.Class + * + * @since 4.1.0 + * + * @borrows wp.customize~focus as focus + * + * @param {string} id - The ID for the container. + * @param {Object} options - Object containing one property: params. + * @param {string} options.title - Title shown when panel is collapsed and expanded. + * @param {string} [options.description] - Description shown at the top of the panel. + * @param {number} [options.priority=100] - The sort priority for the panel. + * @param {string} [options.templateId] - Template selector for container. + * @param {string} [options.type=default] - The type of the panel. See wp.customize.panelConstructor. + * @param {string} [options.content] - The markup to be used for the panel container. If empty, a JS template is used. + * @param {boolean} [options.active=true] - Whether the panel is active or not. + * @param {Object} [options.params] - Deprecated wrapper for the above properties. + */ + initialize: function ( id, options ) { + var container = this; + container.id = id; + + if ( ! Container.instanceCounter ) { + Container.instanceCounter = 0; + } + Container.instanceCounter++; + + $.extend( container, { + params: _.defaults( + options.params || options, // Passing the params is deprecated. + container.defaults + ) + } ); + if ( ! container.params.instanceNumber ) { + container.params.instanceNumber = Container.instanceCounter; + } + container.notifications = new api.Notifications(); + container.templateSelector = container.params.templateId || 'customize-' + container.containerType + '-' + container.params.type; + container.container = $( container.params.content ); + if ( 0 === container.container.length ) { + container.container = $( container.getContainer() ); + } + container.headContainer = container.container; + container.contentContainer = container.getContent(); + container.container = container.container.add( container.contentContainer ); + + container.deferred = { + embedded: new $.Deferred() + }; + container.priority = new api.Value(); + container.active = new api.Value(); + container.activeArgumentsQueue = []; + container.expanded = new api.Value(); + container.expandedArgumentsQueue = []; + + container.active.bind( function ( active ) { + var args = container.activeArgumentsQueue.shift(); + args = $.extend( {}, container.defaultActiveArguments, args ); + active = ( active && container.isContextuallyActive() ); + container.onChangeActive( active, args ); + }); + container.expanded.bind( function ( expanded ) { + var args = container.expandedArgumentsQueue.shift(); + args = $.extend( {}, container.defaultExpandedArguments, args ); + container.onChangeExpanded( expanded, args ); + }); + + container.deferred.embedded.done( function () { + container.setupNotifications(); + container.attachEvents(); + }); + + api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] ); + + container.priority.set( container.params.priority ); + container.active.set( container.params.active ); + container.expanded.set( false ); + }, + + /** + * Get the element that will contain the notifications. + * + * @since 4.9.0 + * @return {jQuery} Notification container element. + */ + getNotificationsContainerElement: function() { + var container = this; + return container.contentContainer.find( '.customize-control-notifications-container:first' ); + }, + + /** + * Set up notifications. + * + * @since 4.9.0 + * @return {void} + */ + setupNotifications: function() { + var container = this, renderNotifications; + container.notifications.container = container.getNotificationsContainerElement(); + + // Render notifications when they change and when the construct is expanded. + renderNotifications = function() { + if ( container.expanded.get() ) { + container.notifications.render(); + } + }; + container.expanded.bind( renderNotifications ); + renderNotifications(); + container.notifications.bind( 'change', _.debounce( renderNotifications ) ); + }, + + /** + * @since 4.1.0 + * + * @abstract + */ + ready: function() {}, + + /** + * Get the child models associated with this parent, sorting them by their priority Value. + * + * @since 4.1.0 + * + * @param {string} parentType + * @param {string} childType + * @return {Array} + */ + _children: function ( parentType, childType ) { + var parent = this, + children = []; + api[ childType ].each( function ( child ) { + if ( child[ parentType ].get() === parent.id ) { + children.push( child ); + } + } ); + children.sort( api.utils.prioritySort ); + return children; + }, + + /** + * To override by subclass, to return whether the container has active children. + * + * @since 4.1.0 + * + * @abstract + */ + isContextuallyActive: function () { + throw new Error( 'Container.isContextuallyActive() must be overridden in a subclass.' ); + }, + + /** + * Active state change handler. + * + * Shows the container if it is active, hides it if not. + * + * To override by subclass, update the container's UI to reflect the provided active state. + * + * @since 4.1.0 + * + * @param {boolean} active - The active state to transiution to. + * @param {Object} [args] - Args. + * @param {Object} [args.duration] - The duration for the slideUp/slideDown animation. + * @param {boolean} [args.unchanged] - Whether the state is already known to not be changed, and so short-circuit with calling completeCallback early. + * @param {Function} [args.completeCallback] - Function to call when the slideUp/slideDown has completed. + */ + onChangeActive: function( active, args ) { + var construct = this, + headContainer = construct.headContainer, + duration, expandedOtherPanel; + + if ( args.unchanged ) { + if ( args.completeCallback ) { + args.completeCallback(); + } + return; + } + + duration = ( 'resolved' === api.previewer.deferred.active.state() ? args.duration : 0 ); + + if ( construct.extended( api.Panel ) ) { + // If this is a panel is not currently expanded but another panel is expanded, do not animate. + api.panel.each(function ( panel ) { + if ( panel !== construct && panel.expanded() ) { + expandedOtherPanel = panel; + duration = 0; + } + }); + + // Collapse any expanded sections inside of this panel first before deactivating. + if ( ! active ) { + _.each( construct.sections(), function( section ) { + section.collapse( { duration: 0 } ); + } ); + } + } + + if ( ! $.contains( document, headContainer.get( 0 ) ) ) { + // If the element is not in the DOM, then jQuery.fn.slideUp() does nothing. + // In this case, a hard toggle is required instead. + headContainer.toggle( active ); + if ( args.completeCallback ) { + args.completeCallback(); + } + } else if ( active ) { + headContainer.slideDown( duration, args.completeCallback ); + } else { + if ( construct.expanded() ) { + construct.collapse({ + duration: duration, + completeCallback: function() { + headContainer.slideUp( duration, args.completeCallback ); + } + }); + } else { + headContainer.slideUp( duration, args.completeCallback ); + } + } + }, + + /** + * @since 4.1.0 + * + * @param {boolean} active + * @param {Object} [params] + * @return {boolean} False if state already applied. + */ + _toggleActive: function ( active, params ) { + var self = this; + params = params || {}; + if ( ( active && this.active.get() ) || ( ! active && ! this.active.get() ) ) { + params.unchanged = true; + self.onChangeActive( self.active.get(), params ); + return false; + } else { + params.unchanged = false; + this.activeArgumentsQueue.push( params ); + this.active.set( active ); + return true; + } + }, + + /** + * @param {Object} [params] + * @return {boolean} False if already active. + */ + activate: function ( params ) { + return this._toggleActive( true, params ); + }, + + /** + * @param {Object} [params] + * @return {boolean} False if already inactive. + */ + deactivate: function ( params ) { + return this._toggleActive( false, params ); + }, + + /** + * To override by subclass, update the container's UI to reflect the provided active state. + * @abstract + */ + onChangeExpanded: function () { + throw new Error( 'Must override with subclass.' ); + }, + + /** + * Handle the toggle logic for expand/collapse. + * + * @param {boolean} expanded - The new state to apply. + * @param {Object} [params] - Object containing options for expand/collapse. + * @param {Function} [params.completeCallback] - Function to call when expansion/collapse is complete. + * @return {boolean} False if state already applied or active state is false. + */ + _toggleExpanded: function( expanded, params ) { + var instance = this, previousCompleteCallback; + params = params || {}; + previousCompleteCallback = params.completeCallback; + + // Short-circuit expand() if the instance is not active. + if ( expanded && ! instance.active() ) { + return false; + } + + api.state( 'paneVisible' ).set( true ); + params.completeCallback = function() { + if ( previousCompleteCallback ) { + previousCompleteCallback.apply( instance, arguments ); + } + if ( expanded ) { + instance.container.trigger( 'expanded' ); + } else { + instance.container.trigger( 'collapsed' ); + } + }; + if ( ( expanded && instance.expanded.get() ) || ( ! expanded && ! instance.expanded.get() ) ) { + params.unchanged = true; + instance.onChangeExpanded( instance.expanded.get(), params ); + return false; + } else { + params.unchanged = false; + instance.expandedArgumentsQueue.push( params ); + instance.expanded.set( expanded ); + return true; + } + }, + + /** + * @param {Object} [params] + * @return {boolean} False if already expanded or if inactive. + */ + expand: function ( params ) { + return this._toggleExpanded( true, params ); + }, + + /** + * @param {Object} [params] + * @return {boolean} False if already collapsed. + */ + collapse: function ( params ) { + return this._toggleExpanded( false, params ); + }, + + /** + * Animate container state change if transitions are supported by the browser. + * + * @since 4.7.0 + * @private + * + * @param {function} completeCallback Function to be called after transition is completed. + * @return {void} + */ + _animateChangeExpanded: function( completeCallback ) { + // Return if CSS transitions are not supported or if reduced motion is enabled. + if ( ! normalizedTransitionendEventName || isReducedMotion ) { + // Schedule the callback until the next tick to prevent focus loss. + _.defer( function () { + if ( completeCallback ) { + completeCallback(); + } + } ); + return; + } + + var construct = this, + content = construct.contentContainer, + overlay = content.closest( '.wp-full-overlay' ), + elements, transitionEndCallback, transitionParentPane; + + // Determine set of elements that are affected by the animation. + elements = overlay.add( content ); + + if ( ! construct.panel || '' === construct.panel() ) { + transitionParentPane = true; + } else if ( api.panel( construct.panel() ).contentContainer.hasClass( 'skip-transition' ) ) { + transitionParentPane = true; + } else { + transitionParentPane = false; + } + if ( transitionParentPane ) { + elements = elements.add( '#customize-info, .customize-pane-parent' ); + } + + // Handle `transitionEnd` event. + transitionEndCallback = function( e ) { + if ( 2 !== e.eventPhase || ! $( e.target ).is( content ) ) { + return; + } + content.off( normalizedTransitionendEventName, transitionEndCallback ); + elements.removeClass( 'busy' ); + if ( completeCallback ) { + completeCallback(); + } + }; + content.on( normalizedTransitionendEventName, transitionEndCallback ); + elements.addClass( 'busy' ); + + // Prevent screen flicker when pane has been scrolled before expanding. + _.defer( function() { + var container = content.closest( '.wp-full-overlay-sidebar-content' ), + currentScrollTop = container.scrollTop(), + previousScrollTop = content.data( 'previous-scrollTop' ) || 0, + expanded = construct.expanded(); + + if ( expanded && 0 < currentScrollTop ) { + content.css( 'top', currentScrollTop + 'px' ); + content.data( 'previous-scrollTop', currentScrollTop ); + } else if ( ! expanded && 0 < currentScrollTop + previousScrollTop ) { + content.css( 'top', previousScrollTop - currentScrollTop + 'px' ); + container.scrollTop( previousScrollTop ); + } + } ); + }, + + /* + * is documented using @borrows in the constructor. + */ + focus: focus, + + /** + * Return the container html, generated from its JS template, if it exists. + * + * @since 4.3.0 + */ + getContainer: function () { + var template, + container = this; + + if ( 0 !== $( '#tmpl-' + container.templateSelector ).length ) { + template = wp.template( container.templateSelector ); + } else { + template = wp.template( 'customize-' + container.containerType + '-default' ); + } + if ( template && container.container ) { + return template( _.extend( + { id: container.id }, + container.params + ) ).toString().trim(); + } + + return '
  • '; + }, + + /** + * Find content element which is displayed when the section is expanded. + * + * After a construct is initialized, the return value will be available via the `contentContainer` property. + * By default the element will be related it to the parent container with `aria-owns` and detached. + * Custom panels and sections (such as the `NewMenuSection`) that do not have a sliding pane should + * just return the content element without needing to add the `aria-owns` element or detach it from + * the container. Such non-sliding pane custom sections also need to override the `onChangeExpanded` + * method to handle animating the panel/section into and out of view. + * + * @since 4.7.0 + * @access public + * + * @return {jQuery} Detached content element. + */ + getContent: function() { + var construct = this, + container = construct.container, + content = container.find( '.accordion-section-content, .control-panel-content' ).first(), + contentId = 'sub-' + container.attr( 'id' ), + ownedElements = contentId, + alreadyOwnedElements = container.attr( 'aria-owns' ); + + if ( alreadyOwnedElements ) { + ownedElements = ownedElements + ' ' + alreadyOwnedElements; + } + container.attr( 'aria-owns', ownedElements ); + + return content.detach().attr( { + 'id': contentId, + 'class': 'customize-pane-child ' + content.attr( 'class' ) + ' ' + container.attr( 'class' ) + } ); + } + }); + + api.Section = Container.extend(/** @lends wp.customize.Section.prototype */{ + containerType: 'section', + containerParent: '#customize-theme-controls', + containerPaneParent: '.customize-pane-parent', + defaults: { + title: '', + description: '', + priority: 100, + type: 'default', + content: null, + active: true, + instanceNumber: null, + panel: null, + customizeAction: '' + }, + + /** + * @constructs wp.customize.Section + * @augments wp.customize~Container + * + * @since 4.1.0 + * + * @param {string} id - The ID for the section. + * @param {Object} options - Options. + * @param {string} options.title - Title shown when section is collapsed and expanded. + * @param {string} [options.description] - Description shown at the top of the section. + * @param {number} [options.priority=100] - The sort priority for the section. + * @param {string} [options.type=default] - The type of the section. See wp.customize.sectionConstructor. + * @param {string} [options.content] - The markup to be used for the section container. If empty, a JS template is used. + * @param {boolean} [options.active=true] - Whether the section is active or not. + * @param {string} options.panel - The ID for the panel this section is associated with. + * @param {string} [options.customizeAction] - Additional context information shown before the section title when expanded. + * @param {Object} [options.params] - Deprecated wrapper for the above properties. + */ + initialize: function ( id, options ) { + var section = this, params; + params = options.params || options; + + // Look up the type if one was not supplied. + if ( ! params.type ) { + _.find( api.sectionConstructor, function( Constructor, type ) { + if ( Constructor === section.constructor ) { + params.type = type; + return true; + } + return false; + } ); + } + + Container.prototype.initialize.call( section, id, params ); + + section.id = id; + section.panel = new api.Value(); + section.panel.bind( function ( id ) { + $( section.headContainer ).toggleClass( 'control-subsection', !! id ); + }); + section.panel.set( section.params.panel || '' ); + api.utils.bubbleChildValueChanges( section, [ 'panel' ] ); + + section.embed(); + section.deferred.embedded.done( function () { + section.ready(); + }); + }, + + /** + * Embed the container in the DOM when any parent panel is ready. + * + * @since 4.1.0 + */ + embed: function () { + var inject, + section = this; + + section.containerParent = api.ensure( section.containerParent ); + + // Watch for changes to the panel state. + inject = function ( panelId ) { + var parentContainer; + if ( panelId ) { + // The panel has been supplied, so wait until the panel object is registered. + api.panel( panelId, function ( panel ) { + // The panel has been registered, wait for it to become ready/initialized. + panel.deferred.embedded.done( function () { + parentContainer = panel.contentContainer; + if ( ! section.headContainer.parent().is( parentContainer ) ) { + parentContainer.append( section.headContainer ); + } + if ( ! section.contentContainer.parent().is( section.headContainer ) ) { + section.containerParent.append( section.contentContainer ); + } + section.deferred.embedded.resolve(); + }); + } ); + } else { + // There is no panel, so embed the section in the root of the customizer. + parentContainer = api.ensure( section.containerPaneParent ); + if ( ! section.headContainer.parent().is( parentContainer ) ) { + parentContainer.append( section.headContainer ); + } + if ( ! section.contentContainer.parent().is( section.headContainer ) ) { + section.containerParent.append( section.contentContainer ); + } + section.deferred.embedded.resolve(); + } + }; + section.panel.bind( inject ); + inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one. + }, + + /** + * Add behaviors for the accordion section. + * + * @since 4.1.0 + */ + attachEvents: function () { + var meta, content, section = this; + + if ( section.container.hasClass( 'cannot-expand' ) ) { + return; + } + + // Expand/Collapse accordion sections on click. + section.container.find( '.accordion-section-title, .customize-section-back' ).on( 'click keydown', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); // Keep this AFTER the key filter above. + + if ( section.expanded() ) { + section.collapse(); + } else { + section.expand(); + } + }); + + // This is very similar to what is found for api.Panel.attachEvents(). + section.container.find( '.customize-section-title .customize-help-toggle' ).on( 'click', function() { + + meta = section.container.find( '.section-meta' ); + if ( meta.hasClass( 'cannot-expand' ) ) { + return; + } + content = meta.find( '.customize-section-description:first' ); + content.toggleClass( 'open' ); + content.slideToggle( section.defaultExpandedArguments.duration, function() { + content.trigger( 'toggled' ); + } ); + $( this ).attr( 'aria-expanded', function( i, attr ) { + return 'true' === attr ? 'false' : 'true'; + }); + }); + }, + + /** + * Return whether this section has any active controls. + * + * @since 4.1.0 + * + * @return {boolean} + */ + isContextuallyActive: function () { + var section = this, + controls = section.controls(), + activeCount = 0; + _( controls ).each( function ( control ) { + if ( control.active() ) { + activeCount += 1; + } + } ); + return ( activeCount !== 0 ); + }, + + /** + * Get the controls that are associated with this section, sorted by their priority Value. + * + * @since 4.1.0 + * + * @return {Array} + */ + controls: function () { + return this._children( 'section', 'control' ); + }, + + /** + * Update UI to reflect expanded state. + * + * @since 4.1.0 + * + * @param {boolean} expanded + * @param {Object} args + */ + onChangeExpanded: function ( expanded, args ) { + var section = this, + container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ), + content = section.contentContainer, + overlay = section.headContainer.closest( '.wp-full-overlay' ), + backBtn = content.find( '.customize-section-back' ), + sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(), + expand, panel; + + if ( expanded && ! content.hasClass( 'open' ) ) { + + if ( args.unchanged ) { + expand = args.completeCallback; + } else { + expand = function() { + section._animateChangeExpanded( function() { + sectionTitle.attr( 'tabindex', '-1' ); + backBtn.attr( 'tabindex', '0' ); + + backBtn.trigger( 'focus' ); + content.css( 'top', '' ); + container.scrollTop( 0 ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + content.addClass( 'open' ); + overlay.addClass( 'section-open' ); + api.state( 'expandedSection' ).set( section ); + }.bind( this ); + } + + if ( ! args.allowMultiple ) { + api.section.each( function ( otherSection ) { + if ( otherSection !== section ) { + otherSection.collapse( { duration: args.duration } ); + } + }); + } + + if ( section.panel() ) { + api.panel( section.panel() ).expand({ + duration: args.duration, + completeCallback: expand + }); + } else { + if ( ! args.allowMultiple ) { + api.panel.each( function( panel ) { + panel.collapse(); + }); + } + expand(); + } + + } else if ( ! expanded && content.hasClass( 'open' ) ) { + if ( section.panel() ) { + panel = api.panel( section.panel() ); + if ( panel.contentContainer.hasClass( 'skip-transition' ) ) { + panel.collapse(); + } + } + section._animateChangeExpanded( function() { + backBtn.attr( 'tabindex', '-1' ); + sectionTitle.attr( 'tabindex', '0' ); + + sectionTitle.trigger( 'focus' ); + content.css( 'top', '' ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + content.removeClass( 'open' ); + overlay.removeClass( 'section-open' ); + if ( section === api.state( 'expandedSection' ).get() ) { + api.state( 'expandedSection' ).set( false ); + } + + } else { + if ( args.completeCallback ) { + args.completeCallback(); + } + } + } + }); + + api.ThemesSection = api.Section.extend(/** @lends wp.customize.ThemesSection.prototype */{ + currentTheme: '', + overlay: '', + template: '', + screenshotQueue: null, + $window: null, + $body: null, + loaded: 0, + loading: false, + fullyLoaded: false, + term: '', + tags: '', + nextTerm: '', + nextTags: '', + filtersHeight: 0, + headerContainer: null, + updateCountDebounced: null, + + /** + * wp.customize.ThemesSection + * + * Custom section for themes that loads themes by category, and also + * handles the theme-details view rendering and navigation. + * + * @constructs wp.customize.ThemesSection + * @augments wp.customize.Section + * + * @since 4.9.0 + * + * @param {string} id - ID. + * @param {Object} options - Options. + * @return {void} + */ + initialize: function( id, options ) { + var section = this; + section.headerContainer = $(); + section.$window = $( window ); + section.$body = $( document.body ); + api.Section.prototype.initialize.call( section, id, options ); + section.updateCountDebounced = _.debounce( section.updateCount, 500 ); + }, + + /** + * Embed the section in the DOM when the themes panel is ready. + * + * Insert the section before the themes container. Assume that a themes section is within a panel, but not necessarily the themes panel. + * + * @since 4.9.0 + */ + embed: function() { + var inject, + section = this; + + // Watch for changes to the panel state. + inject = function( panelId ) { + var parentContainer; + api.panel( panelId, function( panel ) { + + // The panel has been registered, wait for it to become ready/initialized. + panel.deferred.embedded.done( function() { + parentContainer = panel.contentContainer; + if ( ! section.headContainer.parent().is( parentContainer ) ) { + parentContainer.find( '.customize-themes-full-container-container' ).before( section.headContainer ); + } + if ( ! section.contentContainer.parent().is( section.headContainer ) ) { + section.containerParent.append( section.contentContainer ); + } + section.deferred.embedded.resolve(); + }); + } ); + }; + section.panel.bind( inject ); + inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one. + }, + + /** + * Set up. + * + * @since 4.2.0 + * + * @return {void} + */ + ready: function() { + var section = this; + section.overlay = section.container.find( '.theme-overlay' ); + section.template = wp.template( 'customize-themes-details-view' ); + + // Bind global keyboard events. + section.container.on( 'keydown', function( event ) { + if ( ! section.overlay.find( '.theme-wrap' ).is( ':visible' ) ) { + return; + } + + // Pressing the right arrow key fires a theme:next event. + if ( 39 === event.keyCode ) { + section.nextTheme(); + } + + // Pressing the left arrow key fires a theme:previous event. + if ( 37 === event.keyCode ) { + section.previousTheme(); + } + + // Pressing the escape key fires a theme:collapse event. + if ( 27 === event.keyCode ) { + if ( section.$body.hasClass( 'modal-open' ) ) { + + // Escape from the details modal. + section.closeDetails(); + } else { + + // Escape from the inifinite scroll list. + section.headerContainer.find( '.customize-themes-section-title' ).focus(); + } + event.stopPropagation(); // Prevent section from being collapsed. + } + }); + + section.renderScreenshots = _.throttle( section.renderScreenshots, 100 ); + + _.bindAll( section, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' ); + }, + + /** + * Override Section.isContextuallyActive method. + * + * Ignore the active states' of the contained theme controls, and just + * use the section's own active state instead. This prevents empty search + * results for theme sections from causing the section to become inactive. + * + * @since 4.2.0 + * + * @return {boolean} + */ + isContextuallyActive: function () { + return this.active(); + }, + + /** + * Attach events. + * + * @since 4.2.0 + * + * @return {void} + */ + attachEvents: function () { + var section = this, debounced; + + // Expand/Collapse accordion sections on click. + section.container.find( '.customize-section-back' ).on( 'click keydown', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); // Keep this AFTER the key filter above. + section.collapse(); + }); + + section.headerContainer = $( '#accordion-section-' + section.id ); + + // Expand section/panel. Only collapse when opening another section. + section.headerContainer.on( 'click', '.customize-themes-section-title', function() { + + // Toggle accordion filters under section headers. + if ( section.headerContainer.find( '.filter-details' ).length ) { + section.headerContainer.find( '.customize-themes-section-title' ) + .toggleClass( 'details-open' ) + .attr( 'aria-expanded', function( i, attr ) { + return 'true' === attr ? 'false' : 'true'; + }); + section.headerContainer.find( '.filter-details' ).slideToggle( 180 ); + } + + // Open the section. + if ( ! section.expanded() ) { + section.expand(); + } + }); + + // Preview installed themes. + section.container.on( 'click', '.theme-actions .preview-theme', function() { + api.panel( 'themes' ).loadThemePreview( $( this ).data( 'slug' ) ); + }); + + // Theme navigation in details view. + section.container.on( 'click', '.left', function() { + section.previousTheme(); + }); + + section.container.on( 'click', '.right', function() { + section.nextTheme(); + }); + + section.container.on( 'click', '.theme-backdrop, .close', function() { + section.closeDetails(); + }); + + if ( 'local' === section.params.filter_type ) { + + // Filter-search all theme objects loaded in the section. + section.container.on( 'input', '.wp-filter-search-themes', function( event ) { + section.filterSearch( event.currentTarget.value ); + }); + + } else if ( 'remote' === section.params.filter_type ) { + + // Event listeners for remote queries with user-entered terms. + // Search terms. + debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search. + section.contentContainer.on( 'input', '.wp-filter-search', function() { + if ( ! api.panel( 'themes' ).expanded() ) { + return; + } + debounced( section ); + if ( ! section.expanded() ) { + section.expand(); + } + }); + + // Feature filters. + section.contentContainer.on( 'click', '.filter-group input', function() { + section.filtersChecked(); + section.checkTerm( section ); + }); + } + + // Toggle feature filters. + section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) { + var $themeContainer = $( '.customize-themes-full-container' ), + $filterToggle = $( e.currentTarget ); + section.filtersHeight = $filterToggle.parent().next( '.filter-drawer' ).height(); + + if ( 0 < $themeContainer.scrollTop() ) { + $themeContainer.animate( { scrollTop: 0 }, 400 ); + + if ( $filterToggle.hasClass( 'open' ) ) { + return; + } + } + + $filterToggle + .toggleClass( 'open' ) + .attr( 'aria-expanded', function( i, attr ) { + return 'true' === attr ? 'false' : 'true'; + }) + .parent().next( '.filter-drawer' ).slideToggle( 180, 'linear' ); + + if ( $filterToggle.hasClass( 'open' ) ) { + var marginOffset = 1018 < window.innerWidth ? 50 : 76; + + section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + marginOffset ); + } else { + section.contentContainer.find( '.themes' ).css( 'margin-top', 0 ); + } + }); + + // Setup section cross-linking. + section.contentContainer.on( 'click', '.no-themes-local .search-dotorg-themes', function() { + api.section( 'wporg_themes' ).focus(); + }); + + function updateSelectedState() { + var el = section.headerContainer.find( '.customize-themes-section-title' ); + el.toggleClass( 'selected', section.expanded() ); + el.attr( 'aria-expanded', section.expanded() ? 'true' : 'false' ); + if ( ! section.expanded() ) { + el.removeClass( 'details-open' ); + } + } + section.expanded.bind( updateSelectedState ); + updateSelectedState(); + + // Move section controls to the themes area. + api.bind( 'ready', function () { + section.contentContainer = section.container.find( '.customize-themes-section' ); + section.contentContainer.appendTo( $( '.customize-themes-full-container' ) ); + section.container.add( section.headerContainer ); + }); + }, + + /** + * Update UI to reflect expanded state + * + * @since 4.2.0 + * + * @param {boolean} expanded + * @param {Object} args + * @param {boolean} args.unchanged + * @param {Function} args.completeCallback + * @return {void} + */ + onChangeExpanded: function ( expanded, args ) { + + // Note: there is a second argument 'args' passed. + var section = this, + container = section.contentContainer.closest( '.customize-themes-full-container' ); + + // Immediately call the complete callback if there were no changes. + if ( args.unchanged ) { + if ( args.completeCallback ) { + args.completeCallback(); + } + return; + } + + function expand() { + + // Try to load controls if none are loaded yet. + if ( 0 === section.loaded ) { + section.loadThemes(); + } + + // Collapse any sibling sections/panels. + api.section.each( function ( otherSection ) { + var searchTerm; + + if ( otherSection !== section ) { + + // Try to sync the current search term to the new section. + if ( 'themes' === otherSection.params.type ) { + searchTerm = otherSection.contentContainer.find( '.wp-filter-search' ).val(); + section.contentContainer.find( '.wp-filter-search' ).val( searchTerm ); + + // Directly initialize an empty remote search to avoid a race condition. + if ( '' === searchTerm && '' !== section.term && 'local' !== section.params.filter_type ) { + section.term = ''; + section.initializeNewQuery( section.term, section.tags ); + } else { + if ( 'remote' === section.params.filter_type ) { + section.checkTerm( section ); + } else if ( 'local' === section.params.filter_type ) { + section.filterSearch( searchTerm ); + } + } + otherSection.collapse( { duration: args.duration } ); + } + } + }); + + section.contentContainer.addClass( 'current-section' ); + container.scrollTop(); + + container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) ); + container.on( 'scroll', _.throttle( section.loadMore, 300 ) ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + section.updateCount(); // Show this section's count. + } + + if ( expanded ) { + if ( section.panel() && api.panel.has( section.panel() ) ) { + api.panel( section.panel() ).expand({ + duration: args.duration, + completeCallback: expand + }); + } else { + expand(); + } + } else { + section.contentContainer.removeClass( 'current-section' ); + + // Always hide, even if they don't exist or are already hidden. + section.headerContainer.find( '.filter-details' ).slideUp( 180 ); + + container.off( 'scroll' ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } + }, + + /** + * Return the section's content element without detaching from the parent. + * + * @since 4.9.0 + * + * @return {jQuery} + */ + getContent: function() { + return this.container.find( '.control-section-content' ); + }, + + /** + * Load theme data via Ajax and add themes to the section as controls. + * + * @since 4.9.0 + * + * @return {void} + */ + loadThemes: function() { + var section = this, params, page, request; + + if ( section.loading ) { + return; // We're already loading a batch of themes. + } + + // Parameters for every API query. Additional params are set in PHP. + page = Math.ceil( section.loaded / 100 ) + 1; + params = { + 'nonce': api.settings.nonce.switch_themes, + 'wp_customize': 'on', + 'theme_action': section.params.action, + 'customized_theme': api.settings.theme.stylesheet, + 'page': page + }; + + // Add fields for remote filtering. + if ( 'remote' === section.params.filter_type ) { + params.search = section.term; + params.tags = section.tags; + } + + // Load themes. + section.headContainer.closest( '.wp-full-overlay' ).addClass( 'loading' ); + section.loading = true; + section.container.find( '.no-themes' ).hide(); + request = wp.ajax.post( 'customize_load_themes', params ); + request.done(function( data ) { + var themes = data.themes; + + // Stop and try again if the term changed while loading. + if ( '' !== section.nextTerm || '' !== section.nextTags ) { + if ( section.nextTerm ) { + section.term = section.nextTerm; + } + if ( section.nextTags ) { + section.tags = section.nextTags; + } + section.nextTerm = ''; + section.nextTags = ''; + section.loading = false; + section.loadThemes(); + return; + } + + if ( 0 !== themes.length ) { + + section.loadControls( themes, page ); + + if ( 1 === page ) { + + // Pre-load the first 3 theme screenshots. + _.each( section.controls().slice( 0, 3 ), function( control ) { + var img, src = control.params.theme.screenshot[0]; + if ( src ) { + img = new Image(); + img.src = src; + } + }); + if ( 'local' !== section.params.filter_type ) { + wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) ); + } + } + + _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible. + + if ( 'local' === section.params.filter_type || 100 > themes.length ) { + // If we have less than the requested 100 themes, it's the end of the list. + section.fullyLoaded = true; + } + } else { + if ( 0 === section.loaded ) { + section.container.find( '.no-themes' ).show(); + wp.a11y.speak( section.container.find( '.no-themes' ).text() ); + } else { + section.fullyLoaded = true; + } + } + if ( 'local' === section.params.filter_type ) { + section.updateCount(); // Count of visible theme controls. + } else { + section.updateCount( data.info.results ); // Total number of results including pages not yet loaded. + } + section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown. + + // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case. + section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' ); + section.loading = false; + }); + request.fail(function( data ) { + if ( 'undefined' === typeof data ) { + section.container.find( '.unexpected-error' ).show(); + wp.a11y.speak( section.container.find( '.unexpected-error' ).text() ); + } else if ( 'undefined' !== typeof console && console.error ) { + console.error( data ); + } + + // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case. + section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' ); + section.loading = false; + }); + }, + + /** + * Loads controls into the section from data received from loadThemes(). + * + * @since 4.9.0 + * @param {Array} themes - Array of theme data to create controls with. + * @param {number} page - Page of results being loaded. + * @return {void} + */ + loadControls: function( themes, page ) { + var newThemeControls = [], + section = this; + + // Add controls for each theme. + _.each( themes, function( theme ) { + var themeControl = new api.controlConstructor.theme( section.params.action + '_theme_' + theme.id, { + type: 'theme', + section: section.params.id, + theme: theme, + priority: section.loaded + 1 + } ); + + api.control.add( themeControl ); + newThemeControls.push( themeControl ); + section.loaded = section.loaded + 1; + }); + + if ( 1 !== page ) { + Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue. + } + }, + + /** + * Determines whether more themes should be loaded, and loads them. + * + * @since 4.9.0 + * @return {void} + */ + loadMore: function() { + var section = this, container, bottom, threshold; + if ( ! section.fullyLoaded && ! section.loading ) { + container = section.container.closest( '.customize-themes-full-container' ); + + bottom = container.scrollTop() + container.height(); + // Use a fixed distance to the bottom of loaded results to avoid unnecessarily + // loading results sooner when using a percentage of scroll distance. + threshold = container.prop( 'scrollHeight' ) - 3000; + + if ( bottom > threshold ) { + section.loadThemes(); + } + } + }, + + /** + * Event handler for search input that filters visible controls. + * + * @since 4.9.0 + * + * @param {string} term - The raw search input value. + * @return {void} + */ + filterSearch: function( term ) { + var count = 0, + visible = false, + section = this, + noFilter = ( api.section.has( 'wporg_themes' ) && 'remote' !== section.params.filter_type ) ? '.no-themes-local' : '.no-themes', + controls = section.controls(), + terms; + + if ( section.loading ) { + return; + } + + // Standardize search term format and split into an array of individual words. + terms = term.toLowerCase().trim().replace( /-/g, ' ' ).split( ' ' ); + + _.each( controls, function( control ) { + visible = control.filter( terms ); // Shows/hides and sorts control based on the applicability of the search term. + if ( visible ) { + count = count + 1; + } + }); + + if ( 0 === count ) { + section.container.find( noFilter ).show(); + wp.a11y.speak( section.container.find( noFilter ).text() ); + } else { + section.container.find( noFilter ).hide(); + } + + section.renderScreenshots(); + api.reflowPaneContents(); + + // Update theme count. + section.updateCountDebounced( count ); + }, + + /** + * Event handler for search input that determines if the terms have changed and loads new controls as needed. + * + * @since 4.9.0 + * + * @param {wp.customize.ThemesSection} section - The current theme section, passed through the debouncer. + * @return {void} + */ + checkTerm: function( section ) { + var newTerm; + if ( 'remote' === section.params.filter_type ) { + newTerm = section.contentContainer.find( '.wp-filter-search' ).val(); + if ( section.term !== newTerm.trim() ) { + section.initializeNewQuery( newTerm, section.tags ); + } + } + }, + + /** + * Check for filters checked in the feature filter list and initialize a new query. + * + * @since 4.9.0 + * + * @return {void} + */ + filtersChecked: function() { + var section = this, + items = section.container.find( '.filter-group' ).find( ':checkbox' ), + tags = []; + + _.each( items.filter( ':checked' ), function( item ) { + tags.push( $( item ).prop( 'value' ) ); + }); + + // When no filters are checked, restore initial state. Update filter count. + if ( 0 === tags.length ) { + tags = ''; + section.contentContainer.find( '.feature-filter-toggle .filter-count-0' ).show(); + section.contentContainer.find( '.feature-filter-toggle .filter-count-filters' ).hide(); + } else { + section.contentContainer.find( '.feature-filter-toggle .theme-filter-count' ).text( tags.length ); + section.contentContainer.find( '.feature-filter-toggle .filter-count-0' ).hide(); + section.contentContainer.find( '.feature-filter-toggle .filter-count-filters' ).show(); + } + + // Check whether tags have changed, and either load or queue them. + if ( ! _.isEqual( section.tags, tags ) ) { + if ( section.loading ) { + section.nextTags = tags; + } else { + if ( 'remote' === section.params.filter_type ) { + section.initializeNewQuery( section.term, tags ); + } else if ( 'local' === section.params.filter_type ) { + section.filterSearch( tags.join( ' ' ) ); + } + } + } + }, + + /** + * Reset the current query and load new results. + * + * @since 4.9.0 + * + * @param {string} newTerm - New term. + * @param {Array} newTags - New tags. + * @return {void} + */ + initializeNewQuery: function( newTerm, newTags ) { + var section = this; + + // Clear the controls in the section. + _.each( section.controls(), function( control ) { + control.container.remove(); + api.control.remove( control.id ); + }); + section.loaded = 0; + section.fullyLoaded = false; + section.screenshotQueue = null; + + // Run a new query, with loadThemes handling paging, etc. + if ( ! section.loading ) { + section.term = newTerm; + section.tags = newTags; + section.loadThemes(); + } else { + section.nextTerm = newTerm; // This will reload from loadThemes() with the newest term once the current batch is loaded. + section.nextTags = newTags; // This will reload from loadThemes() with the newest tags once the current batch is loaded. + } + if ( ! section.expanded() ) { + section.expand(); // Expand the section if it isn't expanded. + } + }, + + /** + * Render control's screenshot if the control comes into view. + * + * @since 4.2.0 + * + * @return {void} + */ + renderScreenshots: function() { + var section = this; + + // Fill queue initially, or check for more if empty. + if ( null === section.screenshotQueue || 0 === section.screenshotQueue.length ) { + + // Add controls that haven't had their screenshots rendered. + section.screenshotQueue = _.filter( section.controls(), function( control ) { + return ! control.screenshotRendered; + }); + } + + // Are all screenshots rendered (for now)? + if ( ! section.screenshotQueue.length ) { + return; + } + + section.screenshotQueue = _.filter( section.screenshotQueue, function( control ) { + var $imageWrapper = control.container.find( '.theme-screenshot' ), + $image = $imageWrapper.find( 'img' ); + + if ( ! $image.length ) { + return false; + } + + if ( $image.is( ':hidden' ) ) { + return true; + } + + // Based on unveil.js. + var wt = section.$window.scrollTop(), + wb = wt + section.$window.height(), + et = $image.offset().top, + ih = $imageWrapper.height(), + eb = et + ih, + threshold = ih * 3, + inView = eb >= wt - threshold && et <= wb + threshold; + + if ( inView ) { + control.container.trigger( 'render-screenshot' ); + } + + // If the image is in view return false so it's cleared from the queue. + return ! inView; + } ); + }, + + /** + * Get visible count. + * + * @since 4.9.0 + * + * @return {number} Visible count. + */ + getVisibleCount: function() { + return this.contentContainer.find( 'li.customize-control:visible' ).length; + }, + + /** + * Update the number of themes in the section. + * + * @since 4.9.0 + * + * @return {void} + */ + updateCount: function( count ) { + var section = this, countEl, displayed; + + if ( ! count && 0 !== count ) { + count = section.getVisibleCount(); + } + + displayed = section.contentContainer.find( '.themes-displayed' ); + countEl = section.contentContainer.find( '.theme-count' ); + + if ( 0 === count ) { + countEl.text( '0' ); + } else { + + // Animate the count change for emphasis. + displayed.fadeOut( 180, function() { + countEl.text( count ); + displayed.fadeIn( 180 ); + } ); + wp.a11y.speak( api.settings.l10n.announceThemeCount.replace( '%d', count ) ); + } + }, + + /** + * Advance the modal to the next theme. + * + * @since 4.2.0 + * + * @return {void} + */ + nextTheme: function () { + var section = this; + if ( section.getNextTheme() ) { + section.showDetails( section.getNextTheme(), function() { + section.overlay.find( '.right' ).focus(); + } ); + } + }, + + /** + * Get the next theme model. + * + * @since 4.2.0 + * + * @return {wp.customize.ThemeControl|boolean} Next theme. + */ + getNextTheme: function () { + var section = this, control, nextControl, sectionControls, i; + control = api.control( section.params.action + '_theme_' + section.currentTheme ); + sectionControls = section.controls(); + i = _.indexOf( sectionControls, control ); + if ( -1 === i ) { + return false; + } + + nextControl = sectionControls[ i + 1 ]; + if ( ! nextControl ) { + return false; + } + return nextControl.params.theme; + }, + + /** + * Advance the modal to the previous theme. + * + * @since 4.2.0 + * @return {void} + */ + previousTheme: function () { + var section = this; + if ( section.getPreviousTheme() ) { + section.showDetails( section.getPreviousTheme(), function() { + section.overlay.find( '.left' ).focus(); + } ); + } + }, + + /** + * Get the previous theme model. + * + * @since 4.2.0 + * @return {wp.customize.ThemeControl|boolean} Previous theme. + */ + getPreviousTheme: function () { + var section = this, control, nextControl, sectionControls, i; + control = api.control( section.params.action + '_theme_' + section.currentTheme ); + sectionControls = section.controls(); + i = _.indexOf( sectionControls, control ); + if ( -1 === i ) { + return false; + } + + nextControl = sectionControls[ i - 1 ]; + if ( ! nextControl ) { + return false; + } + return nextControl.params.theme; + }, + + /** + * Disable buttons when we're viewing the first or last theme. + * + * @since 4.2.0 + * + * @return {void} + */ + updateLimits: function () { + if ( ! this.getNextTheme() ) { + this.overlay.find( '.right' ).addClass( 'disabled' ); + } + if ( ! this.getPreviousTheme() ) { + this.overlay.find( '.left' ).addClass( 'disabled' ); + } + }, + + /** + * Load theme preview. + * + * @since 4.7.0 + * @access public + * + * @deprecated + * @param {string} themeId Theme ID. + * @return {jQuery.promise} Promise. + */ + loadThemePreview: function( themeId ) { + return api.ThemesPanel.prototype.loadThemePreview.call( this, themeId ); + }, + + /** + * Render & show the theme details for a given theme model. + * + * @since 4.2.0 + * + * @param {Object} theme - Theme. + * @param {Function} [callback] - Callback once the details have been shown. + * @return {void} + */ + showDetails: function ( theme, callback ) { + var section = this, panel = api.panel( 'themes' ); + section.currentTheme = theme.id; + section.overlay.html( section.template( theme ) ) + .fadeIn( 'fast' ) + .focus(); + + function disableSwitchButtons() { + return ! panel.canSwitchTheme( theme.id ); + } + + // Temporary special function since supplying SFTP credentials does not work yet. See #42184. + function disableInstallButtons() { + return disableSwitchButtons() || false === api.settings.theme._canInstall || true === api.settings.theme._filesystemCredentialsNeeded; + } + + section.overlay.find( 'button.preview, button.preview-theme' ).toggleClass( 'disabled', disableSwitchButtons() ); + section.overlay.find( 'button.theme-install' ).toggleClass( 'disabled', disableInstallButtons() ); + + section.$body.addClass( 'modal-open' ); + section.containFocus( section.overlay ); + section.updateLimits(); + wp.a11y.speak( api.settings.l10n.announceThemeDetails.replace( '%s', theme.name ) ); + if ( callback ) { + callback(); + } + }, + + /** + * Close the theme details modal. + * + * @since 4.2.0 + * + * @return {void} + */ + closeDetails: function () { + var section = this; + section.$body.removeClass( 'modal-open' ); + section.overlay.fadeOut( 'fast' ); + api.control( section.params.action + '_theme_' + section.currentTheme ).container.find( '.theme' ).focus(); + }, + + /** + * Keep tab focus within the theme details modal. + * + * @since 4.2.0 + * + * @param {jQuery} el - Element to contain focus. + * @return {void} + */ + containFocus: function( el ) { + var tabbables; + + el.on( 'keydown', function( event ) { + + // Return if it's not the tab key + // When navigating with prev/next focus is already handled. + if ( 9 !== event.keyCode ) { + return; + } + + // Uses jQuery UI to get the tabbable elements. + tabbables = $( ':tabbable', el ); + + // Keep focus within the overlay. + if ( tabbables.last()[0] === event.target && ! event.shiftKey ) { + tabbables.first().focus(); + return false; + } else if ( tabbables.first()[0] === event.target && event.shiftKey ) { + tabbables.last().focus(); + return false; + } + }); + } + }); + + api.OuterSection = api.Section.extend(/** @lends wp.customize.OuterSection.prototype */{ + + /** + * Class wp.customize.OuterSection. + * + * Creates section outside of the sidebar, there is no ui to trigger collapse/expand so + * it would require custom handling. + * + * @constructs wp.customize.OuterSection + * @augments wp.customize.Section + * + * @since 4.9.0 + * + * @return {void} + */ + initialize: function() { + var section = this; + section.containerParent = '#customize-outer-theme-controls'; + section.containerPaneParent = '.customize-outer-pane-parent'; + api.Section.prototype.initialize.apply( section, arguments ); + }, + + /** + * Overrides api.Section.prototype.onChangeExpanded to prevent collapse/expand effect + * on other sections and panels. + * + * @since 4.9.0 + * + * @param {boolean} expanded - The expanded state to transition to. + * @param {Object} [args] - Args. + * @param {boolean} [args.unchanged] - Whether the state is already known to not be changed, and so short-circuit with calling completeCallback early. + * @param {Function} [args.completeCallback] - Function to call when the slideUp/slideDown has completed. + * @param {Object} [args.duration] - The duration for the animation. + */ + onChangeExpanded: function( expanded, args ) { + var section = this, + container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ), + content = section.contentContainer, + backBtn = content.find( '.customize-section-back' ), + sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(), + body = $( document.body ), + expand, panel; + + body.toggleClass( 'outer-section-open', expanded ); + section.container.toggleClass( 'open', expanded ); + section.container.removeClass( 'busy' ); + api.section.each( function( _section ) { + if ( 'outer' === _section.params.type && _section.id !== section.id ) { + _section.container.removeClass( 'open' ); + } + } ); + + if ( expanded && ! content.hasClass( 'open' ) ) { + + if ( args.unchanged ) { + expand = args.completeCallback; + } else { + expand = function() { + section._animateChangeExpanded( function() { + sectionTitle.attr( 'tabindex', '-1' ); + backBtn.attr( 'tabindex', '0' ); + + backBtn.trigger( 'focus' ); + content.css( 'top', '' ); + container.scrollTop( 0 ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + content.addClass( 'open' ); + }.bind( this ); + } + + if ( section.panel() ) { + api.panel( section.panel() ).expand({ + duration: args.duration, + completeCallback: expand + }); + } else { + expand(); + } + + } else if ( ! expanded && content.hasClass( 'open' ) ) { + if ( section.panel() ) { + panel = api.panel( section.panel() ); + if ( panel.contentContainer.hasClass( 'skip-transition' ) ) { + panel.collapse(); + } + } + section._animateChangeExpanded( function() { + backBtn.attr( 'tabindex', '-1' ); + sectionTitle.attr( 'tabindex', '0' ); + + sectionTitle.trigger( 'focus' ); + content.css( 'top', '' ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + content.removeClass( 'open' ); + + } else { + if ( args.completeCallback ) { + args.completeCallback(); + } + } + } + }); + + api.Panel = Container.extend(/** @lends wp.customize.Panel.prototype */{ + containerType: 'panel', + + /** + * @constructs wp.customize.Panel + * @augments wp.customize~Container + * + * @since 4.1.0 + * + * @param {string} id - The ID for the panel. + * @param {Object} options - Object containing one property: params. + * @param {string} options.title - Title shown when panel is collapsed and expanded. + * @param {string} [options.description] - Description shown at the top of the panel. + * @param {number} [options.priority=100] - The sort priority for the panel. + * @param {string} [options.type=default] - The type of the panel. See wp.customize.panelConstructor. + * @param {string} [options.content] - The markup to be used for the panel container. If empty, a JS template is used. + * @param {boolean} [options.active=true] - Whether the panel is active or not. + * @param {Object} [options.params] - Deprecated wrapper for the above properties. + */ + initialize: function ( id, options ) { + var panel = this, params; + params = options.params || options; + + // Look up the type if one was not supplied. + if ( ! params.type ) { + _.find( api.panelConstructor, function( Constructor, type ) { + if ( Constructor === panel.constructor ) { + params.type = type; + return true; + } + return false; + } ); + } + + Container.prototype.initialize.call( panel, id, params ); + + panel.embed(); + panel.deferred.embedded.done( function () { + panel.ready(); + }); + }, + + /** + * Embed the container in the DOM when any parent panel is ready. + * + * @since 4.1.0 + */ + embed: function () { + var panel = this, + container = $( '#customize-theme-controls' ), + parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable. + + if ( ! panel.headContainer.parent().is( parentContainer ) ) { + parentContainer.append( panel.headContainer ); + } + if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) { + container.append( panel.contentContainer ); + } + panel.renderContent(); + + panel.deferred.embedded.resolve(); + }, + + /** + * @since 4.1.0 + */ + attachEvents: function () { + var meta, panel = this; + + // Expand/Collapse accordion sections on click. + panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); // Keep this AFTER the key filter above. + + if ( ! panel.expanded() ) { + panel.expand(); + } + }); + + // Close panel. + panel.container.find( '.customize-panel-back' ).on( 'click keydown', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); // Keep this AFTER the key filter above. + + if ( panel.expanded() ) { + panel.collapse(); + } + }); + + meta = panel.container.find( '.panel-meta:first' ); + + meta.find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() { + if ( meta.hasClass( 'cannot-expand' ) ) { + return; + } + + var content = meta.find( '.customize-panel-description:first' ); + if ( meta.hasClass( 'open' ) ) { + meta.toggleClass( 'open' ); + content.slideUp( panel.defaultExpandedArguments.duration, function() { + content.trigger( 'toggled' ); + } ); + $( this ).attr( 'aria-expanded', false ); + } else { + content.slideDown( panel.defaultExpandedArguments.duration, function() { + content.trigger( 'toggled' ); + } ); + meta.toggleClass( 'open' ); + $( this ).attr( 'aria-expanded', true ); + } + }); + + }, + + /** + * Get the sections that are associated with this panel, sorted by their priority Value. + * + * @since 4.1.0 + * + * @return {Array} + */ + sections: function () { + return this._children( 'panel', 'section' ); + }, + + /** + * Return whether this panel has any active sections. + * + * @since 4.1.0 + * + * @return {boolean} Whether contextually active. + */ + isContextuallyActive: function () { + var panel = this, + sections = panel.sections(), + activeCount = 0; + _( sections ).each( function ( section ) { + if ( section.active() && section.isContextuallyActive() ) { + activeCount += 1; + } + } ); + return ( activeCount !== 0 ); + }, + + /** + * Update UI to reflect expanded state. + * + * @since 4.1.0 + * + * @param {boolean} expanded + * @param {Object} args + * @param {boolean} args.unchanged + * @param {Function} args.completeCallback + * @return {void} + */ + onChangeExpanded: function ( expanded, args ) { + + // Immediately call the complete callback if there were no changes. + if ( args.unchanged ) { + if ( args.completeCallback ) { + args.completeCallback(); + } + return; + } + + // Note: there is a second argument 'args' passed. + var panel = this, + accordionSection = panel.contentContainer, + overlay = accordionSection.closest( '.wp-full-overlay' ), + container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ), + topPanel = panel.headContainer.find( '.accordion-section-title' ), + backBtn = accordionSection.find( '.customize-panel-back' ), + childSections = panel.sections(), + skipTransition; + + if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) { + // Collapse any sibling sections/panels. + api.section.each( function ( section ) { + if ( panel.id !== section.panel() ) { + section.collapse( { duration: 0 } ); + } + }); + api.panel.each( function ( otherPanel ) { + if ( panel !== otherPanel ) { + otherPanel.collapse( { duration: 0 } ); + } + }); + + if ( panel.params.autoExpandSoleSection && 1 === childSections.length && childSections[0].active.get() ) { + accordionSection.addClass( 'current-panel skip-transition' ); + overlay.addClass( 'in-sub-panel' ); + + childSections[0].expand( { + completeCallback: args.completeCallback + } ); + } else { + panel._animateChangeExpanded( function() { + topPanel.attr( 'tabindex', '-1' ); + backBtn.attr( 'tabindex', '0' ); + + backBtn.trigger( 'focus' ); + accordionSection.css( 'top', '' ); + container.scrollTop( 0 ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + + accordionSection.addClass( 'current-panel' ); + overlay.addClass( 'in-sub-panel' ); + } + + api.state( 'expandedPanel' ).set( panel ); + + } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) { + skipTransition = accordionSection.hasClass( 'skip-transition' ); + if ( ! skipTransition ) { + panel._animateChangeExpanded( function() { + topPanel.attr( 'tabindex', '0' ); + backBtn.attr( 'tabindex', '-1' ); + + topPanel.focus(); + accordionSection.css( 'top', '' ); + + if ( args.completeCallback ) { + args.completeCallback(); + } + } ); + } else { + accordionSection.removeClass( 'skip-transition' ); + } + + overlay.removeClass( 'in-sub-panel' ); + accordionSection.removeClass( 'current-panel' ); + if ( panel === api.state( 'expandedPanel' ).get() ) { + api.state( 'expandedPanel' ).set( false ); + } + } + }, + + /** + * Render the panel from its JS template, if it exists. + * + * The panel's container must already exist in the DOM. + * + * @since 4.3.0 + */ + renderContent: function () { + var template, + panel = this; + + // Add the content to the container. + if ( 0 !== $( '#tmpl-' + panel.templateSelector + '-content' ).length ) { + template = wp.template( panel.templateSelector + '-content' ); + } else { + template = wp.template( 'customize-panel-default-content' ); + } + if ( template && panel.headContainer ) { + panel.contentContainer.html( template( _.extend( + { id: panel.id }, + panel.params + ) ) ); + } + } + }); + + api.ThemesPanel = api.Panel.extend(/** @lends wp.customize.ThemsPanel.prototype */{ + + /** + * Class wp.customize.ThemesPanel. + * + * Custom section for themes that displays without the customize preview. + * + * @constructs wp.customize.ThemesPanel + * @augments wp.customize.Panel + * + * @since 4.9.0 + * + * @param {string} id - The ID for the panel. + * @param {Object} options - Options. + * @return {void} + */ + initialize: function( id, options ) { + var panel = this; + panel.installingThemes = []; + api.Panel.prototype.initialize.call( panel, id, options ); + }, + + /** + * Determine whether a given theme can be switched to, or in general. + * + * @since 4.9.0 + * + * @param {string} [slug] - Theme slug. + * @return {boolean} Whether the theme can be switched to. + */ + canSwitchTheme: function canSwitchTheme( slug ) { + if ( slug && slug === api.settings.theme.stylesheet ) { + return true; + } + return 'publish' === api.state( 'selectedChangesetStatus' ).get() && ( '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get() ); + }, + + /** + * Attach events. + * + * @since 4.9.0 + * @return {void} + */ + attachEvents: function() { + var panel = this; + + // Attach regular panel events. + api.Panel.prototype.attachEvents.apply( panel ); + + // Temporary since supplying SFTP credentials does not work yet. See #42184. + if ( api.settings.theme._canInstall && api.settings.theme._filesystemCredentialsNeeded ) { + panel.notifications.add( new api.Notification( 'theme_install_unavailable', { + message: api.l10n.themeInstallUnavailable, + type: 'info', + dismissible: true + } ) ); + } + + function toggleDisabledNotifications() { + if ( panel.canSwitchTheme() ) { + panel.notifications.remove( 'theme_switch_unavailable' ); + } else { + panel.notifications.add( new api.Notification( 'theme_switch_unavailable', { + message: api.l10n.themePreviewUnavailable, + type: 'warning' + } ) ); + } + } + toggleDisabledNotifications(); + api.state( 'selectedChangesetStatus' ).bind( toggleDisabledNotifications ); + api.state( 'changesetStatus' ).bind( toggleDisabledNotifications ); + + // Collapse panel to customize the current theme. + panel.contentContainer.on( 'click', '.customize-theme', function() { + panel.collapse(); + }); + + // Toggle between filtering and browsing themes on mobile. + panel.contentContainer.on( 'click', '.customize-themes-section-title, .customize-themes-mobile-back', function() { + $( '.wp-full-overlay' ).toggleClass( 'showing-themes' ); + }); + + // Install (and maybe preview) a theme. + panel.contentContainer.on( 'click', '.theme-install', function( event ) { + panel.installTheme( event ); + }); + + // Update a theme. Theme cards have the class, the details modal has the id. + panel.contentContainer.on( 'click', '.update-theme, #update-theme', function( event ) { + + // #update-theme is a link. + event.preventDefault(); + event.stopPropagation(); + + panel.updateTheme( event ); + }); + + // Delete a theme. + panel.contentContainer.on( 'click', '.delete-theme', function( event ) { + panel.deleteTheme( event ); + }); + + _.bindAll( panel, 'installTheme', 'updateTheme' ); + }, + + /** + * Update UI to reflect expanded state + * + * @since 4.9.0 + * + * @param {boolean} expanded - Expanded state. + * @param {Object} args - Args. + * @param {boolean} args.unchanged - Whether or not the state changed. + * @param {Function} args.completeCallback - Callback to execute when the animation completes. + * @return {void} + */ + onChangeExpanded: function( expanded, args ) { + var panel = this, overlay, sections, hasExpandedSection = false; + + // Expand/collapse the panel normally. + api.Panel.prototype.onChangeExpanded.apply( this, [ expanded, args ] ); + + // Immediately call the complete callback if there were no changes. + if ( args.unchanged ) { + if ( args.completeCallback ) { + args.completeCallback(); + } + return; + } + + overlay = panel.headContainer.closest( '.wp-full-overlay' ); + + if ( expanded ) { + overlay + .addClass( 'in-themes-panel' ) + .delay( 200 ).find( '.customize-themes-full-container' ).addClass( 'animate' ); + + _.delay( function() { + overlay.addClass( 'themes-panel-expanded' ); + }, 200 ); + + // Automatically open the first section (except on small screens), if one isn't already expanded. + if ( 600 < window.innerWidth ) { + sections = panel.sections(); + _.each( sections, function( section ) { + if ( section.expanded() ) { + hasExpandedSection = true; + } + } ); + if ( ! hasExpandedSection && sections.length > 0 ) { + sections[0].expand(); + } + } + } else { + overlay + .removeClass( 'in-themes-panel themes-panel-expanded' ) + .find( '.customize-themes-full-container' ).removeClass( 'animate' ); + } + }, + + /** + * Install a theme via wp.updates. + * + * @since 4.9.0 + * + * @param {jQuery.Event} event - Event. + * @return {jQuery.promise} Promise. + */ + installTheme: function( event ) { + var panel = this, preview, onInstallSuccess, slug = $( event.target ).data( 'slug' ), deferred = $.Deferred(), request; + preview = $( event.target ).hasClass( 'preview' ); + + // Temporary since supplying SFTP credentials does not work yet. See #42184. + if ( api.settings.theme._filesystemCredentialsNeeded ) { + deferred.reject({ + errorCode: 'theme_install_unavailable' + }); + return deferred.promise(); + } + + // Prevent loading a non-active theme preview when there is a drafted/scheduled changeset. + if ( ! panel.canSwitchTheme( slug ) ) { + deferred.reject({ + errorCode: 'theme_switch_unavailable' + }); + return deferred.promise(); + } + + // Theme is already being installed. + if ( _.contains( panel.installingThemes, slug ) ) { + deferred.reject({ + errorCode: 'theme_already_installing' + }); + return deferred.promise(); + } + + wp.updates.maybeRequestFilesystemCredentials( event ); + + onInstallSuccess = function( response ) { + var theme = false, themeControl; + if ( preview ) { + api.notifications.remove( 'theme_installing' ); + + panel.loadThemePreview( slug ); + + } else { + api.control.each( function( control ) { + if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) { + theme = control.params.theme; // Used below to add theme control. + control.rerenderAsInstalled( true ); + } + }); + + // Don't add the same theme more than once. + if ( ! theme || api.control.has( 'installed_theme_' + theme.id ) ) { + deferred.resolve( response ); + return; + } + + // Add theme control to installed section. + theme.type = 'installed'; + themeControl = new api.controlConstructor.theme( 'installed_theme_' + theme.id, { + type: 'theme', + section: 'installed_themes', + theme: theme, + priority: 0 // Add all newly-installed themes to the top. + } ); + + api.control.add( themeControl ); + api.control( themeControl.id ).container.trigger( 'render-screenshot' ); + + // Close the details modal if it's open to the installed theme. + api.section.each( function( section ) { + if ( 'themes' === section.params.type ) { + if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere. + section.closeDetails(); + } + } + }); + } + deferred.resolve( response ); + }; + + panel.installingThemes.push( slug ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again. + request = wp.updates.installTheme( { + slug: slug + } ); + + // Also preview the theme as the event is triggered on Install & Preview. + if ( preview ) { + api.notifications.add( new api.OverlayNotification( 'theme_installing', { + message: api.l10n.themeDownloading, + type: 'info', + loading: true + } ) ); + } + + request.done( onInstallSuccess ); + request.fail( function() { + api.notifications.remove( 'theme_installing' ); + } ); + + return deferred.promise(); + }, + + /** + * Load theme preview. + * + * @since 4.9.0 + * + * @param {string} themeId Theme ID. + * @return {jQuery.promise} Promise. + */ + loadThemePreview: function( themeId ) { + var panel = this, deferred = $.Deferred(), onceProcessingComplete, urlParser, queryParams; + + // Prevent loading a non-active theme preview when there is a drafted/scheduled changeset. + if ( ! panel.canSwitchTheme( themeId ) ) { + deferred.reject({ + errorCode: 'theme_switch_unavailable' + }); + return deferred.promise(); + } + + urlParser = document.createElement( 'a' ); + urlParser.href = location.href; + queryParams = _.extend( + api.utils.parseQueryString( urlParser.search.substr( 1 ) ), + { + theme: themeId, + changeset_uuid: api.settings.changeset.uuid, + 'return': api.settings.url['return'] + } + ); + + // Include autosaved param to load autosave revision without prompting user to restore it. + if ( ! api.state( 'saved' ).get() ) { + queryParams.customize_autosaved = 'on'; + } + + urlParser.search = $.param( queryParams ); + + // Update loading message. Everything else is handled by reloading the page. + api.notifications.add( new api.OverlayNotification( 'theme_previewing', { + message: api.l10n.themePreviewWait, + type: 'info', + loading: true + } ) ); + + onceProcessingComplete = function() { + var request; + if ( api.state( 'processing' ).get() > 0 ) { + return; + } + + api.state( 'processing' ).unbind( onceProcessingComplete ); + + request = api.requestChangesetUpdate( {}, { autosave: true } ); + request.done( function() { + deferred.resolve(); + $( window ).off( 'beforeunload.customize-confirm' ); + location.replace( urlParser.href ); + } ); + request.fail( function() { + + // @todo Show notification regarding failure. + api.notifications.remove( 'theme_previewing' ); + + deferred.reject(); + } ); + }; + + if ( 0 === api.state( 'processing' ).get() ) { + onceProcessingComplete(); + } else { + api.state( 'processing' ).bind( onceProcessingComplete ); + } + + return deferred.promise(); + }, + + /** + * Update a theme via wp.updates. + * + * @since 4.9.0 + * + * @param {jQuery.Event} event - Event. + * @return {void} + */ + updateTheme: function( event ) { + wp.updates.maybeRequestFilesystemCredentials( event ); + + $( document ).one( 'wp-theme-update-success', function( e, response ) { + + // Rerender the control to reflect the update. + api.control.each( function( control ) { + if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) { + control.params.theme.hasUpdate = false; + control.params.theme.version = response.newVersion; + setTimeout( function() { + control.rerenderAsInstalled( true ); + }, 2000 ); + } + }); + } ); + + wp.updates.updateTheme( { + slug: $( event.target ).closest( '.notice' ).data( 'slug' ) + } ); + }, + + /** + * Delete a theme via wp.updates. + * + * @since 4.9.0 + * + * @param {jQuery.Event} event - Event. + * @return {void} + */ + deleteTheme: function( event ) { + var theme, section; + theme = $( event.target ).data( 'slug' ); + section = api.section( 'installed_themes' ); + + event.preventDefault(); + + // Temporary since supplying SFTP credentials does not work yet. See #42184. + if ( api.settings.theme._filesystemCredentialsNeeded ) { + return; + } + + // Confirmation dialog for deleting a theme. + if ( ! window.confirm( api.settings.l10n.confirmDeleteTheme ) ) { + return; + } + + wp.updates.maybeRequestFilesystemCredentials( event ); + + $( document ).one( 'wp-theme-delete-success', function() { + var control = api.control( 'installed_theme_' + theme ); + + // Remove theme control. + control.container.remove(); + api.control.remove( control.id ); + + // Update installed count. + section.loaded = section.loaded - 1; + section.updateCount(); + + // Rerender any other theme controls as uninstalled. + api.control.each( function( control ) { + if ( 'theme' === control.params.type && control.params.theme.id === theme ) { + control.rerenderAsInstalled( false ); + } + }); + } ); + + wp.updates.deleteTheme( { + slug: theme + } ); + + // Close modal and focus the section. + section.closeDetails(); + section.focus(); + } + }); + + api.Control = api.Class.extend(/** @lends wp.customize.Control.prototype */{ + defaultActiveArguments: { duration: 'fast', completeCallback: $.noop }, + + /** + * Default params. + * + * @since 4.9.0 + * @var {object} + */ + defaults: { + label: '', + description: '', + active: true, + priority: 10 + }, + + /** + * A Customizer Control. + * + * A control provides a UI element that allows a user to modify a Customizer Setting. + * + * @see PHP class WP_Customize_Control. + * + * @constructs wp.customize.Control + * @augments wp.customize.Class + * + * @borrows wp.customize~focus as this#focus + * @borrows wp.customize~Container#activate as this#activate + * @borrows wp.customize~Container#deactivate as this#deactivate + * @borrows wp.customize~Container#_toggleActive as this#_toggleActive + * + * @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. + * @return {void} + */ + initialize: function( id, options ) { + var control = this, deferredSettingIds = [], settings, gatherSettings; + + control.params = _.extend( + {}, + control.defaults, + control.params || {}, // In case subclass already defines. + options.params || options || {} // The options.params property is deprecated, but it is checked first for back-compat. + ); + + if ( ! api.Control.instanceCounter ) { + api.Control.instanceCounter = 0; + } + api.Control.instanceCounter++; + if ( ! control.params.instanceNumber ) { + control.params.instanceNumber = api.Control.instanceCounter; + } + + // Look up the type if one was not supplied. + if ( ! control.params.type ) { + _.find( api.controlConstructor, function( Constructor, type ) { + if ( Constructor === control.constructor ) { + control.params.type = type; + return true; + } + return false; + } ); + } + + if ( ! control.params.content ) { + control.params.content = $( '
  • ', { + id: 'customize-control-' + id.replace( /]/g, '' ).replace( /\[/g, '-' ), + 'class': 'customize-control customize-control-' + control.params.type + } ); + } + + control.id = id; + control.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' ); // Deprecated, likely dead code from time before #28709. + if ( control.params.content ) { + control.container = $( control.params.content ); + } else { + control.container = $( control.selector ); // Likely dead, per above. See #28709. + } + + if ( control.params.templateId ) { + control.templateSelector = control.params.templateId; + } else { + control.templateSelector = 'customize-control-' + control.params.type + '-content'; + } + + control.deferred = _.extend( control.deferred || {}, { + embedded: new $.Deferred() + } ); + control.section = new api.Value(); + control.priority = new api.Value(); + control.active = new api.Value(); + control.activeArgumentsQueue = []; + control.notifications = new api.Notifications({ + alt: control.altNotice + }); + + control.elements = []; + + control.active.bind( function ( active ) { + var args = control.activeArgumentsQueue.shift(); + args = $.extend( {}, control.defaultActiveArguments, args ); + control.onChangeActive( active, args ); + } ); + + control.section.set( control.params.section ); + control.priority.set( isNaN( control.params.priority ) ? 10 : control.params.priority ); + control.active.set( control.params.active ); + + api.utils.bubbleChildValueChanges( control, [ 'section', 'priority', 'active' ] ); + + control.settings = {}; + + settings = {}; + if ( control.params.setting ) { + settings['default'] = control.params.setting; + } + _.extend( settings, control.params.settings ); + + // Note: Settings can be an array or an object, with values being either setting IDs or Setting (or Value) objects. + _.each( settings, function( value, key ) { + var setting; + if ( _.isObject( value ) && _.isFunction( value.extended ) && value.extended( api.Value ) ) { + control.settings[ key ] = value; + } else if ( _.isString( value ) ) { + setting = api( value ); + if ( setting ) { + control.settings[ key ] = setting; + } else { + deferredSettingIds.push( value ); + } + } + } ); + + gatherSettings = function() { + + // Fill-in all resolved settings. + _.each( settings, function ( settingId, key ) { + if ( ! control.settings[ key ] && _.isString( settingId ) ) { + control.settings[ key ] = api( settingId ); + } + } ); + + // Make sure settings passed as array gets associated with default. + if ( control.settings[0] && ! control.settings['default'] ) { + control.settings['default'] = control.settings[0]; + } + + // Identify the main setting. + control.setting = control.settings['default'] || null; + + control.linkElements(); // Link initial elements present in server-rendered content. + control.embed(); + }; + + if ( 0 === deferredSettingIds.length ) { + gatherSettings(); + } else { + api.apply( api, deferredSettingIds.concat( gatherSettings ) ); + } + + // After the control is embedded on the page, invoke the "ready" method. + control.deferred.embedded.done( function () { + control.linkElements(); // Link any additional elements after template is rendered by renderContent(). + control.setupNotifications(); + control.ready(); + }); + }, + + /** + * Link elements between settings and inputs. + * + * @since 4.7.0 + * @access public + * + * @return {void} + */ + linkElements: function () { + var control = this, nodes, radios, element; + + nodes = control.container.find( '[data-customize-setting-link], [data-customize-setting-key-link]' ); + radios = {}; + + nodes.each( function () { + var node = $( this ), name, setting; + + if ( node.data( 'customizeSettingLinked' ) ) { + return; + } + node.data( 'customizeSettingLinked', true ); // Prevent re-linking element. + + if ( node.is( ':radio' ) ) { + name = node.prop( 'name' ); + if ( radios[name] ) { + return; + } + + radios[name] = true; + node = nodes.filter( '[name="' + name + '"]' ); + } + + // Let link by default refer to setting ID. If it doesn't exist, fallback to looking up by setting key. + if ( node.data( 'customizeSettingLink' ) ) { + setting = api( node.data( 'customizeSettingLink' ) ); + } else if ( node.data( 'customizeSettingKeyLink' ) ) { + setting = control.settings[ node.data( 'customizeSettingKeyLink' ) ]; + } + + if ( setting ) { + element = new api.Element( node ); + control.elements.push( element ); + element.sync( setting ); + element.set( setting() ); + } + } ); + }, + + /** + * Embed the control into the page. + */ + embed: function () { + var control = this, + inject; + + // Watch for changes to the section state. + inject = function ( sectionId ) { + var parentContainer; + if ( ! sectionId ) { // @todo Allow a control to be embedded without a section, for instance a control embedded in the front end. + return; + } + // Wait for the section to be registered. + api.section( sectionId, function ( section ) { + // Wait for the section to be ready/initialized. + section.deferred.embedded.done( function () { + parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' ); + if ( ! control.container.parent().is( parentContainer ) ) { + parentContainer.append( control.container ); + } + control.renderContent(); + control.deferred.embedded.resolve(); + }); + }); + }; + control.section.bind( inject ); + inject( control.section.get() ); + }, + + /** + * Triggered when the control's markup has been injected into the DOM. + * + * @return {void} + */ + ready: function() { + var control = this, newItem; + if ( 'dropdown-pages' === control.params.type && control.params.allow_addition ) { + newItem = control.container.find( '.new-content-item' ); + newItem.hide(); // Hide in JS to preserve flex display when showing. + control.container.on( 'click', '.add-new-toggle', function( e ) { + $( e.currentTarget ).slideUp( 180 ); + newItem.slideDown( 180 ); + newItem.find( '.create-item-input' ).focus(); + }); + control.container.on( 'click', '.add-content', function() { + control.addNewPage(); + }); + control.container.on( 'keydown', '.create-item-input', function( e ) { + if ( 13 === e.which ) { // Enter. + control.addNewPage(); + } + }); + } + }, + + /** + * Get the element inside of a control's container that contains the validation error message. + * + * Control subclasses may override this to return the proper container to render notifications into. + * Injects the notification container for existing controls that lack the necessary container, + * including special handling for nav menu items and widgets. + * + * @since 4.6.0 + * @return {jQuery} Setting validation message element. + */ + getNotificationsContainerElement: function() { + var control = this, controlTitle, notificationsContainer; + + notificationsContainer = control.container.find( '.customize-control-notifications-container:first' ); + if ( notificationsContainer.length ) { + return notificationsContainer; + } + + notificationsContainer = $( '
    ' ); + + if ( control.container.hasClass( 'customize-control-nav_menu_item' ) ) { + control.container.find( '.menu-item-settings:first' ).prepend( notificationsContainer ); + } else if ( control.container.hasClass( 'customize-control-widget_form' ) ) { + control.container.find( '.widget-inside:first' ).prepend( notificationsContainer ); + } else { + controlTitle = control.container.find( '.customize-control-title' ); + if ( controlTitle.length ) { + controlTitle.after( notificationsContainer ); + } else { + control.container.prepend( notificationsContainer ); + } + } + return notificationsContainer; + }, + + /** + * Set up notifications. + * + * @since 4.9.0 + * @return {void} + */ + setupNotifications: function() { + var control = this, renderNotificationsIfVisible, onSectionAssigned; + + // Add setting notifications to the control notification. + _.each( control.settings, function( setting ) { + if ( ! setting.notifications ) { + return; + } + setting.notifications.bind( 'add', function( settingNotification ) { + var params = _.extend( + {}, + settingNotification, + { + setting: setting.id + } + ); + control.notifications.add( new api.Notification( setting.id + ':' + settingNotification.code, params ) ); + } ); + setting.notifications.bind( 'remove', function( settingNotification ) { + control.notifications.remove( setting.id + ':' + settingNotification.code ); + } ); + } ); + + renderNotificationsIfVisible = function() { + var sectionId = control.section(); + if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) { + control.notifications.render(); + } + }; + + control.notifications.bind( 'rendered', function() { + var notifications = control.notifications.get(); + control.container.toggleClass( 'has-notifications', 0 !== notifications.length ); + control.container.toggleClass( 'has-error', 0 !== _.where( notifications, { type: 'error' } ).length ); + } ); + + onSectionAssigned = function( newSectionId, oldSectionId ) { + if ( oldSectionId && api.section.has( oldSectionId ) ) { + api.section( oldSectionId ).expanded.unbind( renderNotificationsIfVisible ); + } + if ( newSectionId ) { + api.section( newSectionId, function( section ) { + section.expanded.bind( renderNotificationsIfVisible ); + renderNotificationsIfVisible(); + }); + } + }; + + control.section.bind( onSectionAssigned ); + onSectionAssigned( control.section.get() ); + control.notifications.bind( 'change', _.debounce( renderNotificationsIfVisible ) ); + }, + + /** + * Render notifications. + * + * Renders the `control.notifications` into the control's container. + * Control subclasses may override this method to do their own handling + * of rendering notifications. + * + * @deprecated in favor of `control.notifications.render()` + * @since 4.6.0 + * @this {wp.customize.Control} + */ + renderNotifications: function() { + var control = this, container, notifications, hasError = false; + + if ( 'undefined' !== typeof console && console.warn ) { + console.warn( '[DEPRECATED] wp.customize.Control.prototype.renderNotifications() is deprecated in favor of instantating a wp.customize.Notifications and calling its render() method.' ); + } + + container = control.getNotificationsContainerElement(); + if ( ! container || ! container.length ) { + return; + } + notifications = []; + control.notifications.each( function( notification ) { + notifications.push( notification ); + if ( 'error' === notification.type ) { + hasError = true; + } + } ); + + if ( 0 === notifications.length ) { + container.stop().slideUp( 'fast' ); + } else { + container.stop().slideDown( 'fast', null, function() { + $( this ).css( 'height', 'auto' ); + } ); + } + + if ( ! control.notificationsTemplate ) { + control.notificationsTemplate = wp.template( 'customize-control-notifications' ); + } + + control.container.toggleClass( 'has-notifications', 0 !== notifications.length ); + control.container.toggleClass( 'has-error', hasError ); + container.empty().append( + control.notificationsTemplate( { notifications: notifications, altNotice: Boolean( control.altNotice ) } ).trim() + ); + }, + + /** + * Normal controls do not expand, so just expand its parent + * + * @param {Object} [params] + */ + expand: function ( params ) { + api.section( this.section() ).expand( params ); + }, + + /* + * Documented using @borrows in the constructor. + */ + focus: focus, + + /** + * Update UI in response to a change in the control's active state. + * This does not change the active state, it merely handles the behavior + * for when it does change. + * + * @since 4.1.0 + * + * @param {boolean} active + * @param {Object} args + * @param {number} args.duration + * @param {Function} args.completeCallback + */ + onChangeActive: function ( active, args ) { + if ( args.unchanged ) { + if ( args.completeCallback ) { + args.completeCallback(); + } + return; + } + + if ( ! $.contains( document, this.container[0] ) ) { + // jQuery.fn.slideUp is not hiding an element if it is not in the DOM. + this.container.toggle( active ); + if ( args.completeCallback ) { + args.completeCallback(); + } + } else if ( active ) { + this.container.slideDown( args.duration, args.completeCallback ); + } else { + this.container.slideUp( args.duration, args.completeCallback ); + } + }, + + /** + * @deprecated 4.1.0 Use this.onChangeActive() instead. + */ + toggle: function ( active ) { + return this.onChangeActive( active, this.defaultActiveArguments ); + }, + + /* + * Documented using @borrows in the constructor + */ + activate: Container.prototype.activate, + + /* + * Documented using @borrows in the constructor + */ + deactivate: Container.prototype.deactivate, + + /* + * Documented using @borrows in the constructor + */ + _toggleActive: Container.prototype._toggleActive, + + // @todo This function appears to be dead code and can be removed. + dropdownInit: function() { + var control = this, + statuses = this.container.find('.dropdown-status'), + params = this.params, + toggleFreeze = false, + update = function( to ) { + if ( 'string' === typeof to && params.statuses && params.statuses[ to ] ) { + statuses.html( params.statuses[ to ] ).show(); + } else { + statuses.hide(); + } + }; + + // Support the .dropdown class to open/close complex elements. + this.container.on( 'click keydown', '.dropdown', function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + + event.preventDefault(); + + if ( ! toggleFreeze ) { + control.container.toggleClass( 'open' ); + } + + if ( control.container.hasClass( 'open' ) ) { + control.container.parent().parent().find( 'li.library-selected' ).focus(); + } + + // Don't want to fire focus and click at same time. + toggleFreeze = true; + setTimeout(function () { + toggleFreeze = false; + }, 400); + }); + + this.setting.bind( update ); + update( this.setting() ); + }, + + /** + * Render the control from its JS template, if it exists. + * + * The control's container must already exist in the DOM. + * + * @since 4.1.0 + */ + renderContent: function () { + var control = this, template, standardTypes, templateId, sectionId; + + standardTypes = [ + 'button', + 'checkbox', + 'date', + 'datetime-local', + 'email', + 'month', + 'number', + 'password', + 'radio', + 'range', + 'search', + 'select', + 'tel', + 'time', + 'text', + 'textarea', + 'week', + 'url' + ]; + + templateId = control.templateSelector; + + // Use default content template when a standard HTML type is used, + // there isn't a more specific template existing, and the control container is empty. + if ( templateId === 'customize-control-' + control.params.type + '-content' && + _.contains( standardTypes, control.params.type ) && + ! document.getElementById( 'tmpl-' + templateId ) && + 0 === control.container.children().length ) + { + templateId = 'customize-control-default-content'; + } + + // Replace the container element's content with the control. + if ( document.getElementById( 'tmpl-' + templateId ) ) { + template = wp.template( templateId ); + if ( template && control.container ) { + control.container.html( template( control.params ) ); + } + } + + // Re-render notifications after content has been re-rendered. + control.notifications.container = control.getNotificationsContainerElement(); + sectionId = control.section(); + if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) { + control.notifications.render(); + } + }, + + /** + * Add a new page to a dropdown-pages control reusing menus code for this. + * + * @since 4.7.0 + * @access private + * + * @return {void} + */ + addNewPage: function () { + var control = this, promise, toggle, container, input, title, select; + + if ( 'dropdown-pages' !== control.params.type || ! control.params.allow_addition || ! api.Menus ) { + return; + } + + toggle = control.container.find( '.add-new-toggle' ); + container = control.container.find( '.new-content-item' ); + input = control.container.find( '.create-item-input' ); + title = input.val(); + select = control.container.find( 'select' ); + + if ( ! title ) { + input.addClass( 'invalid' ); + return; + } + + input.removeClass( 'invalid' ); + input.attr( 'disabled', 'disabled' ); + + // The menus functions add the page, publish when appropriate, + // and also add the new page to the dropdown-pages controls. + promise = api.Menus.insertAutoDraftPost( { + post_title: title, + post_type: 'page' + } ); + promise.done( function( data ) { + var availableItem, $content, itemTemplate; + + // Prepare the new page as an available menu item. + // See api.Menus.submitNew(). + availableItem = new api.Menus.AvailableItemModel( { + 'id': 'post-' + data.post_id, // Used for available menu item Backbone models. + 'title': title, + 'type': 'post_type', + 'type_label': api.Menus.data.l10n.page_label, + 'object': 'page', + 'object_id': data.post_id, + 'url': data.url + } ); + + // Add the new item to the list of available menu items. + api.Menus.availableMenuItemsPanel.collection.add( availableItem ); + $content = $( '#available-menu-items-post_type-page' ).find( '.available-menu-items-list' ); + itemTemplate = wp.template( 'available-menu-item' ); + $content.prepend( itemTemplate( availableItem.attributes ) ); + + // Focus the select control. + select.focus(); + control.setting.set( String( data.post_id ) ); // Triggers a preview refresh and updates the setting. + + // Reset the create page form. + container.slideUp( 180 ); + toggle.slideDown( 180 ); + } ); + promise.always( function() { + input.val( '' ).removeAttr( 'disabled' ); + } ); + } + }); + + /** + * A colorpicker control. + * + * @class wp.customize.ColorControl + * @augments wp.customize.Control + */ + api.ColorControl = api.Control.extend(/** @lends wp.customize.ColorControl.prototype */{ + ready: function() { + var control = this, + isHueSlider = this.params.mode === 'hue', + updating = false, + picker; + + if ( isHueSlider ) { + picker = this.container.find( '.color-picker-hue' ); + picker.val( control.setting() ).wpColorPicker({ + change: function( event, ui ) { + updating = true; + control.setting( ui.color.h() ); + updating = false; + } + }); + } else { + picker = this.container.find( '.color-picker-hex' ); + picker.val( control.setting() ).wpColorPicker({ + change: function() { + updating = true; + control.setting.set( picker.wpColorPicker( 'color' ) ); + updating = false; + }, + clear: function() { + updating = true; + control.setting.set( '' ); + updating = false; + } + }); + } + + control.setting.bind( function ( value ) { + // Bail if the update came from the control itself. + if ( updating ) { + return; + } + picker.val( value ); + picker.wpColorPicker( 'color', value ); + } ); + + // Collapse color picker when hitting Esc instead of collapsing the current section. + control.container.on( 'keydown', function( event ) { + var pickerContainer; + if ( 27 !== event.which ) { // Esc. + return; + } + pickerContainer = control.container.find( '.wp-picker-container' ); + if ( pickerContainer.hasClass( 'wp-picker-active' ) ) { + picker.wpColorPicker( 'close' ); + control.container.find( '.wp-color-result' ).focus(); + event.stopPropagation(); // Prevent section from being collapsed. + } + } ); + } + }); + + /** + * A control that implements the media modal. + * + * @class wp.customize.MediaControl + * @augments wp.customize.Control + */ + api.MediaControl = api.Control.extend(/** @lends wp.customize.MediaControl.prototype */{ + + /** + * When the control's DOM structure is ready, + * set up internal event bindings. + */ + ready: function() { + var control = this; + // Shortcut so that we don't have to use _.bind every time we add a callback. + _.bindAll( control, 'restoreDefault', 'removeFile', 'openFrame', 'select', 'pausePlayer' ); + + // Bind events, with delegation to facilitate re-rendering. + control.container.on( 'click keydown', '.upload-button', control.openFrame ); + control.container.on( 'click keydown', '.upload-button', control.pausePlayer ); + control.container.on( 'click keydown', '.thumbnail-image img', control.openFrame ); + control.container.on( 'click keydown', '.default-button', control.restoreDefault ); + control.container.on( 'click keydown', '.remove-button', control.pausePlayer ); + control.container.on( 'click keydown', '.remove-button', control.removeFile ); + control.container.on( 'click keydown', '.remove-button', control.cleanupPlayer ); + + // Resize the player controls when it becomes visible (ie when section is expanded). + api.section( control.section() ).container + .on( 'expanded', function() { + if ( control.player ) { + control.player.setControlsSize(); + } + }) + .on( 'collapsed', function() { + control.pausePlayer(); + }); + + /** + * Set attachment data and render content. + * + * Note that BackgroundImage.prototype.ready applies this ready method + * to itself. Since BackgroundImage is an UploadControl, the value + * is the attachment URL instead of the attachment ID. In this case + * we skip fetching the attachment data because we have no ID available, + * and it is the responsibility of the UploadControl to set the control's + * attachmentData before calling the renderContent method. + * + * @param {number|string} value Attachment + */ + function setAttachmentDataAndRenderContent( value ) { + var hasAttachmentData = $.Deferred(); + + if ( control.extended( api.UploadControl ) ) { + hasAttachmentData.resolve(); + } else { + value = parseInt( value, 10 ); + if ( _.isNaN( value ) || value <= 0 ) { + delete control.params.attachment; + hasAttachmentData.resolve(); + } else if ( control.params.attachment && control.params.attachment.id === value ) { + hasAttachmentData.resolve(); + } + } + + // Fetch the attachment data. + if ( 'pending' === hasAttachmentData.state() ) { + wp.media.attachment( value ).fetch().done( function() { + control.params.attachment = this.attributes; + hasAttachmentData.resolve(); + + // Send attachment information to the preview for possible use in `postMessage` transport. + wp.customize.previewer.send( control.setting.id + '-attachment-data', this.attributes ); + } ); + } + + hasAttachmentData.done( function() { + control.renderContent(); + } ); + } + + // Ensure attachment data is initially set (for dynamically-instantiated controls). + setAttachmentDataAndRenderContent( control.setting() ); + + // Update the attachment data and re-render the control when the setting changes. + control.setting.bind( setAttachmentDataAndRenderContent ); + }, + + pausePlayer: function () { + this.player && this.player.pause(); + }, + + cleanupPlayer: function () { + this.player && wp.media.mixin.removePlayer( this.player ); + }, + + /** + * Open the media modal. + */ + openFrame: function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + + event.preventDefault(); + + if ( ! this.frame ) { + this.initFrame(); + } + + this.frame.open(); + }, + + /** + * Create a media modal select frame, and store it so the instance can be reused when needed. + */ + initFrame: function() { + this.frame = wp.media({ + button: { + text: this.params.button_labels.frame_button + }, + states: [ + new wp.media.controller.Library({ + title: this.params.button_labels.frame_title, + library: wp.media.query({ type: this.params.mime_type }), + multiple: false, + date: false + }) + ] + }); + + // When a file is selected, run a callback. + this.frame.on( 'select', this.select ); + }, + + /** + * Callback handler for when an attachment is selected in the media modal. + * Gets the selected image information, and sets it within the control. + */ + select: function() { + // Get the attachment from the modal frame. + var node, + attachment = this.frame.state().get( 'selection' ).first().toJSON(), + mejsSettings = window._wpmejsSettings || {}; + + this.params.attachment = attachment; + + // Set the Customizer setting; the callback takes care of rendering. + this.setting( attachment.id ); + node = this.container.find( 'audio, video' ).get(0); + + // Initialize audio/video previews. + if ( node ) { + this.player = new MediaElementPlayer( node, mejsSettings ); + } else { + this.cleanupPlayer(); + } + }, + + /** + * Reset the setting to the default value. + */ + restoreDefault: function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); + + this.params.attachment = this.params.defaultAttachment; + this.setting( this.params.defaultAttachment.url ); + }, + + /** + * Called when the "Remove" link is clicked. Empties the setting. + * + * @param {Object} event jQuery Event object + */ + removeFile: function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); + + this.params.attachment = {}; + this.setting( '' ); + this.renderContent(); // Not bound to setting change when emptying. + } + }); + + /** + * An upload control, which utilizes the media modal. + * + * @class wp.customize.UploadControl + * @augments wp.customize.MediaControl + */ + api.UploadControl = api.MediaControl.extend(/** @lends wp.customize.UploadControl.prototype */{ + + /** + * Callback handler for when an attachment is selected in the media modal. + * Gets the selected image information, and sets it within the control. + */ + select: function() { + // Get the attachment from the modal frame. + var node, + attachment = this.frame.state().get( 'selection' ).first().toJSON(), + mejsSettings = window._wpmejsSettings || {}; + + this.params.attachment = attachment; + + // Set the Customizer setting; the callback takes care of rendering. + this.setting( attachment.url ); + node = this.container.find( 'audio, video' ).get(0); + + // Initialize audio/video previews. + if ( node ) { + this.player = new MediaElementPlayer( node, mejsSettings ); + } else { + this.cleanupPlayer(); + } + }, + + // @deprecated + success: function() {}, + + // @deprecated + removerVisibility: function() {} + }); + + /** + * A control for uploading images. + * + * This control no longer needs to do anything more + * than what the upload control does in JS. + * + * @class wp.customize.ImageControl + * @augments wp.customize.UploadControl + */ + api.ImageControl = api.UploadControl.extend(/** @lends wp.customize.ImageControl.prototype */{ + // @deprecated + thumbnailSrc: function() {} + }); + + /** + * A control for uploading background images. + * + * @class wp.customize.BackgroundControl + * @augments wp.customize.UploadControl + */ + api.BackgroundControl = api.UploadControl.extend(/** @lends wp.customize.BackgroundControl.prototype */{ + + /** + * When the control's DOM structure is ready, + * set up internal event bindings. + */ + ready: function() { + api.UploadControl.prototype.ready.apply( this, arguments ); + }, + + /** + * Callback handler for when an attachment is selected in the media modal. + * Does an additional Ajax request for setting the background context. + */ + select: function() { + api.UploadControl.prototype.select.apply( this, arguments ); + + wp.ajax.post( 'custom-background-add', { + nonce: _wpCustomizeBackground.nonces.add, + wp_customize: 'on', + customize_theme: api.settings.theme.stylesheet, + attachment_id: this.params.attachment.id + } ); + } + }); + + /** + * A control for positioning a background image. + * + * @since 4.7.0 + * + * @class wp.customize.BackgroundPositionControl + * @augments wp.customize.Control + */ + api.BackgroundPositionControl = api.Control.extend(/** @lends wp.customize.BackgroundPositionControl.prototype */{ + + /** + * Set up control UI once embedded in DOM and settings are created. + * + * @since 4.7.0 + * @access public + */ + ready: function() { + var control = this, updateRadios; + + control.container.on( 'change', 'input[name="background-position"]', function() { + var position = $( this ).val().split( ' ' ); + control.settings.x( position[0] ); + control.settings.y( position[1] ); + } ); + + updateRadios = _.debounce( function() { + var x, y, radioInput, inputValue; + x = control.settings.x.get(); + y = control.settings.y.get(); + inputValue = String( x ) + ' ' + String( y ); + radioInput = control.container.find( 'input[name="background-position"][value="' + inputValue + '"]' ); + radioInput.trigger( 'click' ); + } ); + control.settings.x.bind( updateRadios ); + control.settings.y.bind( updateRadios ); + + updateRadios(); // Set initial UI. + } + } ); + + /** + * A control for selecting and cropping an image. + * + * @class wp.customize.CroppedImageControl + * @augments wp.customize.MediaControl + */ + api.CroppedImageControl = api.MediaControl.extend(/** @lends wp.customize.CroppedImageControl.prototype */{ + + /** + * Open the media modal to the library state. + */ + openFrame: function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + + this.initFrame(); + this.frame.setState( 'library' ).open(); + }, + + /** + * Create a media modal select frame, and store it so the instance can be reused when needed. + */ + initFrame: function() { + var l10n = _wpMediaViewsL10n; + + this.frame = wp.media({ + button: { + text: l10n.select, + close: false + }, + states: [ + new wp.media.controller.Library({ + title: this.params.button_labels.frame_title, + library: wp.media.query({ type: 'image' }), + multiple: false, + date: false, + priority: 20, + suggestedWidth: this.params.width, + suggestedHeight: this.params.height + }), + new wp.media.controller.CustomizeImageCropper({ + imgSelectOptions: this.calculateImageSelectOptions, + control: this + }) + ] + }); + + this.frame.on( 'select', this.onSelect, this ); + this.frame.on( 'cropped', this.onCropped, this ); + this.frame.on( 'skippedcrop', this.onSkippedCrop, this ); + }, + + /** + * After an image is selected in the media modal, switch to the cropper + * state if the image isn't the right size. + */ + onSelect: function() { + var attachment = this.frame.state().get( 'selection' ).first().toJSON(); + + if ( this.params.width === attachment.width && this.params.height === attachment.height && ! this.params.flex_width && ! this.params.flex_height ) { + this.setImageFromAttachment( attachment ); + this.frame.close(); + } else { + this.frame.setState( 'cropper' ); + } + }, + + /** + * After the image has been cropped, apply the cropped image data to the setting. + * + * @param {Object} croppedImage Cropped attachment data. + */ + onCropped: function( croppedImage ) { + this.setImageFromAttachment( croppedImage ); + }, + + /** + * Returns a set of options, computed from the attached image data and + * control-specific data, to be fed to the imgAreaSelect plugin in + * wp.media.view.Cropper. + * + * @param {wp.media.model.Attachment} attachment + * @param {wp.media.controller.Cropper} controller + * @return {Object} Options + */ + calculateImageSelectOptions: function( attachment, controller ) { + var control = controller.get( 'control' ), + flexWidth = !! parseInt( control.params.flex_width, 10 ), + flexHeight = !! parseInt( control.params.flex_height, 10 ), + realWidth = attachment.get( 'width' ), + realHeight = attachment.get( 'height' ), + xInit = parseInt( control.params.width, 10 ), + yInit = parseInt( control.params.height, 10 ), + ratio = xInit / yInit, + xImg = xInit, + yImg = yInit, + x1, y1, imgSelectOptions; + + controller.set( 'canSkipCrop', ! control.mustBeCropped( flexWidth, flexHeight, xInit, yInit, realWidth, realHeight ) ); + + if ( realWidth / realHeight > ratio ) { + yInit = realHeight; + xInit = yInit * ratio; + } else { + xInit = realWidth; + yInit = xInit / ratio; + } + + x1 = ( realWidth - xInit ) / 2; + y1 = ( realHeight - yInit ) / 2; + + imgSelectOptions = { + handles: true, + keys: true, + instance: true, + persistent: true, + imageWidth: realWidth, + imageHeight: realHeight, + minWidth: xImg > xInit ? xInit : xImg, + minHeight: yImg > yInit ? yInit : yImg, + x1: x1, + y1: y1, + x2: xInit + x1, + y2: yInit + y1 + }; + + if ( flexHeight === false && flexWidth === false ) { + imgSelectOptions.aspectRatio = xInit + ':' + yInit; + } + + if ( true === flexHeight ) { + delete imgSelectOptions.minHeight; + imgSelectOptions.maxWidth = realWidth; + } + + if ( true === flexWidth ) { + delete imgSelectOptions.minWidth; + imgSelectOptions.maxHeight = realHeight; + } + + return imgSelectOptions; + }, + + /** + * Return whether the image must be cropped, based on required dimensions. + * + * @param {boolean} flexW + * @param {boolean} flexH + * @param {number} dstW + * @param {number} dstH + * @param {number} imgW + * @param {number} imgH + * @return {boolean} + */ + mustBeCropped: function( flexW, flexH, dstW, dstH, imgW, imgH ) { + if ( true === flexW && true === flexH ) { + return false; + } + + if ( true === flexW && dstH === imgH ) { + return false; + } + + if ( true === flexH && dstW === imgW ) { + return false; + } + + if ( dstW === imgW && dstH === imgH ) { + return false; + } + + if ( imgW <= dstW ) { + return false; + } + + return true; + }, + + /** + * If cropping was skipped, apply the image data directly to the setting. + */ + onSkippedCrop: function() { + var attachment = this.frame.state().get( 'selection' ).first().toJSON(); + this.setImageFromAttachment( attachment ); + }, + + /** + * Updates the setting and re-renders the control UI. + * + * @param {Object} attachment + */ + setImageFromAttachment: function( attachment ) { + this.params.attachment = attachment; + + // Set the Customizer setting; the callback takes care of rendering. + this.setting( attachment.id ); + } + }); + + /** + * A control for selecting and cropping Site Icons. + * + * @class wp.customize.SiteIconControl + * @augments wp.customize.CroppedImageControl + */ + api.SiteIconControl = api.CroppedImageControl.extend(/** @lends wp.customize.SiteIconControl.prototype */{ + + /** + * Create a media modal select frame, and store it so the instance can be reused when needed. + */ + initFrame: function() { + var l10n = _wpMediaViewsL10n; + + this.frame = wp.media({ + button: { + text: l10n.select, + close: false + }, + states: [ + new wp.media.controller.Library({ + title: this.params.button_labels.frame_title, + library: wp.media.query({ type: 'image' }), + multiple: false, + date: false, + priority: 20, + suggestedWidth: this.params.width, + suggestedHeight: this.params.height + }), + new wp.media.controller.SiteIconCropper({ + imgSelectOptions: this.calculateImageSelectOptions, + control: this + }) + ] + }); + + this.frame.on( 'select', this.onSelect, this ); + this.frame.on( 'cropped', this.onCropped, this ); + this.frame.on( 'skippedcrop', this.onSkippedCrop, this ); + }, + + /** + * After an image is selected in the media modal, switch to the cropper + * state if the image isn't the right size. + */ + onSelect: function() { + var attachment = this.frame.state().get( 'selection' ).first().toJSON(), + controller = this; + + if ( this.params.width === attachment.width && this.params.height === attachment.height && ! this.params.flex_width && ! this.params.flex_height ) { + wp.ajax.post( 'crop-image', { + nonce: attachment.nonces.edit, + id: attachment.id, + context: 'site-icon', + cropDetails: { + x1: 0, + y1: 0, + width: this.params.width, + height: this.params.height, + dst_width: this.params.width, + dst_height: this.params.height + } + } ).done( function( croppedImage ) { + controller.setImageFromAttachment( croppedImage ); + controller.frame.close(); + } ).fail( function() { + controller.frame.trigger('content:error:crop'); + } ); + } else { + this.frame.setState( 'cropper' ); + } + }, + + /** + * Updates the setting and re-renders the control UI. + * + * @param {Object} attachment + */ + setImageFromAttachment: function( attachment ) { + var sizes = [ 'site_icon-32', 'thumbnail', 'full' ], link, + icon; + + _.each( sizes, function( size ) { + if ( ! icon && ! _.isUndefined ( attachment.sizes[ size ] ) ) { + icon = attachment.sizes[ size ]; + } + } ); + + this.params.attachment = attachment; + + // Set the Customizer setting; the callback takes care of rendering. + this.setting( attachment.id ); + + if ( ! icon ) { + return; + } + + // Update the icon in-browser. + link = $( 'link[rel="icon"][sizes="32x32"]' ); + link.attr( 'href', icon.url ); + }, + + /** + * Called when the "Remove" link is clicked. Empties the setting. + * + * @param {Object} event jQuery Event object + */ + removeFile: function( event ) { + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + event.preventDefault(); + + this.params.attachment = {}; + this.setting( '' ); + this.renderContent(); // Not bound to setting change when emptying. + $( 'link[rel="icon"][sizes="32x32"]' ).attr( 'href', '/favicon.ico' ); // Set to default. + } + }); + + /** + * @class wp.customize.HeaderControl + * @augments wp.customize.Control + */ + api.HeaderControl = api.Control.extend(/** @lends wp.customize.HeaderControl.prototype */{ + ready: function() { + this.btnRemove = $('#customize-control-header_image .actions .remove'); + this.btnNew = $('#customize-control-header_image .actions .new'); + + _.bindAll(this, 'openMedia', 'removeImage'); + + this.btnNew.on( 'click', this.openMedia ); + this.btnRemove.on( 'click', this.removeImage ); + + api.HeaderTool.currentHeader = this.getInitialHeaderImage(); + + new api.HeaderTool.CurrentView({ + model: api.HeaderTool.currentHeader, + el: '#customize-control-header_image .current .container' + }); + + new api.HeaderTool.ChoiceListView({ + collection: api.HeaderTool.UploadsList = new api.HeaderTool.ChoiceList(), + el: '#customize-control-header_image .choices .uploaded .list' + }); + + new api.HeaderTool.ChoiceListView({ + collection: api.HeaderTool.DefaultsList = new api.HeaderTool.DefaultsList(), + el: '#customize-control-header_image .choices .default .list' + }); + + api.HeaderTool.combinedList = api.HeaderTool.CombinedList = new api.HeaderTool.CombinedList([ + api.HeaderTool.UploadsList, + api.HeaderTool.DefaultsList + ]); + + // Ensure custom-header-crop Ajax requests bootstrap the Customizer to activate the previewed theme. + wp.media.controller.Cropper.prototype.defaults.doCropArgs.wp_customize = 'on'; + wp.media.controller.Cropper.prototype.defaults.doCropArgs.customize_theme = api.settings.theme.stylesheet; + }, + + /** + * Returns a new instance of api.HeaderTool.ImageModel based on the currently + * saved header image (if any). + * + * @since 4.2.0 + * + * @return {Object} Options + */ + getInitialHeaderImage: function() { + if ( ! api.get().header_image || ! api.get().header_image_data || _.contains( [ 'remove-header', 'random-default-image', 'random-uploaded-image' ], api.get().header_image ) ) { + return new api.HeaderTool.ImageModel(); + } + + // Get the matching uploaded image object. + var currentHeaderObject = _.find( _wpCustomizeHeader.uploads, function( imageObj ) { + return ( imageObj.attachment_id === api.get().header_image_data.attachment_id ); + } ); + // Fall back to raw current header image. + if ( ! currentHeaderObject ) { + currentHeaderObject = { + url: api.get().header_image, + thumbnail_url: api.get().header_image, + attachment_id: api.get().header_image_data.attachment_id + }; + } + + return new api.HeaderTool.ImageModel({ + header: currentHeaderObject, + choice: currentHeaderObject.url.split( '/' ).pop() + }); + }, + + /** + * Returns a set of options, computed from the attached image data and + * theme-specific data, to be fed to the imgAreaSelect plugin in + * wp.media.view.Cropper. + * + * @param {wp.media.model.Attachment} attachment + * @param {wp.media.controller.Cropper} controller + * @return {Object} Options + */ + calculateImageSelectOptions: function(attachment, controller) { + var xInit = parseInt(_wpCustomizeHeader.data.width, 10), + yInit = parseInt(_wpCustomizeHeader.data.height, 10), + flexWidth = !! parseInt(_wpCustomizeHeader.data['flex-width'], 10), + flexHeight = !! parseInt(_wpCustomizeHeader.data['flex-height'], 10), + ratio, xImg, yImg, realHeight, realWidth, + imgSelectOptions; + + realWidth = attachment.get('width'); + realHeight = attachment.get('height'); + + this.headerImage = new api.HeaderTool.ImageModel(); + this.headerImage.set({ + themeWidth: xInit, + themeHeight: yInit, + themeFlexWidth: flexWidth, + themeFlexHeight: flexHeight, + imageWidth: realWidth, + imageHeight: realHeight + }); + + controller.set( 'canSkipCrop', ! this.headerImage.shouldBeCropped() ); + + ratio = xInit / yInit; + xImg = realWidth; + yImg = realHeight; + + if ( xImg / yImg > ratio ) { + yInit = yImg; + xInit = yInit * ratio; + } else { + xInit = xImg; + yInit = xInit / ratio; + } + + imgSelectOptions = { + handles: true, + keys: true, + instance: true, + persistent: true, + imageWidth: realWidth, + imageHeight: realHeight, + x1: 0, + y1: 0, + x2: xInit, + y2: yInit + }; + + if (flexHeight === false && flexWidth === false) { + imgSelectOptions.aspectRatio = xInit + ':' + yInit; + } + if (flexHeight === false ) { + imgSelectOptions.maxHeight = yInit; + } + if (flexWidth === false ) { + imgSelectOptions.maxWidth = xInit; + } + + return imgSelectOptions; + }, + + /** + * Sets up and opens the Media Manager in order to select an image. + * Depending on both the size of the image and the properties of the + * current theme, a cropping step after selection may be required or + * skippable. + * + * @param {event} event + */ + openMedia: function(event) { + var l10n = _wpMediaViewsL10n; + + event.preventDefault(); + + this.frame = wp.media({ + button: { + text: l10n.selectAndCrop, + close: false + }, + states: [ + new wp.media.controller.Library({ + title: l10n.chooseImage, + library: wp.media.query({ type: 'image' }), + multiple: false, + date: false, + priority: 20, + suggestedWidth: _wpCustomizeHeader.data.width, + suggestedHeight: _wpCustomizeHeader.data.height + }), + new wp.media.controller.Cropper({ + imgSelectOptions: this.calculateImageSelectOptions + }) + ] + }); + + this.frame.on('select', this.onSelect, this); + this.frame.on('cropped', this.onCropped, this); + this.frame.on('skippedcrop', this.onSkippedCrop, this); + + this.frame.open(); + }, + + /** + * After an image is selected in the media modal, + * switch to the cropper state. + */ + onSelect: function() { + this.frame.setState('cropper'); + }, + + /** + * After the image has been cropped, apply the cropped image data to the setting. + * + * @param {Object} croppedImage Cropped attachment data. + */ + onCropped: function(croppedImage) { + var url = croppedImage.url, + attachmentId = croppedImage.attachment_id, + w = croppedImage.width, + h = croppedImage.height; + this.setImageFromURL(url, attachmentId, w, h); + }, + + /** + * If cropping was skipped, apply the image data directly to the setting. + * + * @param {Object} selection + */ + onSkippedCrop: function(selection) { + var url = selection.get('url'), + w = selection.get('width'), + h = selection.get('height'); + this.setImageFromURL(url, selection.id, w, h); + }, + + /** + * Creates a new wp.customize.HeaderTool.ImageModel from provided + * header image data and inserts it into the user-uploaded headers + * collection. + * + * @param {string} url + * @param {number} attachmentId + * @param {number} width + * @param {number} height + */ + setImageFromURL: function(url, attachmentId, width, height) { + var choice, data = {}; + + data.url = url; + data.thumbnail_url = url; + data.timestamp = _.now(); + + if (attachmentId) { + data.attachment_id = attachmentId; + } + + if (width) { + data.width = width; + } + + if (height) { + data.height = height; + } + + choice = new api.HeaderTool.ImageModel({ + header: data, + choice: url.split('/').pop() + }); + api.HeaderTool.UploadsList.add(choice); + api.HeaderTool.currentHeader.set(choice.toJSON()); + choice.save(); + choice.importImage(); + }, + + /** + * Triggers the necessary events to deselect an image which was set as + * the currently selected one. + */ + removeImage: function() { + api.HeaderTool.currentHeader.trigger('hide'); + api.HeaderTool.CombinedList.trigger('control:removeImage'); + } + + }); + + /** + * wp.customize.ThemeControl + * + * @class wp.customize.ThemeControl + * @augments wp.customize.Control + */ + api.ThemeControl = api.Control.extend(/** @lends wp.customize.ThemeControl.prototype */{ + + touchDrag: false, + screenshotRendered: false, + + /** + * @since 4.2.0 + */ + ready: function() { + var control = this, panel = api.panel( 'themes' ); + + function disableSwitchButtons() { + return ! panel.canSwitchTheme( control.params.theme.id ); + } + + // Temporary special function since supplying SFTP credentials does not work yet. See #42184. + function disableInstallButtons() { + return disableSwitchButtons() || false === api.settings.theme._canInstall || true === api.settings.theme._filesystemCredentialsNeeded; + } + function updateButtons() { + control.container.find( 'button.preview, button.preview-theme' ).toggleClass( 'disabled', disableSwitchButtons() ); + control.container.find( 'button.theme-install' ).toggleClass( 'disabled', disableInstallButtons() ); + } + + api.state( 'selectedChangesetStatus' ).bind( updateButtons ); + api.state( 'changesetStatus' ).bind( updateButtons ); + updateButtons(); + + control.container.on( 'touchmove', '.theme', function() { + control.touchDrag = true; + }); + + // Bind details view trigger. + control.container.on( 'click keydown touchend', '.theme', function( event ) { + var section; + if ( api.utils.isKeydownButNotEnterEvent( event ) ) { + return; + } + + // Bail if the user scrolled on a touch device. + if ( control.touchDrag === true ) { + return control.touchDrag = false; + } + + // Prevent the modal from showing when the user clicks the action button. + if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) { + return; + } + + event.preventDefault(); // Keep this AFTER the key filter above. + section = api.section( control.section() ); + section.showDetails( control.params.theme, function() { + + // Temporary special function since supplying SFTP credentials does not work yet. See #42184. + if ( api.settings.theme._filesystemCredentialsNeeded ) { + section.overlay.find( '.theme-actions .delete-theme' ).remove(); + } + } ); + }); + + control.container.on( 'render-screenshot', function() { + var $screenshot = $( this ).find( 'img' ), + source = $screenshot.data( 'src' ); + + if ( source ) { + $screenshot.attr( 'src', source ); + } + control.screenshotRendered = true; + }); + }, + + /** + * Show or hide the theme based on the presence of the term in the title, description, tags, and author. + * + * @since 4.2.0 + * @param {Array} terms - An array of terms to search for. + * @return {boolean} Whether a theme control was activated or not. + */ + filter: function( terms ) { + var control = this, + matchCount = 0, + haystack = control.params.theme.name + ' ' + + control.params.theme.description + ' ' + + control.params.theme.tags + ' ' + + control.params.theme.author + ' '; + haystack = haystack.toLowerCase().replace( '-', ' ' ); + + // Back-compat for behavior in WordPress 4.2.0 to 4.8.X. + if ( ! _.isArray( terms ) ) { + terms = [ terms ]; + } + + // Always give exact name matches highest ranking. + if ( control.params.theme.name.toLowerCase() === terms.join( ' ' ) ) { + matchCount = 100; + } else { + + // Search for and weight (by 10) complete term matches. + matchCount = matchCount + 10 * ( haystack.split( terms.join( ' ' ) ).length - 1 ); + + // Search for each term individually (as whole-word and partial match) and sum weighted match counts. + _.each( terms, function( term ) { + matchCount = matchCount + 2 * ( haystack.split( term + ' ' ).length - 1 ); // Whole-word, double-weighted. + matchCount = matchCount + haystack.split( term ).length - 1; // Partial word, to minimize empty intermediate searches while typing. + }); + + // Upper limit on match ranking. + if ( matchCount > 99 ) { + matchCount = 99; + } + } + + if ( 0 !== matchCount ) { + control.activate(); + control.params.priority = 101 - matchCount; // Sort results by match count. + return true; + } else { + control.deactivate(); // Hide control. + control.params.priority = 101; + return false; + } + }, + + /** + * Rerender the theme from its JS template with the installed type. + * + * @since 4.9.0 + * + * @return {void} + */ + rerenderAsInstalled: function( installed ) { + var control = this, section; + if ( installed ) { + control.params.theme.type = 'installed'; + } else { + section = api.section( control.params.section ); + control.params.theme.type = section.params.action; + } + control.renderContent(); // Replaces existing content. + control.container.trigger( 'render-screenshot' ); + } + }); + + /** + * Class wp.customize.CodeEditorControl + * + * @since 4.9.0 + * + * @class wp.customize.CodeEditorControl + * @augments wp.customize.Control + */ + api.CodeEditorControl = api.Control.extend(/** @lends wp.customize.CodeEditorControl.prototype */{ + + /** + * Initialize. + * + * @since 4.9.0 + * @param {string} id - Unique identifier for the control instance. + * @param {Object} options - Options hash for the control instance. + * @return {void} + */ + initialize: function( id, options ) { + var control = this; + control.deferred = _.extend( control.deferred || {}, { + codemirror: $.Deferred() + } ); + api.Control.prototype.initialize.call( control, id, options ); + + // Note that rendering is debounced so the props will be used when rendering happens after add event. + control.notifications.bind( 'add', function( notification ) { + + // Skip if control notification is not from setting csslint_error notification. + if ( notification.code !== control.setting.id + ':csslint_error' ) { + return; + } + + // Customize the template and behavior of csslint_error notifications. + notification.templateId = 'customize-code-editor-lint-error-notification'; + notification.render = (function( render ) { + return function() { + var li = render.call( this ); + li.find( 'input[type=checkbox]' ).on( 'click', function() { + control.setting.notifications.remove( 'csslint_error' ); + } ); + return li; + }; + })( notification.render ); + } ); + }, + + /** + * Initialize the editor when the containing section is ready and expanded. + * + * @since 4.9.0 + * @return {void} + */ + ready: function() { + var control = this; + if ( ! control.section() ) { + control.initEditor(); + return; + } + + // Wait to initialize editor until section is embedded and expanded. + api.section( control.section(), function( section ) { + section.deferred.embedded.done( function() { + var onceExpanded; + if ( section.expanded() ) { + control.initEditor(); + } else { + onceExpanded = function( isExpanded ) { + if ( isExpanded ) { + control.initEditor(); + section.expanded.unbind( onceExpanded ); + } + }; + section.expanded.bind( onceExpanded ); + } + } ); + } ); + }, + + /** + * Initialize editor. + * + * @since 4.9.0 + * @return {void} + */ + initEditor: function() { + var control = this, element, editorSettings = false; + + // Obtain editorSettings for instantiation. + if ( wp.codeEditor && ( _.isUndefined( control.params.editor_settings ) || false !== control.params.editor_settings ) ) { + + // Obtain default editor settings. + editorSettings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {}; + editorSettings.codemirror = _.extend( + {}, + editorSettings.codemirror, + { + indentUnit: 2, + tabSize: 2 + } + ); + + // Merge editor_settings param on top of defaults. + if ( _.isObject( control.params.editor_settings ) ) { + _.each( control.params.editor_settings, function( value, key ) { + if ( _.isObject( value ) ) { + editorSettings[ key ] = _.extend( + {}, + editorSettings[ key ], + value + ); + } + } ); + } + } + + element = new api.Element( control.container.find( 'textarea' ) ); + control.elements.push( element ); + element.sync( control.setting ); + element.set( control.setting() ); + + if ( editorSettings ) { + control.initSyntaxHighlightingEditor( editorSettings ); + } else { + control.initPlainTextareaEditor(); + } + }, + + /** + * Make sure editor gets focused when control is focused. + * + * @since 4.9.0 + * @param {Object} [params] - Focus params. + * @param {Function} [params.completeCallback] - Function to call when expansion is complete. + * @return {void} + */ + focus: function( params ) { + var control = this, extendedParams = _.extend( {}, params ), originalCompleteCallback; + originalCompleteCallback = extendedParams.completeCallback; + extendedParams.completeCallback = function() { + if ( originalCompleteCallback ) { + originalCompleteCallback(); + } + if ( control.editor ) { + control.editor.codemirror.focus(); + } + }; + api.Control.prototype.focus.call( control, extendedParams ); + }, + + /** + * Initialize syntax-highlighting editor. + * + * @since 4.9.0 + * @param {Object} codeEditorSettings - Code editor settings. + * @return {void} + */ + initSyntaxHighlightingEditor: function( codeEditorSettings ) { + var control = this, $textarea = control.container.find( 'textarea' ), settings, suspendEditorUpdate = false; + + settings = _.extend( {}, codeEditorSettings, { + onTabNext: _.bind( control.onTabNext, control ), + onTabPrevious: _.bind( control.onTabPrevious, control ), + onUpdateErrorNotice: _.bind( control.onUpdateErrorNotice, control ) + }); + + control.editor = wp.codeEditor.initialize( $textarea, settings ); + + // Improve the editor accessibility. + $( control.editor.codemirror.display.lineDiv ) + .attr({ + role: 'textbox', + 'aria-multiline': 'true', + 'aria-label': control.params.label, + 'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4' + }); + + // Focus the editor when clicking on its label. + control.container.find( 'label' ).on( 'click', function() { + control.editor.codemirror.focus(); + }); + + /* + * When the CodeMirror instance changes, mirror to the textarea, + * where we have our "true" change event handler bound. + */ + control.editor.codemirror.on( 'change', function( codemirror ) { + suspendEditorUpdate = true; + $textarea.val( codemirror.getValue() ).trigger( 'change' ); + suspendEditorUpdate = false; + }); + + // Update CodeMirror when the setting is changed by another plugin. + control.setting.bind( function( value ) { + if ( ! suspendEditorUpdate ) { + control.editor.codemirror.setValue( value ); + } + }); + + // Prevent collapsing section when hitting Esc to tab out of editor. + control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) { + var escKeyCode = 27; + if ( escKeyCode === event.keyCode ) { + event.stopPropagation(); + } + }); + + control.deferred.codemirror.resolveWith( control, [ control.editor.codemirror ] ); + }, + + /** + * Handle tabbing to the field after the editor. + * + * @since 4.9.0 + * @return {void} + */ + onTabNext: function onTabNext() { + var control = this, controls, controlIndex, section; + section = api.section( control.section() ); + controls = section.controls(); + controlIndex = controls.indexOf( control ); + if ( controls.length === controlIndex + 1 ) { + $( '#customize-footer-actions .collapse-sidebar' ).trigger( 'focus' ); + } else { + controls[ controlIndex + 1 ].container.find( ':focusable:first' ).focus(); + } + }, + + /** + * Handle tabbing to the field before the editor. + * + * @since 4.9.0 + * @return {void} + */ + onTabPrevious: function onTabPrevious() { + var control = this, controls, controlIndex, section; + section = api.section( control.section() ); + controls = section.controls(); + controlIndex = controls.indexOf( control ); + if ( 0 === controlIndex ) { + section.contentContainer.find( '.customize-section-title .customize-help-toggle, .customize-section-title .customize-section-description.open .section-description-close' ).last().focus(); + } else { + controls[ controlIndex - 1 ].contentContainer.find( ':focusable:first' ).focus(); + } + }, + + /** + * Update error notice. + * + * @since 4.9.0 + * @param {Array} errorAnnotations - Error annotations. + * @return {void} + */ + onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) { + var control = this, message; + control.setting.notifications.remove( 'csslint_error' ); + + if ( 0 !== errorAnnotations.length ) { + if ( 1 === errorAnnotations.length ) { + message = api.l10n.customCssError.singular.replace( '%d', '1' ); + } else { + message = api.l10n.customCssError.plural.replace( '%d', String( errorAnnotations.length ) ); + } + control.setting.notifications.add( new api.Notification( 'csslint_error', { + message: message, + type: 'error' + } ) ); + } + }, + + /** + * Initialize plain-textarea editor when syntax highlighting is disabled. + * + * @since 4.9.0 + * @return {void} + */ + initPlainTextareaEditor: function() { + var control = this, $textarea = control.container.find( 'textarea' ), textarea = $textarea[0]; + + $textarea.on( 'blur', function onBlur() { + $textarea.data( 'next-tab-blurs', false ); + } ); + + $textarea.on( 'keydown', function onKeydown( event ) { + var selectionStart, selectionEnd, value, tabKeyCode = 9, escKeyCode = 27; + + if ( escKeyCode === event.keyCode ) { + if ( ! $textarea.data( 'next-tab-blurs' ) ) { + $textarea.data( 'next-tab-blurs', true ); + event.stopPropagation(); // Prevent collapsing the section. + } + return; + } + + // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed. + if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) { + return; + } + + // Prevent capturing Tab characters if Esc was pressed. + if ( $textarea.data( 'next-tab-blurs' ) ) { + return; + } + + selectionStart = textarea.selectionStart; + selectionEnd = textarea.selectionEnd; + value = textarea.value; + + if ( selectionStart >= 0 ) { + textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) ); + $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1; + } + + event.stopPropagation(); + event.preventDefault(); + }); + + control.deferred.codemirror.rejectWith( control ); + } + }); + + /** + * Class wp.customize.DateTimeControl. + * + * @since 4.9.0 + * @class wp.customize.DateTimeControl + * @augments wp.customize.Control + */ + api.DateTimeControl = api.Control.extend(/** @lends wp.customize.DateTimeControl.prototype */{ + + /** + * Initialize behaviors. + * + * @since 4.9.0 + * @return {void} + */ + ready: function ready() { + var control = this; + + control.inputElements = {}; + control.invalidDate = false; + + _.bindAll( control, 'populateSetting', 'updateDaysForMonth', 'populateDateInputs' ); + + if ( ! control.setting ) { + throw new Error( 'Missing setting' ); + } + + control.container.find( '.date-input' ).each( function() { + var input = $( this ), component, element; + component = input.data( 'component' ); + element = new api.Element( input ); + control.inputElements[ component ] = element; + control.elements.push( element ); + + // Add invalid date error once user changes (and has blurred the input). + input.on( 'change', function() { + if ( control.invalidDate ) { + control.notifications.add( new api.Notification( 'invalid_date', { + message: api.l10n.invalidDate + } ) ); + } + } ); + + // Remove the error immediately after validity change. + input.on( 'input', _.debounce( function() { + if ( ! control.invalidDate ) { + control.notifications.remove( 'invalid_date' ); + } + } ) ); + + // Add zero-padding when blurring field. + input.on( 'blur', _.debounce( function() { + if ( ! control.invalidDate ) { + control.populateDateInputs(); + } + } ) ); + } ); + + control.inputElements.month.bind( control.updateDaysForMonth ); + control.inputElements.year.bind( control.updateDaysForMonth ); + control.populateDateInputs(); + control.setting.bind( control.populateDateInputs ); + + // Start populating setting after inputs have been populated. + _.each( control.inputElements, function( element ) { + element.bind( control.populateSetting ); + } ); + }, + + /** + * Parse datetime string. + * + * @since 4.9.0 + * + * @param {string} datetime - Date/Time string. Accepts Y-m-d[ H:i[:s]] format. + * @return {Object|null} Returns object containing date components or null if parse error. + */ + parseDateTime: function parseDateTime( datetime ) { + var control = this, matches, date, midDayHour = 12; + + if ( datetime ) { + matches = datetime.match( /^(\d\d\d\d)-(\d\d)-(\d\d)(?: (\d\d):(\d\d)(?::(\d\d))?)?$/ ); + } + + if ( ! matches ) { + return null; + } + + matches.shift(); + + date = { + year: matches.shift(), + month: matches.shift(), + day: matches.shift(), + hour: matches.shift() || '00', + minute: matches.shift() || '00', + second: matches.shift() || '00' + }; + + if ( control.params.includeTime && control.params.twelveHourFormat ) { + date.hour = parseInt( date.hour, 10 ); + date.meridian = date.hour >= midDayHour ? 'pm' : 'am'; + date.hour = date.hour % midDayHour ? String( date.hour % midDayHour ) : String( midDayHour ); + delete date.second; // @todo Why only if twelveHourFormat? + } + + return date; + }, + + /** + * Validates if input components have valid date and time. + * + * @since 4.9.0 + * @return {boolean} If date input fields has error. + */ + validateInputs: function validateInputs() { + var control = this, components, validityInput; + + control.invalidDate = false; + + components = [ 'year', 'day' ]; + if ( control.params.includeTime ) { + components.push( 'hour', 'minute' ); + } + + _.find( components, function( component ) { + var element, max, min, value; + + element = control.inputElements[ component ]; + validityInput = element.element.get( 0 ); + max = parseInt( element.element.attr( 'max' ), 10 ); + min = parseInt( element.element.attr( 'min' ), 10 ); + value = parseInt( element(), 10 ); + control.invalidDate = isNaN( value ) || value > max || value < min; + + if ( ! control.invalidDate ) { + validityInput.setCustomValidity( '' ); + } + + return control.invalidDate; + } ); + + if ( control.inputElements.meridian && ! control.invalidDate ) { + validityInput = control.inputElements.meridian.element.get( 0 ); + if ( 'am' !== control.inputElements.meridian.get() && 'pm' !== control.inputElements.meridian.get() ) { + control.invalidDate = true; + } else { + validityInput.setCustomValidity( '' ); + } + } + + if ( control.invalidDate ) { + validityInput.setCustomValidity( api.l10n.invalidValue ); + } else { + validityInput.setCustomValidity( '' ); + } + if ( ! control.section() || api.section.has( control.section() ) && api.section( control.section() ).expanded() ) { + _.result( validityInput, 'reportValidity' ); + } + + return control.invalidDate; + }, + + /** + * Updates number of days according to the month and year selected. + * + * @since 4.9.0 + * @return {void} + */ + updateDaysForMonth: function updateDaysForMonth() { + var control = this, daysInMonth, year, month, day; + + month = parseInt( control.inputElements.month(), 10 ); + year = parseInt( control.inputElements.year(), 10 ); + day = parseInt( control.inputElements.day(), 10 ); + + if ( month && year ) { + daysInMonth = new Date( year, month, 0 ).getDate(); + control.inputElements.day.element.attr( 'max', daysInMonth ); + + if ( day > daysInMonth ) { + control.inputElements.day( String( daysInMonth ) ); + } + } + }, + + /** + * Populate setting value from the inputs. + * + * @since 4.9.0 + * @return {boolean} If setting updated. + */ + populateSetting: function populateSetting() { + var control = this, date; + + if ( control.validateInputs() || ! control.params.allowPastDate && ! control.isFutureDate() ) { + return false; + } + + date = control.convertInputDateToString(); + control.setting.set( date ); + return true; + }, + + /** + * Converts input values to string in Y-m-d H:i:s format. + * + * @since 4.9.0 + * @return {string} Date string. + */ + convertInputDateToString: function convertInputDateToString() { + var control = this, date = '', dateFormat, hourInTwentyFourHourFormat, + getElementValue, pad; + + pad = function( number, padding ) { + var zeros; + if ( String( number ).length < padding ) { + zeros = padding - String( number ).length; + number = Math.pow( 10, zeros ).toString().substr( 1 ) + String( number ); + } + return number; + }; + + getElementValue = function( component ) { + var value = parseInt( control.inputElements[ component ].get(), 10 ); + + if ( _.contains( [ 'month', 'day', 'hour', 'minute' ], component ) ) { + value = pad( value, 2 ); + } else if ( 'year' === component ) { + value = pad( value, 4 ); + } + return value; + }; + + 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' ] ); + } + + _.each( dateFormat, function( component ) { + date += control.inputElements[ component ] ? getElementValue( component ) : component; + } ); + + return date; + }, + + /** + * Check if the date is in the future. + * + * @since 4.9.0 + * @return {boolean} True if future date. + */ + isFutureDate: function isFutureDate() { + var control = this; + return 0 < api.utils.getRemainingTime( control.convertInputDateToString() ); + }, + + /** + * Convert hour in twelve hour format to twenty four hour format. + * + * @since 4.9.0 + * @param {string} hourInTwelveHourFormat - Hour in twelve hour format. + * @param {string} meridian - Either 'am' or 'pm'. + * @return {string} Hour in twenty four hour format. + */ + convertHourToTwentyFourHourFormat: function convertHour( hourInTwelveHourFormat, meridian ) { + var hourInTwentyFourHourFormat, hour, midDayHour = 12; + + hour = parseInt( hourInTwelveHourFormat, 10 ); + if ( isNaN( hour ) ) { + return ''; + } + + if ( 'pm' === meridian && hour < midDayHour ) { + hourInTwentyFourHourFormat = hour + midDayHour; + } else if ( 'am' === meridian && midDayHour === hour ) { + hourInTwentyFourHourFormat = hour - midDayHour; + } else { + hourInTwentyFourHourFormat = hour; + } + + return String( hourInTwentyFourHourFormat ); + }, + + /** + * Populates date inputs in date fields. + * + * @since 4.9.0 + * @return {boolean} Whether the inputs were populated. + */ + populateDateInputs: function populateDateInputs() { + var control = this, parsed; + + parsed = control.parseDateTime( control.setting.get() ); + + if ( ! parsed ) { + return false; + } + + _.each( control.inputElements, function( element, component ) { + var value = parsed[ component ]; // This will be zero-padded string. + + // Set month and meridian regardless of focused state since they are dropdowns. + if ( 'month' === component || 'meridian' === component ) { + + // Options in dropdowns are not zero-padded. + value = value.replace( /^0/, '' ); + + element.set( value ); + } else { + + value = parseInt( value, 10 ); + if ( ! element.element.is( document.activeElement ) ) { + + // Populate element with zero-padded value if not focused. + element.set( parsed[ component ] ); + } else if ( value !== parseInt( element(), 10 ) ) { + + // Forcibly update the value if its underlying value changed, regardless of zero-padding. + element.set( String( value ) ); + } + } + } ); + + return true; + }, + + /** + * Toggle future date notification for date control. + * + * @since 4.9.0 + * @param {boolean} notify Add or remove the notification. + * @return {wp.customize.DateTimeControl} + */ + toggleFutureDateNotification: function toggleFutureDateNotification( notify ) { + var control = this, notificationCode, notification; + + notificationCode = 'not_future_date'; + + if ( notify ) { + notification = new api.Notification( notificationCode, { + type: 'error', + message: api.l10n.futureDateError + } ); + control.notifications.add( notification ); + } else { + control.notifications.remove( notificationCode ); + } + + return control; + } + }); + + /** + * Class PreviewLinkControl. + * + * @since 4.9.0 + * @class wp.customize.PreviewLinkControl + * @augments wp.customize.Control + */ + api.PreviewLinkControl = api.Control.extend(/** @lends wp.customize.PreviewLinkControl.prototype */{ + + defaults: _.extend( {}, api.Control.prototype.defaults, { + templateId: 'customize-preview-link-control' + } ), + + /** + * Initialize behaviors. + * + * @since 4.9.0 + * @return {void} + */ + ready: function ready() { + var control = this, element, component, node, url, input, button; + + _.bindAll( control, 'updatePreviewLink' ); + + if ( ! control.setting ) { + control.setting = new api.Value(); + } + + control.previewElements = {}; + + control.container.find( '.preview-control-element' ).each( function() { + node = $( this ); + component = node.data( 'component' ); + element = new api.Element( node ); + control.previewElements[ component ] = element; + control.elements.push( element ); + } ); + + url = control.previewElements.url; + input = control.previewElements.input; + button = control.previewElements.button; + + input.link( control.setting ); + url.link( control.setting ); + + url.bind( function( value ) { + url.element.parent().attr( { + href: value, + target: api.settings.changeset.uuid + } ); + } ); + + api.bind( 'ready', control.updatePreviewLink ); + api.state( 'saved' ).bind( control.updatePreviewLink ); + api.state( 'changesetStatus' ).bind( control.updatePreviewLink ); + api.state( 'activated' ).bind( control.updatePreviewLink ); + api.previewer.previewUrl.bind( control.updatePreviewLink ); + + button.element.on( 'click', function( event ) { + event.preventDefault(); + if ( control.setting() ) { + input.element.select(); + document.execCommand( 'copy' ); + button( button.element.data( 'copied-text' ) ); + } + } ); + + url.element.parent().on( 'click', function( event ) { + if ( $( this ).hasClass( 'disabled' ) ) { + event.preventDefault(); + } + } ); + + button.element.on( 'mouseenter', function() { + if ( control.setting() ) { + button( button.element.data( 'copy-text' ) ); + } + } ); + }, + + /** + * Updates Preview Link + * + * @since 4.9.0 + * @return {void} + */ + updatePreviewLink: function updatePreviewLink() { + var control = this, unsavedDirtyValues; + + unsavedDirtyValues = ! api.state( 'saved' ).get() || '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get(); + + control.toggleSaveNotification( unsavedDirtyValues ); + control.previewElements.url.element.parent().toggleClass( 'disabled', unsavedDirtyValues ); + control.previewElements.button.element.prop( 'disabled', unsavedDirtyValues ); + control.setting.set( api.previewer.getFrontendPreviewUrl() ); + }, + + /** + * Toggles save notification. + * + * @since 4.9.0 + * @param {boolean} notify Add or remove notification. + * @return {void} + */ + toggleSaveNotification: function toggleSaveNotification( notify ) { + var control = this, notificationCode, notification; + + notificationCode = 'changes_not_saved'; + + if ( notify ) { + notification = new api.Notification( notificationCode, { + type: 'info', + message: api.l10n.saveBeforeShare + } ); + control.notifications.add( notification ); + } else { + control.notifications.remove( notificationCode ); + } + } + }); + + /** + * Change objects contained within the main customize object to Settings. + * + * @alias wp.customize.defaultConstructor + */ + api.defaultConstructor = api.Setting; + + /** + * Callback for resolved controls. + * + * @callback wp.customize.deferredControlsCallback + * @param {wp.customize.Control[]} controls Resolved controls. + */ + + /** + * Collection of all registered controls. + * + * @alias wp.customize.control + * + * @since 3.4.0 + * + * @type {Function} + * @param {...string} ids - One or more ids for controls to obtain. + * @param {deferredControlsCallback} [callback] - Function called when all supplied controls exist. + * @return {wp.customize.Control|undefined|jQuery.promise} Control instance or undefined (if function called with one id param), + * or promise resolving to requested controls. + * + * @example Loop over all registered controls. + * wp.customize.control.each( function( control ) { ... } ); + * + * @example Getting `background_color` control instance. + * control = wp.customize.control( 'background_color' ); + * + * @example Check if control exists. + * hasControl = wp.customize.control.has( 'background_color' ); + * + * @example Deferred getting of `background_color` control until it exists, using callback. + * wp.customize.control( 'background_color', function( control ) { ... } ); + * + * @example Get title and tagline controls when they both exist, using promise (only available when multiple IDs are present). + * promise = wp.customize.control( 'blogname', 'blogdescription' ); + * promise.done( function( titleControl, taglineControl ) { ... } ); + * + * @example Get title and tagline controls when they both exist, using callback. + * wp.customize.control( 'blogname', 'blogdescription', function( titleControl, taglineControl ) { ... } ); + * + * @example Getting setting value for `background_color` control. + * value = wp.customize.control( 'background_color ').setting.get(); + * value = wp.customize( 'background_color' ).get(); // Same as above, since setting ID and control ID are the same. + * + * @example Add new control for site title. + * wp.customize.control.add( new wp.customize.Control( 'other_blogname', { + * setting: 'blogname', + * type: 'text', + * label: 'Site title', + * section: 'other_site_identify' + * } ) ); + * + * @example Remove control. + * wp.customize.control.remove( 'other_blogname' ); + * + * @example Listen for control being added. + * wp.customize.control.bind( 'add', function( addedControl ) { ... } ) + * + * @example Listen for control being removed. + * wp.customize.control.bind( 'removed', function( removedControl ) { ... } ) + */ + api.control = new api.Values({ defaultConstructor: api.Control }); + + /** + * Callback for resolved sections. + * + * @callback wp.customize.deferredSectionsCallback + * @param {wp.customize.Section[]} sections Resolved sections. + */ + + /** + * Collection of all registered sections. + * + * @alias wp.customize.section + * + * @since 3.4.0 + * + * @type {Function} + * @param {...string} ids - One or more ids for sections to obtain. + * @param {deferredSectionsCallback} [callback] - Function called when all supplied sections exist. + * @return {wp.customize.Section|undefined|jQuery.promise} Section instance or undefined (if function called with one id param), + * or promise resolving to requested sections. + * + * @example Loop over all registered sections. + * wp.customize.section.each( function( section ) { ... } ) + * + * @example Getting `title_tagline` section instance. + * section = wp.customize.section( 'title_tagline' ) + * + * @example Expand dynamically-created section when it exists. + * wp.customize.section( 'dynamically_created', function( section ) { + * section.expand(); + * } ); + * + * @see {@link wp.customize.control} for further examples of how to interact with {@link wp.customize.Values} instances. + */ + api.section = new api.Values({ defaultConstructor: api.Section }); + + /** + * Callback for resolved panels. + * + * @callback wp.customize.deferredPanelsCallback + * @param {wp.customize.Panel[]} panels Resolved panels. + */ + + /** + * Collection of all registered panels. + * + * @alias wp.customize.panel + * + * @since 4.0.0 + * + * @type {Function} + * @param {...string} ids - One or more ids for panels to obtain. + * @param {deferredPanelsCallback} [callback] - Function called when all supplied panels exist. + * @return {wp.customize.Panel|undefined|jQuery.promise} Panel instance or undefined (if function called with one id param), + * or promise resolving to requested panels. + * + * @example Loop over all registered panels. + * wp.customize.panel.each( function( panel ) { ... } ) + * + * @example Getting nav_menus panel instance. + * panel = wp.customize.panel( 'nav_menus' ); + * + * @example Expand dynamically-created panel when it exists. + * wp.customize.panel( 'dynamically_created', function( panel ) { + * panel.expand(); + * } ); + * + * @see {@link wp.customize.control} for further examples of how to interact with {@link wp.customize.Values} instances. + */ + api.panel = new api.Values({ defaultConstructor: api.Panel }); + + /** + * Callback for resolved notifications. + * + * @callback wp.customize.deferredNotificationsCallback + * @param {wp.customize.Notification[]} notifications Resolved notifications. + */ + + /** + * Collection of all global notifications. + * + * @alias wp.customize.notifications + * + * @since 4.9.0 + * + * @type {Function} + * @param {...string} codes - One or more codes for notifications to obtain. + * @param {deferredNotificationsCallback} [callback] - Function called when all supplied notifications exist. + * @return {wp.customize.Notification|undefined|jQuery.promise} Notification instance or undefined (if function called with one code param), + * or promise resolving to requested notifications. + * + * @example Check if existing notification + * exists = wp.customize.notifications.has( 'a_new_day_arrived' ); + * + * @example Obtain existing notification + * notification = wp.customize.notifications( 'a_new_day_arrived' ); + * + * @example Obtain notification that may not exist yet. + * wp.customize.notifications( 'a_new_day_arrived', function( notification ) { ... } ); + * + * @example Add a warning notification. + * wp.customize.notifications.add( new wp.customize.Notification( 'midnight_almost_here', { + * type: 'warning', + * message: 'Midnight has almost arrived!', + * dismissible: true + * } ) ); + * + * @example Remove a notification. + * wp.customize.notifications.remove( 'a_new_day_arrived' ); + * + * @see {@link wp.customize.control} for further examples of how to interact with {@link wp.customize.Values} instances. + */ + api.notifications = new api.Notifications(); + + api.PreviewFrame = api.Messenger.extend(/** @lends wp.customize.PreviewFrame.prototype */{ + sensitivity: null, // Will get set to api.settings.timeouts.previewFrameSensitivity. + + /** + * An object that fetches a preview in the background of the document, which + * allows for seamless replacement of an existing preview. + * + * @constructs wp.customize.PreviewFrame + * @augments wp.customize.Messenger + * + * @param {Object} params.container + * @param {Object} params.previewUrl + * @param {Object} params.query + * @param {Object} options + */ + initialize: function( params, options ) { + var deferred = $.Deferred(); + + /* + * Make the instance of the PreviewFrame the promise object + * so other objects can easily interact with it. + */ + deferred.promise( this ); + + this.container = params.container; + + $.extend( params, { channel: api.PreviewFrame.uuid() }); + + api.Messenger.prototype.initialize.call( this, params, options ); + + this.add( 'previewUrl', params.previewUrl ); + + this.query = $.extend( params.query || {}, { customize_messenger_channel: this.channel() }); + + this.run( deferred ); + }, + + /** + * Run the preview request. + * + * @param {Object} deferred jQuery Deferred object to be resolved with + * the request. + */ + run: function( deferred ) { + var previewFrame = this, + loaded = false, + ready = false, + readyData = null, + hasPendingChangesetUpdate = '{}' !== previewFrame.query.customized, + urlParser, + params, + form; + + if ( previewFrame._ready ) { + previewFrame.unbind( 'ready', previewFrame._ready ); + } + + previewFrame._ready = function( data ) { + ready = true; + readyData = data; + previewFrame.container.addClass( 'iframe-ready' ); + if ( ! data ) { + return; + } + + if ( loaded ) { + deferred.resolveWith( previewFrame, [ data ] ); + } + }; + + previewFrame.bind( 'ready', previewFrame._ready ); + + urlParser = document.createElement( 'a' ); + urlParser.href = previewFrame.previewUrl(); + + params = _.extend( + api.utils.parseQueryString( urlParser.search.substr( 1 ) ), + { + customize_changeset_uuid: previewFrame.query.customize_changeset_uuid, + customize_theme: previewFrame.query.customize_theme, + customize_messenger_channel: previewFrame.query.customize_messenger_channel + } + ); + if ( api.settings.changeset.autosaved || ! api.state( 'saved' ).get() ) { + params.customize_autosaved = 'on'; + } + + urlParser.search = $.param( params ); + previewFrame.iframe = $( '