PageRenderTime 92ms CodeModel.GetById 20ms RepoModel.GetById 0ms app.codeStats 1ms

/wp-content/plugins/ninja-forms/deprecated/assets/js/dev/builder.js

https://gitlab.com/lamovible/grand-regis
JavaScript | 519 lines | 398 code | 71 blank | 50 comment | 78 complexity | c2e00758439021e1639e82b1e1455009 MD5 | raw file
  1. /**
  2. * JS that handles our fields in the admin.
  3. * Uses backbone data models to send only modified field data to the db.
  4. */
  5. // Model to hold our field settings.
  6. var nfField = Backbone.Model.extend( {
  7. toggleMetabox: function() {
  8. /**
  9. * Open and close a field metabox.
  10. * When a metabox is closed:
  11. * - update the field collection with any values that might have changed.
  12. * - remove the HTML
  13. * When a metabox is opened:
  14. * - send an ajax request to grab the HTML
  15. * - populate the field settings HTML
  16. */
  17. var field_id = this.id;
  18. // Get our current metabox state.
  19. var current_metabox_state = this.get( 'metabox_state' );
  20. if ( current_metabox_state == 1 ) { // If our current state is 1, then we are closing the metabox.
  21. var new_metabox_state = 0;
  22. } else { // If our current state is 0, then we are opening the metabox.
  23. var new_metabox_state = 1;
  24. }
  25. // Perform specific tasks based upon the state of the metabox.
  26. if ( new_metabox_state == 1 ) { // If we have opened the metabox.
  27. // Fetch our HTML.
  28. this.updateHTML();
  29. } else { // If we have closed the metabox.
  30. // Update our model data.
  31. this.updateData();
  32. // Remove any tinyMCE editors
  33. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).find( 'div.rte' ).each( function() {
  34. if ( 'undefined' != typeof tinymce ) {
  35. try {
  36. var editor_id = jQuery( this ).find( 'textarea.wp-editor-area' ).prop( 'id' );
  37. tinymce.remove( '#' + editor_id );
  38. } catch (e ) {
  39. }
  40. }
  41. } );
  42. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).slideUp('fast', function( e ) {
  43. // Remove the HTML contents of this metabox.
  44. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).empty();
  45. // Add our no-padding class
  46. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).addClass( 'no-padding' );
  47. });
  48. }
  49. // Save the state of the metabox in our data model.
  50. this.set( 'metabox_state', new_metabox_state );
  51. },
  52. updateHTML: function() {
  53. var field_id = this.id;
  54. jQuery( '#ninja_forms_metabox_field_' + field_id ).find( '.spinner' ).show();
  55. jQuery( '#ninja_forms_metabox_field_' + field_id ).find( '.spinner' ).css( 'visibility', 'visible' );
  56. this.updateData();
  57. var data = JSON.stringify( this.toJSON() );
  58. var that = this;
  59. jQuery.post( ajaxurl, { field_id: field_id, data: data, action:'nf_output_field_settings_html', nf_ajax_nonce:ninja_forms_settings.nf_ajax_nonce }, function( response ) {
  60. jQuery( '#ninja_forms_metabox_field_' + field_id ).find( '.spinner' ).hide();
  61. // Remove our no-padding class.
  62. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).removeClass( 'no-padding' );
  63. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).append( response );
  64. if ( typeof nf_ajax_rte_editors !== 'undefined' && 'undefined' !== typeof tinyMCE ) {
  65. for (var x = nf_ajax_rte_editors.length - 1; x >= 0; x--) {
  66. try {
  67. var editor_id = nf_ajax_rte_editors[x];
  68. tinyMCE.init( tinyMCEPreInit.mceInit[ editor_id ] );
  69. try { quicktags( tinyMCEPreInit.qtInit[ editor_id ] ); } catch(e){ console.log( 'error' ); }
  70. } catch (e) {
  71. }
  72. };
  73. }
  74. that.removeEmptySettings();
  75. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).slideDown( 'fast' );
  76. // Re-run makeSortable for new HTML
  77. nfFields.listOptionsSortable();
  78. jQuery( '.nf-field-settings .title' ).disableSelection();
  79. } );
  80. },
  81. updateData: function() {
  82. var field_id = this.id;
  83. if ( 'undefined' != typeof tinyMCE ) {
  84. try {
  85. tinyMCE.triggerSave();
  86. } catch (e) {
  87. }
  88. }
  89. var data = jQuery('[name^=ninja_forms_field_' + field_id + ']');
  90. var field_data = jQuery(data).serializeFullArray();
  91. if ( typeof field_data['ninja_forms_field_' + field_id] != 'undefined' ) {
  92. var field = field_data['ninja_forms_field_' + field_id];
  93. for( var prop in field ) {
  94. if ( field.hasOwnProperty( prop ) ) {
  95. nfFields.get( field_id ).set( prop, field[ prop ] );
  96. }
  97. }
  98. }
  99. nfForm.set( 'saved', false );
  100. },
  101. remove: function() {
  102. var field_id = this.id;
  103. var answer = confirm( nf_admin.remove_field );
  104. if ( answer ) {
  105. var form_id = ninja_forms_settings.form_id
  106. jQuery.post(ajaxurl, { form_id: form_id, field_id: field_id, action: 'ninja_forms_remove_field', nf_ajax_nonce:ninja_forms_settings.nf_ajax_nonce }, function( response ) {
  107. jQuery( '#ninja_forms_field_' + field_id).remove();
  108. jQuery( document ).trigger( 'removeField', [ field_id ] );
  109. });
  110. }
  111. },
  112. removeEmptySettings: function() {
  113. var field_id = this.id;
  114. jQuery( '#ninja_forms_field_' + field_id + '_inside' ).find( '.nf-field-settings .inside' ).each( function() {
  115. var html = jQuery.trim( jQuery( this ).html() );
  116. if ( html == '' ) {
  117. jQuery( this ).parent().remove();
  118. }
  119. } );
  120. }
  121. } );
  122. // Collection to hold our fields.
  123. var nfFields = Backbone.Collection.extend({
  124. model: nfField,
  125. setup: function() {
  126. // Loop through our field JSON that is already on the page and populate our collection with it.
  127. if( 'undefined' !== typeof nf_admin.fields ) {
  128. _.each( nf_admin.fields, function( field ) {
  129. nfFields.add( { id: field.id, metabox_state: field.metabox_state } );
  130. } );
  131. }
  132. },
  133. updateData: function() {
  134. // Loop through our fields collection and update any field lis that are open
  135. _.each( this.models, function( field ) {
  136. if ( field.get( 'metabox_state' ) == 1 ) {
  137. field.updateData();
  138. }
  139. } );
  140. },
  141. newField: function( button ) {
  142. var limit = jQuery( button ).data( 'limit' );
  143. var type = jQuery( button ).data( 'type' );
  144. var form_id = ninja_forms_settings.form_id
  145. if ( limit != '' ){
  146. var current_count = jQuery( '.' + type + '-li' ).length;
  147. }else{
  148. var current_count = '';
  149. }
  150. if ( typeof jQuery( button ).data( 'field' ) == 'undefined' ) {
  151. var field_id = '';
  152. var action = 'ninja_forms_new_field';
  153. } else if ( jQuery( button ).data( 'type' ) == 'fav' ) {
  154. var field_id = jQuery( button ).data( 'field' );
  155. var action = 'ninja_forms_insert_fav';
  156. } else {
  157. var field_id = jQuery( button ).data( 'field' );
  158. var action = 'ninja_forms_insert_def';
  159. }
  160. if ( ( limit != '' && current_count < limit ) || limit == '' || current_count == '' || current_count == 0 ) {
  161. jQuery.post( ajaxurl, { type: type, field_id: field_id, form_id: form_id, action: action, nf_ajax_nonce:ninja_forms_settings.nf_ajax_nonce }, this.newFieldResponse );
  162. } else {
  163. jQuery( button ).addClass( 'disabled' );
  164. }
  165. nfForm.set( 'saved', false );
  166. },
  167. newFieldResponse: function( response ) {
  168. // Fire our custom jQuery addField event.
  169. jQuery( document ).trigger('addField', [ response ]);
  170. },
  171. addFieldDefault: function( response ) {
  172. jQuery( '#ninja_forms_field_list' ).append( response.new_html ).show( 'slow' );
  173. if ( response.new_type == 'List' ) {
  174. this.listOptionsSortable();
  175. }
  176. if ( typeof nf_ajax_rte_editors !== 'undefined' && 'undefined' !== typeof tinyMCE ) {
  177. for (var x = nf_ajax_rte_editors.length - 1; x >= 0; x--) {
  178. try {
  179. var editor_id = nf_ajax_rte_editors[x];
  180. tinyMCE.init( tinyMCEPreInit.mceInit[ editor_id ] );
  181. try { quicktags( tinyMCEPreInit.qtInit[ editor_id ] ); } catch(e){}
  182. } catch (e) {
  183. }
  184. };
  185. }
  186. // Add our field to our backbone data model.
  187. this.add( { id: response.new_id, metabox_state: 1 } );
  188. nfFields.get( response.new_id ).removeEmptySettings();
  189. },
  190. listOptionsSortable: function ( response ) {
  191. //Make List Options sortable
  192. jQuery(".ninja-forms-field-list-options").sortable({
  193. helper: 'clone',
  194. handle: '.ninja-forms-drag',
  195. items: 'div',
  196. placeholder: 'ui-state-highlight',
  197. update: function( event, ui ) {
  198. var order = jQuery( this ).sortable( 'toArray' );
  199. var x = 0;
  200. _.each( order, function( id ) {
  201. var field_id = jQuery( '#' + id ).data( 'field' );
  202. var label_name = 'ninja_forms_field_' + field_id + '[list][options][' + x + '][label]';
  203. var value_name = 'ninja_forms_field_' + field_id + '[list][options][' + x + '][value]';
  204. var calc_name = 'ninja_forms_field_' + field_id + '[list][options][' + x + '][calc]';
  205. var selected_name = 'ninja_forms_field_' + field_id + '[list][options][' + x + '][selected]';
  206. jQuery( '#' + id ).find( '.ninja-forms-field-list-option-label' ).attr( 'name', label_name );
  207. jQuery( '#' + id ).find( '.ninja-forms-field-list-option-value' ).attr( 'name', value_name );
  208. jQuery( '#' + id ).find( '.ninja-forms-field-list-option-calc' ).attr( 'name', calc_name );
  209. jQuery( '#' + id ).find( '.ninja-forms-field-list-option-selected' ).attr( 'name', selected_name );
  210. x++;
  211. } );
  212. }
  213. });
  214. }
  215. });
  216. var nfForm = Backbone.Model.extend( {
  217. defaults: {
  218. 'id' : ninja_forms_settings.form_id,
  219. 'status' : nf_admin.form_status,
  220. 'title' : nf_admin.form_title,
  221. 'saved' : true
  222. },
  223. setup: function() {
  224. this.changeMenu();
  225. },
  226. changeMenu: function() {
  227. if ( 'new' == this.get( 'status' ) ) { // If we're working with a new form, highlight the "Add New" menu item.
  228. jQuery( '.wp-submenu li' ).removeClass( 'current' );
  229. jQuery( 'a[href="admin.php?page=ninja-forms&tab=builder&form_id=new"]' ).parent().addClass( 'current' );
  230. } else {
  231. var html = '<li class="current"><a href="#">' + nf_admin.edit_form_text + '</a></li>';
  232. if ( jQuery( 'li a:contains("' + nf_admin.edit_form_text + '")' ).length == 0 ) {
  233. jQuery( '.wp-submenu li' ).removeClass( 'current' );
  234. jQuery( 'a[href="admin.php?page=ninja-forms&tab=builder&form_id=new"]' ).parent().after( html );
  235. }
  236. }
  237. },
  238. save: function() {
  239. jQuery( '.nf-save-admin-fields' ).hide();
  240. jQuery( '.nf-save-spinner' ).show();
  241. jQuery( '.nf-save-spinner' ).css( 'visibility', 'visible' );
  242. // If our form is new, then prompt for a title before we save
  243. if ( 'new' == this.get( 'status' ) ) {
  244. if ( jQuery( '._submit-li' ).length > 0 ) {
  245. jQuery( '#nf-insert-submit-div' ).hide();
  246. this.set( 'show_insert_submit', false );
  247. } else {
  248. jQuery( '#nf-insert-submit-div' ).show();
  249. this.set( 'show_insert_submit', true );
  250. }
  251. // Open our save form modal.
  252. jQuery( '#nf-save-title' ).nfAdminModal( 'open' );
  253. jQuery( '#modal-contents-wrapper' ).find( '#nf-form-title' ).focus();
  254. return false;
  255. }
  256. nfFields.updateData();
  257. var field_data = JSON.stringify( nfFields.toJSON() );
  258. var field_order = {};
  259. var current_order = jQuery( '#ninja_forms_field_list' ).sortable( 'toArray' );
  260. for ( var i = 0; i < current_order.length; i++ ) {
  261. field_order[i] = current_order[i];
  262. };
  263. field_order = JSON.stringify( field_order );
  264. var form_id = ninja_forms_settings.form_id;
  265. jQuery( document ).data( 'field_order', field_order );
  266. jQuery( document ).data( 'field_data', field_data );
  267. jQuery( document ).triggerHandler( 'nfAdminSaveFields' );
  268. var field_order = jQuery( document ).data( 'field_order' );
  269. var data = jQuery( document ).data( 'field_data' );
  270. jQuery.post( ajaxurl, { form_title: this.get( 'title' ), form_id: form_id, field_data: field_data, field_order: field_order, action: 'nf_admin_save_builder', nf_ajax_nonce:ninja_forms_settings.nf_ajax_nonce }, function( response ) {
  271. jQuery( '.nf-save-spinner' ).hide();
  272. jQuery( '.nf-save-admin-fields' ).show();
  273. var html = '<div id="message" class="updated below-h2" style="display:none;margin-top: 20px;"><p>' + nf_admin.saved_text + '</p></div>';
  274. jQuery( '.nav-tab-wrapper:last' ).after( html );
  275. jQuery( '#message' ).fadeIn();
  276. if ( jQuery( '#nf-display-form-title' ).html() == '' ) {
  277. jQuery( '#nf-display-form-title' ).html( nfForm.get( 'title' ) );
  278. }
  279. nfForm.set( 'saved', true );
  280. nfForm.set( 'status', '' );
  281. nfForm.changeMenu();
  282. } );
  283. },
  284. saveTitle: function() {
  285. var title = jQuery( '#modal-contents-wrapper' ).find( '#nf-form-title' ).val();
  286. var show_insert_submit = this.get( 'show_insert_submit' );
  287. var insert_submit = jQuery( '#modal-contents-wrapper' ).find( '#nf-insert-submit' ).prop( 'checked' );
  288. this.set( 'title', title );
  289. this.set( 'status', '' );
  290. // Insert our submit button if we checked the box.
  291. if ( show_insert_submit && insert_submit ) {
  292. var that = this;
  293. // Add our custom addField behaviour
  294. jQuery( document ).on( 'addField.insertSubmit', function( e, response ) {
  295. jQuery( '#ninja_forms_field_' + response.new_id + '_toggle' ).click();
  296. jQuery( '#nf-save-title' ).nfAdminModal( 'close' );
  297. that.save();
  298. jQuery( document ).off( 'addField.insertSubmit' );
  299. } );
  300. jQuery( '#_submit' ).click();
  301. } else {
  302. jQuery( '#nf-save-title' ).nfAdminModal( 'close' );
  303. this.save();
  304. }
  305. }
  306. } );
  307. // Instantiate our fields collection.
  308. var nfFields = new nfFields();
  309. // Instantiate our form settings.
  310. var nfForm = new nfForm();
  311. (function($){
  312. $( document ).ready( function( $ ) {
  313. nfFields.setup();
  314. nfForm.setup();
  315. // Open and close a field metabox.
  316. $( document ).on( 'click', '.nf-edit-field', function( e ) {
  317. e.preventDefault();
  318. // Get our field id.
  319. var field_id = jQuery( e.target ).data( 'field' );
  320. nfFields.get( field_id ).toggleMetabox();
  321. // Get our current metabox state.
  322. var current_metabox_state = nfFields.get( field_id ).get( 'metabox_state' );
  323. if ( current_metabox_state == 1 ) {
  324. $( this ).addClass( 'open' );
  325. } else {
  326. $( this ).removeClass( 'open' );
  327. }
  328. });
  329. // Remove the saved message when the user clicks anywhere on the page.
  330. $( document ).on( 'click', function() {
  331. $( '#message' ).fadeOut( 'slow' );
  332. } );
  333. $( document ).on( 'click', '.nf-save-admin-fields', function( e ) {
  334. e.preventDefault();
  335. nfForm.save();
  336. } );
  337. $( document ).on( 'click', '#nf-save-title-submit', function( e ) {
  338. e.preventDefault();
  339. nfForm.saveTitle();
  340. } );
  341. // Add New Field
  342. $( document ).on( 'click', '.ninja-forms-new-field', function( e ) {
  343. e.preventDefault();
  344. nfFields.newField( e.target );
  345. } );
  346. // Remove Field
  347. $( document ).on( 'click', '.nf-remove-field', function( e ){
  348. e.preventDefault();
  349. var field_id = jQuery( e.target ).data( 'field' );
  350. nfFields.get( field_id ).remove();
  351. });
  352. // Hook into our add field response event
  353. $( document ).on( 'addField.default', function( e, response ) {
  354. nfFields.addFieldDefault( response );
  355. } );
  356. // Insert a Favorite Field
  357. $( document ).on( 'click', '.ninja-forms-insert-fav-field', function( e ){
  358. e.preventDefault();
  359. nfFields.newField( e.target );
  360. });
  361. // Insert a Defined Field
  362. $( document ).on( 'click', '.ninja-forms-insert-def-field', function( e ){
  363. e .preventDefault();
  364. nfFields.newField( e.target );
  365. });
  366. // Create our save form modal.
  367. $( '#nf-save-title' ).nfAdminModal( { title: 'Save Your Form', buttons: '#nf-save-title-buttons' } );
  368. // Remove spinners when the save title modal is closed
  369. $( document ).on( 'nfAdminModalClose.hideSpinners', function( e ) {
  370. jQuery( '.nf-save-spinner' ).hide();
  371. jQuery( '.nf-save-admin-fields' ).show();
  372. } );
  373. // Enable/disable our save button on the name modal
  374. $( document ).on( 'keyup', '#nf-form-title', function( e ) {
  375. var value = this.value;
  376. if ( this.value.length > 0 ) {
  377. $( '#modal-contents-wrapper' ).find( '#nf-save-title-submit' ).prop( 'disabled', false );
  378. $( '#modal-contents-wrapper' ).find( '#nf-save-title-submit' ).removeClass( 'button-secondary' );
  379. $( '#modal-contents-wrapper' ).find( '#nf-save-title-submit' ).addClass( 'button-primary' );
  380. } else {
  381. $( '#modal-contents-wrapper' ).find( '#nf-save-title-submit' ).prop( 'disabled', true );
  382. $( '#modal-contents-wrapper' ).find( '#nf-save-title-submit' ).removeClass( 'button-primary' );
  383. $( '#modal-contents-wrapper' ).find( '#nf-save-title-submit' ).addClass( 'button-secondary' );
  384. }
  385. if( e.keyCode == 13 && this.value.length > 0 ){
  386. nfForm.saveTitle();
  387. }
  388. } );
  389. // Make the field list sortable
  390. $( '.ninja-forms-field-list' ).sortable({
  391. handle: '.menu-item-handle',
  392. items: 'li:not(.not-sortable)',
  393. connectWith: '.ninja-forms-field-list',
  394. //cursorAt: {left: -10, top: -1},
  395. start: function( e, ui ) {
  396. var wp_editor_count = $( ui.item ).find( '.wp-editor-wrap' ).length;
  397. if(wp_editor_count > 0){
  398. $(ui.item).find('.wp-editor-wrap').each(function(){
  399. try {
  400. var ed_id = this.id.replace( 'wp- ', '');
  401. ed_id = ed_id.replace( '-wrap', '' );
  402. tinyMCE.execCommand( 'mceRemoveControl', false, ed_id );
  403. } catch (e) {
  404. }
  405. });
  406. }
  407. },
  408. stop: function( e,ui ) {
  409. var wp_editor_count = $( ui.item ).find( '.wp-editor-wrap' ).length;
  410. if( wp_editor_count > 0 ) {
  411. $( ui.item ).find( '.wp-editor-wrap').each(function(){
  412. try {
  413. var ed_id = this.id.replace( 'wp-', '' );
  414. ed_id = ed_id.replace( '-wrap', '' );
  415. tinyMCE.execCommand( 'mceAddControl', true, ed_id );
  416. } catch (e) {
  417. }
  418. });
  419. }
  420. $( this ).sortable( 'refresh' );
  421. nfForm.set( 'saved', false );
  422. }
  423. });
  424. $( document ).on( 'dblclick', '.nf-field-settings .title', function(e) {
  425. $( this ).find( '.nf-field-sub-section-toggle' ).click();
  426. } );
  427. $( document ).on( 'click', '.nf-field-sub-section-toggle', function(e) {
  428. e.preventDefault();
  429. if ( $( this ).hasClass( 'dashicons-arrow-right' ) ) {
  430. $( this ).removeClass( 'dashicons-arrow-right' ).addClass( 'dashicons-arrow-up' );
  431. } else {
  432. $( this ).removeClass( 'dashicons-arrow-up' ).addClass( 'dashicons-arrow-right' );
  433. }
  434. $( this ).parent().next( '.inside' ).slideToggle();
  435. } );
  436. $( window ).bind( 'beforeunload', function() {
  437. if ( 'new' == nfForm.get( 'status' ) ) { // Prompt the user to give a name if they leave the builder before naming their form.
  438. $( '#nf-save-title' ).nfAdminModal( 'open' );
  439. return 'Please save your form before leaving this page.';
  440. } else if ( nfForm.get( 'saved' ) == false ) {
  441. return 'You have unsaved changes. Please save before leaving this page.';
  442. }
  443. } );
  444. $( document ).on( 'dblclick', '.menu-item-handle', function( e ) {
  445. $( this ).find( '.nf-edit-field' ).click();
  446. } );
  447. });
  448. })(jQuery);