FormBlock.php 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <?php if ( ! defined( 'ABSPATH' ) ) exit;
  2. /**
  3. * Adds Ninja Forms widget.
  4. */
  5. class NF_FormBlock {
  6. /**
  7. * Register widget with WordPress.
  8. */
  9. public function __construct() {
  10. add_action( 'ninja_forms_loaded', array($this, 'nf_form_block_load' ) );
  11. // load the preview information and form
  12. add_action( 'wp_head', array( $this, 'load_preview_data' ) );
  13. // load the iframe containing the iframe
  14. // add_action( 'init', array( $this, 'load_preview_iframe' ) );
  15. }
  16. function nf_form_block_load() {
  17. // wait for Gutenberg to enqueue it's block assets
  18. add_action( 'enqueue_block_editor_assets', array ( $this, 'nf_form_block' ) );
  19. }
  20. function nf_form_block() {
  21. $js_dir = Ninja_Forms::$url . 'assets/js/min/';
  22. $css_dir = Ninja_Forms::$url . 'assets/css/';
  23. // Once we have Gutenberg block javascript, we can enqueue our assets
  24. wp_register_script(
  25. 'ninja-forms-block',
  26. $js_dir . 'block.js',
  27. array( 'wp-blocks', 'wp-i18n', 'wp-element', 'underscore' )
  28. );
  29. wp_register_style(
  30. 'ninja-forms-block-style',
  31. $css_dir . 'nf-form-block-style.css',
  32. array( 'wp-edit-blocks' )
  33. );
  34. wp_register_style(
  35. 'ninja-forms-block-editor',
  36. $css_dir . 'nf-form-block-editor.css',
  37. array( 'wp-edit-blocks', 'form-blocks-style' )
  38. );
  39. /**
  40. * we need to get our forms so that the block can build a dropdown
  41. * with the forms
  42. * */
  43. wp_enqueue_script( 'ninja-forms-block' );
  44. $forms = array();
  45. foreach( Ninja_Forms()->form()->get_forms() as $form ){
  46. $forms[] = array (
  47. 'value' => $form->get_id(),
  48. 'label' => $form->get_setting( 'title' ),
  49. );
  50. }
  51. $block_logo = NF_PLUGIN_URL . 'assets/img/nf-logo-dashboard.png';
  52. $thumbnail_logo = NF_PLUGIN_URL . 'assets/img/ninja-forms-app-header-logo.png';
  53. wp_localize_script( 'ninja-forms-block', 'ninjaFormsBlock', array(
  54. 'forms' => $forms,
  55. 'siteUrl' => get_site_url(),
  56. 'block_logo' => $block_logo,
  57. 'thumbnail_logo' => $thumbnail_logo
  58. ) );
  59. wp_enqueue_style( 'ninja-forms-block-style' );
  60. wp_enqueue_style( 'ninja-forms-block-editor' );
  61. }
  62. public function load_preview_data() {
  63. // check for preview and iframe get parameters
  64. if( isset( $_GET[ 'nf_preview_form' ] ) && isset( $_GET[ 'nf_iframe' ] ) ){
  65. $form_id = intval( $_GET[ 'nf_preview_form' ] );
  66. // Style below: update width and height for particular form
  67. ?>
  68. <style media="screen">
  69. #wpadminbar {
  70. display: none;
  71. }
  72. #nf-form-<?php echo $form_id; ?>-cont {
  73. z-index: 9001;
  74. position: fixed;
  75. top: 0; left: 0;
  76. width: 100vw;
  77. height: 100vh;
  78. background-color: white;
  79. /* overflow-x: hidden; */
  80. }
  81. </style>
  82. <script type="text/javascript">
  83. jQuery(document).on( 'nfFormReady', function(){
  84. var frameEl = window.frameElement;
  85. // get the form element
  86. var $form = jQuery("#nf-form-<?php echo $form_id; ?>-cont");
  87. // get the height of the form
  88. var height = $form.find( '.ninja-forms-form-wrap' ).outerHeight(true);
  89. if (frameEl) {
  90. // add 75 to height b/c the submit button was missing
  91. frameEl.height = height + 75;
  92. }
  93. });
  94. </script>
  95. <?php
  96. }
  97. }
  98. public function load_preview_iframe() {
  99. if( ! isset( $_GET[ 'form_preview_iframe' ] ) ) return;
  100. // Style below: set styling for iframe
  101. ?>
  102. <style media="screen">
  103. .iframe-container {
  104. position: relative;
  105. }
  106. .iframe-overlay {
  107. position: absolute;
  108. top: 0; right: 0; bottom: 0; left: 0;
  109. }
  110. </style>
  111. <div class="iframe-container">
  112. <div class="iframe-overlay"></div>
  113. <iframe
  114. id="idIframe"
  115. src="/?nf_preview_form=1&nf_iframe"
  116. frameborder="0"
  117. width="100%"
  118. onload="iframeLoaded()"
  119. ></iframe>
  120. </div>
  121. <script type="text/javascript">
  122. function iframeLoaded() {
  123. var iFrameID = document.getElementById('idIframe');
  124. if(iFrameID) {
  125. var target = iFrameID.contentWindow.document.getElementById('nf-form-1-cont');
  126. // here you can make the height, I delete it first, then I make it again
  127. iFrameID.height = "";
  128. // set initial iFrame height
  129. iFrameID.height = target.scrollHeight;
  130. }
  131. }
  132. </script>
  133. <?php
  134. exit();
  135. }
  136. }