Skip to content

codeup-advent-calendar
codeup-advent-calendar
Commit 2bebb8c6 authored by Mike Little's avatar Mike Little
Browse files
Options

add image selelctor to settings page 

convert to embedded html
Add JS assets to support image selection.
Only sort random on front end.
Coding standards.
parent 8f5b3322
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 38 deletions
assets/js/advent-calendar-admin.js 0 → 100644
View file @ 2bebb8c6
jQuery( document ).ready( function ( $ ) {
// Uploading files
var file_frame;
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
var set_to_post_id = cac_calendar_data.cac_calendar_background_id; // Set this
jQuery( '#upload_image_button' ).on( 'click', function ( event ) {
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
// Set the post ID to what we want
file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
// Open frame
file_frame.open();
return;
} else {
// Set the wp.media post id so the uploader grabs the ID we want when initialised
wp.media.model.settings.post.id = set_to_post_id;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media( {
title: 'Select a image to upload',
button: {
text: 'Use this image',
},
multiple: false // Set to true to allow multiple files to be selected
} );
// When an image is selected, run a callback.
file_frame.on( 'select', function () {
// We set multiple to false so only get one image from the uploader
var attachment = file_frame.state().get( 'selection' ).first().toJSON();
var attachment_selector = 'cac-calendar_background_id';
// Do something with attachment.id and/or attachment.url here
$( '#image-preview' ).attr( 'src', attachment.url );
$( '#' + attachment_selector ).val( attachment.id );
// Restore the main post ID
wp.media.model.settings.post.id = wp_media_post_id;
} );
// Finally, open the modal
file_frame.open();
} );
// Restore the main ID when the add media button is pressed
jQuery( 'a.add_media' ).on( 'click', function () {
wp.media.model.settings.post.id = wp_media_post_id;
} );
} );
inc/class-advent-calendar-settings-page.php
View file @ 2bebb8c6
......@@ -32,26 +32,23 @@ class Advent_Calendar_Settings_Page {
* Advent_Calendar_Settings_Page constructor.
*/
public function __construct() {
add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
add_action( 'admin_init', array( $this, 'init_settings' ) );
add_action( 'admin_menu', [ $this, 'add_admin_menu' ] );
add_action( 'admin_init', [ $this, 'init_settings' ] );
add_action( 'admin_footer', [ $this, 'enqueue_assets' ] );
}
/**
* Add our settings page under the Advent Calendar menu
*/
public function add_admin_menu() {
add_submenu_page(
'edit.php?post_type=advent_day',
esc_html__( 'Advent Calendar Settings', 'codeup-advent-calendar' ),
esc_html__( 'Calendar Settings', 'codeup-advent-calendar' ),
'manage_options',
'cac-settings-slug',
array( $this, 'page_layout' )
[ $this, 'page_layout' ]
);
}
/**
......@@ -79,14 +76,23 @@ class Advent_Calendar_Settings_Page {
add_settings_field(
'cac-calendar_title',
__( 'Calendar Title', 'codeup-advent-calendar' ),
array( $this, 'render_cac_calendar_title_field' ),
[ $this, 'render_cac_calendar_title_field' ],
'cac_settings_name',
'cac_settings_name_section'
);
add_settings_field(
'cac-calendar_background_id',
__( 'Background Image', 'codeup-advent-calendar' ),
[ $this, 'render_cac_calendar_image_field' ],
'cac_settings_name',
'cac_settings_name_section'
);
add_settings_field(
'cac-create_days_checkbox',
__( 'Create default days?', 'codeup-advent-calendar' ),
array( $this, 'render_cac_create_days_checkbox_field' ),
[ $this, 'render_cac_create_days_checkbox_field' ],
'cac_settings_name',
'cac_settings_name_section'
);
......@@ -103,18 +109,19 @@ class Advent_Calendar_Settings_Page {
wp_die( esc_html__( 'You do not have sufficient permissions to access this page.', 'codeup-advent-calendar' ) );
}
// Admin Page Layout
echo '<div class="wrap">' . "\n";
echo ' <h1>' . get_admin_page_title() . '</h1>' . "\n";
echo ' <form action="options.php" method="post">' . "\n";
settings_fields( 'cac_settings_group' );
do_settings_sections( 'cac_settings_name' );
submit_button();
echo ' </form>' . "\n";
echo '</div>' . "\n";
wp_enqueue_media();
?>
<div class="wrap">
<h1><?php echo get_admin_page_title(); ?></h1>
<form action="options.php" method="post">
<?php
settings_fields( 'cac_settings_group' );
do_settings_sections( 'cac_settings_name' );
submit_button();
?>
</form>
</div>
<?php
}
/**
......@@ -122,17 +129,35 @@ class Advent_Calendar_Settings_Page {
*/
function render_cac_calendar_title_field() {
// Retrieve data from the database.
$options = get_option( 'cac_settings_name' );
// Get current value.
$options = get_option( 'cac_settings_name' );
$current_value = isset( $options['cac-calendar_title'] ) ? $options['cac-calendar_title'] : '';
// Set default value.
$value = isset( $options['cac-calendar_title'] ) ? $options['cac-calendar_title'] : '';
// Field output.
echo '<input type="text" name="cac_settings_name[cac-calendar_title]" class="regular-text cac-calendar_title_field" placeholder="' . esc_attr__( '',
'codeup-advent-calendar' ) . '" value="' . esc_attr( $value ) . '">';
echo '<p class="description">' . __( 'Enter the title for the calendar page', 'codeup-advent-calendar' ) . '</p>';
?>
<input type="text" name="cac_settings_name[cac-calendar_title]" class="regular-text cac-calendar_title_field"
value="<?php echo esc_attr( $current_value ); ?>">
<p class="description"><?php esc_html_e( 'Enter the title for the calendar page', 'codeup-advent-calendar' ); ?></p>
<?php
}
/**
* Render the calendar image selection field.
*/
function render_cac_calendar_image_field() {
// Get current value.
$options = get_option( 'cac_settings_name' );
$current_value = isset( $options['cac-calendar_background_id'] ) ? $options['cac-calendar_background_id'] : '';
?>
<div class="image-preview-wrapper">
<img id="image-preview" src="<?php echo wp_get_attachment_url( $current_value ); ?>" width="300" style="max-height: 600px; width: 300px;">
</div>
<input id="upload_image_button" type="button" class="button" value="<?php esc_attr_e( 'Select or upload image', 'codeup-advent-calendar' ); ?>"/>
<input type='hidden' name='cac_settings_name[cac-calendar_background_id]' id='cac-calendar_background_id'
value='<?php echo esc_attr( $current_value ); ?>'>
<p class="description"><?php esc_html_e( 'Select an image for the background of the calendar page', 'codeup-advent-calendar' ); ?></p>
<?php
}
/**
......@@ -140,13 +165,11 @@ class Advent_Calendar_Settings_Page {
* So there is no need to retrieve them from stored options.
*/
function render_cac_create_days_checkbox_field() {
// Field output.
echo '<input type="checkbox" name="cac_settings_name[cac-create_days_checkbox][]" class="cac-create_days_checkbox_field" value="' . esc_attr( 'create' ) . '" > ' .
__( 'Create days', 'codeup-advent-calendar' ) . '<br>';
echo '<input type="checkbox" name="cac_settings_name[cac-create_days_checkbox][]" class="cac-create_days_checkbox_field" value="' . esc_attr( 'delete_current' ) . '" > ' .
__( 'Delete current', 'codeup-advent-calendar' ) . '<br>';
echo '<p class="description">' . __( 'Checking the second box will DELETE any existing days', 'codeup-advent-calendar' ) . '</p>';
}
/**
......@@ -160,24 +183,44 @@ class Advent_Calendar_Settings_Page {
if ( isset( $input['cac-calendar_title'] ) ) {
$input['cac-calendar_title'] = wp_strip_all_tags( $input['cac-calendar_title'] );
}
if ( ! isset( $input['cac-create_days_checkbox'] ) ) {
return $input;
}
if ( in_array( 'create', $input['cac-create_days_checkbox'] ) ) {
if ( in_array( 'delete_current', $input['cac-create_days_checkbox'] ) ) {
Codeup_Advent_Calendar::get_instance()->delete_default_pages();
}
Codeup_Advent_Calendar::get_instance()->create_default_pages();
}
unset( $input['cac-create_days_checkbox'] );
return $input;
}
}
/**
* Enqueues some assets in the admin area.
*/
function enqueue_assets() {
if ( 'advent_day_page_cac-settings-slug' !== get_current_screen()->id ) {
return;
}
wp_enqueue_script(
'advent-calendar-admin',
plugin_dir_url( __DIR__ ) . 'assets/js/advent-calendar-admin.js',
[ 'jquery' ],
filemtime( plugin_dir_path( __DIR__ ) . 'assets/js/advent-calendar-admin.js' )
);
$options = get_option( 'cac_settings_name' );
$current_value = empty( $options['cac-calendar_background_id'] ) ? '0' : $options['cac-calendar_background_id'];
$cac_calendar_data = [
'cac_calendar_background_id' => $current_value,
];
wp_localize_script( 'advent-calendar-admin', 'cac_calendar_data', $cac_calendar_data );
}
}
inc/class-codeup-advent-calendar.php
View file @ 2bebb8c6
......@@ -147,6 +147,10 @@ class Codeup_Advent_Calendar {
* @param WP_Query $wp_query The current query.
*/
public function show_25_days( WP_Query $wp_query ) {
if ( is_admin() ) {
return;
}
if ( CAC_ADVENT_DAY_TYPE === $wp_query->get( 'post_type' ) &&
$wp_query->is_archive() ) {
$orderby = $wp_query->get( 'orderby' );
......@@ -165,7 +169,6 @@ class Codeup_Advent_Calendar {
* @return string Our template or the original.
*/
public function template_include( string $original_template ) : string {
zed1_debug('original template=', $original_template);
if ( CAC_ADVENT_DAY_TYPE === get_post_type() && is_archive() ) {
return self::$template_loader->get_template_part( 'archive', CAC_ADVENT_DAY_TYPE, false );
} else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment