説明なし

um-admin-dragdrop.js 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. function UM_Drag_and_Drop() {
  2. jQuery('.um-admin-drag-col,.um-admin-drag-group').sortable({
  3. items: '.um-admin-drag-fld',
  4. connectWith: '.um-admin-drag-col,.um-admin-drag-group',
  5. placeholder: "um-fld-placeholder",
  6. forcePlaceholderSize:true,
  7. update: function(event, ui){
  8. jQuery('#publish').attr('disabled','disabled');
  9. if ( ui.item.hasClass('um-field-type-group') && ui.item.parents('.um-field-type-group').length > 0 ) {
  10. jQuery('.um-admin-drag-col,.um-admin-drag-group').sortable('cancel');
  11. jQuery('#publish').prop('disabled', false);
  12. } else {
  13. UM_Change_Field_Col();
  14. UM_Change_Field_Grp();
  15. UM_Rows_Refresh();
  16. }
  17. }
  18. });
  19. jQuery('.um-admin-drag-rowsubs').sortable({
  20. items: '.um-admin-drag-rowsub',
  21. placeholder: "um-rowsub-placeholder",
  22. forcePlaceholderSize:true,
  23. zIndex: 9999999999,
  24. update: function(){
  25. jQuery('#publish').attr('disabled','disabled');
  26. UM_update_subrows();
  27. UM_Rows_Refresh();
  28. }
  29. }).disableSelection();
  30. jQuery('.um-admin-drag-rowsub').sortable({
  31. items: '.um-admin-drag-col',
  32. zIndex: 9999999999,
  33. update: function(){
  34. jQuery('#publish').attr('disabled','disabled');
  35. row = jQuery(this);
  36. row.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle');
  37. row.find('.um-admin-drag-col').addClass('cols-' + row.find('.um-admin-drag-col').length );
  38. row.find('.um-admin-drag-col:last').addClass('cols-last');
  39. if ( row.find('.um-admin-drag-col').length == 3 ) {row.find('.um-admin-drag-col:eq(1)').addClass('cols-middle');}
  40. UM_Change_Field_Col();
  41. UM_Change_Field_Grp();
  42. UM_Rows_Refresh();
  43. }
  44. }).disableSelection();
  45. jQuery('.um-admin-drag-ajax').sortable({
  46. items: '.um-admin-drag-row',
  47. handle: ".um-admin-drag-row-start",
  48. zIndex: 9999999999,
  49. placeholder: "um-row-placeholder",
  50. forcePlaceholderSize:true,
  51. out: function(){
  52. jQuery('.tipsy').remove();
  53. },
  54. update: function(){
  55. jQuery('#publish').attr('disabled','disabled');
  56. UM_update_rows();
  57. UM_Change_Field_Col();
  58. UM_Change_Field_Grp();
  59. UM_Rows_Refresh();
  60. }
  61. }).disableSelection();
  62. }
  63. function UM_update_rows() {
  64. var c = 0;
  65. jQuery('a[data-remove_element="um-admin-drag-row"]').remove();
  66. jQuery('.um-admin-drag-row').each(function(){
  67. c++;
  68. row = jQuery(this);
  69. if ( c != 1 ) {
  70. row.find('.um-admin-drag-row-icons').append( '<a href="#" class="um-admin-tipsy-n" title="Delete Row" data-remove_element="um-admin-drag-row"><i class="um-faicon-trash-o"></i></a>' );
  71. }
  72. });
  73. }
  74. function UM_update_subrows(){
  75. jQuery('a[data-remove_element="um-admin-drag-rowsub"]').remove();
  76. jQuery('.um-admin-drag-row').each(function(){
  77. c = 0;
  78. jQuery(this).find('.um-admin-drag-rowsub').each(function(){
  79. c++;
  80. row = jQuery(this);
  81. if ( c != 1 ) {
  82. row.find('.um-admin-drag-rowsub-icons').append('<a href="#" class="um-admin-tipsy-n" title="Delete Row" data-remove_element="um-admin-drag-rowsub"><i class="um-faicon-trash-o"></i></a>');
  83. }
  84. });
  85. });
  86. }
  87. function UM_Change_Field_Col(){
  88. jQuery('.um-admin-drag-col .um-admin-drag-fld').each(function(){
  89. cols = jQuery(this).parents('.um-admin-drag-rowsub').find('.um-admin-drag-col').length;
  90. col = jQuery(this).parents('.um-admin-drag-col');
  91. if ( col.hasClass('cols-last') ) {
  92. if ( cols == 1 ) {
  93. saved_col = 1;
  94. }
  95. if ( cols == 3 ) {
  96. saved_col = 3;
  97. } else if ( cols == 2 ) {
  98. saved_col = 2;
  99. }
  100. } else if ( col.hasClass('cols-middle') && cols == 3 ) {
  101. saved_col = 2;
  102. } else {
  103. saved_col = 1;
  104. }
  105. jQuery(this).data('column', saved_col);
  106. });
  107. }
  108. function UM_Change_Field_Grp(){
  109. jQuery('.um-admin-drag-col .um-admin-drag-fld:not(.um-field-type-group)').each(function(){
  110. if ( jQuery(this).parents('.um-admin-drag-group').length == 0 ){
  111. jQuery(this).data('group', '');
  112. } else {
  113. jQuery(this).data('group', jQuery(this).parents('.um-admin-drag-fld.um-field-type-group').data('key') );
  114. }
  115. });
  116. }
  117. function UM_Rows_Refresh(){
  118. jQuery('.um_update_order_fields').empty();
  119. /* ROWS */
  120. var c = 0;
  121. jQuery('.um-admin-drag-row').each(function(){
  122. c++;
  123. row = jQuery(this);
  124. col_num = '';
  125. row.find('.um-admin-drag-rowsub').each(function(){
  126. subrow = jQuery(this);
  127. subrow.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle');
  128. subrow.find('.um-admin-drag-col').addClass('cols-' + subrow.find('.um-admin-drag-col').length );
  129. subrow.find('.um-admin-drag-col:last').addClass('cols-last');
  130. if ( subrow.find('.um-admin-drag-col').length == 3 ) {subrow.find('.um-admin-drag-col:eq(1)').addClass('cols-middle');}
  131. if ( !col_num ) {
  132. col_num = subrow.find('.um-admin-drag-col').length;
  133. } else {
  134. col_num = col_num + ':' + subrow.find('.um-admin-drag-col').length;
  135. }
  136. });
  137. jQuery('.um_update_order_fields').append('<input type="hidden" name="_um_rowcols_'+c+'_cols" id="_um_rowcols_'+c+'_cols" value="'+col_num+'" />');
  138. sub_rows_count = row.find('.um-admin-drag-rowsub').length;
  139. var origin_id = jQuery(this).attr('data-original');
  140. jQuery('.um_update_order_fields').append('<input type="hidden" name="_um_row_'+c+'" id="_um_row_'+c+'" value="_um_row_'+c+'" />');
  141. jQuery('.um_update_order_fields').append('<input type="hidden" name="_um_roworigin_'+c+'_val" id="_um_roworigin_'+c+'_val" value="'+origin_id+'" />');
  142. jQuery('.um_update_order_fields').append('<input type="hidden" name="_um_rowsub_'+c+'_rows" id="_um_rowsub_'+c+'_rows" value="'+sub_rows_count+'" />');
  143. jQuery(this).attr('data-original', '_um_row_'+c );
  144. });
  145. /* FIELDS */
  146. var order;
  147. order = 0;
  148. jQuery('.um-admin-drag-col .um-admin-drag-fld').each(function(){
  149. if ( !jQuery(this).hasClass('group') ) {
  150. var group = jQuery(this).data('group');
  151. if ( group != '' ) {
  152. if ( jQuery('.um-admin-drag-fld.um-field-type-group.' + group ).find('.um-admin-drag-group').find( jQuery(this) ).length == 0 ) {
  153. jQuery(this).appendTo( jQuery('.um-admin-drag-fld.um-field-type-group.' + group ).find('.um-admin-drag-group') );
  154. } else {
  155. //jQuery(this).prependTo( jQuery('.um-admin-drag-fld.um-field-type-group.' + group ).find('.um-admin-drag-group') );
  156. }
  157. jQuery('.um_update_order_fields').append('<input type="hidden" name="um_group_'+jQuery(this).data('key')+'" id="um_group_'+jQuery(this).data('key')+'" value="'+group+'" />');
  158. } else {
  159. jQuery('.um_update_order_fields').append('<input type="hidden" name="um_group_'+jQuery(this).data('key')+'" id="um_group_'+jQuery(this).data('key')+'" value="" />');
  160. }
  161. }
  162. order++;
  163. row = jQuery(this).parents('.um-admin-drag-row').index()+1;
  164. row = '_um_row_'+row;
  165. saved_col = jQuery(this).data('column');
  166. if ( saved_col == 3 ){
  167. jQuery(this).appendTo( jQuery(this).parents('.um-admin-drag-rowsub').find('.um-admin-drag-col:eq(2)') );
  168. }
  169. if ( saved_col == 2 ){
  170. jQuery(this).appendTo( jQuery(this).parents('.um-admin-drag-rowsub').find('.um-admin-drag-col:eq(1)') );
  171. }
  172. sub_row = jQuery(this).parents('.um-admin-drag-rowsub').index();
  173. jQuery('.um_update_order_fields').append('<input type="hidden" name="um_position_'+jQuery(this).data('key')+'" id="um_position_'+jQuery(this).data('key')+'" value="'+order+'" />');
  174. jQuery('.um_update_order_fields').append('<input type="hidden" name="um_row_'+jQuery(this).data('key')+'" id="um_row_'+jQuery(this).data('key')+'" value="'+row+'" />');
  175. jQuery('.um_update_order_fields').append('<input type="hidden" name="um_subrow_'+jQuery(this).data('key')+'" id="um_subrow_'+jQuery(this).data('key')+'" value="'+sub_row+'" />');
  176. jQuery('.um_update_order_fields').append('<input type="hidden" name="um_col_'+jQuery(this).data('key')+'" id="um_col_'+jQuery(this).data('key')+'" value="'+saved_col+'" />');
  177. });
  178. UM_Drag_and_Drop();
  179. UM_Add_Icon();
  180. jQuery.ajax({
  181. url: wp.ajax.settings.url,
  182. type: 'POST',
  183. data: jQuery( '.um_update_order' ).serialize(),
  184. success: function(){
  185. jQuery('#publish').prop('disabled', false);
  186. }
  187. });
  188. }
  189. function UM_Add_Icon(){
  190. var add_icon_html = '<a href="#" class="um-admin-drag-add-field um-admin-tipsy-n" title="Add Field" data-modal="UM_fields" data-modal-size="normal" data-dynamic-content="um_admin_show_fields" data-arg2="'+jQuery('.um-admin-drag-ajax').data('form_id')+'" data-arg1=""><i class="um-icon-plus"></i></a>';
  191. jQuery('.um-admin-drag-col').each(function(){
  192. if ( jQuery(this).find('.um-admin-drag-add-field').length == 0 ) {
  193. jQuery(this).append(add_icon_html);
  194. } else {
  195. jQuery(this).find('.um-admin-drag-add-field').remove();
  196. jQuery(this).append(add_icon_html);
  197. }
  198. });
  199. jQuery('.um-admin-drag-group').each(function(){
  200. if ( jQuery(this).find('.um-admin-drag-add-field').length == 0 ) {
  201. jQuery(this).append(add_icon_html);
  202. } else {
  203. jQuery(this).find('.um-admin-drag-add-field').remove();
  204. jQuery(this).append(add_icon_html);
  205. }
  206. });
  207. }
  208. jQuery(document).ready(function() {
  209. if ( !jQuery('.um-admin-drag').length ) {
  210. return false;
  211. }
  212. UM_Drag_and_Drop();
  213. /* add field to respected area */
  214. jQuery( document.body ).on('click', 'a.um-admin-drag-add-field', function() {
  215. in_row = jQuery(this).parents('.um-admin-drag-row').index();
  216. in_sub_row = jQuery(this).parents('.um-admin-drag-rowsub').index();
  217. if ( jQuery(this).parents('.um-admin-drag-rowsub').find('.um-admin-drag-col').length == 1 ) {
  218. in_column = 1;
  219. } else {
  220. if ( jQuery(this).parents('.um-admin-drag-col').hasClass('cols-middle')){
  221. in_column = 2;
  222. } else if ( jQuery(this).parents('.um-admin-drag-col').hasClass('cols-last') ) {
  223. if ( jQuery(this).parents('.um-admin-drag-rowsub').find('.um-admin-drag-col').length == 3 ) {
  224. in_column = 3;
  225. } else {
  226. in_column = 2;
  227. }
  228. } else {
  229. in_column = 1;
  230. }
  231. }
  232. if ( jQuery(this).parents('.um-admin-drag-group').length ) {
  233. in_group = jQuery(this).parents('.um-admin-drag-fld.um-field-type-group').data('key');
  234. } else {
  235. in_group = '';
  236. }
  237. jQuery('.um-col-demon-settings').data('in_row', in_row);
  238. jQuery('.um-col-demon-settings').data('in_sub_row', in_sub_row);
  239. jQuery('.um-col-demon-settings').data('in_column', in_column);
  240. jQuery('.um-col-demon-settings').data('in_group', in_group);
  241. });
  242. /* add row */
  243. jQuery(document.body).on('click', '*[data-row_action="add_row"]', function(){
  244. var dragg = jQuery('.um-admin-drag-ajax');
  245. dragg.append( '<div class="um-admin-drag-row">' + jQuery('.um-col-demon-row').html() + '</div>' );
  246. dragg.find('.um-admin-drag-row:last').find('.um-admin-drag-row-icons').find('a.um-admin-drag-row-edit').attr('data-arg3', '_um_row_' + ( dragg.find('.um-admin-drag-row').length ) );
  247. dragg.find('.um-admin-drag-row:last').attr('data-original', '_um_row_' + ( dragg.find('.um-admin-drag-row').length ) );
  248. UM_update_rows();
  249. UM_update_subrows();
  250. UM_Rows_Refresh();
  251. });
  252. /* add sub row */
  253. jQuery(document.body).on('click', '*[data-row_action="add_subrow"]', function(){
  254. var dragg = jQuery(this).parents('.um-admin-drag-row').find('.um-admin-drag-rowsubs');
  255. dragg.append( '<div class="um-admin-drag-rowsub">' + jQuery('.um-col-demon-subrow').html() + '</div>' );
  256. UM_update_subrows();
  257. UM_Rows_Refresh();
  258. });
  259. /* remove element */
  260. jQuery(document.body).on('click', 'a[data-remove_element^="um-"]',function(){
  261. element = jQuery(this).data('remove_element');
  262. jQuery(this).parents('.' +element).find('.um-admin-drag-fld').each(function(){
  263. jQuery(this).find('a[data-silent_action="um_admin_remove_field"]').trigger('click');
  264. });
  265. jQuery(this).parents('.' +element).remove();
  266. jQuery('.tipsy').remove();
  267. UM_Rows_Refresh();
  268. });
  269. /* dynamically change columns */
  270. jQuery(document.body).on('click', '.um-admin-drag-ctrls.columns a', function(){
  271. var row = jQuery(this).parents('.um-admin-drag-rowsub');
  272. var tab = jQuery(this);
  273. var tabs = jQuery(this).parent();
  274. tabs.find('a').removeClass('active');
  275. tab.addClass('active');
  276. var existing_cols = row.find('.um-admin-drag-col').length;
  277. var required_cols = tab.data('cols');
  278. var needed_cols = required_cols - existing_cols;
  279. if ( needed_cols > 0 ) {
  280. for (i = 0; i < needed_cols; i++){
  281. row.find('.um-admin-drag-col-dynamic').append('<div class="um-admin-drag-col"></div>');
  282. }
  283. row.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle');
  284. row.find('.um-admin-drag-col').addClass('cols-' + row.find('.um-admin-drag-col').length );
  285. row.find('.um-admin-drag-col:last').addClass('cols-last');
  286. if ( row.find('.um-admin-drag-col').length == 3 ) {row.find('.um-admin-drag-col:eq(1)').addClass('cols-middle');}
  287. } else if ( needed_cols < 0 ) {
  288. needed_cols = needed_cols + 3;
  289. if ( needed_cols == 2 ) {
  290. row.find('.um-admin-drag-col:first').append( row.find('.um-admin-drag-col.cols-last').html() );
  291. row.find('.um-admin-drag-col.cols-last').remove();
  292. }
  293. if ( needed_cols == 1 ) {
  294. row.find('.um-admin-drag-col:first').append( row.find('.um-admin-drag-col.cols-last').html() );
  295. row.find('.um-admin-drag-col:first').append( row.find('.um-admin-drag-col.cols-middle').html() );
  296. row.find('.um-admin-drag-col.cols-last').remove();
  297. row.find('.um-admin-drag-col.cols-middle').remove();
  298. }
  299. row.find('.um-admin-drag-col').removeClass('cols-1 cols-2 cols-3 cols-last cols-middle');
  300. row.find('.um-admin-drag-col').addClass('cols-' + row.find('.um-admin-drag-col:visible').length );
  301. row.find('.um-admin-drag-col:last').addClass('cols-last');
  302. }
  303. if ( allow_update_via_col_click == true ) {
  304. UM_Change_Field_Col();
  305. UM_Rows_Refresh();
  306. }
  307. });
  308. /* trigger columns at start */
  309. allow_update_via_col_click = false;
  310. jQuery('.um-admin-drag-ctrls.columns a.active').each(function(){
  311. jQuery(this).trigger('click');
  312. }).promise().done( function(){ allow_update_via_col_click = true; } );
  313. UM_Rows_Refresh();
  314. });