Index: src/wp-admin/css/dashboard.css =================================================================== --- src/wp-admin/css/dashboard.css (revision 39338) +++ src/wp-admin/css/dashboard.css (working copy) @@ -518,6 +518,10 @@ resize: none; } +#quick-press.is-saving .spinner { + visibility: inherit; +} + /* Dashboard Quick Draft - Drafts list */ .js #dashboard_quick_press .drafts { @@ -541,9 +545,43 @@ margin: 0 12px; } +#dashboard_quick_press .drafts ul.is-placeholder li { + padding: 3px 0; + color: transparent; +} + +@keyframes loading-fade { + 0% { opacity: .5; } + 50% { opacity: 1; } + 100% { opacity: .5; } +} + +#dashboard_quick_press .drafts ul.is-placeholder li:before, +#dashboard_quick_press .drafts ul.is-placeholder li:after { + content: ''; + display: block; + height: 13px; + background: #eee; + animation: loading-fade 1.6s ease-in-out infinite; +} + +#dashboard_quick_press .drafts ul.is-placeholder li:before { + margin-bottom: 5px; + width: 40%; +} + +#dashboard_quick_press .drafts ul.is-placeholder li:after { + width: 80%; +} + #dashboard_quick_press .drafts li { margin-bottom: 1em; } + +#dashboard_quick_press .drafts li.is-new { + background-color: #fffbe5; +} + #dashboard_quick_press .drafts li time { color: #72777c; } Index: src/wp-admin/includes/dashboard.php =================================================================== --- src/wp-admin/includes/dashboard.php (revision 39338) +++ src/wp-admin/includes/dashboard.php (working copy) @@ -50,6 +50,7 @@ if ( is_blog_admin() && current_user_can( get_post_type_object( 'post' )->cap->create_posts ) ) { $quick_draft_title = sprintf( '%1$s %2$s', __( 'Quick Draft' ), __( 'Drafts' ) ); wp_add_dashboard_widget( 'dashboard_quick_press', $quick_draft_title, 'wp_dashboard_quick_press' ); + add_action( 'admin_footer', 'wp_dashboard_print_recent_drafts_template' ); } // WordPress News @@ -494,14 +495,10 @@ $post_ID = (int) $post->ID; ?> -
+ - -
- -
-
- +
-

- - - - +

+ 'save-post' ) ); ?>

+
+ +

+ +
+ + 0; + + $( element ).siblings( '.prompt' ).toggleClass( 'screen-reader-text', ! visible || hasContent ); + }, + + showAllPrompts: function() { + this.$el.find( ':input' ).each( _.bind( function( i, input ) { + // Prompt toggling must be deferred because the reset event is + // fired before the input values have been cleared + _.defer( _.bind( this.togglePrompt, this, input, true ) ); + }, this ) ); + }, + + showPrompt: function( event ) { + this.togglePrompt( event.target, true ); + }, + + hidePrompt: function( event ) { + this.togglePrompt( event.target, false ); + }, + + hidePromptAndFocus: function( event ) { + this.togglePrompt( event.target, false ); + $( ':input', event.target ).focus(); + }, + + setActiveEditor: function() { + wpActiveEditor = 'content'; + }, + + showSyncError: function() { + this.syncError = true; + this.render(); + }, + + submit: function( event ) { + var values; + + delete this.syncError; + event.preventDefault(); + + // jQuery's serializeArray returns an array of field tuples, which + // we need to transform into an object before sending to API + values = _.reduce( this.$el.serializeArray(), function( memo, field ) { + memo[ field.name ] = field.value; + return memo; + }, {} ); + + // Ensure that by setting these fields on model that it is valid + // before proceeding with save + this.model.set( values ); + if ( ! this.model.isValid() ) { + return; + } + + // Show a spinner during the callback. + this.$el.addClass( 'is-saving' ); + + this.model.save() + .always( _.bind( function() { + this.$el.removeClass( 'is-saving' ); + }, this ) ) + .success( _.bind( function() { + this.collection.add( this.model, { at: 0 } ); + this.model = new wp.api.models.Post(); + this.el.reset(); + }, this ) ); + }, + + render: function() { + var $error = this.$el.find( '.error' ), + errorText; + + if ( this.model.validationError ) { + // Error via submission validation + errorText = quickPress.l10n[ this.model.validationError ]; + } else if ( this.syncError ) { + // Error via API save failure + errorText = quickPress.l10n.error; + } + + // Error notice is only visible if error text determined + $error.toggle( !! errorText ); + if ( errorText ) { + $error.html( $( '

', { text: errorText } ) ); + } + } + } ); + + QuickPress.Views.DraftList = wp.Backbone.View.extend( { + + initialize: function() { + this.listenTo( this.collection, 'sync', this.onDraftsLoaded ); + }, + + onDraftsLoaded: function() { + this.listenTo( this.collection, 'add', this.renderNew ); + this.render(); + }, + + renderNew: function() { + // Display highlight effect to first (added) item for one second + var $newEl = this.render().$el.find( 'li:first' ).addClass( 'is-new' ); + setTimeout( function() { + $newEl.removeClass( 'is-new' ); + }, 1000 ); + }, + + render: function() { + // Hide drafts list if no drafts exist + this.$el.toggle( this.collection.length > 0 ); + + // "View All" link is visible if 5 or more drafts, since we only + // show a maximum of 5 drafts in the list + this.$el.find( '.view-all' ).toggle( this.collection.length > 0 ); + + // If after drafts load, this could be the first render, so remove + // placeholder effect and render the first four drafts + this.$el.find( '.drafts-list' ) + .removeClass( 'is-placeholder' ) + .html( _.map( this.collection.models, function( draft ) { + return new QuickPress.Views.DraftListItem( { + model: draft + } ).render().el; + } ) ); + + return this; + } + } ); + + QuickPress.Views.DraftListItem = wp.Backbone.View.extend( { + tagName: 'li', + + template: wp.template( 'item-quick-press-draft' ), + + render: function() { + var attributes = _.clone( this.model.attributes ); + attributes.formattedContent = wp.formatting.trimWords( attributes.content.rendered, 10 ); + + // We can format dates using newer browser i18n features, but also + // provide a fallback to the not-as-nice Date#toLocaleDateString + date = new Date( wp.api.utils.parseISO8601( attributes.date + quickPress.timezoneOffset ) ); + if ( 'undefined' !== typeof Intl && Intl.DateTimeFormat ) { + attributes.formattedDate = new Intl.DateTimeFormat( undefined, { + month: 'long', + day: 'numeric', + year: 'numeric' + } ).format( date ); + } else { + attributes.formattedDate = date.toLocaleDateString(); + } + + this.$el.html( this.template( attributes ) ); + + return this; + } + } ); + + /** + * Initialize + */ + + // Fetch drafts + draftsCollection = new wp.api.collections.Posts(); + draftsCollection.fetch( { + data: { + status: 'draft', + author: quickPress.currentUserId, + per_page: 4, + order_by: 'date', + 'quick-draft-post-list': true + } + } ); + + // Drafts list is initialized but not rendered until drafts load + new QuickPress.Views.DraftList( { + el: '#quick-press-drafts', + collection: draftsCollection + } ); + + new QuickPress.Views.Form( { + el: '#quick-press', + model: new wp.api.models.Post(), + collection: draftsCollection + } ).render(); } ); Index: src/wp-includes/js/wp-util.js =================================================================== --- src/wp-includes/js/wp-util.js (revision 39338) +++ src/wp-includes/js/wp-util.js (working copy) @@ -121,4 +121,50 @@ } }; + // wp.formatting + // ------ + // + // Tools for formatting strings + wp.formatting = { + settings: settings.formatting || {}, + + /** + * Trims text to a certain number of words. + * + * @see wp_trim_words + * + * @param {string} text Text to trim. + * @param {?number} numWords Number of words (default: 55). + * @param {?string} more What to append if text needs to be trimmed (default: '…'). + * @return {string} Trimmed text. + */ + trimWords: function( text, numWords, more ) { + var words, separator; + + if ( 'undefined' === typeof numWords ) { + numWords = 55; + } + + if ( 'undefined' === typeof more ) { + more = wp.formatting.settings.trimWordsMore; + } + + text = text.replace( /[\n\r\t ]+/g, ' ' ).replace( /^ | $/g, '' ); + + if ( wp.formatting.settings.trimWordsByCharacter ) { + separator = ''; + } else { + separator = ' '; + } + + words = text.split( separator ); + + if ( words.length <= numWords ) { + return words.join( separator ); + } + + return words.slice( 0, numWords ).join( separator ) + more; + } + }; + }(jQuery)); Index: src/wp-includes/script-loader.php =================================================================== --- src/wp-includes/script-loader.php (revision 39338) +++ src/wp-includes/script-loader.php (working copy) @@ -336,6 +336,15 @@ 'ajax' => array( 'url' => admin_url( 'admin-ajax.php', 'relative' ), ), + 'formatting' => array( + 'trimWordsMore' => __( '…' ), + /* + * translators: If your word count is based on single characters (e.g. East Asian characters), + * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'. + * Do not translate into your own language. + */ + 'trimWordsByCharacter' => strpos( _x( 'words', 'Word count type. Do not translate!' ), 'characters' ) === 0 && preg_match( '/^utf\-?8$/i', get_option( 'blog_charset' ) ), + ), ) ); $scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 ); @@ -721,7 +730,15 @@ 'current' => __( 'Current Color' ), ) ); - $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 ); + $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-api', 'wp-backbone' ), false, 1 ); + did_action( 'init' ) && $scripts->localize( 'dashboard', 'quickPress', array( + 'currentUserId' => get_current_user_id(), + 'l10n' => array( + 'no-content' => __( 'Post content cannot be empty.' ), + 'error' => __( 'An error has occurred. Please reload the page and try again.' ), + ), + 'timezoneOffset' => ( get_option( 'gmt_offset' ) >= 0 ? '+' : '-' ) . date( 'H:i', abs( get_option( 'gmt_offset' ) * 3600 ) ), + ) ); $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );