...
 
Commits (4)
'use strict';
jQuery( document ).ready( function ( $ ) {
// Uploading files
......
......@@ -16,10 +16,7 @@
* @since Twenty Sixteen 1.0
*/
$options = get_option( 'cac_settings_name' );
$page_title = isset( $options['cac-calendar_title'] ) ? $options['cac-calendar_title'] : '';
$background_image = isset( $options['cac-calendar_title'] ) ? intval( $options['cac-calendar_title'] ) : 0;
/* Enqueue our stylesheet */
wp_enqueue_style(
'advent-calendar',
plugin_dir_url( __FILE__ ) . 'assets/css/advent-calendar.css',
......@@ -27,41 +24,70 @@ wp_enqueue_style(
filemtime( plugin_dir_path( __FILE__ ) . 'assets/css/advent-calendar.css' )
);
/* get our calendar options */
$options = get_option( 'cac_settings_name' );
$page_title = isset( $options['cac-calendar_title'] ) ? $options['cac-calendar_title'] : '';
$image_id = isset( $options['cac-calendar_background_id'] ) ? intval( $options['cac-calendar_background_id'] ) : 0;
$background_image = wp_get_attachment_image_src( $image_id, 'full' );
/**
* Hook to wp_head on low priority to add background image.
*/
if ($background_image) {
add_action(
'wp_head', function () use ( $background_image ) {
?>
<style>
.site {
background-image: url(<?php echo esc_url($background_image[0]); ?>);
background-size: auto;
margin: 0;
background-attachment: fixed;
}
</style>
<?php
}, 99 );
}
/* Enqueue our JavaScript */
wp_enqueue_script(
'advent-calendar',
plugin_dir_url( __FILE__ ) . 'assets/js/advent-calendar.js',
['jquery'],
filemtime( plugin_dir_path( __FILE__ ) . 'assets/js/advent-calendar.js' )
);
wp_localize_script( 'advent-calendar', 'advent_calendar_data',
[
'foo' => 'bar',
]
);
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h1 class="page-title"><?php echo esc_html( $page_title ); ?></h1>
</header><!-- .page-header -->
<header class="page-header">
<h1 class="page-title"><?php echo esc_html( $page_title ); ?></h1>
</header><!-- .page-header -->
<div id="grid">
<?php
// Start the Loop.
while ( have_posts() ) :
the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
Codeup_Advent_Calendar::get_instance()->template_loader()->get_template_part( 'content', CAC_ADVENT_DAY_TYPE );
// End the loop.
endwhile;
// Previous/next page navigation.
the_posts_pagination(
array(
'prev_text' => __( 'Previous page', 'twentysixteen' ),
'next_text' => __( 'Next page', 'twentysixteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
)
);
<?php
while ( have_posts() ) :
the_post();
/*
* Include the Post type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-advent_day.php and that will be used instead.
*/
Codeup_Advent_Calendar::get_instance()->template_loader()->get_template_part( 'content', CAC_ADVENT_DAY_TYPE );
endwhile;
// If no content, include the "No posts found" template.
else :
......
......@@ -27,6 +27,12 @@
.calendar_day_cell h2 {
text-align: center;
font-size: 400%;
}
.calendar_day_cell h2.middle {
position: relative;
top: 40%;
}
.calendar_day_cell img {
......@@ -37,6 +43,25 @@
vertical-align: middle;
}
.advent-joke-answer {
p.advent-motto,
p.advent-joke-answer,
.calendar_day_cell .day-image {
background-color: rgba(255, 255, 255, 0.25);
}
.hidden {
opacity: 0.0;
filter: alpha(opacity=0); /* For IE8 and earlier */
}
.hidden2 {
display: none;
}
p.advent-motto {
margin-bottom: 0em;
}
p.advent-joke-answer {
margin-bottom: 0;
}
/* JavaScript for front end advent calendar */
'use strict';
jQuery( document ).ready( function ( $ ) {
$( '.content-area' ).on( 'click', '.calendar_day_cell', function ( event ) {
event.preventDefault(); // prevent normal click function
// find the image or video
let cell_image = $( this ).children( '.day-image.hidden' );
// if we found it, remove the hidden class to show it.
if ( cell_image ) {
cell_image.removeClass( 'hidden' );
}
// find the h2 and move it up.
let heading = $( this ).children( 'h2' );
if ( heading ) {
heading.removeClass( 'middle' );
}
// find the motto and display it
let motto = $( this ).children( '.advent-motto' );
if ( motto ) {
motto.removeClass( 'hidden' );
}
// if there is a joke answer make it clickable
let joke_answer = $( this ).siblings( '.advent-joke-answer' );
if ( joke_answer ) {
motto.on( 'click', function ( event ) {
event.stopPropagation(); // prevent normal click function
joke_answer = $( this ).siblings( '.advent-joke-answer' );
joke_answer.removeClass( 'hidden2' );
} );
}
} );
} );
<div class="calendar_day_cell">
<h2 <?php post_class() ?>>
<h2 <?php post_class('middle') ?>>
<?php the_title(); ?>
</h2>
......@@ -10,10 +10,16 @@
$alt_tag = ! empty( $alt ) ? sprintf( 'alt="%s"', esc_attr( $alt ) ) : '';
if ( isset( $image ) && $image['id'] ) {
?>
<img id="advent-image" src="<?php echo wp_get_attachment_url( $image['id'] ); ?>" <?php echo $alt_tag; ?>>
<div class="day-image hidden">
<img id="advent-image" src="<?php echo wp_get_attachment_url( $image['id'] ); ?>" <?php echo $alt_tag; ?>>
</div>
<?php
} elseif ( isset( $video ) ) {
echo $video;
?>
<div class="day-image hidden">
<?php echo $video; ?>
</div>
<?php
}
$motto = get_field( 'acd_short_message' );
$joke_question = get_field( 'acd_joke_question' );
......@@ -21,13 +27,13 @@
switch ( get_field( 'acd_motto_or_joke' ) ) {
case 'motto':
?>
<p class="advent-motto"><?php echo esc_html( $motto ); ?></p>
<p class="advent-motto hidden"><?php echo esc_html( $motto ); ?></p>
<?php
break;
case 'joke':
?>
<p class="advent-joke"><?php echo esc_html( $joke_question ); ?><span class="advent-joke-answer"><?php echo esc_html( $joke_answer ); ?></span>
</p>
<p class="advent-motto hidden"><?php echo esc_html( $joke_question ); ?></p>
<p class="advent-joke-answer hidden2"><?php echo esc_html( $joke_answer ); ?></p>
<?php
break;
......