+/scripts/public/forms.js - Code Metrics - Inspection of "rewrite public scripts" - pryley/site-reviews - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( ab24e8...554ad1 )

by Paul

created 2018-06-10 20:04 UTC

+/scripts/public/forms.js B

↳ Parent: Project

Complexity

Conditions	1
Paths	24

Size

Total Lines

206

Duplication

Lines	0
Ratio	0 %

Importance

Changes	2
Bugs	0	Features	0

Metric	Value
cc	1
c	2
b	0
f	0
nc	24
nop	0
dl	0
loc	206
rs	8.2857

20 Functions

Rating	Name	Size	Complexity
A	Form.clearFormErrors_	6	2
A	Form.onClick_	13	1
A	forms.js ➔ Form	8	1
A	Form.fallbackSubmit_	4	4
A	Form.onChange_	3	1
A	Form.disableButton_	3	1
A	Form.getFieldErrorsEl_	9	2
A	Form.init_	6	1
B	Form.handleResponse_	23	4
A	Form.initStarRatings_	7	1
A	Form.enableButton_	3	1
A	Form.getResultsEl_	9	2
A	Form.clearFieldError_	9	3
A	Form.getFormData_	6	1
A	Form.onSubmit_	7	2
A	Form.addRemoveClass_	3	2
A	Form.showFieldErrors_	12	4
A	GLSR.Forms	9	3
A	Form.submitForm_	7	1
A	Form.showResults_	5	1

How to fix Long Method

/** global: CustomEvent, GLSR, HTMLFormElement, StarRating */
;(function() {

	'use strict';

	var Form = function( formEl, buttonEl ) { // HTMLElement, HTMLElement
		this.button = buttonEl;
		this.enableButton = this.enableButton_.bind( this );
		this.form = formEl;
		this.recaptcha = new GLSR.Recaptcha( this );
		this.submitForm = this.submitForm_.bind( this );
		this.init_();
	};

	Form.prototype = {
		config: {
			fieldErrorsClass: 'glsr-field-errors',
			fieldSelector: '.glsr-field',
			formMessagesClass: 'glsr-form-messages',
			hasErrorClass: 'glsr-has-error',
		},

		/** @return void */
		addRemoveClass_: function( el, classValue, bool ) { // HTMLElement, string, bool
			el.classList[bool ? 'add' : 'remove']( classValue );
		},

		/** @return void */
		clearFieldError_: function( el ) { // HTMLElement
			var fieldEl = el.closest( this.config.fieldSelector );
			if( fieldEl === null )return;
			fieldEl.classList.remove( this.config.hasErrorClass );
			var errorEl = fieldEl.querySelector( this.config.fieldErrorsSelector );
			if( errorEl !== null ) {
				errorEl.parentNode.removeChild( errorEl );
			}
		},

		/** @return void */
		clearFormErrors_: function() {
			this.getResultsEl_().innerHTML = '';
			for( var i = 0; i < this.form.length; i++ ) {
				this.clearFieldError_( this.form[i] );
			}
		},

		/** @return void */
		disableButton_: function() {
			this.button.setAttribute( 'disabled', '' );
		},

		/** @return void */
		enableButton_: function() {
			this.button.removeAttribute( 'disabled' );
		},

		/** @return void */
		fallbackSubmit_: function() {
			if( GLSR.Ajax.isFileAPISupported() && GLSR.Ajax.isFormDataSupported() && GLSR.Ajax.isUploadSupported() )return;
			this.form.submit();
		},

		/** @return void */
		handleResponse_: function( response ) { // object
			console.log( response );

			if( response.recaptcha === true ) {
				console.log( 'executing recaptcha' );
				this.recaptcha.execute();
				return;
			}
			if( response.recaptcha === 'reset' ) {
				console.log( 'reseting failed recaptcha' );
				this.recaptcha.reset();
			}
			if( response.errors === false ) {
				console.log( 'reseting recaptcha' );
				this.recaptcha.reset();
				this.form.reset();
			}
			console.log( 'submission finished' );
			this.showFieldErrors_( response.errors );
			this.showResults_( response );
			this.enableButton_();
			response.form = this.form;
			document.dispatchEvent( new CustomEvent( 'site-reviews/after/submission', { detail: response }));
		},

		/** @return HTMLDivElement */
		getFieldErrorsEl_: function( fieldEl ) { // HTMLElement
			var errorsEl = fieldEl.querySelector( '.' + this.config.fieldErrorsClass );
			if( errorsEl === null ) {
				errorsEl = document.createElement( 'div' );
				errorsEl.setAttribute( 'class', this.config.fieldErrorsClass );
				fieldEl.appendChild( errorsEl );
			}
			return errorsEl;
		},

		/** @return object */
		getFormData_: function( recaptchaToken ) { // string|null
			recaptchaToken = recaptchaToken || '';
			var formData = new FormData( this.form );
			formData.append( 'g-recaptcha-response', recaptchaToken );
			return formData;
		},

		/** @return HTMLDivElement */
		getResultsEl_: function() {
			var resultsEl = this.form.querySelector( '.' + this.config.formMessagesClass );
			if( resultsEl === null ) {
				resultsEl = document.createElement( 'div' );
				resultsEl.setAttribute( 'class', this.config.formMessagesClass );
				this.button.parentNode.insertBefore( resultsEl, this.button.nextSibling );
			}
			return resultsEl;
		},

		/** @return void */
		init_: function() {
			this.button.addEventListener( 'click', this.onClick_.bind( this ));
			this.form.addEventListener( 'change', this.onChange_.bind( this ));
			this.form.addEventListener( 'submit', this.onSubmit_.bind( this ));
			this.initStarRatings_();
		},

		/** @return void */
		initStarRatings_: function() {
			new StarRating( 'select.glsr-star-rating', {
				clearable: false,
				showText: false,
				onClick: this.clearFieldError_.bind( this ),
			});
		},

		/** @return void */
		onChange_: function( ev ) { // Event
			this.clearFieldError_( ev.target );
		},

		/**
		 * This event method handles the mayhem caused by the invisible-recaptcha plugin
		 * and is triggered on the invisible-recaptcha callback
		 * @return void */
		onClick_: function() {
			var form = this;
			this.form.onsubmit = null;
			HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
			HTMLFormElement.prototype.submit = function() {
				var token = this.querySelector( '#g-recaptcha-response' );
				if( null !== token && this.querySelector( form.config.fieldSelector )) {
					form.submitForm_( token.value );
					return;
				}
				this._submit();
			};
		},

		/** @return void */
		onSubmit_: function( ev ) { // HTMLEvent
			if( this.form.classList.contains( 'no-ajax' ))return;
			ev.preventDefault();
			this.recaptcha.addListeners();
			this.clearFormErrors_();
			this.submitForm_();
		},

		/** @return void */
		showFieldErrors_: function( errors ) { // object
			if( !errors )return;
			var fieldEl, errorsEl;
			for( var error in errors ) {
var someObject;
for (var key in someObject) {
    if ( ! someObject.hasOwnProperty(key)) {
        continue; // Skip keys from the prototype.
    }

    doSomethingWith(key);
}
				fieldEl = this.form.querySelector( '[name=' + error + ']' ).closest( this.config.fieldSelector );
				fieldEl.classList.add( this.config.hasErrorClass );
				errorsEl = this.getFieldErrorsEl_( fieldEl );
				for( var i = 0; i < errors[error].errors.length; i++ ) {
					errorsEl.innerHTML += errors[error].errors[i];
				}
			}
		},

		/** @return void */
		showResults_: function( response ) { // object
			var resultsEl = this.getResultsEl_();
			this.addRemoveClass_( resultsEl, 'gslr-has-errors', !!response.errors );
			resultsEl.innerHTML = response.message;
		},

		/** @return void */
		submitForm_: function( recaptchaToken ) { // string|null
			this.disableButton_();
			this.fallbackSubmit_();
			GLSR.Ajax.post( this.getFormData_( recaptchaToken ), this.handleResponse_.bind( this ), {
				'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
			});
		},
	};

	GLSR.Forms = function() {
		this.nodeList = document.querySelectorAll( 'form.glsr-form' );
		this.forms = [];
		for( var i = 0; i < this.nodeList.length; i++ ) {
			var submitButton = this.nodeList[i].querySelector( '[type=submit]' );
			if( !submitButton )continue;
			this.forms.push( new Form( this.nodeList[i], submitButton ));
		}
	};
})();


1			/** global: CustomEvent, GLSR, HTMLFormElement, StarRating */
2			;(function() {
3
4			'use strict';
5
6			var Form = function( formEl, buttonEl ) { // HTMLElement, HTMLElement
7			this.button = buttonEl;
8			this.enableButton = this.enableButton_.bind( this );
9			this.form = formEl;
10			this.recaptcha = new GLSR.Recaptcha( this );
11			this.submitForm = this.submitForm_.bind( this );
12			this.init_();
13			};
14
15			Form.prototype = {
16			config: {
17			fieldErrorsClass: 'glsr-field-errors',
18			fieldSelector: '.glsr-field',
19			formMessagesClass: 'glsr-form-messages',
20			hasErrorClass: 'glsr-has-error',
21			},
22
23			/** @return void */
24			addRemoveClass_: function( el, classValue, bool ) { // HTMLElement, string, bool
25			el.classList[bool ? 'add' : 'remove']( classValue );
26			},
27
28			/** @return void */
29			clearFieldError_: function( el ) { // HTMLElement
30			var fieldEl = el.closest( this.config.fieldSelector );
31			if( fieldEl === null )return;
32			fieldEl.classList.remove( this.config.hasErrorClass );
33			var errorEl = fieldEl.querySelector( this.config.fieldErrorsSelector );
34			if( errorEl !== null ) {
35			errorEl.parentNode.removeChild( errorEl );
36			}
37			},
38
39			/** @return void */
40			clearFormErrors_: function() {
41			this.getResultsEl_().innerHTML = '';
42			for( var i = 0; i < this.form.length; i++ ) {
43			this.clearFieldError_( this.form[i] );
44			}
45			},
46
47			/** @return void */
48			disableButton_: function() {
49			this.button.setAttribute( 'disabled', '' );
50			},
51
52			/** @return void */
53			enableButton_: function() {
54			this.button.removeAttribute( 'disabled' );
55			},
56
57			/** @return void */
58			fallbackSubmit_: function() {
59			if( GLSR.Ajax.isFileAPISupported() && GLSR.Ajax.isFormDataSupported() && GLSR.Ajax.isUploadSupported() )return;
60			this.form.submit();
61			},
62
63			/** @return void */
64			handleResponse_: function( response ) { // object
65			console.log( response );
			0 ignored issues – show Debugging Code introduced 2018-06-10 14:47 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
66			if( response.recaptcha === true ) {
67			console.log( 'executing recaptcha' );
68			this.recaptcha.execute();
69			return;
70			}
71			if( response.recaptcha === 'reset' ) {
72			console.log( 'reseting failed recaptcha' );
73			this.recaptcha.reset();
74			}
75			if( response.errors === false ) {
76			console.log( 'reseting recaptcha' );
77			this.recaptcha.reset();
78			this.form.reset();
79			}
80			console.log( 'submission finished' );
81			this.showFieldErrors_( response.errors );
82			this.showResults_( response );
83			this.enableButton_();
84			response.form = this.form;
85			document.dispatchEvent( new CustomEvent( 'site-reviews/after/submission', { detail: response }));
86			},
87
88			/** @return HTMLDivElement */
89			getFieldErrorsEl_: function( fieldEl ) { // HTMLElement
90			var errorsEl = fieldEl.querySelector( '.' + this.config.fieldErrorsClass );
91			if( errorsEl === null ) {
92			errorsEl = document.createElement( 'div' );
93			errorsEl.setAttribute( 'class', this.config.fieldErrorsClass );
94			fieldEl.appendChild( errorsEl );
95			}
96			return errorsEl;
97			},
98
99			/** @return object */
100			getFormData_: function( recaptchaToken ) { // string\|null
101			recaptchaToken = recaptchaToken \|\| '';
102			var formData = new FormData( this.form );
103			formData.append( 'g-recaptcha-response', recaptchaToken );
104			return formData;
105			},
106
107			/** @return HTMLDivElement */
108			getResultsEl_: function() {
109			var resultsEl = this.form.querySelector( '.' + this.config.formMessagesClass );
110			if( resultsEl === null ) {
111			resultsEl = document.createElement( 'div' );
112			resultsEl.setAttribute( 'class', this.config.formMessagesClass );
113			this.button.parentNode.insertBefore( resultsEl, this.button.nextSibling );
114			}
115			return resultsEl;
116			},
117
118			/** @return void */
119			init_: function() {
120			this.button.addEventListener( 'click', this.onClick_.bind( this ));
121			this.form.addEventListener( 'change', this.onChange_.bind( this ));
122			this.form.addEventListener( 'submit', this.onSubmit_.bind( this ));
123			this.initStarRatings_();
124			},
125
126			/** @return void */
127			initStarRatings_: function() {
128			new StarRating( 'select.glsr-star-rating', {
129			clearable: false,
130			showText: false,
131			onClick: this.clearFieldError_.bind( this ),
132			});
133			},
134
135			/** @return void */
136			onChange_: function( ev ) { // Event
137			this.clearFieldError_( ev.target );
138			},
139
140			/**
141			* This event method handles the mayhem caused by the invisible-recaptcha plugin
142			* and is triggered on the invisible-recaptcha callback
143			* @return void */
144			onClick_: function() {
145			var form = this;
146			this.form.onsubmit = null;
147			HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
148			HTMLFormElement.prototype.submit = function() {
149			var token = this.querySelector( '#g-recaptcha-response' );
150			if( null !== token && this.querySelector( form.config.fieldSelector )) {
151			form.submitForm_( token.value );
152			return;
153			}
154			this._submit();
155			};
156			},
157
158			/** @return void */
159			onSubmit_: function( ev ) { // HTMLEvent
160			if( this.form.classList.contains( 'no-ajax' ))return;
161			ev.preventDefault();
162			this.recaptcha.addListeners();
163			this.clearFormErrors_();
164			this.submitForm_();
165			},
166
167			/** @return void */
168			showFieldErrors_: function( errors ) { // object
169			if( !errors )return;
170			var fieldEl, errorsEl;
171			for( var error in errors ) {
			0 ignored issues – show Complexity introduced 2018-06-10 20:09 UTC by Report Bug Copy Issue Report A for in loop automatically includes the property of any prototype object, consider checking the key using `hasOwnProperty`. When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: var someObject; for (var key in someObject) { if ( ! someObject.hasOwnProperty(key)) { continue; // Skip keys from the prototype. } doSomethingWith(key); } Loading history...
172			fieldEl = this.form.querySelector( '[name=' + error + ']' ).closest( this.config.fieldSelector );
173			fieldEl.classList.add( this.config.hasErrorClass );
174			errorsEl = this.getFieldErrorsEl_( fieldEl );
175			for( var i = 0; i < errors[error].errors.length; i++ ) {
176			errorsEl.innerHTML += errors[error].errors[i];
177			}
178			}
179			},
180
181			/** @return void */
182			showResults_: function( response ) { // object
183			var resultsEl = this.getResultsEl_();
184			this.addRemoveClass_( resultsEl, 'gslr-has-errors', !!response.errors );
185			resultsEl.innerHTML = response.message;
186			},
187
188			/** @return void */
189			submitForm_: function( recaptchaToken ) { // string\|null
190			this.disableButton_();
191			this.fallbackSubmit_();
192			GLSR.Ajax.post( this.getFormData_( recaptchaToken ), this.handleResponse_.bind( this ), {
193			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
194			});
195			},
196			};
197
198			GLSR.Forms = function() {
199			this.nodeList = document.querySelectorAll( 'form.glsr-form' );
200			this.forms = [];
201			for( var i = 0; i < this.nodeList.length; i++ ) {
202			var submitButton = this.nodeList[i].querySelector( '[type=submit]' );
203			if( !submitButton )continue;
204			this.forms.push( new Form( this.nodeList[i], submitButton ));
205			}
206			};
207			})();
208

pryley / site-reviews

Push — master ( ab24e8...554ad1 )

+/scripts/public/forms.js B

Complexity

Size

Duplication

Importance

20 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like