Tumbili: Mailchimp Signup for Gutenberg - Version 0.5

Version Description

  • Fixed client issue with multiple forms using vanilla js
Download this release

Release Info

Developer gubbigubbi
Plugin Icon 128x128 Tumbili: Mailchimp Signup for Gutenberg
Version 0.5
Comparing to
See all releases

Code changes from version 0.4 to 0.5

Files changed (6) hide show
  1. dist/client.babel.js +135 -0
  2. plugin.php +1 -1
  3. readme.txt +5 -2
  4. src/client.js +113 -92
  5. src/init.php +1 -1
  6. src/server.php +1 -1
dist/client.babel.js ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ "use strict";
2
+
3
+ //
4
+ // DOM READY SCRIPT
5
+ //
6
+ var domIsReady = function (domIsReady) {
7
+ var isBrowserIeOrNot = function isBrowserIeOrNot() {
8
+ return !document.attachEvent || typeof document.attachEvent === 'undefined' ? 'not-ie' : 'ie';
9
+ };
10
+
11
+ domIsReady = function domIsReady(callback) {
12
+ if (callback && typeof callback === 'function') {
13
+ if (isBrowserIeOrNot() !== 'ie') {
14
+ document.addEventListener('DOMContentLoaded', function () {
15
+ return callback();
16
+ });
17
+ } else {
18
+ document.attachEvent('onreadystatechange', function () {
19
+ if (document.readyState === 'complete') {
20
+ return callback();
21
+ }
22
+ });
23
+ }
24
+ } else {
25
+ console.error('The callback is not a function!');
26
+ }
27
+ };
28
+
29
+ return domIsReady;
30
+ }(domIsReady || {}); //
31
+ // DOM IS READY
32
+ //
33
+
34
+
35
+ (function (document, window, domIsReady, undefined) {
36
+ domIsReady(function () {
37
+ function tumbiliSubmitForm(evt) {
38
+ var form = evt.target; // console.log( form.querySelectorAll( '.tumbili-loader' ) );
39
+
40
+ var loader = form.querySelector('.tumbili-loader');
41
+ var data = {};
42
+ data.fname = form.querySelector('.tumbiliFName') ? form.querySelector('.tumbiliFName').value : '';
43
+ data.lname = form.querySelector('.tumbiliLName') ? form.querySelector('.tumbiliLName').value : '';
44
+ data.email = form.querySelector('.tumbiliEmail') ? form.querySelector('.tumbiliEmail').value : '';
45
+ data.apikey = form.dataset.apikey;
46
+ data.listID = form.dataset.listid;
47
+ data.dc = form.dataset.apikey.split('-')[1];
48
+ sendRequestViaAJAX(data, form, loader);
49
+ }
50
+
51
+ function sendRequestViaAJAX(formData, form, loader) {
52
+ var data = 'action=tumbili_mailchimp_add_subscriber&formData[apikey]=' + formData.apikey + '&formData[listID]=' + formData.listID + '&formData[dc]=' + formData.dc + '&formData[fname]=' + formData.fname + '&formData[lname]=' + formData.lname + '&formData[email]=' + formData.email;
53
+ var serializedData = encodeURI(data);
54
+ var xhr = new XMLHttpRequest();
55
+ var url = tumbili.ajax_url;
56
+ form.classList.toggle('isSubmitting');
57
+ loader.classList.toggle('is-hiding');
58
+ xhr.open('POST', url, true);
59
+ xhr.setRequestHeader('Accept', 'application/json, text/javascript, */*; q=0.01');
60
+ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
61
+ xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
62
+ xhr.responseType = 'json';
63
+
64
+ xhr.onerror = function () {
65
+ console.log('Error: Do something else...');
66
+ };
67
+
68
+ xhr.onprogress = function () {
69
+ console.log('status:LOADING', xhr.status, ' STATE', xhr.readyState, ' RESPONSE', JSON.parse(xhr.response));
70
+ };
71
+
72
+ xhr.onload = function (response) {
73
+ if (this.status == 200) {
74
+ form.classList.toggle('isSubmitting');
75
+ loader.classList.toggle('is-hiding');
76
+ console.log('status:DONE', xhr.status, ' STATE', xhr.readyState, 'NoParseResponse', this.response); // JSON response
77
+
78
+ var mailchimpResponse = this.response;
79
+ showApiResult(mailchimpResponse, form);
80
+ }
81
+ };
82
+
83
+ xhr.send(serializedData);
84
+ }
85
+
86
+ function showApiResult(response, form) {
87
+ var title;
88
+
89
+ if (response.status === 400) {
90
+ switch (response.title) {
91
+ case 'Forgotten Email Not Subscribed':
92
+ title = 'Looks like you unsubscribed from this list previously, please contact us to resubscribe';
93
+ break;
94
+
95
+ case 'Member Exists':
96
+ title = '😄 Looks you are already subscribed';
97
+ break;
98
+
99
+ default:
100
+ title = "Oops something wen't wrong: ".concat(response.title);
101
+ }
102
+ } else {
103
+ title = '🎉 You have subscribed. Please check your inbox for confirmation.';
104
+ }
105
+
106
+ toggleForm(title, form);
107
+ }
108
+
109
+ function toggleForm() {
110
+ var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
111
+ var form = arguments.length > 1 ? arguments[1] : undefined;
112
+ var formContainer = form.querySelector('.tumbili-container');
113
+ var responseContainer = form.querySelector('.tumbili-response');
114
+ formContainer.classList.toggle('is-hiding');
115
+ responseContainer.classList.toggle('is-hiding');
116
+ responseContainer.innerHTML = title;
117
+ }
118
+
119
+ var formTumbili = document.querySelectorAll('.tumbili-form');
120
+
121
+ for (var i = 0; i < formTumbili.length; i++) {
122
+ console.log('docForms[i]: ', formTumbili[i]);
123
+ formTumbili[i].addEventListener('submit', function (evt) {
124
+ evt.preventDefault();
125
+ tumbiliSubmitForm(evt);
126
+ });
127
+ }
128
+
129
+ if (document.querySelector('.tumbili-response')) {
130
+ document.querySelector('.tumbili-response').onclick = function () {
131
+ toggleForm();
132
+ };
133
+ }
134
+ });
135
+ })(document, window, domIsReady);
plugin.php CHANGED
@@ -5,7 +5,7 @@
5
  * Description: Easily add a mailchimp signup form to your editor.
6
  * Author: gubbigubbi
7
  * Author URI: https://github.com/gubbigubbi/
8
- * Version: 0.4
9
  * License: GPL2+
10
  * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
11
  *
5
  * Description: Easily add a mailchimp signup form to your editor.
6
  * Author: gubbigubbi
7
  * Author URI: https://github.com/gubbigubbi/
8
+ * Version: 0.5
9
  * License: GPL2+
10
  * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
11
  *
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: gubbigubbi
3
  Tags: gutenberg, mailchimp, mailchimp signup, mailchimp form
4
  Requires at least: 4.9.6
5
  Tested up to: 5.0
6
- Stable tag: 0.4
7
  Requires PHP: 5.4
8
  License: GPLv2 or later
9
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -35,7 +35,7 @@ Firstly make sure that you have the Gutenberg plugin installed.
35
  We will continue adding features as requested. If you have a killer idea for a feature submit a support request and we will see what we can do.
36
  Note: we plan to release a premium version of the plugin which will likely receive new features first - this helps offset the cost of our development time.
37
 
38
- = The feed looks funny in I10 (Or other old browser)
39
 
40
  This plugin is laid out using Flexbox, we do not have plans to support older browsers as we believe they are holding back the web. However we can (if requested) release some code which you can add to your site's custom css in order to support certain browsers.
41
 
@@ -46,6 +46,9 @@ This plugin is laid out using Flexbox, we do not have plans to support older bro
46
 
47
  == Changelog ==
48
 
 
 
 
49
  = 0.4 =
50
  * WP 5.0 support
51
 
3
  Tags: gutenberg, mailchimp, mailchimp signup, mailchimp form
4
  Requires at least: 4.9.6
5
  Tested up to: 5.0
6
+ Stable tag: 0.5
7
  Requires PHP: 5.4
8
  License: GPLv2 or later
9
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
35
  We will continue adding features as requested. If you have a killer idea for a feature submit a support request and we will see what we can do.
36
  Note: we plan to release a premium version of the plugin which will likely receive new features first - this helps offset the cost of our development time.
37
 
38
+ = The feed looks funny in IE10 (Or other old browser)
39
 
40
  This plugin is laid out using Flexbox, we do not have plans to support older browsers as we believe they are holding back the web. However we can (if requested) release some code which you can add to your site's custom css in order to support certain browsers.
41
 
46
 
47
  == Changelog ==
48
 
49
+ = 0.5 =
50
+ * Fixed client issue with multiple forms using vanilla js
51
+
52
  = 0.4 =
53
  * WP 5.0 support
54
 
src/client.js CHANGED
@@ -1,59 +1,55 @@
1
  //
2
  // DOM READY SCRIPT
3
  //
4
- var domIsReady = (function(domIsReady) {
5
- var isBrowserIeOrNot = function() {
6
- return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
7
- }
8
-
9
- domIsReady = function(callback) {
10
- if(callback && typeof callback === 'function'){
11
- if(isBrowserIeOrNot() !== 'ie') {
12
- document.addEventListener("DOMContentLoaded", function() {
13
- return callback();
14
- });
15
- } else {
16
- document.attachEvent("onreadystatechange", function() {
17
- if(document.readyState === "complete") {
18
- return callback();
19
- }
20
- });
21
- }
22
- } else {
23
- console.error('The callback is not a function!');
24
- }
25
- }
26
-
27
- return domIsReady;
28
- })(domIsReady || {});
 
 
29
 
30
  //
31
  // DOM IS READY
32
  //
33
- (function(document, window, domIsReady, undefined) {
34
- domIsReady(function() {
35
-
36
  function tumbiliSubmitForm( evt ) {
37
  const form = evt.target;
38
- const loader = document.querySelector( '.tumbili-loader' );
 
39
  const data = {};
40
 
41
  data.fname = form.querySelector( '.tumbiliFName' ) ?
42
- form
43
- .querySelector( '.tumbiliFName' )
44
- .value :
45
  '';
46
 
47
  data.lname = form.querySelector( '.tumbiliLName' ) ?
48
- form
49
- .querySelector( '.tumbiliLName' )
50
- .value :
51
  '';
52
 
53
  data.email = form.querySelector( '.tumbiliEmail' ) ?
54
- form
55
- .querySelector( '.tumbiliEmail' )
56
- .value :
57
  '';
58
 
59
  data.apikey = form.dataset.apikey;
@@ -64,42 +60,73 @@ var domIsReady = (function(domIsReady) {
64
  }
65
 
66
  function sendRequestViaAJAX( formData, form, loader ) {
67
- var data = 'action=tumbili_mailchimp_add_subscriber&formData[apikey]=' + formData.apikey + '&formData[listID]=' + formData.listID + '&formData[dc]=' + formData.dc + '&formData[fname]=' + formData.fname + '&formData[lname]=' + formData.lname + '&formData[email]=' + formData.email;
68
-
69
- var serialized_data = encodeURI( data );
70
-
71
- var xhr = new XMLHttpRequest();
72
- var url = tumbili.ajax_url;
73
-
74
- form.classList.toggle( 'isSubmitting' );
75
- loader.classList.toggle( 'is-hiding' );
76
-
77
- xhr.open( "POST", url, true);
78
- xhr.setRequestHeader( 'Accept', 'application/json, text/javascript, */*; q=0.01' );
79
- xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' );
80
- xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
81
-
82
- xhr.responseType = 'json';
83
- xhr.onerror = function(){
84
- console.log( 'Error: Do something else...' );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  }
86
- xhr.onprogress = function () {
87
- console.log( 'status:LOADING', xhr.status, ' STATE', xhr.readyState, ' RESPONSE', JSON.parse(xhr.response) );
88
- };
89
- xhr.onload = function ( response ) {
90
- if (this.status == 200) {
91
- form.classList.toggle( 'isSubmitting' );
92
- loader.classList.toggle( 'is-hiding' );
93
- console.log( 'status:DONE', xhr.status, ' STATE', xhr.readyState, 'NoParseResponse', this.response ); // JSON response
94
- var mailchimpResponse = this.response;
95
- showApiResult( mailchimpResponse );
96
- }
97
- };
98
- xhr.send( serialized_data );
99
- }
100
 
101
- function showApiResult( response ) {
102
- console.log( response );
103
  let title;
104
 
105
  if ( response.status === 400 ) {
@@ -119,38 +146,32 @@ var domIsReady = (function(domIsReady) {
119
  '🎉 You have subscribed. Please check your inbox for confirmation.';
120
  }
121
 
122
- toggleForm( title );
123
  }
124
 
125
-
126
- function toggleForm( title = '' ) {
127
- const formContainer = document.querySelector( '.tumbili-container' );
128
- const responseContainer = document.querySelector( '.tumbili-response' );
129
  formContainer.classList.toggle( 'is-hiding' );
130
  responseContainer.classList.toggle( 'is-hiding' );
131
  responseContainer.innerHTML = title;
132
  }
133
 
 
134
 
135
- var docForms = document.querySelectorAll('form');
136
- var formTumbili = document.querySelectorAll('.tumbili-form');
137
- for (var i = 0; i < docForms.length; i++) {
138
- console.log('docForms[i]: ', docForms[i]);
139
- if ( docForms[i].classList.contains( 'tumbili-form' ) ) {
140
- console.log('tumbili-form!!!!');
141
- this.addEventListener( 'submit', function( evt ) {
142
- evt.preventDefault();
143
- tumbiliSubmitForm( evt );
144
- } );
145
- }
146
- }
147
 
 
 
 
 
 
148
 
149
  if ( document.querySelector( '.tumbili-response' ) ) {
150
  document.querySelector( '.tumbili-response' ).onclick = function() {
151
  toggleForm();
152
  };
153
  }
154
-
155
- });
156
- })(document, window, domIsReady);
1
  //
2
  // DOM READY SCRIPT
3
  //
4
+ var domIsReady = ( function( domIsReady ) {
5
+ const isBrowserIeOrNot = function() {
6
+ return ! document.attachEvent || typeof document.attachEvent === 'undefined' ?
7
+ 'not-ie' :
8
+ 'ie';
9
+ };
10
+
11
+ domIsReady = function( callback ) {
12
+ if ( callback && typeof callback === 'function' ) {
13
+ if ( isBrowserIeOrNot() !== 'ie' ) {
14
+ document.addEventListener( 'DOMContentLoaded', function() {
15
+ return callback();
16
+ } );
17
+ } else {
18
+ document.attachEvent( 'onreadystatechange', function() {
19
+ if ( document.readyState === 'complete' ) {
20
+ return callback();
21
+ }
22
+ } );
23
+ }
24
+ } else {
25
+ console.error( 'The callback is not a function!' );
26
+ }
27
+ };
28
+
29
+ return domIsReady;
30
+ }( domIsReady || {} ) );
31
 
32
  //
33
  // DOM IS READY
34
  //
35
+ ( function( document, window, domIsReady, undefined ) {
36
+ domIsReady( function() {
 
37
  function tumbiliSubmitForm( evt ) {
38
  const form = evt.target;
39
+ // console.log( form.querySelectorAll( '.tumbili-loader' ) );
40
+ const loader = form.querySelector( '.tumbili-loader' );
41
  const data = {};
42
 
43
  data.fname = form.querySelector( '.tumbiliFName' ) ?
44
+ form.querySelector( '.tumbiliFName' ).value :
 
 
45
  '';
46
 
47
  data.lname = form.querySelector( '.tumbiliLName' ) ?
48
+ form.querySelector( '.tumbiliLName' ).value :
 
 
49
  '';
50
 
51
  data.email = form.querySelector( '.tumbiliEmail' ) ?
52
+ form.querySelector( '.tumbiliEmail' ).value :
 
 
53
  '';
54
 
55
  data.apikey = form.dataset.apikey;
60
  }
61
 
62
  function sendRequestViaAJAX( formData, form, loader ) {
63
+ const data =
64
+ 'action=tumbili_mailchimp_add_subscriber&formData[apikey]=' +
65
+ formData.apikey +
66
+ '&formData[listID]=' +
67
+ formData.listID +
68
+ '&formData[dc]=' +
69
+ formData.dc +
70
+ '&formData[fname]=' +
71
+ formData.fname +
72
+ '&formData[lname]=' +
73
+ formData.lname +
74
+ '&formData[email]=' +
75
+ formData.email;
76
+
77
+ const serializedData = encodeURI( data );
78
+
79
+ const xhr = new XMLHttpRequest();
80
+ const url = tumbili.ajax_url;
81
+
82
+ form.classList.toggle( 'isSubmitting' );
83
+ loader.classList.toggle( 'is-hiding' );
84
+
85
+ xhr.open( 'POST', url, true );
86
+ xhr.setRequestHeader(
87
+ 'Accept',
88
+ 'application/json, text/javascript, */*; q=0.01'
89
+ );
90
+ xhr.setRequestHeader(
91
+ 'Content-Type',
92
+ 'application/x-www-form-urlencoded; charset=UTF-8'
93
+ );
94
+ xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
95
+
96
+ xhr.responseType = 'json';
97
+ xhr.onerror = function() {
98
+ console.log( 'Error: Do something else...' );
99
+ };
100
+ xhr.onprogress = function() {
101
+ console.log(
102
+ 'status:LOADING',
103
+ xhr.status,
104
+ ' STATE',
105
+ xhr.readyState,
106
+ ' RESPONSE',
107
+ JSON.parse( xhr.response )
108
+ );
109
+ };
110
+ xhr.onload = function( response ) {
111
+ if ( this.status == 200 ) {
112
+ form.classList.toggle( 'isSubmitting' );
113
+ loader.classList.toggle( 'is-hiding' );
114
+ console.log(
115
+ 'status:DONE',
116
+ xhr.status,
117
+ ' STATE',
118
+ xhr.readyState,
119
+ 'NoParseResponse',
120
+ this.response
121
+ ); // JSON response
122
+ const mailchimpResponse = this.response;
123
+ showApiResult( mailchimpResponse, form );
124
  }
125
+ };
126
+ xhr.send( serializedData );
127
+ }
 
 
 
 
 
 
 
 
 
 
 
128
 
129
+ function showApiResult( response, form ) {
 
130
  let title;
131
 
132
  if ( response.status === 400 ) {
146
  '🎉 You have subscribed. Please check your inbox for confirmation.';
147
  }
148
 
149
+ toggleForm( title, form );
150
  }
151
 
152
+ function toggleForm( title = '', form ) {
153
+ const formContainer = form.querySelector( '.tumbili-container' );
154
+ const responseContainer = form.querySelector( '.tumbili-response' );
 
155
  formContainer.classList.toggle( 'is-hiding' );
156
  responseContainer.classList.toggle( 'is-hiding' );
157
  responseContainer.innerHTML = title;
158
  }
159
 
160
+ const formTumbili = document.querySelectorAll( '.tumbili-form' );
161
 
162
+ for ( let i = 0; i < formTumbili.length; i++ ) {
163
+ console.log( 'docForms[i]: ', formTumbili[ i ] );
 
 
 
 
 
 
 
 
 
 
164
 
165
+ formTumbili[ i ].addEventListener( 'submit', function( evt ) {
166
+ evt.preventDefault();
167
+ tumbiliSubmitForm( evt );
168
+ } );
169
+ }
170
 
171
  if ( document.querySelector( '.tumbili-response' ) ) {
172
  document.querySelector( '.tumbili-response' ).onclick = function() {
173
  toggleForm();
174
  };
175
  }
176
+ } );
177
+ }( document, window, domIsReady ) );
 
src/init.php CHANGED
@@ -41,7 +41,7 @@ add_action( 'enqueue_block_assets', 'tumbili_block_assets' );
41
  */
42
 
43
  function tumbili_client_assets() {
44
- wp_enqueue_script( 'tumbili-js', plugins_url( 'src/client.js', dirname( __FILE__ ) ), array(), true );
45
 
46
  wp_localize_script( 'tumbili-js', 'tumbili', array(
47
  'ajax_url' => admin_url( 'admin-ajax.php' )
41
  */
42
 
43
  function tumbili_client_assets() {
44
+ wp_enqueue_script( 'tumbili-js', plugins_url( 'dist/client.babel.js', dirname( __FILE__ ) ), array(), true );
45
 
46
  wp_localize_script( 'tumbili-js', 'tumbili', array(
47
  'ajax_url' => admin_url( 'admin-ajax.php' )
src/server.php CHANGED
@@ -131,7 +131,7 @@ function tumbili_render_callback( array $attributes ){
131
  </div>';
132
  }
133
 
134
- $markup = '<form class="tumbili-form" data-apikey="'.$apiKey.'" data-listid="'.$listID.'" action="'.$formAction.'" method="post" class="wp-block-cgb-tumbili-mailchimp-for-gutenberg">';
135
 
136
  $markup .= '<a class="tumbili-response will-animate is-hiding"></a>';
137
  $markup .= '<div class="display-flex tumbili-container will-animate">';
131
  </div>';
132
  }
133
 
134
+ $markup = '<form class="tumbili-form" id="tumbili-form-'.rand(0, 1000).'" data-apikey="'.$apiKey.'" data-listid="'.$listID.'" action="'.$formAction.'" method="post" class="wp-block-cgb-tumbili-mailchimp-for-gutenberg">';
135
 
136
  $markup .= '<a class="tumbili-response will-animate is-hiding"></a>';
137
  $markup .= '<div class="display-flex tumbili-container will-animate">';