Permalink
Browse files

Add Preview interface

We use jQuery UI tabs to switch between New Entry
and Preview mode.

We are using the legend to place the links, so
we moved the plupload messaging in a div just
above the form.
  • Loading branch information...
1 parent 5aee585 commit a456b5511315f97b3c8c0be15f194cd1d4a332af @nb nb committed Aug 15, 2012
Showing with 83 additions and 18 deletions.
  1. +18 −1 css/liveblog.css
  2. +36 −0 js/liveblog-publisher.js
  3. +5 −5 js/plupload.js
  4. +1 −2 liveblog.php
  5. +23 −10 templates/liveblog-form.php
View
@@ -43,6 +43,24 @@ fieldset#liveblog-actions legend {
background: transparent;
}
+fieldset#liveblog-actions legend ul,
+fieldset#liveblog-actions legend li {
+ display: inline;
+ list-style-type: none;
+ margin: 0;
+}
+
+.ui-tabs-hide {
+ display: none;
+}
+.ui-tabs-selected a {
+ font-weight: bold;
+ font-size: 1.2em;
+ cursor: text;
+ color: #333;
+ text-decoration: none;
+}
+
textarea#liveblog-form-entry {
display: inline-block;
background: #fff;
@@ -68,7 +86,6 @@ textarea#liveblog-form-entry.drag-over {
input#liveblog-form-entry-submit {
margin: 0;
- font-size: 1.2em;
}
span#liveblog-submit-spinner {
View
@@ -12,16 +12,52 @@
liveblog.publisher.$entry_button = $( '#liveblog-form-entry-submit' );
liveblog.publisher.$nonce = $( '#liveblog_nonce' );
liveblog.publisher.$spinner = $( '#liveblog-submit-spinner' );
+ liveblog.publisher.$preview = $( '#liveblog-preview' );
+ liveblog.publisher.$tabs = $( '#liveblog-tabs' );
liveblog.publisher.$entry_button.click( liveblog.publisher.submit_click );
$('#liveblog-entries').on( 'click', '.liveblog-entry-delete', liveblog.publisher.delete_click );
+
+ liveblog.publisher.$tabs.tabs({select: liveblog.publisher.preview_select});
}
liveblog.publisher.submit_click = function( e ) {
e.preventDefault();
liveblog.publisher.insert_entry();
}
+ liveblog.publisher.preview_select = function( e, ui ) {
+ if (1 != ui.index) {
+ return;
+ }
+
+ var entry_content = liveblog.publisher.$entry_text.val();
+ if ( !entry_content ) {
+ return false;
+ }
+
+ var data = {
+ action: 'liveblog_preview_entry',
+ entry_content: entry_content
+ }
+ data[ liveblog_settings.nonce_key ] = liveblog.publisher.$nonce.val();
+
+ liveblog.publisher.disable_posting_interface();
+ liveblog.publisher.$preview.html('Loading preview…');
+ liveblog.ajax_request( liveblog_settings.ajaxurl, data, liveblog.publisher.preview_entry_success, liveblog.publisher.preview_entry_error, 'POST' );
+ }
+
+ liveblog.publisher.preview_entry_success = function( response ) {
+ liveblog.publisher.enable_posting_interface();
+ liveblog.publisher.$preview.html( '<div class="liveblog-entry"><div class="liveblog-entry-text">' + response.html + '</div></div>' );
+ }
+
+ liveblog.publisher.preview_entry_error = function( response ) {
+ liveblog.add_error( response );
+ liveblog.publisher.enable_posting_interface();
+ liveblog.publisher.$tabs.tabs( 'select', 0 );
+ }
+
liveblog.publisher.delete_click = function( e ) {
e.preventDefault();
var id = $( e.target ).closest( '.liveblog-entry' ).attr( 'id' ).replace( 'liveblog-entry-', '' );
View
@@ -2,30 +2,30 @@ jQuery(document).ready(function($) {
new wp.Uploader({
   /* Selectors */
- browser: '#liveblog-actions legend',
+ browser: '#liveblog-messages',
   dropzone:  '#liveblog-form-entry',
   /* Callbacks */
   success : function( attachment ) {
$( '#liveblog-form-entry' ).val( $('#liveblog-form-entry' ).val() + '<img src="' + attachment.url + '" />' );
- $( '#liveblog-actions legend' ).html( attachment.filename + ' Finished' );
+ $( '#liveblog-messages' ).html( attachment.filename + ' Finished' );
$( '#liveblog-actions' ).removeClass( 'uploading' );
   },
error : function ( reason ) {
- $( '#liveblog-actions legend' ).html( reason );
+ $( '#liveblog-messages' ).html( reason );
},
added : function() {
$( '#liveblog-actions' ).addClass( 'uploading' );
},
progress : function( up, file ) {
- $( '#liveblog-actions legend' ).html( "Uploading: " + file.name + ' ' + file.percent + '%' );
+ $( '#liveblog-messages' ).html( "Uploading: " + file.name + ' ' + file.percent + '%' );
},
complete : function() {
- $( '#liveblog-actions legend' ).html( 'All done!' );
+ $( '#liveblog-messages' ).html( 'All done!' );
}
});
});
View
@@ -438,8 +438,7 @@ public static function enqueue_scripts() {
wp_enqueue_script( self::key, plugins_url( 'js/liveblog.js', __FILE__ ), array( 'jquery', 'jquery-color' ), self::version, true );
if ( self::current_user_can_edit_liveblog() ) {
- wp_enqueue_script( 'liveblog-publisher', plugins_url( 'js/liveblog-publisher.js', __FILE__ ), array( self::key ), self::version, true );
- wp_enqueue_script( 'wp-plupload' );
+ wp_enqueue_script( 'liveblog-publisher', plugins_url( 'js/liveblog-publisher.js', __FILE__ ), array( self::key, 'jquery-ui-tabs' ), self::version, true );
wp_enqueue_script( 'liveblog-plupload', plugins_url( 'js/plupload.js', __FILE__ ), array( 'wp-plupload', 'jquery' ) );
self::add_default_plupload_settings();
}
@@ -1,10 +1,23 @@
-<fieldset id="liveblog-actions">
- <legend><?php _e( "You're Live!", 'liveblog' ); ?></legend>
- <textarea placeholder="<?php esc_attr_e( "Remember: keep it short! To insert an image, drag and drop it here.", 'liveblog' ); ?>" id="liveblog-form-entry" name="liveblog-form-entry" cols="50" rows="5"></textarea>
- <div class="liveblog-submit-wrapper">
- <span id="liveblog-submit-spinner"></span>
- <input type="button" id="liveblog-form-entry-preview" class="button" value="<?php esc_attr_e( 'Preview', 'liveblog' ); ?>" />
- <input type="button" id="liveblog-form-entry-submit" class="button" value="<?php esc_attr_e( 'Publish Update', 'liveblog' ); ?>" />
- <?php echo wp_nonce_field( self::nonce_key, self::nonce_key, false, false ); ?>
- </div>
-</fieldset>
+<div id="liveblog-messages">
+</div>
+<div id="liveblog-tabs">
+ <fieldset id="liveblog-actions">
+ <legend>
+ <ul>
+ <li><a href="#liveblog-new-entry">New Entry</a></li>
+ <li>&bull;</li>
+ <li><a href="#liveblog-preview">Preview</a></li>
+ </ul>
+ </legend>
+ <div id="liveblog-new-entry">
+ <textarea placeholder="<?php esc_attr_e( "Remember: keep it short! To insert an image, drag and drop it here.", 'liveblog' ); ?>" id="liveblog-form-entry" name="liveblog-form-entry" cols="50" rows="5"></textarea>
+ <div class="liveblog-submit-wrapper">
+ <span id="liveblog-submit-spinner"></span>
+ <input type="button" id="liveblog-form-entry-submit" class="button" value="<?php esc_attr_e( 'Publish Update', 'liveblog' ); ?>" />
+ <?php echo wp_nonce_field( self::nonce_key, self::nonce_key, false, false ); ?>
+ </div>
+ </div>
+ <div id="liveblog-preview">
+ </div>
+ </fieldset>
+</div>

0 comments on commit a456b55

Please sign in to comment.