AddFormModal.php 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <?php
  2. /**
  3. * Add a button to tinyMCE editors when eidting posts/pages.
  4. *
  5. * @since 2.9.22
  6. */
  7. class NF_Admin_AddFormModal {
  8. function __construct() {
  9. // Add a tinyMCE button to our post and page editor
  10. add_filter( 'media_buttons_context', array( $this, 'insert_form_tinymce_buttons' ) );
  11. }
  12. /**
  13. * Output our tinyMCE field buttons
  14. *
  15. * @access public
  16. * @since 2.8
  17. * @return void
  18. */
  19. public function insert_form_tinymce_buttons( $context ) {
  20. global $pagenow;
  21. if( ! in_array( $pagenow, array( 'post.php', 'post-new.php' ) ) ){
  22. return $context;
  23. }
  24. $html = '<style>
  25. span.nf-insert-form {
  26. color:#888;
  27. font: 400 18px/1 dashicons;
  28. -webkit-font-smoothing: antialiased;
  29. -moz-osx-font-smoothing: grayscale;
  30. display: inline-block;
  31. width: 18px;
  32. height: 18px;
  33. vertical-align: text-top;
  34. margin: 0 2px 0 0;
  35. }
  36. .ui-autocomplete li {
  37. white-space: normal;
  38. }
  39. </style>';
  40. $html .= '<a href="#" class="button nf-insert-form"><span class="nf-insert-form dashicons dashicons-feedback"></span> ' . __( 'Add Form', 'ninja-forms' ) . '</a>';
  41. 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' ) );
  42. wp_enqueue_script( 'jBox', Ninja_Forms::$url . 'assets/js/lib/jBox.min.js', array( 'jquery' ) );
  43. wp_enqueue_style( 'jBox', Ninja_Forms::$url . 'assets/css/jBox.css' );
  44. // wp_enqueue_style( 'jquery-smoothness', NINJA_FORMS_URL .'css/smoothness/jquery-smoothness.css' );
  45. ?>
  46. <div id="nf-insert-form-modal" style="display:none;">
  47. <p>
  48. <?php
  49. global $wpdb;
  50. $all_forms = $wpdb->get_results( 'SELECT id, title FROM `' . $wpdb->prefix
  51. . 'nf3_forms` ORDER BY title' );
  52. // $all_forms = Ninja_Forms()->form()->get_forms();
  53. // $first_option = __( 'Select a form or type to search', 'ninja-forms' );
  54. echo '<select class="nf-forms-combobox" id="nf-form-select" data-first-option="">';
  55. echo '<option value=""></option>';
  56. foreach( $all_forms as $form ) {
  57. $label = $form->title;
  58. $form_id = $form->id;
  59. if ( strlen( $label ) > 30 )
  60. $label = substr( $label, 0, 30 ) . '...';
  61. echo '<option value="' . intval( $form_id ) . '">' . $label . ' - ID: ' . $form_id . '</option>';
  62. }
  63. echo '</select>';
  64. ?>
  65. </p>
  66. <p>
  67. <input type="button" id="nf-insert-form" class="button-primary" value="<?php _e( 'Insert', 'ninja-forms' )?>" />
  68. </p>
  69. </div>
  70. <?php
  71. add_action( 'admin_footer', array( $this, 'output_tinymce_button_js' ) );
  72. return $context . ' ' . $html;
  73. }
  74. /**
  75. * Output our tinyMCE field buttons
  76. *
  77. * @access public
  78. * @since 2.8
  79. * @return void
  80. */
  81. public function output_tinymce_button_js( $context ) {
  82. ?>
  83. <script type="text/javascript">
  84. jQuery( document ).ready( function( $ ) {
  85. var jBox = jQuery( '.nf-insert-form' ).jBox( 'Modal', {
  86. title: '<?php _e( 'Insert Form', 'ninja-forms' )?>',
  87. position: {
  88. x: 'center',
  89. y: 'center'
  90. },
  91. closeButton: 'title',
  92. closeOnClick: 'overlay',
  93. closeOnEsc: true,
  94. // theme: 'TooltipBorder',
  95. content: jQuery( '#nf-insert-form-modal' ),
  96. onOpen: function() {
  97. jQuery( '.nf-forms-combobox' ).combobox();
  98. jQuery( this )[0].content.find( '.ui-autocomplete-input' ).attr( 'placeholder', '<?php _e( 'Select a form or type to search', 'ninja-forms' )?>' )
  99. .css( 'margin-right', 0 );
  100. jQuery( this )[0].content.find( '.ui-combobox-button' ).css( 'position', 'relative' ).css( 'top', '-3px' );
  101. jQuery( this )[0].content.find( 'ul.ui-autocomplete' ).css( 'max-height', '175px' ).css( 'overflow', 'scroll' );
  102. jQuery( this )[0].content.css( 'overflow', 'visible' );
  103. jQuery( this )[0].content.find( '.ui-icon-triangle-1-s' ).addClass( 'dashicons dashicons-arrow-down' ).css( 'margin-left', '-3px' );
  104. },
  105. onClose: function() {
  106. jQuery( '.nf-forms-combobox' ).combobox( 'destroy' );
  107. }
  108. });
  109. jQuery( document ).on( 'click', '#nf-insert-form', function( e ) {
  110. e.preventDefault();
  111. var form_id = jQuery( '#nf-form-select' ).val();
  112. var shortcode = '[ninja_form id=' + form_id + ']';
  113. window.parent.send_to_editor( shortcode );
  114. jBox.close();
  115. jQuery( '#nf-form-select' ).val( '' );
  116. } );
  117. } );
  118. </script>
  119. <?php
  120. }
  121. }