| 1 |
/* global charitable_admin_splash_data, ajaxurl */ |
| 2 |
/** |
| 3 |
* Charitable Admin Splash. |
| 4 |
* |
| 5 |
* @since 1.8.6 |
| 6 |
*/ |
| 7 |
const CharitableAdminSplash = window.CharitableAdminSplash || ( function( document, window, $ ) { |
| 8 |
/** |
| 9 |
* Public functions and properties. |
| 10 |
* |
| 11 |
* @since 1.8.6 |
| 12 |
* |
| 13 |
* @type {Object} |
| 14 |
*/ |
| 15 |
const app = { |
| 16 |
|
| 17 |
/** |
| 18 |
* Initialize. |
| 19 |
* |
| 20 |
* @since 1.8.6 |
| 21 |
*/ |
| 22 |
init() { |
| 23 |
$( app.ready ); |
| 24 |
}, |
| 25 |
|
| 26 |
/** |
| 27 |
* Document ready. |
| 28 |
* |
| 29 |
* @since 1.8.6 |
| 30 |
*/ |
| 31 |
ready() { |
| 32 |
app.events(); |
| 33 |
|
| 34 |
if ( charitable_admin_splash_data.triggerForceOpen ) { |
| 35 |
app.openModal(); |
| 36 |
} |
| 37 |
}, |
| 38 |
|
| 39 |
/** |
| 40 |
* Events. |
| 41 |
* |
| 42 |
* @since 1.8.6 |
| 43 |
*/ |
| 44 |
events() { |
| 45 |
$( document ) |
| 46 |
.on( 'click', '.charitable-splash-modal-open', function( e ) { |
| 47 |
e.preventDefault(); |
| 48 |
app.openModal(); |
| 49 |
} ) |
| 50 |
.on( 'click', '.charitable-splash-video-embed[data-vimeo-id]', function( e ) { |
| 51 |
e.preventDefault(); |
| 52 |
app.injectVideoEmbed( $( this ) ); |
| 53 |
} ); |
| 54 |
}, |
| 55 |
|
| 56 |
/** |
| 57 |
* Open the modal. |
| 58 |
* |
| 59 |
* @since 1.8.6 |
| 60 |
*/ |
| 61 |
openModal() { |
| 62 |
$.alert( { |
| 63 |
title: false, |
| 64 |
content: wp.template( 'charitable-splash-modal-content' )(), |
| 65 |
icon: false, |
| 66 |
closeIcon: true, |
| 67 |
boxWidth: '1000px', |
| 68 |
theme: 'modern', |
| 69 |
useBootstrap: false, |
| 70 |
scrollToPreviousElement: false, |
| 71 |
buttons: false, |
| 72 |
backgroundDismiss: true, |
| 73 |
offsetTop: 50, |
| 74 |
offsetBottom: 50, |
| 75 |
animation: 'opacity', |
| 76 |
closeAnimation: 'opacity', |
| 77 |
animateFromElement: false, |
| 78 |
onOpenBefore() { |
| 79 |
const scrollbarWidth = ( window.innerWidth - document.body.clientWidth ) + 'px'; |
| 80 |
|
| 81 |
$( 'body' ) |
| 82 |
.addClass( 'charitable-splash-modal' ) |
| 83 |
.css( '--charitable-body-scrollbar-width', scrollbarWidth ); |
| 84 |
|
| 85 |
$( '.charitable-challenge-popup-container' ).addClass( 'charitable-invisible' ); |
| 86 |
|
| 87 |
setTimeout( () => { |
| 88 |
if ( navigator.userAgent.includes( 'Safari' ) && ! navigator.userAgent.includes( 'Chrome' ) ) { |
| 89 |
$( 'html, body' ).animate( { scrollTop: 0 }, 0 ); |
| 90 |
} |
| 91 |
|
| 92 |
$( '.jconfirm-box-container' ) |
| 93 |
.css( 'padding-top', '50px' ) |
| 94 |
.animate( { opacity: 1 }, 30 ); |
| 95 |
}, 0 ); |
| 96 |
}, |
| 97 |
onOpen() { |
| 98 |
$( '.jconfirm' ).css( 'bottom', 0 ); |
| 99 |
$( '.charitable-dash-widget-welcome-block' ).remove(); |
| 100 |
}, |
| 101 |
onDestroy() { |
| 102 |
$( 'body' ) |
| 103 |
.removeClass( 'charitable-splash-modal' ) |
| 104 |
.css( '--charitable-body-scrollbar-width', null ); |
| 105 |
}, |
| 106 |
} ); |
| 107 |
}, |
| 108 |
|
| 109 |
/** |
| 110 |
* Build the Vimeo iframe for one placeholder, on demand. |
| 111 |
* |
| 112 |
* Called on click, not when the modal opens. A Vimeo iframe loads Vimeo's |
| 113 |
* player script into wp-admin, so nothing should reach a third party until |
| 114 |
* the visitor asks to watch. |
| 115 |
* |
| 116 |
* The iframe is still built client-side rather than rendered by PHP, because |
| 117 |
* admin output filters can strip server-rendered iframes from the response. |
| 118 |
* |
| 119 |
* @since 1.8.10.6 |
| 120 |
* @since 1.8.13.1 Deferred behind a click. |
| 121 |
* |
| 122 |
* @param {jQuery} $el The placeholder element. |
| 123 |
*/ |
| 124 |
injectVideoEmbed( $el ) { |
| 125 |
if ( $el.children( 'iframe' ).length ) { |
| 126 |
return; |
| 127 |
} |
| 128 |
|
| 129 |
const id = String( $el.attr( 'data-vimeo-id' ) || '' ).replace( /[^0-9]/g, '' ); |
| 130 |
|
| 131 |
if ( ! id ) { |
| 132 |
return; |
| 133 |
} |
| 134 |
|
| 135 |
const title = $el.attr( 'data-video-title' ) || ''; |
| 136 |
const iframe = document.createElement( 'iframe' ); |
| 137 |
|
| 138 |
// autoplay=1 because this only runs from a click, so playing is the intent. |
| 139 |
iframe.src = 'https://player.vimeo.com/video/' + id + '?autoplay=1&muted=1&controls=1&dnt=1'; |
| 140 |
iframe.setAttribute( 'frameborder', '0' ); |
| 141 |
iframe.setAttribute( 'allow', 'autoplay; fullscreen; picture-in-picture' ); |
| 142 |
iframe.setAttribute( 'allowfullscreen', '' ); |
| 143 |
iframe.setAttribute( 'title', title ); |
| 144 |
|
| 145 |
$el |
| 146 |
.removeClass( 'charitable-splash-video-embed--deferred' ) |
| 147 |
.closest( '.charitable-splash-video-wrap' ) |
| 148 |
.removeClass( 'charitable-splash-video-wrap--deferred' ); |
| 149 |
|
| 150 |
$el.append( iframe ); |
| 151 |
}, |
| 152 |
}; |
| 153 |
|
| 154 |
// Provide access to public functions/properties. |
| 155 |
return app; |
| 156 |
}( document, window, jQuery ) ); |
| 157 |
|
| 158 |
CharitableAdminSplash.init(); |
| 159 |
|
