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">';