Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
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...
commit a456b5511315f97b3c8c0be15f194cd1d4a332af 1 parent 5aee585
@nb nb authored
View
19 css/liveblog.css
@@ -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
36 js/liveblog-publisher.js
@@ -12,9 +12,13 @@
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 ) {
@@ -22,6 +26,38 @@
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
10 js/plupload.js
@@ -2,18 +2,18 @@ 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() {
@@ -21,11 +21,11 @@ jQuery(document).ready(function($) {
},
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
3  liveblog.php
@@ -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();
}
View
33 templates/liveblog-form.php
@@ -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>
Please sign in to comment.
Something went wrong with that request. Please try again.