Skip to content

Commit

Permalink
Improve storyline sorting.
Browse files Browse the repository at this point in the history 
Replace the old-school up and down arrow sorting with a sort page that
allows for fast, stylish drag-and-drop sorting for storylines.
  • Loading branch information
Michael Sisk committed Feb 3, 2013
1 parent bc606ea commit 4f8c889
Show file tree
Hide file tree
Showing 6 changed files with 265 additions and 93 deletions.
42 changes: 42 additions & 0 deletions -/css/admin-taxonomy.css
View file
@@ -0,0 +1,42 @@
.webcomic-sort {
margin: 0;
padding: 0;
}

.webcomic-sort ol {
margin: 0 0 0 30px;
padding: 0;
}

.webcomic-sort li {
list-style: none;
margin: .25em 0;
padding: .25em 0;
}

.webcomic-sort b {
cursor: move;
display: block;
}

.webcomic-sort i {
background: rgba( 0, 0, 0, .05 );
box-shadow: 0 0 1em 0 rgba( 0, 0, 0, .1 ) inset;
display: inline-block;
height: 3em;
line-height: 3em;
margin: 0 .5em 0 0;
outline: thin solid rgba( 0, 0, 0, .2 );
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 3em;
}

.webcomic-drop {
background: rgba( 0, 0, 0, .05 );
height: 3em;
padding: .25em 0;
margin: .25em 0;
outline: thin dashed rgba( 0, 0, 0, .2 );
}
20 changes: 14 additions & 6 deletions -/js/admin-taxonomy.js
View file
@@ -1,10 +1,4 @@
jQuery( function( $ ) {
/** Prevent AJAX actions for storylines. */
if ( 'storyline' === $( '[data-webcomic-taxonomy]' ).data( 'webcomic-taxonomy' ) ) {
$( '#submit' ).attr( 'id', 'webcomic-submit' );
$( '.delete-tag' ).removeClass( 'delete-tag' ).addClass( 'webcomic-delete-term' );
}

/** Remove the term image. */
$( document ).on( 'click', '.webcomic-term-image-x', function() {
$.get( $( '[data-webcomic-admin-url]' ).data( 'webcomic-admin-url' ), {
Expand All @@ -16,6 +10,20 @@ jQuery( function( $ ) {
$( '#webcomic_term_image' ).html( data );
} );
} );

/** Enable dynamic term sorting. */
$( '.webcomic-sort' ).nestedSortable( {
handle: 'b',
items: 'li',
tabSize: 36,
toleranceElement: '> b',
placeholder: 'webcomic-drop',
update: function( e, ui ) {
$( '[name="webcomic_terms"]' ).val( $( '.webcomic-sort' ).nestedSortable( 'serialize' ) );
}
} );

$( '[name="webcomic_terms"]' ).val( $( '.webcomic-sort' ).nestedSortable( 'serialize' ) );
} );

/** Enable fancy taxonomy images. */
Expand Down
13 changes: 13 additions & 0 deletions -/library/jquery.nestedsortable.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions -/php/admin.php
View file
Expand Up @@ -422,14 +422,14 @@ public function admin_init() {
public function admin_head() {
$screen = get_current_screen();

if ( preg_match( '/^(page|options-media|tools_page_webcomic-commerce|tools_page_webcomic-upgrader|media_page_webcomic-attacher|media_page_webcomic-generator|settings_page_webcomic-options|(edit-)?webcomic_(transcript|language)|(webcomic\d+_page_|edit-)?webcomic\d+(-options|_storyline|_character)?)$/', $screen->id ) ) {
if ( preg_match( '/^(page|options-media|tools_page_webcomic-commerce|tools_page_webcomic-upgrader|media_page_webcomic-attacher|media_page_webcomic-generator|admin_page_webcomic-term-sort|settings_page_webcomic-options|(edit-)?webcomic_(transcript|language)|(webcomic\d+_page_|edit-)?webcomic\d+(-options|_storyline|_character)?)$/', $screen->id ) ) {
require_once self::$dir . '-/php/help.php';

new WebcomicHelp( $screen );

if ( preg_match( '/^(edit-)?webcomic_(transcript|language)$/', $screen->id ) ) {
echo '<style>#icon-edit{background:url("', self::$url, '-/img/transcript.png")}</style>';
} elseif ( preg_match( '/^(edit-)?webcomic\d+(_storyline|_character)?$/', $screen->id ) ) {
} elseif ( 'admin_page_webcomic-term-sort' === $screen->id or preg_match( '/^(edit-)?webcomic\d+(_storyline|_character)?$/', $screen->id ) ) {
echo '<style>#icon-edit{background:url("', self::$url, '-/img/webcomic.png")}</style>';
}
}
Expand Down
44 changes: 23 additions & 21 deletions -/php/help.php
View file
Expand Up @@ -18,6 +18,7 @@ class WebcomicHelp extends Webcomic {
* @uses WebcomicHelp::legacy_overview()
* @uses WebcomicHelp::attacher_overview()
* @uses WebcomicHelp::generator_overview()
* @uses WebcomicHelp::term_order_overview()
* @uses WebcomicHelp::settings_general()
* @uses WebcomicHelp::settings_collections()
* @uses WebcomicHelp::transcripts_overview()
Expand Down Expand Up @@ -95,6 +96,12 @@ public function __construct( $screen ) {
'title' => __( 'Overview', 'webcomic' ),
'content' => $this->generator_overview()
) );
} elseif( 'admin_page_webcomic-term-sort' === $screen->id ) {
$screen->add_help_tab( array(
'id' => 'overview',
'title' => __( 'Overview', 'webcomic' ),
'content' => $this->term_order_overview()
) );
} elseif ( 'settings_page_webcomic-options' === $screen->id ) {
$screen->add_help_tab( array(
'id' => 'general-settings',
Expand Down Expand Up @@ -231,20 +238,14 @@ public function __construct( $screen ) {
$screen->add_help_tab( array(
'id' => 'overview',
'title' => __( 'Overview', 'webcomic' ),
'content' => $this->storylines_overview()
'content' => $this->storylines_overview( $screen )
) );

$screen->add_help_tab( array(
'id' => 'adding-storylines',
'title' => __( 'Adding Storylines', 'webcomic' ),
'content' => $this->storylines_adding()
) );

$screen->add_help_tab( array(
'id' => 'moving-storylines',
'title' => __( 'Moving Storylines', 'webcomic' ),
'content' => $this->storylines_moving()
) );
} elseif ( "edit-{$screen->post_type}_character" === $screen->id and empty( $_GET[ 'tag_ID' ] ) ) {
$screen->add_help_tab( array(
'id' => 'overview',
Expand Down Expand Up @@ -388,6 +389,17 @@ private function generator_overview() {
);
}

/** Return term order overview help.
*
* @return string
*/
private function term_order_overview() {
return sprintf( '
<p>%s</p>',
__( 'From here you can change the sorting order of your terms. Drag and drop the terms on the right to change their order. When everything looks good click <strong>Save Changes</strong>.', 'webcomic' )
);
}

/** Return transcript overview help.
*
* @return string
Expand Down Expand Up @@ -660,10 +672,12 @@ private function edit_webcomic_discussion() {
*
* @return string
*/
private function storylines_overview() {
private function storylines_overview( $screen ) {
$taxonomy = get_taxonomy( $screen->taxonomy );

return sprintf( '
<p>%s</p>',
__( 'You can organize your webcomics into story arcs using <strong>storylines</strong>.', 'webcomic' )
sprintf( __( 'You can organize your webcomics into story arcs using <strong>storylines</strong>. Click <strong>Sort %s</strong> to reorganize storylines.', 'webcomic' ), $taxonomy->label )
);
}

Expand Down Expand Up @@ -692,18 +706,6 @@ private function storylines_adding() {
);
}

/** Return moving storylines help.
*
* @return string
*/
private function storylines_moving() {
return sprintf( '
<p>%s</p>
',
__( "Hovering over a row in the storylines list will display action links that allow you to manage your storyline, including options to rearrange storylines. Use the &uarr; and &darr; arrows to move storylines up or down, respectively. Sub-storylines can only be moved within the list of storylines that share the same parent. To move a storyline outside of it's sublist you should first edit the storyline and change it's parent.", 'webcomic' )
);
}

/** Return characters overview help.
*
* @return string
Expand Down

0 comments on commit 4f8c889

Please sign in to comment.