fl-builder-services.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. (function( $ ) {
  2. /**
  3. * JavaScript class for working with third party services.
  4. *
  5. * @since 1.5.4
  6. */
  7. var FLBuilderServices = {
  8. /**
  9. * Initializes the services logic.
  10. *
  11. * @return void
  12. * @since 1.5.4
  13. */
  14. init: function()
  15. {
  16. var body = $('body', window.parent.document);
  17. // Standard Events
  18. body.on( 'change', '.fl-builder-service-select', this._serviceChange );
  19. body.on( 'click', '.fl-builder-service-connect-button', this._connectClicked );
  20. body.on( 'change', '.fl-builder-service-account-select', this._accountChange );
  21. body.on( 'click', '.fl-builder-service-account-delete', this._accountDeleteClicked );
  22. // Campaign Monitor Events
  23. body.on( 'change', '.fl-builder-campaign-monitor-client-select', this._campaignMonitorClientChange );
  24. // MailChimp Events
  25. body.on( 'change', '.fl-builder-mailchimp-list-select', this._mailChimpListChange );
  26. // ActiveCampaign Events
  27. body.on( 'change', '.fl-builder-activecampaign-list_type-select', this._activeCampaignChange );
  28. },
  29. /**
  30. * Show the lightbox loading graphic and remove errors.
  31. *
  32. * @param {Object} ele An element within the lightbox.
  33. * @return void
  34. * @since 1.5.4
  35. */
  36. _startSettingsLoading: function( ele )
  37. {
  38. var lightbox = $( '.fl-builder-settings', window.parent.document ),
  39. wrap = ele.closest( '.fl-builder-service-settings', window.parent.document ),
  40. error = $( '.fl-builder-service-error', window.parent.document );
  41. lightbox.append( '<div class="fl-builder-loading"></div>' );
  42. wrap.addClass( 'fl-builder-service-settings-loading' );
  43. error.remove();
  44. },
  45. /**
  46. * Remove the lightbox loading graphic.
  47. *
  48. * @return void
  49. * @since 1.5.4
  50. */
  51. _finishSettingsLoading: function()
  52. {
  53. var lightbox = $( '.fl-builder-settings', window.parent.document ),
  54. wrap = $( '.fl-builder-service-settings-loading', window.parent.document );
  55. lightbox.find( '.fl-builder-loading' ).remove();
  56. wrap.removeClass( 'fl-builder-service-settings-loading' );
  57. },
  58. /**
  59. * Fires when the service select changes.
  60. *
  61. * @return void
  62. * @since 1.5.4
  63. */
  64. _serviceChange: function()
  65. {
  66. var nodeId = $( '.fl-builder-settings', window.parent.document ).data( 'node' ),
  67. select = $( this ),
  68. selectRow = select.closest( 'tr' ),
  69. service = select.val();
  70. selectRow.siblings( 'tr.fl-builder-service-account-row' ).remove();
  71. selectRow.siblings( 'tr.fl-builder-service-connect-row' ).remove();
  72. selectRow.siblings( 'tr.fl-builder-service-field-row' ).remove();
  73. $( '.fl-builder-service-error', window.parent.document ).remove();
  74. if ( '' === service ) {
  75. return;
  76. }
  77. FLBuilderServices._startSettingsLoading( select );
  78. FLBuilder.ajax( {
  79. action : 'render_service_settings',
  80. node_id : nodeId,
  81. service : service
  82. }, FLBuilderServices._serviceChangeComplete );
  83. },
  84. /**
  85. * AJAX callback for when the service select changes.
  86. *
  87. * @param {String} response The JSON response.
  88. * @return void
  89. * @since 1.5.4
  90. */
  91. _serviceChangeComplete: function( response )
  92. {
  93. var data = FLBuilder._jsonParse( response ),
  94. wrap = $( '.fl-builder-service-settings-loading', window.parent.document ),
  95. selectRow = wrap.find( '.fl-builder-service-select-row' );
  96. selectRow.after( data.html );
  97. FLBuilderServices._addAccountDelete( wrap );
  98. FLBuilderServices._finishSettingsLoading();
  99. },
  100. /**
  101. * Fires when the service connect button is clicked.
  102. *
  103. * @return void
  104. * @since 1.5.4
  105. */
  106. _connectClicked: function()
  107. {
  108. var nodeId = $( '.fl-builder-settings', window.parent.document ).data( 'node' ),
  109. wrap = $( this ).closest( '.fl-builder-service-settings' ),
  110. select = wrap.find( '.fl-builder-service-select' ),
  111. connectRows = wrap.find( '.fl-builder-service-connect-row' ),
  112. connectInputs = wrap.find( '.fl-builder-service-connect-input' ),
  113. input = null,
  114. name = null,
  115. i = 0,
  116. data = {
  117. action : 'connect_service',
  118. node_id : nodeId,
  119. service : select.val(),
  120. fields : {}
  121. };
  122. for ( ; i < connectInputs.length; i++ ) {
  123. input = connectInputs.eq( i );
  124. name = input.attr( 'name' );
  125. data.fields[ name ] = input.val();
  126. }
  127. connectRows.hide();
  128. FLBuilderServices._startSettingsLoading( select );
  129. FLBuilder.ajax( data, FLBuilderServices._connectComplete );
  130. },
  131. /**
  132. * AJAX callback for when the service connect button is clicked.
  133. *
  134. * @param {String} response The JSON response.
  135. * @return void
  136. * @since 1.5.4
  137. */
  138. _connectComplete: function( response )
  139. {
  140. var data = FLBuilder._jsonParse( response ),
  141. wrap = $( '.fl-builder-service-settings-loading', window.parent.document ),
  142. selectRow = wrap.find( '.fl-builder-service-select-row' ),
  143. select = wrap.find( '.fl-builder-service-select' ),
  144. accountRow = wrap.find( '.fl-builder-service-account-row' ),
  145. account = wrap.find( '.fl-builder-service-account-select' ),
  146. connectRows = wrap.find( '.fl-builder-service-connect-row' );
  147. if ( data.error ) {
  148. connectRows.show();
  149. if ( 0 === account.length ) {
  150. select.after( '<div class="fl-builder-service-error">' + data.error + '</div>' );
  151. }
  152. else {
  153. account.after( '<div class="fl-builder-service-error">' + data.error + '</div>' );
  154. }
  155. }
  156. else {
  157. connectRows.remove();
  158. accountRow.remove();
  159. selectRow.after( data.html );
  160. }
  161. FLBuilderServices._addAccountDelete( wrap );
  162. FLBuilderServices._finishSettingsLoading();
  163. },
  164. /**
  165. * Fires when the service account select changes.
  166. *
  167. * @return void
  168. * @since 1.5.4
  169. */
  170. _accountChange: function()
  171. {
  172. var nodeId = $( '.fl-builder-settings', window.parent.document ).data( 'node' ),
  173. wrap = $( this ).closest( '.fl-builder-service-settings' ),
  174. select = wrap.find( '.fl-builder-service-select' ),
  175. account = wrap.find( '.fl-builder-service-account-select' ),
  176. connectRows = wrap.find( '.fl-builder-service-connect-row' ),
  177. fieldRows = wrap.find( 'tr.fl-builder-service-field-row' ),
  178. error = $( '.fl-builder-service-error', window.parent.document ),
  179. value = account.val(),
  180. data = null;
  181. connectRows.remove();
  182. fieldRows.remove();
  183. error.remove();
  184. if ( 'add_new_account' == value ) {
  185. data = {
  186. action : 'render_service_settings',
  187. node_id : nodeId,
  188. service : select.val(),
  189. add_new : true
  190. };
  191. }
  192. else if ( '' !== value ) {
  193. data = {
  194. action : 'render_service_fields',
  195. node_id : nodeId,
  196. service : select.val(),
  197. account : value
  198. };
  199. }
  200. if ( data ) {
  201. FLBuilderServices._startSettingsLoading( select );
  202. FLBuilder.ajax( data, FLBuilderServices._accountChangeComplete );
  203. }
  204. FLBuilderServices._addAccountDelete( wrap );
  205. },
  206. /**
  207. * AJAX callback for when the service account select changes.
  208. *
  209. * @param {String} response The JSON response.
  210. * @return void
  211. * @since 1.5.4
  212. */
  213. _accountChangeComplete: function( response )
  214. {
  215. var data = FLBuilder._jsonParse( response ),
  216. wrap = $( '.fl-builder-service-settings-loading', window.parent.document ),
  217. accountRow = wrap.find( '.fl-builder-service-account-row' );
  218. accountRow.after( data.html );
  219. FLBuilderServices._finishSettingsLoading();
  220. },
  221. /**
  222. * Adds an account delete link.
  223. *
  224. * @param {Object} wrap An element within the lightbox.
  225. * @return void
  226. * @since 1.5.4
  227. */
  228. _addAccountDelete: function( wrap )
  229. {
  230. var account = wrap.find( '.fl-builder-service-account-select' );
  231. if ( account.length > 0 ) {
  232. wrap.find( '.fl-builder-service-account-delete' ).remove();
  233. if ( '' !== account.val() && 'add_new_account' != account.val() ) {
  234. account.after( '<a href="javascript:void(0);" class="fl-builder-service-account-delete">' + FLBuilderStrings.deleteAccount + '</a>' );
  235. }
  236. }
  237. },
  238. /**
  239. * Fires when the account delete link is clicked.
  240. *
  241. * @return void
  242. * @since 1.5.4
  243. */
  244. _accountDeleteClicked: function()
  245. {
  246. var wrap = $( this ).closest( '.fl-builder-service-settings' ),
  247. select = wrap.find( '.fl-builder-service-select' ),
  248. account = wrap.find( '.fl-builder-service-account-select' );
  249. if ( confirm( FLBuilderStrings.deleteAccountWarning ) ) {
  250. FLBuilder.ajax( {
  251. action : 'delete_service_account',
  252. service : select.val(),
  253. account : account.val()
  254. }, FLBuilderServices._accountDeleteComplete );
  255. FLBuilderServices._startSettingsLoading( account );
  256. }
  257. },
  258. /**
  259. * AJAX callback for when the account delete link is clicked.
  260. *
  261. * @return void
  262. * @since 1.5.4
  263. */
  264. _accountDeleteComplete: function()
  265. {
  266. var wrap = $( '.fl-builder-service-settings-loading', window.parent.document ),
  267. select = wrap.find( '.fl-builder-service-select' );
  268. FLBuilderServices._finishSettingsLoading();
  269. select.trigger( 'change' );
  270. },
  271. /* Campaign Monitor
  272. ----------------------------------------------------------*/
  273. /**
  274. * Fires when the Campaign Monitor client select is changed.
  275. *
  276. * @return void
  277. * @since 1.5.4
  278. */
  279. _campaignMonitorClientChange: function()
  280. {
  281. var nodeId = $( '.fl-builder-settings', window.parent.document ).data( 'node' ),
  282. wrap = $( this ).closest( '.fl-builder-service-settings' ),
  283. select = wrap.find( '.fl-builder-service-select' ),
  284. account = wrap.find( '.fl-builder-service-account-select' ),
  285. client = $( this ),
  286. list = wrap.find( '.fl-builder-service-list-select' ),
  287. value = client.val();
  288. if ( 0 !== list.length ) {
  289. list.closest( 'tr' ).remove();
  290. }
  291. if ( '' === value ) {
  292. return;
  293. }
  294. FLBuilderServices._startSettingsLoading( select );
  295. FLBuilder.ajax( {
  296. action : 'render_service_fields',
  297. node_id : nodeId,
  298. service : select.val(),
  299. account : account.val(),
  300. client : value
  301. }, FLBuilderServices._campaignMonitorClientChangeComplete );
  302. },
  303. /**
  304. * AJAX callback for when the Campaign Monitor client select is changed.
  305. *
  306. * @param {String} response The JSON response.
  307. * @return void
  308. * @since 1.5.4
  309. */
  310. _campaignMonitorClientChangeComplete: function( response )
  311. {
  312. var data = FLBuilder._jsonParse( response ),
  313. wrap = $( '.fl-builder-service-settings-loading', window.parent.document ),
  314. client = wrap.find( '.fl-builder-campaign-monitor-client-select' );
  315. client.closest( 'tr' ).after( data.html );
  316. FLBuilderServices._finishSettingsLoading();
  317. },
  318. /* MailChimp
  319. ----------------------------------------------------------*/
  320. /**
  321. * Fires when the MailChimp list select is changed.
  322. *
  323. * @return void
  324. * @since 1.6.0
  325. */
  326. _mailChimpListChange: function()
  327. {
  328. var nodeId = $( '.fl-builder-settings', window.parent.document ).data( 'node' ),
  329. wrap = $( this ).closest( '.fl-builder-service-settings' ),
  330. select = wrap.find( '.fl-builder-service-select' ),
  331. account = wrap.find( '.fl-builder-service-account-select' ),
  332. list = wrap.find( '.fl-builder-service-list-select' );
  333. $( '.fl-builder-mailchimp-group-select', window.parent.document ).closest( 'tr' ).remove();
  334. if ( '' === list.val() ) {
  335. return;
  336. }
  337. FLBuilderServices._startSettingsLoading( select );
  338. FLBuilder.ajax( {
  339. action : 'render_service_fields',
  340. node_id : nodeId,
  341. service : select.val(),
  342. account : account.val(),
  343. list_id : list.val()
  344. }, FLBuilderServices._mailChimpListChangeComplete );
  345. },
  346. /**
  347. * AJAX callback for when the MailChimp list select is changed.
  348. *
  349. * @param {String} response The JSON response.
  350. * @return void
  351. * @since 1.6.0
  352. */
  353. _mailChimpListChangeComplete: function( response )
  354. {
  355. var data = FLBuilder._jsonParse( response ),
  356. wrap = $( '.fl-builder-service-settings-loading', window.parent.document ),
  357. list = wrap.find( '.fl-builder-service-list-select' );
  358. list.closest( 'tr' ).after( data.html );
  359. FLBuilderServices._finishSettingsLoading();
  360. },
  361. /* ActiveCampaign
  362. ----------------------------------------------------------*/
  363. /**
  364. * Fires when the ActiveCampaign list type select is changed.
  365. *
  366. * @return void
  367. * @since 1.6.0
  368. */
  369. _activeCampaignChange: function()
  370. {
  371. var nodeId = $( '.fl-builder-settings', window.parent.document ).data( 'node' ),
  372. wrap = $( this ).closest( '.fl-builder-service-settings' ),
  373. select = wrap.find( '.fl-builder-service-select' ),
  374. account = wrap.find( '.fl-builder-service-account-select' ),
  375. list = wrap.find( '.fl-builder-service-list-select' );
  376. list_type = wrap.find( 'select[name="list_type"]' );
  377. if ( 0 !== list.length ) {
  378. list.closest( 'tr' ).remove();
  379. }
  380. if ( '' === list_type.val() ) {
  381. return;
  382. }
  383. FLBuilderServices._startSettingsLoading( select );
  384. FLBuilder.ajax( {
  385. action : 'render_service_fields',
  386. node_id : nodeId,
  387. service : select.val(),
  388. account : account.val(),
  389. list_type : list_type.val()
  390. }, FLBuilderServices._activeCampaignTypeChangeComplete );
  391. },
  392. /**
  393. * AJAX callback for when the ActiveCampaign list select is changed.
  394. *
  395. * @param {String} response The JSON response.
  396. * @return void
  397. * @since 1.6.0
  398. */
  399. _activeCampaignTypeChangeComplete: function( response )
  400. {
  401. var data = FLBuilder._jsonParse( response ),
  402. wrap = $( '.fl-builder-service-settings-loading', window.parent.document ),
  403. fieldRow = wrap.find( '.fl-builder-service-field-row' );
  404. fieldRow.after( data.html );
  405. FLBuilderServices._finishSettingsLoading();
  406. }
  407. };
  408. $ ( function() {
  409. FLBuilderServices.init();
  410. });
  411. })( jQuery );