control.js ➔ ??? - Code Metrics - Inspection of "Minor CSS change" - BoldGrid/controls - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 8f169b...36019d )

by Rafael

created 2018-06-22 18:01 UTC

control.js ➔ ??? A

↳ Parent: src/controls/border-radius/control.js

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
c	0
b	0
f	0
nc	1
dl	0
loc	60
rs	9.5555
cc	1
nop	1

How to fix Long Method

import { MultiSlider } from '../multi-slider';
import { Conversion } from '../multi-slider/conversion';

export class BorderRadius extends MultiSlider {
	constructor( options ) {
		super( options );

		this.controlOptions = {
			control: {
				title: 'Border Radius',
				name: 'border-radius',
				units: {
					enabled: [ 'px', 'em', '%' ]
				},
				sliders: [
					{ name: 'top-left', label: 'Top Left', cssProperty: 'border-top-left-radius' },
					{ name: 'top-right', label: 'Top Right', cssProperty: 'border-top-right-radius' },
					{
						name: 'bottom-right',
						label: 'Bottom Right',
						cssProperty: 'border-bottom-right-radius'
					},
					{ name: 'bottom-left', label: 'Bottom Left', cssProperty: 'border-bottom-left-radius' }
				]
			},

			// Default settings for the control.
			setting: {
				css: '',
				settings: [
					{
						media: [ 'base', 'phone', 'tablet', 'desktop', 'large' ],
						unit: 'px',
						isLinked: false,
						values: {
							'top-left': 0,
							'top-right': 0,
							'bottom-right': 0,
							'bottom-left': 0
						}
					}
				]
			},

			// Ranges for sliders.
			slider: {
				px: {
					min: 0,
					max: 50,
					step: 1
				},
				em: {
					step: 0.1,
					min: 0,
					max: 5
				},
				'%': {
					min: 0,
					max: 50,
					step: 1
				}
			}
		};
	}

	/**
	 * Convert the JS pixel value to perctenage or ems.
	 *
	 * @since 1.0.0
	 *
	 * @param  {string} rawValue JS computed value.

	 * @return {integer}          New Value.
	 */
	convertToSelectedUnit( computedValue ) {
		let converted, pixelValue;

		if ( -1 !== computedValue.indexOf( '%' ) ) {
			computedValue = parseInt( computedValue );
			computedValue = new Conversion().percentageToPixel( computedValue, this.$target );
		}

		if ( '%' === this.selectedUnit ) {
			pixelValue = parseInt( computedValue );
			converted = new Conversion().pxToPercentage( pixelValue, this.$target );
		} else {
			converted = super.convertToSelectedUnit( computedValue );
		}

		return converted;
	}
}

export { BorderRadius as default };


1			import { MultiSlider } from '../multi-slider';
2			import { Conversion } from '../multi-slider/conversion';
3
4			export class BorderRadius extends MultiSlider {
5			constructor( options ) {
6			super( options );
7
8			this.controlOptions = {
9			control: {
10			title: 'Border Radius',
11			name: 'border-radius',
12			units: {
13			enabled: [ 'px', 'em', '%' ]
14			},
15			sliders: [
16			{ name: 'top-left', label: 'Top Left', cssProperty: 'border-top-left-radius' },
17			{ name: 'top-right', label: 'Top Right', cssProperty: 'border-top-right-radius' },
18			{
19			name: 'bottom-right',
20			label: 'Bottom Right',
21			cssProperty: 'border-bottom-right-radius'
22			},
23			{ name: 'bottom-left', label: 'Bottom Left', cssProperty: 'border-bottom-left-radius' }
24			]
25			},
26
27			// Default settings for the control.
28			setting: {
29			css: '',
30			settings: [
31			{
32			media: [ 'base', 'phone', 'tablet', 'desktop', 'large' ],
33			unit: 'px',
34			isLinked: false,
35			values: {
36			'top-left': 0,
37			'top-right': 0,
38			'bottom-right': 0,
39			'bottom-left': 0
40			}
41			}
42			]
43			},
44
45			// Ranges for sliders.
46			slider: {
47			px: {
48			min: 0,
49			max: 50,
50			step: 1
51			},
52			em: {
53			step: 0.1,
54			min: 0,
55			max: 5
56			},
57			'%': {
58			min: 0,
59			max: 50,
60			step: 1
61			}
62			}
63			};
64			}
65
66			/**
67			* Convert the JS pixel value to perctenage or ems.
68			*
69			* @since 1.0.0
70			*
71			* @param {string} rawValue JS computed value.
			0 ignored issues – show Documentation introduced 2017-10-29 20:37 UTC by Report Bug Copy Issue Report The parameter `rawValue` does not exist. Did you maybe forget to remove this comment? Loading history...
72			* @return {integer} New Value.
73			*/
74			convertToSelectedUnit( computedValue ) {
75			let converted, pixelValue;
76
77			if ( -1 !== computedValue.indexOf( '%' ) ) {
78			computedValue = parseInt( computedValue );
79			computedValue = new Conversion().percentageToPixel( computedValue, this.$target );
80			}
81
82			if ( '%' === this.selectedUnit ) {
83			pixelValue = parseInt( computedValue );
84			converted = new Conversion().pxToPercentage( pixelValue, this.$target );
85			} else {
86			converted = super.convertToSelectedUnit( computedValue );
87			}
88
89			return converted;
90			}
91			}
92
93			export { BorderRadius as default };
94

BoldGrid / controls

Push — master ( 8f169b...36019d )

control.js ➔ ??? A

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like