Skip to content

Instantly share code, notes, and snippets.

@JRyven
Last active February 25, 2021 15:10
Show Gist options
  • Save JRyven/9b3fe266502f2dc9cf0891d6752db1f0 to your computer and use it in GitHub Desktop.
Save JRyven/9b3fe266502f2dc9cf0891d6752db1f0 to your computer and use it in GitHub Desktop.
Simple, cookied popup
<?php
/*
*
*
*
*
*/
class Popup__Elm {
public $id = NULL;
public $name = NULL;
public function __construct() {
$this->id = NAMESPACE_make_id(6);
$this->Popup__Elm__Callback();
$this->scripts();
$this->styles();
}
public function Popup__Elm__Callback(){
add_shortcode( 'NAMESPACE_popup' , array( $this, 'NAMESPACE__content__popup_elm_callback'));
}
/* NAMESPACE__content__popup_elm_callback
*
* Usage
* [btn &params ]
*
* Params
*
* @ param - (optional)
*/
public function NAMESPACE__content__popup_elm_callback( $atts, $content = NULL ) {
$a = shortcode_atts( array(
'lnk' => '#',
'lnk_trgt' => '_self',
'name' => 'default',
), $atts );
$this->name = $atts['name'] ?? 'default';
$class = 'NAMESPACEpopup__container';
$class .= ' NAMESPACEpopup__container--'.$this->name;
$lnk = $atts['lnk'] ?? '#';
$lnk_trgt = $atts['lnk_trgt'] ?? '_self';
ob_start();
?>
<div id="<?php echo $this->id; ?>" class="<?php echo $class; ?>" style="display:none;">
<div class="NAMESPACEpopup__inner">
<span class="NAMESPACEpopup__close" onclick="remove_NAMESPACE_popup(this)"><i class="material-icons">close</i></span>
<a class="NAMESPACEpopup__link" href="<?php echo $lnk; ?>" target="<?php echo $lnk_trgt; ?>"/>
<?php echo $content; ?>
</a>
</div>
</div>
<?php return ob_get_clean(); ?>
<?php
}
private function styles() {
ob_start(); ?>
#<?php echo $this->id; ?> {
position: fixed !important;
z-index: 999999;
background: rgba(0, 0, 0, 0.75);
top: 0px;
left: 0px;
height: calc( 100vh );
width: calc( 100vw );
overflow: hidden;
opacity: 1;
}
#<?php echo $this->id; ?> .NAMESPACEpopup__inner {
position: fixed !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#<?php echo $this->id; ?> .NAMESPACEpopup__inner img {
display: block;
position: relative;
height: auto;
width: auto;
margin: 0px auto;
}
#<?php echo $this->id; ?> .NAMESPACEpopup__inner span.NAMESPACEpopup__close {
position: relative;
display: block;
width: 100%;
text-align: right;
color: white;
cursor: pointer;
}
@media only screen and (max-width: 600px) {}
@media only screen and (min-width: 48rem) {}
@media only screen and (min-width: 64rem) {}
@media only screen and (min-width: 80rem) {}
<?php
$NAMESPACE__Popup__Styles = ob_get_clean();
// only enqueue styles if they're not already enqueued.
if ( ! wp_style_is( 'NAMESPACE-module-styles', 'enqueued' ) ) {
wp_register_style( 'NAMESPACE-module-styles', FALSE );
wp_enqueue_style( 'NAMESPACE-module-styles' );
}
wp_add_inline_style( 'NAMESPACE-module-styles', $NAMESPACE__Popup__Styles );
}
private function scripts() {
ob_start();
/* See https://www.quirksmode.org/js/cookies.html for Basic Cookies
var cookie = readCookie("<?php echo $this->name; ?>");
if (cookie) {
console.log("Cookie was found!");
} else {
console.log("Cookie was not found!");
createCookie("<?php echo $this->name; ?>", "Cookie <?php echo $this->name; ?> Set" , 3);
}
*/
?>
if (navigator.userAgent.indexOf("Safari") != -1 && navigator.userAgent.indexOf("Chrome") == -1) {
console.log("For Safari-like browsers, we can\'t use setTimeout.");
document.getElementById("<?php echo $this->id; ?>").style.display = "block";
}
setTimeout(function() {
console.log("<?php echo $this->name; ?> popup shown.");
document.getElementById("<?php echo $this->id; ?>").style.display = "block";
}, 3000 );
function remove_NAMESPACE_popup(e) {
var parent = e.parentNode.parentNode;
parent.remove();
}
<?php
$NAMESPACE__Popup__Scripts = ob_get_clean();
// only enqueue styles if they're not already enqueued.
if ( ! wp_script_is( 'NAMESPACE-module-scripts', 'enqueued' ) ) {
wp_register_script( 'NAMESPACE-module-scripts', FALSE, array(), '1.0.1' );
wp_enqueue_script( 'NAMESPACE-module-scripts' );
}
wp_add_inline_script( 'NAMESPACE-module-scripts', $NAMESPACE__Popup__Scripts );
}
} // close the NAMESPACE__Popup() Class
/* Call the Popup__Elm__Shortcode() Class to activate shortcode
*
*
*/
add_action('wp_head','activate_popup_elm_shortcode');
function activate_popup_elm_shortcode(){
new Popup__Elm();
}
/* the cold, final swig of coffee */ ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment