control.js ➔ ??? - Code Metrics - Inspection of "Merge branch 'dev' of https://github.com/BoldGrid/..." - BoldGrid/controls - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 78b380...a2100d )

by Rafael

created 2017-10-29 20:35 UTC

control.js ➔ ??? B

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

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	6
Bugs	0	Features	0

Metric	Value
cc	1
c	6
b	0
f	0
nc	1
dl	0
loc	26
rs	8.8571
nop	1

var $ = window.jQuery;

import { MultiSlider } from '../multi-slider';
import template from './template.html';
import './style.scss';

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

		this.controlOptions = {
			control: {
				title: 'Border Width',
				name: 'border-width',
				units: {
					default: 'px',
					enabled: [ 'px', 'em' ]
				}
			},
			slider: {
				px: {
					step: 0.1,
					min: 0,
					max: 15
				},
				em: {
					min: 0,
					max: 5,
					step: 0.1
				}
			}
		};
	}

	/**
	 * Create a control.
	 *
	 * @since 1.0.0
	 *
	 * @return {jQuery} Control.
	 */
	render() {
		let $control;

		super.render();

		this.$typeControl = $( template );

		this.bindEvents();

		$control = this.$typeControl.add( this.$control );

		return $control;
	}

	/**
	 * Bind all events.
	 *
	 * @since 1.0.0
	 */
	bindEvents() {
		this._bindTypeChange();
		this.setDefaultType( this.$target.css( 'border-style' ) );
	}

	/**
	 * Set the default type.
	 *
	 * @since 1.0.0
	 *
	 * @param {string} style Border style.
	 */
	setDefaultType( style ) {
		this.$typeControl
			.find( 'input' )
			.filter( '[value="' + style + '"]' )
			.prop( 'checked', true )
			.change();
	}

	/**
	 * When the border type changes, update the css.
	 *
	 * @since 1.0.0
	 */
	_bindTypeChange() {
		this.$typeControl.find( 'input' ).on( 'change', e => {
			let $this = $( e.target ),
				val = $this.val();

			this.$target.css( {
				'border-style': val
			} );

			this.$control.trigger( 'type-change', val );

			if ( val ) {
				this.$control.show();
			} else {
				this.$control.hide();
			}
		} );
	}
}

export { Border as default };


1			var $ = window.jQuery;
2
3			import { MultiSlider } from '../multi-slider';
4			import template from './template.html';
5			import './style.scss';
6
7			export class Border extends MultiSlider {
8			constructor( options ) {
9			super( options );
10
11			this.controlOptions = {
12			control: {
13			title: 'Border Width',
14			name: 'border-width',
15			units: {
16			default: 'px',
17			enabled: [ 'px', 'em' ]
18			}
19			},
20			slider: {
21			px: {
22			step: 0.1,
23			min: 0,
24			max: 15
25			},
26			em: {
27			min: 0,
28			max: 5,
29			step: 0.1
30			}
31			}
32			};
33			}
34
35			/**
36			* Create a control.
37			*
38			* @since 1.0.0
39			*
40			* @return {jQuery} Control.
41			*/
42			render() {
43			let $control;
44
45			super.render();
46
47			this.$typeControl = $( template );
48
49			this.bindEvents();
50
51			$control = this.$typeControl.add( this.$control );
52
53			return $control;
54			}
55
56			/**
57			* Bind all events.
58			*
59			* @since 1.0.0
60			*/
61			bindEvents() {
62			this._bindTypeChange();
63			this.setDefaultType( this.$target.css( 'border-style' ) );
64			}
65
66			/**
67			* Set the default type.
68			*
69			* @since 1.0.0
70			*
71			* @param {string} style Border style.
72			*/
73			setDefaultType( style ) {
74			this.$typeControl
75			.find( 'input' )
76			.filter( '[value="' + style + '"]' )
77			.prop( 'checked', true )
78			.change();
79			}
80
81			/**
82			* When the border type changes, update the css.
83			*
84			* @since 1.0.0
85			*/
86			_bindTypeChange() {
87			this.$typeControl.find( 'input' ).on( 'change', e => {
88			let $this = $( e.target ),
89			val = $this.val();
90
91			this.$target.css( {
92			'border-style': val
93			} );
94
95			this.$control.trigger( 'type-change', val );
96
97			if ( val ) {
98			this.$control.show();
99			} else {
100			this.$control.hide();
101			}
102			} );
103			}
104			}
105
106			export { Border as default };
107

BoldGrid / controls

Push — master ( 78b380...a2100d )

control.js ➔ ??? B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like