Permalink
Browse files

Improve storyline sorting.

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...
1 parent bc606ea commit 4f8c889923d6726163f85c6af86a5527d9290ab4 Michael Sisk committed Feb 3, 2013
Showing with 265 additions and 93 deletions.
  1. +42 −0 -/css/admin-taxonomy.css
  2. +14 −6 -/js/admin-taxonomy.js
  3. +13 −0 -/library/jquery.nestedsortable.js
  4. +2 −2 -/php/admin.php
  5. +23 −21 -/php/help.php
  6. +171 −64 -/php/taxonomy.php
View
@@ -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 );
+}
View
@@ -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' ), {
@@ -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. */

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -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>';
}
}
View
@@ -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()
@@ -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',
@@ -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',
@@ -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
@@ -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 )
);
}
@@ -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
Oops, something went wrong.

0 comments on commit 4f8c889

Please sign in to comment.