Add cookie handling.

Store list of opened doors in cookie.
Re-open doors that are listed in thee cookie.
Reformat for clarity.
parent 7757576f
Pipeline #89 canceled with stage
......@@ -3,30 +3,35 @@
'use strict';
jQuery( document ).ready( function ( $ ) {
$( '.content-area' ).on( 'click', '.calendar_day_cell', function ( event ) {
event.preventDefault(); // prevent normal click function
/**
* Open an advent door. Display the image/video and motto/joke.
* Remember that is was opened in the cookie.
*
* @param door
*/
let open_door = function ( door ) {
// find the image or video
let cell_image = $( this ).children( '.day-image.hidden' );
let cell_image = $( door ).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' );
let heading = $( door ).children( 'h2' );
if ( heading ) {
heading.removeClass( 'middle' );
}
// find the motto and display it
let motto = $( this ).children( '.advent-motto' );
let motto = $( door ).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' );
let joke_answer = $( door ).siblings( '.advent-joke-answer' );
if ( joke_answer ) {
motto.on( 'click', function ( event ) {
event.stopPropagation(); // prevent normal click function
......@@ -34,6 +39,52 @@ jQuery( document ).ready( function ( $ ) {
joke_answer.removeClass( 'hidden2' );
} );
}
// if we don't yet have any opened initialise the array.
if ( !cookie_data.opened ) {
cookie_data.opened = {};
}
// mark it as open and save the cookie.
cookie_data.opened[ $( door ).data( 'dayName' ) ] = true;
Cookies.set( cookie_name, cookie_data );
};
// Set our cookie name and default options
const cookie_name = 'wp_advent_cookie';
Cookies.defaults = {
expires: 3 / ( 24 * 60 ), // 5 minutes 0.003472222222222
path: '/',
// domain: '',
secure: true,
};
// Try to grab our session cookie
let cookie_data = Cookies.getJSON( cookie_name );
console.log( cookie_data );
// Create one if not found
if ( !cookie_data ) {
cookie_data = {};
Cookies.set( cookie_name, cookie_data );
}
console.log( 'got cookie', cookie_data );
// Check which 'doors' have been opened,
if ( cookie_data.opened ) {
for ( var door in cookie_data.opened ) {
// and re-open them.
open_door( $( '[data-day-name="' + door + '"]' ) );
}
}
/**
* Set the click handler for our calendar doors.
*/
$( '.content-area' ).on( 'click', '.calendar_day_cell', function ( event ) {
event.preventDefault(); // prevent normal click function
open_door( this );
} );
......
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