Skip to content

Commit

Permalink
Revamp wizard screens across all components
Browse files Browse the repository at this point in the history
  • Loading branch information
@sc0ttkclark
sc0ttkclark committed Sep 12, 2024
1 parent 65ff349 commit 6ccfcd8
Show file tree
Hide file tree
Showing 20 changed files with 291 additions and 166 deletions.
110 changes: 78 additions & 32 deletions components/Migrate-ACF/ui/wizard.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,57 +9,67 @@
<?php echo PodsForm::field( '_wpnonce', wp_create_nonce( 'pods-component-' . $component . '-' . $method ), 'hidden' ); ?>
<?php echo PodsForm::field( 'cleanup', 0, 'hidden', array( 'attributes' => array( 'id' => 'pods_cleanup' ) ) ); ?>

<h2 class="italicized"><?php _e( 'Migrate: Import from Advanced Custom Fields', 'pods' ); ?></h2>
<h2 class="italicized"><?php esc_html_e( 'Migrate: Import from Advanced Custom Fields', 'pods' ); ?></h2>

<img src="<?php echo esc_url( PODS_URL ); ?>ui/images/pods-logo-notext-rgb-transparent.png" class="pods-leaf-watermark-right" />

<div id="pods-wizard-box" class="pods-wizard-steps-2 pods-wizard-hide-first">
<div id="pods-wizard-heading">
<ul>
<li class="pods-wizard-menu-current" data-step="1">
<i></i> <span>1</span> <?php _e( 'Setup', 'pods' ); ?>
<i></i> <span>1</span> <?php esc_html_e( 'Step 1: Setup', 'pods' ); ?>
<em></em>
</li>
<li data-step="2">
<i></i> <span>2</span> <?php _e( 'Migrate', 'pods' ); ?>
<i></i> <span>2</span> <?php esc_html_e( 'Step 2: Migrate', 'pods' ); ?>
<em></em>
</li>
</ul>
</div>
<div id="pods-wizard-main">
<div id="pods-wizard-panel-1" class="pods-wizard-panel">
<div class="pods-wizard-content">
<p><?php _e( 'Advanced Custom Fields provides an interface to create Custom Post Types and Custom Taxonomies. You can import these and their settings directly into Pods', 'pods' ); ?></p>
<p><?php esc_html_e( 'Advanced Custom Fields provides an interface to create Custom Post Types and Custom Taxonomies. You can import these and their settings directly into Pods', 'pods' ); ?></p>
</div>
<div id="pods-wizard-options">
<div class="pods-wizard-option">
<a href="#pods-wizard-import" data-opt="0">
<h2><?php _e( 'Import Only', 'pods' ); ?></h2>

<p><?php _e( 'This will import your Custom Post Types and Taxonomies.', 'pods' ); ?></p>
<p><?php _e( 'Until you remove them from Advanced Custom Fields, these will be treated by Pods as extended content types.', 'pods' ); ?></p>
</a>

<p><br /></p>
</div>
<div class="pods-wizard-option">
<a href="#pods-wizard-import-clean" data-opt="1">
<h2><?php _e( 'Import and Clean Up', 'pods' ); ?></h2>

<p><?php _e( 'This will import your Custom Post Types and Taxonomies, and then remove them from Advanced Custom Fields.', 'pods' ); ?></p>
</a>

<p><br /></p>
<div id="pods-wizard-options">
<div class="pods-wizard-options-list">
<div class="pods-wizard-option">
<a href="#pods-wizard-import" data-opt="0">
<div>
<h2><?php esc_html_e( 'Import Only', 'pods' ); ?></h2>

<p><?php esc_html_e( 'This will import your Custom Post Types and Taxonomies.', 'pods' ); ?></p>
<p><?php esc_html_e( 'Until you remove them from Advanced Custom Fields, these will be treated by Pods as extended content types.', 'pods' ); ?></p>
</div>
<span>&#10095;</span>
</a>
</div>
<div class="pods-wizard-option">
<a href="#pods-wizard-import-clean" data-opt="1">
<div>
<h2><?php esc_html_e( 'Import and Clean Up', 'pods' ); ?></h2>

<p><?php esc_html_e( 'This will import your Custom Post Types and Taxonomies, and then remove them from Advanced Custom Fields.', 'pods' ); ?></p>
</div>
<span>&#10095;</span>
</a>
</div>
</div>
</div>
</div>
<div id="pods-wizard-panel-2" class="pods-wizard-panel">
<div id="pods-wizard-panel-2" class="pods-wizard-panel pods-wizard-option-content">
<div class="pods-wizard-content">
<p><?php _e( 'Choose below which Custom Post Types and Taxonomies you want to import into Pods', 'pods' ); ?></p>
<p><?php esc_html_e( 'Choose below which Custom Post Types and Taxonomies you want to import into Pods', 'pods' ); ?></p>

<p>
<a href='#toggle' class='button pods-wizard-toggle-all'
data-toggle='all'><?php esc_html_e( 'Toggle everything on / off', 'pods' ); ?></a>
</p>
</div>

<div class="stuffbox">
<h3><label for="link_name"><?php _e( 'Choose Post Types to Import', 'pods' ); ?></label>
<h3><label for="link_name"><?php esc_html_e( 'Choose Post Types to Import', 'pods' ); ?></label>
</h3>

<div class="inside pods-manage-field pods-dependency">
Expand All @@ -68,10 +78,15 @@
?>
<div class="pods-field-option-group">
<p class="pods-field-option-group-label">
<?php _e( 'Available Post Types', 'pods' ); ?>
<?php esc_html_e( 'Available Post Types', 'pods' ); ?>
</p>

<div class="pods-pick-values pods-pick-checkbox">
<p>
<a href='#toggle' class='button pods-wizard-toggle-all'
data-toggle="post_type"><?php esc_html_e( 'Toggle all on / off', 'pods' ); ?></a>
</p>

<ul>
<?php
foreach ( $post_types as $post_type ) {
Expand All @@ -97,15 +112,15 @@
<?php
} else {
?>
<p class="padded"><?php _e( 'No Post Types were found.', 'pods' ); ?></p>
<p class="padded"><?php esc_html_e( 'No Post Types were found.', 'pods' ); ?></p>
<?php
}//end if
?>
</div>
</div>

<div class="stuffbox">
<h3><label for="link_name"><?php _e( 'Choose Taxonomies to Import', 'pods' ); ?></label>
<h3><label for="link_name"><?php esc_html_e( 'Choose Taxonomies to Import', 'pods' ); ?></label>
</h3>

<div class="inside pods-manage-field pods-dependency">
Expand All @@ -114,10 +129,15 @@
?>
<div class="pods-field-option-group">
<p class="pods-field-option-group-label">
<?php _e( 'Available Taxonomies', 'pods' ); ?>
<?php esc_html_e( 'Available Taxonomies', 'pods' ); ?>
</p>

<div class="pods-pick-values pods-pick-checkbox">
<p>
<a href='#toggle' class='button pods-wizard-toggle-all'
data-toggle="taxonomy"><?php esc_html_e( 'Toggle all on / off', 'pods' ); ?></a>
</p>

<ul>
<?php
foreach ( $taxonomies as $taxonomy ) {
Expand All @@ -141,7 +161,7 @@
<?php
} else {
?>
<p class="padded"><?php _e( 'No Taxonomies were found.', 'pods' ); ?></p>
<p class="padded"><?php esc_html_e( 'No Taxonomies were found.', 'pods' ); ?></p>
<?php
}//end if
?>
Expand All @@ -151,8 +171,8 @@

<div id="pods-wizard-actions" class="pods-wizard-button-interface">
<div id="pods-wizard-toolbar">
<button id="pods-wizard-start" class="button button-secondary"><?php _e( 'Start Over', 'pods' ); ?></button>
<button id="pods-wizard-next" class="button button-primary" data-next="<?php esc_attr_e( 'Next Step', 'pods' ); ?>" data-finished="<?php esc_attr_e( 'Finished', 'pods' ); ?>" data-processing="<?php esc_attr_e( 'Processing', 'pods' ); ?>.."><?php _e( 'Next Step', 'pods' ); ?></button>
<button id="pods-wizard-start" class="button button-secondary"><?php esc_html_e( 'Start Over', 'pods' ); ?></button>
<button id="pods-wizard-next" class="button button-primary" data-next="<?php esc_attr_e( 'Next Step', 'pods' ); ?>" data-finished="<?php esc_attr_e( 'Finished', 'pods' ); ?>" data-processing="<?php esc_attr_e( 'Processing', 'pods' ); ?>.."><?php esc_html_e( 'Next Step', 'pods' ); ?></button>
</div>
<div id="pods-wizard-finished">

Expand All @@ -173,7 +193,33 @@
jQuery( '#pods_cleanup' ).val( $opt.data( 'opt' ) );
};

const toggle_all = {
all: true
};

jQuery( function ( $ ) {
$( '.pods-wizard-toggle-all' ).on( 'click', function ( e ) {
e.preventDefault();

const toggleData = $( this ).data( 'toggle' );

if ( 'undefined' == typeof toggle_all[toggleData] ) {
toggle_all[toggleData] = true;
}

let $parent;

if ( 'all' !== toggleData ) {
$parent = $( this ).closest( '.pods-field-option-group' );
} else {
$parent = $( this ).closest( '.pods-wizard-option-content' );
}

$parent.find( '.pods-field.pods-boolean input[type="checkbox"]' ).prop( 'checked', (!toggle_all[toggleData]) );

toggle_all[toggleData] = (!toggle_all[toggleData]);
} );

$( document ).Pods( 'validate' );
$( document ).Pods( 'submit' );
$( document ).Pods( 'wizard' );
Expand Down
Loading

0 comments on commit 6ccfcd8

Please sign in to comment.