Ei kuvausta

class-editor.php 9.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <?php
  2. /**
  3. * Functionality related to the admin TinyMCE editor.
  4. *
  5. * @since 1.0.0
  6. */
  7. class WPForms_Admin_Editor {
  8. /**
  9. * Primary class constructor.
  10. *
  11. * @since 1.0.0
  12. */
  13. public function __construct() {
  14. add_action( 'media_buttons', array( $this, 'media_button' ), 15 );
  15. }
  16. /**
  17. * Allow easy shortcode insertion via a custom media button.
  18. *
  19. * @since 1.0.0
  20. *
  21. * @param string $editor_id
  22. */
  23. public function media_button( $editor_id ) {
  24. if ( ! \wpforms_current_user_can( 'view_forms' ) ) {
  25. return;
  26. }
  27. // Provide the ability to conditionally disable the button, so it can be
  28. // disabled for custom fields or front-end use such as bbPress. We default
  29. // to only showing within the post editor page.
  30. if ( ! apply_filters( 'wpforms_display_media_button', $this->is_post_editor_page(), $editor_id ) ) {
  31. return;
  32. }
  33. // Setup the icon - currently using a dashicon.
  34. $icon = '<span class="wp-media-buttons-icon wpforms-menu-icon" style="font-size:16px;margin-top:-2px;"><svg width="18" height="18" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M643 911v128h-252v-128h252zm0-255v127h-252v-127h252zm758 511v128h-341v-128h341zm0-256v128h-672v-128h672zm0-255v127h-672v-127h672zm135 860v-1240q0-8-6-14t-14-6h-32l-378 256-210-171-210 171-378-256h-32q-8 0-14 6t-6 14v1240q0 8 6 14t14 6h1240q8 0 14-6t6-14zm-855-1110l185-150h-406zm430 0l221-150h-406zm553-130v1240q0 62-43 105t-105 43h-1240q-62 0-105-43t-43-105v-1240q0-62 43-105t105-43h1240q62 0 105 43t43 105z" fill="#82878c"/></svg></span>';
  35. printf(
  36. '<a href="#" class="button wpforms-insert-form-button" data-editor="%s" title="%s">%s %s</a>',
  37. esc_attr( $editor_id ),
  38. esc_attr__( 'Add Form', 'wpforms-lite' ),
  39. $icon,
  40. esc_html__( 'Add Form', 'wpforms-lite' )
  41. );
  42. // If we have made it this far then load the JS.
  43. wp_enqueue_script( 'wpforms-editor', WPFORMS_PLUGIN_URL . 'assets/js/admin-editor.js', array( 'jquery' ), WPFORMS_VERSION, true );
  44. add_action( 'admin_footer', array( $this, 'shortcode_modal' ) );
  45. }
  46. /**
  47. * Check if we are on the post editor admin page.
  48. *
  49. * @since 1.6.2
  50. *
  51. * @returns boolean True if it is post editor admin page.
  52. */
  53. public function is_post_editor_page() {
  54. if ( ! is_admin() ) {
  55. return false;
  56. }
  57. // get_current_screen() is loaded after 'admin_init' hook and may not exist yet.
  58. if ( ! function_exists( 'get_current_screen' ) ) {
  59. return false;
  60. }
  61. $screen = get_current_screen();
  62. return $screen !== null && $screen->parent_base === 'edit';
  63. }
  64. /**
  65. * Modal window for inserting the form shortcode into TinyMCE.
  66. *
  67. * Thickbox is old and busted so we don't use that. Creating a custom view in
  68. * Backbone would make me pull my hair out. So instead we offer a small clean
  69. * modal that is based off of the WordPress insert link modal.
  70. *
  71. * @since 1.0.0
  72. */
  73. public function shortcode_modal() {
  74. ?>
  75. <div id="wpforms-modal-backdrop" style="display: none"></div>
  76. <div id="wpforms-modal-wrap" style="display: none">
  77. <form id="wpforms-modal" tabindex="-1">
  78. <div id="wpforms-modal-title">
  79. <?php esc_html_e( 'Insert Form', 'wpforms-lite' ); ?>
  80. <button type="button" id="wpforms-modal-close"><span class="screen-reader-text"><?php esc_html_e( 'Close', 'wpforms-lite' ); ?></span></button>
  81. </div>
  82. <div id="wpforms-modal-inner">
  83. <div id="wpforms-modal-options">
  84. <?php
  85. echo '<p id="wpforms-modal-notice">';
  86. printf(
  87. wp_kses( /* translators: %s - WPForms documentation URL. */
  88. __( 'Heads up! Don\'t forget to test your form. <a href="%s" target="_blank" rel="noopener noreferrer">Check out our complete guide</a>!', 'wpforms-lite' ),
  89. array(
  90. 'a' => array(
  91. 'href' => array(),
  92. 'rel' => array(),
  93. 'target' => array(),
  94. ),
  95. )
  96. ),
  97. 'https://wpforms.com/docs/how-to-properly-test-your-wordpress-forms-before-launching-checklist/'
  98. );
  99. echo '</p>';
  100. $args = apply_filters( 'wpforms_modal_select', array() );
  101. $forms = wpforms()->form->get( '', $args );
  102. if ( ! empty( $forms ) ) {
  103. printf( '<p><label for="wpforms-modal-select-form">%s</label></p>', esc_html__( 'Select a form below to insert', 'wpforms-lite' ) );
  104. echo '<select id="wpforms-modal-select-form">';
  105. foreach ( $forms as $form ) {
  106. printf( '<option value="%d">%s</option>', $form->ID, esc_html( $form->post_title ) );
  107. }
  108. echo '</select><br>';
  109. printf( '<p class="wpforms-modal-inline"><input type="checkbox" id="wpforms-modal-checkbox-title"><label for="wpforms-modal-checkbox-title">%s</label></p>', esc_html__( 'Show form name', 'wpforms-lite' ) );
  110. printf( '<p class="wpforms-modal-inline"><input type="checkbox" id="wpforms-modal-checkbox-description"><label for="wpforms-modal-checkbox-description">%s</label></p>', esc_html__( 'Show form description', 'wpforms-lite' ) );
  111. } else {
  112. echo '<p>';
  113. printf(
  114. wp_kses(
  115. /* translators: %s - WPForms Builder page. */
  116. __( 'Whoops, you haven\'t created a form yet. Want to <a href="%s">give it a go</a>?', 'wpforms-lite' ),
  117. array(
  118. 'a' => array(
  119. 'href' => array(),
  120. ),
  121. )
  122. ),
  123. admin_url( 'admin.php?page=wpforms-builder' )
  124. );
  125. echo '</p>';
  126. }
  127. ?>
  128. </div>
  129. </div>
  130. <div class="submitbox">
  131. <div id="wpforms-modal-cancel">
  132. <a class="submitdelete deletion" href="#"><?php esc_html_e( 'Cancel', 'wpforms-lite' ); ?></a>
  133. </div>
  134. <?php if ( ! empty( $forms ) ) : ?>
  135. <div id="wpforms-modal-update">
  136. <button class="button button-primary" id="wpforms-modal-submit"><?php esc_html_e( 'Add Form', 'wpforms-lite' ); ?></button>
  137. </div>
  138. <?php endif; ?>
  139. </div>
  140. </form>
  141. </div>
  142. <style type="text/css">
  143. .wpforms-insert-form-button svg path {
  144. fill: #0071a1;
  145. }
  146. .wpforms-insert-form-button:hover svg path {
  147. fill: #016087;
  148. }
  149. #wpforms-modal-wrap {
  150. display: none;
  151. background-color: #fff;
  152. -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  153. box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  154. width: 500px;
  155. height: 285px;
  156. overflow: hidden;
  157. margin-left: -250px;
  158. margin-top: -125px;
  159. position: fixed;
  160. top: 50%;
  161. left: 50%;
  162. z-index: 100205;
  163. -webkit-transition: height 0.2s, margin-top 0.2s;
  164. transition: height 0.2s, margin-top 0.2s;
  165. }
  166. #wpforms-modal-backdrop {
  167. display: none;
  168. position: fixed;
  169. top: 0;
  170. left: 0;
  171. right: 0;
  172. bottom: 0;
  173. min-height: 360px;
  174. background: #000;
  175. opacity: 0.7;
  176. filter: alpha(opacity=70);
  177. z-index: 100200;
  178. }
  179. #wpforms-modal {
  180. position: relative;
  181. height: 100%;
  182. }
  183. #wpforms-modal-title {
  184. background: #fcfcfc;
  185. border-bottom: 1px solid #dfdfdf;
  186. height: 36px;
  187. font-size: 18px;
  188. font-weight: 600;
  189. line-height: 36px;
  190. padding: 0 36px 0 16px;
  191. top: 0;
  192. right: 0;
  193. left: 0;
  194. }
  195. #wpforms-modal-close {
  196. color: #666;
  197. padding: 0;
  198. position: absolute;
  199. top: 0;
  200. right: 0;
  201. width: 36px;
  202. height: 36px;
  203. text-align: center;
  204. background: none;
  205. border: none;
  206. cursor: pointer;
  207. }
  208. #wpforms-modal-close:before {
  209. font: normal 20px/36px 'dashicons';
  210. vertical-align: top;
  211. speak: none;
  212. -webkit-font-smoothing: antialiased;
  213. -moz-osx-font-smoothing: grayscale;
  214. width: 36px;
  215. height: 36px;
  216. content: '\f158';
  217. }
  218. #wpforms-modal-close:hover,
  219. #wpforms-modal-close:focus {
  220. color: #2ea2cc;
  221. }
  222. #wpforms-modal-close:focus {
  223. outline: none;
  224. -webkit-box-shadow: 0 0 0 1px #5b9dd9,
  225. 0 0 2px 1px rgba(30, 140, 190, .8);
  226. box-shadow: 0 0 0 1px #5b9dd9,
  227. 0 0 2px 1px rgba(30, 140, 190, .8);
  228. }
  229. #wpforms-modal-inner {
  230. padding: 0 16px 50px;
  231. }
  232. #wpforms-modal-search-toggle:after {
  233. display: inline-block;
  234. font: normal 20px/1 'dashicons';
  235. vertical-align: top;
  236. speak: none;
  237. -webkit-font-smoothing: antialiased;
  238. -moz-osx-font-smoothing: grayscale;
  239. content: '\f140';
  240. }
  241. #wpforms-modal-notice {
  242. background-color: #d9edf7;
  243. border: 1px solid #bce8f1;
  244. color: #31708f;
  245. padding: 10px;
  246. }
  247. #wpforms-modal #wpforms-modal-options {
  248. padding: 8px 0 12px;
  249. }
  250. #wpforms-modal #wpforms-modal-options .wpforms-modal-inline {
  251. display: inline-block;
  252. margin: 0;
  253. padding: 0 20px 0 0;
  254. }
  255. #wpforms-modal-select-form {
  256. margin-bottom: 1em;
  257. max-width: 100%;
  258. }
  259. #wpforms-modal .submitbox {
  260. padding: 8px 16px;
  261. background: #fcfcfc;
  262. border-top: 1px solid #dfdfdf;
  263. position: absolute;
  264. bottom: 0;
  265. left: 0;
  266. right: 0;
  267. }
  268. #wpforms-modal-cancel {
  269. line-height: 25px;
  270. float: left;
  271. }
  272. #wpforms-modal-update {
  273. line-height: 23px;
  274. float: right;
  275. }
  276. #wpforms-modal-submit {
  277. float: right;
  278. margin-bottom: 0;
  279. }
  280. @media screen and ( max-width: 782px ) {
  281. #wpforms-modal-wrap {
  282. height: 280px;
  283. margin-top: -140px;
  284. }
  285. #wpforms-modal-inner {
  286. padding: 0 16px 60px;
  287. }
  288. #wpforms-modal-cancel {
  289. line-height: 32px;
  290. }
  291. }
  292. @media screen and ( max-width: 520px ) {
  293. #wpforms-modal-wrap {
  294. width: auto;
  295. margin-left: 0;
  296. left: 10px;
  297. right: 10px;
  298. max-width: 500px;
  299. }
  300. }
  301. @media screen and ( max-height: 520px ) {
  302. #wpforms-modal-wrap {
  303. -webkit-transition: none;
  304. transition: none;
  305. }
  306. }
  307. @media screen and ( max-height: 290px ) {
  308. #wpforms-modal-wrap {
  309. height: auto;
  310. margin-top: 0;
  311. top: 10px;
  312. bottom: 10px;
  313. }
  314. #wpforms-modal-inner {
  315. overflow: auto;
  316. height: -webkit-calc(100% - 92px);
  317. height: calc(100% - 92px);
  318. padding-bottom: 2px;
  319. }
  320. }
  321. </style>
  322. <?php
  323. }
  324. }
  325. new WPForms_Admin_Editor();