edukarsa/inc/popup.php

<?php
/**
 * Modul Native Pop-up Flyer & Pengumuman EduKarsa
 * 100% Native tanpa plugin eksternal
 */

defined( 'ABSPATH' ) || exit;

function edukarsa_render_popup_flyer() {
    // 1. Cek apakah fitur popup aktif
    $is_active = get_option( 'edukarsa_tampil_popup', 0 );
    if ( ! $is_active ) {
        return;
    }

    // 2. Cek apakah dibatasi hanya di beranda
    $hanya_beranda = get_option( 'edukarsa_popup_hanya_beranda', 1 );
    if ( $hanya_beranda && ! is_front_page() ) {
        return;
    }

    $img_url  = get_option( 'edukarsa_popup_img', '' );
    $badge    = get_option( 'edukarsa_popup_badge', '' );
    $title    = get_option( 'edukarsa_popup_title', '' );
    $desc     = get_option( 'edukarsa_popup_desc', '' );
    $btn_text = get_option( 'edukarsa_popup_btn_text', '' );
    $btn_url  = get_option( 'edukarsa_popup_btn_url', '' );
    $delay    = intval( get_option( 'edukarsa_popup_delay', 2 ) );
    if ( $delay < 0 ) {
        $delay = 1;
    }

    // Jika tidak ada gambar dan tidak ada judul, hentikan render
    if ( empty( $img_url ) && empty( $title ) ) {
        return;
    }
    ?>
    <!-- NATIVE POP-UP FLYER MODAL EDUKARSA -->
    <div id="edukarsa-popup-overlay" class="edukarsa-popup-overlay" role="dialog" aria-modal="true" aria-hidden="true">
        <div class="edukarsa-popup-card">
            <button type="button" class="edukarsa-popup-close" id="edukarsa-popup-close" aria-label="<?php echo esc_attr( edukarsa_t( 'Tutup Pop-up', 'Close Popup' ) ); ?>" title="<?php echo esc_attr( edukarsa_t( 'Tutup', 'Close' ) ); ?>">&times;</button>
            
            <div class="edukarsa-popup-content">
                <?php if ( ! empty( $img_url ) ) : ?>
                    <div class="edukarsa-popup-media">
                        <?php if ( ! empty( $btn_url ) ) : ?>
                            <a href="<?php echo esc_url( $btn_url ); ?>" class="edukarsa-popup-img-link">
                                <img src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $title ? $title : 'Flyer Pengumuman' ); ?>" loading="lazy">
                            </a>
                        <?php else : ?>
                            <img src="<?php echo esc_url( $img_url ); ?>" alt="<?php echo esc_attr( $title ? $title : 'Flyer Pengumuman' ); ?>" loading="lazy">
                        <?php endif; ?>
                    </div>
                <?php endif; ?>

                <?php if ( ! empty( $badge ) || ! empty( $title ) || ! empty( $desc ) || ( ! empty( $btn_text ) && ! empty( $btn_url ) ) ) : ?>
                    <div class="edukarsa-popup-details">
                        <?php if ( ! empty( $badge ) ) : ?>
                            <span class="edukarsa-popup-badge"><?php echo esc_html( $badge ); ?></span>
                        <?php endif; ?>

                        <?php if ( ! empty( $title ) ) : ?>
                            <h3 class="edukarsa-popup-heading"><?php echo esc_html( $title ); ?></h3>
                        <?php endif; ?>

                        <?php if ( ! empty( $desc ) ) : ?>
                            <div class="edukarsa-popup-desc">
                                <?php echo nl2br( esc_html( $desc ) ); ?>
                            </div>
                        <?php endif; ?>

                        <?php if ( ! empty( $btn_text ) && ! empty( $btn_url ) ) : ?>
                            <div class="edukarsa-popup-action">
                                <a href="<?php echo esc_url( $btn_url ); ?>" class="btn-primary edukarsa-popup-btn">
                                    <?php echo esc_html( $btn_text ); ?> &raquo;
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var popupOverlay = document.getElementById("edukarsa-popup-overlay");
        var popupClose   = document.getElementById("edukarsa-popup-close");
        if (!popupOverlay) return;

        // Cek parameter preview admin (?preview_popup=1) untuk bypass session
        var urlParams = new URLSearchParams(window.location.search);
        var isPreview = urlParams.get("preview_popup") === "1";

        // Cek apakah sudah pernah ditutup dalam sesi peramban ini
        var isDismissed = sessionStorage.getItem("edukarsa_popup_dismissed");
        if (!isPreview && isDismissed === "1") return;

        var delayMs = <?php echo ( $delay * 1000 ); ?>;

        setTimeout(function() {
            popupOverlay.classList.add("is-visible");
            popupOverlay.setAttribute("aria-hidden", "false");
            document.body.classList.add("edukarsa-popup-open");
        }, delayMs);

        function closePopup() {
            popupOverlay.classList.remove("is-visible");
            popupOverlay.setAttribute("aria-hidden", "true");
            document.body.classList.remove("edukarsa-popup-open");
            sessionStorage.setItem("edukarsa_popup_dismissed", "1");
        }

        if (popupClose) {
            popupClose.addEventListener("click", closePopup);
        }

        popupOverlay.addEventListener("click", function(e) {
            if (e.target === popupOverlay) {
                closePopup();
            }
        });

        document.addEventListener("keydown", function(e) {
            if (e.key === "Escape" && popupOverlay.classList.contains("is-visible")) {
                closePopup();
            }
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'edukarsa_render_popup_flyer', 50 );