PK!?.. updates.jsnu&1i/** * Functions for ajaxified updates, deletions and installs inside the WordPress admin. * * @version 4.2.0 * @output wp-admin/js/updates.js */ /* global pagenow, _wpThemeSettings */ /** * @param {jQuery} $ jQuery object. * @param {object} wp WP object. * @param {object} settings WP Updates settings. * @param {string} settings.ajax_nonce Ajax nonce. * @param {object=} settings.plugins Base names of plugins in their different states. * @param {Array} settings.plugins.all Base names of all plugins. * @param {Array} settings.plugins.active Base names of active plugins. * @param {Array} settings.plugins.inactive Base names of inactive plugins. * @param {Array} settings.plugins.upgrade Base names of plugins with updates available. * @param {Array} settings.plugins.recently_activated Base names of recently activated plugins. * @param {Array} settings.plugins['auto-update-enabled'] Base names of plugins set to auto-update. * @param {Array} settings.plugins['auto-update-disabled'] Base names of plugins set to not auto-update. * @param {object=} settings.themes Slugs of themes in their different states. * @param {Array} settings.themes.all Slugs of all themes. * @param {Array} settings.themes.upgrade Slugs of themes with updates available. * @param {Arrat} settings.themes.disabled Slugs of disabled themes. * @param {Array} settings.themes['auto-update-enabled'] Slugs of themes set to auto-update. * @param {Array} settings.themes['auto-update-disabled'] Slugs of themes set to not auto-update. * @param {object=} settings.totals Combined information for available update counts. * @param {number} settings.totals.count Holds the amount of available updates. */ (function( $, wp, settings ) { var $document = $( document ), __ = wp.i18n.__, _x = wp.i18n._x, _n = wp.i18n._n, _nx = wp.i18n._nx, sprintf = wp.i18n.sprintf; wp = wp || {}; /** * The WP Updates object. * * @since 4.2.0 * * @namespace wp.updates */ wp.updates = {}; /** * Removed in 5.5.0, needed for back-compatibility. * * @since 4.2.0 * @deprecated 5.5.0 * * @type {object} */ wp.updates.l10n = { searchResults: '', searchResultsLabel: '', noPlugins: '', noItemsSelected: '', updating: '', pluginUpdated: '', themeUpdated: '', update: '', updateNow: '', pluginUpdateNowLabel: '', updateFailedShort: '', updateFailed: '', pluginUpdatingLabel: '', pluginUpdatedLabel: '', pluginUpdateFailedLabel: '', updatingMsg: '', updatedMsg: '', updateCancel: '', beforeunload: '', installNow: '', pluginInstallNowLabel: '', installing: '', pluginInstalled: '', themeInstalled: '', installFailedShort: '', installFailed: '', pluginInstallingLabel: '', themeInstallingLabel: '', pluginInstalledLabel: '', themeInstalledLabel: '', pluginInstallFailedLabel: '', themeInstallFailedLabel: '', installingMsg: '', installedMsg: '', importerInstalledMsg: '', aysDelete: '', aysDeleteUninstall: '', aysBulkDelete: '', aysBulkDeleteThemes: '', deleting: '', deleteFailed: '', pluginDeleted: '', themeDeleted: '', livePreview: '', activatePlugin: '', activateTheme: '', activatePluginLabel: '', activateThemeLabel: '', activateImporter: '', activateImporterLabel: '', unknownError: '', connectionError: '', nonceError: '', pluginsFound: '', noPluginsFound: '', autoUpdatesEnable: '', autoUpdatesEnabling: '', autoUpdatesEnabled: '', autoUpdatesDisable: '', autoUpdatesDisabling: '', autoUpdatesDisabled: '', autoUpdatesError: '' }; wp.updates.l10n = window.wp.deprecateL10nObject( 'wp.updates.l10n', wp.updates.l10n, '5.5.0' ); /** * User nonce for ajax calls. * * @since 4.2.0 * * @type {string} */ wp.updates.ajaxNonce = settings.ajax_nonce; /** * Current search term. * * @since 4.6.0 * * @type {string} */ wp.updates.searchTerm = ''; /** * Minimum number of characters before an ajax search is fired. * * @since 6.7.0 * * @type {number} */ wp.updates.searchMinCharacters = 2; /** * Whether filesystem credentials need to be requested from the user. * * @since 4.2.0 * * @type {bool} */ wp.updates.shouldRequestFilesystemCredentials = false; /** * Filesystem credentials to be packaged along with the request. * * @since 4.2.0 * @since 4.6.0 Added `available` property to indicate whether credentials have been provided. * * @type {Object} * @property {Object} filesystemCredentials.ftp Holds FTP credentials. * @property {string} filesystemCredentials.ftp.host FTP host. Default empty string. * @property {string} filesystemCredentials.ftp.username FTP user name. Default empty string. * @property {string} filesystemCredentials.ftp.password FTP password. Default empty string. * @property {string} filesystemCredentials.ftp.connectionType Type of FTP connection. 'ssh', 'ftp', or 'ftps'. * Default empty string. * @property {Object} filesystemCredentials.ssh Holds SSH credentials. * @property {string} filesystemCredentials.ssh.publicKey The public key. Default empty string. * @property {string} filesystemCredentials.ssh.privateKey The private key. Default empty string. * @property {string} filesystemCredentials.fsNonce Filesystem credentials form nonce. * @property {bool} filesystemCredentials.available Whether filesystem credentials have been provided. * Default 'false'. */ wp.updates.filesystemCredentials = { ftp: { host: '', username: '', password: '', connectionType: '' }, ssh: { publicKey: '', privateKey: '' }, fsNonce: '', available: false }; /** * Whether we're waiting for an Ajax request to complete. * * @since 4.2.0 * @since 4.6.0 More accurately named `ajaxLocked`. * * @type {bool} */ wp.updates.ajaxLocked = false; /** * Admin notice template. * * @since 4.6.0 * * @type {function} */ wp.updates.adminNotice = wp.template( 'wp-updates-admin-notice' ); /** * Update queue. * * If the user tries to update a plugin while an update is * already happening, it can be placed in this queue to perform later. * * @since 4.2.0 * @since 4.6.0 More accurately named `queue`. * * @type {Array.object} */ wp.updates.queue = []; /** * Holds a jQuery reference to return focus to when exiting the request credentials modal. * * @since 4.2.0 * * @type {jQuery} */ wp.updates.$elToReturnFocusToFromCredentialsModal = undefined; /** * Adds or updates an admin notice. * * @since 4.6.0 * * @param {Object} data * @param {*=} data.selector Optional. Selector of an element to be replaced with the admin notice. * @param {string=} data.id Optional. Unique id that will be used as the notice's id attribute. * @param {string=} data.className Optional. Class names that will be used in the admin notice. * @param {string=} data.message Optional. The message displayed in the notice. * @param {number=} data.successes Optional. The amount of successful operations. * @param {number=} data.errors Optional. The amount of failed operations. * @param {Array=} data.errorMessages Optional. Error messages of failed operations. * */ wp.updates.addAdminNotice = function( data ) { var $notice = $( data.selector ), $headerEnd = $( '.wp-header-end' ), $adminNotice; delete data.selector; $adminNotice = wp.updates.adminNotice( data ); // Check if this admin notice already exists. if ( ! $notice.length ) { $notice = $( '#' + data.id ); } if ( $notice.length ) { $notice.replaceWith( $adminNotice ); } else if ( $headerEnd.length ) { $headerEnd.after( $adminNotice ); } else { if ( 'customize' === pagenow ) { $( '.customize-themes-notifications' ).append( $adminNotice ); } else { $( '.wrap' ).find( '> h1' ).after( $adminNotice ); } } $document.trigger( 'wp-updates-notice-added' ); }; /** * Handles Ajax requests to WordPress. * * @since 4.6.0 * * @param {string} action The type of Ajax request ('update-plugin', 'install-theme', etc). * @param {Object} data Data that needs to be passed to the ajax callback. * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.ajax = function( action, data ) { var options = {}; if ( wp.updates.ajaxLocked ) { wp.updates.queue.push( { action: action, data: data } ); // Return a Deferred object so callbacks can always be registered. return $.Deferred(); } wp.updates.ajaxLocked = true; if ( data.success ) { options.success = data.success; delete data.success; } if ( data.error ) { options.error = data.error; delete data.error; } options.data = _.extend( data, { action: action, _ajax_nonce: wp.updates.ajaxNonce, _fs_nonce: wp.updates.filesystemCredentials.fsNonce, username: wp.updates.filesystemCredentials.ftp.username, password: wp.updates.filesystemCredentials.ftp.password, hostname: wp.updates.filesystemCredentials.ftp.hostname, connection_type: wp.updates.filesystemCredentials.ftp.connectionType, public_key: wp.updates.filesystemCredentials.ssh.publicKey, private_key: wp.updates.filesystemCredentials.ssh.privateKey } ); return wp.ajax.send( options ).always( wp.updates.ajaxAlways ); }; /** * Actions performed after every Ajax request. * * @since 4.6.0 * * @param {Object} response * @param {Array=} response.debug Optional. Debug information. * @param {string=} response.errorCode Optional. Error code for an error that occurred. */ wp.updates.ajaxAlways = function( response ) { if ( ! response.errorCode || 'unable_to_connect_to_filesystem' !== response.errorCode ) { wp.updates.ajaxLocked = false; wp.updates.queueChecker(); } if ( 'undefined' !== typeof response.debug && window.console && window.console.log ) { _.map( response.debug, function( message ) { // Remove all HTML tags and write a message to the console. window.console.log( wp.sanitize.stripTagsAndEncodeText( message ) ); } ); } }; /** * Refreshes update counts everywhere on the screen. * * @since 4.7.0 */ wp.updates.refreshCount = function() { var $adminBarUpdates = $( '#wp-admin-bar-updates' ), $dashboardNavMenuUpdateCount = $( 'a[href="update-core.php"] .update-plugins' ), $pluginsNavMenuUpdateCount = $( 'a[href="plugins.php"] .update-plugins' ), $appearanceNavMenuUpdateCount = $( 'a[href="themes.php"] .update-plugins' ), itemCount; $adminBarUpdates.find( '.ab-label' ).text( settings.totals.counts.total ); $adminBarUpdates.find( '.updates-available-text' ).text( sprintf( /* translators: %s: Total number of updates available. */ _n( '%s update available', '%s updates available', settings.totals.counts.total ), settings.totals.counts.total ) ); // Remove the update count from the toolbar if it's zero. if ( 0 === settings.totals.counts.total ) { $adminBarUpdates.find( '.ab-label' ).parents( 'li' ).remove(); } // Update the "Updates" menu item. $dashboardNavMenuUpdateCount.each( function( index, element ) { element.className = element.className.replace( /count-\d+/, 'count-' + settings.totals.counts.total ); } ); if ( settings.totals.counts.total > 0 ) { $dashboardNavMenuUpdateCount.find( '.update-count' ).text( settings.totals.counts.total ); } else { $dashboardNavMenuUpdateCount.remove(); } // Update the "Plugins" menu item. $pluginsNavMenuUpdateCount.each( function( index, element ) { element.className = element.className.replace( /count-\d+/, 'count-' + settings.totals.counts.plugins ); } ); if ( settings.totals.counts.total > 0 ) { $pluginsNavMenuUpdateCount.find( '.plugin-count' ).text( settings.totals.counts.plugins ); } else { $pluginsNavMenuUpdateCount.remove(); } // Update the "Appearance" menu item. $appearanceNavMenuUpdateCount.each( function( index, element ) { element.className = element.className.replace( /count-\d+/, 'count-' + settings.totals.counts.themes ); } ); if ( settings.totals.counts.total > 0 ) { $appearanceNavMenuUpdateCount.find( '.theme-count' ).text( settings.totals.counts.themes ); } else { $appearanceNavMenuUpdateCount.remove(); } // Update list table filter navigation. if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) { itemCount = settings.totals.counts.plugins; } else if ( 'themes' === pagenow || 'themes-network' === pagenow ) { itemCount = settings.totals.counts.themes; } if ( itemCount > 0 ) { $( '.subsubsub .upgrade .count' ).text( '(' + itemCount + ')' ); } else { $( '.subsubsub .upgrade' ).remove(); $( '.subsubsub li:last' ).html( function() { return $( this ).children(); } ); } }; /** * Sends a message from a modal to the main screen to update buttons in plugin cards. * * @since 6.5.0 * * @param {Object} data An object of data to use for the button. * @param {string} data.slug The plugin's slug. * @param {string} data.text The text to use for the button. * @param {string} data.ariaLabel The value for the button's aria-label attribute. An empty string removes the attribute. * @param {string=} data.status Optional. An identifier for the status. * @param {string=} data.removeClasses Optional. A space-separated list of classes to remove from the button. * @param {string=} data.addClasses Optional. A space-separated list of classes to add to the button. * @param {string=} data.href Optional. The button's URL. * @param {string=} data.pluginName Optional. The plugin's name. * @param {string=} data.plugin Optional. The plugin file, relative to the plugins directory. */ wp.updates.setCardButtonStatus = function( data ) { var target = window.parent === window ? null : window.parent; $.support.postMessage = !! window.postMessage; if ( false !== $.support.postMessage && null !== target && -1 === window.parent.location.pathname.indexOf( 'index.php' ) ) { target.postMessage( JSON.stringify( data ), window.location.origin ); } }; /** * Decrements the update counts throughout the various menus. * * This includes the toolbar, the "Updates" menu item and the menu items * for plugins and themes. * * @since 3.9.0 * * @param {string} type The type of item that was updated or deleted. * Can be 'plugin', 'theme'. */ wp.updates.decrementCount = function( type ) { settings.totals.counts.total = Math.max( --settings.totals.counts.total, 0 ); if ( 'plugin' === type ) { settings.totals.counts.plugins = Math.max( --settings.totals.counts.plugins, 0 ); } else if ( 'theme' === type ) { settings.totals.counts.themes = Math.max( --settings.totals.counts.themes, 0 ); } wp.updates.refreshCount( type ); }; /** * Sends an Ajax request to the server to update a plugin. * * @since 4.2.0 * @since 4.6.0 More accurately named `updatePlugin`. * * @param {Object} args Arguments. * @param {string} args.plugin Plugin basename. * @param {string} args.slug Plugin slug. * @param {updatePluginSuccess=} args.success Optional. Success callback. Default: wp.updates.updatePluginSuccess * @param {updatePluginError=} args.error Optional. Error callback. Default: wp.updates.updatePluginError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.updatePlugin = function( args ) { var $updateRow, $card, $message, message, $adminBarUpdates = $( '#wp-admin-bar-updates' ), buttonText = __( 'Updating...' ), isPluginInstall = 'plugin-install' === pagenow || 'plugin-install-network' === pagenow; args = _.extend( { success: wp.updates.updatePluginSuccess, error: wp.updates.updatePluginError }, args ); if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) { $updateRow = $( 'tr[data-plugin="' + args.plugin + '"]' ); $message = $updateRow.find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' ); message = sprintf( /* translators: %s: Plugin name and version. */ _x( 'Updating %s...', 'plugin' ), $updateRow.find( '.plugin-title strong' ).text() ); } else if ( isPluginInstall ) { $card = $( '.plugin-card-' + args.slug + ', #plugin-information-footer' ); $message = $card.find( '.update-now' ).addClass( 'updating-message' ); message = sprintf( /* translators: %s: Plugin name and version. */ _x( 'Updating %s...', 'plugin' ), $message.data( 'name' ) ); // Remove previous error messages, if any. $card.removeClass( 'plugin-card-update-failed' ).find( '.notice.notice-error' ).remove(); } $adminBarUpdates.addClass( 'spin' ); if ( $message.html() !== __( 'Updating...' ) ) { $message.data( 'originaltext', $message.html() ); } $message .attr( 'aria-label', message ) .text( buttonText ); $document.trigger( 'wp-plugin-updating', args ); if ( isPluginInstall && 'plugin-information-footer' === $card.attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'updating-plugin', slug: args.slug, addClasses: 'updating-message', text: buttonText, ariaLabel: message } ); } return wp.updates.ajax( 'update-plugin', args ); }; /** * Updates the UI appropriately after a successful plugin update. * * @since 4.2.0 * @since 4.6.0 More accurately named `updatePluginSuccess`. * @since 5.5.0 Auto-update "time to next update" text cleared. * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin to be updated. * @param {string} response.plugin Basename of the plugin to be updated. * @param {string} response.pluginName Name of the plugin to be updated. * @param {string} response.oldVersion Old version of the plugin. * @param {string} response.newVersion New version of the plugin. */ wp.updates.updatePluginSuccess = function( response ) { var $pluginRow, $updateMessage, newText, $adminBarUpdates = $( '#wp-admin-bar-updates' ), buttonText = _x( 'Updated!', 'plugin' ), ariaLabel = sprintf( /* translators: %s: Plugin name and version. */ _x( '%s updated!', 'plugin' ), response.pluginName ); if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) { $pluginRow = $( 'tr[data-plugin="' + response.plugin + '"]' ) .removeClass( 'update is-enqueued' ) .addClass( 'updated' ); $updateMessage = $pluginRow.find( '.update-message' ) .removeClass( 'updating-message notice-warning' ) .addClass( 'updated-message notice-success' ).find( 'p' ); // Update the version number in the row. newText = $pluginRow.find( '.plugin-version-author-uri' ).html().replace( response.oldVersion, response.newVersion ); $pluginRow.find( '.plugin-version-author-uri' ).html( newText ); // Clear the "time to next auto-update" text. $pluginRow.find( '.auto-update-time' ).empty(); } else if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) { $updateMessage = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.update-now' ) .removeClass( 'updating-message' ) .addClass( 'button-disabled updated-message' ); } $adminBarUpdates.removeClass( 'spin' ); $updateMessage .attr( 'aria-label', ariaLabel ) .text( buttonText ); wp.a11y.speak( __( 'Update completed successfully.' ) ); if ( 'plugin_install_from_iframe' !== $updateMessage.attr( 'id' ) ) { wp.updates.decrementCount( 'plugin' ); } else { wp.updates.setCardButtonStatus( { status: 'updated-plugin', slug: response.slug, removeClasses: 'updating-message', addClasses: 'button-disabled updated-message', text: buttonText, ariaLabel: ariaLabel } ); } $document.trigger( 'wp-plugin-update-success', response ); }; /** * Updates the UI appropriately after a failed plugin update. * * @since 4.2.0 * @since 4.6.0 More accurately named `updatePluginError`. * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin to be updated. * @param {string} response.plugin Basename of the plugin to be updated. * @param {string=} response.pluginName Optional. Name of the plugin to be updated. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.updatePluginError = function( response ) { var $pluginRow, $card, $message, errorMessage, buttonText, ariaLabel, $adminBarUpdates = $( '#wp-admin-bar-updates' ); if ( ! wp.updates.isValidResponse( response, 'update' ) ) { return; } if ( wp.updates.maybeHandleCredentialError( response, 'update-plugin' ) ) { return; } errorMessage = sprintf( /* translators: %s: Error string for a failed update. */ __( 'Update failed: %s' ), response.errorMessage ); if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) { $pluginRow = $( 'tr[data-plugin="' + response.plugin + '"]' ).removeClass( 'is-enqueued' ); if ( response.plugin ) { $message = $( 'tr[data-plugin="' + response.plugin + '"]' ).find( '.update-message' ); } else { $message = $( 'tr[data-slug="' + response.slug + '"]' ).find( '.update-message' ); } $message.removeClass( 'updating-message notice-warning' ).addClass( 'notice-error' ).find( 'p' ).html( errorMessage ); if ( response.pluginName ) { $message.find( 'p' ) .attr( 'aria-label', sprintf( /* translators: %s: Plugin name and version. */ _x( '%s update failed.', 'plugin' ), response.pluginName ) ); } else { $message.find( 'p' ).removeAttr( 'aria-label' ); } } else if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) { buttonText = __( 'Update failed.' ); $card = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ) .append( wp.updates.adminNotice( { className: 'update-message notice-error notice-alt is-dismissible', message: errorMessage } ) ); if ( $card.hasClass( 'plugin-card-' + response.slug ) ) { $card.addClass( 'plugin-card-update-failed' ); } $card.find( '.update-now' ) .text( buttonText ) .removeClass( 'updating-message' ); if ( response.pluginName ) { ariaLabel = sprintf( /* translators: %s: Plugin name and version. */ _x( '%s update failed.', 'plugin' ), response.pluginName ); $card.find( '.update-now' ).attr( 'aria-label', ariaLabel ); } else { ariaLabel = ''; $card.find( '.update-now' ).removeAttr( 'aria-label' ); } $card.on( 'click', '.notice.is-dismissible .notice-dismiss', function() { // Use same delay as the total duration of the notice fadeTo + slideUp animation. setTimeout( function() { $card .removeClass( 'plugin-card-update-failed' ) .find( '.column-name a' ).trigger( 'focus' ); $card.find( '.update-now' ) .attr( 'aria-label', false ) .text( __( 'Update Now' ) ); }, 200 ); } ); } $adminBarUpdates.removeClass( 'spin' ); wp.a11y.speak( errorMessage, 'assertive' ); if ( 'plugin-information-footer' === $card.attr('id' ) ) { wp.updates.setCardButtonStatus( { status: 'plugin-update-failed', slug: response.slug, removeClasses: 'updating-message', text: buttonText, ariaLabel: ariaLabel } ); } $document.trigger( 'wp-plugin-update-error', response ); }; /** * Sends an Ajax request to the server to install a plugin. * * @since 4.6.0 * * @param {Object} args Arguments. * @param {string} args.slug Plugin identifier in the WordPress.org Plugin repository. * @param {installPluginSuccess=} args.success Optional. Success callback. Default: wp.updates.installPluginSuccess * @param {installPluginError=} args.error Optional. Error callback. Default: wp.updates.installPluginError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.installPlugin = function( args ) { var $card = $( '.plugin-card-' + args.slug + ', #plugin-information-footer' ), $message = $card.find( '.install-now' ), buttonText = __( 'Installing...' ), ariaLabel; args = _.extend( { success: wp.updates.installPluginSuccess, error: wp.updates.installPluginError }, args ); if ( 'import' === pagenow ) { $message = $( '[data-slug="' + args.slug + '"]' ); } if ( $message.html() !== __( 'Installing...' ) ) { $message.data( 'originaltext', $message.html() ); } ariaLabel = sprintf( /* translators: %s: Plugin name and version. */ _x( 'Installing %s...', 'plugin' ), $message.data( 'name' ) ); $message .addClass( 'updating-message' ) .attr( 'aria-label', ariaLabel ) .text( buttonText ); wp.a11y.speak( __( 'Installing... please wait.' ) ); // Remove previous error messages, if any. $card.removeClass( 'plugin-card-install-failed' ).find( '.notice.notice-error' ).remove(); $document.trigger( 'wp-plugin-installing', args ); if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'installing-plugin', slug: args.slug, addClasses: 'updating-message', text: buttonText, ariaLabel: ariaLabel } ); } return wp.updates.ajax( 'install-plugin', args ); }; /** * Updates the UI appropriately after a successful plugin install. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the installed plugin. * @param {string} response.pluginName Name of the installed plugin. * @param {string} response.activateUrl URL to activate the just installed plugin. */ wp.updates.installPluginSuccess = function( response ) { var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.install-now' ), buttonText = _x( 'Installed!', 'plugin' ), ariaLabel = sprintf( /* translators: %s: Plugin name and version. */ _x( '%s installed!', 'plugin' ), response.pluginName ); $message .removeClass( 'updating-message' ) .addClass( 'updated-message installed button-disabled' ) .attr( 'aria-label', ariaLabel ) .text( buttonText ); wp.a11y.speak( __( 'Installation completed successfully.' ) ); $document.trigger( 'wp-plugin-install-success', response ); if ( response.activateUrl ) { setTimeout( function() { wp.updates.checkPluginDependencies( { slug: response.slug } ); }, 1000 ); } if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'installed-plugin', slug: response.slug, removeClasses: 'updating-message', addClasses: 'updated-message installed button-disabled', text: buttonText, ariaLabel: ariaLabel } ); } }; /** * Updates the UI appropriately after a failed plugin install. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin to be installed. * @param {string=} response.pluginName Optional. Name of the plugin to be installed. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.installPluginError = function( response ) { var $card = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ), $button = $card.find( '.install-now' ), buttonText = __( 'Installation failed.' ), ariaLabel = sprintf( /* translators: %s: Plugin name and version. */ _x( '%s installation failed', 'plugin' ), $button.data( 'name' ) ), errorMessage; if ( ! wp.updates.isValidResponse( response, 'install' ) ) { return; } if ( wp.updates.maybeHandleCredentialError( response, 'install-plugin' ) ) { return; } errorMessage = sprintf( /* translators: %s: Error string for a failed installation. */ __( 'Installation failed: %s' ), response.errorMessage ); $card .addClass( 'plugin-card-update-failed' ) .append( '' ); $card.on( 'click', '.notice.is-dismissible .notice-dismiss', function() { // Use same delay as the total duration of the notice fadeTo + slideUp animation. setTimeout( function() { $card .removeClass( 'plugin-card-update-failed' ) .find( '.column-name a' ).trigger( 'focus' ); }, 200 ); } ); $button .removeClass( 'updating-message' ).addClass( 'button-disabled' ) .attr( 'aria-label', ariaLabel ) .text( buttonText ); wp.a11y.speak( errorMessage, 'assertive' ); wp.updates.setCardButtonStatus( { status: 'plugin-install-failed', slug: response.slug, removeClasses: 'updating-message', addClasses: 'button-disabled', text: buttonText, ariaLabel: ariaLabel } ); $document.trigger( 'wp-plugin-install-error', response ); }; /** * Sends an Ajax request to the server to check a plugin's dependencies. * * @since 6.5.0 * * @param {Object} args Arguments. * @param {string} args.slug Plugin identifier in the WordPress.org Plugin repository. * @param {checkPluginDependenciesSuccess=} args.success Optional. Success callback. Default: wp.updates.checkPluginDependenciesSuccess * @param {checkPluginDependenciesError=} args.error Optional. Error callback. Default: wp.updates.checkPluginDependenciesError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.checkPluginDependencies = function( args ) { args = _.extend( { success: wp.updates.checkPluginDependenciesSuccess, error: wp.updates.checkPluginDependenciesError }, args ); wp.a11y.speak( __( 'Checking plugin dependencies... please wait.' ) ); $document.trigger( 'wp-checking-plugin-dependencies', args ); return wp.updates.ajax( 'check_plugin_dependencies', args ); }; /** * Updates the UI appropriately after a successful plugin dependencies check. * * @since 6.5.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the checked plugin. * @param {string} response.pluginName Name of the checked plugin. * @param {string} response.plugin The plugin file, relative to the plugins directory. * @param {string} response.activateUrl URL to activate the just checked plugin. */ wp.updates.checkPluginDependenciesSuccess = function( response ) { var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.install-now' ), buttonText, ariaLabel; // Transform the 'Install' button into an 'Activate' button. $message .removeClass( 'install-now installed button-disabled updated-message' ) .addClass( 'activate-now button-primary' ) .attr( 'href', response.activateUrl ); wp.a11y.speak( __( 'Plugin dependencies check completed successfully.' ) ); $document.trigger( 'wp-check-plugin-dependencies-success', response ); if ( 'plugins-network' === pagenow ) { buttonText = _x( 'Network Activate', 'plugin' ); ariaLabel = sprintf( /* translators: %s: Plugin name. */ _x( 'Network Activate %s', 'plugin' ), response.pluginName ); $message .attr( 'aria-label', ariaLabel ) .text( buttonText ); } else { buttonText = _x( 'Activate', 'plugin' ); ariaLabel = sprintf( /* translators: %s: Plugin name. */ _x( 'Activate %s', 'plugin' ), response.pluginName ); $message .attr( 'aria-label', ariaLabel ) .attr( 'data-name', response.pluginName ) .attr( 'data-slug', response.slug ) .attr( 'data-plugin', response.plugin ) .text( buttonText ); } if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'dependencies-check-success', slug: response.slug, removeClasses: 'install-now installed button-disabled updated-message', addClasses: 'activate-now button-primary', text: buttonText, ariaLabel: ariaLabel, pluginName: response.pluginName, plugin: response.plugin, href: response.activateUrl } ); } }; /** * Updates the UI appropriately after a failed plugin dependencies check. * * @since 6.5.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin to be checked. * @param {string=} response.pluginName Optional. Name of the plugin to be checked. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.checkPluginDependenciesError = function( response ) { var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.install-now' ), buttonText = _x( 'Activate', 'plugin' ), ariaLabel = sprintf( /* translators: 1: Plugin name, 2. The reason the plugin cannot be activated. */ _x( 'Cannot activate %1$s. %2$s', 'plugin' ), response.pluginName, response.errorMessage ), errorMessage; if ( ! wp.updates.isValidResponse( response, 'check-dependencies' ) ) { return; } errorMessage = sprintf( /* translators: %s: Error string for a failed activation. */ __( 'Activation failed: %s' ), response.errorMessage ); wp.a11y.speak( errorMessage, 'assertive' ); $document.trigger( 'wp-check-plugin-dependencies-error', response ); $message .removeClass( 'install-now installed updated-message' ) .addClass( 'activate-now button-primary' ) .attr( 'aria-label', ariaLabel ) .text( buttonText ); if ( 'plugin-information-footer' === $message.parent().attr('id' ) ) { wp.updates.setCardButtonStatus( { status: 'dependencies-check-failed', slug: response.slug, removeClasses: 'install-now installed updated-message', addClasses: 'activate-now button-primary', text: buttonText, ariaLabel: ariaLabel } ); } }; /** * Sends an Ajax request to the server to activate a plugin. * * @since 6.5.0 * * @param {Object} args Arguments. * @param {string} args.name The name of the plugin. * @param {string} args.slug Plugin identifier in the WordPress.org Plugin repository. * @param {string} args.plugin The plugin file, relative to the plugins directory. * @param {activatePluginSuccess=} args.success Optional. Success callback. Default: wp.updates.activatePluginSuccess * @param {activatePluginError=} args.error Optional. Error callback. Default: wp.updates.activatePluginError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.activatePlugin = function( args ) { var $message = $( '.plugin-card-' + args.slug + ', #plugin-information-footer' ).find( '.activate-now, .activating-message' ); args = _.extend( { success: wp.updates.activatePluginSuccess, error: wp.updates.activatePluginError }, args ); wp.a11y.speak( __( 'Activating... please wait.' ) ); $document.trigger( 'wp-activating-plugin', args ); if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'activating-plugin', slug: args.slug, removeClasses: 'installed updated-message button-primary', addClasses: 'activating-message', text: __( 'Activating...' ), ariaLabel: sprintf( /* translators: %s: Plugin name. */ _x( 'Activating %s', 'plugin' ), args.name ) } ); } return wp.updates.ajax( 'activate-plugin', args ); }; /** * Updates the UI appropriately after a successful plugin activation. * * @since 6.5.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the activated plugin. * @param {string} response.pluginName Name of the activated plugin. * @param {string} response.plugin The plugin file, relative to the plugins directory. */ wp.updates.activatePluginSuccess = function( response ) { var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.activating-message' ), buttonText = _x( 'Activated!', 'plugin' ), ariaLabel = sprintf( /* translators: %s: The plugin name. */ '%s activated successfully.', response.pluginName ); wp.a11y.speak( __( 'Activation completed successfully.' ) ); $document.trigger( 'wp-plugin-activate-success', response ); $message .removeClass( 'activating-message' ) .addClass( 'activated-message button-disabled' ) .attr( 'aria-label', ariaLabel ) .text( buttonText ); if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'activated-plugin', slug: response.slug, removeClasses: 'activating-message', addClasses: 'activated-message button-disabled', text: buttonText, ariaLabel: ariaLabel } ); } setTimeout( function() { $message.removeClass( 'activated-message' ) .text( _x( 'Active', 'plugin' ) ); if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'plugin-active', slug: response.slug, removeClasses: 'activated-message', text: _x( 'Active', 'plugin' ), ariaLabel: sprintf( /* translators: %s: The plugin name. */ '%s is active.', response.pluginName ) } ); } }, 1000 ); }; /** * Updates the UI appropriately after a failed plugin activation. * * @since 6.5.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin to be activated. * @param {string=} response.pluginName Optional. Name of the plugin to be activated. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.activatePluginError = function( response ) { var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.activating-message' ), buttonText = __( 'Activation failed.' ), ariaLabel = sprintf( /* translators: %s: Plugin name. */ _x( '%s activation failed', 'plugin' ), response.pluginName ), errorMessage; if ( ! wp.updates.isValidResponse( response, 'activate' ) ) { return; } errorMessage = sprintf( /* translators: %s: Error string for a failed activation. */ __( 'Activation failed: %s' ), response.errorMessage ); wp.a11y.speak( errorMessage, 'assertive' ); $document.trigger( 'wp-plugin-activate-error', response ); $message .removeClass( 'install-now installed activating-message' ) .addClass( 'button-disabled' ) .attr( 'aria-label', ariaLabel ) .text( buttonText ); if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) { wp.updates.setCardButtonStatus( { status: 'plugin-activation-failed', slug: response.slug, removeClasses: 'install-now installed activating-message', addClasses: 'button-disabled', text: buttonText, ariaLabel: ariaLabel } ); } }; /** * Updates the UI appropriately after a successful importer install. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the installed plugin. * @param {string} response.pluginName Name of the installed plugin. * @param {string} response.activateUrl URL to activate the just installed plugin. */ wp.updates.installImporterSuccess = function( response ) { wp.updates.addAdminNotice( { id: 'install-success', className: 'notice-success is-dismissible', message: sprintf( /* translators: %s: Activation URL. */ __( 'Importer installed successfully. Run importer' ), response.activateUrl + '&from=import' ) } ); $( '[data-slug="' + response.slug + '"]' ) .removeClass( 'install-now updating-message' ) .addClass( 'activate-now' ) .attr({ 'href': response.activateUrl + '&from=import', 'aria-label':sprintf( /* translators: %s: Importer name. */ __( 'Run %s' ), response.pluginName ) }) .text( __( 'Run Importer' ) ); wp.a11y.speak( __( 'Installation completed successfully.' ) ); $document.trigger( 'wp-importer-install-success', response ); }; /** * Updates the UI appropriately after a failed importer install. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin to be installed. * @param {string=} response.pluginName Optional. Name of the plugin to be installed. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.installImporterError = function( response ) { var errorMessage = sprintf( /* translators: %s: Error string for a failed installation. */ __( 'Installation failed: %s' ), response.errorMessage ), $installLink = $( '[data-slug="' + response.slug + '"]' ), pluginName = $installLink.data( 'name' ); if ( ! wp.updates.isValidResponse( response, 'install' ) ) { return; } if ( wp.updates.maybeHandleCredentialError( response, 'install-plugin' ) ) { return; } wp.updates.addAdminNotice( { id: response.errorCode, className: 'notice-error is-dismissible', message: errorMessage } ); $installLink .removeClass( 'updating-message' ) .attr( 'aria-label', sprintf( /* translators: %s: Plugin name. */ _x( 'Install %s now', 'plugin' ), pluginName ) ) .text( _x( 'Install Now', 'plugin' ) ); wp.a11y.speak( errorMessage, 'assertive' ); $document.trigger( 'wp-importer-install-error', response ); }; /** * Sends an Ajax request to the server to delete a plugin. * * @since 4.6.0 * * @param {Object} args Arguments. * @param {string} args.plugin Basename of the plugin to be deleted. * @param {string} args.slug Slug of the plugin to be deleted. * @param {deletePluginSuccess=} args.success Optional. Success callback. Default: wp.updates.deletePluginSuccess * @param {deletePluginError=} args.error Optional. Error callback. Default: wp.updates.deletePluginError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.deletePlugin = function( args ) { var $link = $( '[data-plugin="' + args.plugin + '"]' ).find( '.row-actions a.delete' ); args = _.extend( { success: wp.updates.deletePluginSuccess, error: wp.updates.deletePluginError }, args ); if ( $link.html() !== __( 'Deleting...' ) ) { $link .data( 'originaltext', $link.html() ) .text( __( 'Deleting...' ) ); } wp.a11y.speak( __( 'Deleting...' ) ); $document.trigger( 'wp-plugin-deleting', args ); return wp.updates.ajax( 'delete-plugin', args ); }; /** * Updates the UI appropriately after a successful plugin deletion. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin that was deleted. * @param {string} response.plugin Base name of the plugin that was deleted. * @param {string} response.pluginName Name of the plugin that was deleted. */ wp.updates.deletePluginSuccess = function( response ) { // Removes the plugin and updates rows. $( '[data-plugin="' + response.plugin + '"]' ).css( { backgroundColor: '#faafaa' } ).fadeOut( 350, function() { var $form = $( '#bulk-action-form' ), $views = $( '.subsubsub' ), $pluginRow = $( this ), $currentView = $views.find( '[aria-current="page"]' ), $itemsCount = $( '.displaying-num' ), columnCount = $form.find( 'thead th:not(.hidden), thead td' ).length, pluginDeletedRow = wp.template( 'item-deleted-row' ), /** * Plugins Base names of plugins in their different states. * * @type {Object} */ plugins = settings.plugins, remainingCount; // Add a success message after deleting a plugin. if ( ! $pluginRow.hasClass( 'plugin-update-tr' ) ) { $pluginRow.after( pluginDeletedRow( { slug: response.slug, plugin: response.plugin, colspan: columnCount, name: response.pluginName } ) ); } $pluginRow.remove(); // Remove plugin from update count. if ( -1 !== _.indexOf( plugins.upgrade, response.plugin ) ) { plugins.upgrade = _.without( plugins.upgrade, response.plugin ); wp.updates.decrementCount( 'plugin' ); } // Remove from views. if ( -1 !== _.indexOf( plugins.inactive, response.plugin ) ) { plugins.inactive = _.without( plugins.inactive, response.plugin ); if ( plugins.inactive.length ) { $views.find( '.inactive .count' ).text( '(' + plugins.inactive.length + ')' ); } else { $views.find( '.inactive' ).remove(); } } if ( -1 !== _.indexOf( plugins.active, response.plugin ) ) { plugins.active = _.without( plugins.active, response.plugin ); if ( plugins.active.length ) { $views.find( '.active .count' ).text( '(' + plugins.active.length + ')' ); } else { $views.find( '.active' ).remove(); } } if ( -1 !== _.indexOf( plugins.recently_activated, response.plugin ) ) { plugins.recently_activated = _.without( plugins.recently_activated, response.plugin ); if ( plugins.recently_activated.length ) { $views.find( '.recently_activated .count' ).text( '(' + plugins.recently_activated.length + ')' ); } else { $views.find( '.recently_activated' ).remove(); } } if ( -1 !== _.indexOf( plugins['auto-update-enabled'], response.plugin ) ) { plugins['auto-update-enabled'] = _.without( plugins['auto-update-enabled'], response.plugin ); if ( plugins['auto-update-enabled'].length ) { $views.find( '.auto-update-enabled .count' ).text( '(' + plugins['auto-update-enabled'].length + ')' ); } else { $views.find( '.auto-update-enabled' ).remove(); } } if ( -1 !== _.indexOf( plugins['auto-update-disabled'], response.plugin ) ) { plugins['auto-update-disabled'] = _.without( plugins['auto-update-disabled'], response.plugin ); if ( plugins['auto-update-disabled'].length ) { $views.find( '.auto-update-disabled .count' ).text( '(' + plugins['auto-update-disabled'].length + ')' ); } else { $views.find( '.auto-update-disabled' ).remove(); } } plugins.all = _.without( plugins.all, response.plugin ); if ( plugins.all.length ) { $views.find( '.all .count' ).text( '(' + plugins.all.length + ')' ); } else { $form.find( '.tablenav' ).css( { visibility: 'hidden' } ); $views.find( '.all' ).remove(); if ( ! $form.find( 'tr.no-items' ).length ) { $form.find( '#the-list' ).append( '' + __( 'No plugins are currently available.' ) + '' ); } } if ( $itemsCount.length && $currentView.length ) { remainingCount = plugins[ $currentView.parent( 'li' ).attr('class') ].length; $itemsCount.text( sprintf( /* translators: %s: The remaining number of plugins. */ _nx( '%s item', '%s items', remainingCount, 'plugin/plugins' ), remainingCount ) ); } } ); wp.a11y.speak( _x( 'Deleted!', 'plugin' ) ); $document.trigger( 'wp-plugin-delete-success', response ); }; /** * Updates the UI appropriately after a failed plugin deletion. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the plugin to be deleted. * @param {string} response.plugin Base name of the plugin to be deleted * @param {string=} response.pluginName Optional. Name of the plugin to be deleted. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.deletePluginError = function( response ) { var $plugin, $pluginUpdateRow, pluginUpdateRow = wp.template( 'item-update-row' ), noticeContent = wp.updates.adminNotice( { className: 'update-message notice-error notice-alt', message: response.errorMessage } ); if ( response.plugin ) { $plugin = $( 'tr.inactive[data-plugin="' + response.plugin + '"]' ); $pluginUpdateRow = $plugin.siblings( '[data-plugin="' + response.plugin + '"]' ); } else { $plugin = $( 'tr.inactive[data-slug="' + response.slug + '"]' ); $pluginUpdateRow = $plugin.siblings( '[data-slug="' + response.slug + '"]' ); } if ( ! wp.updates.isValidResponse( response, 'delete' ) ) { return; } if ( wp.updates.maybeHandleCredentialError( response, 'delete-plugin' ) ) { return; } // Add a plugin update row if it doesn't exist yet. if ( ! $pluginUpdateRow.length ) { $plugin.addClass( 'update' ).after( pluginUpdateRow( { slug: response.slug, plugin: response.plugin || response.slug, colspan: $( '#bulk-action-form' ).find( 'thead th:not(.hidden), thead td' ).length, content: noticeContent } ) ); } else { // Remove previous error messages, if any. $pluginUpdateRow.find( '.notice-error' ).remove(); $pluginUpdateRow.find( '.plugin-update' ).append( noticeContent ); } $document.trigger( 'wp-plugin-delete-error', response ); }; /** * Sends an Ajax request to the server to update a theme. * * @since 4.6.0 * * @param {Object} args Arguments. * @param {string} args.slug Theme stylesheet. * @param {updateThemeSuccess=} args.success Optional. Success callback. Default: wp.updates.updateThemeSuccess * @param {updateThemeError=} args.error Optional. Error callback. Default: wp.updates.updateThemeError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.updateTheme = function( args ) { var $notice; args = _.extend( { success: wp.updates.updateThemeSuccess, error: wp.updates.updateThemeError }, args ); if ( 'themes-network' === pagenow ) { $notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' ); } else if ( 'customize' === pagenow ) { // Update the theme details UI. $notice = $( '[data-slug="' + args.slug + '"].notice' ).removeClass( 'notice-large' ); $notice.find( 'h3' ).remove(); // Add the top-level UI, and update both. $notice = $notice.add( $( '#customize-control-installed_theme_' + args.slug ).find( '.update-message' ) ); $notice = $notice.addClass( 'updating-message' ).find( 'p' ); } else { $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' ); $notice.find( 'h3' ).remove(); $notice = $notice.add( $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ) ); $notice = $notice.addClass( 'updating-message' ).find( 'p' ); } if ( $notice.html() !== __( 'Updating...' ) ) { $notice.data( 'originaltext', $notice.html() ); } wp.a11y.speak( __( 'Updating... please wait.' ) ); $notice.text( __( 'Updating...' ) ); $document.trigger( 'wp-theme-updating', args ); return wp.updates.ajax( 'update-theme', args ); }; /** * Updates the UI appropriately after a successful theme update. * * @since 4.6.0 * @since 5.5.0 Auto-update "time to next update" text cleared. * * @param {Object} response * @param {string} response.slug Slug of the theme to be updated. * @param {Object} response.theme Updated theme. * @param {string} response.oldVersion Old version of the theme. * @param {string} response.newVersion New version of the theme. */ wp.updates.updateThemeSuccess = function( response ) { var isModalOpen = $( 'body.modal-open' ).length, $theme = $( '[data-slug="' + response.slug + '"]' ), updatedMessage = { className: 'updated-message notice-success notice-alt', message: _x( 'Updated!', 'theme' ) }, $notice, newText; if ( 'customize' === pagenow ) { $theme = $( '.updating-message' ).siblings( '.theme-name' ); if ( $theme.length ) { // Update the version number in the row. newText = $theme.html().replace( response.oldVersion, response.newVersion ); $theme.html( newText ); } $notice = $( '.theme-info .notice' ).add( wp.customize.control( 'installed_theme_' + response.slug ).container.find( '.theme' ).find( '.update-message' ) ); } else if ( 'themes-network' === pagenow ) { $notice = $theme.find( '.update-message' ); // Update the version number in the row. newText = $theme.find( '.theme-version-author-uri' ).html().replace( response.oldVersion, response.newVersion ); $theme.find( '.theme-version-author-uri' ).html( newText ); // Clear the "time to next auto-update" text. $theme.find( '.auto-update-time' ).empty(); } else { $notice = $( '.theme-info .notice' ).add( $theme.find( '.update-message' ) ); // Focus on Customize button after updating. if ( isModalOpen ) { $( '.load-customize:visible' ).trigger( 'focus' ); $( '.theme-info .theme-autoupdate' ).find( '.auto-update-time' ).empty(); } else { $theme.find( '.load-customize' ).trigger( 'focus' ); } } wp.updates.addAdminNotice( _.extend( { selector: $notice }, updatedMessage ) ); wp.a11y.speak( __( 'Update completed successfully.' ) ); wp.updates.decrementCount( 'theme' ); $document.trigger( 'wp-theme-update-success', response ); // Show updated message after modal re-rendered. if ( isModalOpen && 'customize' !== pagenow ) { $( '.theme-info .theme-author' ).after( wp.updates.adminNotice( updatedMessage ) ); } }; /** * Updates the UI appropriately after a failed theme update. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the theme to be updated. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.updateThemeError = function( response ) { var $theme = $( '[data-slug="' + response.slug + '"]' ), errorMessage = sprintf( /* translators: %s: Error string for a failed update. */ __( 'Update failed: %s' ), response.errorMessage ), $notice; if ( ! wp.updates.isValidResponse( response, 'update' ) ) { return; } if ( wp.updates.maybeHandleCredentialError( response, 'update-theme' ) ) { return; } if ( 'customize' === pagenow ) { $theme = wp.customize.control( 'installed_theme_' + response.slug ).container.find( '.theme' ); } if ( 'themes-network' === pagenow ) { $notice = $theme.find( '.update-message ' ); } else { $notice = $( '.theme-info .notice' ).add( $theme.find( '.notice' ) ); $( 'body.modal-open' ).length ? $( '.load-customize:visible' ).trigger( 'focus' ) : $theme.find( '.load-customize' ).trigger( 'focus'); } wp.updates.addAdminNotice( { selector: $notice, className: 'update-message notice-error notice-alt is-dismissible', message: errorMessage } ); wp.a11y.speak( errorMessage ); $document.trigger( 'wp-theme-update-error', response ); }; /** * Sends an Ajax request to the server to install a theme. * * @since 4.6.0 * * @param {Object} args * @param {string} args.slug Theme stylesheet. * @param {installThemeSuccess=} args.success Optional. Success callback. Default: wp.updates.installThemeSuccess * @param {installThemeError=} args.error Optional. Error callback. Default: wp.updates.installThemeError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.installTheme = function( args ) { var $message = $( '.theme-install[data-slug="' + args.slug + '"]' ); args = _.extend( { success: wp.updates.installThemeSuccess, error: wp.updates.installThemeError }, args ); $message.addClass( 'updating-message' ); $message.parents( '.theme' ).addClass( 'focus' ); if ( $message.html() !== __( 'Installing...' ) ) { $message.data( 'originaltext', $message.html() ); } $message .attr( 'aria-label', sprintf( /* translators: %s: Theme name and version. */ _x( 'Installing %s...', 'theme' ), $message.data( 'name' ) ) ) .text( __( 'Installing...' ) ); wp.a11y.speak( __( 'Installing... please wait.' ) ); // Remove previous error messages, if any. $( '.install-theme-info, [data-slug="' + args.slug + '"]' ).removeClass( 'theme-install-failed' ).find( '.notice.notice-error' ).remove(); $document.trigger( 'wp-theme-installing', args ); return wp.updates.ajax( 'install-theme', args ); }; /** * Updates the UI appropriately after a successful theme install. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the theme to be installed. * @param {string} response.customizeUrl URL to the Customizer for the just installed theme. * @param {string} response.activateUrl URL to activate the just installed theme. */ wp.updates.installThemeSuccess = function( response ) { var $card = $( '.wp-full-overlay-header, [data-slug=' + response.slug + ']' ), $message; $document.trigger( 'wp-theme-install-success', response ); $message = $card.find( '.button-primary' ) .removeClass( 'updating-message' ) .addClass( 'updated-message disabled' ) .attr( 'aria-label', sprintf( /* translators: %s: Theme name and version. */ _x( '%s installed!', 'theme' ), response.themeName ) ) .text( _x( 'Installed!', 'theme' ) ); wp.a11y.speak( __( 'Installation completed successfully.' ) ); setTimeout( function() { if ( response.activateUrl ) { // Transform the 'Install' button into an 'Activate' button. $message .attr( 'href', response.activateUrl ) .removeClass( 'theme-install updated-message disabled' ) .addClass( 'activate' ); if ( 'themes-network' === pagenow ) { $message .attr( 'aria-label', sprintf( /* translators: %s: Theme name. */ _x( 'Network Activate %s', 'theme' ), response.themeName ) ) .text( __( 'Network Enable' ) ); } else { $message .attr( 'aria-label', sprintf( /* translators: %s: Theme name. */ _x( 'Activate %s', 'theme' ), response.themeName ) ) .text( _x( 'Activate', 'theme' ) ); } } if ( response.customizeUrl ) { // Transform the 'Preview' button into a 'Live Preview' button. $message.siblings( '.preview' ).replaceWith( function () { return $( '' ) .attr( 'href', response.customizeUrl ) .addClass( 'button load-customize' ) .text( __( 'Live Preview' ) ); } ); } }, 1000 ); }; /** * Updates the UI appropriately after a failed theme install. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the theme to be installed. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.installThemeError = function( response ) { var $card, $button, errorMessage = sprintf( /* translators: %s: Error string for a failed installation. */ __( 'Installation failed: %s' ), response.errorMessage ), $message = wp.updates.adminNotice( { className: 'update-message notice-error notice-alt', message: errorMessage } ); if ( ! wp.updates.isValidResponse( response, 'install' ) ) { return; } if ( wp.updates.maybeHandleCredentialError( response, 'install-theme' ) ) { return; } if ( 'customize' === pagenow ) { if ( $document.find( 'body' ).hasClass( 'modal-open' ) ) { $button = $( '.theme-install[data-slug="' + response.slug + '"]' ); $card = $( '.theme-overlay .theme-info' ).prepend( $message ); } else { $button = $( '.theme-install[data-slug="' + response.slug + '"]' ); $card = $button.closest( '.theme' ).addClass( 'theme-install-failed' ).append( $message ); } wp.customize.notifications.remove( 'theme_installing' ); } else { if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) { $button = $( '.theme-install[data-slug="' + response.slug + '"]' ); $card = $( '.install-theme-info' ).prepend( $message ); } else { $card = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message ); $button = $card.find( '.theme-install' ); } } $button .removeClass( 'updating-message' ) .attr( 'aria-label', sprintf( /* translators: %s: Theme name and version. */ _x( '%s installation failed', 'theme' ), $button.data( 'name' ) ) ) .text( __( 'Installation failed.' ) ); wp.a11y.speak( errorMessage, 'assertive' ); $document.trigger( 'wp-theme-install-error', response ); }; /** * Sends an Ajax request to the server to delete a theme. * * @since 4.6.0 * * @param {Object} args * @param {string} args.slug Theme stylesheet. * @param {deleteThemeSuccess=} args.success Optional. Success callback. Default: wp.updates.deleteThemeSuccess * @param {deleteThemeError=} args.error Optional. Error callback. Default: wp.updates.deleteThemeError * @return {$.promise} A jQuery promise that represents the request, * decorated with an abort() method. */ wp.updates.deleteTheme = function( args ) { var $button; if ( 'themes' === pagenow ) { $button = $( '.theme-actions .delete-theme' ); } else if ( 'themes-network' === pagenow ) { $button = $( '[data-slug="' + args.slug + '"]' ).find( '.row-actions a.delete' ); } args = _.extend( { success: wp.updates.deleteThemeSuccess, error: wp.updates.deleteThemeError }, args ); if ( $button && $button.html() !== __( 'Deleting...' ) ) { $button .data( 'originaltext', $button.html() ) .text( __( 'Deleting...' ) ); } wp.a11y.speak( __( 'Deleting...' ) ); // Remove previous error messages, if any. $( '.theme-info .update-message' ).remove(); $document.trigger( 'wp-theme-deleting', args ); return wp.updates.ajax( 'delete-theme', args ); }; /** * Updates the UI appropriately after a successful theme deletion. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the theme that was deleted. */ wp.updates.deleteThemeSuccess = function( response ) { var $themeRows = $( '[data-slug="' + response.slug + '"]' ); if ( 'themes-network' === pagenow ) { // Removes the theme and updates rows. $themeRows.css( { backgroundColor: '#faafaa' } ).fadeOut( 350, function() { var $views = $( '.subsubsub' ), $themeRow = $( this ), themes = settings.themes, deletedRow = wp.template( 'item-deleted-row' ); if ( ! $themeRow.hasClass( 'plugin-update-tr' ) ) { $themeRow.after( deletedRow( { slug: response.slug, colspan: $( '#bulk-action-form' ).find( 'thead th:not(.hidden), thead td' ).length, name: $themeRow.find( '.theme-title strong' ).text() } ) ); } $themeRow.remove(); // Remove theme from update count. if ( -1 !== _.indexOf( themes.upgrade, response.slug ) ) { themes.upgrade = _.without( themes.upgrade, response.slug ); wp.updates.decrementCount( 'theme' ); } // Remove from views. if ( -1 !== _.indexOf( themes.disabled, response.slug ) ) { themes.disabled = _.without( themes.disabled, response.slug ); if ( themes.disabled.length ) { $views.find( '.disabled .count' ).text( '(' + themes.disabled.length + ')' ); } else { $views.find( '.disabled' ).remove(); } } if ( -1 !== _.indexOf( themes['auto-update-enabled'], response.slug ) ) { themes['auto-update-enabled'] = _.without( themes['auto-update-enabled'], response.slug ); if ( themes['auto-update-enabled'].length ) { $views.find( '.auto-update-enabled .count' ).text( '(' + themes['auto-update-enabled'].length + ')' ); } else { $views.find( '.auto-update-enabled' ).remove(); } } if ( -1 !== _.indexOf( themes['auto-update-disabled'], response.slug ) ) { themes['auto-update-disabled'] = _.without( themes['auto-update-disabled'], response.slug ); if ( themes['auto-update-disabled'].length ) { $views.find( '.auto-update-disabled .count' ).text( '(' + themes['auto-update-disabled'].length + ')' ); } else { $views.find( '.auto-update-disabled' ).remove(); } } themes.all = _.without( themes.all, response.slug ); // There is always at least one theme available. $views.find( '.all .count' ).text( '(' + themes.all.length + ')' ); } ); } // DecrementCount from update count. if ( 'themes' === pagenow ) { var theme = _.find( _wpThemeSettings.themes, { id: response.slug } ); if ( theme.hasUpdate ) { wp.updates.decrementCount( 'theme' ); } } wp.a11y.speak( _x( 'Deleted!', 'theme' ) ); $document.trigger( 'wp-theme-delete-success', response ); }; /** * Updates the UI appropriately after a failed theme deletion. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.slug Slug of the theme to be deleted. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. */ wp.updates.deleteThemeError = function( response ) { var $themeRow = $( 'tr.inactive[data-slug="' + response.slug + '"]' ), $button = $( '.theme-actions .delete-theme' ), updateRow = wp.template( 'item-update-row' ), $updateRow = $themeRow.siblings( '#' + response.slug + '-update' ), errorMessage = sprintf( /* translators: %s: Error string for a failed deletion. */ __( 'Deletion failed: %s' ), response.errorMessage ), $message = wp.updates.adminNotice( { className: 'update-message notice-error notice-alt', message: errorMessage } ); if ( wp.updates.maybeHandleCredentialError( response, 'delete-theme' ) ) { return; } if ( 'themes-network' === pagenow ) { if ( ! $updateRow.length ) { $themeRow.addClass( 'update' ).after( updateRow( { slug: response.slug, colspan: $( '#bulk-action-form' ).find( 'thead th:not(.hidden), thead td' ).length, content: $message } ) ); } else { // Remove previous error messages, if any. $updateRow.find( '.notice-error' ).remove(); $updateRow.find( '.plugin-update' ).append( $message ); } } else { $( '.theme-info .theme-description' ).before( $message ); } $button.html( $button.data( 'originaltext' ) ); wp.a11y.speak( errorMessage, 'assertive' ); $document.trigger( 'wp-theme-delete-error', response ); }; /** * Adds the appropriate callback based on the type of action and the current page. * * @since 4.6.0 * @private * * @param {Object} data Ajax payload. * @param {string} action The type of request to perform. * @return {Object} The Ajax payload with the appropriate callbacks. */ wp.updates._addCallbacks = function( data, action ) { if ( 'import' === pagenow && 'install-plugin' === action ) { data.success = wp.updates.installImporterSuccess; data.error = wp.updates.installImporterError; } return data; }; /** * Pulls available jobs from the queue and runs them. * * @since 4.2.0 * @since 4.6.0 Can handle multiple job types. */ wp.updates.queueChecker = function() { var job; if ( wp.updates.ajaxLocked || ! wp.updates.queue.length ) { return; } job = wp.updates.queue.shift(); // Handle a queue job. switch ( job.action ) { case 'install-plugin': wp.updates.installPlugin( job.data ); break; case 'update-plugin': wp.updates.updatePlugin( job.data ); break; case 'delete-plugin': wp.updates.deletePlugin( job.data ); break; case 'install-theme': wp.updates.installTheme( job.data ); break; case 'update-theme': wp.updates.updateTheme( job.data ); break; case 'delete-theme': wp.updates.deleteTheme( job.data ); break; default: break; } }; /** * Requests the users filesystem credentials if they aren't already known. * * @since 4.2.0 * * @param {Event=} event Optional. Event interface. */ wp.updates.requestFilesystemCredentials = function( event ) { if ( false === wp.updates.filesystemCredentials.available ) { /* * After exiting the credentials request modal, * return the focus to the element triggering the request. */ if ( event && ! wp.updates.$elToReturnFocusToFromCredentialsModal ) { wp.updates.$elToReturnFocusToFromCredentialsModal = $( event.target ); } wp.updates.ajaxLocked = true; wp.updates.requestForCredentialsModalOpen(); } }; /** * Requests the users filesystem credentials if needed and there is no lock. * * @since 4.6.0 * * @param {Event=} event Optional. Event interface. */ wp.updates.maybeRequestFilesystemCredentials = function( event ) { if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) { wp.updates.requestFilesystemCredentials( event ); } }; /** * Keydown handler for the request for credentials modal. * * Closes the modal when the escape key is pressed and * constrains keyboard navigation to inside the modal. * * @since 4.2.0 * * @param {Event} event Event interface. */ wp.updates.keydown = function( event ) { if ( 27 === event.keyCode ) { wp.updates.requestForCredentialsModalCancel(); } else if ( 9 === event.keyCode ) { // #upgrade button must always be the last focus-able element in the dialog. if ( 'upgrade' === event.target.id && ! event.shiftKey ) { $( '#hostname' ).trigger( 'focus' ); event.preventDefault(); } else if ( 'hostname' === event.target.id && event.shiftKey ) { $( '#upgrade' ).trigger( 'focus' ); event.preventDefault(); } } }; /** * Opens the request for credentials modal. * * @since 4.2.0 */ wp.updates.requestForCredentialsModalOpen = function() { var $modal = $( '#request-filesystem-credentials-dialog' ); $( 'body' ).addClass( 'modal-open' ); $modal.show(); $modal.find( 'input:enabled:first' ).trigger( 'focus' ); $modal.on( 'keydown', wp.updates.keydown ); }; /** * Closes the request for credentials modal. * * @since 4.2.0 */ wp.updates.requestForCredentialsModalClose = function() { $( '#request-filesystem-credentials-dialog' ).hide(); $( 'body' ).removeClass( 'modal-open' ); if ( wp.updates.$elToReturnFocusToFromCredentialsModal ) { wp.updates.$elToReturnFocusToFromCredentialsModal.trigger( 'focus' ); } }; /** * Takes care of the steps that need to happen when the modal is canceled out. * * @since 4.2.0 * @since 4.6.0 Triggers an event for callbacks to listen to and add their actions. */ wp.updates.requestForCredentialsModalCancel = function() { // Not ajaxLocked and no queue means we already have cleared things up. if ( ! wp.updates.ajaxLocked && ! wp.updates.queue.length ) { return; } _.each( wp.updates.queue, function( job ) { $document.trigger( 'credential-modal-cancel', job ); } ); // Remove the lock, and clear the queue. wp.updates.ajaxLocked = false; wp.updates.queue = []; wp.updates.requestForCredentialsModalClose(); }; /** * Displays an error message in the request for credentials form. * * @since 4.2.0 * * @param {string} message Error message. */ wp.updates.showErrorInCredentialsForm = function( message ) { var $filesystemForm = $( '#request-filesystem-credentials-form' ); // Remove any existing error. $filesystemForm.find( '.notice' ).remove(); $filesystemForm.find( '#request-filesystem-credentials-title' ).after( '' ); }; /** * Handles credential errors and runs events that need to happen in that case. * * @since 4.2.0 * * @param {Object} response Ajax response. * @param {string} action The type of request to perform. */ wp.updates.credentialError = function( response, action ) { // Restore callbacks. response = wp.updates._addCallbacks( response, action ); wp.updates.queue.unshift( { action: action, /* * Not cool that we're depending on response for this data. * This would feel more whole in a view all tied together. */ data: response } ); wp.updates.filesystemCredentials.available = false; wp.updates.showErrorInCredentialsForm( response.errorMessage ); wp.updates.requestFilesystemCredentials(); }; /** * Handles credentials errors if it could not connect to the filesystem. * * @since 4.6.0 * * @param {Object} response Response from the server. * @param {string} response.errorCode Error code for the error that occurred. * @param {string} response.errorMessage The error that occurred. * @param {string} action The type of request to perform. * @return {boolean} Whether there is an error that needs to be handled or not. */ wp.updates.maybeHandleCredentialError = function( response, action ) { if ( wp.updates.shouldRequestFilesystemCredentials && response.errorCode && 'unable_to_connect_to_filesystem' === response.errorCode ) { wp.updates.credentialError( response, action ); return true; } return false; }; /** * Validates an Ajax response to ensure it's a proper object. * * If the response deems to be invalid, an admin notice is being displayed. * * @param {(Object|string)} response Response from the server. * @param {function=} response.always Optional. Callback for when the Deferred is resolved or rejected. * @param {string=} response.statusText Optional. Status message corresponding to the status code. * @param {string=} response.responseText Optional. Request response as text. * @param {string} action Type of action the response is referring to. Can be 'delete', * 'update' or 'install'. */ wp.updates.isValidResponse = function( response, action ) { var error = __( 'Something went wrong.' ), errorMessage; // Make sure the response is a valid data object and not a Promise object. if ( _.isObject( response ) && ! _.isFunction( response.always ) ) { return true; } if ( _.isString( response ) && '-1' === response ) { error = __( 'An error has occurred. Please reload the page and try again.' ); } else if ( _.isString( response ) ) { error = response; } else if ( 'undefined' !== typeof response.readyState && 0 === response.readyState ) { error = __( 'Connection lost or the server is busy. Please try again later.' ); } else if ( _.isString( response.responseText ) && '' !== response.responseText ) { error = response.responseText; } else if ( _.isString( response.statusText ) ) { error = response.statusText; } switch ( action ) { case 'update': /* translators: %s: Error string for a failed update. */ errorMessage = __( 'Update failed: %s' ); break; case 'install': /* translators: %s: Error string for a failed installation. */ errorMessage = __( 'Installation failed: %s' ); break; case 'check-dependencies': /* translators: %s: Error string for a failed dependencies check. */ errorMessage = __( 'Dependencies check failed: %s' ); break; case 'activate': /* translators: %s: Error string for a failed activation. */ errorMessage = __( 'Activation failed: %s' ); break; case 'delete': /* translators: %s: Error string for a failed deletion. */ errorMessage = __( 'Deletion failed: %s' ); break; } // Messages are escaped, remove HTML tags to make them more readable. error = error.replace( /<[\/a-z][^<>]*>/gi, '' ); errorMessage = errorMessage.replace( '%s', error ); // Add admin notice. wp.updates.addAdminNotice( { id: 'unknown_error', className: 'notice-error is-dismissible', message: _.escape( errorMessage ) } ); // Remove the lock, and clear the queue. wp.updates.ajaxLocked = false; wp.updates.queue = []; // Change buttons of all running updates. $( '.button.updating-message' ) .removeClass( 'updating-message' ) .removeAttr( 'aria-label' ) .prop( 'disabled', true ) .text( __( 'Update failed.' ) ); $( '.updating-message:not(.button):not(.thickbox)' ) .removeClass( 'updating-message notice-warning' ) .addClass( 'notice-error' ) .find( 'p' ) .removeAttr( 'aria-label' ) .text( errorMessage ); wp.a11y.speak( errorMessage, 'assertive' ); return false; }; /** * Potentially adds an AYS to a user attempting to leave the page. * * If an update is on-going and a user attempts to leave the page, * opens an "Are you sure?" alert. * * @since 4.2.0 */ wp.updates.beforeunload = function() { if ( wp.updates.ajaxLocked ) { return __( 'Updates may not complete if you navigate away from this page.' ); } }; $( function() { var $pluginFilter = $( '#plugin-filter, #plugin-information-footer' ), $bulkActionForm = $( '#bulk-action-form' ), $filesystemForm = $( '#request-filesystem-credentials-form' ), $filesystemModal = $( '#request-filesystem-credentials-dialog' ), $pluginSearch = $( '.plugins-php .wp-filter-search' ), $pluginInstallSearch = $( '.plugin-install-php .wp-filter-search' ); settings = _.extend( settings, window._wpUpdatesItemCounts || {} ); if ( settings.totals ) { wp.updates.refreshCount(); } /* * Whether a user needs to submit filesystem credentials. * * This is based on whether the form was output on the page server-side. * * @see {wp_print_request_filesystem_credentials_modal() in PHP} */ wp.updates.shouldRequestFilesystemCredentials = $filesystemModal.length > 0; /** * File system credentials form submit noop-er / handler. * * @since 4.2.0 */ $filesystemModal.on( 'submit', 'form', function( event ) { event.preventDefault(); // Persist the credentials input by the user for the duration of the page load. wp.updates.filesystemCredentials.ftp.hostname = $( '#hostname' ).val(); wp.updates.filesystemCredentials.ftp.username = $( '#username' ).val(); wp.updates.filesystemCredentials.ftp.password = $( '#password' ).val(); wp.updates.filesystemCredentials.ftp.connectionType = $( 'input[name="connection_type"]:checked' ).val(); wp.updates.filesystemCredentials.ssh.publicKey = $( '#public_key' ).val(); wp.updates.filesystemCredentials.ssh.privateKey = $( '#private_key' ).val(); wp.updates.filesystemCredentials.fsNonce = $( '#_fs_nonce' ).val(); wp.updates.filesystemCredentials.available = true; // Unlock and invoke the queue. wp.updates.ajaxLocked = false; wp.updates.queueChecker(); wp.updates.requestForCredentialsModalClose(); } ); /** * Closes the request credentials modal when clicking the 'Cancel' button or outside of the modal. * * @since 4.2.0 */ $filesystemModal.on( 'click', '[data-js-action="close"], .notification-dialog-background', wp.updates.requestForCredentialsModalCancel ); /** * Hide SSH fields when not selected. * * @since 4.2.0 */ $filesystemForm.on( 'change', 'input[name="connection_type"]', function() { $( '#ssh-keys' ).toggleClass( 'hidden', ( 'ssh' !== $( this ).val() ) ); } ).trigger( 'change' ); /** * Handles events after the credential modal was closed. * * @since 4.6.0 * * @param {Event} event Event interface. * @param {string} job The install/update.delete request. */ $document.on( 'credential-modal-cancel', function( event, job ) { var $updatingMessage = $( '.updating-message' ), $message, originalText; if ( 'import' === pagenow ) { $updatingMessage.removeClass( 'updating-message' ); } else if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) { if ( 'update-plugin' === job.action ) { $message = $( 'tr[data-plugin="' + job.data.plugin + '"]' ).find( '.update-message' ); } else if ( 'delete-plugin' === job.action ) { $message = $( '[data-plugin="' + job.data.plugin + '"]' ).find( '.row-actions a.delete' ); } } else if ( 'themes' === pagenow || 'themes-network' === pagenow ) { if ( 'update-theme' === job.action ) { $message = $( '[data-slug="' + job.data.slug + '"]' ).find( '.update-message' ); } else if ( 'delete-theme' === job.action && 'themes-network' === pagenow ) { $message = $( '[data-slug="' + job.data.slug + '"]' ).find( '.row-actions a.delete' ); } else if ( 'delete-theme' === job.action && 'themes' === pagenow ) { $message = $( '.theme-actions .delete-theme' ); } } else { $message = $updatingMessage; } if ( $message && $message.hasClass( 'updating-message' ) ) { originalText = $message.data( 'originaltext' ); if ( 'undefined' === typeof originalText ) { originalText = $( '

' ).html( $message.find( 'p' ).data( 'originaltext' ) ); } $message .removeClass( 'updating-message' ) .html( originalText ); if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) { if ( 'update-plugin' === job.action ) { $message.attr( 'aria-label', sprintf( /* translators: %s: Plugin name and version. */ _x( 'Update %s now', 'plugin' ), $message.data( 'name' ) ) ); } else if ( 'install-plugin' === job.action ) { $message.attr( 'aria-label', sprintf( /* translators: %s: Plugin name. */ _x( 'Install %s now', 'plugin' ), $message.data( 'name' ) ) ); } } } wp.a11y.speak( __( 'Update canceled.' ) ); } ); /** * Click handler for plugin updates in List Table view. * * @since 4.2.0 * * @param {Event} event Event interface. */ $bulkActionForm.on( 'click', '[data-plugin] .update-link', function( event ) { var $message = $( event.target ), $pluginRow = $message.parents( 'tr' ); event.preventDefault(); if ( $message.hasClass( 'updating-message' ) || $message.hasClass( 'button-disabled' ) ) { return; } wp.updates.maybeRequestFilesystemCredentials( event ); // Return the user to the input box of the plugin's table row after closing the modal. wp.updates.$elToReturnFocusToFromCredentialsModal = $pluginRow.find( '.check-column input' ); wp.updates.updatePlugin( { plugin: $pluginRow.data( 'plugin' ), slug: $pluginRow.data( 'slug' ) } ); } ); /** * Click handler for plugin updates in plugin install view. * * @since 4.2.0 * * @param {Event} event Event interface. */ $pluginFilter.on( 'click', '.update-now', function( event ) { var $button = $( event.target ); event.preventDefault(); if ( $button.hasClass( 'updating-message' ) || $button.hasClass( 'button-disabled' ) ) { return; } wp.updates.maybeRequestFilesystemCredentials( event ); wp.updates.updatePlugin( { plugin: $button.data( 'plugin' ), slug: $button.data( 'slug' ) } ); } ); /** * Click handler for plugin installs in plugin install view. * * @since 4.6.0 * * @param {Event} event Event interface. */ $pluginFilter.on( 'click', '.install-now', function( event ) { var $button = $( event.target ); event.preventDefault(); if ( $button.hasClass( 'updating-message' ) || $button.hasClass( 'button-disabled' ) ) { return; } if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) { wp.updates.requestFilesystemCredentials( event ); $document.on( 'credential-modal-cancel', function() { var $message = $( '.install-now.updating-message' ); $message .removeClass( 'updating-message' ) .text( _x( 'Install Now', 'plugin' ) ); wp.a11y.speak( __( 'Update canceled.' ) ); } ); } wp.updates.installPlugin( { slug: $button.data( 'slug' ) } ); } ); /** * Click handler for plugin activations in plugin activation modal view. * * @since 6.5.0 * @since 6.5.4 Redirect the parent window to the activation URL. * * @param {Event} event Event interface. */ $document.on( 'click', '#plugin-information-footer .activate-now', function( event ) { event.preventDefault(); window.parent.location.href = $( event.target ).attr( 'href' ); }); /** * Click handler for importer plugins installs in the Import screen. * * @since 4.6.0 * * @param {Event} event Event interface. */ $document.on( 'click', '.importer-item .install-now', function( event ) { var $button = $( event.target ), pluginName = $( this ).data( 'name' ); event.preventDefault(); if ( $button.hasClass( 'updating-message' ) ) { return; } if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) { wp.updates.requestFilesystemCredentials( event ); $document.on( 'credential-modal-cancel', function() { $button .removeClass( 'updating-message' ) .attr( 'aria-label', sprintf( /* translators: %s: Plugin name. */ _x( 'Install %s now', 'plugin' ), pluginName ) ) .text( _x( 'Install Now', 'plugin' ) ); wp.a11y.speak( __( 'Update canceled.' ) ); } ); } wp.updates.installPlugin( { slug: $button.data( 'slug' ), pagenow: pagenow, success: wp.updates.installImporterSuccess, error: wp.updates.installImporterError } ); } ); /** * Click handler for plugin deletions. * * @since 4.6.0 * * @param {Event} event Event interface. */ $bulkActionForm.on( 'click', '[data-plugin] a.delete', function( event ) { var $pluginRow = $( event.target ).parents( 'tr' ), confirmMessage; if ( $pluginRow.hasClass( 'is-uninstallable' ) ) { confirmMessage = sprintf( /* translators: %s: Plugin name. */ __( 'Are you sure you want to delete %s and its data?' ), $pluginRow.find( '.plugin-title strong' ).text() ); } else { confirmMessage = sprintf( /* translators: %s: Plugin name. */ __( 'Are you sure you want to delete %s?' ), $pluginRow.find( '.plugin-title strong' ).text() ); } event.preventDefault(); if ( ! window.confirm( confirmMessage ) ) { return; } wp.updates.maybeRequestFilesystemCredentials( event ); wp.updates.deletePlugin( { plugin: $pluginRow.data( 'plugin' ), slug: $pluginRow.data( 'slug' ) } ); } ); /** * Click handler for theme updates. * * @since 4.6.0 * * @param {Event} event Event interface. */ $document.on( 'click', '.themes-php.network-admin .update-link', function( event ) { var $message = $( event.target ), $themeRow = $message.parents( 'tr' ); event.preventDefault(); if ( $message.hasClass( 'updating-message' ) || $message.hasClass( 'button-disabled' ) ) { return; } wp.updates.maybeRequestFilesystemCredentials( event ); // Return the user to the input box of the theme's table row after closing the modal. wp.updates.$elToReturnFocusToFromCredentialsModal = $themeRow.find( '.check-column input' ); wp.updates.updateTheme( { slug: $themeRow.data( 'slug' ) } ); } ); /** * Click handler for theme deletions. * * @since 4.6.0 * * @param {Event} event Event interface. */ $document.on( 'click', '.themes-php.network-admin a.delete', function( event ) { var $themeRow = $( event.target ).parents( 'tr' ), confirmMessage = sprintf( /* translators: %s: Theme name. */ __( 'Are you sure you want to delete %s?' ), $themeRow.find( '.theme-title strong' ).text() ); event.preventDefault(); if ( ! window.confirm( confirmMessage ) ) { return; } wp.updates.maybeRequestFilesystemCredentials( event ); wp.updates.deleteTheme( { slug: $themeRow.data( 'slug' ) } ); } ); /** * Bulk action handler for plugins and themes. * * Handles both deletions and updates. * * @since 4.6.0 * * @param {Event} event Event interface. */ $bulkActionForm.on( 'click', '[type="submit"]:not([name="clear-recent-list"])', function( event ) { var bulkAction = $( event.target ).siblings( 'select' ).val(), itemsSelected = $bulkActionForm.find( 'input[name="checked[]"]:checked' ), success = 0, error = 0, errorMessages = [], type, action; // Determine which type of item we're dealing with. switch ( pagenow ) { case 'plugins': case 'plugins-network': type = 'plugin'; break; case 'themes-network': type = 'theme'; break; default: return; } // Bail if there were no items selected. if ( ! itemsSelected.length ) { bulkAction = false; } // Determine the type of request we're dealing with. switch ( bulkAction ) { case 'update-selected': action = bulkAction.replace( 'selected', type ); break; case 'delete-selected': var confirmMessage = 'plugin' === type ? __( 'Are you sure you want to delete the selected plugins and their data?' ) : __( 'Caution: These themes may be active on other sites in the network. Are you sure you want to proceed?' ); if ( ! window.confirm( confirmMessage ) ) { event.preventDefault(); return; } action = bulkAction.replace( 'selected', type ); break; default: return; } wp.updates.maybeRequestFilesystemCredentials( event ); event.preventDefault(); // Un-check the bulk checkboxes. $bulkActionForm.find( '.manage-column [type="checkbox"]' ).prop( 'checked', false ); $document.trigger( 'wp-' + type + '-bulk-' + bulkAction, itemsSelected ); // Find all the checkboxes which have been checked. itemsSelected.each( function( index, element ) { var $checkbox = $( element ), $itemRow = $checkbox.parents( 'tr' ); // Only add update-able items to the update queue. if ( 'update-selected' === bulkAction && ( ! $itemRow.hasClass( 'update' ) || $itemRow.find( 'notice-error' ).length ) ) { // Un-check the box. $checkbox.prop( 'checked', false ); return; } // Don't add items to the update queue again, even if the user clicks the update button several times. if ( 'update-selected' === bulkAction && $itemRow.hasClass( 'is-enqueued' ) ) { return; } $itemRow.addClass( 'is-enqueued' ); // Add it to the queue. wp.updates.queue.push( { action: action, data: { plugin: $itemRow.data( 'plugin' ), slug: $itemRow.data( 'slug' ) } } ); } ); // Display bulk notification for updates of any kind. $document.on( 'wp-plugin-update-success wp-plugin-update-error wp-theme-update-success wp-theme-update-error', function( event, response ) { var $itemRow = $( '[data-slug="' + response.slug + '"]' ), $bulkActionNotice, itemName; if ( 'wp-' + response.update + '-update-success' === event.type ) { success++; } else { itemName = response.pluginName ? response.pluginName : $itemRow.find( '.column-primary strong' ).text(); error++; errorMessages.push( itemName + ': ' + response.errorMessage ); } $itemRow.find( 'input[name="checked[]"]:checked' ).prop( 'checked', false ); wp.updates.adminNotice = wp.template( 'wp-bulk-updates-admin-notice' ); var successMessage = null; if ( success ) { if ( 'plugin' === response.update ) { successMessage = sprintf( /* translators: %s: Number of plugins. */ _n( '%s plugin successfully updated.', '%s plugins successfully updated.', success ), success ); } else { successMessage = sprintf( /* translators: %s: Number of themes. */ _n( '%s theme successfully updated.', '%s themes successfully updated.', success ), success ); } } var errorMessage = null; if ( error ) { errorMessage = sprintf( /* translators: %s: Number of failed updates. */ _n( '%s update failed.', '%s updates failed.', error ), error ); } wp.updates.addAdminNotice( { id: 'bulk-action-notice', className: 'bulk-action-notice', successMessage: successMessage, errorMessage: errorMessage, errorMessages: errorMessages, type: response.update } ); $bulkActionNotice = $( '#bulk-action-notice' ).on( 'click', 'button', function() { // $( this ) is the clicked button, no need to get it again. $( this ) .toggleClass( 'bulk-action-errors-collapsed' ) .attr( 'aria-expanded', ! $( this ).hasClass( 'bulk-action-errors-collapsed' ) ); // Show the errors list. $bulkActionNotice.find( '.bulk-action-errors' ).toggleClass( 'hidden' ); } ); if ( error > 0 && ! wp.updates.queue.length ) { $( 'html, body' ).animate( { scrollTop: 0 } ); } } ); // Reset admin notice template after #bulk-action-notice was added. $document.on( 'wp-updates-notice-added', function() { wp.updates.adminNotice = wp.template( 'wp-updates-admin-notice' ); } ); // Check the queue, now that the event handlers have been added. wp.updates.queueChecker(); } ); if ( $pluginInstallSearch.length ) { $pluginInstallSearch.attr( 'aria-describedby', 'live-search-desc' ); } // Track the previous search string length. var previousSearchStringLength = 0; wp.updates.shouldSearch = function( searchStringLength ) { var shouldSearch = searchStringLength >= wp.updates.searchMinCharacters || previousSearchStringLength > wp.updates.searchMinCharacters; previousSearchStringLength = searchStringLength; return shouldSearch; }; /** * Handles changes to the plugin search box on the new-plugin page, * searching the repository dynamically. * * @since 4.6.0 */ $pluginInstallSearch.on( 'keyup input', _.debounce( function( event, eventtype ) { var $searchTab = $( '.plugin-install-search' ), data, searchLocation, searchStringLength = $pluginInstallSearch.val().length; data = { _ajax_nonce: wp.updates.ajaxNonce, s: encodeURIComponent( event.target.value ), tab: 'search', type: $( '#typeselector' ).val(), pagenow: pagenow }; searchLocation = location.href.split( '?' )[ 0 ] + '?' + $.param( _.omit( data, [ '_ajax_nonce', 'pagenow' ] ) ); // Set the autocomplete attribute, turning off autocomplete 1 character before ajax search kicks in. if ( wp.updates.shouldSearch( searchStringLength ) ) { $pluginInstallSearch.attr( 'autocomplete', 'off' ); } else { $pluginInstallSearch.attr( 'autocomplete', 'on' ); return; } // Clear on escape. if ( 'keyup' === event.type && 27 === event.which ) { event.target.value = ''; } if ( wp.updates.searchTerm === data.s && 'typechange' !== eventtype ) { return; } else { $pluginFilter.empty(); wp.updates.searchTerm = data.s; } if ( window.history && window.history.replaceState ) { window.history.replaceState( null, '', searchLocation ); } if ( ! $searchTab.length ) { $searchTab = $( '

  • ").addClass("customize-control").addClass("customize-control-"+o).append(e)).find("> .widget-icon").remove(),r.get("is_multi")&&(e.find('input[name="widget_number"]').val(l),e.find('input[name="multi_number"]').val(l)),n=e.find('[name="widget-id"]').val(),e.hide(),t="widget_"+r.get("id_base"),r.get("is_multi")&&(t+="["+l+"]"),e.attr("id","customize-control-"+t.replace(/\]/g,"").replace(/\[/g,"-")),(i=p.has(t))||(d={transport:p.Widgets.data.selectiveRefreshableWidgets[r.get("id_base")]?"postMessage":"refresh",previewer:this.setting.previewer},p.create(t,t,"",d).set({})),d=p.controlConstructor[o],s=new d(t,{settings:{default:t},content:e,sidebar_id:a.params.sidebar_id,widget_id:n,widget_id_base:r.get("id_base"),type:o,is_new:!i,width:r.get("width"),height:r.get("height"),is_wide:r.get("is_wide")}),p.control.add(s),p.each(function(e){var t,i;e.id!==a.setting.id&&0===e.id.indexOf("sidebars_widgets[")&&(t=e().slice(),-1!==(i=_.indexOf(t,n)))&&(t.splice(i),e(t))}),d=this.setting().slice(),-1===_.indexOf(d,n)&&(d.push(n),this.setting(d)),e.slideDown(function(){i&&s.updateWidget({instance:s.setting()})}),s)}}),h.extend(p.panelConstructor,{widgets:p.Widgets.WidgetsPanel}),h.extend(p.sectionConstructor,{sidebar:p.Widgets.SidebarSection}),h.extend(p.controlConstructor,{widget_form:p.Widgets.WidgetControl,sidebar_widgets:p.Widgets.SidebarControl}),p.bind("ready",function(){p.Widgets.availableWidgetsPanel=new p.Widgets.AvailableWidgetsPanelView({collection:p.Widgets.availableWidgets}),p.previewer.bind("highlight-widget-control",p.Widgets.highlightWidgetFormControl),p.previewer.bind("focus-widget-control",p.Widgets.focusWidgetFormControl)}),p.Widgets.highlightWidgetFormControl=function(e){e=p.Widgets.getWidgetFormControlForWidget(e);e&&e.highlightSectionAndControl()},p.Widgets.focusWidgetFormControl=function(e){e=p.Widgets.getWidgetFormControlForWidget(e);e&&e.focus()},p.Widgets.getSidebarWidgetControlContainingWidget=function(t){var i=null;return p.control.each(function(e){"sidebar_widgets"===e.params.type&&-1!==_.indexOf(e.setting(),t)&&(i=e)}),i},p.Widgets.getWidgetFormControlForWidget=function(t){var i=null;return p.control.each(function(e){"widget_form"===e.params.type&&e.params.widget_id===t&&(i=e)}),i},h(document).on("widget-added",function(e,t){var s,d,i,n=c(t.find("> .widget-inside > .form > .widget-id").val());"nav_menu"===n.id_base&&(s=p.control("widget_nav_menu["+String(n.number)+"]"))&&(d=t.find('select[name*="nav_menu"]'),i=t.find(".edit-selected-nav-menu > button"),0!==d.length)&&0!==i.length&&(d.on("change",function(){p.section.has("nav_menu["+d.val()+"]")?i.parent().show():i.parent().hide()}),i.on("click",function(){var i,n,e=p.section("nav_menu["+d.val()+"]");e&&(n=s,(i=e).focus(),i.expanded.bind(function e(t){t||(i.expanded.unbind(e),n.focus())}))}))}))}(window.wp,jQuery);PK!G cc site-icon.jsnu&1i/** * Handle the site icon setting in options-general.php. * * @since 6.5.0 * @output wp-admin/js/site-icon.js */ /* global jQuery, wp */ ( function ( $ ) { var $chooseButton = $( '#choose-from-library-button' ), $iconPreview = $( '#site-icon-preview' ), $browserIconPreview = $( '#browser-icon-preview' ), $appIconPreview = $( '#app-icon-preview' ), $hiddenDataField = $( '#site_icon_hidden_field' ), $removeButton = $( '#js-remove-site-icon' ), frame; /** * Calculate image selection options based on the attachment dimensions. * * @since 6.5.0 * * @param {Object} attachment The attachment object representing the image. * @return {Object} The image selection options. */ function calculateImageSelectOptions( attachment ) { var realWidth = attachment.get( 'width' ), realHeight = attachment.get( 'height' ), xInit = 512, yInit = 512, ratio = xInit / yInit, xImg = xInit, yImg = yInit, x1, y1, imgSelectOptions; if ( realWidth / realHeight > ratio ) { yInit = realHeight; xInit = yInit * ratio; } else { xInit = realWidth; yInit = xInit / ratio; } x1 = ( realWidth - xInit ) / 2; y1 = ( realHeight - yInit ) / 2; imgSelectOptions = { aspectRatio: xInit + ':' + yInit, 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, }; return imgSelectOptions; } /** * Initializes the media frame for selecting or cropping an image. * * @since 6.5.0 */ $chooseButton.on( 'click', function () { var $el = $( this ); // Create the media frame. frame = wp.media( { button: { // Set the text of the button. text: $el.data( 'update' ), // Don't close, we might need to crop. close: false, }, states: [ new wp.media.controller.Library( { title: $el.data( 'choose-text' ), library: wp.media.query( { type: 'image' } ), date: false, suggestedWidth: $el.data( 'size' ), suggestedHeight: $el.data( 'size' ), } ), new wp.media.controller.SiteIconCropper( { control: { params: { width: $el.data( 'size' ), height: $el.data( 'size' ), }, }, imgSelectOptions: calculateImageSelectOptions, } ), ], } ); frame.on( 'cropped', function ( attachment ) { $hiddenDataField.val( attachment.id ); switchToUpdate( attachment ); frame.close(); // Start over with a frame that is so fresh and so clean clean. frame = null; } ); // When an image is selected, run a callback. frame.on( 'select', function () { // Grab the selected attachment. var attachment = frame.state().get( 'selection' ).first(); if ( attachment.attributes.height === $el.data( 'size' ) && $el.data( 'size' ) === attachment.attributes.width ) { switchToUpdate( attachment.attributes ); frame.close(); // Set the value of the hidden input to the attachment id. $hiddenDataField.val( attachment.id ); } else { frame.setState( 'cropper' ); } } ); frame.open(); } ); /** * Update the UI when a site icon is selected. * * @since 6.5.0 * * @param {array} attributes The attributes for the attachment. */ function switchToUpdate( attributes ) { var i18nAppAlternativeString, i18nBrowserAlternativeString; if ( attributes.alt ) { i18nAppAlternativeString = wp.i18n.sprintf( /* translators: %s: The selected image alt text. */ wp.i18n.__( 'App icon preview: Current image: %s' ), attributes.alt ); i18nBrowserAlternativeString = wp.i18n.sprintf( /* translators: %s: The selected image alt text. */ wp.i18n.__( 'Browser icon preview: Current image: %s' ), attributes.alt ); } else { i18nAppAlternativeString = wp.i18n.sprintf( /* translators: %s: The selected image filename. */ wp.i18n.__( 'App icon preview: The current image has no alternative text. The file name is: %s' ), attributes.filename ); i18nBrowserAlternativeString = wp.i18n.sprintf( /* translators: %s: The selected image filename. */ wp.i18n.__( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ), attributes.filename ); } // Set site-icon-img src and alternative text to app icon preview. $appIconPreview.attr( { src: attributes.url, alt: i18nAppAlternativeString, } ); // Set site-icon-img src and alternative text to browser preview. $browserIconPreview.attr( { src: attributes.url, alt: i18nBrowserAlternativeString, } ); // Remove hidden class from icon preview div and remove button. $iconPreview.removeClass( 'hidden' ); $removeButton.removeClass( 'hidden' ); // Set the global CSS variable for --site-icon-url to the selected image URL. document.documentElement.style.setProperty( '--site-icon-url', 'url(' + attributes.url + ')' ); // If the choose button is not in the update state, swap the classes. if ( $chooseButton.attr( 'data-state' ) !== '1' ) { $chooseButton.attr( { class: $chooseButton.attr( 'data-alt-classes' ), 'data-alt-classes': $chooseButton.attr( 'class' ), 'data-state': '1', } ); } // Swap the text of the choose button. $chooseButton.text( $chooseButton.attr( 'data-update-text' ) ); } /** * Handles the click event of the remove button. * * @since 6.5.0 */ $removeButton.on( 'click', function () { $hiddenDataField.val( 'false' ); $( this ).toggleClass( 'hidden' ); $iconPreview.toggleClass( 'hidden' ); $browserIconPreview.attr( { src: '', alt: '', } ); $appIconPreview.attr( { src: '', alt: '', } ); /** * Resets state to the button, for correct visual style and state. * Updates the text of the button. * Sets focus state to the button. */ $chooseButton .attr( { class: $chooseButton.attr( 'data-alt-classes' ), 'data-alt-classes': $chooseButton.attr( 'class' ), 'data-state': '', } ) .text( $chooseButton.attr( 'data-choose-text' ) ) .trigger( 'focus' ); } ); } )( jQuery ); PK!H㋽||customize-controls.jsnu&1i/** * @output wp-admin/js/customize-controls.js */ /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console, confirm */ (function( exports, $ ){ var Container, focus, normalizedTransitionendEventName, api = wp.customize; var reducedMotionMediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' ); var isReducedMotion = reducedMotionMediaQuery.matches; reducedMotionMediaQuery.addEventListener( 'change' , function handleReducedMotionChange( event ) { isReducedMotion = event.matches; }); api.OverlayNotification = api.Notification.extend(/** @lends wp.customize.OverlayNotification.prototype */{ /** * Whether the notification should show a loading spinner. * * @since 4.9.0 * @var {boolean} */ loading: false, /** * A notification that is displayed in a full-screen overlay. * * @constructs wp.customize.OverlayNotification * @augments wp.customize.Notification * * @since 4.9.0 * * @param {string} code - Code. * @param {Object} params - Params. */ initialize: function( code, params ) { var notification = this; api.Notification.prototype.initialize.call( notification, code, params ); notification.containerClasses += ' notification-overlay'; if ( notification.loading ) { notification.containerClasses += ' notification-loading'; } }, /** * Render notification. * * @since 4.9.0 * * @return {jQuery} Notification container. */ render: function() { var li = api.Notification.prototype.render.call( this ); li.on( 'keydown', _.bind( this.handleEscape, this ) ); return li; }, /** * Stop propagation on escape key presses, but also dismiss notification if it is dismissible. * * @since 4.9.0 * * @param {jQuery.Event} event - Event. * @return {void} */ handleEscape: function( event ) { var notification = this; if ( 27 === event.which ) { event.stopPropagation(); if ( notification.dismissible && notification.parent ) { notification.parent.remove( notification.code ); } } } }); api.Notifications = api.Values.extend(/** @lends wp.customize.Notifications.prototype */{ /** * Whether the alternative style should be used. * * @since 4.9.0 * @type {boolean} */ alt: false, /** * The default constructor for items of the collection. * * @since 4.9.0 * @type {object} */ defaultConstructor: api.Notification, /** * A collection of observable notifications. * * @since 4.9.0 * * @constructs wp.customize.Notifications * @augments wp.customize.Values * * @param {Object} options - Options. * @param {jQuery} [options.container] - Container element for notifications. This can be injected later. * @param {boolean} [options.alt] - Whether alternative style should be used when rendering notifications. * * @return {void} */ initialize: function( options ) { var collection = this; api.Values.prototype.initialize.call( collection, options ); _.bindAll( collection, 'constrainFocus' ); // Keep track of the order in which the notifications were added for sorting purposes. collection._addedIncrement = 0; collection._addedOrder = {}; // Trigger change event when notification is added or removed. collection.bind( 'add', function( notification ) { collection.trigger( 'change', notification ); }); collection.bind( 'removed', function( notification ) { collection.trigger( 'change', notification ); }); }, /** * Get the number of notifications added. * * @since 4.9.0 * @return {number} Count of notifications. */ count: function() { return _.size( this._value ); }, /** * Add notification to the collection. * * @since 4.9.0 * * @param {string|wp.customize.Notification} notification - Notification object to add. Alternatively code may be supplied, and in that case the second notificationObject argument must be supplied. * @param {wp.customize.Notification} [notificationObject] - Notification to add when first argument is the code string. * @return {wp.customize.Notification} Added notification (or existing instance if it was already added). */ add: function( notification, notificationObject ) { var collection = this, code, instance; if ( 'string' === typeof notification ) { code = notification; instance = notificationObject; } else { code = notification.code; instance = notification; } if ( ! collection.has( code ) ) { collection._addedIncrement += 1; collection._addedOrder[ code ] = collection._addedIncrement; } return api.Values.prototype.add.call( collection, code, instance ); }, /** * Add notification to the collection. * * @since 4.9.0 * @param {string} code - Notification code to remove. * @return {api.Notification} Added instance (or existing instance if it was already added). */ remove: function( code ) { var collection = this; delete collection._addedOrder[ code ]; return api.Values.prototype.remove.call( this, code ); }, /** * Get list of notifications. * * Notifications may be sorted by type followed by added time. * * @since 4.9.0 * @param {Object} args - Args. * @param {boolean} [args.sort=false] - Whether to return the notifications sorted. * @return {Array.} 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 button, .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 button' ).first(), expand, panel; if ( expanded && ! content.hasClass( 'open' ) ) { if ( args.unchanged ) { expand = args.completeCallback; } else { expand = function() { section._animateChangeExpanded( function() { 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() { 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 infinite 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.parents( '.themes-filter-bar' ).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'; }) .parents( '.themes-filter-bar' ).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 button' ).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() { 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() { 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 button' ).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 button' ), 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() { 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.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-wrapper' ); 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 instantiating 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-wrapper' ); 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 ), requiredRatio = xInit / yInit, realRatio = realWidth / realHeight, xImg = xInit, yImg = yInit, x1, y1, imgSelectOptions; controller.set( 'hasRequiredAspectRatio', control.hasRequiredAspectRatio( requiredRatio, realRatio ) ); controller.set( 'suggestedCropSize', { width: realWidth, height: realHeight, x1: 0, y1: 0, x2: xInit, y2: yInit } ); controller.set( 'canSkipCrop', ! control.mustBeCropped( flexWidth, flexHeight, xInit, yInit, realWidth, realHeight ) ); if ( realRatio > requiredRatio ) { yInit = realHeight; xInit = yInit * requiredRatio; } else { xInit = realWidth; yInit = xInit / requiredRatio; } 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 Width is flexible. * @param {boolean} flexH Height is flexible. * @param {number} dstW Required width. * @param {number} dstH Required height. * @param {number} imgW Provided image's width. * @param {number} imgH Provided image's height. * @return {boolean} Whether cropping is required. */ 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; }, /** * Check if the image's aspect ratio essentially matches the required aspect ratio. * * Floating point precision is low, so this allows a small tolerance. This * tolerance allows for images over 100,000 px on either side to still trigger * the cropping flow. * * @param {number} requiredRatio Required image ratio. * @param {number} realRatio Provided image ratio. * @return {boolean} Whether the image has the required aspect ratio. */ hasRequiredAspectRatio: function ( requiredRatio, realRatio ) { if ( Math.abs( requiredRatio - realRatio ) < 0.000001 ) { return true; } return false; }, /** * 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 = $( ''),void 0===a&&(a=t.renderHtml(e)),e.statusbar&&(s=e.statusbar.renderHtml()),'
      '+o+'
      '+a+"
      "+s+"
      "},fullscreen:function(e){var n,t,i=this,r=_.document.documentElement,o=i.classPrefix;if(e!==i._fullscreen)if(ye(_.window).on("resize",function(){var e;if(i._fullscreen)if(n)i._timer||(i._timer=u.setTimeout(function(){var e=we.getWindowSize();i.moveTo(0,0).resizeTo(e.w,e.h),i._timer=0},50));else{e=(new Date).getTime();var t=we.getWindowSize();i.moveTo(0,0).resizeTo(t.w,t.h),50<(new Date).getTime()-e&&(n=!0)}}),t=i.layoutRect(),i._fullscreen=e){i._initial={x:t.x,y:t.y,w:t.w,h:t.h},i.borderBox=Me("0"),i.getEl("head").style.display="none",t.deltaH-=t.headerH+2,ye([r,_.document.body]).addClass(o+"fullscreen"),i.classes.add("fullscreen");var s=we.getWindowSize();i.moveTo(0,0).resizeTo(s.w,s.h)}else i.borderBox=Me(i.settings.border),i.getEl("head").style.display="",t.deltaH+=t.headerH,ye([r,_.document.body]).removeClass(o+"fullscreen"),i.classes.remove("fullscreen"),i.moveTo(i._initial.x,i._initial.y).resizeTo(i._initial.w,i._initial.h);return i.reflow()},postRender:function(){var t,n=this;setTimeout(function(){n.classes.add("in"),n.fire("open")},0),n._super(),n.statusbar&&n.statusbar.postRender(),n.focus(),this.dragHelper=new ct(n._id+"-dragh",{start:function(){t={x:n.layoutRect().x,y:n.layoutRect().y}},drag:function(e){n.moveTo(t.x+e.deltaX,t.y+e.deltaY)}}),n.on("submit",function(e){e.isDefaultPrevented()||n.close()}),At.push(n),Lt(!0)},submit:function(){return this.fire("submit",{data:this.toJSON()})},remove:function(){var e,t=this;for(t.dragHelper.destroy(),t._super(),t.statusbar&&this.statusbar.remove(),zt(t.classPrefix,!1),e=At.length;e--;)At[e]===t&&At.splice(e,1);Lt(0'+this._super(e)}}),jt=Nt.extend({Defaults:{classes:"widget btn",role:"button"},init:function(e){var t,n=this;n._super(e),e=n.settings,t=n.settings.size,n.on("click mousedown",function(e){e.preventDefault()}),n.on("touchstart",function(e){n.fire("click",e),e.preventDefault()}),e.subtype&&n.classes.add(e.subtype),t&&n.classes.add("btn-"+t),e.icon&&n.icon(e.icon)},icon:function(e){return arguments.length?(this.state.set("icon",e),this):this.state.get("icon")},repaint:function(){var e,t=this.getEl().firstChild;t&&((e=t.style).width=e.height="100%"),this._super()},renderHtml:function(){var e,t,n=this,i=n._id,r=n.classPrefix,o=n.state.get("icon"),s=n.state.get("text"),a="",l=n.settings;return(e=l.image)?(o="none","string"!=typeof e&&(e=_.window.getSelection?e[0]:e[1]),e=" style=\"background-image: url('"+e+"')\""):e="",s&&(n.classes.add("btn-has-text"),a=''+n.encode(s)+""),o=o?r+"ico "+r+"i-"+o:"",t="boolean"==typeof l.active?' aria-pressed="'+l.active+'"':"",'
      "},bindStates:function(){var o=this,n=o.$,i=o.classPrefix+"txt";function s(e){var t=n("span."+i,o.getEl());e?(t[0]||(n("button:first",o.getEl()).append(''),t=n("span."+i,o.getEl())),t.html(o.encode(e))):t.remove(),o.classes.toggle("btn-has-text",!!e)}return o.state.on("change:text",function(e){s(e.value)}),o.state.on("change:icon",function(e){var t=e.value,n=o.classPrefix;t=(o.settings.icon=t)?n+"ico "+n+"i-"+o.settings.icon:"";var i=o.getEl().firstChild,r=i.getElementsByTagName("i")[0];t?(r&&r===i.firstChild||(r=_.document.createElement("i"),i.insertBefore(r,i.firstChild)),r.className=t):r&&i.removeChild(r),s(o.state.get("text"))}),o._super()}}),Jt=jt.extend({init:function(e){e=w.extend({text:"Browse...",multiple:!1,accept:null},e),this._super(e),this.classes.add("browsebutton"),e.multiple&&this.classes.add("multiple")},postRender:function(){var n=this,t=we.create("input",{type:"file",id:n._id+"-browse",accept:n.settings.accept});n._super(),ye(t).on("change",function(e){var t=e.target.files;n.value=function(){return t.length?n.settings.multiple?t:t[0]:null},e.preventDefault(),t.length&&n.fire("change",e)}),ye(t).on("click",function(e){e.stopPropagation()}),ye(n.getEl("button")).on("click touchstart",function(e){e.stopPropagation(),t.click(),e.preventDefault()}),n.getEl().appendChild(t)},remove:function(){ye(this.getEl("button")).off(),ye(this.getEl("input")).off(),this._super()}}),Gt=lt.extend({Defaults:{defaultType:"button",role:"group"},renderHtml:function(){var e=this,t=e._layout;return e.classes.add("btn-group"),e.preRender(),t.preRender(e),'
      '+(e.settings.html||"")+t.renderHtml(e)+"
      "}}),Kt=Nt.extend({Defaults:{classes:"checkbox",role:"checkbox",checked:!1},init:function(e){var t=this;t._super(e),t.on("click mousedown",function(e){e.preventDefault()}),t.on("click",function(e){e.preventDefault(),t.disabled()||t.checked(!t.checked())}),t.checked(t.settings.checked)},checked:function(e){return arguments.length?(this.state.set("checked",e),this):this.state.get("checked")},value:function(e){return arguments.length?this.checked(e):this.checked()},renderHtml:function(){var e=this,t=e._id,n=e.classPrefix;return'
      '+e.encode(e.state.get("text"))+"
      "},bindStates:function(){var o=this;function t(e){o.classes.toggle("checked",e),o.aria("checked",e)}return o.state.on("change:text",function(e){o.getEl("al").firstChild.data=o.translate(e.value)}),o.state.on("change:checked change:value",function(e){o.fire("change"),t(e.value)}),o.state.on("change:icon",function(e){var t=e.value,n=o.classPrefix;if(void 0===t)return o.settings.icon;t=(o.settings.icon=t)?n+"ico "+n+"i-"+o.settings.icon:"";var i=o.getEl().firstChild,r=i.getElementsByTagName("i")[0];t?(r&&r===i.firstChild||(r=_.document.createElement("i"),i.insertBefore(r,i.firstChild)),r.className=t):r&&i.removeChild(r)}),o.state.get("checked")&&t(!0),o._super()}}),Zt=tinymce.util.Tools.resolve("tinymce.util.VK"),Qt=Nt.extend({init:function(i){var r=this;r._super(i),i=r.settings,r.classes.add("combobox"),r.subinput=!0,r.ariaTarget="inp",i.menu=i.menu||i.values,i.menu&&(i.icon="caret"),r.on("click",function(e){var t=e.target,n=r.getEl();if(ye.contains(n,t)||t===n)for(;t&&t!==n;)t.id&&-1!==t.id.indexOf("-open")&&(r.fire("action"),i.menu&&(r.showMenu(),e.aria&&r.menu.items()[0].focus())),t=t.parentNode}),r.on("keydown",function(e){var t;13===e.keyCode&&"INPUT"===e.target.nodeName&&(e.preventDefault(),r.parents().reverse().each(function(e){if(e.toJSON)return t=e,!1}),r.fire("submit",{data:t.toJSON()}))}),r.on("keyup",function(e){if("INPUT"===e.target.nodeName){var t=r.state.get("value"),n=e.target.value;n!==t&&(r.state.set("value",n),r.fire("autocomplete",e))}}),r.on("mouseover",function(e){var t=r.tooltip().moveTo(-65535);if(r.statusLevel()&&-1!==e.target.className.indexOf(r.classPrefix+"status")){var n=r.statusMessage()||"Ok",i=t.text(n).show().testMoveRel(e.target,["bc-tc","bc-tl","bc-tr"]);t.classes.toggle("tooltip-n","bc-tc"===i),t.classes.toggle("tooltip-nw","bc-tl"===i),t.classes.toggle("tooltip-ne","bc-tr"===i),t.moveRel(e.target,i)}})},statusLevel:function(e){return 0
      Tiny'; var html = global$5.translate([ 'Powered by {0}', linkHtml ]); var brandingLabel = isBrandingEnabled(editor) ? { type: 'label', classes: 'branding', html: ' ' + html } : null; panel.add({ type: 'panel', name: 'statusbar', classes: 'statusbar', layout: 'flow', border: '1 0 0 0', ariaRoot: true, items: [ { type: 'elementpath', editor: editor }, resizeHandleCtrl, brandingLabel ] }); } Events.fireBeforeRenderUI(editor); editor.on('SwitchMode', switchMode(panel)); panel.renderBefore(args.targetNode).reflow(); if (isReadOnly(editor)) { editor.setMode('readonly'); } if (args.width) { DOM$2.setStyle(panel.getEl(), 'width', args.width); } editor.on('remove', function () { panel.remove(); panel = null; }); A11y.addKeys(editor, panel); ContextToolbars.addContextualToolbars(editor); return { iframeContainer: panel.find('#iframe')[0].getEl(), editorContainer: panel.getEl() }; }; var Iframe = { render: render }; var global$9 = tinymce.util.Tools.resolve('tinymce.dom.DomQuery'); var count = 0; var funcs = { id: function () { return 'mceu_' + count++; }, create: function (name, attrs, children) { var elm = domGlobals.document.createElement(name); global$3.DOM.setAttribs(elm, attrs); if (typeof children === 'string') { elm.innerHTML = children; } else { global$2.each(children, function (child) { if (child.nodeType) { elm.appendChild(child); } }); } return elm; }, createFragment: function (html) { return global$3.DOM.createFragment(html); }, getWindowSize: function () { return global$3.DOM.getViewPort(); }, getSize: function (elm) { var width, height; if (elm.getBoundingClientRect) { var rect = elm.getBoundingClientRect(); width = Math.max(rect.width || rect.right - rect.left, elm.offsetWidth); height = Math.max(rect.height || rect.bottom - rect.bottom, elm.offsetHeight); } else { width = elm.offsetWidth; height = elm.offsetHeight; } return { width: width, height: height }; }, getPos: function (elm, root) { return global$3.DOM.getPos(elm, root || funcs.getContainer()); }, getContainer: function () { return global$8.container ? global$8.container : domGlobals.document.body; }, getViewPort: function (win) { return global$3.DOM.getViewPort(win); }, get: function (id) { return domGlobals.document.getElementById(id); }, addClass: function (elm, cls) { return global$3.DOM.addClass(elm, cls); }, removeClass: function (elm, cls) { return global$3.DOM.removeClass(elm, cls); }, hasClass: function (elm, cls) { return global$3.DOM.hasClass(elm, cls); }, toggleClass: function (elm, cls, state) { return global$3.DOM.toggleClass(elm, cls, state); }, css: function (elm, name, value) { return global$3.DOM.setStyle(elm, name, value); }, getRuntimeStyle: function (elm, name) { return global$3.DOM.getStyle(elm, name, true); }, on: function (target, name, callback, scope) { return global$3.DOM.bind(target, name, callback, scope); }, off: function (target, name, callback) { return global$3.DOM.unbind(target, name, callback); }, fire: function (target, name, args) { return global$3.DOM.fire(target, name, args); }, innerHtml: function (elm, html) { global$3.DOM.setHTML(elm, html); } }; var isStatic = function (elm) { return funcs.getRuntimeStyle(elm, 'position') === 'static'; }; var isFixed = function (ctrl) { return ctrl.state.get('fixed'); }; function calculateRelativePosition(ctrl, targetElm, rel) { var ctrlElm, pos, x, y, selfW, selfH, targetW, targetH, viewport, size; viewport = getWindowViewPort(); pos = funcs.getPos(targetElm, UiContainer.getUiContainer(ctrl)); x = pos.x; y = pos.y; if (isFixed(ctrl) && isStatic(domGlobals.document.body)) { x -= viewport.x; y -= viewport.y; } ctrlElm = ctrl.getEl(); size = funcs.getSize(ctrlElm); selfW = size.width; selfH = size.height; size = funcs.getSize(targetElm); targetW = size.width; targetH = size.height; rel = (rel || '').split(''); if (rel[0] === 'b') { y += targetH; } if (rel[1] === 'r') { x += targetW; } if (rel[0] === 'c') { y += Math.round(targetH / 2); } if (rel[1] === 'c') { x += Math.round(targetW / 2); } if (rel[3] === 'b') { y -= selfH; } if (rel[4] === 'r') { x -= selfW; } if (rel[3] === 'c') { y -= Math.round(selfH / 2); } if (rel[4] === 'c') { x -= Math.round(selfW / 2); } return { x: x, y: y, w: selfW, h: selfH }; } var getUiContainerViewPort = function (customUiContainer) { return { x: 0, y: 0, w: customUiContainer.scrollWidth - 1, h: customUiContainer.scrollHeight - 1 }; }; var getWindowViewPort = function () { var win = domGlobals.window; var x = Math.max(win.pageXOffset, domGlobals.document.body.scrollLeft, domGlobals.document.documentElement.scrollLeft); var y = Math.max(win.pageYOffset, domGlobals.document.body.scrollTop, domGlobals.document.documentElement.scrollTop); var w = win.innerWidth || domGlobals.document.documentElement.clientWidth; var h = win.innerHeight || domGlobals.document.documentElement.clientHeight; return { x: x, y: y, w: w, h: h }; }; var getViewPortRect = function (ctrl) { var customUiContainer = UiContainer.getUiContainer(ctrl); return customUiContainer && !isFixed(ctrl) ? getUiContainerViewPort(customUiContainer) : getWindowViewPort(); }; var Movable = { testMoveRel: function (elm, rels) { var viewPortRect = getViewPortRect(this); for (var i = 0; i < rels.length; i++) { var pos = calculateRelativePosition(this, elm, rels[i]); if (isFixed(this)) { if (pos.x > 0 && pos.x + pos.w < viewPortRect.w && pos.y > 0 && pos.y + pos.h < viewPortRect.h) { return rels[i]; } } else { if (pos.x > viewPortRect.x && pos.x + pos.w < viewPortRect.w + viewPortRect.x && pos.y > viewPortRect.y && pos.y + pos.h < viewPortRect.h + viewPortRect.y) { return rels[i]; } } } return rels[0]; }, moveRel: function (elm, rel) { if (typeof rel !== 'string') { rel = this.testMoveRel(elm, rel); } var pos = calculateRelativePosition(this, elm, rel); return this.moveTo(pos.x, pos.y); }, moveBy: function (dx, dy) { var self = this, rect = self.layoutRect(); self.moveTo(rect.x + dx, rect.y + dy); return self; }, moveTo: function (x, y) { var self = this; function constrain(value, max, size) { if (value < 0) { return 0; } if (value + size > max) { value = max - size; return value < 0 ? 0 : value; } return value; } if (self.settings.constrainToViewport) { var viewPortRect = getViewPortRect(this); var layoutRect = self.layoutRect(); x = constrain(x, viewPortRect.w + viewPortRect.x, layoutRect.w); y = constrain(y, viewPortRect.h + viewPortRect.y, layoutRect.h); } var uiContainer = UiContainer.getUiContainer(self); if (uiContainer && isStatic(uiContainer) && !isFixed(self)) { x -= uiContainer.scrollLeft; y -= uiContainer.scrollTop; } if (uiContainer) { x += 1; y += 1; } if (self.state.get('rendered')) { self.layoutRect({ x: x, y: y }).repaint(); } else { self.settings.x = x; self.settings.y = y; } self.fire('move', { x: x, y: y }); return self; } }; var global$a = tinymce.util.Tools.resolve('tinymce.util.Class'); var global$b = tinymce.util.Tools.resolve('tinymce.util.EventDispatcher'); var BoxUtils = { parseBox: function (value) { var len; var radix = 10; if (!value) { return; } if (typeof value === 'number') { value = value || 0; return { top: value, left: value, bottom: value, right: value }; } value = value.split(' '); len = value.length; if (len === 1) { value[1] = value[2] = value[3] = value[0]; } else if (len === 2) { value[2] = value[0]; value[3] = value[1]; } else if (len === 3) { value[3] = value[1]; } return { top: parseInt(value[0], radix) || 0, right: parseInt(value[1], radix) || 0, bottom: parseInt(value[2], radix) || 0, left: parseInt(value[3], radix) || 0 }; }, measureBox: function (elm, prefix) { function getStyle(name) { var defaultView = elm.ownerDocument.defaultView; if (defaultView) { var computedStyle = defaultView.getComputedStyle(elm, null); if (computedStyle) { name = name.replace(/[A-Z]/g, function (a) { return '-' + a; }); return computedStyle.getPropertyValue(name); } else { return null; } } return elm.currentStyle[name]; } function getSide(name) { var val = parseFloat(getStyle(name)); return isNaN(val) ? 0 : val; } return { top: getSide(prefix + 'TopWidth'), right: getSide(prefix + 'RightWidth'), bottom: getSide(prefix + 'BottomWidth'), left: getSide(prefix + 'LeftWidth') }; } }; function noop$1() { } function ClassList(onchange) { this.cls = []; this.cls._map = {}; this.onchange = onchange || noop$1; this.prefix = ''; } global$2.extend(ClassList.prototype, { add: function (cls) { if (cls && !this.contains(cls)) { this.cls._map[cls] = true; this.cls.push(cls); this._change(); } return this; }, remove: function (cls) { if (this.contains(cls)) { var i = void 0; for (i = 0; i < this.cls.length; i++) { if (this.cls[i] === cls) { break; } } this.cls.splice(i, 1); delete this.cls._map[cls]; this._change(); } return this; }, toggle: function (cls, state) { var curState = this.contains(cls); if (curState !== state) { if (curState) { this.remove(cls); } else { this.add(cls); } this._change(); } return this; }, contains: function (cls) { return !!this.cls._map[cls]; }, _change: function () { delete this.clsValue; this.onchange.call(this); } }); ClassList.prototype.toString = function () { var value; if (this.clsValue) { return this.clsValue; } value = ''; for (var i = 0; i < this.cls.length; i++) { if (i > 0) { value += ' '; } value += this.prefix + this.cls[i]; } return value; }; function unique(array) { var uniqueItems = []; var i = array.length, item; while (i--) { item = array[i]; if (!item.__checked) { uniqueItems.push(item); item.__checked = 1; } } i = uniqueItems.length; while (i--) { delete uniqueItems[i].__checked; } return uniqueItems; } var expression = /^([\w\\*]+)?(?:#([\w\-\\]+))?(?:\.([\w\\\.]+))?(?:\[\@?([\w\\]+)([\^\$\*!~]?=)([\w\\]+)\])?(?:\:(.+))?/i; var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g; var whiteSpace = /^\s*|\s*$/g; var Collection; var Selector = global$a.extend({ init: function (selector) { var match = this.match; function compileNameFilter(name) { if (name) { name = name.toLowerCase(); return function (item) { return name === '*' || item.type === name; }; } } function compileIdFilter(id) { if (id) { return function (item) { return item._name === id; }; } } function compileClassesFilter(classes) { if (classes) { classes = classes.split('.'); return function (item) { var i = classes.length; while (i--) { if (!item.classes.contains(classes[i])) { return false; } } return true; }; } } function compileAttrFilter(name, cmp, check) { if (name) { return function (item) { var value = item[name] ? item[name]() : ''; return !cmp ? !!check : cmp === '=' ? value === check : cmp === '*=' ? value.indexOf(check) >= 0 : cmp === '~=' ? (' ' + value + ' ').indexOf(' ' + check + ' ') >= 0 : cmp === '!=' ? value !== check : cmp === '^=' ? value.indexOf(check) === 0 : cmp === '$=' ? value.substr(value.length - check.length) === check : false; }; } } function compilePsuedoFilter(name) { var notSelectors; if (name) { name = /(?:not\((.+)\))|(.+)/i.exec(name); if (!name[1]) { name = name[2]; return function (item, index, length) { return name === 'first' ? index === 0 : name === 'last' ? index === length - 1 : name === 'even' ? index % 2 === 0 : name === 'odd' ? index % 2 === 1 : item[name] ? item[name]() : false; }; } notSelectors = parseChunks(name[1], []); return function (item) { return !match(item, notSelectors); }; } } function compile(selector, filters, direct) { var parts; function add(filter) { if (filter) { filters.push(filter); } } parts = expression.exec(selector.replace(whiteSpace, '')); add(compileNameFilter(parts[1])); add(compileIdFilter(parts[2])); add(compileClassesFilter(parts[3])); add(compileAttrFilter(parts[4], parts[5], parts[6])); add(compilePsuedoFilter(parts[7])); filters.pseudo = !!parts[7]; filters.direct = direct; return filters; } function parseChunks(selector, selectors) { var parts = []; var extra, matches, i; do { chunker.exec(''); matches = chunker.exec(selector); if (matches) { selector = matches[3]; parts.push(matches[1]); if (matches[2]) { extra = matches[3]; break; } } } while (matches); if (extra) { parseChunks(extra, selectors); } selector = []; for (i = 0; i < parts.length; i++) { if (parts[i] !== '>') { selector.push(compile(parts[i], [], parts[i - 1] === '>')); } } selectors.push(selector); return selectors; } this._selectors = parseChunks(selector, []); }, match: function (control, selectors) { var i, l, si, sl, selector, fi, fl, filters, index, length, siblings, count, item; selectors = selectors || this._selectors; for (i = 0, l = selectors.length; i < l; i++) { selector = selectors[i]; sl = selector.length; item = control; count = 0; for (si = sl - 1; si >= 0; si--) { filters = selector[si]; while (item) { if (filters.pseudo) { siblings = item.parent().items(); index = length = siblings.length; while (index--) { if (siblings[index] === item) { break; } } } for (fi = 0, fl = filters.length; fi < fl; fi++) { if (!filters[fi](item, index, length)) { fi = fl + 1; break; } } if (fi === fl) { count++; break; } else { if (si === sl - 1) { break; } } item = item.parent(); } } if (count === sl) { return true; } } return false; }, find: function (container) { var matches = [], i, l; var selectors = this._selectors; function collect(items, selector, index) { var i, l, fi, fl, item; var filters = selector[index]; for (i = 0, l = items.length; i < l; i++) { item = items[i]; for (fi = 0, fl = filters.length; fi < fl; fi++) { if (!filters[fi](item, i, l)) { fi = fl + 1; break; } } if (fi === fl) { if (index === selector.length - 1) { matches.push(item); } else { if (item.items) { collect(item.items(), selector, index + 1); } } } else if (filters.direct) { return; } if (item.items) { collect(item.items(), selector, index); } } } if (container.items) { for (i = 0, l = selectors.length; i < l; i++) { collect(container.items(), selectors[i], 0); } if (l > 1) { matches = unique(matches); } } if (!Collection) { Collection = Selector.Collection; } return new Collection(matches); } }); var Collection$1, proto; var push = Array.prototype.push, slice = Array.prototype.slice; proto = { length: 0, init: function (items) { if (items) { this.add(items); } }, add: function (items) { var self = this; if (!global$2.isArray(items)) { if (items instanceof Collection$1) { self.add(items.toArray()); } else { push.call(self, items); } } else { push.apply(self, items); } return self; }, set: function (items) { var self = this; var len = self.length; var i; self.length = 0; self.add(items); for (i = self.length; i < len; i++) { delete self[i]; } return self; }, filter: function (selector) { var self = this; var i, l; var matches = []; var item, match; if (typeof selector === 'string') { selector = new Selector(selector); match = function (item) { return selector.match(item); }; } else { match = selector; } for (i = 0, l = self.length; i < l; i++) { item = self[i]; if (match(item)) { matches.push(item); } } return new Collection$1(matches); }, slice: function () { return new Collection$1(slice.apply(this, arguments)); }, eq: function (index) { return index === -1 ? this.slice(index) : this.slice(index, +index + 1); }, each: function (callback) { global$2.each(this, callback); return this; }, toArray: function () { return global$2.toArray(this); }, indexOf: function (ctrl) { var self = this; var i = self.length; while (i--) { if (self[i] === ctrl) { break; } } return i; }, reverse: function () { return new Collection$1(global$2.toArray(this).reverse()); }, hasClass: function (cls) { return this[0] ? this[0].classes.contains(cls) : false; }, prop: function (name, value) { var self = this; var item; if (value !== undefined) { self.each(function (item) { if (item[name]) { item[name](value); } }); return self; } item = self[0]; if (item && item[name]) { return item[name](); } }, exec: function (name) { var self = this, args = global$2.toArray(arguments).slice(1); self.each(function (item) { if (item[name]) { item[name].apply(item, args); } }); return self; }, remove: function () { var i = this.length; while (i--) { this[i].remove(); } return this; }, addClass: function (cls) { return this.each(function (item) { item.classes.add(cls); }); }, removeClass: function (cls) { return this.each(function (item) { item.classes.remove(cls); }); } }; global$2.each('fire on off show hide append prepend before after reflow'.split(' '), function (name) { proto[name] = function () { var args = global$2.toArray(arguments); this.each(function (ctrl) { if (name in ctrl) { ctrl[name].apply(ctrl, args); } }); return this; }; }); global$2.each('text name disabled active selected checked visible parent value data'.split(' '), function (name) { proto[name] = function (value) { return this.prop(name, value); }; }); Collection$1 = global$a.extend(proto); Selector.Collection = Collection$1; var Collection$2 = Collection$1; var Binding = function (settings) { this.create = settings.create; }; Binding.create = function (model, name) { return new Binding({ create: function (otherModel, otherName) { var bindings; var fromSelfToOther = function (e) { otherModel.set(otherName, e.value); }; var fromOtherToSelf = function (e) { model.set(name, e.value); }; otherModel.on('change:' + otherName, fromOtherToSelf); model.on('change:' + name, fromSelfToOther); bindings = otherModel._bindings; if (!bindings) { bindings = otherModel._bindings = []; otherModel.on('destroy', function () { var i = bindings.length; while (i--) { bindings[i](); } }); } bindings.push(function () { model.off('change:' + name, fromSelfToOther); }); return model.get(name); } }); }; var global$c = tinymce.util.Tools.resolve('tinymce.util.Observable'); function isNode(node) { return node.nodeType > 0; } function isEqual(a, b) { var k, checked; if (a === b) { return true; } if (a === null || b === null) { return a === b; } if (typeof a !== 'object' || typeof b !== 'object') { return a === b; } if (global$2.isArray(b)) { if (a.length !== b.length) { return false; } k = a.length; while (k--) { if (!isEqual(a[k], b[k])) { return false; } } } if (isNode(a) || isNode(b)) { return a === b; } checked = {}; for (k in b) { if (!isEqual(a[k], b[k])) { return false; } checked[k] = true; } for (k in a) { if (!checked[k] && !isEqual(a[k], b[k])) { return false; } } return true; } var ObservableObject = global$a.extend({ Mixins: [global$c], init: function (data) { var name, value; data = data || {}; for (name in data) { value = data[name]; if (value instanceof Binding) { data[name] = value.create(this, name); } } this.data = data; }, set: function (name, value) { var key, args; var oldValue = this.data[name]; if (value instanceof Binding) { value = value.create(this, name); } if (typeof name === 'object') { for (key in name) { this.set(key, name[key]); } return this; } if (!isEqual(oldValue, value)) { this.data[name] = value; args = { target: this, name: name, value: value, oldValue: oldValue }; this.fire('change:' + name, args); this.fire('change', args); } return this; }, get: function (name) { return this.data[name]; }, has: function (name) { return name in this.data; }, bind: function (name) { return Binding.create(this, name); }, destroy: function () { this.fire('destroy'); } }); var dirtyCtrls = {}, animationFrameRequested; var ReflowQueue = { add: function (ctrl) { var parent = ctrl.parent(); if (parent) { if (!parent._layout || parent._layout.isNative()) { return; } if (!dirtyCtrls[parent._id]) { dirtyCtrls[parent._id] = parent; } if (!animationFrameRequested) { animationFrameRequested = true; global$7.requestAnimationFrame(function () { var id, ctrl; animationFrameRequested = false; for (id in dirtyCtrls) { ctrl = dirtyCtrls[id]; if (ctrl.state.get('rendered')) { ctrl.reflow(); } } dirtyCtrls = {}; }, domGlobals.document.body); } } }, remove: function (ctrl) { if (dirtyCtrls[ctrl._id]) { delete dirtyCtrls[ctrl._id]; } } }; var hasMouseWheelEventSupport = 'onmousewheel' in domGlobals.document; var hasWheelEventSupport = false; var classPrefix = 'mce-'; var Control, idCounter = 0; var proto$1 = { Statics: { classPrefix: classPrefix }, isRtl: function () { return Control.rtl; }, classPrefix: classPrefix, init: function (settings) { var self = this; var classes, defaultClasses; function applyClasses(classes) { var i; classes = classes.split(' '); for (i = 0; i < classes.length; i++) { self.classes.add(classes[i]); } } self.settings = settings = global$2.extend({}, self.Defaults, settings); self._id = settings.id || 'mceu_' + idCounter++; self._aria = { role: settings.role }; self._elmCache = {}; self.$ = global$9; self.state = new ObservableObject({ visible: true, active: false, disabled: false, value: '' }); self.data = new ObservableObject(settings.data); self.classes = new ClassList(function () { if (self.state.get('rendered')) { self.getEl().className = this.toString(); } }); self.classes.prefix = self.classPrefix; classes = settings.classes; if (classes) { if (self.Defaults) { defaultClasses = self.Defaults.classes; if (defaultClasses && classes !== defaultClasses) { applyClasses(defaultClasses); } } applyClasses(classes); } global$2.each('title text name visible disabled active value'.split(' '), function (name) { if (name in settings) { self[name](settings[name]); } }); self.on('click', function () { if (self.disabled()) { return false; } }); self.settings = settings; self.borderBox = BoxUtils.parseBox(settings.border); self.paddingBox = BoxUtils.parseBox(settings.padding); self.marginBox = BoxUtils.parseBox(settings.margin); if (settings.hidden) { self.hide(); } }, Properties: 'parent,name', getContainerElm: function () { var uiContainer = UiContainer.getUiContainer(this); return uiContainer ? uiContainer : funcs.getContainer(); }, getParentCtrl: function (elm) { var ctrl; var lookup = this.getRoot().controlIdLookup; while (elm && lookup) { ctrl = lookup[elm.id]; if (ctrl) { break; } elm = elm.parentNode; } return ctrl; }, initLayoutRect: function () { var self = this; var settings = self.settings; var borderBox, layoutRect; var elm = self.getEl(); var width, height, minWidth, minHeight, autoResize; var startMinWidth, startMinHeight, initialSize; borderBox = self.borderBox = self.borderBox || BoxUtils.measureBox(elm, 'border'); self.paddingBox = self.paddingBox || BoxUtils.measureBox(elm, 'padding'); self.marginBox = self.marginBox || BoxUtils.measureBox(elm, 'margin'); initialSize = funcs.getSize(elm); startMinWidth = settings.minWidth; startMinHeight = settings.minHeight; minWidth = startMinWidth || initialSize.width; minHeight = startMinHeight || initialSize.height; width = settings.width; height = settings.height; autoResize = settings.autoResize; autoResize = typeof autoResize !== 'undefined' ? autoResize : !width && !height; width = width || minWidth; height = height || minHeight; var deltaW = borderBox.left + borderBox.right; var deltaH = borderBox.top + borderBox.bottom; var maxW = settings.maxWidth || 65535; var maxH = settings.maxHeight || 65535; self._layoutRect = layoutRect = { x: settings.x || 0, y: settings.y || 0, w: width, h: height, deltaW: deltaW, deltaH: deltaH, contentW: width - deltaW, contentH: height - deltaH, innerW: width - deltaW, innerH: height - deltaH, startMinWidth: startMinWidth || 0, startMinHeight: startMinHeight || 0, minW: Math.min(minWidth, maxW), minH: Math.min(minHeight, maxH), maxW: maxW, maxH: maxH, autoResize: autoResize, scrollW: 0 }; self._lastLayoutRect = {}; return layoutRect; }, layoutRect: function (newRect) { var self = this; var curRect = self._layoutRect, lastLayoutRect, size, deltaWidth, deltaHeight, repaintControls; if (!curRect) { curRect = self.initLayoutRect(); } if (newRect) { deltaWidth = curRect.deltaW; deltaHeight = curRect.deltaH; if (newRect.x !== undefined) { curRect.x = newRect.x; } if (newRect.y !== undefined) { curRect.y = newRect.y; } if (newRect.minW !== undefined) { curRect.minW = newRect.minW; } if (newRect.minH !== undefined) { curRect.minH = newRect.minH; } size = newRect.w; if (size !== undefined) { size = size < curRect.minW ? curRect.minW : size; size = size > curRect.maxW ? curRect.maxW : size; curRect.w = size; curRect.innerW = size - deltaWidth; } size = newRect.h; if (size !== undefined) { size = size < curRect.minH ? curRect.minH : size; size = size > curRect.maxH ? curRect.maxH : size; curRect.h = size; curRect.innerH = size - deltaHeight; } size = newRect.innerW; if (size !== undefined) { size = size < curRect.minW - deltaWidth ? curRect.minW - deltaWidth : size; size = size > curRect.maxW - deltaWidth ? curRect.maxW - deltaWidth : size; curRect.innerW = size; curRect.w = size + deltaWidth; } size = newRect.innerH; if (size !== undefined) { size = size < curRect.minH - deltaHeight ? curRect.minH - deltaHeight : size; size = size > curRect.maxH - deltaHeight ? curRect.maxH - deltaHeight : size; curRect.innerH = size; curRect.h = size + deltaHeight; } if (newRect.contentW !== undefined) { curRect.contentW = newRect.contentW; } if (newRect.contentH !== undefined) { curRect.contentH = newRect.contentH; } lastLayoutRect = self._lastLayoutRect; if (lastLayoutRect.x !== curRect.x || lastLayoutRect.y !== curRect.y || lastLayoutRect.w !== curRect.w || lastLayoutRect.h !== curRect.h) { repaintControls = Control.repaintControls; if (repaintControls) { if (repaintControls.map && !repaintControls.map[self._id]) { repaintControls.push(self); repaintControls.map[self._id] = true; } } lastLayoutRect.x = curRect.x; lastLayoutRect.y = curRect.y; lastLayoutRect.w = curRect.w; lastLayoutRect.h = curRect.h; } return self; } return curRect; }, repaint: function () { var self = this; var style, bodyStyle, bodyElm, rect, borderBox; var borderW, borderH, lastRepaintRect, round, value; round = !domGlobals.document.createRange ? Math.round : function (value) { return value; }; style = self.getEl().style; rect = self._layoutRect; lastRepaintRect = self._lastRepaintRect || {}; borderBox = self.borderBox; borderW = borderBox.left + borderBox.right; borderH = borderBox.top + borderBox.bottom; if (rect.x !== lastRepaintRect.x) { style.left = round(rect.x) + 'px'; lastRepaintRect.x = rect.x; } if (rect.y !== lastRepaintRect.y) { style.top = round(rect.y) + 'px'; lastRepaintRect.y = rect.y; } if (rect.w !== lastRepaintRect.w) { value = round(rect.w - borderW); style.width = (value >= 0 ? value : 0) + 'px'; lastRepaintRect.w = rect.w; } if (rect.h !== lastRepaintRect.h) { value = round(rect.h - borderH); style.height = (value >= 0 ? value : 0) + 'px'; lastRepaintRect.h = rect.h; } if (self._hasBody && rect.innerW !== lastRepaintRect.innerW) { value = round(rect.innerW); bodyElm = self.getEl('body'); if (bodyElm) { bodyStyle = bodyElm.style; bodyStyle.width = (value >= 0 ? value : 0) + 'px'; } lastRepaintRect.innerW = rect.innerW; } if (self._hasBody && rect.innerH !== lastRepaintRect.innerH) { value = round(rect.innerH); bodyElm = bodyElm || self.getEl('body'); if (bodyElm) { bodyStyle = bodyStyle || bodyElm.style; bodyStyle.height = (value >= 0 ? value : 0) + 'px'; } lastRepaintRect.innerH = rect.innerH; } self._lastRepaintRect = lastRepaintRect; self.fire('repaint', {}, false); }, updateLayoutRect: function () { var self = this; self.parent()._lastRect = null; funcs.css(self.getEl(), { width: '', height: '' }); self._layoutRect = self._lastRepaintRect = self._lastLayoutRect = null; self.initLayoutRect(); }, on: function (name, callback) { var self = this; function resolveCallbackName(name) { var callback, scope; if (typeof name !== 'string') { return name; } return function (e) { if (!callback) { self.parentsAndSelf().each(function (ctrl) { var callbacks = ctrl.settings.callbacks; if (callbacks && (callback = callbacks[name])) { scope = ctrl; return false; } }); } if (!callback) { e.action = name; this.fire('execute', e); return; } return callback.call(scope, e); }; } getEventDispatcher(self).on(name, resolveCallbackName(callback)); return self; }, off: function (name, callback) { getEventDispatcher(this).off(name, callback); return this; }, fire: function (name, args, bubble) { var self = this; args = args || {}; if (!args.control) { args.control = self; } args = getEventDispatcher(self).fire(name, args); if (bubble !== false && self.parent) { var parent = self.parent(); while (parent && !args.isPropagationStopped()) { parent.fire(name, args, false); parent = parent.parent(); } } return args; }, hasEventListeners: function (name) { return getEventDispatcher(this).has(name); }, parents: function (selector) { var self = this; var ctrl, parents = new Collection$2(); for (ctrl = self.parent(); ctrl; ctrl = ctrl.parent()) { parents.add(ctrl); } if (selector) { parents = parents.filter(selector); } return parents; }, parentsAndSelf: function (selector) { return new Collection$2(this).add(this.parents(selector)); }, next: function () { var parentControls = this.parent().items(); return parentControls[parentControls.indexOf(this) + 1]; }, prev: function () { var parentControls = this.parent().items(); return parentControls[parentControls.indexOf(this) - 1]; }, innerHtml: function (html) { this.$el.html(html); return this; }, getEl: function (suffix) { var id = suffix ? this._id + '-' + suffix : this._id; if (!this._elmCache[id]) { this._elmCache[id] = global$9('#' + id)[0]; } return this._elmCache[id]; }, show: function () { return this.visible(true); }, hide: function () { return this.visible(false); }, focus: function () { try { this.getEl().focus(); } catch (ex) { } return this; }, blur: function () { this.getEl().blur(); return this; }, aria: function (name, value) { var self = this, elm = self.getEl(self.ariaTarget); if (typeof value === 'undefined') { return self._aria[name]; } self._aria[name] = value; if (self.state.get('rendered')) { elm.setAttribute(name === 'role' ? name : 'aria-' + name, value); } return self; }, encode: function (text, translate) { if (translate !== false) { text = this.translate(text); } return (text || '').replace(/[&<>"]/g, function (match) { return '&#' + match.charCodeAt(0) + ';'; }); }, translate: function (text) { return Control.translate ? Control.translate(text) : text; }, before: function (items) { var self = this, parent = self.parent(); if (parent) { parent.insert(items, parent.items().indexOf(self), true); } return self; }, after: function (items) { var self = this, parent = self.parent(); if (parent) { parent.insert(items, parent.items().indexOf(self)); } return self; }, remove: function () { var self = this; var elm = self.getEl(); var parent = self.parent(); var newItems, i; if (self.items) { var controls = self.items().toArray(); i = controls.length; while (i--) { controls[i].remove(); } } if (parent && parent.items) { newItems = []; parent.items().each(function (item) { if (item !== self) { newItems.push(item); } }); parent.items().set(newItems); parent._lastRect = null; } if (self._eventsRoot && self._eventsRoot === self) { global$9(elm).off(); } var lookup = self.getRoot().controlIdLookup; if (lookup) { delete lookup[self._id]; } if (elm && elm.parentNode) { elm.parentNode.removeChild(elm); } self.state.set('rendered', false); self.state.destroy(); self.fire('remove'); return self; }, renderBefore: function (elm) { global$9(elm).before(this.renderHtml()); this.postRender(); return this; }, renderTo: function (elm) { global$9(elm || this.getContainerElm()).append(this.renderHtml()); this.postRender(); return this; }, preRender: function () { }, render: function () { }, renderHtml: function () { return '
      '; }, postRender: function () { var self = this; var settings = self.settings; var elm, box, parent, name, parentEventsRoot; self.$el = global$9(self.getEl()); self.state.set('rendered', true); for (name in settings) { if (name.indexOf('on') === 0) { self.on(name.substr(2), settings[name]); } } if (self._eventsRoot) { for (parent = self.parent(); !parentEventsRoot && parent; parent = parent.parent()) { parentEventsRoot = parent._eventsRoot; } if (parentEventsRoot) { for (name in parentEventsRoot._nativeEvents) { self._nativeEvents[name] = true; } } } bindPendingEvents(self); if (settings.style) { elm = self.getEl(); if (elm) { elm.setAttribute('style', settings.style); elm.style.cssText = settings.style; } } if (self.settings.border) { box = self.borderBox; self.$el.css({ 'border-top-width': box.top, 'border-right-width': box.right, 'border-bottom-width': box.bottom, 'border-left-width': box.left }); } var root = self.getRoot(); if (!root.controlIdLookup) { root.controlIdLookup = {}; } root.controlIdLookup[self._id] = self; for (var key in self._aria) { self.aria(key, self._aria[key]); } if (self.state.get('visible') === false) { self.getEl().style.display = 'none'; } self.bindStates(); self.state.on('change:visible', function (e) { var state = e.value; var parentCtrl; if (self.state.get('rendered')) { self.getEl().style.display = state === false ? 'none' : ''; self.getEl().getBoundingClientRect(); } parentCtrl = self.parent(); if (parentCtrl) { parentCtrl._lastRect = null; } self.fire(state ? 'show' : 'hide'); ReflowQueue.add(self); }); self.fire('postrender', {}, false); }, bindStates: function () { }, scrollIntoView: function (align) { function getOffset(elm, rootElm) { var x, y, parent = elm; x = y = 0; while (parent && parent !== rootElm && parent.nodeType) { x += parent.offsetLeft || 0; y += parent.offsetTop || 0; parent = parent.offsetParent; } return { x: x, y: y }; } var elm = this.getEl(), parentElm = elm.parentNode; var x, y, width, height, parentWidth, parentHeight; var pos = getOffset(elm, parentElm); x = pos.x; y = pos.y; width = elm.offsetWidth; height = elm.offsetHeight; parentWidth = parentElm.clientWidth; parentHeight = parentElm.clientHeight; if (align === 'end') { x -= parentWidth - width; y -= parentHeight - height; } else if (align === 'center') { x -= parentWidth / 2 - width / 2; y -= parentHeight / 2 - height / 2; } parentElm.scrollLeft = x; parentElm.scrollTop = y; return this; }, getRoot: function () { var ctrl = this, rootControl; var parents = []; while (ctrl) { if (ctrl.rootControl) { rootControl = ctrl.rootControl; break; } parents.push(ctrl); rootControl = ctrl; ctrl = ctrl.parent(); } if (!rootControl) { rootControl = this; } var i = parents.length; while (i--) { parents[i].rootControl = rootControl; } return rootControl; }, reflow: function () { ReflowQueue.remove(this); var parent = this.parent(); if (parent && parent._layout && !parent._layout.isNative()) { parent.reflow(); } return this; } }; global$2.each('text title visible disabled active value'.split(' '), function (name) { proto$1[name] = function (value) { if (arguments.length === 0) { return this.state.get(name); } if (typeof value !== 'undefined') { this.state.set(name, value); } return this; }; }); Control = global$a.extend(proto$1); function getEventDispatcher(obj) { if (!obj._eventDispatcher) { obj._eventDispatcher = new global$b({ scope: obj, toggleEvent: function (name, state) { if (state && global$b.isNative(name)) { if (!obj._nativeEvents) { obj._nativeEvents = {}; } obj._nativeEvents[name] = true; if (obj.state.get('rendered')) { bindPendingEvents(obj); } } } }); } return obj._eventDispatcher; } function bindPendingEvents(eventCtrl) { var i, l, parents, eventRootCtrl, nativeEvents, name; function delegate(e) { var control = eventCtrl.getParentCtrl(e.target); if (control) { control.fire(e.type, e); } } function mouseLeaveHandler() { var ctrl = eventRootCtrl._lastHoverCtrl; if (ctrl) { ctrl.fire('mouseleave', { target: ctrl.getEl() }); ctrl.parents().each(function (ctrl) { ctrl.fire('mouseleave', { target: ctrl.getEl() }); }); eventRootCtrl._lastHoverCtrl = null; } } function mouseEnterHandler(e) { var ctrl = eventCtrl.getParentCtrl(e.target), lastCtrl = eventRootCtrl._lastHoverCtrl, idx = 0, i, parents, lastParents; if (ctrl !== lastCtrl) { eventRootCtrl._lastHoverCtrl = ctrl; parents = ctrl.parents().toArray().reverse(); parents.push(ctrl); if (lastCtrl) { lastParents = lastCtrl.parents().toArray().reverse(); lastParents.push(lastCtrl); for (idx = 0; idx < lastParents.length; idx++) { if (parents[idx] !== lastParents[idx]) { break; } } for (i = lastParents.length - 1; i >= idx; i--) { lastCtrl = lastParents[i]; lastCtrl.fire('mouseleave', { target: lastCtrl.getEl() }); } } for (i = idx; i < parents.length; i++) { ctrl = parents[i]; ctrl.fire('mouseenter', { target: ctrl.getEl() }); } } } function fixWheelEvent(e) { e.preventDefault(); if (e.type === 'mousewheel') { e.deltaY = -1 / 40 * e.wheelDelta; if (e.wheelDeltaX) { e.deltaX = -1 / 40 * e.wheelDeltaX; } } else { e.deltaX = 0; e.deltaY = e.detail; } e = eventCtrl.fire('wheel', e); } nativeEvents = eventCtrl._nativeEvents; if (nativeEvents) { parents = eventCtrl.parents().toArray(); parents.unshift(eventCtrl); for (i = 0, l = parents.length; !eventRootCtrl && i < l; i++) { eventRootCtrl = parents[i]._eventsRoot; } if (!eventRootCtrl) { eventRootCtrl = parents[parents.length - 1] || eventCtrl; } eventCtrl._eventsRoot = eventRootCtrl; for (l = i, i = 0; i < l; i++) { parents[i]._eventsRoot = eventRootCtrl; } var eventRootDelegates = eventRootCtrl._delegates; if (!eventRootDelegates) { eventRootDelegates = eventRootCtrl._delegates = {}; } for (name in nativeEvents) { if (!nativeEvents) { return false; } if (name === 'wheel' && !hasWheelEventSupport) { if (hasMouseWheelEventSupport) { global$9(eventCtrl.getEl()).on('mousewheel', fixWheelEvent); } else { global$9(eventCtrl.getEl()).on('DOMMouseScroll', fixWheelEvent); } continue; } if (name === 'mouseenter' || name === 'mouseleave') { if (!eventRootCtrl._hasMouseEnter) { global$9(eventRootCtrl.getEl()).on('mouseleave', mouseLeaveHandler).on('mouseover', mouseEnterHandler); eventRootCtrl._hasMouseEnter = 1; } } else if (!eventRootDelegates[name]) { global$9(eventRootCtrl.getEl()).on(name, delegate); eventRootDelegates[name] = true; } nativeEvents[name] = false; } } } var Control$1 = Control; var hasTabstopData = function (elm) { return elm.getAttribute('data-mce-tabstop') ? true : false; }; function KeyboardNavigation (settings) { var root = settings.root; var focusedElement, focusedControl; function isElement(node) { return node && node.nodeType === 1; } try { focusedElement = domGlobals.document.activeElement; } catch (ex) { focusedElement = domGlobals.document.body; } focusedControl = root.getParentCtrl(focusedElement); function getRole(elm) { elm = elm || focusedElement; if (isElement(elm)) { return elm.getAttribute('role'); } return null; } function getParentRole(elm) { var role, parent = elm || focusedElement; while (parent = parent.parentNode) { if (role = getRole(parent)) { return role; } } } function getAriaProp(name) { var elm = focusedElement; if (isElement(elm)) { return elm.getAttribute('aria-' + name); } } function isTextInputElement(elm) { var tagName = elm.tagName.toUpperCase(); return tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT'; } function canFocus(elm) { if (isTextInputElement(elm) && !elm.hidden) { return true; } if (hasTabstopData(elm)) { return true; } if (/^(button|menuitem|checkbox|tab|menuitemcheckbox|option|gridcell|slider)$/.test(getRole(elm))) { return true; } return false; } function getFocusElements(elm) { var elements = []; function collect(elm) { if (elm.nodeType !== 1 || elm.style.display === 'none' || elm.disabled) { return; } if (canFocus(elm)) { elements.push(elm); } for (var i = 0; i < elm.childNodes.length; i++) { collect(elm.childNodes[i]); } } collect(elm || root.getEl()); return elements; } function getNavigationRoot(targetControl) { var navigationRoot, controls; targetControl = targetControl || focusedControl; controls = targetControl.parents().toArray(); controls.unshift(targetControl); for (var i = 0; i < controls.length; i++) { navigationRoot = controls[i]; if (navigationRoot.settings.ariaRoot) { break; } } return navigationRoot; } function focusFirst(targetControl) { var navigationRoot = getNavigationRoot(targetControl); var focusElements = getFocusElements(navigationRoot.getEl()); if (navigationRoot.settings.ariaRemember && 'lastAriaIndex' in navigationRoot) { moveFocusToIndex(navigationRoot.lastAriaIndex, focusElements); } else { moveFocusToIndex(0, focusElements); } } function moveFocusToIndex(idx, elements) { if (idx < 0) { idx = elements.length - 1; } else if (idx >= elements.length) { idx = 0; } if (elements[idx]) { elements[idx].focus(); } return idx; } function moveFocus(dir, elements) { var idx = -1; var navigationRoot = getNavigationRoot(); elements = elements || getFocusElements(navigationRoot.getEl()); for (var i = 0; i < elements.length; i++) { if (elements[i] === focusedElement) { idx = i; } } idx += dir; navigationRoot.lastAriaIndex = moveFocusToIndex(idx, elements); } function left() { var parentRole = getParentRole(); if (parentRole === 'tablist') { moveFocus(-1, getFocusElements(focusedElement.parentNode)); } else if (focusedControl.parent().submenu) { cancel(); } else { moveFocus(-1); } } function right() { var role = getRole(), parentRole = getParentRole(); if (parentRole === 'tablist') { moveFocus(1, getFocusElements(focusedElement.parentNode)); } else if (role === 'menuitem' && parentRole === 'menu' && getAriaProp('haspopup')) { enter(); } else { moveFocus(1); } } function up() { moveFocus(-1); } function down() { var role = getRole(), parentRole = getParentRole(); if (role === 'menuitem' && parentRole === 'menubar') { enter(); } else if (role === 'button' && getAriaProp('haspopup')) { enter({ key: 'down' }); } else { moveFocus(1); } } function tab(e) { var parentRole = getParentRole(); if (parentRole === 'tablist') { var elm = getFocusElements(focusedControl.getEl('body'))[0]; if (elm) { elm.focus(); } } else { moveFocus(e.shiftKey ? -1 : 1); } } function cancel() { focusedControl.fire('cancel'); } function enter(aria) { aria = aria || {}; focusedControl.fire('click', { target: focusedElement, aria: aria }); } root.on('keydown', function (e) { function handleNonTabOrEscEvent(e, handler) { if (isTextInputElement(focusedElement) || hasTabstopData(focusedElement)) { return; } if (getRole(focusedElement) === 'slider') { return; } if (handler(e) !== false) { e.preventDefault(); } } if (e.isDefaultPrevented()) { return; } switch (e.keyCode) { case 37: handleNonTabOrEscEvent(e, left); break; case 39: handleNonTabOrEscEvent(e, right); break; case 38: handleNonTabOrEscEvent(e, up); break; case 40: handleNonTabOrEscEvent(e, down); break; case 27: cancel(); break; case 14: case 13: case 32: handleNonTabOrEscEvent(e, enter); break; case 9: tab(e); e.preventDefault(); break; } }); root.on('focusin', function (e) { focusedElement = e.target; focusedControl = e.control; }); return { focusFirst: focusFirst }; } var selectorCache = {}; var Container = Control$1.extend({ init: function (settings) { var self = this; self._super(settings); settings = self.settings; if (settings.fixed) { self.state.set('fixed', true); } self._items = new Collection$2(); if (self.isRtl()) { self.classes.add('rtl'); } self.bodyClasses = new ClassList(function () { if (self.state.get('rendered')) { self.getEl('body').className = this.toString(); } }); self.bodyClasses.prefix = self.classPrefix; self.classes.add('container'); self.bodyClasses.add('container-body'); if (settings.containerCls) { self.classes.add(settings.containerCls); } self._layout = global$4.create((settings.layout || '') + 'layout'); if (self.settings.items) { self.add(self.settings.items); } else { self.add(self.render()); } self._hasBody = true; }, items: function () { return this._items; }, find: function (selector) { selector = selectorCache[selector] = selectorCache[selector] || new Selector(selector); return selector.find(this); }, add: function (items) { var self = this; self.items().add(self.create(items)).parent(self); return self; }, focus: function (keyboard) { var self = this; var focusCtrl, keyboardNav, items; if (keyboard) { keyboardNav = self.keyboardNav || self.parents().eq(-1)[0].keyboardNav; if (keyboardNav) { keyboardNav.focusFirst(self); return; } } items = self.find('*'); if (self.statusbar) { items.add(self.statusbar.items()); } items.each(function (ctrl) { if (ctrl.settings.autofocus) { focusCtrl = null; return false; } if (ctrl.canFocus) { focusCtrl = focusCtrl || ctrl; } }); if (focusCtrl) { focusCtrl.focus(); } return self; }, replace: function (oldItem, newItem) { var ctrlElm; var items = this.items(); var i = items.length; while (i--) { if (items[i] === oldItem) { items[i] = newItem; break; } } if (i >= 0) { ctrlElm = newItem.getEl(); if (ctrlElm) { ctrlElm.parentNode.removeChild(ctrlElm); } ctrlElm = oldItem.getEl(); if (ctrlElm) { ctrlElm.parentNode.removeChild(ctrlElm); } } newItem.parent(this); }, create: function (items) { var self = this; var settings; var ctrlItems = []; if (!global$2.isArray(items)) { items = [items]; } global$2.each(items, function (item) { if (item) { if (!(item instanceof Control$1)) { if (typeof item === 'string') { item = { type: item }; } settings = global$2.extend({}, self.settings.defaults, item); item.type = settings.type = settings.type || item.type || self.settings.defaultType || (settings.defaults ? settings.defaults.type : null); item = global$4.create(settings); } ctrlItems.push(item); } }); return ctrlItems; }, renderNew: function () { var self = this; self.items().each(function (ctrl, index) { var containerElm; ctrl.parent(self); if (!ctrl.state.get('rendered')) { containerElm = self.getEl('body'); if (containerElm.hasChildNodes() && index <= containerElm.childNodes.length - 1) { global$9(containerElm.childNodes[index]).before(ctrl.renderHtml()); } else { global$9(containerElm).append(ctrl.renderHtml()); } ctrl.postRender(); ReflowQueue.add(ctrl); } }); self._layout.applyClasses(self.items().filter(':visible')); self._lastRect = null; return self; }, append: function (items) { return this.add(items).renderNew(); }, prepend: function (items) { var self = this; self.items().set(self.create(items).concat(self.items().toArray())); return self.renderNew(); }, insert: function (items, index, before) { var self = this; var curItems, beforeItems, afterItems; items = self.create(items); curItems = self.items(); if (!before && index < curItems.length - 1) { index += 1; } if (index >= 0 && index < curItems.length) { beforeItems = curItems.slice(0, index).toArray(); afterItems = curItems.slice(index).toArray(); curItems.set(beforeItems.concat(items, afterItems)); } return self.renderNew(); }, fromJSON: function (data) { var self = this; for (var name in data) { self.find('#' + name).value(data[name]); } return self; }, toJSON: function () { var self = this, data = {}; self.find('*').each(function (ctrl) { var name = ctrl.name(), value = ctrl.value(); if (name && typeof value !== 'undefined') { data[name] = value; } }); return data; }, renderHtml: function () { var self = this, layout = self._layout, role = this.settings.role; self.preRender(); layout.preRender(self); return '
      ' + '
      ' + (self.settings.html || '') + layout.renderHtml(self) + '
      ' + '
      '; }, postRender: function () { var self = this; var box; self.items().exec('postRender'); self._super(); self._layout.postRender(self); self.state.set('rendered', true); if (self.settings.style) { self.$el.css(self.settings.style); } if (self.settings.border) { box = self.borderBox; self.$el.css({ 'border-top-width': box.top, 'border-right-width': box.right, 'border-bottom-width': box.bottom, 'border-left-width': box.left }); } if (!self.parent()) { self.keyboardNav = KeyboardNavigation({ root: self }); } return self; }, initLayoutRect: function () { var self = this, layoutRect = self._super(); self._layout.recalc(self); return layoutRect; }, recalc: function () { var self = this; var rect = self._layoutRect; var lastRect = self._lastRect; if (!lastRect || lastRect.w !== rect.w || lastRect.h !== rect.h) { self._layout.recalc(self); rect = self.layoutRect(); self._lastRect = { x: rect.x, y: rect.y, w: rect.w, h: rect.h }; return true; } }, reflow: function () { var i; ReflowQueue.remove(this); if (this.visible()) { Control$1.repaintControls = []; Control$1.repaintControls.map = {}; this.recalc(); i = Control$1.repaintControls.length; while (i--) { Control$1.repaintControls[i].repaint(); } if (this.settings.layout !== 'flow' && this.settings.layout !== 'stack') { this.repaint(); } Control$1.repaintControls = []; } return this; } }); function getDocumentSize(doc) { var documentElement, body, scrollWidth, clientWidth; var offsetWidth, scrollHeight, clientHeight, offsetHeight; var max = Math.max; documentElement = doc.documentElement; body = doc.body; scrollWidth = max(documentElement.scrollWidth, body.scrollWidth); clientWidth = max(documentElement.clientWidth, body.clientWidth); offsetWidth = max(documentElement.offsetWidth, body.offsetWidth); scrollHeight = max(documentElement.scrollHeight, body.scrollHeight); clientHeight = max(documentElement.clientHeight, body.clientHeight); offsetHeight = max(documentElement.offsetHeight, body.offsetHeight); return { width: scrollWidth < offsetWidth ? clientWidth : scrollWidth, height: scrollHeight < offsetHeight ? clientHeight : scrollHeight }; } function updateWithTouchData(e) { var keys, i; if (e.changedTouches) { keys = 'screenX screenY pageX pageY clientX clientY'.split(' '); for (i = 0; i < keys.length; i++) { e[keys[i]] = e.changedTouches[0][keys[i]]; } } } function DragHelper (id, settings) { var $eventOverlay; var doc = settings.document || domGlobals.document; var downButton; var start, stop, drag, startX, startY; settings = settings || {}; var handleElement = doc.getElementById(settings.handle || id); start = function (e) { var docSize = getDocumentSize(doc); var handleElm, cursor; updateWithTouchData(e); e.preventDefault(); downButton = e.button; handleElm = handleElement; startX = e.screenX; startY = e.screenY; if (domGlobals.window.getComputedStyle) { cursor = domGlobals.window.getComputedStyle(handleElm, null).getPropertyValue('cursor'); } else { cursor = handleElm.runtimeStyle.cursor; } $eventOverlay = global$9('
      ').css({ position: 'absolute', top: 0, left: 0, width: docSize.width, height: docSize.height, zIndex: 2147483647, opacity: 0.0001, cursor: cursor }).appendTo(doc.body); global$9(doc).on('mousemove touchmove', drag).on('mouseup touchend', stop); settings.start(e); }; drag = function (e) { updateWithTouchData(e); if (e.button !== downButton) { return stop(e); } e.deltaX = e.screenX - startX; e.deltaY = e.screenY - startY; e.preventDefault(); settings.drag(e); }; stop = function (e) { updateWithTouchData(e); global$9(doc).off('mousemove touchmove', drag).off('mouseup touchend', stop); $eventOverlay.remove(); if (settings.stop) { settings.stop(e); } }; this.destroy = function () { global$9(handleElement).off(); }; global$9(handleElement).on('mousedown touchstart', start); } var Scrollable = { init: function () { var self = this; self.on('repaint', self.renderScroll); }, renderScroll: function () { var self = this, margin = 2; function repaintScroll() { var hasScrollH, hasScrollV, bodyElm; function repaintAxis(axisName, posName, sizeName, contentSizeName, hasScroll, ax) { var containerElm, scrollBarElm, scrollThumbElm; var containerSize, scrollSize, ratio, rect; var posNameLower, sizeNameLower; scrollBarElm = self.getEl('scroll' + axisName); if (scrollBarElm) { posNameLower = posName.toLowerCase(); sizeNameLower = sizeName.toLowerCase(); global$9(self.getEl('absend')).css(posNameLower, self.layoutRect()[contentSizeName] - 1); if (!hasScroll) { global$9(scrollBarElm).css('display', 'none'); return; } global$9(scrollBarElm).css('display', 'block'); containerElm = self.getEl('body'); scrollThumbElm = self.getEl('scroll' + axisName + 't'); containerSize = containerElm['client' + sizeName] - margin * 2; containerSize -= hasScrollH && hasScrollV ? scrollBarElm['client' + ax] : 0; scrollSize = containerElm['scroll' + sizeName]; ratio = containerSize / scrollSize; rect = {}; rect[posNameLower] = containerElm['offset' + posName] + margin; rect[sizeNameLower] = containerSize; global$9(scrollBarElm).css(rect); rect = {}; rect[posNameLower] = containerElm['scroll' + posName] * ratio; rect[sizeNameLower] = containerSize * ratio; global$9(scrollThumbElm).css(rect); } } bodyElm = self.getEl('body'); hasScrollH = bodyElm.scrollWidth > bodyElm.clientWidth; hasScrollV = bodyElm.scrollHeight > bodyElm.clientHeight; repaintAxis('h', 'Left', 'Width', 'contentW', hasScrollH, 'Height'); repaintAxis('v', 'Top', 'Height', 'contentH', hasScrollV, 'Width'); } function addScroll() { function addScrollAxis(axisName, posName, sizeName, deltaPosName, ax) { var scrollStart; var axisId = self._id + '-scroll' + axisName, prefix = self.classPrefix; global$9(self.getEl()).append('
      ' + '
      ' + '
      '); self.draghelper = new DragHelper(axisId + 't', { start: function () { scrollStart = self.getEl('body')['scroll' + posName]; global$9('#' + axisId).addClass(prefix + 'active'); }, drag: function (e) { var ratio, hasScrollH, hasScrollV, containerSize; var layoutRect = self.layoutRect(); hasScrollH = layoutRect.contentW > layoutRect.innerW; hasScrollV = layoutRect.contentH > layoutRect.innerH; containerSize = self.getEl('body')['client' + sizeName] - margin * 2; containerSize -= hasScrollH && hasScrollV ? self.getEl('scroll' + axisName)['client' + ax] : 0; ratio = containerSize / self.getEl('body')['scroll' + sizeName]; self.getEl('body')['scroll' + posName] = scrollStart + e['delta' + deltaPosName] / ratio; }, stop: function () { global$9('#' + axisId).removeClass(prefix + 'active'); } }); } self.classes.add('scroll'); addScrollAxis('v', 'Top', 'Height', 'Y', 'Width'); addScrollAxis('h', 'Left', 'Width', 'X', 'Height'); } if (self.settings.autoScroll) { if (!self._hasScroll) { self._hasScroll = true; addScroll(); self.on('wheel', function (e) { var bodyEl = self.getEl('body'); bodyEl.scrollLeft += (e.deltaX || 0) * 10; bodyEl.scrollTop += e.deltaY * 10; repaintScroll(); }); global$9(self.getEl('body')).on('scroll', repaintScroll); } repaintScroll(); } } }; var Panel = Container.extend({ Defaults: { layout: 'fit', containerCls: 'panel' }, Mixins: [Scrollable], renderHtml: function () { var self = this; var layout = self._layout; var innerHtml = self.settings.html; self.preRender(); layout.preRender(self); if (typeof innerHtml === 'undefined') { innerHtml = '
      ' + layout.renderHtml(self) + '
      '; } else { if (typeof innerHtml === 'function') { innerHtml = innerHtml.call(self); } self._hasBody = false; } return '
      ' + (self._preBodyHtml || '') + innerHtml + '
      '; } }); var Resizable = { resizeToContent: function () { this._layoutRect.autoResize = true; this._lastRect = null; this.reflow(); }, resizeTo: function (w, h) { if (w <= 1 || h <= 1) { var rect = funcs.getWindowSize(); w = w <= 1 ? w * rect.w : w; h = h <= 1 ? h * rect.h : h; } this._layoutRect.autoResize = false; return this.layoutRect({ minW: w, minH: h, w: w, h: h }).reflow(); }, resizeBy: function (dw, dh) { var self = this, rect = self.layoutRect(); return self.resizeTo(rect.w + dw, rect.h + dh); } }; var documentClickHandler, documentScrollHandler, windowResizeHandler; var visiblePanels = []; var zOrder = []; var hasModal; function isChildOf(ctrl, parent) { while (ctrl) { if (ctrl === parent) { return true; } ctrl = ctrl.parent(); } } function skipOrHidePanels(e) { var i = visiblePanels.length; while (i--) { var panel = visiblePanels[i], clickCtrl = panel.getParentCtrl(e.target); if (panel.settings.autohide) { if (clickCtrl) { if (isChildOf(clickCtrl, panel) || panel.parent() === clickCtrl) { continue; } } e = panel.fire('autohide', { target: e.target }); if (!e.isDefaultPrevented()) { panel.hide(); } } } } function bindDocumentClickHandler() { if (!documentClickHandler) { documentClickHandler = function (e) { if (e.button === 2) { return; } skipOrHidePanels(e); }; global$9(domGlobals.document).on('click touchstart', documentClickHandler); } } function bindDocumentScrollHandler() { if (!documentScrollHandler) { documentScrollHandler = function () { var i; i = visiblePanels.length; while (i--) { repositionPanel(visiblePanels[i]); } }; global$9(domGlobals.window).on('scroll', documentScrollHandler); } } function bindWindowResizeHandler() { if (!windowResizeHandler) { var docElm_1 = domGlobals.document.documentElement; var clientWidth_1 = docElm_1.clientWidth, clientHeight_1 = docElm_1.clientHeight; windowResizeHandler = function () { if (!domGlobals.document.all || clientWidth_1 !== docElm_1.clientWidth || clientHeight_1 !== docElm_1.clientHeight) { clientWidth_1 = docElm_1.clientWidth; clientHeight_1 = docElm_1.clientHeight; FloatPanel.hideAll(); } }; global$9(domGlobals.window).on('resize', windowResizeHandler); } } function repositionPanel(panel) { var scrollY = funcs.getViewPort().y; function toggleFixedChildPanels(fixed, deltaY) { var parent; for (var i = 0; i < visiblePanels.length; i++) { if (visiblePanels[i] !== panel) { parent = visiblePanels[i].parent(); while (parent && (parent = parent.parent())) { if (parent === panel) { visiblePanels[i].fixed(fixed).moveBy(0, deltaY).repaint(); } } } } } if (panel.settings.autofix) { if (!panel.state.get('fixed')) { panel._autoFixY = panel.layoutRect().y; if (panel._autoFixY < scrollY) { panel.fixed(true).layoutRect({ y: 0 }).repaint(); toggleFixedChildPanels(true, scrollY - panel._autoFixY); } } else { if (panel._autoFixY > scrollY) { panel.fixed(false).layoutRect({ y: panel._autoFixY }).repaint(); toggleFixedChildPanels(false, panel._autoFixY - scrollY); } } } } function addRemove(add, ctrl) { var i, zIndex = FloatPanel.zIndex || 65535, topModal; if (add) { zOrder.push(ctrl); } else { i = zOrder.length; while (i--) { if (zOrder[i] === ctrl) { zOrder.splice(i, 1); } } } if (zOrder.length) { for (i = 0; i < zOrder.length; i++) { if (zOrder[i].modal) { zIndex++; topModal = zOrder[i]; } zOrder[i].getEl().style.zIndex = zIndex; zOrder[i].zIndex = zIndex; zIndex++; } } var modalBlockEl = global$9('#' + ctrl.classPrefix + 'modal-block', ctrl.getContainerElm())[0]; if (topModal) { global$9(modalBlockEl).css('z-index', topModal.zIndex - 1); } else if (modalBlockEl) { modalBlockEl.parentNode.removeChild(modalBlockEl); hasModal = false; } FloatPanel.currentZIndex = zIndex; } var FloatPanel = Panel.extend({ Mixins: [ Movable, Resizable ], init: function (settings) { var self = this; self._super(settings); self._eventsRoot = self; self.classes.add('floatpanel'); if (settings.autohide) { bindDocumentClickHandler(); bindWindowResizeHandler(); visiblePanels.push(self); } if (settings.autofix) { bindDocumentScrollHandler(); self.on('move', function () { repositionPanel(this); }); } self.on('postrender show', function (e) { if (e.control === self) { var $modalBlockEl_1; var prefix_1 = self.classPrefix; if (self.modal && !hasModal) { $modalBlockEl_1 = global$9('#' + prefix_1 + 'modal-block', self.getContainerElm()); if (!$modalBlockEl_1[0]) { $modalBlockEl_1 = global$9('
      ').appendTo(self.getContainerElm()); } global$7.setTimeout(function () { $modalBlockEl_1.addClass(prefix_1 + 'in'); global$9(self.getEl()).addClass(prefix_1 + 'in'); }); hasModal = true; } addRemove(true, self); } }); self.on('show', function () { self.parents().each(function (ctrl) { if (ctrl.state.get('fixed')) { self.fixed(true); return false; } }); }); if (settings.popover) { self._preBodyHtml = '
      '; self.classes.add('popover').add('bottom').add(self.isRtl() ? 'end' : 'start'); } self.aria('label', settings.ariaLabel); self.aria('labelledby', self._id); self.aria('describedby', self.describedBy || self._id + '-none'); }, fixed: function (state) { var self = this; if (self.state.get('fixed') !== state) { if (self.state.get('rendered')) { var viewport = funcs.getViewPort(); if (state) { self.layoutRect().y -= viewport.y; } else { self.layoutRect().y += viewport.y; } } self.classes.toggle('fixed', state); self.state.set('fixed', state); } return self; }, show: function () { var self = this; var i; var state = self._super(); i = visiblePanels.length; while (i--) { if (visiblePanels[i] === self) { break; } } if (i === -1) { visiblePanels.push(self); } return state; }, hide: function () { removeVisiblePanel(this); addRemove(false, this); return this._super(); }, hideAll: function () { FloatPanel.hideAll(); }, close: function () { var self = this; if (!self.fire('close').isDefaultPrevented()) { self.remove(); addRemove(false, self); } return self; }, remove: function () { removeVisiblePanel(this); this._super(); }, postRender: function () { var self = this; if (self.settings.bodyRole) { this.getEl('body').setAttribute('role', self.settings.bodyRole); } return self._super(); } }); FloatPanel.hideAll = function () { var i = visiblePanels.length; while (i--) { var panel = visiblePanels[i]; if (panel && panel.settings.autohide) { panel.hide(); visiblePanels.splice(i, 1); } } }; function removeVisiblePanel(panel) { var i; i = visiblePanels.length; while (i--) { if (visiblePanels[i] === panel) { visiblePanels.splice(i, 1); } } i = zOrder.length; while (i--) { if (zOrder[i] === panel) { zOrder.splice(i, 1); } } } var isFixed$1 = function (inlineToolbarContainer, editor) { return !!(inlineToolbarContainer && !editor.settings.ui_container); }; var render$1 = function (editor, theme, args) { var panel, inlineToolbarContainer; var DOM = global$3.DOM; var fixedToolbarContainer = getFixedToolbarContainer(editor); if (fixedToolbarContainer) { inlineToolbarContainer = DOM.select(fixedToolbarContainer)[0]; } var reposition = function () { if (panel && panel.moveRel && panel.visible() && !panel._fixed) { var scrollContainer = editor.selection.getScrollContainer(), body = editor.getBody(); var deltaX = 0, deltaY = 0; if (scrollContainer) { var bodyPos = DOM.getPos(body), scrollContainerPos = DOM.getPos(scrollContainer); deltaX = Math.max(0, scrollContainerPos.x - bodyPos.x); deltaY = Math.max(0, scrollContainerPos.y - bodyPos.y); } panel.fixed(false).moveRel(body, editor.rtl ? [ 'tr-br', 'br-tr' ] : [ 'tl-bl', 'bl-tl', 'tr-br' ]).moveBy(deltaX, deltaY); } }; var show = function () { if (panel) { panel.show(); reposition(); DOM.addClass(editor.getBody(), 'mce-edit-focus'); } }; var hide = function () { if (panel) { panel.hide(); FloatPanel.hideAll(); DOM.removeClass(editor.getBody(), 'mce-edit-focus'); } }; var render = function () { if (panel) { if (!panel.visible()) { show(); } return; } panel = theme.panel = global$4.create({ type: inlineToolbarContainer ? 'panel' : 'floatpanel', role: 'application', classes: 'tinymce tinymce-inline', layout: 'flex', direction: 'column', align: 'stretch', autohide: false, autofix: true, fixed: isFixed$1(inlineToolbarContainer, editor), border: 1, items: [ hasMenubar(editor) === false ? null : { type: 'menubar', border: '0 0 1 0', items: Menubar.createMenuButtons(editor) }, Toolbar.createToolbars(editor, getToolbarSize(editor)) ] }); UiContainer.setUiContainer(editor, panel); Events.fireBeforeRenderUI(editor); if (inlineToolbarContainer) { panel.renderTo(inlineToolbarContainer).reflow(); } else { panel.renderTo().reflow(); } A11y.addKeys(editor, panel); show(); ContextToolbars.addContextualToolbars(editor); editor.on('nodeChange', reposition); editor.on('ResizeWindow', reposition); editor.on('activate', show); editor.on('deactivate', hide); editor.nodeChanged(); }; editor.settings.content_editable = true; editor.on('focus', function () { if (isSkinDisabled(editor) === false && args.skinUiCss) { DOM.styleSheetLoader.load(args.skinUiCss, render, render); } else { render(); } }); editor.on('blur hide', hide); editor.on('remove', function () { if (panel) { panel.remove(); panel = null; } }); if (isSkinDisabled(editor) === false && args.skinUiCss) { DOM.styleSheetLoader.load(args.skinUiCss, SkinLoaded.fireSkinLoaded(editor)); } else { SkinLoaded.fireSkinLoaded(editor)(); } return {}; }; var Inline = { render: render$1 }; function Throbber (elm, inline) { var self = this; var state; var classPrefix = Control$1.classPrefix; var timer; self.show = function (time, callback) { function render() { if (state) { global$9(elm).append('
      '); if (callback) { callback(); } } } self.hide(); state = true; if (time) { timer = global$7.setTimeout(render, time); } else { render(); } return self; }; self.hide = function () { var child = elm.lastChild; global$7.clearTimeout(timer); if (child && child.className.indexOf('throbber') !== -1) { child.parentNode.removeChild(child); } state = false; return self; }; } var setup = function (editor, theme) { var throbber; editor.on('ProgressState', function (e) { throbber = throbber || new Throbber(theme.panel.getEl('body')); if (e.state) { throbber.show(e.time); } else { throbber.hide(); } }); }; var ProgressState = { setup: setup }; var renderUI = function (editor, theme, args) { var skinUrl = getSkinUrl(editor); if (skinUrl) { args.skinUiCss = skinUrl + '/skin.min.css'; editor.contentCSS.push(skinUrl + '/content' + (editor.inline ? '.inline' : '') + '.min.css'); } ProgressState.setup(editor, theme); return isInline(editor) ? Inline.render(editor, theme, args) : Iframe.render(editor, theme, args); }; var Render = { renderUI: renderUI }; var Tooltip = Control$1.extend({ Mixins: [Movable], Defaults: { classes: 'widget tooltip tooltip-n' }, renderHtml: function () { var self = this, prefix = self.classPrefix; return ''; }, bindStates: function () { var self = this; self.state.on('change:text', function (e) { self.getEl().lastChild.innerHTML = self.encode(e.value); }); return self._super(); }, repaint: function () { var self = this; var style, rect; style = self.getEl().style; rect = self._layoutRect; style.left = rect.x + 'px'; style.top = rect.y + 'px'; style.zIndex = 65535 + 65535; } }); var Widget = Control$1.extend({ init: function (settings) { var self = this; self._super(settings); settings = self.settings; self.canFocus = true; if (settings.tooltip && Widget.tooltips !== false) { self.on('mouseenter', function (e) { var tooltip = self.tooltip().moveTo(-65535); if (e.control === self) { var rel = tooltip.text(settings.tooltip).show().testMoveRel(self.getEl(), [ 'bc-tc', 'bc-tl', 'bc-tr' ]); tooltip.classes.toggle('tooltip-n', rel === 'bc-tc'); tooltip.classes.toggle('tooltip-nw', rel === 'bc-tl'); tooltip.classes.toggle('tooltip-ne', rel === 'bc-tr'); tooltip.moveRel(self.getEl(), rel); } else { tooltip.hide(); } }); self.on('mouseleave mousedown click', function () { self.tooltip().remove(); self._tooltip = null; }); } self.aria('label', settings.ariaLabel || settings.tooltip); }, tooltip: function () { if (!this._tooltip) { this._tooltip = new Tooltip({ type: 'tooltip' }); UiContainer.inheritUiContainer(this, this._tooltip); this._tooltip.renderTo(); } return this._tooltip; }, postRender: function () { var self = this, settings = self.settings; self._super(); if (!self.parent() && (settings.width || settings.height)) { self.initLayoutRect(); self.repaint(); } if (settings.autofocus) { self.focus(); } }, bindStates: function () { var self = this; function disable(state) { self.aria('disabled', state); self.classes.toggle('disabled', state); } function active(state) { self.aria('pressed', state); self.classes.toggle('active', state); } self.state.on('change:disabled', function (e) { disable(e.value); }); self.state.on('change:active', function (e) { active(e.value); }); if (self.state.get('disabled')) { disable(true); } if (self.state.get('active')) { active(true); } return self._super(); }, remove: function () { this._super(); if (this._tooltip) { this._tooltip.remove(); this._tooltip = null; } } }); var Progress = Widget.extend({ Defaults: { value: 0 }, init: function (settings) { var self = this; self._super(settings); self.classes.add('progress'); if (!self.settings.filter) { self.settings.filter = function (value) { return Math.round(value); }; } }, renderHtml: function () { var self = this, id = self._id, prefix = this.classPrefix; return '
      ' + '
      ' + '
      ' + '
      ' + '
      0%
      ' + '
      '; }, postRender: function () { var self = this; self._super(); self.value(self.settings.value); return self; }, bindStates: function () { var self = this; function setValue(value) { value = self.settings.filter(value); self.getEl().lastChild.innerHTML = value + '%'; self.getEl().firstChild.firstChild.style.width = value + '%'; } self.state.on('change:value', function (e) { setValue(e.value); }); setValue(self.state.get('value')); return self._super(); } }); var updateLiveRegion = function (ctx, text) { ctx.getEl().lastChild.textContent = text + (ctx.progressBar ? ' ' + ctx.progressBar.value() + '%' : ''); }; var Notification = Control$1.extend({ Mixins: [Movable], Defaults: { classes: 'widget notification' }, init: function (settings) { var self = this; self._super(settings); self.maxWidth = settings.maxWidth; if (settings.text) { self.text(settings.text); } if (settings.icon) { self.icon = settings.icon; } if (settings.color) { self.color = settings.color; } if (settings.type) { self.classes.add('notification-' + settings.type); } if (settings.timeout && (settings.timeout < 0 || settings.timeout > 0) && !settings.closeButton) { self.closeButton = false; } else { self.classes.add('has-close'); self.closeButton = true; } if (settings.progressBar) { self.progressBar = new Progress(); } self.on('click', function (e) { if (e.target.className.indexOf(self.classPrefix + 'close') !== -1) { self.close(); } }); }, renderHtml: function () { var self = this; var prefix = self.classPrefix; var icon = '', closeButton = '', progressBar = '', notificationStyle = ''; if (self.icon) { icon = ''; } notificationStyle = ' style="max-width: ' + self.maxWidth + 'px;' + (self.color ? 'background-color: ' + self.color + ';"' : '"'); if (self.closeButton) { closeButton = ''; } if (self.progressBar) { progressBar = self.progressBar.renderHtml(); } return ''; }, postRender: function () { var self = this; global$7.setTimeout(function () { self.$el.addClass(self.classPrefix + 'in'); updateLiveRegion(self, self.state.get('text')); }, 100); return self._super(); }, bindStates: function () { var self = this; self.state.on('change:text', function (e) { self.getEl().firstChild.innerHTML = e.value; updateLiveRegion(self, e.value); }); if (self.progressBar) { self.progressBar.bindStates(); self.progressBar.state.on('change:value', function (e) { updateLiveRegion(self, self.state.get('text')); }); } return self._super(); }, close: function () { var self = this; if (!self.fire('close').isDefaultPrevented()) { self.remove(); } return self; }, repaint: function () { var self = this; var style, rect; style = self.getEl().style; rect = self._layoutRect; style.left = rect.x + 'px'; style.top = rect.y + 'px'; style.zIndex = 65535 - 1; } }); function NotificationManagerImpl (editor) { var getEditorContainer = function (editor) { return editor.inline ? editor.getElement() : editor.getContentAreaContainer(); }; var getContainerWidth = function () { var container = getEditorContainer(editor); return funcs.getSize(container).width; }; var prePositionNotifications = function (notifications) { each(notifications, function (notification) { notification.moveTo(0, 0); }); }; var positionNotifications = function (notifications) { if (notifications.length > 0) { var firstItem = notifications.slice(0, 1)[0]; var container = getEditorContainer(editor); firstItem.moveRel(container, 'tc-tc'); each(notifications, function (notification, index) { if (index > 0) { notification.moveRel(notifications[index - 1].getEl(), 'bc-tc'); } }); } }; var reposition = function (notifications) { prePositionNotifications(notifications); positionNotifications(notifications); }; var open = function (args, closeCallback) { var extendedArgs = global$2.extend(args, { maxWidth: getContainerWidth() }); var notif = new Notification(extendedArgs); notif.args = extendedArgs; if (extendedArgs.timeout > 0) { notif.timer = setTimeout(function () { notif.close(); closeCallback(); }, extendedArgs.timeout); } notif.on('close', function () { closeCallback(); }); notif.renderTo(); return notif; }; var close = function (notification) { notification.close(); }; var getArgs = function (notification) { return notification.args; }; return { open: open, close: close, reposition: reposition, getArgs: getArgs }; } var windows = []; var oldMetaValue = ''; function toggleFullScreenState(state) { var noScaleMetaValue = 'width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0'; var viewport = global$9('meta[name=viewport]')[0], contentValue; if (global$8.overrideViewPort === false) { return; } if (!viewport) { viewport = domGlobals.document.createElement('meta'); viewport.setAttribute('name', 'viewport'); domGlobals.document.getElementsByTagName('head')[0].appendChild(viewport); } contentValue = viewport.getAttribute('content'); if (contentValue && typeof oldMetaValue !== 'undefined') { oldMetaValue = contentValue; } viewport.setAttribute('content', state ? noScaleMetaValue : oldMetaValue); } function toggleBodyFullScreenClasses(classPrefix, state) { if (checkFullscreenWindows() && state === false) { global$9([ domGlobals.document.documentElement, domGlobals.document.body ]).removeClass(classPrefix + 'fullscreen'); } } function checkFullscreenWindows() { for (var i = 0; i < windows.length; i++) { if (windows[i]._fullscreen) { return true; } } return false; } function handleWindowResize() { if (!global$8.desktop) { var lastSize_1 = { w: domGlobals.window.innerWidth, h: domGlobals.window.innerHeight }; global$7.setInterval(function () { var w = domGlobals.window.innerWidth, h = domGlobals.window.innerHeight; if (lastSize_1.w !== w || lastSize_1.h !== h) { lastSize_1 = { w: w, h: h }; global$9(domGlobals.window).trigger('resize'); } }, 100); } function reposition() { var i; var rect = funcs.getWindowSize(); var layoutRect; for (i = 0; i < windows.length; i++) { layoutRect = windows[i].layoutRect(); windows[i].moveTo(windows[i].settings.x || Math.max(0, rect.w / 2 - layoutRect.w / 2), windows[i].settings.y || Math.max(0, rect.h / 2 - layoutRect.h / 2)); } } global$9(domGlobals.window).on('resize', reposition); } var Window = FloatPanel.extend({ modal: true, Defaults: { border: 1, layout: 'flex', containerCls: 'panel', role: 'dialog', callbacks: { submit: function () { this.fire('submit', { data: this.toJSON() }); }, close: function () { this.close(); } } }, init: function (settings) { var self = this; self._super(settings); if (self.isRtl()) { self.classes.add('rtl'); } self.classes.add('window'); self.bodyClasses.add('window-body'); self.state.set('fixed', true); if (settings.buttons) { self.statusbar = new Panel({ layout: 'flex', border: '1 0 0 0', spacing: 3, padding: 10, align: 'center', pack: self.isRtl() ? 'start' : 'end', defaults: { type: 'button' }, items: settings.buttons }); self.statusbar.classes.add('foot'); self.statusbar.parent(self); } self.on('click', function (e) { var closeClass = self.classPrefix + 'close'; if (funcs.hasClass(e.target, closeClass) || funcs.hasClass(e.target.parentNode, closeClass)) { self.close(); } }); self.on('cancel', function () { self.close(); }); self.on('move', function (e) { if (e.control === self) { FloatPanel.hideAll(); } }); self.aria('describedby', self.describedBy || self._id + '-none'); self.aria('label', settings.title); self._fullscreen = false; }, recalc: function () { var self = this; var statusbar = self.statusbar; var layoutRect, width, x, needsRecalc; if (self._fullscreen) { self.layoutRect(funcs.getWindowSize()); self.layoutRect().contentH = self.layoutRect().innerH; } self._super(); layoutRect = self.layoutRect(); if (self.settings.title && !self._fullscreen) { width = layoutRect.headerW; if (width > layoutRect.w) { x = layoutRect.x - Math.max(0, width / 2); self.layoutRect({ w: width, x: x }); needsRecalc = true; } } if (statusbar) { statusbar.layoutRect({ w: self.layoutRect().innerW }).recalc(); width = statusbar.layoutRect().minW + layoutRect.deltaW; if (width > layoutRect.w) { x = layoutRect.x - Math.max(0, width - layoutRect.w); self.layoutRect({ w: width, x: x }); needsRecalc = true; } } if (needsRecalc) { self.recalc(); } }, initLayoutRect: function () { var self = this; var layoutRect = self._super(); var deltaH = 0, headEl; if (self.settings.title && !self._fullscreen) { headEl = self.getEl('head'); var size = funcs.getSize(headEl); layoutRect.headerW = size.width; layoutRect.headerH = size.height; deltaH += layoutRect.headerH; } if (self.statusbar) { deltaH += self.statusbar.layoutRect().h; } layoutRect.deltaH += deltaH; layoutRect.minH += deltaH; layoutRect.h += deltaH; var rect = funcs.getWindowSize(); layoutRect.x = self.settings.x || Math.max(0, rect.w / 2 - layoutRect.w / 2); layoutRect.y = self.settings.y || Math.max(0, rect.h / 2 - layoutRect.h / 2); return layoutRect; }, renderHtml: function () { var self = this, layout = self._layout, id = self._id, prefix = self.classPrefix; var settings = self.settings; var headerHtml = '', footerHtml = '', html = settings.html; self.preRender(); layout.preRender(self); if (settings.title) { headerHtml = '
      ' + '
      ' + self.encode(settings.title) + '
      ' + '
      ' + '' + '
      '; } if (settings.url) { html = ''; } if (typeof html === 'undefined') { html = layout.renderHtml(self); } if (self.statusbar) { footerHtml = self.statusbar.renderHtml(); } return '
      ' + '
      ' + headerHtml + '
      ' + html + '
      ' + footerHtml + '
      ' + '
      '; }, fullscreen: function (state) { var self = this; var documentElement = domGlobals.document.documentElement; var slowRendering; var prefix = self.classPrefix; var layoutRect; if (state !== self._fullscreen) { global$9(domGlobals.window).on('resize', function () { var time; if (self._fullscreen) { if (!slowRendering) { time = new Date().getTime(); var rect = funcs.getWindowSize(); self.moveTo(0, 0).resizeTo(rect.w, rect.h); if (new Date().getTime() - time > 50) { slowRendering = true; } } else { if (!self._timer) { self._timer = global$7.setTimeout(function () { var rect = funcs.getWindowSize(); self.moveTo(0, 0).resizeTo(rect.w, rect.h); self._timer = 0; }, 50); } } } }); layoutRect = self.layoutRect(); self._fullscreen = state; if (!state) { self.borderBox = BoxUtils.parseBox(self.settings.border); self.getEl('head').style.display = ''; layoutRect.deltaH += layoutRect.headerH; global$9([ documentElement, domGlobals.document.body ]).removeClass(prefix + 'fullscreen'); self.classes.remove('fullscreen'); self.moveTo(self._initial.x, self._initial.y).resizeTo(self._initial.w, self._initial.h); } else { self._initial = { x: layoutRect.x, y: layoutRect.y, w: layoutRect.w, h: layoutRect.h }; self.borderBox = BoxUtils.parseBox('0'); self.getEl('head').style.display = 'none'; layoutRect.deltaH -= layoutRect.headerH + 2; global$9([ documentElement, domGlobals.document.body ]).addClass(prefix + 'fullscreen'); self.classes.add('fullscreen'); var rect = funcs.getWindowSize(); self.moveTo(0, 0).resizeTo(rect.w, rect.h); } } return self.reflow(); }, postRender: function () { var self = this; var startPos; setTimeout(function () { self.classes.add('in'); self.fire('open'); }, 0); self._super(); if (self.statusbar) { self.statusbar.postRender(); } self.focus(); this.dragHelper = new DragHelper(self._id + '-dragh', { start: function () { startPos = { x: self.layoutRect().x, y: self.layoutRect().y }; }, drag: function (e) { self.moveTo(startPos.x + e.deltaX, startPos.y + e.deltaY); } }); self.on('submit', function (e) { if (!e.isDefaultPrevented()) { self.close(); } }); windows.push(self); toggleFullScreenState(true); }, submit: function () { return this.fire('submit', { data: this.toJSON() }); }, remove: function () { var self = this; var i; self.dragHelper.destroy(); self._super(); if (self.statusbar) { this.statusbar.remove(); } toggleBodyFullScreenClasses(self.classPrefix, false); i = windows.length; while (i--) { if (windows[i] === self) { windows.splice(i, 1); } } toggleFullScreenState(windows.length > 0); }, getContentWindow: function () { var ifr = this.getEl().getElementsByTagName('iframe')[0]; return ifr ? ifr.contentWindow : null; } }); handleWindowResize(); var MessageBox = Window.extend({ init: function (settings) { settings = { border: 1, padding: 20, layout: 'flex', pack: 'center', align: 'center', containerCls: 'panel', autoScroll: true, buttons: { type: 'button', text: 'Ok', action: 'ok' }, items: { type: 'label', multiline: true, maxWidth: 500, maxHeight: 200 } }; this._super(settings); }, Statics: { OK: 1, OK_CANCEL: 2, YES_NO: 3, YES_NO_CANCEL: 4, msgBox: function (settings) { var buttons; var callback = settings.callback || function () { }; function createButton(text, status, primary) { return { type: 'button', text: text, subtype: primary ? 'primary' : '', onClick: function (e) { e.control.parents()[1].close(); callback(status); } }; } switch (settings.buttons) { case MessageBox.OK_CANCEL: buttons = [ createButton('Ok', true, true), createButton('Cancel', false) ]; break; case MessageBox.YES_NO: case MessageBox.YES_NO_CANCEL: buttons = [ createButton('Yes', 1, true), createButton('No', 0) ]; if (settings.buttons === MessageBox.YES_NO_CANCEL) { buttons.push(createButton('Cancel', -1)); } break; default: buttons = [createButton('Ok', true, true)]; break; } return new Window({ padding: 20, x: settings.x, y: settings.y, minWidth: 300, minHeight: 100, layout: 'flex', pack: 'center', align: 'center', buttons: buttons, title: settings.title, role: 'alertdialog', items: { type: 'label', multiline: true, maxWidth: 500, maxHeight: 200, text: settings.text }, onPostRender: function () { this.aria('describedby', this.items()[0]._id); }, onClose: settings.onClose, onCancel: function () { callback(false); } }).renderTo(domGlobals.document.body).reflow(); }, alert: function (settings, callback) { if (typeof settings === 'string') { settings = { text: settings }; } settings.callback = callback; return MessageBox.msgBox(settings); }, confirm: function (settings, callback) { if (typeof settings === 'string') { settings = { text: settings }; } settings.callback = callback; settings.buttons = MessageBox.OK_CANCEL; return MessageBox.msgBox(settings); } } }); function WindowManagerImpl (editor) { var open = function (args, params, closeCallback) { var win; args.title = args.title || ' '; args.url = args.url || args.file; if (args.url) { args.width = parseInt(args.width || 320, 10); args.height = parseInt(args.height || 240, 10); } if (args.body) { args.items = { defaults: args.defaults, type: args.bodyType || 'form', items: args.body, data: args.data, callbacks: args.commands }; } if (!args.url && !args.buttons) { args.buttons = [ { text: 'Ok', subtype: 'primary', onclick: function () { win.find('form')[0].submit(); } }, { text: 'Cancel', onclick: function () { win.close(); } } ]; } win = new Window(args); win.on('close', function () { closeCallback(win); }); if (args.data) { win.on('postRender', function () { this.find('*').each(function (ctrl) { var name = ctrl.name(); if (name in args.data) { ctrl.value(args.data[name]); } }); }); } win.features = args || {}; win.params = params || {}; win = win.renderTo(domGlobals.document.body).reflow(); return win; }; var alert = function (message, choiceCallback, closeCallback) { var win; win = MessageBox.alert(message, function () { choiceCallback(); }); win.on('close', function () { closeCallback(win); }); return win; }; var confirm = function (message, choiceCallback, closeCallback) { var win; win = MessageBox.confirm(message, function (state) { choiceCallback(state); }); win.on('close', function () { closeCallback(win); }); return win; }; var close = function (window) { window.close(); }; var getParams = function (window) { return window.params; }; var setParams = function (window, params) { window.params = params; }; return { open: open, alert: alert, confirm: confirm, close: close, getParams: getParams, setParams: setParams }; } var get = function (editor) { var renderUI = function (args) { return Render.renderUI(editor, this, args); }; var resizeTo = function (w, h) { return Resize.resizeTo(editor, w, h); }; var resizeBy = function (dw, dh) { return Resize.resizeBy(editor, dw, dh); }; var getNotificationManagerImpl = function () { return NotificationManagerImpl(editor); }; var getWindowManagerImpl = function () { return WindowManagerImpl(); }; return { renderUI: renderUI, resizeTo: resizeTo, resizeBy: resizeBy, getNotificationManagerImpl: getNotificationManagerImpl, getWindowManagerImpl: getWindowManagerImpl }; }; var ThemeApi = { get: get }; var Layout = global$a.extend({ Defaults: { firstControlClass: 'first', lastControlClass: 'last' }, init: function (settings) { this.settings = global$2.extend({}, this.Defaults, settings); }, preRender: function (container) { container.bodyClasses.add(this.settings.containerClass); }, applyClasses: function (items) { var self = this; var settings = self.settings; var firstClass, lastClass, firstItem, lastItem; firstClass = settings.firstControlClass; lastClass = settings.lastControlClass; items.each(function (item) { item.classes.remove(firstClass).remove(lastClass).add(settings.controlClass); if (item.visible()) { if (!firstItem) { firstItem = item; } lastItem = item; } }); if (firstItem) { firstItem.classes.add(firstClass); } if (lastItem) { lastItem.classes.add(lastClass); } }, renderHtml: function (container) { var self = this; var html = ''; self.applyClasses(container.items()); container.items().each(function (item) { html += item.renderHtml(); }); return html; }, recalc: function () { }, postRender: function () { }, isNative: function () { return false; } }); var AbsoluteLayout = Layout.extend({ Defaults: { containerClass: 'abs-layout', controlClass: 'abs-layout-item' }, recalc: function (container) { container.items().filter(':visible').each(function (ctrl) { var settings = ctrl.settings; ctrl.layoutRect({ x: settings.x, y: settings.y, w: settings.w, h: settings.h }); if (ctrl.recalc) { ctrl.recalc(); } }); }, renderHtml: function (container) { return '
      ' + this._super(container); } }); var Button = Widget.extend({ Defaults: { classes: 'widget btn', role: 'button' }, init: function (settings) { var self = this; var size; self._super(settings); settings = self.settings; size = self.settings.size; self.on('click mousedown', function (e) { e.preventDefault(); }); self.on('touchstart', function (e) { self.fire('click', e); e.preventDefault(); }); if (settings.subtype) { self.classes.add(settings.subtype); } if (size) { self.classes.add('btn-' + size); } if (settings.icon) { self.icon(settings.icon); } }, icon: function (icon) { if (!arguments.length) { return this.state.get('icon'); } this.state.set('icon', icon); return this; }, repaint: function () { var btnElm = this.getEl().firstChild; var btnStyle; if (btnElm) { btnStyle = btnElm.style; btnStyle.width = btnStyle.height = '100%'; } this._super(); }, renderHtml: function () { var self = this, id = self._id, prefix = self.classPrefix; var icon = self.state.get('icon'), image; var text = self.state.get('text'); var textHtml = ''; var ariaPressed; var settings = self.settings; image = settings.image; if (image) { icon = 'none'; if (typeof image !== 'string') { image = domGlobals.window.getSelection ? image[0] : image[1]; } image = ' style="background-image: url(\'' + image + '\')"'; } else { image = ''; } if (text) { self.classes.add('btn-has-text'); textHtml = '' + self.encode(text) + ''; } icon = icon ? prefix + 'ico ' + prefix + 'i-' + icon : ''; ariaPressed = typeof settings.active === 'boolean' ? ' aria-pressed="' + settings.active + '"' : ''; return '
      ' + '' + '
      '; }, bindStates: function () { var self = this, $ = self.$, textCls = self.classPrefix + 'txt'; function setButtonText(text) { var $span = $('span.' + textCls, self.getEl()); if (text) { if (!$span[0]) { $('button:first', self.getEl()).append(''); $span = $('span.' + textCls, self.getEl()); } $span.html(self.encode(text)); } else { $span.remove(); } self.classes.toggle('btn-has-text', !!text); } self.state.on('change:text', function (e) { setButtonText(e.value); }); self.state.on('change:icon', function (e) { var icon = e.value; var prefix = self.classPrefix; self.settings.icon = icon; icon = icon ? prefix + 'ico ' + prefix + 'i-' + self.settings.icon : ''; var btnElm = self.getEl().firstChild; var iconElm = btnElm.getElementsByTagName('i')[0]; if (icon) { if (!iconElm || iconElm !== btnElm.firstChild) { iconElm = domGlobals.document.createElement('i'); btnElm.insertBefore(iconElm, btnElm.firstChild); } iconElm.className = icon; } else if (iconElm) { btnElm.removeChild(iconElm); } setButtonText(self.state.get('text')); }); return self._super(); } }); var BrowseButton = Button.extend({ init: function (settings) { var self = this; settings = global$2.extend({ text: 'Browse...', multiple: false, accept: null }, settings); self._super(settings); self.classes.add('browsebutton'); if (settings.multiple) { self.classes.add('multiple'); } }, postRender: function () { var self = this; var input = funcs.create('input', { type: 'file', id: self._id + '-browse', accept: self.settings.accept }); self._super(); global$9(input).on('change', function (e) { var files = e.target.files; self.value = function () { if (!files.length) { return null; } else if (self.settings.multiple) { return files; } else { return files[0]; } }; e.preventDefault(); if (files.length) { self.fire('change', e); } }); global$9(input).on('click', function (e) { e.stopPropagation(); }); global$9(self.getEl('button')).on('click touchstart', function (e) { e.stopPropagation(); input.click(); e.preventDefault(); }); self.getEl().appendChild(input); }, remove: function () { global$9(this.getEl('button')).off(); global$9(this.getEl('input')).off(); this._super(); } }); var ButtonGroup = Container.extend({ Defaults: { defaultType: 'button', role: 'group' }, renderHtml: function () { var self = this, layout = self._layout; self.classes.add('btn-group'); self.preRender(); layout.preRender(self); return '
      ' + '
      ' + (self.settings.html || '') + layout.renderHtml(self) + '
      ' + '
      '; } }); var Checkbox = Widget.extend({ Defaults: { classes: 'checkbox', role: 'checkbox', checked: false }, init: function (settings) { var self = this; self._super(settings); self.on('click mousedown', function (e) { e.preventDefault(); }); self.on('click', function (e) { e.preventDefault(); if (!self.disabled()) { self.checked(!self.checked()); } }); self.checked(self.settings.checked); }, checked: function (state) { if (!arguments.length) { return this.state.get('checked'); } this.state.set('checked', state); return this; }, value: function (state) { if (!arguments.length) { return this.checked(); } return this.checked(state); }, renderHtml: function () { var self = this, id = self._id, prefix = self.classPrefix; return '
      ' + '' + '' + self.encode(self.state.get('text')) + '' + '
      '; }, bindStates: function () { var self = this; function checked(state) { self.classes.toggle('checked', state); self.aria('checked', state); } self.state.on('change:text', function (e) { self.getEl('al').firstChild.data = self.translate(e.value); }); self.state.on('change:checked change:value', function (e) { self.fire('change'); checked(e.value); }); self.state.on('change:icon', function (e) { var icon = e.value; var prefix = self.classPrefix; if (typeof icon === 'undefined') { return self.settings.icon; } self.settings.icon = icon; icon = icon ? prefix + 'ico ' + prefix + 'i-' + self.settings.icon : ''; var btnElm = self.getEl().firstChild; var iconElm = btnElm.getElementsByTagName('i')[0]; if (icon) { if (!iconElm || iconElm !== btnElm.firstChild) { iconElm = domGlobals.document.createElement('i'); btnElm.insertBefore(iconElm, btnElm.firstChild); } iconElm.className = icon; } else if (iconElm) { btnElm.removeChild(iconElm); } }); if (self.state.get('checked')) { checked(true); } return self._super(); } }); var global$d = tinymce.util.Tools.resolve('tinymce.util.VK'); var ComboBox = Widget.extend({ init: function (settings) { var self = this; self._super(settings); settings = self.settings; self.classes.add('combobox'); self.subinput = true; self.ariaTarget = 'inp'; settings.menu = settings.menu || settings.values; if (settings.menu) { settings.icon = 'caret'; } self.on('click', function (e) { var elm = e.target; var root = self.getEl(); if (!global$9.contains(root, elm) && elm !== root) { return; } while (elm && elm !== root) { if (elm.id && elm.id.indexOf('-open') !== -1) { self.fire('action'); if (settings.menu) { self.showMenu(); if (e.aria) { self.menu.items()[0].focus(); } } } elm = elm.parentNode; } }); self.on('keydown', function (e) { var rootControl; if (e.keyCode === 13 && e.target.nodeName === 'INPUT') { e.preventDefault(); self.parents().reverse().each(function (ctrl) { if (ctrl.toJSON) { rootControl = ctrl; return false; } }); self.fire('submit', { data: rootControl.toJSON() }); } }); self.on('keyup', function (e) { if (e.target.nodeName === 'INPUT') { var oldValue = self.state.get('value'); var newValue = e.target.value; if (newValue !== oldValue) { self.state.set('value', newValue); self.fire('autocomplete', e); } } }); self.on('mouseover', function (e) { var tooltip = self.tooltip().moveTo(-65535); if (self.statusLevel() && e.target.className.indexOf(self.classPrefix + 'status') !== -1) { var statusMessage = self.statusMessage() || 'Ok'; var rel = tooltip.text(statusMessage).show().testMoveRel(e.target, [ 'bc-tc', 'bc-tl', 'bc-tr' ]); tooltip.classes.toggle('tooltip-n', rel === 'bc-tc'); tooltip.classes.toggle('tooltip-nw', rel === 'bc-tl'); tooltip.classes.toggle('tooltip-ne', rel === 'bc-tr'); tooltip.moveRel(e.target, rel); } }); }, statusLevel: function (value) { if (arguments.length > 0) { this.state.set('statusLevel', value); } return this.state.get('statusLevel'); }, statusMessage: function (value) { if (arguments.length > 0) { this.state.set('statusMessage', value); } return this.state.get('statusMessage'); }, showMenu: function () { var self = this; var settings = self.settings; var menu; if (!self.menu) { menu = settings.menu || []; if (menu.length) { menu = { type: 'menu', items: menu }; } else { menu.type = menu.type || 'menu'; } self.menu = global$4.create(menu).parent(self).renderTo(self.getContainerElm()); self.fire('createmenu'); self.menu.reflow(); self.menu.on('cancel', function (e) { if (e.control === self.menu) { self.focus(); } }); self.menu.on('show hide', function (e) { e.control.items().each(function (ctrl) { ctrl.active(ctrl.value() === self.value()); }); }).fire('show'); self.menu.on('select', function (e) { self.value(e.control.value()); }); self.on('focusin', function (e) { if (e.target.tagName.toUpperCase() === 'INPUT') { self.menu.hide(); } }); self.aria('expanded', true); } self.menu.show(); self.menu.layoutRect({ w: self.layoutRect().w }); self.menu.moveRel(self.getEl(), self.isRtl() ? [ 'br-tr', 'tr-br' ] : [ 'bl-tl', 'tl-bl' ]); }, focus: function () { this.getEl('inp').focus(); }, repaint: function () { var self = this, elm = self.getEl(), openElm = self.getEl('open'), rect = self.layoutRect(); var width, lineHeight, innerPadding = 0; var inputElm = elm.firstChild; if (self.statusLevel() && self.statusLevel() !== 'none') { innerPadding = parseInt(funcs.getRuntimeStyle(inputElm, 'padding-right'), 10) - parseInt(funcs.getRuntimeStyle(inputElm, 'padding-left'), 10); } if (openElm) { width = rect.w - funcs.getSize(openElm).width - 10; } else { width = rect.w - 10; } var doc = domGlobals.document; if (doc.all && (!doc.documentMode || doc.documentMode <= 8)) { lineHeight = self.layoutRect().h - 2 + 'px'; } global$9(inputElm).css({ width: width - innerPadding, lineHeight: lineHeight }); self._super(); return self; }, postRender: function () { var self = this; global$9(this.getEl('inp')).on('change', function (e) { self.state.set('value', e.target.value); self.fire('change', e); }); return self._super(); }, renderHtml: function () { var self = this, id = self._id, settings = self.settings, prefix = self.classPrefix; var value = self.state.get('value') || ''; var icon, text, openBtnHtml = '', extraAttrs = '', statusHtml = ''; if ('spellcheck' in settings) { extraAttrs += ' spellcheck="' + settings.spellcheck + '"'; } if (settings.maxLength) { extraAttrs += ' maxlength="' + settings.maxLength + '"'; } if (settings.size) { extraAttrs += ' size="' + settings.size + '"'; } if (settings.subtype) { extraAttrs += ' type="' + settings.subtype + '"'; } statusHtml = ''; if (self.disabled()) { extraAttrs += ' disabled="disabled"'; } icon = settings.icon; if (icon && icon !== 'caret') { icon = prefix + 'ico ' + prefix + 'i-' + settings.icon; } text = self.state.get('text'); if (icon || text) { openBtnHtml = '
      ' + '' + '
      '; self.classes.add('has-open'); } return '
      ' + '' + statusHtml + openBtnHtml + '
      '; }, value: function (value) { if (arguments.length) { this.state.set('value', value); return this; } if (this.state.get('rendered')) { this.state.set('value', this.getEl('inp').value); } return this.state.get('value'); }, showAutoComplete: function (items, term) { var self = this; if (items.length === 0) { self.hideMenu(); return; } var insert = function (value, title) { return function () { self.fire('selectitem', { title: title, value: value }); }; }; if (self.menu) { self.menu.items().remove(); } else { self.menu = global$4.create({ type: 'menu', classes: 'combobox-menu', layout: 'flow' }).parent(self).renderTo(); } global$2.each(items, function (item) { self.menu.add({ text: item.title, url: item.previewUrl, match: term, classes: 'menu-item-ellipsis', onclick: insert(item.value, item.title) }); }); self.menu.renderNew(); self.hideMenu(); self.menu.on('cancel', function (e) { if (e.control.parent() === self.menu) { e.stopPropagation(); self.focus(); self.hideMenu(); } }); self.menu.on('select', function () { self.focus(); }); var maxW = self.layoutRect().w; self.menu.layoutRect({ w: maxW, minW: 0, maxW: maxW }); self.menu.repaint(); self.menu.reflow(); self.menu.show(); self.menu.moveRel(self.getEl(), self.isRtl() ? [ 'br-tr', 'tr-br' ] : [ 'bl-tl', 'tl-bl' ]); }, hideMenu: function () { if (this.menu) { this.menu.hide(); } }, bindStates: function () { var self = this; self.state.on('change:value', function (e) { if (self.getEl('inp').value !== e.value) { self.getEl('inp').value = e.value; } }); self.state.on('change:disabled', function (e) { self.getEl('inp').disabled = e.value; }); self.state.on('change:statusLevel', function (e) { var statusIconElm = self.getEl('status'); var prefix = self.classPrefix, value = e.value; funcs.css(statusIconElm, 'display', value === 'none' ? 'none' : ''); funcs.toggleClass(statusIconElm, prefix + 'i-checkmark', value === 'ok'); funcs.toggleClass(statusIconElm, prefix + 'i-warning', value === 'warn'); funcs.toggleClass(statusIconElm, prefix + 'i-error', value === 'error'); self.classes.toggle('has-status', value !== 'none'); self.repaint(); }); funcs.on(self.getEl('status'), 'mouseleave', function () { self.tooltip().hide(); }); self.on('cancel', function (e) { if (self.menu && self.menu.visible()) { e.stopPropagation(); self.hideMenu(); } }); var focusIdx = function (idx, menu) { if (menu && menu.items().length > 0) { menu.items().eq(idx)[0].focus(); } }; self.on('keydown', function (e) { var keyCode = e.keyCode; if (e.target.nodeName === 'INPUT') { if (keyCode === global$d.DOWN) { e.preventDefault(); self.fire('autocomplete'); focusIdx(0, self.menu); } else if (keyCode === global$d.UP) { e.preventDefault(); focusIdx(-1, self.menu); } } }); return self._super(); }, remove: function () { global$9(this.getEl('inp')).off(); if (this.menu) { this.menu.remove(); } this._super(); } }); var ColorBox = ComboBox.extend({ init: function (settings) { var self = this; settings.spellcheck = false; if (settings.onaction) { settings.icon = 'none'; } self._super(settings); self.classes.add('colorbox'); self.on('change keyup postrender', function () { self.repaintColor(self.value()); }); }, repaintColor: function (value) { var openElm = this.getEl('open'); var elm = openElm ? openElm.getElementsByTagName('i')[0] : null; if (elm) { try { elm.style.background = value; } catch (ex) { } } }, bindStates: function () { var self = this; self.state.on('change:value', function (e) { if (self.state.get('rendered')) { self.repaintColor(e.value); } }); return self._super(); } }); var PanelButton = Button.extend({ showPanel: function () { var self = this, settings = self.settings; self.classes.add('opened'); if (!self.panel) { var panelSettings = settings.panel; if (panelSettings.type) { panelSettings = { layout: 'grid', items: panelSettings }; } panelSettings.role = panelSettings.role || 'dialog'; panelSettings.popover = true; panelSettings.autohide = true; panelSettings.ariaRoot = true; self.panel = new FloatPanel(panelSettings).on('hide', function () { self.classes.remove('opened'); }).on('cancel', function (e) { e.stopPropagation(); self.focus(); self.hidePanel(); }).parent(self).renderTo(self.getContainerElm()); self.panel.fire('show'); self.panel.reflow(); } else { self.panel.show(); } var rtlRels = [ 'bc-tc', 'bc-tl', 'bc-tr' ]; var ltrRels = [ 'bc-tc', 'bc-tr', 'bc-tl', 'tc-bc', 'tc-br', 'tc-bl' ]; var rel = self.panel.testMoveRel(self.getEl(), settings.popoverAlign || (self.isRtl() ? rtlRels : ltrRels)); self.panel.classes.toggle('start', rel.substr(-1) === 'l'); self.panel.classes.toggle('end', rel.substr(-1) === 'r'); var isTop = rel.substr(0, 1) === 't'; self.panel.classes.toggle('bottom', !isTop); self.panel.classes.toggle('top', isTop); self.panel.moveRel(self.getEl(), rel); }, hidePanel: function () { var self = this; if (self.panel) { self.panel.hide(); } }, postRender: function () { var self = this; self.aria('haspopup', true); self.on('click', function (e) { if (e.control === self) { if (self.panel && self.panel.visible()) { self.hidePanel(); } else { self.showPanel(); self.panel.focus(!!e.aria); } } }); return self._super(); }, remove: function () { if (this.panel) { this.panel.remove(); this.panel = null; } return this._super(); } }); var DOM$3 = global$3.DOM; var ColorButton = PanelButton.extend({ init: function (settings) { this._super(settings); this.classes.add('splitbtn'); this.classes.add('colorbutton'); }, color: function (color) { if (color) { this._color = color; this.getEl('preview').style.backgroundColor = color; return this; } return this._color; }, resetColor: function () { this._color = null; this.getEl('preview').style.backgroundColor = null; return this; }, renderHtml: function () { var self = this, id = self._id, prefix = self.classPrefix, text = self.state.get('text'); var icon = self.settings.icon ? prefix + 'ico ' + prefix + 'i-' + self.settings.icon : ''; var image = self.settings.image ? ' style="background-image: url(\'' + self.settings.image + '\')"' : ''; var textHtml = ''; if (text) { self.classes.add('btn-has-text'); textHtml = '' + self.encode(text) + ''; } return '
      ' + '' + '' + '
      '; }, postRender: function () { var self = this, onClickHandler = self.settings.onclick; self.on('click', function (e) { if (e.aria && e.aria.key === 'down') { return; } if (e.control === self && !DOM$3.getParent(e.target, '.' + self.classPrefix + 'open')) { e.stopImmediatePropagation(); onClickHandler.call(self, e); } }); delete self.settings.onclick; return self._super(); } }); var global$e = tinymce.util.Tools.resolve('tinymce.util.Color'); var ColorPicker = Widget.extend({ Defaults: { classes: 'widget colorpicker' }, init: function (settings) { this._super(settings); }, postRender: function () { var self = this; var color = self.color(); var hsv, hueRootElm, huePointElm, svRootElm, svPointElm; hueRootElm = self.getEl('h'); huePointElm = self.getEl('hp'); svRootElm = self.getEl('sv'); svPointElm = self.getEl('svp'); function getPos(elm, event) { var pos = funcs.getPos(elm); var x, y; x = event.pageX - pos.x; y = event.pageY - pos.y; x = Math.max(0, Math.min(x / elm.clientWidth, 1)); y = Math.max(0, Math.min(y / elm.clientHeight, 1)); return { x: x, y: y }; } function updateColor(hsv, hueUpdate) { var hue = (360 - hsv.h) / 360; funcs.css(huePointElm, { top: hue * 100 + '%' }); if (!hueUpdate) { funcs.css(svPointElm, { left: hsv.s + '%', top: 100 - hsv.v + '%' }); } svRootElm.style.background = global$e({ s: 100, v: 100, h: hsv.h }).toHex(); self.color().parse({ s: hsv.s, v: hsv.v, h: hsv.h }); } function updateSaturationAndValue(e) { var pos; pos = getPos(svRootElm, e); hsv.s = pos.x * 100; hsv.v = (1 - pos.y) * 100; updateColor(hsv); self.fire('change'); } function updateHue(e) { var pos; pos = getPos(hueRootElm, e); hsv = color.toHsv(); hsv.h = (1 - pos.y) * 360; updateColor(hsv, true); self.fire('change'); } self._repaint = function () { hsv = color.toHsv(); updateColor(hsv); }; self._super(); self._svdraghelper = new DragHelper(self._id + '-sv', { start: updateSaturationAndValue, drag: updateSaturationAndValue }); self._hdraghelper = new DragHelper(self._id + '-h', { start: updateHue, drag: updateHue }); self._repaint(); }, rgb: function () { return this.color().toRgb(); }, value: function (value) { var self = this; if (arguments.length) { self.color().parse(value); if (self._rendered) { self._repaint(); } } else { return self.color().toHex(); } }, color: function () { if (!this._color) { this._color = global$e(); } return this._color; }, renderHtml: function () { var self = this; var id = self._id; var prefix = self.classPrefix; var hueHtml; var stops = '#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000'; function getOldIeFallbackHtml() { var i, l, html = '', gradientPrefix, stopsList; gradientPrefix = 'filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='; stopsList = stops.split(','); for (i = 0, l = stopsList.length - 1; i < l; i++) { html += '
      '; } return html; } var gradientCssText = 'background: -ms-linear-gradient(top,' + stops + ');' + 'background: linear-gradient(to bottom,' + stops + ');'; hueHtml = '
      ' + getOldIeFallbackHtml() + '
      ' + '
      '; return '
      ' + '
      ' + '
      ' + '
      ' + '
      ' + '
      ' + '
      ' + '
      ' + '
      ' + '
      ' + hueHtml + '
      '; } }); var DropZone = Widget.extend({ init: function (settings) { var self = this; settings = global$2.extend({ height: 100, text: 'Drop an image here', multiple: false, accept: null }, settings); self._super(settings); self.classes.add('dropzone'); if (settings.multiple) { self.classes.add('multiple'); } }, renderHtml: function () { var self = this; var attrs, elm; var cfg = self.settings; attrs = { id: self._id, hidefocus: '1' }; elm = funcs.create('div', attrs, '' + this.translate(cfg.text) + ''); if (cfg.height) { funcs.css(elm, 'height', cfg.height + 'px'); } if (cfg.width) { funcs.css(elm, 'width', cfg.width + 'px'); } elm.className = self.classes; return elm.outerHTML; }, postRender: function () { var self = this; var toggleDragClass = function (e) { e.preventDefault(); self.classes.toggle('dragenter'); self.getEl().className = self.classes; }; var filter = function (files) { var accept = self.settings.accept; if (typeof accept !== 'string') { return files; } var re = new RegExp('(' + accept.split(/\s*,\s*/).join('|') + ')$', 'i'); return global$2.grep(files, function (file) { return re.test(file.name); }); }; self._super(); self.$el.on('dragover', function (e) { e.preventDefault(); }); self.$el.on('dragenter', toggleDragClass); self.$el.on('dragleave', toggleDragClass); self.$el.on('drop', function (e) { e.preventDefault(); if (self.state.get('disabled')) { return; } var files = filter(e.dataTransfer.files); self.value = function () { if (!files.length) { return null; } else if (self.settings.multiple) { return files; } else { return files[0]; } }; if (files.length) { self.fire('change', e); } }); }, remove: function () { this.$el.off(); this._super(); } }); var Path = Widget.extend({ init: function (settings) { var self = this; if (!settings.delimiter) { settings.delimiter = '\xBB'; } self._super(settings); self.classes.add('path'); self.canFocus = true; self.on('click', function (e) { var index; var target = e.target; if (index = target.getAttribute('data-index')) { self.fire('select', { value: self.row()[index], index: index }); } }); self.row(self.settings.row); }, focus: function () { var self = this; self.getEl().firstChild.focus(); return self; }, row: function (row) { if (!arguments.length) { return this.state.get('row'); } this.state.set('row', row); return this; }, renderHtml: function () { var self = this; return '
      ' + self._getDataPathHtml(self.state.get('row')) + '
      '; }, bindStates: function () { var self = this; self.state.on('change:row', function (e) { self.innerHtml(self._getDataPathHtml(e.value)); }); return self._super(); }, _getDataPathHtml: function (data) { var self = this; var parts = data || []; var i, l, html = ''; var prefix = self.classPrefix; for (i = 0, l = parts.length; i < l; i++) { html += (i > 0 ? '' : '') + '
      ' + parts[i].name + '
      '; } if (!html) { html = '
      \xA0
      '; } return html; } }); var ElementPath = Path.extend({ postRender: function () { var self = this, editor = self.settings.editor; function isHidden(elm) { if (elm.nodeType === 1) { if (elm.nodeName === 'BR' || !!elm.getAttribute('data-mce-bogus')) { return true; } if (elm.getAttribute('data-mce-type') === 'bookmark') { return true; } } return false; } if (editor.settings.elementpath !== false) { self.on('select', function (e) { editor.focus(); editor.selection.select(this.row()[e.index].element); editor.nodeChanged(); }); editor.on('nodeChange', function (e) { var outParents = []; var parents = e.parents; var i = parents.length; while (i--) { if (parents[i].nodeType === 1 && !isHidden(parents[i])) { var args = editor.fire('ResolveName', { name: parents[i].nodeName.toLowerCase(), target: parents[i] }); if (!args.isDefaultPrevented()) { outParents.push({ name: args.name, element: parents[i] }); } if (args.isPropagationStopped()) { break; } } } self.row(outParents); }); } return self._super(); } }); var FormItem = Container.extend({ Defaults: { layout: 'flex', align: 'center', defaults: { flex: 1 } }, renderHtml: function () { var self = this, layout = self._layout, prefix = self.classPrefix; self.classes.add('formitem'); layout.preRender(self); return '
      ' + (self.settings.title ? '
      ' + self.settings.title + '
      ' : '') + '
      ' + (self.settings.html || '') + layout.renderHtml(self) + '
      ' + '
      '; } }); var Form = Container.extend({ Defaults: { containerCls: 'form', layout: 'flex', direction: 'column', align: 'stretch', flex: 1, padding: 15, labelGap: 30, spacing: 10, callbacks: { submit: function () { this.submit(); } } }, preRender: function () { var self = this, items = self.items(); if (!self.settings.formItemDefaults) { self.settings.formItemDefaults = { layout: 'flex', autoResize: 'overflow', defaults: { flex: 1 } }; } items.each(function (ctrl) { var formItem; var label = ctrl.settings.label; if (label) { formItem = new FormItem(global$2.extend({ items: { type: 'label', id: ctrl._id + '-l', text: label, flex: 0, forId: ctrl._id, disabled: ctrl.disabled() } }, self.settings.formItemDefaults)); formItem.type = 'formitem'; ctrl.aria('labelledby', ctrl._id + '-l'); if (typeof ctrl.settings.flex === 'undefined') { ctrl.settings.flex = 1; } self.replace(ctrl, formItem); formItem.add(ctrl); } }); }, submit: function () { return this.fire('submit', { data: this.toJSON() }); }, postRender: function () { var self = this; self._super(); self.fromJSON(self.settings.data); }, bindStates: function () { var self = this; self._super(); function recalcLabels() { var maxLabelWidth = 0; var labels = []; var i, labelGap, items; if (self.settings.labelGapCalc === false) { return; } if (self.settings.labelGapCalc === 'children') { items = self.find('formitem'); } else { items = self.items(); } items.filter('formitem').each(function (item) { var labelCtrl = item.items()[0], labelWidth = labelCtrl.getEl().clientWidth; maxLabelWidth = labelWidth > maxLabelWidth ? labelWidth : maxLabelWidth; labels.push(labelCtrl); }); labelGap = self.settings.labelGap || 0; i = labels.length; while (i--) { labels[i].settings.minWidth = maxLabelWidth + labelGap; } } self.on('show', recalcLabels); recalcLabels(); } }); var FieldSet = Form.extend({ Defaults: { containerCls: 'fieldset', layout: 'flex', direction: 'column', align: 'stretch', flex: 1, padding: '25 15 5 15', labelGap: 30, spacing: 10, border: 1 }, renderHtml: function () { var self = this, layout = self._layout, prefix = self.classPrefix; self.preRender(); layout.preRender(self); return '
      ' + (self.settings.title ? '' + self.settings.title + '' : '') + '
      ' + (self.settings.html || '') + layout.renderHtml(self) + '
      ' + '
      '; } }); var unique$1 = 0; var generate = function (prefix) { var date = new Date(); var time = date.getTime(); var random = Math.floor(Math.random() * 1000000000); unique$1++; return prefix + '_' + random + unique$1 + String(time); }; var fromHtml = function (html, scope) { var doc = scope || domGlobals.document; var div = doc.createElement('div'); div.innerHTML = html; if (!div.hasChildNodes() || div.childNodes.length > 1) { domGlobals.console.error('HTML does not have a single root node', html); throw new Error('HTML must have a single root node'); } return fromDom(div.childNodes[0]); }; var fromTag = function (tag, scope) { var doc = scope || domGlobals.document; var node = doc.createElement(tag); return fromDom(node); }; var fromText = function (text, scope) { var doc = scope || domGlobals.document; var node = doc.createTextNode(text); return fromDom(node); }; var fromDom = function (node) { if (node === null || node === undefined) { throw new Error('Node cannot be null or undefined'); } return { dom: constant(node) }; }; var fromPoint = function (docElm, x, y) { var doc = docElm.dom(); return Option.from(doc.elementFromPoint(x, y)).map(fromDom); }; var Element = { fromHtml: fromHtml, fromTag: fromTag, fromText: fromText, fromDom: fromDom, fromPoint: fromPoint }; var cached = function (f) { var called = false; var r; return function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (!called) { called = true; r = f.apply(null, args); } return r; }; }; var ATTRIBUTE = domGlobals.Node.ATTRIBUTE_NODE; var CDATA_SECTION = domGlobals.Node.CDATA_SECTION_NODE; var COMMENT = domGlobals.Node.COMMENT_NODE; var DOCUMENT = domGlobals.Node.DOCUMENT_NODE; var DOCUMENT_TYPE = domGlobals.Node.DOCUMENT_TYPE_NODE; var DOCUMENT_FRAGMENT = domGlobals.Node.DOCUMENT_FRAGMENT_NODE; var ELEMENT = domGlobals.Node.ELEMENT_NODE; var TEXT = domGlobals.Node.TEXT_NODE; var PROCESSING_INSTRUCTION = domGlobals.Node.PROCESSING_INSTRUCTION_NODE; var ENTITY_REFERENCE = domGlobals.Node.ENTITY_REFERENCE_NODE; var ENTITY = domGlobals.Node.ENTITY_NODE; var NOTATION = domGlobals.Node.NOTATION_NODE; var Global = typeof domGlobals.window !== 'undefined' ? domGlobals.window : Function('return this;')(); var path = function (parts, scope) { var o = scope !== undefined && scope !== null ? scope : Global; for (var i = 0; i < parts.length && o !== undefined && o !== null; ++i) { o = o[parts[i]]; } return o; }; var resolve = function (p, scope) { var parts = p.split('.'); return path(parts, scope); }; var unsafe = function (name, scope) { return resolve(name, scope); }; var getOrDie = function (name, scope) { var actual = unsafe(name, scope); if (actual === undefined || actual === null) { throw new Error(name + ' not available on this browser'); } return actual; }; var Global$1 = { getOrDie: getOrDie }; var Immutable = function () { var fields = []; for (var _i = 0; _i < arguments.length; _i++) { fields[_i] = arguments[_i]; } return function () { var values = []; for (var _i = 0; _i < arguments.length; _i++) { values[_i] = arguments[_i]; } if (fields.length !== values.length) { throw new Error('Wrong number of arguments to struct. Expected "[' + fields.length + ']", got ' + values.length + ' arguments'); } var struct = {}; each(fields, function (name, i) { struct[name] = constant(values[i]); }); return struct; }; }; var node = function () { var f = Global$1.getOrDie('Node'); return f; }; var compareDocumentPosition = function (a, b, match) { return (a.compareDocumentPosition(b) & match) !== 0; }; var documentPositionPreceding = function (a, b) { return compareDocumentPosition(a, b, node().DOCUMENT_POSITION_PRECEDING); }; var documentPositionContainedBy = function (a, b) { return compareDocumentPosition(a, b, node().DOCUMENT_POSITION_CONTAINED_BY); }; var Node = { documentPositionPreceding: documentPositionPreceding, documentPositionContainedBy: documentPositionContainedBy }; var firstMatch = function (regexes, s) { for (var i = 0; i < regexes.length; i++) { var x = regexes[i]; if (x.test(s)) { return x; } } return undefined; }; var find$1 = function (regexes, agent) { var r = firstMatch(regexes, agent); if (!r) { return { major: 0, minor: 0 }; } var group = function (i) { return Number(agent.replace(r, '$' + i)); }; return nu(group(1), group(2)); }; var detect = function (versionRegexes, agent) { var cleanedAgent = String(agent).toLowerCase(); if (versionRegexes.length === 0) { return unknown(); } return find$1(versionRegexes, cleanedAgent); }; var unknown = function () { return nu(0, 0); }; var nu = function (major, minor) { return { major: major, minor: minor }; }; var Version = { nu: nu, detect: detect, unknown: unknown }; var edge = 'Edge'; var chrome = 'Chrome'; var ie = 'IE'; var opera = 'Opera'; var firefox = 'Firefox'; var safari = 'Safari'; var isBrowser = function (name, current) { return function () { return current === name; }; }; var unknown$1 = function () { return nu$1({ current: undefined, version: Version.unknown() }); }; var nu$1 = function (info) { var current = info.current; var version = info.version; return { current: current, version: version, isEdge: isBrowser(edge, current), isChrome: isBrowser(chrome, current), isIE: isBrowser(ie, current), isOpera: isBrowser(opera, current), isFirefox: isBrowser(firefox, current), isSafari: isBrowser(safari, current) }; }; var Browser = { unknown: unknown$1, nu: nu$1, edge: constant(edge), chrome: constant(chrome), ie: constant(ie), opera: constant(opera), firefox: constant(firefox), safari: constant(safari) }; var windows$1 = 'Windows'; var ios = 'iOS'; var android = 'Android'; var linux = 'Linux'; var osx = 'OSX'; var solaris = 'Solaris'; var freebsd = 'FreeBSD'; var isOS = function (name, current) { return function () { return current === name; }; }; var unknown$2 = function () { return nu$2({ current: undefined, version: Version.unknown() }); }; var nu$2 = function (info) { var current = info.current; var version = info.version; return { current: current, version: version, isWindows: isOS(windows$1, current), isiOS: isOS(ios, current), isAndroid: isOS(android, current), isOSX: isOS(osx, current), isLinux: isOS(linux, current), isSolaris: isOS(solaris, current), isFreeBSD: isOS(freebsd, current) }; }; var OperatingSystem = { unknown: unknown$2, nu: nu$2, windows: constant(windows$1), ios: constant(ios), android: constant(android), linux: constant(linux), osx: constant(osx), solaris: constant(solaris), freebsd: constant(freebsd) }; var DeviceType = function (os, browser, userAgent) { var isiPad = os.isiOS() && /ipad/i.test(userAgent) === true; var isiPhone = os.isiOS() && !isiPad; var isAndroid3 = os.isAndroid() && os.version.major === 3; var isAndroid4 = os.isAndroid() && os.version.major === 4; var isTablet = isiPad || isAndroid3 || isAndroid4 && /mobile/i.test(userAgent) === true; var isTouch = os.isiOS() || os.isAndroid(); var isPhone = isTouch && !isTablet; var iOSwebview = browser.isSafari() && os.isiOS() && /safari/i.test(userAgent) === false; return { isiPad: constant(isiPad), isiPhone: constant(isiPhone), isTablet: constant(isTablet), isPhone: constant(isPhone), isTouch: constant(isTouch), isAndroid: os.isAndroid, isiOS: os.isiOS, isWebView: constant(iOSwebview) }; }; var detect$1 = function (candidates, userAgent) { var agent = String(userAgent).toLowerCase(); return find(candidates, function (candidate) { return candidate.search(agent); }); }; var detectBrowser = function (browsers, userAgent) { return detect$1(browsers, userAgent).map(function (browser) { var version = Version.detect(browser.versionRegexes, userAgent); return { current: browser.name, version: version }; }); }; var detectOs = function (oses, userAgent) { return detect$1(oses, userAgent).map(function (os) { var version = Version.detect(os.versionRegexes, userAgent); return { current: os.name, version: version }; }); }; var UaString = { detectBrowser: detectBrowser, detectOs: detectOs }; var contains = function (str, substr) { return str.indexOf(substr) !== -1; }; var normalVersionRegex = /.*?version\/\ ?([0-9]+)\.([0-9]+).*/; var checkContains = function (target) { return function (uastring) { return contains(uastring, target); }; }; var browsers = [ { name: 'Edge', versionRegexes: [/.*?edge\/ ?([0-9]+)\.([0-9]+)$/], search: function (uastring) { return contains(uastring, 'edge/') && contains(uastring, 'chrome') && contains(uastring, 'safari') && contains(uastring, 'applewebkit'); } }, { name: 'Chrome', versionRegexes: [ /.*?chrome\/([0-9]+)\.([0-9]+).*/, normalVersionRegex ], search: function (uastring) { return contains(uastring, 'chrome') && !contains(uastring, 'chromeframe'); } }, { name: 'IE', versionRegexes: [ /.*?msie\ ?([0-9]+)\.([0-9]+).*/, /.*?rv:([0-9]+)\.([0-9]+).*/ ], search: function (uastring) { return contains(uastring, 'msie') || contains(uastring, 'trident'); } }, { name: 'Opera', versionRegexes: [ normalVersionRegex, /.*?opera\/([0-9]+)\.([0-9]+).*/ ], search: checkContains('opera') }, { name: 'Firefox', versionRegexes: [/.*?firefox\/\ ?([0-9]+)\.([0-9]+).*/], search: checkContains('firefox') }, { name: 'Safari', versionRegexes: [ normalVersionRegex, /.*?cpu os ([0-9]+)_([0-9]+).*/ ], search: function (uastring) { return (contains(uastring, 'safari') || contains(uastring, 'mobile/')) && contains(uastring, 'applewebkit'); } } ]; var oses = [ { name: 'Windows', search: checkContains('win'), versionRegexes: [/.*?windows\ nt\ ?([0-9]+)\.([0-9]+).*/] }, { name: 'iOS', search: function (uastring) { return contains(uastring, 'iphone') || contains(uastring, 'ipad'); }, versionRegexes: [ /.*?version\/\ ?([0-9]+)\.([0-9]+).*/, /.*cpu os ([0-9]+)_([0-9]+).*/, /.*cpu iphone os ([0-9]+)_([0-9]+).*/ ] }, { name: 'Android', search: checkContains('android'), versionRegexes: [/.*?android\ ?([0-9]+)\.([0-9]+).*/] }, { name: 'OSX', search: checkContains('os x'), versionRegexes: [/.*?os\ x\ ?([0-9]+)_([0-9]+).*/] }, { name: 'Linux', search: checkContains('linux'), versionRegexes: [] }, { name: 'Solaris', search: checkContains('sunos'), versionRegexes: [] }, { name: 'FreeBSD', search: checkContains('freebsd'), versionRegexes: [] } ]; var PlatformInfo = { browsers: constant(browsers), oses: constant(oses) }; var detect$2 = function (userAgent) { var browsers = PlatformInfo.browsers(); var oses = PlatformInfo.oses(); var browser = UaString.detectBrowser(browsers, userAgent).fold(Browser.unknown, Browser.nu); var os = UaString.detectOs(oses, userAgent).fold(OperatingSystem.unknown, OperatingSystem.nu); var deviceType = DeviceType(os, browser, userAgent); return { browser: browser, os: os, deviceType: deviceType }; }; var PlatformDetection = { detect: detect$2 }; var detect$3 = cached(function () { var userAgent = domGlobals.navigator.userAgent; return PlatformDetection.detect(userAgent); }); var PlatformDetection$1 = { detect: detect$3 }; var ELEMENT$1 = ELEMENT; var DOCUMENT$1 = DOCUMENT; var bypassSelector = function (dom) { return dom.nodeType !== ELEMENT$1 && dom.nodeType !== DOCUMENT$1 || dom.childElementCount === 0; }; var all = function (selector, scope) { var base = scope === undefined ? domGlobals.document : scope.dom(); return bypassSelector(base) ? [] : map(base.querySelectorAll(selector), Element.fromDom); }; var one = function (selector, scope) { var base = scope === undefined ? domGlobals.document : scope.dom(); return bypassSelector(base) ? Option.none() : Option.from(base.querySelector(selector)).map(Element.fromDom); }; var regularContains = function (e1, e2) { var d1 = e1.dom(); var d2 = e2.dom(); return d1 === d2 ? false : d1.contains(d2); }; var ieContains = function (e1, e2) { return Node.documentPositionContainedBy(e1.dom(), e2.dom()); }; var browser = PlatformDetection$1.detect().browser; var contains$1 = browser.isIE() ? ieContains : regularContains; var spot = Immutable('element', 'offset'); var descendants = function (scope, selector) { return all(selector, scope); }; var trim = global$2.trim; var hasContentEditableState = function (value) { return function (node) { if (node && node.nodeType === 1) { if (node.contentEditable === value) { return true; } if (node.getAttribute('data-mce-contenteditable') === value) { return true; } } return false; }; }; var isContentEditableTrue = hasContentEditableState('true'); var isContentEditableFalse = hasContentEditableState('false'); var create = function (type, title, url, level, attach) { return { type: type, title: title, url: url, level: level, attach: attach }; }; var isChildOfContentEditableTrue = function (node) { while (node = node.parentNode) { var value = node.contentEditable; if (value && value !== 'inherit') { return isContentEditableTrue(node); } } return false; }; var select = function (selector, root) { return map(descendants(Element.fromDom(root), selector), function (element) { return element.dom(); }); }; var getElementText = function (elm) { return elm.innerText || elm.textContent; }; var getOrGenerateId = function (elm) { return elm.id ? elm.id : generate('h'); }; var isAnchor = function (elm) { return elm && elm.nodeName === 'A' && (elm.id || elm.name); }; var isValidAnchor = function (elm) { return isAnchor(elm) && isEditable(elm); }; var isHeader = function (elm) { return elm && /^(H[1-6])$/.test(elm.nodeName); }; var isEditable = function (elm) { return isChildOfContentEditableTrue(elm) && !isContentEditableFalse(elm); }; var isValidHeader = function (elm) { return isHeader(elm) && isEditable(elm); }; var getLevel = function (elm) { return isHeader(elm) ? parseInt(elm.nodeName.substr(1), 10) : 0; }; var headerTarget = function (elm) { var headerId = getOrGenerateId(elm); var attach = function () { elm.id = headerId; }; return create('header', getElementText(elm), '#' + headerId, getLevel(elm), attach); }; var anchorTarget = function (elm) { var anchorId = elm.id || elm.name; var anchorText = getElementText(elm); return create('anchor', anchorText ? anchorText : '#' + anchorId, '#' + anchorId, 0, noop); }; var getHeaderTargets = function (elms) { return map(filter(elms, isValidHeader), headerTarget); }; var getAnchorTargets = function (elms) { return map(filter(elms, isValidAnchor), anchorTarget); }; var getTargetElements = function (elm) { var elms = select('h1,h2,h3,h4,h5,h6,a:not([href])', elm); return elms; }; var hasTitle = function (target) { return trim(target.title).length > 0; }; var find$2 = function (elm) { var elms = getTargetElements(elm); return filter(getHeaderTargets(elms).concat(getAnchorTargets(elms)), hasTitle); }; var LinkTargets = { find: find$2 }; var getActiveEditor = function () { return window.tinymce ? window.tinymce.activeEditor : global$1.activeEditor; }; var history = {}; var HISTORY_LENGTH = 5; var clearHistory = function () { history = {}; }; var toMenuItem = function (target) { return { title: target.title, value: { title: { raw: target.title }, url: target.url, attach: target.attach } }; }; var toMenuItems = function (targets) { return global$2.map(targets, toMenuItem); }; var staticMenuItem = function (title, url) { return { title: title, value: { title: title, url: url, attach: noop } }; }; var isUniqueUrl = function (url, targets) { var foundTarget = exists(targets, function (target) { return target.url === url; }); return !foundTarget; }; var getSetting = function (editorSettings, name, defaultValue) { var value = name in editorSettings ? editorSettings[name] : defaultValue; return value === false ? null : value; }; var createMenuItems = function (term, targets, fileType, editorSettings) { var separator = { title: '-' }; var fromHistoryMenuItems = function (history) { var historyItems = history.hasOwnProperty(fileType) ? history[fileType] : []; var uniqueHistory = filter(historyItems, function (url) { return isUniqueUrl(url, targets); }); return global$2.map(uniqueHistory, function (url) { return { title: url, value: { title: url, url: url, attach: noop } }; }); }; var fromMenuItems = function (type) { var filteredTargets = filter(targets, function (target) { return target.type === type; }); return toMenuItems(filteredTargets); }; var anchorMenuItems = function () { var anchorMenuItems = fromMenuItems('anchor'); var topAnchor = getSetting(editorSettings, 'anchor_top', '#top'); var bottomAchor = getSetting(editorSettings, 'anchor_bottom', '#bottom'); if (topAnchor !== null) { anchorMenuItems.unshift(staticMenuItem('', topAnchor)); } if (bottomAchor !== null) { anchorMenuItems.push(staticMenuItem('', bottomAchor)); } return anchorMenuItems; }; var join = function (items) { return foldl(items, function (a, b) { var bothEmpty = a.length === 0 || b.length === 0; return bothEmpty ? a.concat(b) : a.concat(separator, b); }, []); }; if (editorSettings.typeahead_urls === false) { return []; } return fileType === 'file' ? join([ filterByQuery(term, fromHistoryMenuItems(history)), filterByQuery(term, fromMenuItems('header')), filterByQuery(term, anchorMenuItems()) ]) : filterByQuery(term, fromHistoryMenuItems(history)); }; var addToHistory = function (url, fileType) { var items = history[fileType]; if (!/^https?/.test(url)) { return; } if (items) { if (indexOf(items, url).isNone()) { history[fileType] = items.slice(0, HISTORY_LENGTH).concat(url); } } else { history[fileType] = [url]; } }; var filterByQuery = function (term, menuItems) { var lowerCaseTerm = term.toLowerCase(); var result = global$2.grep(menuItems, function (item) { return item.title.toLowerCase().indexOf(lowerCaseTerm) !== -1; }); return result.length === 1 && result[0].title === term ? [] : result; }; var getTitle = function (linkDetails) { var title = linkDetails.title; return title.raw ? title.raw : title; }; var setupAutoCompleteHandler = function (ctrl, editorSettings, bodyElm, fileType) { var autocomplete = function (term) { var linkTargets = LinkTargets.find(bodyElm); var menuItems = createMenuItems(term, linkTargets, fileType, editorSettings); ctrl.showAutoComplete(menuItems, term); }; ctrl.on('autocomplete', function () { autocomplete(ctrl.value()); }); ctrl.on('selectitem', function (e) { var linkDetails = e.value; ctrl.value(linkDetails.url); var title = getTitle(linkDetails); if (fileType === 'image') { ctrl.fire('change', { meta: { alt: title, attach: linkDetails.attach } }); } else { ctrl.fire('change', { meta: { text: title, attach: linkDetails.attach } }); } ctrl.focus(); }); ctrl.on('click', function (e) { if (ctrl.value().length === 0 && e.target.nodeName === 'INPUT') { autocomplete(''); } }); ctrl.on('PostRender', function () { ctrl.getRoot().on('submit', function (e) { if (!e.isDefaultPrevented()) { addToHistory(ctrl.value(), fileType); } }); }); }; var statusToUiState = function (result) { var status = result.status, message = result.message; if (status === 'valid') { return { status: 'ok', message: message }; } else if (status === 'unknown') { return { status: 'warn', message: message }; } else if (status === 'invalid') { return { status: 'warn', message: message }; } else { return { status: 'none', message: '' }; } }; var setupLinkValidatorHandler = function (ctrl, editorSettings, fileType) { var validatorHandler = editorSettings.filepicker_validator_handler; if (validatorHandler) { var validateUrl_1 = function (url) { if (url.length === 0) { ctrl.statusLevel('none'); return; } validatorHandler({ url: url, type: fileType }, function (result) { var uiState = statusToUiState(result); ctrl.statusMessage(uiState.message); ctrl.statusLevel(uiState.status); }); }; ctrl.state.on('change:value', function (e) { validateUrl_1(e.value); }); } }; var FilePicker = ComboBox.extend({ Statics: { clearHistory: clearHistory }, init: function (settings) { var self = this, editor = getActiveEditor(), editorSettings = editor.settings; var actionCallback, fileBrowserCallback, fileBrowserCallbackTypes; var fileType = settings.filetype; settings.spellcheck = false; fileBrowserCallbackTypes = editorSettings.file_picker_types || editorSettings.file_browser_callback_types; if (fileBrowserCallbackTypes) { fileBrowserCallbackTypes = global$2.makeMap(fileBrowserCallbackTypes, /[, ]/); } if (!fileBrowserCallbackTypes || fileBrowserCallbackTypes[fileType]) { fileBrowserCallback = editorSettings.file_picker_callback; if (fileBrowserCallback && (!fileBrowserCallbackTypes || fileBrowserCallbackTypes[fileType])) { actionCallback = function () { var meta = self.fire('beforecall').meta; meta = global$2.extend({ filetype: fileType }, meta); fileBrowserCallback.call(editor, function (value, meta) { self.value(value).fire('change', { meta: meta }); }, self.value(), meta); }; } else { fileBrowserCallback = editorSettings.file_browser_callback; if (fileBrowserCallback && (!fileBrowserCallbackTypes || fileBrowserCallbackTypes[fileType])) { actionCallback = function () { fileBrowserCallback(self.getEl('inp').id, self.value(), fileType, window); }; } } } if (actionCallback) { settings.icon = 'browse'; settings.onaction = actionCallback; } self._super(settings); self.classes.add('filepicker'); setupAutoCompleteHandler(self, editorSettings, editor.getBody(), fileType); setupLinkValidatorHandler(self, editorSettings, fileType); } }); var FitLayout = AbsoluteLayout.extend({ recalc: function (container) { var contLayoutRect = container.layoutRect(), paddingBox = container.paddingBox; container.items().filter(':visible').each(function (ctrl) { ctrl.layoutRect({ x: paddingBox.left, y: paddingBox.top, w: contLayoutRect.innerW - paddingBox.right - paddingBox.left, h: contLayoutRect.innerH - paddingBox.top - paddingBox.bottom }); if (ctrl.recalc) { ctrl.recalc(); } }); } }); var FlexLayout = AbsoluteLayout.extend({ recalc: function (container) { var i, l, items, contLayoutRect, contPaddingBox, contSettings, align, pack, spacing, totalFlex, availableSpace, direction; var ctrl, ctrlLayoutRect, ctrlSettings, flex; var maxSizeItems = []; var size, maxSize, ratio, rect, pos, maxAlignEndPos; var sizeName, minSizeName, posName, maxSizeName, beforeName, innerSizeName, deltaSizeName, contentSizeName; var alignAxisName, alignInnerSizeName, alignSizeName, alignMinSizeName, alignBeforeName, alignAfterName; var alignDeltaSizeName, alignContentSizeName; var max = Math.max, min = Math.min; items = container.items().filter(':visible'); contLayoutRect = container.layoutRect(); contPaddingBox = container.paddingBox; contSettings = container.settings; direction = container.isRtl() ? contSettings.direction || 'row-reversed' : contSettings.direction; align = contSettings.align; pack = container.isRtl() ? contSettings.pack || 'end' : contSettings.pack; spacing = contSettings.spacing || 0; if (direction === 'row-reversed' || direction === 'column-reverse') { items = items.set(items.toArray().reverse()); direction = direction.split('-')[0]; } if (direction === 'column') { posName = 'y'; sizeName = 'h'; minSizeName = 'minH'; maxSizeName = 'maxH'; innerSizeName = 'innerH'; beforeName = 'top'; deltaSizeName = 'deltaH'; contentSizeName = 'contentH'; alignBeforeName = 'left'; alignSizeName = 'w'; alignAxisName = 'x'; alignInnerSizeName = 'innerW'; alignMinSizeName = 'minW'; alignAfterName = 'right'; alignDeltaSizeName = 'deltaW'; alignContentSizeName = 'contentW'; } else { posName = 'x'; sizeName = 'w'; minSizeName = 'minW'; maxSizeName = 'maxW'; innerSizeName = 'innerW'; beforeName = 'left'; deltaSizeName = 'deltaW'; contentSizeName = 'contentW'; alignBeforeName = 'top'; alignSizeName = 'h'; alignAxisName = 'y'; alignInnerSizeName = 'innerH'; alignMinSizeName = 'minH'; alignAfterName = 'bottom'; alignDeltaSizeName = 'deltaH'; alignContentSizeName = 'contentH'; } availableSpace = contLayoutRect[innerSizeName] - contPaddingBox[beforeName] - contPaddingBox[beforeName]; maxAlignEndPos = totalFlex = 0; for (i = 0, l = items.length; i < l; i++) { ctrl = items[i]; ctrlLayoutRect = ctrl.layoutRect(); ctrlSettings = ctrl.settings; flex = ctrlSettings.flex; availableSpace -= i < l - 1 ? spacing : 0; if (flex > 0) { totalFlex += flex; if (ctrlLayoutRect[maxSizeName]) { maxSizeItems.push(ctrl); } ctrlLayoutRect.flex = flex; } availableSpace -= ctrlLayoutRect[minSizeName]; size = contPaddingBox[alignBeforeName] + ctrlLayoutRect[alignMinSizeName] + contPaddingBox[alignAfterName]; if (size > maxAlignEndPos) { maxAlignEndPos = size; } } rect = {}; if (availableSpace < 0) { rect[minSizeName] = contLayoutRect[minSizeName] - availableSpace + contLayoutRect[deltaSizeName]; } else { rect[minSizeName] = contLayoutRect[innerSizeName] - availableSpace + contLayoutRect[deltaSizeName]; } rect[alignMinSizeName] = maxAlignEndPos + contLayoutRect[alignDeltaSizeName]; rect[contentSizeName] = contLayoutRect[innerSizeName] - availableSpace; rect[alignContentSizeName] = maxAlignEndPos; rect.minW = min(rect.minW, contLayoutRect.maxW); rect.minH = min(rect.minH, contLayoutRect.maxH); rect.minW = max(rect.minW, contLayoutRect.startMinWidth); rect.minH = max(rect.minH, contLayoutRect.startMinHeight); if (contLayoutRect.autoResize && (rect.minW !== contLayoutRect.minW || rect.minH !== contLayoutRect.minH)) { rect.w = rect.minW; rect.h = rect.minH; container.layoutRect(rect); this.recalc(container); if (container._lastRect === null) { var parentCtrl = container.parent(); if (parentCtrl) { parentCtrl._lastRect = null; parentCtrl.recalc(); } } return; } ratio = availableSpace / totalFlex; for (i = 0, l = maxSizeItems.length; i < l; i++) { ctrl = maxSizeItems[i]; ctrlLayoutRect = ctrl.layoutRect(); maxSize = ctrlLayoutRect[maxSizeName]; size = ctrlLayoutRect[minSizeName] + ctrlLayoutRect.flex * ratio; if (size > maxSize) { availableSpace -= ctrlLayoutRect[maxSizeName] - ctrlLayoutRect[minSizeName]; totalFlex -= ctrlLayoutRect.flex; ctrlLayoutRect.flex = 0; ctrlLayoutRect.maxFlexSize = maxSize; } else { ctrlLayoutRect.maxFlexSize = 0; } } ratio = availableSpace / totalFlex; pos = contPaddingBox[beforeName]; rect = {}; if (totalFlex === 0) { if (pack === 'end') { pos = availableSpace + contPaddingBox[beforeName]; } else if (pack === 'center') { pos = Math.round(contLayoutRect[innerSizeName] / 2 - (contLayoutRect[innerSizeName] - availableSpace) / 2) + contPaddingBox[beforeName]; if (pos < 0) { pos = contPaddingBox[beforeName]; } } else if (pack === 'justify') { pos = contPaddingBox[beforeName]; spacing = Math.floor(availableSpace / (items.length - 1)); } } rect[alignAxisName] = contPaddingBox[alignBeforeName]; for (i = 0, l = items.length; i < l; i++) { ctrl = items[i]; ctrlLayoutRect = ctrl.layoutRect(); size = ctrlLayoutRect.maxFlexSize || ctrlLayoutRect[minSizeName]; if (align === 'center') { rect[alignAxisName] = Math.round(contLayoutRect[alignInnerSizeName] / 2 - ctrlLayoutRect[alignSizeName] / 2); } else if (align === 'stretch') { rect[alignSizeName] = max(ctrlLayoutRect[alignMinSizeName] || 0, contLayoutRect[alignInnerSizeName] - contPaddingBox[alignBeforeName] - contPaddingBox[alignAfterName]); rect[alignAxisName] = contPaddingBox[alignBeforeName]; } else if (align === 'end') { rect[alignAxisName] = contLayoutRect[alignInnerSizeName] - ctrlLayoutRect[alignSizeName] - contPaddingBox.top; } if (ctrlLayoutRect.flex > 0) { size += ctrlLayoutRect.flex * ratio; } rect[sizeName] = size; rect[posName] = pos; ctrl.layoutRect(rect); if (ctrl.recalc) { ctrl.recalc(); } pos += size + spacing; } } }); var FlowLayout = Layout.extend({ Defaults: { containerClass: 'flow-layout', controlClass: 'flow-layout-item', endClass: 'break' }, recalc: function (container) { container.items().filter(':visible').each(function (ctrl) { if (ctrl.recalc) { ctrl.recalc(); } }); }, isNative: function () { return true; } }); var descendant = function (scope, selector) { return one(selector, scope); }; var toggleFormat = function (editor, fmt) { return function () { editor.execCommand('mceToggleFormat', false, fmt); }; }; var addFormatChangedListener = function (editor, name, changed) { var handler = function (state) { changed(state, name); }; if (editor.formatter) { editor.formatter.formatChanged(name, handler); } else { editor.on('init', function () { editor.formatter.formatChanged(name, handler); }); } }; var postRenderFormatToggle = function (editor, name) { return function (e) { addFormatChangedListener(editor, name, function (state) { e.control.active(state); }); }; }; var register = function (editor) { var alignFormats = [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ]; var defaultAlign = 'alignleft'; var alignMenuItems = [ { text: 'Left', icon: 'alignleft', onclick: toggleFormat(editor, 'alignleft') }, { text: 'Center', icon: 'aligncenter', onclick: toggleFormat(editor, 'aligncenter') }, { text: 'Right', icon: 'alignright', onclick: toggleFormat(editor, 'alignright') }, { text: 'Justify', icon: 'alignjustify', onclick: toggleFormat(editor, 'alignjustify') } ]; editor.addMenuItem('align', { text: 'Align', menu: alignMenuItems }); editor.addButton('align', { type: 'menubutton', icon: defaultAlign, menu: alignMenuItems, onShowMenu: function (e) { var menu = e.control.menu; global$2.each(alignFormats, function (formatName, idx) { menu.items().eq(idx).each(function (item) { return item.active(editor.formatter.match(formatName)); }); }); }, onPostRender: function (e) { var ctrl = e.control; global$2.each(alignFormats, function (formatName, idx) { addFormatChangedListener(editor, formatName, function (state) { ctrl.icon(defaultAlign); if (state) { ctrl.icon(formatName); } }); }); } }); global$2.each({ alignleft: [ 'Align left', 'JustifyLeft' ], aligncenter: [ 'Align center', 'JustifyCenter' ], alignright: [ 'Align right', 'JustifyRight' ], alignjustify: [ 'Justify', 'JustifyFull' ], alignnone: [ 'No alignment', 'JustifyNone' ] }, function (item, name) { editor.addButton(name, { active: false, tooltip: item[0], cmd: item[1], onPostRender: postRenderFormatToggle(editor, name) }); }); }; var Align = { register: register }; var getFirstFont = function (fontFamily) { return fontFamily ? fontFamily.split(',')[0] : ''; }; var findMatchingValue = function (items, fontFamily) { var font = fontFamily ? fontFamily.toLowerCase() : ''; var value; global$2.each(items, function (item) { if (item.value.toLowerCase() === font) { value = item.value; } }); global$2.each(items, function (item) { if (!value && getFirstFont(item.value).toLowerCase() === getFirstFont(font).toLowerCase()) { value = item.value; } }); return value; }; var createFontNameListBoxChangeHandler = function (editor, items) { return function () { var self = this; self.state.set('value', null); editor.on('init nodeChange', function (e) { var fontFamily = editor.queryCommandValue('FontName'); var match = findMatchingValue(items, fontFamily); self.value(match ? match : null); if (!match && fontFamily) { self.text(getFirstFont(fontFamily)); } }); }; }; var createFormats = function (formats) { formats = formats.replace(/;$/, '').split(';'); var i = formats.length; while (i--) { formats[i] = formats[i].split('='); } return formats; }; var getFontItems = function (editor) { var defaultFontsFormats = 'Andale Mono=andale mono,monospace;' + 'Arial=arial,helvetica,sans-serif;' + 'Arial Black=arial black,sans-serif;' + 'Book Antiqua=book antiqua,palatino,serif;' + 'Comic Sans MS=comic sans ms,sans-serif;' + 'Courier New=courier new,courier,monospace;' + 'Georgia=georgia,palatino,serif;' + 'Helvetica=helvetica,arial,sans-serif;' + 'Impact=impact,sans-serif;' + 'Symbol=symbol;' + 'Tahoma=tahoma,arial,helvetica,sans-serif;' + 'Terminal=terminal,monaco,monospace;' + 'Times New Roman=times new roman,times,serif;' + 'Trebuchet MS=trebuchet ms,geneva,sans-serif;' + 'Verdana=verdana,geneva,sans-serif;' + 'Webdings=webdings;' + 'Wingdings=wingdings,zapf dingbats'; var fonts = createFormats(editor.settings.font_formats || defaultFontsFormats); return global$2.map(fonts, function (font) { return { text: { raw: font[0] }, value: font[1], textStyle: font[1].indexOf('dings') === -1 ? 'font-family:' + font[1] : '' }; }); }; var registerButtons = function (editor) { editor.addButton('fontselect', function () { var items = getFontItems(editor); return { type: 'listbox', text: 'Font Family', tooltip: 'Font Family', values: items, fixedWidth: true, onPostRender: createFontNameListBoxChangeHandler(editor, items), onselect: function (e) { if (e.control.settings.value) { editor.execCommand('FontName', false, e.control.settings.value); } } }; }); }; var register$1 = function (editor) { registerButtons(editor); }; var FontSelect = { register: register$1 }; var round = function (number, precision) { var factor = Math.pow(10, precision); return Math.round(number * factor) / factor; }; var toPt = function (fontSize, precision) { if (/[0-9.]+px$/.test(fontSize)) { return round(parseInt(fontSize, 10) * 72 / 96, precision || 0) + 'pt'; } return fontSize; }; var findMatchingValue$1 = function (items, pt, px) { var value; global$2.each(items, function (item) { if (item.value === px) { value = px; } else if (item.value === pt) { value = pt; } }); return value; }; var createFontSizeListBoxChangeHandler = function (editor, items) { return function () { var self = this; editor.on('init nodeChange', function (e) { var px, pt, precision, match; px = editor.queryCommandValue('FontSize'); if (px) { for (precision = 3; !match && precision >= 0; precision--) { pt = toPt(px, precision); match = findMatchingValue$1(items, pt, px); } } self.value(match ? match : null); if (!match) { self.text(pt); } }); }; }; var getFontSizeItems = function (editor) { var defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt'; var fontsizeFormats = editor.settings.fontsize_formats || defaultFontsizeFormats; return global$2.map(fontsizeFormats.split(' '), function (item) { var text = item, value = item; var values = item.split('='); if (values.length > 1) { text = values[0]; value = values[1]; } return { text: text, value: value }; }); }; var registerButtons$1 = function (editor) { editor.addButton('fontsizeselect', function () { var items = getFontSizeItems(editor); return { type: 'listbox', text: 'Font Sizes', tooltip: 'Font Sizes', values: items, fixedWidth: true, onPostRender: createFontSizeListBoxChangeHandler(editor, items), onclick: function (e) { if (e.control.settings.value) { editor.execCommand('FontSize', false, e.control.settings.value); } } }; }); }; var register$2 = function (editor) { registerButtons$1(editor); }; var FontSizeSelect = { register: register$2 }; var hideMenuObjects = function (editor, menu) { var count = menu.length; global$2.each(menu, function (item) { if (item.menu) { item.hidden = hideMenuObjects(editor, item.menu) === 0; } var formatName = item.format; if (formatName) { item.hidden = !editor.formatter.canApply(formatName); } if (item.hidden) { count--; } }); return count; }; var hideFormatMenuItems = function (editor, menu) { var count = menu.items().length; menu.items().each(function (item) { if (item.menu) { item.visible(hideFormatMenuItems(editor, item.menu) > 0); } if (!item.menu && item.settings.menu) { item.visible(hideMenuObjects(editor, item.settings.menu) > 0); } var formatName = item.settings.format; if (formatName) { item.visible(editor.formatter.canApply(formatName)); } if (!item.visible()) { count--; } }); return count; }; var createFormatMenu = function (editor) { var count = 0; var newFormats = []; var defaultStyleFormats = [ { title: 'Headings', items: [ { title: 'Heading 1', format: 'h1' }, { title: 'Heading 2', format: 'h2' }, { title: 'Heading 3', format: 'h3' }, { title: 'Heading 4', format: 'h4' }, { title: 'Heading 5', format: 'h5' }, { title: 'Heading 6', format: 'h6' } ] }, { title: 'Inline', items: [ { title: 'Bold', icon: 'bold', format: 'bold' }, { title: 'Italic', icon: 'italic', format: 'italic' }, { title: 'Underline', icon: 'underline', format: 'underline' }, { title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough' }, { title: 'Superscript', icon: 'superscript', format: 'superscript' }, { title: 'Subscript', icon: 'subscript', format: 'subscript' }, { title: 'Code', icon: 'code', format: 'code' } ] }, { title: 'Blocks', items: [ { title: 'Paragraph', format: 'p' }, { title: 'Blockquote', format: 'blockquote' }, { title: 'Div', format: 'div' }, { title: 'Pre', format: 'pre' } ] }, { title: 'Alignment', items: [ { title: 'Left', icon: 'alignleft', format: 'alignleft' }, { title: 'Center', icon: 'aligncenter', format: 'aligncenter' }, { title: 'Right', icon: 'alignright', format: 'alignright' }, { title: 'Justify', icon: 'alignjustify', format: 'alignjustify' } ] } ]; var createMenu = function (formats) { var menu = []; if (!formats) { return; } global$2.each(formats, function (format) { var menuItem = { text: format.title, icon: format.icon }; if (format.items) { menuItem.menu = createMenu(format.items); } else { var formatName = format.format || 'custom' + count++; if (!format.format) { format.name = formatName; newFormats.push(format); } menuItem.format = formatName; menuItem.cmd = format.cmd; } menu.push(menuItem); }); return menu; }; var createStylesMenu = function () { var menu; if (editor.settings.style_formats_merge) { if (editor.settings.style_formats) { menu = createMenu(defaultStyleFormats.concat(editor.settings.style_formats)); } else { menu = createMenu(defaultStyleFormats); } } else { menu = createMenu(editor.settings.style_formats || defaultStyleFormats); } return menu; }; editor.on('init', function () { global$2.each(newFormats, function (format) { editor.formatter.register(format.name, format); }); }); return { type: 'menu', items: createStylesMenu(), onPostRender: function (e) { editor.fire('renderFormatsMenu', { control: e.control }); }, itemDefaults: { preview: true, textStyle: function () { if (this.settings.format) { return editor.formatter.getCssText(this.settings.format); } }, onPostRender: function () { var self = this; self.parent().on('show', function () { var formatName, command; formatName = self.settings.format; if (formatName) { self.disabled(!editor.formatter.canApply(formatName)); self.active(editor.formatter.match(formatName)); } command = self.settings.cmd; if (command) { self.active(editor.queryCommandState(command)); } }); }, onclick: function () { if (this.settings.format) { toggleFormat(editor, this.settings.format)(); } if (this.settings.cmd) { editor.execCommand(this.settings.cmd); } } } }; }; var registerMenuItems = function (editor, formatMenu) { editor.addMenuItem('formats', { text: 'Formats', menu: formatMenu }); }; var registerButtons$2 = function (editor, formatMenu) { editor.addButton('styleselect', { type: 'menubutton', text: 'Formats', menu: formatMenu, onShowMenu: function () { if (editor.settings.style_formats_autohide) { hideFormatMenuItems(editor, this.menu); } } }); }; var register$3 = function (editor) { var formatMenu = createFormatMenu(editor); registerMenuItems(editor, formatMenu); registerButtons$2(editor, formatMenu); }; var Formats = { register: register$3 }; var defaultBlocks = 'Paragraph=p;' + 'Heading 1=h1;' + 'Heading 2=h2;' + 'Heading 3=h3;' + 'Heading 4=h4;' + 'Heading 5=h5;' + 'Heading 6=h6;' + 'Preformatted=pre'; var createFormats$1 = function (formats) { formats = formats.replace(/;$/, '').split(';'); var i = formats.length; while (i--) { formats[i] = formats[i].split('='); } return formats; }; var createListBoxChangeHandler = function (editor, items, formatName) { return function () { var self = this; editor.on('nodeChange', function (e) { var formatter = editor.formatter; var value = null; global$2.each(e.parents, function (node) { global$2.each(items, function (item) { if (formatName) { if (formatter.matchNode(node, formatName, { value: item.value })) { value = item.value; } } else { if (formatter.matchNode(node, item.value)) { value = item.value; } } if (value) { return false; } }); if (value) { return false; } }); self.value(value); }); }; }; var lazyFormatSelectBoxItems = function (editor, blocks) { return function () { var items = []; global$2.each(blocks, function (block) { items.push({ text: block[0], value: block[1], textStyle: function () { return editor.formatter.getCssText(block[1]); } }); }); return { type: 'listbox', text: blocks[0][0], values: items, fixedWidth: true, onselect: function (e) { if (e.control) { var fmt = e.control.value(); toggleFormat(editor, fmt)(); } }, onPostRender: createListBoxChangeHandler(editor, items) }; }; }; var buildMenuItems = function (editor, blocks) { return global$2.map(blocks, function (block) { return { text: block[0], onclick: toggleFormat(editor, block[1]), textStyle: function () { return editor.formatter.getCssText(block[1]); } }; }); }; var register$4 = function (editor) { var blocks = createFormats$1(editor.settings.block_formats || defaultBlocks); editor.addMenuItem('blockformats', { text: 'Blocks', menu: buildMenuItems(editor, blocks) }); editor.addButton('formatselect', lazyFormatSelectBoxItems(editor, blocks)); }; var FormatSelect = { register: register$4 }; var createCustomMenuItems = function (editor, names) { var items, nameList; if (typeof names === 'string') { nameList = names.split(' '); } else if (global$2.isArray(names)) { return flatten(global$2.map(names, function (names) { return createCustomMenuItems(editor, names); })); } items = global$2.grep(nameList, function (name) { return name === '|' || name in editor.menuItems; }); return global$2.map(items, function (name) { return name === '|' ? { text: '-' } : editor.menuItems[name]; }); }; var isSeparator$1 = function (menuItem) { return menuItem && menuItem.text === '-'; }; var trimMenuItems = function (menuItems) { var menuItems2 = filter(menuItems, function (menuItem, i) { return !isSeparator$1(menuItem) || !isSeparator$1(menuItems[i - 1]); }); return filter(menuItems2, function (menuItem, i) { return !isSeparator$1(menuItem) || i > 0 && i < menuItems2.length - 1; }); }; var createContextMenuItems = function (editor, context) { var outputMenuItems = [{ text: '-' }]; var menuItems = global$2.grep(editor.menuItems, function (menuItem) { return menuItem.context === context; }); global$2.each(menuItems, function (menuItem) { if (menuItem.separator === 'before') { outputMenuItems.push({ text: '|' }); } if (menuItem.prependToContext) { outputMenuItems.unshift(menuItem); } else { outputMenuItems.push(menuItem); } if (menuItem.separator === 'after') { outputMenuItems.push({ text: '|' }); } }); return outputMenuItems; }; var createInsertMenu = function (editor) { var insertButtonItems = editor.settings.insert_button_items; if (insertButtonItems) { return trimMenuItems(createCustomMenuItems(editor, insertButtonItems)); } else { return trimMenuItems(createContextMenuItems(editor, 'insert')); } }; var registerButtons$3 = function (editor) { editor.addButton('insert', { type: 'menubutton', icon: 'insert', menu: [], oncreatemenu: function () { this.menu.add(createInsertMenu(editor)); this.menu.renderNew(); } }); }; var register$5 = function (editor) { registerButtons$3(editor); }; var InsertButton = { register: register$5 }; var registerFormatButtons = function (editor) { global$2.each({ bold: 'Bold', italic: 'Italic', underline: 'Underline', strikethrough: 'Strikethrough', subscript: 'Subscript', superscript: 'Superscript' }, function (text, name) { editor.addButton(name, { active: false, tooltip: text, onPostRender: postRenderFormatToggle(editor, name), onclick: toggleFormat(editor, name) }); }); }; var registerCommandButtons = function (editor) { global$2.each({ outdent: [ 'Decrease indent', 'Outdent' ], indent: [ 'Increase indent', 'Indent' ], cut: [ 'Cut', 'Cut' ], copy: [ 'Copy', 'Copy' ], paste: [ 'Paste', 'Paste' ], help: [ 'Help', 'mceHelp' ], selectall: [ 'Select all', 'SelectAll' ], visualaid: [ 'Visual aids', 'mceToggleVisualAid' ], newdocument: [ 'New document', 'mceNewDocument' ], removeformat: [ 'Clear formatting', 'RemoveFormat' ], remove: [ 'Remove', 'Delete' ] }, function (item, name) { editor.addButton(name, { tooltip: item[0], cmd: item[1] }); }); }; var registerCommandToggleButtons = function (editor) { global$2.each({ blockquote: [ 'Blockquote', 'mceBlockQuote' ], subscript: [ 'Subscript', 'Subscript' ], superscript: [ 'Superscript', 'Superscript' ] }, function (item, name) { editor.addButton(name, { active: false, tooltip: item[0], cmd: item[1], onPostRender: postRenderFormatToggle(editor, name) }); }); }; var registerButtons$4 = function (editor) { registerFormatButtons(editor); registerCommandButtons(editor); registerCommandToggleButtons(editor); }; var registerMenuItems$1 = function (editor) { global$2.each({ bold: [ 'Bold', 'Bold', 'Meta+B' ], italic: [ 'Italic', 'Italic', 'Meta+I' ], underline: [ 'Underline', 'Underline', 'Meta+U' ], strikethrough: [ 'Strikethrough', 'Strikethrough' ], subscript: [ 'Subscript', 'Subscript' ], superscript: [ 'Superscript', 'Superscript' ], removeformat: [ 'Clear formatting', 'RemoveFormat' ], newdocument: [ 'New document', 'mceNewDocument' ], cut: [ 'Cut', 'Cut', 'Meta+X' ], copy: [ 'Copy', 'Copy', 'Meta+C' ], paste: [ 'Paste', 'Paste', 'Meta+V' ], selectall: [ 'Select all', 'SelectAll', 'Meta+A' ] }, function (item, name) { editor.addMenuItem(name, { text: item[0], icon: name, shortcut: item[2], cmd: item[1] }); }); editor.addMenuItem('codeformat', { text: 'Code', icon: 'code', onclick: toggleFormat(editor, 'code') }); }; var register$6 = function (editor) { registerButtons$4(editor); registerMenuItems$1(editor); }; var SimpleControls = { register: register$6 }; var toggleUndoRedoState = function (editor, type) { return function () { var self = this; var checkState = function () { var typeFn = type === 'redo' ? 'hasRedo' : 'hasUndo'; return editor.undoManager ? editor.undoManager[typeFn]() : false; }; self.disabled(!checkState()); editor.on('Undo Redo AddUndo TypingUndo ClearUndos SwitchMode', function () { self.disabled(editor.readonly || !checkState()); }); }; }; var registerMenuItems$2 = function (editor) { editor.addMenuItem('undo', { text: 'Undo', icon: 'undo', shortcut: 'Meta+Z', onPostRender: toggleUndoRedoState(editor, 'undo'), cmd: 'undo' }); editor.addMenuItem('redo', { text: 'Redo', icon: 'redo', shortcut: 'Meta+Y', onPostRender: toggleUndoRedoState(editor, 'redo'), cmd: 'redo' }); }; var registerButtons$5 = function (editor) { editor.addButton('undo', { tooltip: 'Undo', onPostRender: toggleUndoRedoState(editor, 'undo'), cmd: 'undo' }); editor.addButton('redo', { tooltip: 'Redo', onPostRender: toggleUndoRedoState(editor, 'redo'), cmd: 'redo' }); }; var register$7 = function (editor) { registerMenuItems$2(editor); registerButtons$5(editor); }; var UndoRedo = { register: register$7 }; var toggleVisualAidState = function (editor) { return function () { var self = this; editor.on('VisualAid', function (e) { self.active(e.hasVisual); }); self.active(editor.hasVisual); }; }; var registerMenuItems$3 = function (editor) { editor.addMenuItem('visualaid', { text: 'Visual aids', selectable: true, onPostRender: toggleVisualAidState(editor), cmd: 'mceToggleVisualAid' }); }; var register$8 = function (editor) { registerMenuItems$3(editor); }; var VisualAid = { register: register$8 }; var setupEnvironment = function () { Widget.tooltips = !global$8.iOS; Control$1.translate = function (text) { return global$1.translate(text); }; }; var setupUiContainer = function (editor) { if (editor.settings.ui_container) { global$8.container = descendant(Element.fromDom(domGlobals.document.body), editor.settings.ui_container).fold(constant(null), function (elm) { return elm.dom(); }); } }; var setupRtlMode = function (editor) { if (editor.rtl) { Control$1.rtl = true; } }; var setupHideFloatPanels = function (editor) { editor.on('mousedown progressstate', function () { FloatPanel.hideAll(); }); }; var setup$1 = function (editor) { setupRtlMode(editor); setupHideFloatPanels(editor); setupUiContainer(editor); setupEnvironment(); FormatSelect.register(editor); Align.register(editor); SimpleControls.register(editor); UndoRedo.register(editor); FontSizeSelect.register(editor); FontSelect.register(editor); Formats.register(editor); VisualAid.register(editor); InsertButton.register(editor); }; var FormatControls = { setup: setup$1 }; var GridLayout = AbsoluteLayout.extend({ recalc: function (container) { var settings, rows, cols, items, contLayoutRect, width, height, rect, ctrlLayoutRect, ctrl, x, y, posX, posY, ctrlSettings, contPaddingBox, align, spacingH, spacingV, alignH, alignV, maxX, maxY; var colWidths = []; var rowHeights = []; var ctrlMinWidth, ctrlMinHeight, availableWidth, availableHeight, reverseRows, idx; settings = container.settings; items = container.items().filter(':visible'); contLayoutRect = container.layoutRect(); cols = settings.columns || Math.ceil(Math.sqrt(items.length)); rows = Math.ceil(items.length / cols); spacingH = settings.spacingH || settings.spacing || 0; spacingV = settings.spacingV || settings.spacing || 0; alignH = settings.alignH || settings.align; alignV = settings.alignV || settings.align; contPaddingBox = container.paddingBox; reverseRows = 'reverseRows' in settings ? settings.reverseRows : container.isRtl(); if (alignH && typeof alignH === 'string') { alignH = [alignH]; } if (alignV && typeof alignV === 'string') { alignV = [alignV]; } for (x = 0; x < cols; x++) { colWidths.push(0); } for (y = 0; y < rows; y++) { rowHeights.push(0); } for (y = 0; y < rows; y++) { for (x = 0; x < cols; x++) { ctrl = items[y * cols + x]; if (!ctrl) { break; } ctrlLayoutRect = ctrl.layoutRect(); ctrlMinWidth = ctrlLayoutRect.minW; ctrlMinHeight = ctrlLayoutRect.minH; colWidths[x] = ctrlMinWidth > colWidths[x] ? ctrlMinWidth : colWidths[x]; rowHeights[y] = ctrlMinHeight > rowHeights[y] ? ctrlMinHeight : rowHeights[y]; } } availableWidth = contLayoutRect.innerW - contPaddingBox.left - contPaddingBox.right; for (maxX = 0, x = 0; x < cols; x++) { maxX += colWidths[x] + (x > 0 ? spacingH : 0); availableWidth -= (x > 0 ? spacingH : 0) + colWidths[x]; } availableHeight = contLayoutRect.innerH - contPaddingBox.top - contPaddingBox.bottom; for (maxY = 0, y = 0; y < rows; y++) { maxY += rowHeights[y] + (y > 0 ? spacingV : 0); availableHeight -= (y > 0 ? spacingV : 0) + rowHeights[y]; } maxX += contPaddingBox.left + contPaddingBox.right; maxY += contPaddingBox.top + contPaddingBox.bottom; rect = {}; rect.minW = maxX + (contLayoutRect.w - contLayoutRect.innerW); rect.minH = maxY + (contLayoutRect.h - contLayoutRect.innerH); rect.contentW = rect.minW - contLayoutRect.deltaW; rect.contentH = rect.minH - contLayoutRect.deltaH; rect.minW = Math.min(rect.minW, contLayoutRect.maxW); rect.minH = Math.min(rect.minH, contLayoutRect.maxH); rect.minW = Math.max(rect.minW, contLayoutRect.startMinWidth); rect.minH = Math.max(rect.minH, contLayoutRect.startMinHeight); if (contLayoutRect.autoResize && (rect.minW !== contLayoutRect.minW || rect.minH !== contLayoutRect.minH)) { rect.w = rect.minW; rect.h = rect.minH; container.layoutRect(rect); this.recalc(container); if (container._lastRect === null) { var parentCtrl = container.parent(); if (parentCtrl) { parentCtrl._lastRect = null; parentCtrl.recalc(); } } return; } if (contLayoutRect.autoResize) { rect = container.layoutRect(rect); rect.contentW = rect.minW - contLayoutRect.deltaW; rect.contentH = rect.minH - contLayoutRect.deltaH; } var flexV; if (settings.packV === 'start') { flexV = 0; } else { flexV = availableHeight > 0 ? Math.floor(availableHeight / rows) : 0; } var totalFlex = 0; var flexWidths = settings.flexWidths; if (flexWidths) { for (x = 0; x < flexWidths.length; x++) { totalFlex += flexWidths[x]; } } else { totalFlex = cols; } var ratio = availableWidth / totalFlex; for (x = 0; x < cols; x++) { colWidths[x] += flexWidths ? flexWidths[x] * ratio : ratio; } posY = contPaddingBox.top; for (y = 0; y < rows; y++) { posX = contPaddingBox.left; height = rowHeights[y] + flexV; for (x = 0; x < cols; x++) { if (reverseRows) { idx = y * cols + cols - 1 - x; } else { idx = y * cols + x; } ctrl = items[idx]; if (!ctrl) { break; } ctrlSettings = ctrl.settings; ctrlLayoutRect = ctrl.layoutRect(); width = Math.max(colWidths[x], ctrlLayoutRect.startMinWidth); ctrlLayoutRect.x = posX; ctrlLayoutRect.y = posY; align = ctrlSettings.alignH || (alignH ? alignH[x] || alignH[0] : null); if (align === 'center') { ctrlLayoutRect.x = posX + width / 2 - ctrlLayoutRect.w / 2; } else if (align === 'right') { ctrlLayoutRect.x = posX + width - ctrlLayoutRect.w; } else if (align === 'stretch') { ctrlLayoutRect.w = width; } align = ctrlSettings.alignV || (alignV ? alignV[x] || alignV[0] : null); if (align === 'center') { ctrlLayoutRect.y = posY + height / 2 - ctrlLayoutRect.h / 2; } else if (align === 'bottom') { ctrlLayoutRect.y = posY + height - ctrlLayoutRect.h; } else if (align === 'stretch') { ctrlLayoutRect.h = height; } ctrl.layoutRect(ctrlLayoutRect); posX += width + spacingH; if (ctrl.recalc) { ctrl.recalc(); } } posY += height + spacingV; } } }); var Iframe$1 = Widget.extend({ renderHtml: function () { var self = this; self.classes.add('iframe'); self.canFocus = false; return ''; }, src: function (src) { this.getEl().src = src; }, html: function (html, callback) { var self = this, body = this.getEl().contentWindow.document.body; if (!body) { global$7.setTimeout(function () { self.html(html); }); } else { body.innerHTML = html; if (callback) { callback(); } } return this; } }); var InfoBox = Widget.extend({ init: function (settings) { var self = this; self._super(settings); self.classes.add('widget').add('infobox'); self.canFocus = false; }, severity: function (level) { this.classes.remove('error'); this.classes.remove('warning'); this.classes.remove('success'); this.classes.add(level); }, help: function (state) { this.state.set('help', state); }, renderHtml: function () { var self = this, prefix = self.classPrefix; return '
      ' + '
      ' + self.encode(self.state.get('text')) + '' + '
      ' + '
      '; }, bindStates: function () { var self = this; self.state.on('change:text', function (e) { self.getEl('body').firstChild.data = self.encode(e.value); if (self.state.get('rendered')) { self.updateLayoutRect(); } }); self.state.on('change:help', function (e) { self.classes.toggle('has-help', e.value); if (self.state.get('rendered')) { self.updateLayoutRect(); } }); return self._super(); } }); var Label = Widget.extend({ init: function (settings) { var self = this; self._super(settings); self.classes.add('widget').add('label'); self.canFocus = false; if (settings.multiline) { self.classes.add('autoscroll'); } if (settings.strong) { self.classes.add('strong'); } }, initLayoutRect: function () { var self = this, layoutRect = self._super(); if (self.settings.multiline) { var size = funcs.getSize(self.getEl()); if (size.width > layoutRect.maxW) { layoutRect.minW = layoutRect.maxW; self.classes.add('multiline'); } self.getEl().style.width = layoutRect.minW + 'px'; layoutRect.startMinH = layoutRect.h = layoutRect.minH = Math.min(layoutRect.maxH, funcs.getSize(self.getEl()).height); } return layoutRect; }, repaint: function () { var self = this; if (!self.settings.multiline) { self.getEl().style.lineHeight = self.layoutRect().h + 'px'; } return self._super(); }, severity: function (level) { this.classes.remove('error'); this.classes.remove('warning'); this.classes.remove('success'); this.classes.add(level); }, renderHtml: function () { var self = this; var targetCtrl, forName, forId = self.settings.forId; var text = self.settings.html ? self.settings.html : self.encode(self.state.get('text')); if (!forId && (forName = self.settings.forName)) { targetCtrl = self.getRoot().find('#' + forName)[0]; if (targetCtrl) { forId = targetCtrl._id; } } if (forId) { return ''; } return '' + text + ''; }, bindStates: function () { var self = this; self.state.on('change:text', function (e) { self.innerHtml(self.encode(e.value)); if (self.state.get('rendered')) { self.updateLayoutRect(); } }); return self._super(); } }); var Toolbar$1 = Container.extend({ Defaults: { role: 'toolbar', layout: 'flow' }, init: function (settings) { var self = this; self._super(settings); self.classes.add('toolbar'); }, postRender: function () { var self = this; self.items().each(function (ctrl) { ctrl.classes.add('toolbar-item'); }); return self._super(); } }); var MenuBar = Toolbar$1.extend({ Defaults: { role: 'menubar', containerCls: 'menubar', ariaRoot: true, defaults: { type: 'menubutton' } } }); function isChildOf$1(node, parent) { while (node) { if (parent === node) { return true; } node = node.parentNode; } return false; } var MenuButton = Button.extend({ init: function (settings) { var self = this; self._renderOpen = true; self._super(settings); settings = self.settings; self.classes.add('menubtn'); if (settings.fixedWidth) { self.classes.add('fixed-width'); } self.aria('haspopup', true); self.state.set('menu', settings.menu || self.render()); }, showMenu: function (toggle) { var self = this; var menu; if (self.menu && self.menu.visible() && toggle !== false) { return self.hideMenu(); } if (!self.menu) { menu = self.state.get('menu') || []; self.classes.add('opened'); if (menu.length) { menu = { type: 'menu', animate: true, items: menu }; } else { menu.type = menu.type || 'menu'; menu.animate = true; } if (!menu.renderTo) { self.menu = global$4.create(menu).parent(self).renderTo(); } else { self.menu = menu.parent(self).show().renderTo(); } self.fire('createmenu'); self.menu.reflow(); self.menu.on('cancel', function (e) { if (e.control.parent() === self.menu) { e.stopPropagation(); self.focus(); self.hideMenu(); } }); self.menu.on('select', function () { self.focus(); }); self.menu.on('show hide', function (e) { if (e.type === 'hide' && e.control.parent() === self) { self.classes.remove('opened-under'); } if (e.control === self.menu) { self.activeMenu(e.type === 'show'); self.classes.toggle('opened', e.type === 'show'); } self.aria('expanded', e.type === 'show'); }).fire('show'); } self.menu.show(); self.menu.layoutRect({ w: self.layoutRect().w }); self.menu.repaint(); self.menu.moveRel(self.getEl(), self.isRtl() ? [ 'br-tr', 'tr-br' ] : [ 'bl-tl', 'tl-bl' ]); var menuLayoutRect = self.menu.layoutRect(); var selfBottom = self.$el.offset().top + self.layoutRect().h; if (selfBottom > menuLayoutRect.y && selfBottom < menuLayoutRect.y + menuLayoutRect.h) { self.classes.add('opened-under'); } self.fire('showmenu'); }, hideMenu: function () { var self = this; if (self.menu) { self.menu.items().each(function (item) { if (item.hideMenu) { item.hideMenu(); } }); self.menu.hide(); } }, activeMenu: function (state) { this.classes.toggle('active', state); }, renderHtml: function () { var self = this, id = self._id, prefix = self.classPrefix; var icon = self.settings.icon, image; var text = self.state.get('text'); var textHtml = ''; image = self.settings.image; if (image) { icon = 'none'; if (typeof image !== 'string') { image = domGlobals.window.getSelection ? image[0] : image[1]; } image = ' style="background-image: url(\'' + image + '\')"'; } else { image = ''; } if (text) { self.classes.add('btn-has-text'); textHtml = '' + self.encode(text) + ''; } icon = self.settings.icon ? prefix + 'ico ' + prefix + 'i-' + icon : ''; self.aria('role', self.parent() instanceof MenuBar ? 'menuitem' : 'button'); return '
      ' + '' + '
      '; }, postRender: function () { var self = this; self.on('click', function (e) { if (e.control === self && isChildOf$1(e.target, self.getEl())) { self.focus(); self.showMenu(!e.aria); if (e.aria) { self.menu.items().filter(':visible')[0].focus(); } } }); self.on('mouseenter', function (e) { var overCtrl = e.control; var parent = self.parent(); var hasVisibleSiblingMenu; if (overCtrl && parent && overCtrl instanceof MenuButton && overCtrl.parent() === parent) { parent.items().filter('MenuButton').each(function (ctrl) { if (ctrl.hideMenu && ctrl !== overCtrl) { if (ctrl.menu && ctrl.menu.visible()) { hasVisibleSiblingMenu = true; } ctrl.hideMenu(); } }); if (hasVisibleSiblingMenu) { overCtrl.focus(); overCtrl.showMenu(); } } }); return self._super(); }, bindStates: function () { var self = this; self.state.on('change:menu', function () { if (self.menu) { self.menu.remove(); } self.menu = null; }); return self._super(); }, remove: function () { this._super(); if (this.menu) { this.menu.remove(); } } }); var Menu = FloatPanel.extend({ Defaults: { defaultType: 'menuitem', border: 1, layout: 'stack', role: 'application', bodyRole: 'menu', ariaRoot: true }, init: function (settings) { var self = this; settings.autohide = true; settings.constrainToViewport = true; if (typeof settings.items === 'function') { settings.itemsFactory = settings.items; settings.items = []; } if (settings.itemDefaults) { var items = settings.items; var i = items.length; while (i--) { items[i] = global$2.extend({}, settings.itemDefaults, items[i]); } } self._super(settings); self.classes.add('menu'); if (settings.animate && global$8.ie !== 11) { self.classes.add('animate'); } }, repaint: function () { this.classes.toggle('menu-align', true); this._super(); this.getEl().style.height = ''; this.getEl('body').style.height = ''; return this; }, cancel: function () { var self = this; self.hideAll(); self.fire('select'); }, load: function () { var self = this; var time, factory; function hideThrobber() { if (self.throbber) { self.throbber.hide(); self.throbber = null; } } factory = self.settings.itemsFactory; if (!factory) { return; } if (!self.throbber) { self.throbber = new Throbber(self.getEl('body'), true); if (self.items().length === 0) { self.throbber.show(); self.fire('loading'); } else { self.throbber.show(100, function () { self.items().remove(); self.fire('loading'); }); } self.on('hide close', hideThrobber); } self.requestTime = time = new Date().getTime(); self.settings.itemsFactory(function (items) { if (items.length === 0) { self.hide(); return; } if (self.requestTime !== time) { return; } self.getEl().style.width = ''; self.getEl('body').style.width = ''; hideThrobber(); self.items().remove(); self.getEl('body').innerHTML = ''; self.add(items); self.renderNew(); self.fire('loaded'); }); }, hideAll: function () { var self = this; this.find('menuitem').exec('hideMenu'); return self._super(); }, preRender: function () { var self = this; self.items().each(function (ctrl) { var settings = ctrl.settings; if (settings.icon || settings.image || settings.selectable) { self._hasIcons = true; return false; } }); if (self.settings.itemsFactory) { self.on('postrender', function () { if (self.settings.itemsFactory) { self.load(); } }); } self.on('show hide', function (e) { if (e.control === self) { if (e.type === 'show') { global$7.setTimeout(function () { self.classes.add('in'); }, 0); } else { self.classes.remove('in'); } } }); return self._super(); } }); var ListBox = MenuButton.extend({ init: function (settings) { var self = this; var values, selected, selectedText, lastItemCtrl; function setSelected(menuValues) { for (var i = 0; i < menuValues.length; i++) { selected = menuValues[i].selected || settings.value === menuValues[i].value; if (selected) { selectedText = selectedText || menuValues[i].text; self.state.set('value', menuValues[i].value); return true; } if (menuValues[i].menu) { if (setSelected(menuValues[i].menu)) { return true; } } } } self._super(settings); settings = self.settings; self._values = values = settings.values; if (values) { if (typeof settings.value !== 'undefined') { setSelected(values); } if (!selected && values.length > 0) { selectedText = values[0].text; self.state.set('value', values[0].value); } self.state.set('menu', values); } self.state.set('text', settings.text || selectedText); self.classes.add('listbox'); self.on('select', function (e) { var ctrl = e.control; if (lastItemCtrl) { e.lastControl = lastItemCtrl; } if (settings.multiple) { ctrl.active(!ctrl.active()); } else { self.value(e.control.value()); } lastItemCtrl = ctrl; }); }, value: function (value) { if (arguments.length === 0) { return this.state.get('value'); } if (typeof value === 'undefined') { return this; } function valueExists(values) { return exists(values, function (a) { return a.menu ? valueExists(a.menu) : a.value === value; }); } if (this.settings.values) { if (valueExists(this.settings.values)) { this.state.set('value', value); } else if (value === null) { this.state.set('value', null); } } else { this.state.set('value', value); } return this; }, bindStates: function () { var self = this; function activateMenuItemsByValue(menu, value) { if (menu instanceof Menu) { menu.items().each(function (ctrl) { if (!ctrl.hasMenus()) { ctrl.active(ctrl.value() === value); } }); } } function getSelectedItem(menuValues, value) { var selectedItem; if (!menuValues) { return; } for (var i = 0; i < menuValues.length; i++) { if (menuValues[i].value === value) { return menuValues[i]; } if (menuValues[i].menu) { selectedItem = getSelectedItem(menuValues[i].menu, value); if (selectedItem) { return selectedItem; } } } } self.on('show', function (e) { activateMenuItemsByValue(e.control, self.value()); }); self.state.on('change:value', function (e) { var selectedItem = getSelectedItem(self.state.get('menu'), e.value); if (selectedItem) { self.text(selectedItem.text); } else { self.text(self.settings.text); } }); return self._super(); } }); var toggleTextStyle = function (ctrl, state) { var textStyle = ctrl._textStyle; if (textStyle) { var textElm = ctrl.getEl('text'); textElm.setAttribute('style', textStyle); if (state) { textElm.style.color = ''; textElm.style.backgroundColor = ''; } } }; var MenuItem = Widget.extend({ Defaults: { border: 0, role: 'menuitem' }, init: function (settings) { var self = this; var text; self._super(settings); settings = self.settings; self.classes.add('menu-item'); if (settings.menu) { self.classes.add('menu-item-expand'); } if (settings.preview) { self.classes.add('menu-item-preview'); } text = self.state.get('text'); if (text === '-' || text === '|') { self.classes.add('menu-item-sep'); self.aria('role', 'separator'); self.state.set('text', '-'); } if (settings.selectable) { self.aria('role', 'menuitemcheckbox'); self.classes.add('menu-item-checkbox'); settings.icon = 'selected'; } if (!settings.preview && !settings.selectable) { self.classes.add('menu-item-normal'); } self.on('mousedown', function (e) { e.preventDefault(); }); if (settings.menu && !settings.ariaHideMenu) { self.aria('haspopup', true); } }, hasMenus: function () { return !!this.settings.menu; }, showMenu: function () { var self = this; var settings = self.settings; var menu; var parent = self.parent(); parent.items().each(function (ctrl) { if (ctrl !== self) { ctrl.hideMenu(); } }); if (settings.menu) { menu = self.menu; if (!menu) { menu = settings.menu; if (menu.length) { menu = { type: 'menu', items: menu }; } else { menu.type = menu.type || 'menu'; } if (parent.settings.itemDefaults) { menu.itemDefaults = parent.settings.itemDefaults; } menu = self.menu = global$4.create(menu).parent(self).renderTo(); menu.reflow(); menu.on('cancel', function (e) { e.stopPropagation(); self.focus(); menu.hide(); }); menu.on('show hide', function (e) { if (e.control.items) { e.control.items().each(function (ctrl) { ctrl.active(ctrl.settings.selected); }); } }).fire('show'); menu.on('hide', function (e) { if (e.control === menu) { self.classes.remove('selected'); } }); menu.submenu = true; } else { menu.show(); } menu._parentMenu = parent; menu.classes.add('menu-sub'); var rel = menu.testMoveRel(self.getEl(), self.isRtl() ? [ 'tl-tr', 'bl-br', 'tr-tl', 'br-bl' ] : [ 'tr-tl', 'br-bl', 'tl-tr', 'bl-br' ]); menu.moveRel(self.getEl(), rel); menu.rel = rel; rel = 'menu-sub-' + rel; menu.classes.remove(menu._lastRel).add(rel); menu._lastRel = rel; self.classes.add('selected'); self.aria('expanded', true); } }, hideMenu: function () { var self = this; if (self.menu) { self.menu.items().each(function (item) { if (item.hideMenu) { item.hideMenu(); } }); self.menu.hide(); self.aria('expanded', false); } return self; }, renderHtml: function () { var self = this; var id = self._id; var settings = self.settings; var prefix = self.classPrefix; var text = self.state.get('text'); var icon = self.settings.icon, image = '', shortcut = settings.shortcut; var url = self.encode(settings.url), iconHtml = ''; function convertShortcut(shortcut) { var i, value, replace = {}; if (global$8.mac) { replace = { alt: '⌥', ctrl: '⌘', shift: '⇧', meta: '⌘' }; } else { replace = { meta: 'Ctrl' }; } shortcut = shortcut.split('+'); for (i = 0; i < shortcut.length; i++) { value = replace[shortcut[i].toLowerCase()]; if (value) { shortcut[i] = value; } } return shortcut.join('+'); } function escapeRegExp(str) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } function markMatches(text) { var match = settings.match || ''; return match ? text.replace(new RegExp(escapeRegExp(match), 'gi'), function (match) { return '!mce~match[' + match + ']mce~match!'; }) : text; } function boldMatches(text) { return text.replace(new RegExp(escapeRegExp('!mce~match['), 'g'), '').replace(new RegExp(escapeRegExp(']mce~match!'), 'g'), ''); } if (icon) { self.parent().classes.add('menu-has-icons'); } if (settings.image) { image = ' style="background-image: url(\'' + settings.image + '\')"'; } if (shortcut) { shortcut = convertShortcut(shortcut); } icon = prefix + 'ico ' + prefix + 'i-' + (self.settings.icon || 'none'); iconHtml = text !== '-' ? '\xA0' : ''; text = boldMatches(self.encode(markMatches(text))); url = boldMatches(self.encode(markMatches(url))); return '
      ' + iconHtml + (text !== '-' ? '' + text + '' : '') + (shortcut ? '
      ' + shortcut + '
      ' : '') + (settings.menu ? '
      ' : '') + (url ? '' : '') + '
      '; }, postRender: function () { var self = this, settings = self.settings; var textStyle = settings.textStyle; if (typeof textStyle === 'function') { textStyle = textStyle.call(this); } if (textStyle) { var textElm = self.getEl('text'); if (textElm) { textElm.setAttribute('style', textStyle); self._textStyle = textStyle; } } self.on('mouseenter click', function (e) { if (e.control === self) { if (!settings.menu && e.type === 'click') { self.fire('select'); global$7.requestAnimationFrame(function () { self.parent().hideAll(); }); } else { self.showMenu(); if (e.aria) { self.menu.focus(true); } } } }); self._super(); return self; }, hover: function () { var self = this; self.parent().items().each(function (ctrl) { ctrl.classes.remove('selected'); }); self.classes.toggle('selected', true); return self; }, active: function (state) { toggleTextStyle(this, state); if (typeof state !== 'undefined') { this.aria('checked', state); } return this._super(state); }, remove: function () { this._super(); if (this.menu) { this.menu.remove(); } } }); var Radio = Checkbox.extend({ Defaults: { classes: 'radio', role: 'radio' } }); var ResizeHandle = Widget.extend({ renderHtml: function () { var self = this, prefix = self.classPrefix; self.classes.add('resizehandle'); if (self.settings.direction === 'both') { self.classes.add('resizehandle-both'); } self.canFocus = false; return '
      ' + '' + '
      '; }, postRender: function () { var self = this; self._super(); self.resizeDragHelper = new DragHelper(this._id, { start: function () { self.fire('ResizeStart'); }, drag: function (e) { if (self.settings.direction !== 'both') { e.deltaX = 0; } self.fire('Resize', e); }, stop: function () { self.fire('ResizeEnd'); } }); }, remove: function () { if (this.resizeDragHelper) { this.resizeDragHelper.destroy(); } return this._super(); } }); function createOptions(options) { var strOptions = ''; if (options) { for (var i = 0; i < options.length; i++) { strOptions += ''; } } return strOptions; } var SelectBox = Widget.extend({ Defaults: { classes: 'selectbox', role: 'selectbox', options: [] }, init: function (settings) { var self = this; self._super(settings); if (self.settings.size) { self.size = self.settings.size; } if (self.settings.options) { self._options = self.settings.options; } self.on('keydown', function (e) { var rootControl; if (e.keyCode === 13) { e.preventDefault(); self.parents().reverse().each(function (ctrl) { if (ctrl.toJSON) { rootControl = ctrl; return false; } }); self.fire('submit', { data: rootControl.toJSON() }); } }); }, options: function (state) { if (!arguments.length) { return this.state.get('options'); } this.state.set('options', state); return this; }, renderHtml: function () { var self = this; var options, size = ''; options = createOptions(self._options); if (self.size) { size = ' size = "' + self.size + '"'; } return ''; }, bindStates: function () { var self = this; self.state.on('change:options', function (e) { self.getEl().innerHTML = createOptions(e.value); }); return self._super(); } }); function constrain(value, minVal, maxVal) { if (value < minVal) { value = minVal; } if (value > maxVal) { value = maxVal; } return value; } function setAriaProp(el, name, value) { el.setAttribute('aria-' + name, value); } function updateSliderHandle(ctrl, value) { var maxHandlePos, shortSizeName, sizeName, stylePosName, styleValue, handleEl; if (ctrl.settings.orientation === 'v') { stylePosName = 'top'; sizeName = 'height'; shortSizeName = 'h'; } else { stylePosName = 'left'; sizeName = 'width'; shortSizeName = 'w'; } handleEl = ctrl.getEl('handle'); maxHandlePos = (ctrl.layoutRect()[shortSizeName] || 100) - funcs.getSize(handleEl)[sizeName]; styleValue = maxHandlePos * ((value - ctrl._minValue) / (ctrl._maxValue - ctrl._minValue)) + 'px'; handleEl.style[stylePosName] = styleValue; handleEl.style.height = ctrl.layoutRect().h + 'px'; setAriaProp(handleEl, 'valuenow', value); setAriaProp(handleEl, 'valuetext', '' + ctrl.settings.previewFilter(value)); setAriaProp(handleEl, 'valuemin', ctrl._minValue); setAriaProp(handleEl, 'valuemax', ctrl._maxValue); } var Slider = Widget.extend({ init: function (settings) { var self = this; if (!settings.previewFilter) { settings.previewFilter = function (value) { return Math.round(value * 100) / 100; }; } self._super(settings); self.classes.add('slider'); if (settings.orientation === 'v') { self.classes.add('vertical'); } self._minValue = isNumber(settings.minValue) ? settings.minValue : 0; self._maxValue = isNumber(settings.maxValue) ? settings.maxValue : 100; self._initValue = self.state.get('value'); }, renderHtml: function () { var self = this, id = self._id, prefix = self.classPrefix; return '
      ' + '
      ' + '
      '; }, reset: function () { this.value(this._initValue).repaint(); }, postRender: function () { var self = this; var minValue, maxValue, screenCordName, stylePosName, sizeName, shortSizeName; function toFraction(min, max, val) { return (val + min) / (max - min); } function fromFraction(min, max, val) { return val * (max - min) - min; } function handleKeyboard(minValue, maxValue) { function alter(delta) { var value; value = self.value(); value = fromFraction(minValue, maxValue, toFraction(minValue, maxValue, value) + delta * 0.05); value = constrain(value, minValue, maxValue); self.value(value); self.fire('dragstart', { value: value }); self.fire('drag', { value: value }); self.fire('dragend', { value: value }); } self.on('keydown', function (e) { switch (e.keyCode) { case 37: case 38: alter(-1); break; case 39: case 40: alter(1); break; } }); } function handleDrag(minValue, maxValue, handleEl) { var startPos, startHandlePos, maxHandlePos, handlePos, value; self._dragHelper = new DragHelper(self._id, { handle: self._id + '-handle', start: function (e) { startPos = e[screenCordName]; startHandlePos = parseInt(self.getEl('handle').style[stylePosName], 10); maxHandlePos = (self.layoutRect()[shortSizeName] || 100) - funcs.getSize(handleEl)[sizeName]; self.fire('dragstart', { value: value }); }, drag: function (e) { var delta = e[screenCordName] - startPos; handlePos = constrain(startHandlePos + delta, 0, maxHandlePos); handleEl.style[stylePosName] = handlePos + 'px'; value = minValue + handlePos / maxHandlePos * (maxValue - minValue); self.value(value); self.tooltip().text('' + self.settings.previewFilter(value)).show().moveRel(handleEl, 'bc tc'); self.fire('drag', { value: value }); }, stop: function () { self.tooltip().hide(); self.fire('dragend', { value: value }); } }); } minValue = self._minValue; maxValue = self._maxValue; if (self.settings.orientation === 'v') { screenCordName = 'screenY'; stylePosName = 'top'; sizeName = 'height'; shortSizeName = 'h'; } else { screenCordName = 'screenX'; stylePosName = 'left'; sizeName = 'width'; shortSizeName = 'w'; } self._super(); handleKeyboard(minValue, maxValue); handleDrag(minValue, maxValue, self.getEl('handle')); }, repaint: function () { this._super(); updateSliderHandle(this, this.value()); }, bindStates: function () { var self = this; self.state.on('change:value', function (e) { updateSliderHandle(self, e.value); }); return self._super(); } }); var Spacer = Widget.extend({ renderHtml: function () { var self = this; self.classes.add('spacer'); self.canFocus = false; return '
      '; } }); var SplitButton = MenuButton.extend({ Defaults: { classes: 'widget btn splitbtn', role: 'button' }, repaint: function () { var self = this; var elm = self.getEl(); var rect = self.layoutRect(); var mainButtonElm, menuButtonElm; self._super(); mainButtonElm = elm.firstChild; menuButtonElm = elm.lastChild; global$9(mainButtonElm).css({ width: rect.w - funcs.getSize(menuButtonElm).width, height: rect.h - 2 }); global$9(menuButtonElm).css({ height: rect.h - 2 }); return self; }, activeMenu: function (state) { var self = this; global$9(self.getEl().lastChild).toggleClass(self.classPrefix + 'active', state); }, renderHtml: function () { var self = this; var id = self._id; var prefix = self.classPrefix; var image; var icon = self.state.get('icon'); var text = self.state.get('text'); var settings = self.settings; var textHtml = '', ariaPressed; image = settings.image; if (image) { icon = 'none'; if (typeof image !== 'string') { image = domGlobals.window.getSelection ? image[0] : image[1]; } image = ' style="background-image: url(\'' + image + '\')"'; } else { image = ''; } icon = settings.icon ? prefix + 'ico ' + prefix + 'i-' + icon : ''; if (text) { self.classes.add('btn-has-text'); textHtml = '' + self.encode(text) + ''; } ariaPressed = typeof settings.active === 'boolean' ? ' aria-pressed="' + settings.active + '"' : ''; return '
      ' + '' + '' + '
      '; }, postRender: function () { var self = this, onClickHandler = self.settings.onclick; self.on('click', function (e) { var node = e.target; if (e.control === this) { while (node) { if (e.aria && e.aria.key !== 'down' || node.nodeName === 'BUTTON' && node.className.indexOf('open') === -1) { e.stopImmediatePropagation(); if (onClickHandler) { onClickHandler.call(this, e); } return; } node = node.parentNode; } } }); delete self.settings.onclick; return self._super(); } }); var StackLayout = FlowLayout.extend({ Defaults: { containerClass: 'stack-layout', controlClass: 'stack-layout-item', endClass: 'break' }, isNative: function () { return true; } }); var TabPanel = Panel.extend({ Defaults: { layout: 'absolute', defaults: { type: 'panel' } }, activateTab: function (idx) { var activeTabElm; if (this.activeTabId) { activeTabElm = this.getEl(this.activeTabId); global$9(activeTabElm).removeClass(this.classPrefix + 'active'); activeTabElm.setAttribute('aria-selected', 'false'); } this.activeTabId = 't' + idx; activeTabElm = this.getEl('t' + idx); activeTabElm.setAttribute('aria-selected', 'true'); global$9(activeTabElm).addClass(this.classPrefix + 'active'); this.items()[idx].show().fire('showtab'); this.reflow(); this.items().each(function (item, i) { if (idx !== i) { item.hide(); } }); }, renderHtml: function () { var self = this; var layout = self._layout; var tabsHtml = ''; var prefix = self.classPrefix; self.preRender(); layout.preRender(self); self.items().each(function (ctrl, i) { var id = self._id + '-t' + i; ctrl.aria('role', 'tabpanel'); ctrl.aria('labelledby', id); tabsHtml += ''; }); return '
      ' + '
      ' + tabsHtml + '
      ' + '
      ' + layout.renderHtml(self) + '
      ' + '
      '; }, postRender: function () { var self = this; self._super(); self.settings.activeTab = self.settings.activeTab || 0; self.activateTab(self.settings.activeTab); this.on('click', function (e) { var targetParent = e.target.parentNode; if (targetParent && targetParent.id === self._id + '-head') { var i = targetParent.childNodes.length; while (i--) { if (targetParent.childNodes[i] === e.target) { self.activateTab(i); } } } }); }, initLayoutRect: function () { var self = this; var rect, minW, minH; minW = funcs.getSize(self.getEl('head')).width; minW = minW < 0 ? 0 : minW; minH = 0; self.items().each(function (item) { minW = Math.max(minW, item.layoutRect().minW); minH = Math.max(minH, item.layoutRect().minH); }); self.items().each(function (ctrl) { ctrl.settings.x = 0; ctrl.settings.y = 0; ctrl.settings.w = minW; ctrl.settings.h = minH; ctrl.layoutRect({ x: 0, y: 0, w: minW, h: minH }); }); var headH = funcs.getSize(self.getEl('head')).height; self.settings.minWidth = minW; self.settings.minHeight = minH + headH; rect = self._super(); rect.deltaH += headH; rect.innerH = rect.h - rect.deltaH; return rect; } }); var TextBox = Widget.extend({ init: function (settings) { var self = this; self._super(settings); self.classes.add('textbox'); if (settings.multiline) { self.classes.add('multiline'); } else { self.on('keydown', function (e) { var rootControl; if (e.keyCode === 13) { e.preventDefault(); self.parents().reverse().each(function (ctrl) { if (ctrl.toJSON) { rootControl = ctrl; return false; } }); self.fire('submit', { data: rootControl.toJSON() }); } }); self.on('keyup', function (e) { self.state.set('value', e.target.value); }); } }, repaint: function () { var self = this; var style, rect, borderBox, borderW, borderH = 0, lastRepaintRect; style = self.getEl().style; rect = self._layoutRect; lastRepaintRect = self._lastRepaintRect || {}; var doc = domGlobals.document; if (!self.settings.multiline && doc.all && (!doc.documentMode || doc.documentMode <= 8)) { style.lineHeight = rect.h - borderH + 'px'; } borderBox = self.borderBox; borderW = borderBox.left + borderBox.right + 8; borderH = borderBox.top + borderBox.bottom + (self.settings.multiline ? 8 : 0); if (rect.x !== lastRepaintRect.x) { style.left = rect.x + 'px'; lastRepaintRect.x = rect.x; } if (rect.y !== lastRepaintRect.y) { style.top = rect.y + 'px'; lastRepaintRect.y = rect.y; } if (rect.w !== lastRepaintRect.w) { style.width = rect.w - borderW + 'px'; lastRepaintRect.w = rect.w; } if (rect.h !== lastRepaintRect.h) { style.height = rect.h - borderH + 'px'; lastRepaintRect.h = rect.h; } self._lastRepaintRect = lastRepaintRect; self.fire('repaint', {}, false); return self; }, renderHtml: function () { var self = this; var settings = self.settings; var attrs, elm; attrs = { id: self._id, hidefocus: '1' }; global$2.each([ 'rows', 'spellcheck', 'maxLength', 'size', 'readonly', 'min', 'max', 'step', 'list', 'pattern', 'placeholder', 'required', 'multiple' ], function (name) { attrs[name] = settings[name]; }); if (self.disabled()) { attrs.disabled = 'disabled'; } if (settings.subtype) { attrs.type = settings.subtype; } elm = funcs.create(settings.multiline ? 'textarea' : 'input', attrs); elm.value = self.state.get('value'); elm.className = self.classes.toString(); return elm.outerHTML; }, value: function (value) { if (arguments.length) { this.state.set('value', value); return this; } if (this.state.get('rendered')) { this.state.set('value', this.getEl().value); } return this.state.get('value'); }, postRender: function () { var self = this; self.getEl().value = self.state.get('value'); self._super(); self.$el.on('change', function (e) { self.state.set('value', e.target.value); self.fire('change', e); }); }, bindStates: function () { var self = this; self.state.on('change:value', function (e) { if (self.getEl().value !== e.value) { self.getEl().value = e.value; } }); self.state.on('change:disabled', function (e) { self.getEl().disabled = e.value; }); return self._super(); }, remove: function () { this.$el.off(); this._super(); } }); var getApi = function () { return { Selector: Selector, Collection: Collection$2, ReflowQueue: ReflowQueue, Control: Control$1, Factory: global$4, KeyboardNavigation: KeyboardNavigation, Container: Container, DragHelper: DragHelper, Scrollable: Scrollable, Panel: Panel, Movable: Movable, Resizable: Resizable, FloatPanel: FloatPanel, Window: Window, MessageBox: MessageBox, Tooltip: Tooltip, Widget: Widget, Progress: Progress, Notification: Notification, Layout: Layout, AbsoluteLayout: AbsoluteLayout, Button: Button, ButtonGroup: ButtonGroup, Checkbox: Checkbox, ComboBox: ComboBox, ColorBox: ColorBox, PanelButton: PanelButton, ColorButton: ColorButton, ColorPicker: ColorPicker, Path: Path, ElementPath: ElementPath, FormItem: FormItem, Form: Form, FieldSet: FieldSet, FilePicker: FilePicker, FitLayout: FitLayout, FlexLayout: FlexLayout, FlowLayout: FlowLayout, FormatControls: FormatControls, GridLayout: GridLayout, Iframe: Iframe$1, InfoBox: InfoBox, Label: Label, Toolbar: Toolbar$1, MenuBar: MenuBar, MenuButton: MenuButton, MenuItem: MenuItem, Throbber: Throbber, Menu: Menu, ListBox: ListBox, Radio: Radio, ResizeHandle: ResizeHandle, SelectBox: SelectBox, Slider: Slider, Spacer: Spacer, SplitButton: SplitButton, StackLayout: StackLayout, TabPanel: TabPanel, TextBox: TextBox, DropZone: DropZone, BrowseButton: BrowseButton }; }; var appendTo = function (target) { if (target.ui) { global$2.each(getApi(), function (ref, key) { target.ui[key] = ref; }); } else { target.ui = getApi(); } }; var registerToFactory = function () { global$2.each(getApi(), function (ref, key) { global$4.add(key, ref); }); }; var Api = { appendTo: appendTo, registerToFactory: registerToFactory }; Api.registerToFactory(); Api.appendTo(window.tinymce ? window.tinymce : {}); global.add('modern', function (editor) { FormatControls.setup(editor); return ThemeApi.get(editor); }); function Theme () { } return Theme; }(window)); })(); PK!@)##"tinymce/themes/inlite/theme.min.jsnu[!function(_){"use strict";var u,t,e,n,i,r=tinymce.util.Tools.resolve("tinymce.ThemeManager"),h=tinymce.util.Tools.resolve("tinymce.Env"),v=tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),c=tinymce.util.Tools.resolve("tinymce.util.Delay"),o=function(t){return t.reduce(function(t,e){return Array.isArray(e)?t.concat(o(e)):t.concat(e)},[])},s={flatten:o},a=function(t,e){for(var n=0;n+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,zt=/^\s*|\s*$/g,Ft=St.extend({init:function(t){var o=this.match;function s(t,e,n){var i;function r(t){t&&e.push(t)}return r(function(e){if(e)return e=e.toLowerCase(),function(t){return"*"===e||t.type===e}}((i=Lt.exec(t.replace(zt,"")))[1])),r(function(e){if(e)return function(t){return t._name===e}}(i[2])),r(function(n){if(n)return n=n.split("."),function(t){for(var e=n.length;e--;)if(!t.classes.contains(n[e]))return!1;return!0}}(i[3])),r(function(n,i,r){if(n)return function(t){var e=t[n]?t[n]():"";return i?"="===i?e===r:"*="===i?0<=e.indexOf(r):"~="===i?0<=(" "+e+" ").indexOf(" "+r+" "):"!="===i?e!==r:"^="===i?0===e.indexOf(r):"$="===i&&e.substr(e.length-r.length)===r:!!r}}(i[4],i[5],i[6])),r(function(i){var e;if(i)return(i=/(?:not\((.+)\))|(.+)/i.exec(i))[1]?(e=a(i[1],[]),function(t){return!o(t,e)}):(i=i[2],function(t,e,n){return"first"===i?0===e:"last"===i?e===n-1:"even"===i?e%2==0:"odd"===i?e%2==1:!!t[i]&&t[i]()})}(i[7])),e.pseudo=!!i[7],e.direct=n,e}function a(t,e){var n,i,r,o=[];do{if(It.exec(""),(i=It.exec(t))&&(t=i[3],o.push(i[1]),i[2])){n=i[3];break}}while(i);for(n&&a(n,e),t=[],r=0;r"!==o[r]&&t.push(s(o[r],[],">"===o[r-1]));return e.push(t),e}this._selectors=a(t,[])},match:function(t,e){var n,i,r,o,s,a,l,u,c,d,f,h,m;for(n=0,i=(e=e||this._selectors).length;na.maxW?a.maxW:n,a.w=n,a.innerW=n-i),(n=t.h)!==undefined&&(n=(n=na.maxH?a.maxH:n,a.h=n,a.innerH=n-r),(n=t.innerW)!==undefined&&(n=(n=na.maxW-i?a.maxW-i:n,a.innerW=n,a.w=n+i),(n=t.innerH)!==undefined&&(n=(n=na.maxH-r?a.maxH-r:n,a.innerH=n,a.h=n+r),t.contentW!==undefined&&(a.contentW=t.contentW),t.contentH!==undefined&&(a.contentH=t.contentH),(e=s._lastLayoutRect).x===a.x&&e.y===a.y&&e.w===a.w&&e.h===a.h||((o=Jt.repaintControls)&&o.map&&!o.map[s._id]&&(o.push(s),o.map[s._id]=!0),e.x=a.x,e.y=a.y,e.w=a.w,e.h=a.h),s):a},repaint:function(){var t,e,n,i,r,o,s,a,l,u,c=this;l=_.document.createRange?function(t){return t}:Math.round,t=c.getEl().style,i=c._layoutRect,a=c._lastRepaintRect||{},o=(r=c.borderBox).left+r.right,s=r.top+r.bottom,i.x!==a.x&&(t.left=l(i.x)+"px",a.x=i.x),i.y!==a.y&&(t.top=l(i.y)+"px",a.y=i.y),i.w!==a.w&&(u=l(i.w-o),t.width=(0<=u?u:0)+"px",a.w=i.w),i.h!==a.h&&(u=l(i.h-s),t.height=(0<=u?u:0)+"px",a.h=i.h),c._hasBody&&i.innerW!==a.innerW&&(u=l(i.innerW),(n=c.getEl("body"))&&((e=n.style).width=(0<=u?u:0)+"px"),a.innerW=i.innerW),c._hasBody&&i.innerH!==a.innerH&&(u=l(i.innerH),(n=n||c.getEl("body"))&&((e=e||n.style).height=(0<=u?u:0)+"px"),a.innerH=i.innerH),c._lastRepaintRect=a,c.fire("repaint",{},!1)},updateLayoutRect:function(){var t=this;t.parent()._lastRect=null,Ht.css(t.getEl(),{width:"",height:""}),t._layoutRect=t._lastRepaintRect=t._lastLayoutRect=null,t.initLayoutRect()},on:function(t,e){var n,i,r,o=this;return oe(o).on(t,"string"!=typeof(n=e)?n:function(t){return i||o.parentsAndSelf().each(function(t){var e=t.settings.callbacks;if(e&&(i=e[n]))return r=t,!1}),i?i.call(r,t):(t.action=n,void this.fire("execute",t))}),o},off:function(t,e){return oe(this).off(t,e),this},fire:function(t,e,n){if((e=e||{}).control||(e.control=this),e=oe(this).fire(t,e),!1!==n&&this.parent)for(var i=this.parent();i&&!e.isPropagationStopped();)i.fire(t,e,!1),i=i.parent();return e},hasEventListeners:function(t){return oe(this).has(t)},parents:function(t){var e,n=new qt;for(e=this.parent();e;e=e.parent())n.add(e);return t&&(n=n.filter(t)),n},parentsAndSelf:function(t){return new qt(this).add(this.parents(t))},next:function(){var t=this.parent().items();return t[t.indexOf(this)+1]},prev:function(){var t=this.parent().items();return t[t.indexOf(this)-1]},innerHtml:function(t){return this.$el.html(t),this},getEl:function(t){var e=t?this._id+"-"+t:this._id;return this._elmCache[e]||(this._elmCache[e]=Tt("#"+e)[0]),this._elmCache[e]},show:function(){return this.visible(!0)},hide:function(){return this.visible(!1)},focus:function(){try{this.getEl().focus()}catch(t){}return this},blur:function(){return this.getEl().blur(),this},aria:function(t,e){var n=this,i=n.getEl(n.ariaTarget);return void 0===e?n._aria[t]:(n._aria[t]=e,n.state.get("rendered")&&i.setAttribute("role"===t?t:"aria-"+t,e),n)},encode:function(t,e){return!1!==e&&(t=this.translate(t)),(t||"").replace(/[&<>"]/g,function(t){return"&#"+t.charCodeAt(0)+";"})},translate:function(t){return Jt.translate?Jt.translate(t):t},before:function(t){var e=this.parent();return e&&e.insert(t,e.items().indexOf(this),!0),this},after:function(t){var e=this.parent();return e&&e.insert(t,e.items().indexOf(this)),this},remove:function(){var e,t,n=this,i=n.getEl(),r=n.parent();if(n.items){var o=n.items().toArray();for(t=o.length;t--;)o[t].remove()}r&&r.items&&(e=[],r.items().each(function(t){t!==n&&e.push(t)}),r.items().set(e),r._lastRect=null),n._eventsRoot&&n._eventsRoot===n&&Tt(i).off();var s=n.getRoot().controlIdLookup;return s&&delete s[n._id],i&&i.parentNode&&i.parentNode.removeChild(i),n.state.set("rendered",!1),n.state.destroy(),n.fire("remove"),n},renderBefore:function(t){return Tt(t).before(this.renderHtml()),this.postRender(),this},renderTo:function(t){return Tt(t||this.getContainerElm()).append(this.renderHtml()),this.postRender(),this},preRender:function(){},render:function(){},renderHtml:function(){return'
      '},postRender:function(){var t,e,n,i,r,o=this,s=o.settings;for(i in o.$el=Tt(o.getEl()),o.state.set("rendered",!0),s)0===i.indexOf("on")&&o.on(i.substr(2),s[i]);if(o._eventsRoot){for(n=o.parent();!r&&n;n=n.parent())r=n._eventsRoot;if(r)for(i in r._nativeEvents)o._nativeEvents[i]=!0}se(o),s.style&&(t=o.getEl())&&(t.setAttribute("style",s.style),t.style.cssText=s.style),o.settings.border&&(e=o.borderBox,o.$el.css({"border-top-width":e.top,"border-right-width":e.right,"border-bottom-width":e.bottom,"border-left-width":e.left}));var a=o.getRoot();for(var l in a.controlIdLookup||(a.controlIdLookup={}),(a.controlIdLookup[o._id]=o)._aria)o.aria(l,o._aria[l]);!1===o.state.get("visible")&&(o.getEl().style.display="none"),o.bindStates(),o.state.on("change:visible",function(t){var e,n=t.value;o.state.get("rendered")&&(o.getEl().style.display=!1===n?"none":"",o.getEl().getBoundingClientRect()),(e=o.parent())&&(e._lastRect=null),o.fire(n?"show":"hide"),Zt.add(o)}),o.fire("postrender",{},!1)},bindStates:function(){},scrollIntoView:function(t){var e,n,i,r,o,s,a=this.getEl(),l=a.parentNode,u=function(t,e){var n,i,r=t;for(n=i=0;r&&r!==e&&r.nodeType;)n+=r.offsetLeft||0,i+=r.offsetTop||0,r=r.offsetParent;return{x:n,y:i}}(a,l);return e=u.x,n=u.y,i=a.offsetWidth,r=a.offsetHeight,o=l.clientWidth,s=l.clientHeight,"end"===t?(e-=o-i,n-=s-r):"center"===t&&(e-=o/2-i/2,n-=s/2-r/2),l.scrollLeft=e,l.scrollTop=n,this},getRoot:function(){for(var t,e=this,n=[];e;){if(e.rootControl){t=e.rootControl;break}n.push(e),e=(t=e).parent()}t||(t=this);for(var i=n.length;i--;)n[i].rootControl=t;return t},reflow:function(){Zt.remove(this);var t=this.parent();return t&&t._layout&&!t._layout.isNative()&&t.reflow(),this}};function oe(n){return n._eventDispatcher||(n._eventDispatcher=new Mt({scope:n,toggleEvent:function(t,e){e&&Mt.isNative(t)&&(n._nativeEvents||(n._nativeEvents={}),n._nativeEvents[t]=!0,n.state.get("rendered")&&se(n))}})),n._eventDispatcher}function se(a){var t,e,n,l,i,r;function o(t){var e=a.getParentCtrl(t.target);e&&e.fire(t.type,t)}function s(){var t=l._lastHoverCtrl;t&&(t.fire("mouseleave",{target:t.getEl()}),t.parents().each(function(t){t.fire("mouseleave",{target:t.getEl()})}),l._lastHoverCtrl=null)}function u(t){var e,n,i,r=a.getParentCtrl(t.target),o=l._lastHoverCtrl,s=0;if(r!==o){if((n=(l._lastHoverCtrl=r).parents().toArray().reverse()).push(r),o){for((i=o.parents().toArray().reverse()).push(o),s=0;sn.x&&r.x+r.wn.y&&r.y+r.h
      '+t.encode(t.state.get("text"))+"
      "},bindStates:function(){var e=this;return e.state.on("change:text",function(t){e.getEl().lastChild.innerHTML=e.encode(t.value)}),e._super()},repaint:function(){var t,e;t=this.getEl().style,e=this._layoutRect,t.left=e.x+"px",t.top=e.y+"px",t.zIndex=131070}}),ge=ae.extend({init:function(i){var r=this;r._super(i),i=r.settings,r.canFocus=!0,i.tooltip&&!1!==ge.tooltips&&(r.on("mouseenter",function(t){var e=r.tooltip().moveTo(-65535);if(t.control===r){var n=e.text(i.tooltip).show().testMoveRel(r.getEl(),["bc-tc","bc-tl","bc-tr"]);e.classes.toggle("tooltip-n","bc-tc"===n),e.classes.toggle("tooltip-nw","bc-tl"===n),e.classes.toggle("tooltip-ne","bc-tr"===n),e.moveRel(r.getEl(),n)}else e.hide()}),r.on("mouseleave mousedown click",function(){r.tooltip().remove(),r._tooltip=null})),r.aria("label",i.ariaLabel||i.tooltip)},tooltip:function(){return this._tooltip||(this._tooltip=new me({type:"tooltip"}),te.inheritUiContainer(this,this._tooltip),this._tooltip.renderTo()),this._tooltip},postRender:function(){var t=this,e=t.settings;t._super(),t.parent()||!e.width&&!e.height||(t.initLayoutRect(),t.repaint()),e.autofocus&&t.focus()},bindStates:function(){var e=this;function n(t){e.aria("disabled",t),e.classes.toggle("disabled",t)}function i(t){e.aria("pressed",t),e.classes.toggle("active",t)}return e.state.on("change:disabled",function(t){n(t.value)}),e.state.on("change:active",function(t){i(t.value)}),e.state.get("disabled")&&n(!0),e.state.get("active")&&i(!0),e._super()},remove:function(){this._super(),this._tooltip&&(this._tooltip.remove(),this._tooltip=null)}}),pe=ge.extend({Defaults:{value:0},init:function(t){this._super(t),this.classes.add("progress"),this.settings.filter||(this.settings.filter=function(t){return Math.round(t)})},renderHtml:function(){var t=this._id,e=this.classPrefix;return'
      0%
      '},postRender:function(){return this._super(),this.value(this.settings.value),this},bindStates:function(){var e=this;function n(t){t=e.settings.filter(t),e.getEl().lastChild.innerHTML=t+"%",e.getEl().firstChild.firstChild.style.width=t+"%"}return e.state.on("change:value",function(t){n(t.value)}),n(e.state.get("value")),e._super()}}),ve=function(t,e){t.getEl().lastChild.textContent=e+(t.progressBar?" "+t.progressBar.value()+"%":"")},be=ae.extend({Mixins:[he],Defaults:{classes:"widget notification"},init:function(t){var e=this;e._super(t),e.maxWidth=t.maxWidth,t.text&&e.text(t.text),t.icon&&(e.icon=t.icon),t.color&&(e.color=t.color),t.type&&e.classes.add("notification-"+t.type),t.timeout&&(t.timeout<0||0'),t=' style="max-width: '+e.maxWidth+"px;"+(e.color?"background-color: "+e.color+';"':'"'),e.closeButton&&(r=''),e.progressBar&&(o=e.progressBar.renderHtml()),''},postRender:function(){var t=this;return c.setTimeout(function(){t.$el.addClass(t.classPrefix+"in"),ve(t,t.state.get("text"))},100),t._super()},bindStates:function(){var e=this;return e.state.on("change:text",function(t){e.getEl().firstChild.innerHTML=t.value,ve(e,t.value)}),e.progressBar&&(e.progressBar.bindStates(),e.progressBar.state.on("change:value",function(t){ve(e,e.state.get("text"))})),e._super()},close:function(){return this.fire("close").isDefaultPrevented()||this.remove(),this},repaint:function(){var t,e;t=this.getEl().style,e=this._layoutRect,t.left=e.x+"px",t.top=e.y+"px",t.zIndex=65534}});function ye(o){var s=function(t){return t.inline?t.getElement():t.getContentAreaContainer()};return{open:function(t,e){var n,i=R.extend(t,{maxWidth:(n=s(o),Ht.getSize(n).width)}),r=new be(i);return 0<(r.args=i).timeout&&(r.timer=setTimeout(function(){r.close(),e()},i.timeout)),r.on("close",function(){e()}),r.renderTo(),r},close:function(t){t.close()},reposition:function(t){Ct(t,function(t){t.moveTo(0,0)}),function(n){if(0").css({position:"absolute",top:0,left:0,width:f.width,height:f.height,zIndex:2147483647,opacity:1e-4,cursor:d}).appendTo(x.body),Tt(x).on("mousemove touchmove",v).on("mouseup touchend",p),h.start(t)},v=function(t){if(xe(t),t.button!==g)return p(t);t.deltaX=t.screenX-b,t.deltaY=t.screenY-y,t.preventDefault(),h.drag(t)},p=function(t){xe(t),Tt(x).off("mousemove touchmove",v).off("mouseup touchend",p),m.remove(),h.stop&&h.stop(t)},this.destroy=function(){Tt(w).off()},Tt(w).on("mousedown touchstart",e)}var _e=tinymce.util.Tools.resolve("tinymce.ui.Factory"),Re=function(t){return!!t.getAttribute("data-mce-tabstop")};function Ce(t){var o,r,n=t.root;function i(t){return t&&1===t.nodeType}try{o=_.document.activeElement}catch(e){o=_.document.body}function s(t){return i(t=t||o)?t.getAttribute("role"):null}function a(t){for(var e,n=t||o;n=n.parentNode;)if(e=s(n))return e}function l(t){var e=o;if(i(e))return e.getAttribute("aria-"+t)}function u(t){var e=t.tagName.toUpperCase();return"INPUT"===e||"TEXTAREA"===e||"SELECT"===e}function c(e){var r=[];return function t(e){if(1===e.nodeType&&"none"!==e.style.display&&!e.disabled){var n;(u(n=e)&&!n.hidden||Re(n)||/^(button|menuitem|checkbox|tab|menuitemcheckbox|option|gridcell|slider)$/.test(s(n)))&&r.push(e);for(var i=0;i=e.length&&(t=0),e[t]&&e[t].focus(),t}function h(t,e){var n=-1,i=d();e=e||c(i.getEl());for(var r=0;r
      '+(t.settings.html||"")+e.renderHtml(t)+"
      "},postRender:function(){var t,e=this;return e.items().exec("postRender"),e._super(),e._layout.postRender(e),e.state.set("rendered",!0),e.settings.style&&e.$el.css(e.settings.style),e.settings.border&&(t=e.borderBox,e.$el.css({"border-top-width":t.top,"border-right-width":t.right,"border-bottom-width":t.bottom,"border-left-width":t.left})),e.parent()||(e.keyboardNav=Ce({root:e})),e},initLayoutRect:function(){var t=this._super();return this._layout.recalc(this),t},recalc:function(){var t=this,e=t._layoutRect,n=t._lastRect;if(!n||n.w!==e.w||n.h!==e.h)return t._layout.recalc(t),e=t.layoutRect(),t._lastRect={x:e.x,y:e.y,w:e.w,h:e.h},!0},reflow:function(){var t;if(Zt.remove(this),this.visible()){for(ae.repaintControls=[],ae.repaintControls.map={},this.recalc(),t=ae.repaintControls.length;t--;)ae.repaintControls[t].repaint();"flow"!==this.settings.layout&&"stack"!==this.settings.layout&&this.repaint(),ae.repaintControls=[]}return this}}),Ne={init:function(){this.on("repaint",this.renderScroll)},renderScroll:function(){var p=this,v=2;function n(){var m,g,t;function e(t,e,n,i,r,o){var s,a,l,u,c,d,f,h;if(a=p.getEl("scroll"+t)){if(f=e.toLowerCase(),h=n.toLowerCase(),Tt(p.getEl("absend")).css(f,p.layoutRect()[i]-1),!r)return void Tt(a).css("display","none");Tt(a).css("display","block"),s=p.getEl("body"),l=p.getEl("scroll"+t+"t"),u=s["client"+n]-2*v,c=(u-=m&&g?a["client"+o]:0)/s["scroll"+n],(d={})[f]=s["offset"+e]+v,d[h]=u,Tt(a).css(d),(d={})[f]=s["scroll"+e]*c,d[h]=u*c,Tt(l).css(d)}}t=p.getEl("body"),m=t.scrollWidth>t.clientWidth,g=t.scrollHeight>t.clientHeight,e("h","Left","Width","contentW",m,"Height"),e("v","Top","Height","contentH",g,"Width")}p.settings.autoScroll&&(p._hasScroll||(p._hasScroll=!0,function(){function t(s,a,l,u,c){var d,t=p._id+"-scroll"+s,e=p.classPrefix;Tt(p.getEl()).append('
      '),p.draghelper=new we(t+"t",{start:function(){d=p.getEl("body")["scroll"+a],Tt("#"+t).addClass(e+"active")},drag:function(t){var e,n,i,r,o=p.layoutRect();n=o.contentW>o.innerW,i=o.contentH>o.innerH,r=p.getEl("body")["client"+l]-2*v,e=(r-=n&&i?p.getEl("scroll"+s)["client"+c]:0)/p.getEl("body")["scroll"+l],p.getEl("body")["scroll"+a]=d+t["delta"+u]/e},stop:function(){Tt("#"+t).removeClass(e+"active")}})}p.classes.add("scroll"),t("v","Top","Height","Y","Width"),t("h","Left","Width","X","Height")}(),p.on("wheel",function(t){var e=p.getEl("body");e.scrollLeft+=10*(t.deltaX||0),e.scrollTop+=10*t.deltaY,n()}),Tt(p.getEl("body")).on("scroll",n)),n())}},Oe=Me.extend({Defaults:{layout:"fit",containerCls:"panel"},Mixins:[Ne],renderHtml:function(){var t=this,e=t._layout,n=t.settings.html;return t.preRender(),e.preRender(t),void 0===n?n='
      '+e.renderHtml(t)+"
      ":("function"==typeof n&&(n=n.call(t)),t._hasBody=!1),'
      '+(t._preBodyHtml||"")+n+"
      "}}),We={resizeToContent:function(){this._layoutRect.autoResize=!0,this._lastRect=null,this.reflow()},resizeTo:function(t,e){if(t<=1||e<=1){var n=Ht.getWindowSize();t=t<=1?t*n.w:t,e=e<=1?e*n.h:e}return this._layoutRect.autoResize=!1,this.layoutRect({minW:t,minH:e,w:t,h:e}).reflow()},resizeBy:function(t,e){var n=this.layoutRect();return this.resizeTo(n.w+t,n.h+e)}},Pe=[],De=[];function Ae(t,e){for(;t;){if(t===e)return!0;t=t.parent()}}function Be(){ke||(ke=function(t){2!==t.button&&function(t){for(var e=Pe.length;e--;){var n=Pe[e],i=n.getParentCtrl(t.target);if(n.settings.autohide){if(i&&(Ae(i,n)||n.parent()===i))continue;(t=n.fire("autohide",{target:t.target})).isDefaultPrevented()||n.hide()}}}(t)},Tt(_.document).on("click touchstart",ke))}function Le(r){var t=Ht.getViewPort().y;function e(t,e){for(var n,i=0;it&&(r.fixed(!1).layoutRect({y:r._autoFixY}).repaint(),e(!1,r._autoFixY-t)):(r._autoFixY=r.layoutRect().y,r._autoFixY').appendTo(i.getContainerElm())),c.setTimeout(function(){e.addClass(n+"in"),Tt(i.getEl()).addClass(n+"in")}),Te=!0),Ie(!0,i)}}),i.on("show",function(){i.parents().each(function(t){if(t.state.get("fixed"))return i.fixed(!0),!1})}),t.popover&&(i._preBodyHtml='
      ',i.classes.add("popover").add("bottom").add(i.isRtl()?"end":"start")),i.aria("label",t.ariaLabel),i.aria("labelledby",i._id),i.aria("describedby",i.describedBy||i._id+"-none")},fixed:function(t){var e=this;if(e.state.get("fixed")!==t){if(e.state.get("rendered")){var n=Ht.getViewPort();t?e.layoutRect().y-=n.y:e.layoutRect().y+=n.y}e.classes.toggle("fixed",t),e.state.set("fixed",t)}return e},show:function(){var t,e=this._super();for(t=Pe.length;t--&&Pe[t]!==this;);return-1===t&&Pe.push(this),e},hide:function(){return Fe(this),Ie(!1,this),this._super()},hideAll:function(){ze.hideAll()},close:function(){return this.fire("close").isDefaultPrevented()||(this.remove(),Ie(!1,this)),this},remove:function(){Fe(this),this._super()},postRender:function(){return this.settings.bodyRole&&this.getEl("body").setAttribute("role",this.settings.bodyRole),this._super()}});function Fe(t){var e;for(e=Pe.length;e--;)Pe[e]===t&&Pe.splice(e,1);for(e=De.length;e--;)De[e]===t&&De.splice(e,1)}ze.hideAll=function(){for(var t=Pe.length;t--;){var e=Pe[t];e&&e.settings.autohide&&(e.hide(),Pe.splice(t,1))}};var Ue=[],Ve="";function qe(t){var e,n=Tt("meta[name=viewport]")[0];!1!==h.overrideViewPort&&(n||((n=_.document.createElement("meta")).setAttribute("name","viewport"),_.document.getElementsByTagName("head")[0].appendChild(n)),(e=n.getAttribute("content"))&&void 0!==Ve&&(Ve=e),n.setAttribute("content",t?"width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0":Ve))}function Ye(t,e){(function(){for(var t=0;tt.w&&(n=t.x-Math.max(0,e/2),r.layoutRect({w:e,x:n}),i=!0),o&&(o.layoutRect({w:r.layoutRect().innerW}).recalc(),(e=o.layoutRect().minW+t.deltaW)>t.w&&(n=t.x-Math.max(0,e-t.w),r.layoutRect({w:e,x:n}),i=!0)),i&&r.recalc()},initLayoutRect:function(){var t,e=this,n=e._super(),i=0;if(e.settings.title&&!e._fullscreen){t=e.getEl("head");var r=Ht.getSize(t);n.headerW=r.width,n.headerH=r.height,i+=n.headerH}e.statusbar&&(i+=e.statusbar.layoutRect().h),n.deltaH+=i,n.minH+=i,n.h+=i;var o=Ht.getWindowSize();return n.x=e.settings.x||Math.max(0,o.w/2-n.w/2),n.y=e.settings.y||Math.max(0,o.h/2-n.h/2),n},renderHtml:function(){var t=this,e=t._layout,n=t._id,i=t.classPrefix,r=t.settings,o="",s="",a=r.html;return t.preRender(),e.preRender(t),r.title&&(o='
      '+t.encode(r.title)+'
      '),r.url&&(a=''),void 0===a&&(a=e.renderHtml(t)),t.statusbar&&(s=t.statusbar.renderHtml()),'
      '+o+'
      '+a+"
      "+s+"
      "},fullscreen:function(t){var n,e,i=this,r=_.document.documentElement,o=i.classPrefix;if(t!==i._fullscreen)if(Tt(_.window).on("resize",function(){var t;if(i._fullscreen)if(n)i._timer||(i._timer=c.setTimeout(function(){var t=Ht.getWindowSize();i.moveTo(0,0).resizeTo(t.w,t.h),i._timer=0},50));else{t=(new Date).getTime();var e=Ht.getWindowSize();i.moveTo(0,0).resizeTo(e.w,e.h),50<(new Date).getTime()-t&&(n=!0)}}),e=i.layoutRect(),i._fullscreen=t){i._initial={x:e.x,y:e.y,w:e.w,h:e.h},i.borderBox=Nt("0"),i.getEl("head").style.display="none",e.deltaH-=e.headerH+2,Tt([r,_.document.body]).addClass(o+"fullscreen"),i.classes.add("fullscreen");var s=Ht.getWindowSize();i.moveTo(0,0).resizeTo(s.w,s.h)}else i.borderBox=Nt(i.settings.border),i.getEl("head").style.display="",e.deltaH+=e.headerH,Tt([r,_.document.body]).removeClass(o+"fullscreen"),i.classes.remove("fullscreen"),i.moveTo(i._initial.x,i._initial.y).resizeTo(i._initial.w,i._initial.h);return i.reflow()},postRender:function(){var e,n=this;setTimeout(function(){n.classes.add("in"),n.fire("open")},0),n._super(),n.statusbar&&n.statusbar.postRender(),n.focus(),this.dragHelper=new we(n._id+"-dragh",{start:function(){e={x:n.layoutRect().x,y:n.layoutRect().y}},drag:function(t){n.moveTo(e.x+t.deltaX,e.y+t.deltaY)}}),n.on("submit",function(t){t.isDefaultPrevented()||n.close()}),Ue.push(n),qe(!0)},submit:function(){return this.fire("submit",{data:this.toJSON()})},remove:function(){var t,e=this;for(e.dragHelper.destroy(),e._super(),e.statusbar&&this.statusbar.remove(),Ye(e.classPrefix,!1),t=Ue.length;t--;)Ue[t]===e&&Ue.splice(t,1);qe(0",n=0;n
      ";r+=""}return r+="",r+=""}(r,o)),(t=i.dom.select("*[data-mce-id]")[0]).removeAttribute("data-mce-id"),e=i.dom.select("td,th",t),i.selection.setCursorLocation(e[0],0)}))},bn=function(t,e){t.execCommand("FormatBlock",!1,e)},yn=function(t,e,n){var i,r;r=(i=t.editorUpload.blobCache).create(sn("mceu"),n,e),i.add(r),t.insertContent(t.dom.createHTML("img",{src:r.blobUri()}))},xn=function(t,e){0===e.trim().length?gn(t):pn(t,e)},wn=gn,_n=function(n,t){n.addButton("quicklink",{icon:"link",tooltip:"Insert/Edit link",stateSelector:"a[href]",onclick:function(){t.showForm(n,"quicklink")}}),n.addButton("quickimage",{icon:"image",tooltip:"Insert image",onclick:function(){rn().then(function(t){var e=t[0];nn(e).then(function(t){yn(n,t,e)})})}}),n.addButton("quicktable",{icon:"table",tooltip:"Insert table",onclick:function(){t.hide(),vn(n,2,2)}}),function(e){for(var t=function(t){return function(){bn(e,t)}},n=1;n<6;n++){var i="h"+n;e.addButton(i,{text:i.toUpperCase(),tooltip:"Heading "+n,stateSelector:i,onclick:t(i),onPostRender:function(){this.getEl().firstChild.firstChild.style.fontWeight="bold"}})}}(n)},Rn=function(){var t=h.container;if(t&&"static"!==v.DOM.getStyle(t,"position",!0)){var e=v.DOM.getPos(t),n=e.x-t.scrollLeft,i=e.y-t.scrollTop;return mt.some({x:n,y:i})}return mt.none()},Cn=function(t){return/^www\.|\.(com|org|edu|gov|uk|net|ca|de|jp|fr|au|us|ru|ch|it|nl|se|no|es|mil)$/i.test(t.trim())},kn=function(t){return/^https?:\/\//.test(t.trim())},En=function(t,e){return!kn(e)&&Cn(e)?(n=t,i=e,new en(function(e){n.windowManager.confirm("The URL you entered seems to be an external link. Do you want to add the required http:// prefix?",function(t){e(!0===t?"http://"+i:i)})})):en.resolve(e);var n,i},Hn=function(r,e){var t,n,i,o={};return t="quicklink",n={items:[{type:"button",name:"unlink",icon:"unlink",onclick:function(){r.focus(),wn(r),e()},tooltip:"Remove link"},{type:"filepicker",name:"linkurl",placeholder:"Paste or type a link",filetype:"file",onchange:function(t){var e=t.meta;e&&e.attach&&(o={href:this.value(),attach:e.attach})}},{type:"button",icon:"checkmark",subtype:"primary",tooltip:"Ok",onclick:"submit"}],onshow:function(t){if(t.control===this){var e,n="";(e=r.dom.getParent(r.selection.getStart(),"a[href]"))&&(n=r.dom.getAttrib(e,"href")),this.fromJSON({linkurl:n}),i=this.find("#unlink"),e?i.show():i.hide(),this.find("#linkurl")[0].focus()}var i},onsubmit:function(t){En(r,t.data.linkurl).then(function(t){r.undoManager.transact(function(){t===o.href&&(o.attach(),o={}),xn(r,t)}),e()})}},(i=_e.create(R.extend({type:"form",layout:"flex",direction:"row",padding:5,name:t,spacing:3},n))).on("show",function(){i.find("textbox").eq(0).each(function(t){t.focus()})}),i},Tn=function(n,t,e){var o,i,s=[];if(e)return R.each(B(i=e)?i:W(i)?i.split(/[ ,]/):[],function(t){if("|"===t)o=null;else if(n.buttons[t]){o||(o={type:"buttongroup",items:[]},s.push(o));var e=n.buttons[t];A(e)&&(e=e()),e.type=e.type||"button",(e=_e.create(e)).on("postRender",(i=n,r=e,function(){var e,t,n=(t=function(t,e){return{selector:t,handler:e}},(e=r).settings.stateSelector?t(e.settings.stateSelector,function(t){e.active(t)}):e.settings.disabledStateSelector?t(e.settings.disabledStateSelector,function(t){e.disabled(t)}):null);null!==n&&i.selection.selectorChanged(n.selector,n.handler)})),o.items.push(e)}var i,r}),_e.create({type:"toolbar",layout:"flow",name:t,items:s})},Sn=function(){var l,c,o=function(t){return 0'+this._super(t)}}),On=ge.extend({Defaults:{classes:"widget btn",role:"button"},init:function(t){var e,n=this;n._super(t),t=n.settings,e=n.settings.size,n.on("click mousedown",function(t){t.preventDefault()}),n.on("touchstart",function(t){n.fire("click",t),t.preventDefault()}),t.subtype&&n.classes.add(t.subtype),e&&n.classes.add("btn-"+e),t.icon&&n.icon(t.icon)},icon:function(t){return arguments.length?(this.state.set("icon",t),this):this.state.get("icon")},repaint:function(){var t,e=this.getEl().firstChild;e&&((t=e.style).width=t.height="100%"),this._super()},renderHtml:function(){var t,e,n=this,i=n._id,r=n.classPrefix,o=n.state.get("icon"),s=n.state.get("text"),a="",l=n.settings;return(t=l.image)?(o="none","string"!=typeof t&&(t=_.window.getSelection?t[0]:t[1]),t=" style=\"background-image: url('"+t+"')\""):t="",s&&(n.classes.add("btn-has-text"),a=''+n.encode(s)+""),o=o?r+"ico "+r+"i-"+o:"",e="boolean"==typeof l.active?' aria-pressed="'+l.active+'"':"",'
      "},bindStates:function(){var o=this,n=o.$,i=o.classPrefix+"txt";function s(t){var e=n("span."+i,o.getEl());t?(e[0]||(n("button:first",o.getEl()).append(''),e=n("span."+i,o.getEl())),e.html(o.encode(t))):e.remove(),o.classes.toggle("btn-has-text",!!t)}return o.state.on("change:text",function(t){s(t.value)}),o.state.on("change:icon",function(t){var e=t.value,n=o.classPrefix;e=(o.settings.icon=e)?n+"ico "+n+"i-"+o.settings.icon:"";var i=o.getEl().firstChild,r=i.getElementsByTagName("i")[0];e?(r&&r===i.firstChild||(r=_.document.createElement("i"),i.insertBefore(r,i.firstChild)),r.className=e):r&&i.removeChild(r),s(o.state.get("text"))}),o._super()}}),Wn=On.extend({init:function(t){t=R.extend({text:"Browse...",multiple:!1,accept:null},t),this._super(t),this.classes.add("browsebutton"),t.multiple&&this.classes.add("multiple")},postRender:function(){var n=this,e=Ht.create("input",{type:"file",id:n._id+"-browse",accept:n.settings.accept});n._super(),Tt(e).on("change",function(t){var e=t.target.files;n.value=function(){return e.length?n.settings.multiple?e:e[0]:null},t.preventDefault(),e.length&&n.fire("change",t)}),Tt(e).on("click",function(t){t.stopPropagation()}),Tt(n.getEl("button")).on("click touchstart",function(t){t.stopPropagation(),e.click(),t.preventDefault()}),n.getEl().appendChild(e)},remove:function(){Tt(this.getEl("button")).off(),Tt(this.getEl("input")).off(),this._super()}}),Pn=Me.extend({Defaults:{defaultType:"button",role:"group"},renderHtml:function(){var t=this,e=t._layout;return t.classes.add("btn-group"),t.preRender(),e.preRender(t),'
      '+(t.settings.html||"")+e.renderHtml(t)+"
      "}}),Dn=ge.extend({Defaults:{classes:"checkbox",role:"checkbox",checked:!1},init:function(t){var e=this;e._super(t),e.on("click mousedown",function(t){t.preventDefault()}),e.on("click",function(t){t.preventDefault(),e.disabled()||e.checked(!e.checked())}),e.checked(e.settings.checked)},checked:function(t){return arguments.length?(this.state.set("checked",t),this):this.state.get("checked")},value:function(t){return arguments.length?this.checked(t):this.checked()},renderHtml:function(){var t=this,e=t._id,n=t.classPrefix;return'
      '+t.encode(t.state.get("text"))+"
      "},bindStates:function(){var o=this;function e(t){o.classes.toggle("checked",t),o.aria("checked",t)}return o.state.on("change:text",function(t){o.getEl("al").firstChild.data=o.translate(t.value)}),o.state.on("change:checked change:value",function(t){o.fire("change"),e(t.value)}),o.state.on("change:icon",function(t){var e=t.value,n=o.classPrefix;if(void 0===e)return o.settings.icon;e=(o.settings.icon=e)?n+"ico "+n+"i-"+o.settings.icon:"";var i=o.getEl().firstChild,r=i.getElementsByTagName("i")[0];e?(r&&r===i.firstChild||(r=_.document.createElement("i"),i.insertBefore(r,i.firstChild)),r.className=e):r&&i.removeChild(r)}),o.state.get("checked")&&e(!0),o._super()}}),An=tinymce.util.Tools.resolve("tinymce.util.VK"),Bn=ge.extend({init:function(i){var r=this;r._super(i),i=r.settings,r.classes.add("combobox"),r.subinput=!0,r.ariaTarget="inp",i.menu=i.menu||i.values,i.menu&&(i.icon="caret"),r.on("click",function(t){var e=t.target,n=r.getEl();if(Tt.contains(n,e)||e===n)for(;e&&e!==n;)e.id&&-1!==e.id.indexOf("-open")&&(r.fire("action"),i.menu&&(r.showMenu(),t.aria&&r.menu.items()[0].focus())),e=e.parentNode}),r.on("keydown",function(t){var e;13===t.keyCode&&"INPUT"===t.target.nodeName&&(t.preventDefault(),r.parents().reverse().each(function(t){if(t.toJSON)return e=t,!1}),r.fire("submit",{data:e.toJSON()}))}),r.on("keyup",function(t){if("INPUT"===t.target.nodeName){var e=r.state.get("value"),n=t.target.value;n!==e&&(r.state.set("value",n),r.fire("autocomplete",t))}}),r.on("mouseover",function(t){var e=r.tooltip().moveTo(-65535);if(r.statusLevel()&&-1!==t.target.className.indexOf(r.classPrefix+"status")){var n=r.statusMessage()||"Ok",i=e.text(n).show().testMoveRel(t.target,["bc-tc","bc-tl","bc-tr"]);e.classes.toggle("tooltip-n","bc-tc"===i),e.classes.toggle("tooltip-nw","bc-tl"===i),e.classes.toggle("tooltip-ne","bc-tr"===i),e.moveRel(t.target,i)}})},statusLevel:function(t){return 0