assets/js/morph-content.js - Code Metrics - Inspection of "add scrutinizer config" - pryley/castor-framework - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — develop ( c6dd2a...1f8334 )

by Paul

created 2018-02-15 22:46 UTC

assets/js/morph-content.js B

↳ Parent: Project

Complexity

Conditions	1
Paths	48

Size

Total Lines

155

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
nc	48
nop	3
dl	0
loc	155
rs	8.2857
c	0
b	0
f	0

10 Functions

Rating	Name	Size	Complexity
A	Plugin.close	14	1
B	Plugin.transitionEnd	26	6
A	Plugin.init	21	2
A	Plugin.open	8	1
A	Plugin.keypress	6	3
A	Plugin.setPosition	6	1
A	Plugin.getCoordinates	11	1
A	morph-content.js ➔ Plugin	10	1
A	Plugin.toggle	16	4
A	Plugin.callback	6	2

How to fix Long Method

/* jshint curly:false, forin:false, expr:true */
;(function( window, document, undefined ) {
	"use strict";

	var Plugin = function( el, options )
	{
		this.el = el;
		this.options = options;
		this.expanded = false;
		this.isAnimating = false;
		this.positions = ['top','left','bottom','right'];

		this.init();
	};

	Plugin.prototype =
	{
		defaults: {
			openEl: ".morph-open",
			closeEl: ".morph-close",
			contentEl: ".morph-content",
			onAfterClose: null,
			onAfterOpen: null,
			onBeforeClose: null,
			onBeforeOpen: null,
		},

		init: function()
		{
			this.config = castor._extend( {}, this.defaults, this.options, this.el.getAttribute( 'data-options' ));


			this.openEl = this.el.querySelector( this.config.openEl );
			this.closeEl = this.el.querySelector( this.config.closeEl );
			this.contentEl = this.el.querySelector( this.config.contentEl );

			this.transitionEndListener = this.transitionEnd.bind( this );

			this.el.classList.add( 'can-morph' );

			this.openEl.addEventListener( 'click', this.toggle.bind( this ));
			document.addEventListener( 'keyup', this.keypress.bind( this ));

			if( this.closeEl ) {
				this.closeEl.addEventListener( 'click', this.toggle.bind( this ));
			}

			return this;
		},

		callback: function( callback )
		{
			if( typeof this.config[ callback ] === 'function' ) {
				this.config[ callback ]( this.el );
			}
		},

		keypress: function( ev )
		{
			if( 27 === ( ev.keyCode || ev.which ) && this.expanded ) {
				this.toggle();
			}
		},

		toggle: function( ev )
		{
			if( ev !== undefined ) {
				ev.preventDefault();
			}

			if( this.isAnimating )return;
if (a > 0)
    b = 42;

			this.isAnimating = true;

			this.contentEl.addEventListener( castor._getTransitionEvent(), this.transitionEndListener );


			this.el.classList.add( 'active' );

			this.expanded ? this.close() : this.open();
		},

		open: function()
		{
			document.body.classList.add( 'opened-morph' );

			this.callback( 'onBeforeOpen' );

			this.setPosition( this.getCoordinates());
		},

		close: function()
		{
			this.callback( 'onBeforeClose' );

			this.setPosition( this.getCoordinates());

			document.body.classList.remove( 'opened-morph' );
			this.el.classList.remove( 'open' );

			(new AnimationFrame()).request( function() {

				this.contentEl.classList.remove( 'no-transition' );
				this.setPosition( 0 );
			}.bind( this ));
		},

		transitionEnd: function( ev )
		{
			if( ev.target !== this.contentEl )return;
if (a > 0)
    b = 42;

			if( !this.expanded && -1 === this.positions.indexOf( ev.propertyName ))return;
if (a > 0)
    b = 42;

			this.isAnimating = false;

			this.contentEl.removeEventListener( castor._getTransitionEvent(), this.transitionEndListener );


			if( !this.expanded ) {
				this.contentEl.classList.add( 'no-transition' );

				(new AnimationFrame()).request( function() {

					this.el.classList.add( 'open' );
					this.el.classList.remove( 'active' );
				}.bind( this ));
			}
			else {
				this.el.classList.remove( 'active' );
			}

			this.callback( this.expanded ? 'onAfterClose' : 'onAfterOpen' );

			this.expanded = !this.expanded;
		},

		getCoordinates: function()
		{
			var coordinates = this.el.getClientRects()[0];

			return {
				top: -(coordinates.top) + 'px',
				left: -(coordinates.left) + 'px',
				bottom: -(window.innerHeight - coordinates.bottom) + 'px',
				right: -(window.innerWidth - coordinates.right) + 'px',
			};
		},

		setPosition: function( coordinates )
		{
			this.positions.forEach( function( position ) {
				this.contentEl.style[ position ] = ( coordinates === Object( coordinates )) ? coordinates[ position ] : coordinates;
			}.bind( this ));
		},
	};

	Plugin.defaults = Plugin.prototype.defaults;

	castor.MorphContent = Plugin;


})( window, document );


1			/* jshint curly:false, forin:false, expr:true */
2			;(function( window, document, undefined ) {
3			"use strict";
4
5			var Plugin = function( el, options )
6			{
7			this.el = el;
8			this.options = options;
9			this.expanded = false;
10			this.isAnimating = false;
11			this.positions = ['top','left','bottom','right'];
12
13			this.init();
14			};
15
16			Plugin.prototype =
17			{
18			defaults: {
19			openEl: ".morph-open",
20			closeEl: ".morph-close",
21			contentEl: ".morph-content",
22			onAfterClose: null,
23			onAfterOpen: null,
24			onBeforeClose: null,
25			onBeforeOpen: null,
26			},
27
28			init: function()
29			{
30			this.config = castor._extend( {}, this.defaults, this.options, this.el.getAttribute( 'data-options' ));
			0 ignored issues – show Bug introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report The variable `castor` seems to be never declared. If this is a global, consider adding a `/** global: castor */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
31
32			this.openEl = this.el.querySelector( this.config.openEl );
33			this.closeEl = this.el.querySelector( this.config.closeEl );
34			this.contentEl = this.el.querySelector( this.config.contentEl );
35
36			this.transitionEndListener = this.transitionEnd.bind( this );
37
38			this.el.classList.add( 'can-morph' );
39
40			this.openEl.addEventListener( 'click', this.toggle.bind( this ));
41			document.addEventListener( 'keyup', this.keypress.bind( this ));
42
43			if( this.closeEl ) {
44			this.closeEl.addEventListener( 'click', this.toggle.bind( this ));
45			}
46
47			return this;
48			},
49
50			callback: function( callback )
51			{
52			if( typeof this.config[ callback ] === 'function' ) {
53			this.config[ callback ]( this.el );
54			}
55			},
56
57			keypress: function( ev )
58			{
59			if( 27 === ( ev.keyCode \|\| ev.which ) && this.expanded ) {
60			this.toggle();
61			}
62			},
63
64			toggle: function( ev )
65			{
66			if( ev !== undefined ) {
67			ev.preventDefault();
68			}
69
70			if( this.isAnimating )return;
			0 ignored issues – show Coding Style Best Practice introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
71
72			this.isAnimating = true;
73
74			this.contentEl.addEventListener( castor._getTransitionEvent(), this.transitionEndListener );
			0 ignored issues – show Bug introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report The variable `castor` seems to be never declared. If this is a global, consider adding a `/** global: castor */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
75
76			this.el.classList.add( 'active' );
77
78			this.expanded ? this.close() : this.open();
79			},
80
81			open: function()
82			{
83			document.body.classList.add( 'opened-morph' );
84
85			this.callback( 'onBeforeOpen' );
86
87			this.setPosition( this.getCoordinates());
88			},
89
90			close: function()
91			{
92			this.callback( 'onBeforeClose' );
93
94			this.setPosition( this.getCoordinates());
95
96			document.body.classList.remove( 'opened-morph' );
97			this.el.classList.remove( 'open' );
98
99			(new AnimationFrame()).request( function() {
			0 ignored issues – show Bug introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report The variable `AnimationFrame` seems to be never declared. If this is a global, consider adding a `/** global: AnimationFrame */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
100			this.contentEl.classList.remove( 'no-transition' );
101			this.setPosition( 0 );
102			}.bind( this ));
103			},
104
105			transitionEnd: function( ev )
106			{
107			if( ev.target !== this.contentEl )return;
			0 ignored issues – show Coding Style Best Practice introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
108
109			if( !this.expanded && -1 === this.positions.indexOf( ev.propertyName ))return;
			0 ignored issues – show Coding Style Best Practice introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
110
111			this.isAnimating = false;
112
113			this.contentEl.removeEventListener( castor._getTransitionEvent(), this.transitionEndListener );
			0 ignored issues – show Bug introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report The variable `castor` seems to be never declared. If this is a global, consider adding a `/** global: castor */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
114
115			if( !this.expanded ) {
116			this.contentEl.classList.add( 'no-transition' );
117
118			(new AnimationFrame()).request( function() {
			0 ignored issues – show Bug introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report The variable `AnimationFrame` seems to be never declared. If this is a global, consider adding a `/** global: AnimationFrame */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
119			this.el.classList.add( 'open' );
120			this.el.classList.remove( 'active' );
121			}.bind( this ));
122			}
123			else {
124			this.el.classList.remove( 'active' );
125			}
126
127			this.callback( this.expanded ? 'onAfterClose' : 'onAfterOpen' );
128
129			this.expanded = !this.expanded;
130			},
131
132			getCoordinates: function()
133			{
134			var coordinates = this.el.getClientRects()[0];
135
136			return {
137			top: -(coordinates.top) + 'px',
138			left: -(coordinates.left) + 'px',
139			bottom: -(window.innerHeight - coordinates.bottom) + 'px',
140			right: -(window.innerWidth - coordinates.right) + 'px',
141			};
142			},
143
144			setPosition: function( coordinates )
145			{
146			this.positions.forEach( function( position ) {
147			this.contentEl.style[ position ] = ( coordinates === Object( coordinates )) ? coordinates[ position ] : coordinates;
148			}.bind( this ));
149			},
150			};
151
152			Plugin.defaults = Plugin.prototype.defaults;
153
154			castor.MorphContent = Plugin;
			0 ignored issues – show Bug introduced 2018-02-15 22:50 UTC by Report Bug Copy Issue Report The variable `castor` seems to be never declared. If this is a global, consider adding a `/** global: castor */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
155
156			})( window, document );
157

pryley / castor-framework

Push — develop ( c6dd2a...1f8334 )

assets/js/morph-content.js B

Complexity

Size

Duplication

Importance

10 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like