<?php if ( have_rows( 'speedbump', 'option' ) ) : ?>
<?php while ( have_rows( 'speedbump', 'option' ) ) : the_row(); ?>
<?php
$isEnabled = get_sub_field( 'isEnabled' );
$main_content = get_sub_field( 'main_content' );
$cancel_content = get_sub_field( 'cancel_content' );
$cancel_button_text = get_sub_field( 'cancel_button_text' );
$continue_content = get_sub_field( 'continue_content' );
$continue_button_text = get_sub_field( 'continue_button_text' );
$continue_button_link = get_sub_field( 'continue_button_link' );
$content_color = get_sub_field( 'content_color' );
$content_background_color = get_sub_field( 'content_background_color' );
$font_size = get_sub_field( 'font_size' );
?>
<?php if ( $isEnabled == 1 ) { ?>
<div class="js-speedbump speedbump" <?php echo $content_background_color ? 'style = "background-color: ' . $content_background_color . ';"' : null ?>>
<?php if ( get_sub_field( 'logo' ) ) { ?>
<div class="speedbump__image-container">
<img class="speedbump__image" src="<?php the_sub_field( 'logo' ); ?>" />
</div>
<?php } ?>
<div class="speedbump__inner-container" style="<?php echo $font_size ? 'font-size: ' . $font_size . 'px; ' : null; echo $content_color ? 'color: ' . $content_color . ';' : null; ?>">
<?php if ( $main_content ) { ?>
<div class="main">
<p><strong><?php echo $main_content ?></strong></p>
</div>
<?php } ?>
<div class="speedbump__content content">
<div class="content__column">
<div class="content__text">
<p><?php echo $continue_content; ?></p>
</div>
<a class="js-button button button--continue" href="<?php echo $continue_button_link ?>" target="_blank" rel="noopener">
<?php echo $continue_button_text ?>
</a>
</div>
<div class="content__column">
<div class="content__text">
<p><?php echo $cancel_content; ?></p>
</div>
<a class="js-button button button--cancel" href="#">
<?php echo $cancel_button_text ?>
</a>
</div>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
if ( function_exists('acf_add_options_page') ) {
acf_add_options_page(array(
'page_title' => 'Sitewide Settings',
'menu_title' => 'Sitewide Settings',
'menu_slug' => 'sitewide-general-settings',
'capability' => 'edit_posts',
'redirect' => false
));
acf_add_options_sub_page(array(
'page_title' => 'Sitewide Head Settings',
'menu_title' => 'Head',
'parent_slug' => 'sitewide-general-settings',
));
acf_add_options_sub_page(array(
'page_title' => 'Sitewide Header Settings',
'menu_title' => 'Header',
'parent_slug' => 'sitewide-general-settings',
));
acf_add_options_sub_page(array(
'page_title' => 'Sitewide Footer Settings',
'menu_title' => 'Footer',
'parent_slug' => 'sitewide-general-settings',
));
}
add_filter('acf/settings/save_json', function ( $path = '' ) {
$path = get_stylesheet_directory() . '/acf-json';
return $path;
});
add_filter('acf/settings/load_json', function ( $paths = array()) {
$paths = array( get_stylesheet_directory() . '/acf-json' );
return $paths;
});
$app_js_data = [];
$app_js_data_speedbump;
if ( have_rows( 'speedbump', 'option' ) ) {
while ( have_rows( 'speedbump', 'option' ) ) {
the_row();
if ( get_sub_field( 'isEnabled' ) == 1 ) {
$app_js_data_speedbump = array(
'speedbump_expiration_time' => get_sub_field( 'expiration_time' ),
'speedbump_enable_border' => get_sub_field( 'enable_border' ),
'speedbump_border_color' => get_sub_field( 'border_color' ),
'speedbump_enable_drop_shadow' => get_sub_field( 'enable_drop_shadow' )
);
array_push($app_js_data, $app_js_data_speedbump);
}
}
}
add_action('wp_enqueue_scripts', function () use ( $app_js_data ) {
wp_enqueue_style(
'app-css',
get_stylesheet_directory_uri() . '/dist/css/app.css',
array( ),
false,
'screen'
);
wp_enqueue_script(
'app-js',
get_stylesheet_directory_uri() .'/dist/js/app.js',
array( 'jquery', 'jquery-ui-dialog' ),
false,
true
);
wp_localize_script('app-js', 'app_js_data', $app_js_data[0]);
});
add_action( 'get_footer', function () {
wp_enqueue_style( 'wp-jquery-ui-dialog' );
});
'use strict';
jQuery(document).ready( function($) {
var $speedbump = $('.js-speedbump');
if ($speedbump.length) {
var currentTime = new Date().getTime();
Date.prototype.addDays = function(d) {
this.setDate(this.getDate() + d);
return this;
}
var expirationTime = new Date().addDays(app_js_data['speedbump_expiration_time']).getTime();
$.fn.createSpeedbump = function() {
var $speedbumpContainer = $(this).parents('.ui-dialog');
$speedbumpContainer.attr('id', 'speedbump-container');
$speedbumpContainer.children('.ui-dialog-titlebar').hide();
if (app_js_data['speedbump_enable_border'] == 1) {
$speedbumpContainer.addClass('speedbump-container--add-border');
if (app_js_data['speedbump_border_color'] != '') {
$speedbumpContainer
.css({'border-color' : app_js_data['speedbump_border_color']})
.find('.speedbump__image-container').css({'background-color' : app_js_data['speedbump_border_color']});
}
}
if (app_js_data['speedbump_enable_drop_shadow'] == 1) {
$speedbumpContainer.addClass('speedbump-container--add-drop-shadow');
}
return this;
}
$speedbump.dialog({
dialogClass: 'speedbump-container',
autoOpen: false,
closeOnEscape: false,
modal: true,
resizable: false,
draggable: false,
create: function () {
$speedbump.createSpeedbump();
},
open: function() {
$(this)
.parents('.ui-dialog')
.addClass('speedbump-container__animate');
},
});
$speedbump.find('.js-button').on( 'click', function( event ) {
if ($speedbump.dialog('isOpen')) {
if ($(this).hasClass('button--cancel')) {
event.preventDefault();
}
$speedbump.dialog('close');
}
localStorage.setItem('__speedbumpExpirationTime', expirationTime);
});
if (!$speedbump.dialog('isOpen')) {
if (localStorage.getItem('__speedbumpExpirationTime') < currentTime) {
$speedbump.dialog('open');
}
}
}
});
$breakpoint-small: 480px;
$breakpoint-medium: 768px;
$breakpoint-large: 1024px;
$breakpoint-xlarge: 1280px;
$breakpoint-xxlarge: 1600px;
$speedbump-desktop-breakpoint: 1061px;
.speedbump-container {
position: fixed !important;
width: 90% !important;
top: 50% !important;
left: 50% !important;
transform: translate( -50%, 150%);
opacity: 0;
overflow: visible !important;
transition: .5s cubic-bezier(.03,.71,.01,.99) 1s;
@media screen and (min-width: $speedbump-desktop-breakpoint) {
width: auto !important;
top: 10% !important;
transform: translate( -50%, 100%);
}
&__animate {
opacity: 1;
transform: translate( -50%, 50%);
@media screen and (min-width: $speedbump-desktop-breakpoint) {
transform: translate( -50%, 0);
}
}
&--add-border {
border-width: 10px;
border-style: solid;
border-color: white;
}
&--add-drop-shadow {
box-shadow: 0 0 25px 2px rgba(0,0,0,0.5) !important;
}
}
.speedbump {
background-color: red;
width: 100%;
top: 0;
left: 0;
transition: opacity .5s linear;
position: relative;
z-index: 99;
overflow: visible !important;
@media screen and (min-width: $speedbump-desktop-breakpoint) {
}
&__image-container {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 10px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
&__image {
width: 120px;
height: auto;
}
&__inner-container {
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: inherit;
background-color: inherit;
flex-wrap: wrap;
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
font-size: 16px;
@media screen and ( min-width: $speedbump-desktop-breakpoint ) {
}
}
.content {
display: flex;
flex-direction: column;
@media screen and ( min-width: $speedbump-desktop-breakpoint ) {
flex-direction: row-reverse;
}
p {
font-size: inherit;
}
&__column {
flex: 0 1 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px;
@media screen and ( min-width: $speedbump-desktop-breakpoint ) {
flex: 0 1 50%;
}
}
&__text {
flex: 1 1 auto;
}
}
.button {
display: inline-flex;
align-items: center;
color: #fff;
font-weight: 700;
white-space: nowrap;
padding: 5px 25px;
font-size: 14px;
text-transform: uppercase;
border: 2px solid transparent;
letter-spacing: 4px;
&--continue {
border-color: #fff;
&:hover {
color: white;
background-color: #3d3d3d;
}
}
&--cancel {
color: #595959;
background-color: #fff;
border-color: white;
&:hover {
color: white;
background-color: #3d3d3d;
border-color: #fff;
}
}
}
&__close-button {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
border: 2px solid white;
cursor: pointer;
border-radius: 50%;
position: absolute;
top: 10px;
right: 10px;
background-color: inherit;
@media screen and ( min-width: $speedbump-desktop-breakpoint ) {
}
&:hover {
background-color: rgba(0, 0, 0, .25);
}
}
}
acf-json/group_5e8bd736d2158.json {
"key": "group_5e8bd736d2158",
"title": "Sitewide",
"fields": [
{
"key": "field_5e8bd7370cf2f",
"label": "Dialog",
"name": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "top",
"endpoint": 0
},
{
"key": "field_5e8bd7370cfe1",
"label": "Dialog",
"name": "dialog",
"type": "group",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "acf-alert-banner",
"id": ""
},
"layout": "block",
"sub_fields": [
{
"key": "field_5e8bd73732d43",
"label": "Enable",
"name": "isEnabled",
"type": "true_false",
"instructions": "Enable component?",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 1,
"ui_on_text": "",
"ui_off_text": ""
},
{
"key": "field_5e8bd73732d9e",
"label": "Image",
"name": "image",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"preview_size": "medium",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": 400,
"max_height": 400,
"max_size": "",
"mime_types": ""
},
{
"key": "field_5e8bd73732e54",
"label": "Content",
"name": "content",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": ""
},
{
"key": "field_5e8bd73732f36",
"label": "Link",
"name": "link",
"type": "link",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array"
},
{
"key": "field_5e8bd73732fea",
"label": "Content background color",
"name": "content_background_color",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": ""
},
{
"key": "field_5e8bd7373309e",
"label": "Link color",
"name": "link_color",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": ""
},
{
"key": "field_5e8bd73733188",
"label": "Font size",
"name": "font_size",
"type": "range",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": 16,
"min": "",
"max": "",
"step": "",
"prepend": "",
"append": ""
}
]
},
{
"key": "field_5ed7f4cbc8fb0",
"label": "Speedbump",
"name": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "top",
"endpoint": 0
},
{
"key": "field_5ed7f0ae5be34",
"label": "Speedbump",
"name": "speedbump",
"type": "group",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "acf-alert-banner",
"id": ""
},
"layout": "block",
"sub_fields": [
{
"key": "field_5ed7f0ae5be35",
"label": "Enable",
"name": "isEnabled",
"type": "true_false",
"instructions": "Enable component?",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 1,
"ui_on_text": "",
"ui_off_text": ""
},
{
"key": "field_5f2b54f72cfab",
"label": "Expiration time",
"name": "expiration_time",
"type": "number",
"instructions": "Days",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5f29ce9d91f18",
"label": "Content",
"name": "",
"type": "message",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"new_lines": "wpautop",
"esc_html": 0
},
{
"key": "field_5eebb9f0ebee5",
"label": "Main content",
"name": "main_content",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_5ed7f14a5be3c",
"label": "Cancel content",
"name": "cancel_content",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": ""
},
{
"key": "field_5ed7f1675be3d",
"label": "Cancel button text",
"name": "cancel_button_text",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "Cancel",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_5ed7f17e5be3e",
"label": "Continue content",
"name": "continue_content",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"new_lines": "",
"maxlength": "",
"placeholder": "",
"rows": ""
},
{
"key": "field_5ed7f1a65be3f",
"label": "Continue button text",
"name": "continue_button_text",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "Continue",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_5f286005afee0",
"label": "Continue button link",
"name": "continue_button_link",
"type": "url",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": ""
},
{
"key": "field_5f29ce7e91f17",
"label": "Visual",
"name": "",
"type": "message",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"new_lines": "wpautop",
"esc_html": 0
},
{
"key": "field_5f2b7ae8eb07b",
"label": "Logo",
"name": "logo",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "url",
"preview_size": "medium",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": ""
},
{
"key": "field_5ed7f28cc8d69",
"label": "Content color",
"name": "content_color",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": ""
},
{
"key": "field_5ed7f0ae5be39",
"label": "Content background color",
"name": "content_background_color",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": ""
},
{
"key": "field_5ed7f0ae5be3b",
"label": "Font size",
"name": "font_size",
"type": "range",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": 16,
"min": "",
"max": "",
"step": "",
"prepend": "",
"append": ""
},
{
"key": "field_5f29cec691f19",
"label": "Enable border",
"name": "enable_border",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 1,
"ui_on_text": "",
"ui_off_text": ""
},
{
"key": "field_5f29cef991f1a",
"label": "Border color",
"name": "border_color",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_5f29cec691f19",
"operator": "==",
"value": "1"
}
]
],
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": ""
},
{
"key": "field_5f29cf1c91f1b",
"label": "Enable drop shadow",
"name": "enable_drop_shadow",
"type": "true_false",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"message": "",
"default_value": 0,
"ui": 1,
"ui_on_text": "",
"ui_off_text": ""
}
]
}
],
"location": [
[
{
"param": "options_page",
"operator": "==",
"value": "sitewide-general-settings"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": 1,
"description": "",
"modified": 1596685186
}
