154 lines
4 KiB
PHP
154 lines
4 KiB
PHP
|
|
<?php if ( ! defined( 'ABSPATH' ) ) exit;
|
||
|
|
/**
|
||
|
|
* Adds Ninja Forms widget.
|
||
|
|
*/
|
||
|
|
class NF_FormBlock {
|
||
|
|
/**
|
||
|
|
* Register widget with WordPress.
|
||
|
|
*/
|
||
|
|
public function __construct() {
|
||
|
|
add_action( 'ninja_forms_loaded', array($this, 'nf_form_block_load' ) );
|
||
|
|
// load the preview information and form
|
||
|
|
add_action( 'wp_head', array( $this, 'load_preview_data' ) );
|
||
|
|
// load the iframe containing the iframe
|
||
|
|
// add_action( 'init', array( $this, 'load_preview_iframe' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
function nf_form_block_load() {
|
||
|
|
// wait for Gutenberg to enqueue it's block assets
|
||
|
|
add_action( 'enqueue_block_editor_assets', array ( $this, 'nf_form_block' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
function nf_form_block() {
|
||
|
|
|
||
|
|
$js_dir = Ninja_Forms::$url . 'assets/js/min/';
|
||
|
|
$css_dir = Ninja_Forms::$url . 'assets/css/';
|
||
|
|
|
||
|
|
// Once we have Gutenberg block javascript, we can enqueue our assets
|
||
|
|
wp_register_script(
|
||
|
|
'ninja-forms-block',
|
||
|
|
$js_dir . 'block.js',
|
||
|
|
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'underscore' )
|
||
|
|
);
|
||
|
|
|
||
|
|
wp_register_style(
|
||
|
|
'ninja-forms-block-style',
|
||
|
|
$css_dir . 'nf-form-block-style.css',
|
||
|
|
array( 'wp-edit-blocks' )
|
||
|
|
);
|
||
|
|
wp_register_style(
|
||
|
|
'ninja-forms-block-editor',
|
||
|
|
$css_dir . 'nf-form-block-editor.css',
|
||
|
|
array( 'wp-edit-blocks', 'form-blocks-style' )
|
||
|
|
);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* we need to get our forms so that the block can build a dropdown
|
||
|
|
* with the forms
|
||
|
|
* */
|
||
|
|
wp_enqueue_script( 'ninja-forms-block' );
|
||
|
|
|
||
|
|
$forms = array();
|
||
|
|
|
||
|
|
foreach( Ninja_Forms()->form()->get_forms() as $form ){
|
||
|
|
$forms[] = array (
|
||
|
|
'value' => $form->get_id(),
|
||
|
|
'label' => $form->get_setting( 'title' ),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
$block_logo = NF_PLUGIN_URL . 'assets/img/nf-logo-dashboard.png';
|
||
|
|
$thumbnail_logo = NF_PLUGIN_URL . 'assets/img/ninja-forms-app-header-logo.png';
|
||
|
|
|
||
|
|
wp_localize_script( 'ninja-forms-block', 'ninjaFormsBlock', array(
|
||
|
|
'forms' => $forms,
|
||
|
|
'siteUrl' => get_site_url(),
|
||
|
|
'block_logo' => $block_logo,
|
||
|
|
'thumbnail_logo' => $thumbnail_logo
|
||
|
|
) );
|
||
|
|
wp_enqueue_style( 'ninja-forms-block-style' );
|
||
|
|
wp_enqueue_style( 'ninja-forms-block-editor' );
|
||
|
|
}
|
||
|
|
|
||
|
|
public function load_preview_data() {
|
||
|
|
// check for preview and iframe get parameters
|
||
|
|
if( isset( $_GET[ 'nf_preview_form' ] ) && isset( $_GET[ 'nf_iframe' ] ) ){
|
||
|
|
$form_id = intval( $_GET[ 'nf_preview_form' ] );
|
||
|
|
// Style below: update width and height for particular form
|
||
|
|
?>
|
||
|
|
<style media="screen">
|
||
|
|
#wpadminbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#nf-form-<?php echo $form_id; ?>-cont {
|
||
|
|
z-index: 9001;
|
||
|
|
position: fixed;
|
||
|
|
top: 0; left: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: white;
|
||
|
|
/* overflow-x: hidden; */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
jQuery(document).on( 'nfFormReady', function(){
|
||
|
|
var frameEl = window.frameElement;
|
||
|
|
|
||
|
|
// get the form element
|
||
|
|
var $form = jQuery("#nf-form-<?php echo $form_id; ?>-cont");
|
||
|
|
// get the height of the form
|
||
|
|
var height = $form.find( '.ninja-forms-form-wrap' ).outerHeight(true);
|
||
|
|
|
||
|
|
if (frameEl) {
|
||
|
|
// add 75 to height b/c the submit button was missing
|
||
|
|
frameEl.height = height + 75;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<?php
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
public function load_preview_iframe() {
|
||
|
|
if( ! isset( $_GET[ 'form_preview_iframe' ] ) ) return;
|
||
|
|
|
||
|
|
// Style below: set styling for iframe
|
||
|
|
?>
|
||
|
|
<style media="screen">
|
||
|
|
.iframe-container {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.iframe-overlay {
|
||
|
|
position: absolute;
|
||
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="iframe-container">
|
||
|
|
<div class="iframe-overlay"></div>
|
||
|
|
<iframe
|
||
|
|
id="idIframe"
|
||
|
|
src="/?nf_preview_form=1&nf_iframe"
|
||
|
|
frameborder="0"
|
||
|
|
width="100%"
|
||
|
|
onload="iframeLoaded()"
|
||
|
|
></iframe>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function iframeLoaded() {
|
||
|
|
var iFrameID = document.getElementById('idIframe');
|
||
|
|
if(iFrameID) {
|
||
|
|
var target = iFrameID.contentWindow.document.getElementById('nf-form-1-cont');
|
||
|
|
|
||
|
|
// here you can make the height, I delete it first, then I make it again
|
||
|
|
iFrameID.height = "";
|
||
|
|
// set initial iFrame height
|
||
|
|
iFrameID.height = target.scrollHeight;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<?php
|
||
|
|
exit();
|
||
|
|
}
|
||
|
|
}
|