NF_Admin_AddFormModal

Add a button to tinyMCE editors when eidting posts/pages.

Defined (2)

The class is defined in the following location(s).

/deprecated/classes/add-form-modal.php  
  1. class NF_Admin_AddFormModal { 
  2.  
  3. function __construct() { 
  4. // Add a tinyMCE button to our post and page editor 
  5. add_filter( 'media_buttons_context', array( $this, 'insert_form_tinymce_buttons' ) ); 
  6.  
  7. /** 
  8. * Output our tinyMCE field buttons 
  9. * @access public 
  10. * @since 2.8 
  11. * @return void 
  12. */ 
  13. public function insert_form_tinymce_buttons( $context ) { 
  14. global $pagenow; 
  15.  
  16. if ( 'post.php' != $pagenow ) { 
  17. return $context; 
  18. $html = '<style> 
  19. span.nf-insert-form { 
  20. color:#888; 
  21. font: 400 18px/1 dashicons; 
  22. -webkit-font-smoothing: antialiased; 
  23. -moz-osx-font-smoothing: grayscale; 
  24. display: inline-block; 
  25. width: 18px; 
  26. height: 18px; 
  27. vertical-align: text-top; 
  28. margin: 0 2px 0 0; 
  29. </style>'; 
  30. $html .= '<a href="#" class="button-secondary nf-insert-form"><span class="nf-insert-form dashicons dashicons-feedback"></span> ' . __( 'Add Form', 'ninja-forms' ) . '</a>'; 
  31.  
  32. wp_enqueue_script( 'nf-combobox',  
  33. NF_PLUGIN_URL . 'assets/js/min/combobox.min.js',  
  34. array( 'jquery', 'jquery-ui-core', 'jquery-ui-button', 'jquery-ui-autocomplete', 'nf-admin-modal' ) ); 
  35.  
  36. wp_enqueue_style( 'nf-combobox',  
  37. NF_PLUGIN_URL . 'assets/css/combobox.css' ); 
  38.  
  39. wp_enqueue_style( 'nf-admin-modal',  
  40. NF_PLUGIN_URL . 'assets/css/admin-modal.css' ); 
  41.  
  42. wp_enqueue_style( 'jquery-smoothness', NINJA_FORMS_URL .'css/smoothness/jquery-smoothness.css' ); 
  43.  
  44. add_action( 'admin_footer', array( $this, 'output_tinymce_button_js' ) ); 
  45. return $context . ' ' . $html; 
  46.  
  47. /** 
  48. * Output our tinyMCE field buttons 
  49. * @access public 
  50. * @since 2.8 
  51. * @return void 
  52. */ 
  53. public function output_tinymce_button_js( $context ) { 
  54. ?> 
  55. <div id="nf-insert-form-modal" style="height:350px;"> 
  56. <p> 
  57. <?php 
  58. $all_forms = Ninja_Forms()->forms()->get_all(); 
  59. $first_option = __( 'Select a form or type to search', 'ninja-forms' ); 
  60. echo '<select class="nf-forms-combobox" id="nf_form_select" data-first-option="' . $first_option . '">'; 
  61. echo '<option value="">' . $first_option .'</option>'; 
  62. foreach( $all_forms as $form_id ) { 
  63. $label = esc_html( Ninja_Forms()->form( $form_id )->get_setting( 'form_title' ) ); 
  64. if ( strlen( $label ) > 30 ) 
  65. $label = substr( $label, 0, 30 ) . '...'; 
  66.  
  67. echo '<option value="' . $form_id . '">' . $label . ' - ID: ' . $form_id . '</option>'; 
  68. echo '</select>'; 
  69. ?> 
  70. </p> 
  71. </div> 
  72.  
  73. <div id="nf-insert-form-buttons"> 
  74. <div id="nf-admin-modal-cancel"> 
  75. <a class="submitdelete deletion modal-close" href="#"><?php _e( 'Cancel', 'ninja-forms' ); ?></a> 
  76. </div> 
  77. <div id="nf-admin-modal-update"> 
  78. <a class="button-primary" id="nf-insert-form" href="#"><?php _e( 'Insert', 'ninja-forms' ); ?></a> 
  79. </div> 
  80. </div> 
  81.  
  82. <script type="text/javascript"> 
  83. jQuery( document ).ready( function( $ ) { 
  84.  
  85. $( '#nf-insert-form-modal' ).nfAdminModal( { title: '<?php _e( "Add Form", "ninja-forms" ); ?>', buttons: '#nf-insert-form-buttons', backgroundClose: true } ); 
  86. $( document ).on( 'click', '.nf-insert-form', function( e ) { 
  87. e.preventDefault(); 
  88. $( '#nf-insert-form-modal' ).nfAdminModal( 'open' ); 
  89. $( '.nf-forms-combobox' ).combobox(); 
  90. $( '#nf-admin-modal-content .ui-autocomplete-input' ).focus().select(); 
  91. } ); 
  92.  
  93. $( document ).on( 'click', '#nf-insert-form', function( e ) { 
  94. e.preventDefault(); 
  95. var form_id = $( this ).parent().parent().parent().find( '#nf_form_select' ).val(); 
  96. var shortcode = '[ninja_form id=' + form_id + ']'; 
  97. window.parent.send_to_editor( shortcode ); 
  98. $.fn.nfAdminModal.close(); 
  99. } ); 
  100.  
  101. $( document ).on( 'nfAdminModalClose.destroyCombo', function( e ) { 
  102. $( '.nf-forms-combobox' ).combobox( 'destroy' ); 
  103. } ); 
  104. } ); 
  105. </script> 
  106. <?php 
/includes/Admin/AddFormModal.php  
  1. class NF_Admin_AddFormModal { 
  2.  
  3. function __construct() { 
  4. // Add a tinyMCE button to our post and page editor 
  5. add_filter( 'media_buttons_context', array( $this, 'insert_form_tinymce_buttons' ) ); 
  6.  
  7. /** 
  8. * Output our tinyMCE field buttons 
  9. * @access public 
  10. * @since 2.8 
  11. * @return void 
  12. */ 
  13. public function insert_form_tinymce_buttons( $context ) { 
  14. global $pagenow; 
  15.  
  16. if ( 'post.php' != $pagenow ) { 
  17. return $context; 
  18. $html = '<style> 
  19. span.nf-insert-form { 
  20. color:#888; 
  21. font: 400 18px/1 dashicons; 
  22. -webkit-font-smoothing: antialiased; 
  23. -moz-osx-font-smoothing: grayscale; 
  24. display: inline-block; 
  25. width: 18px; 
  26. height: 18px; 
  27. vertical-align: text-top; 
  28. margin: 0 2px 0 0; 
  29. </style>'; 
  30. $html .= '<a href="#" class="button-secondary nf-insert-form"><span class="nf-insert-form dashicons dashicons-feedback"></span> ' . __( 'Add Form', 'ninja-forms' ) . '</a>'; 
  31.  
  32. wp_enqueue_script( 'nf-combobox', Ninja_Forms::$url . 'assets/js/lib/combobox.min.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-button', 'jquery-ui-autocomplete' ) ); 
  33. wp_enqueue_script( 'jBox', Ninja_Forms::$url . 'assets/js/lib/jBox.min.js', array( 'jquery' ) ); 
  34.  
  35. wp_enqueue_style( 'nf-combobox', Ninja_Forms::$url . 'assets/css/combobox.css' ); 
  36. wp_enqueue_style( 'jBox', Ninja_Forms::$url . 'assets/css/jBox.css' ); 
  37.  
  38. // wp_enqueue_style( 'jquery-smoothness', NINJA_FORMS_URL .'css/smoothness/jquery-smoothness.css' ); 
  39. ?> 
  40. <div id="nf-insert-form-modal" style="display:none;"> 
  41. <p> 
  42. <?php 
  43. $all_forms = Ninja_Forms()->form()->get_forms(); 
  44. $first_option = __( 'Select a form or type to search', 'ninja-forms' ); 
  45. echo '<select class="nf-forms-combobox" id="nf-form-select" data-first-option="">'; 
  46. echo '<option value=""></option>'; 
  47. foreach( $all_forms as $form ) { 
  48. // $form = Ninja_Forms()->form( $form_id )->get(); 
  49. $label = $form->get_setting( 'title' ); 
  50. $form_id = $form->get_id(); 
  51. if ( strlen( $label ) > 30 ) 
  52. $label = substr( $label, 0, 30 ) . '...'; 
  53.  
  54. echo '<option value="' . $form_id . '">' . $label . ' - ID: ' . $form_id . '</option>'; 
  55. echo '</select>'; 
  56. ?> 
  57. </p> 
  58. <p> 
  59. <input type="button" id="nf-insert-form" class="button-primary" value="Insert" /> 
  60. </p> 
  61. </div> 
  62. <?php 
  63. add_action( 'admin_footer', array( $this, 'output_tinymce_button_js' ) ); 
  64. return $context . ' ' . $html; 
  65.  
  66. /** 
  67. * Output our tinyMCE field buttons 
  68. * @access public 
  69. * @since 2.8 
  70. * @return void 
  71. */ 
  72. public function output_tinymce_button_js( $context ) { 
  73. ?> 
  74. <script type="text/javascript"> 
  75. jQuery( document ).ready( function( $ ) { 
  76. var jBox = jQuery( '.nf-insert-form' ).jBox( 'Modal', { 
  77. title: 'Insert Form',  
  78. position: { 
  79. x: 'center',  
  80. y: 'center' 
  81. },  
  82. closeButton: 'title',  
  83. closeOnClick: 'overlay',  
  84. closeOnEsc: true,  
  85. // theme: 'TooltipBorder',  
  86. content: jQuery( '#nf-insert-form-modal' ),  
  87. onOpen: function() { 
  88. jQuery( '.nf-forms-combobox' ).combobox(); 
  89. jQuery( this )[0].content.find( '.ui-autocomplete-input' ).attr( 'placeholder', 'Select a form or type to search' ); 
  90. jQuery( this )[0].content.css( 'overflow', 'visible' ); 
  91. jQuery( this )[0].content.find( '.ui-icon-triangle-1-s' ).addClass( 'dashicons dashicons-arrow-down' ).css( 'margin-left', '-7px' ); 
  92. },  
  93. onClose: function() { 
  94. jQuery( '.nf-forms-combobox' ).combobox( 'destroy' ); 
  95. }); 
  96.  
  97. jQuery( document ).on( 'click', '#nf-insert-form', function( e ) { 
  98. e.preventDefault(); 
  99. var form_id = jQuery( '#nf-form-select' ).val(); 
  100. var shortcode = '[ninja_form id=' + form_id + ']'; 
  101. window.parent.send_to_editor( shortcode ); 
  102. jBox.close(); 
  103. jQuery( '#nf-form-select' ).val( '' ); 
  104. } ); 
  105. } ); 
  106. </script> 
  107.  
  108. <?php