* @output wp-admin/js/dashboard.js
/* global pagenow, ajaxurl, postboxes, wpActiveEditor:true, ajaxWidgets */
/* global ajaxPopulateWidgets, quickPressLoad, */
window.wp = window.wp || {};
window.communityEventsData = window.communityEventsData || {};
* Initializes the dashboard widget functionality.
jQuery(document).ready( function($) {
var welcomePanel = $( '#welcome-panel' ),
welcomePanelHide = $('#wp_welcome_panel-hide'),
* Saves the visibility of the welcome panel.
* @param {boolean} visible Should it be visible or not.
updateWelcomePanel = function( visible ) {
action: 'update-welcome-panel',
welcomepanelnonce: $( '#welcomepanelnonce' ).val()
// Unhide the welcome panel if the Welcome Option checkbox is checked.
if ( welcomePanel.hasClass('hidden') && welcomePanelHide.prop('checked') ) {
welcomePanel.removeClass('hidden');
// Hide the welcome panel when the dismiss button or close button is clicked.
$('.welcome-panel-close, .welcome-panel-dismiss a', welcomePanel).on( 'click', function(e) {
welcomePanel.addClass('hidden');
$('#wp_welcome_panel-hide').prop('checked', false);
// Set welcome panel visibility based on Welcome Option checkbox value.
welcomePanelHide.on( 'click', function() {
welcomePanel.toggleClass('hidden', ! this.checked );
updateWelcomePanel( this.checked ? 1 : 0 );
* These widgets can be populated via ajax.
window.ajaxWidgets = ['dashboard_primary'];
* Triggers widget updates via Ajax.
* @param {string} el Optional. Widget to fetch or none to update all.
window.ajaxPopulateWidgets = function(el) {
* Fetch the latest representation of the widget via Ajax and show it.
* @param {number} i Number of half-seconds to use as the timeout.
* @param {string} id ID of the element which is going to be checked for changes.
var p, e = $('#' + id + ' div.inside:visible').find('.widget-loading');
// If the element is found in the dom, queue to load latest representation.
// Request the widget content.
p.load( ajaxurl + '?action=dashboard-widgets&widget=' + id + '&pagenow=' + pagenow, '', function() {
// Hide the parent and slide it out for visual fancyness.
p.hide().slideDown('normal', function(){
$(this).css('display', '');
// If we have received a specific element to fetch, check if it is valid.
// If the element is available as Ajax widget, show it.
if ( $.inArray(el, ajaxWidgets) !== -1 ) {
// Show element without any delay.
// Walk through all ajaxWidgets, loading them after each other.
$.each( ajaxWidgets, show );
// Initially populate ajax widgets.
// Register ajax widgets as postbox toggles.
postboxes.add_postbox_toggles(pagenow, { pbshow: ajaxPopulateWidgets } );
* Control the Quick Press (Quick Draft) widget.
window.quickPressLoad = function() {
var act = $('#quickpost-action'), t;
// Enable the submit buttons.
$( '#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]' ).prop( 'disabled' , false );
t = $('#quick-press').on( 'submit', function( e ) {
$('#dashboard_quick_press #publishing-action .spinner').show();
// Disable the submit button to prevent duplicate submissions.
$('#quick-press .submit input[type="submit"], #quick-press .submit input[type="reset"]').prop('disabled', true);
// Post the entered data to save it.
$.post( t.attr( 'action' ), t.serializeArray(), function( data ) {
// Replace the form, and prepend the published post.
$('#dashboard_quick_press .inside').html( data );
$('#quick-press').removeClass('initial-form');
// Focus the title to allow for quickly drafting another post.
$('#title').trigger( 'focus' );
* Highlights the latest post for one second.
function highlightLatestPost () {
var latestPost = $('.drafts ul li').first();
latestPost.css('background', '#fffbe5');
latestPost.css('background', 'none');
// Change the QuickPost action to the publish value.
$('#publish').on( 'click', function() { act.val( 'post-quickpress-publish' ); } );
$('#quick-press').on( 'click focusin', function() {
wpActiveEditor = 'content';
// Enable the dragging functionality of the widgets.
$( '.meta-box-sortables' ).sortable( 'option', 'containment', '#wpwrap' );
* Adjust the height of the textarea based on the content.
function autoResizeTextarea() {
// When IE8 or older is used to render this document, exit.
if ( document.documentMode && document.documentMode < 9 ) {
// Add a hidden div. We'll copy over the text from the textarea to measure its height.
$('body').append( '<div class="quick-draft-textarea-clone" style="display: none;"></div>' );
var clone = $('.quick-draft-textarea-clone'),
editorHeight = editor.height(),
* 100px roughly accounts for browser chrome and allows the
* save draft button to show on-screen at the same time.
editorMaxHeight = $(window).height() - 100;
* Match up textarea and clone div as much as possible.
* Padding cannot be reliably retrieved using shorthand in all browsers.
'font-family': editor.css('font-family'),
'font-size': editor.css('font-size'),
'line-height': editor.css('line-height'),
'padding-bottom': editor.css('paddingBottom'),
'padding-left': editor.css('paddingLeft'),
'padding-right': editor.css('paddingRight'),
'padding-top': editor.css('paddingTop'),
'white-space': 'pre-wrap',
'word-wrap': 'break-word',
// The 'propertychange' is used in IE < 9.
editor.on('focus input propertychange', function() {
// Add a non-breaking space to ensure that the height of a trailing newline is
textareaContent = $this.val() + ' ',
// Add 2px to compensate for border-top & border-bottom.
cloneHeight = clone.css('width', $this.css('width')).text(textareaContent).outerHeight() + 2;
// Default to show a vertical scrollbar, if needed.
editor.css('overflow-y', 'auto');
// Only change the height if it has changed and both heights are below the max.
if ( cloneHeight === editorHeight || ( cloneHeight >= editorMaxHeight && editorHeight >= editorMaxHeight ) ) {
* Don't allow editor to exceed the height of the window.
* This is also bound in CSS to a max-height of 1300px to be extra safe.
if ( cloneHeight > editorMaxHeight ) {
editorHeight = editorMaxHeight;
editorHeight = cloneHeight;
// Disable scrollbars because we adjust the height to the content.
editor.css('overflow', 'hidden');
$this.css('height', editorHeight + 'px');
var communityEventsData = window.communityEventsData,
dateI18n = wp.date.dateI18n,
sprintf = wp.i18n.sprintf,
* Global Community Events namespace.
* @namespace wp.communityEvents
app = window.wp.communityEvents = /** @lends wp.communityEvents */{
* Initializes the wp.communityEvents object.
var $container = $( '#community-events' );
* When JavaScript is disabled, the errors container is shown, so
* that "This widget requires JavaScript" message can be seen.
* When JS is enabled, the container is hidden at first, and then
* revealed during the template rendering, if there actually are
* The display indicator switches from `hide-if-js` to `aria-hidden`
* here in order to maintain consistency with all the other fields
* that key off of `aria-hidden` to determine their visibility.
* `aria-hidden` can't be used initially, because there would be no
* way to set it to false when JavaScript is disabled, which would
* prevent people from seeing the "This widget requires JavaScript"
$( '.community-events-errors' )
.attr( 'aria-hidden', 'true' )
.removeClass( 'hide-if-js' );
$container.on( 'click', '.community-events-toggle-location, .community-events-cancel', app.toggleLocationForm );
* Filters events based on entered location.
$container.on( 'submit', '.community-events-form', function( event ) {
var location = $.trim( $( '#community-events-location' ).val() );
* Don't trigger a search if the search field is empty or the
* search term was made of only spaces before being trimmed.
if ( communityEventsData && communityEventsData.cache && communityEventsData.cache.location && communityEventsData.cache.events ) {
app.renderEventsTemplate( communityEventsData.cache, 'app' );
* Toggles the visibility of the Edit Location form.
* @param {event|string} action 'show' or 'hide' to specify a state;
* or an event object to flip between states.
toggleLocationForm: function( action ) {
var $toggleButton = $( '.community-events-toggle-location' ),
$cancelButton = $( '.community-events-cancel' ),
$form = $( '.community-events-form' ),
if ( 'object' === typeof action ) {
// The action is the event object: get the clicked element.
$target = $( action.target );
* Strict comparison doesn't work in this case because sometimes
* we explicitly pass a string as value of aria-expanded and
* sometimes a boolean as the result of an evaluation.
action = 'true' == $toggleButton.attr( 'aria-expanded' ) ? 'hide' : 'show';
if ( 'hide' === action ) {
$toggleButton.attr( 'aria-expanded', 'false' );
$cancelButton.attr( 'aria-expanded', 'false' );
$form.attr( 'aria-hidden', 'true' );
* If the Cancel button has been clicked, bring the focus back
* to the toggle button so users relying on screen readers don't
if ( $target.hasClass( 'community-events-cancel' ) ) {
$toggleButton.trigger( 'focus' );
$toggleButton.attr( 'aria-expanded', 'true' );
$cancelButton.attr( 'aria-expanded', 'true' );
$form.attr( 'aria-hidden', 'false' );
* Sends REST API requests to fetch events for the widget.
* @param {Object} requestParams REST API Request parameters object.
getEvents: function( requestParams ) {
$spinner = $( '.community-events-form' ).children( '.spinner' );
requestParams = requestParams || {};
requestParams._wpnonce = communityEventsData.nonce;
requestParams.timezone = window.Intl ? window.Intl.DateTimeFormat().resolvedOptions().timeZone : '';
initiatedBy = requestParams.location ? 'user' : 'app';
$spinner.addClass( 'is-active' );
wp.ajax.post( 'get-community-events', requestParams )
$spinner.removeClass( 'is-active' );
.done( function( response ) {
if ( 'no_location_available' === response.error ) {
if ( requestParams.location ) {
response.unknownCity = requestParams.location;
* No location was passed, which means that this was an automatic query
* based on IP, locale, and timezone. Since the user didn't initiate it,
* it should fail silently. Otherwise, the error could confuse and/or
app.renderEventsTemplate( response, initiatedBy );
app.renderEventsTemplate({
* Renders the template for the Events section of the Events & News widget.
* @param {Object} templateParams The various parameters that will get passed to wp.template.
* @param {string} initiatedBy 'user' to indicate that this was triggered manually by the user;
* 'app' to indicate it was triggered automatically by the app itself.
renderEventsTemplate: function( templateParams, initiatedBy ) {
$toggleButton = $( '.community-events-toggle-location' ),
$locationMessage = $( '#community-events-location-message' ),
$results = $( '.community-events-results' );
templateParams.events = app.populateDynamicEventFields(
communityEventsData.time_format
* Hide all toggleable elements by default, to keep the logic simple.
* Otherwise, each block below would have to turn hide everything that
* could have been shown at an earlier point.
* The exception to that is that the .community-events container is hidden
* when the page is first loaded, because the content isn't ready yet,
* but once we've reached this point, it should always be shown.
'.community-events' : true,
'.community-events-loading' : false,
'.community-events-errors' : false,
'.community-events-error-occurred' : false,
'.community-events-could-not-locate' : false,
'#community-events-location-message' : false,
'.community-events-toggle-location' : false,
'.community-events-results' : false
* Determine which templates should be rendered and which elements