add outline control

src/controls/index.js

@@ -5,6 +5,7 @@ export { Control as DeviceVisibility } from './device-visibility';
 export { SassCompiler } from './style';
 export { Padding } from './padding';
 export { Border } from './border';
+export { Outline } from './outline';
 export { Margin } from './margin';
 export { BorderRadius } from './border-radius';
 export { BoxShadow } from './box-shadow';

src/controls/outline/control.js

@@ -0,0 +1,153 @@
+var $ = window.jQuery;
+
+import { MultiSlider } from '../multi-slider';
+import template from './template.html';
+import './style.scss';
+
+export class Outline extends MultiSlider {
+	constructor( options ) {
+		super( options );
+
+		this.controlOptions = {
+			control: {
+				title: 'Outline Width',
+				name: 'outline-width',
+				units: {
+					default: 'px',
+					enabled: [ 'px', 'em' ]
+				}
+			},
+			slider: {
+				px: {
+					step: 0.1,
+					min: 0,
+					max: 15
+				},
+				em: {
+					min: 0,
+					max: 5,
+					step: 0.1
+				}
+			}
+		};
+
+		this.outlineDirections = [ 'left', 'top', 'right', 'bottom' ];
+	}
+
+	/**
+	 * Create a control.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @return {jQuery} Control.
+	 */
+	render() {
+		let $control;
+
+		super.render();
+
+		this.$typeControl = $( template );
+
+		this.bindEvents();
+
+		$control = this.$typeControl.append( this.$control );
+
+		return $control;
+	}
+
+	/**
+	 * Bind all events.
+	 *
+	 * @since 1.0.0
+	 */
+	bindEvents() {
+		this._bindTypeChange();
+		this.refreshValues();
+		this._setType();
+	}
+
+	/**
+	 * Set the input type to the type of the target.
+	 *
+	 * @since 1.0.0
+	 */
+	_setType() {
+		let setting = this._getOutlineStyle();
+
+		setting = 'none' !== setting ? setting : '';
+		return this.$typeControl
+			.find( '.outline-type-control input' )
+			.filter( '[value="' + setting + '"]' )
+			.prop( 'checked', true );
+	}
+
+	/**
+	 * Get the currently set outline style.
+	 *
+	 * This was added for cross browser support. FF does not return anything for outline-style.
+	 *
+	 * @since 0.8.7
+	 *
+	 * @return {string} Currently applied style.
+	 */
+	_getOutlineStyle() {
+		let style = '';
+		for ( let direction of this.outlineDirections ) {
+			let directionalStyle = this.$target.css( 'outline-' + direction + '-style' );
+			if ( 'none' !== directionalStyle && directionalStyle ) {
+				style = directionalStyle;
+				break;
+			}
+		}
+
+		return style;
+	}
+
+	/**
+	 * Refresh the values of the input to the values of the target.
+	 *
+	 * @since 1.0.0
+	 */
+	refreshValues() {
+		let $radio;
+		super.refreshValues();
+		$radio = this._setType();
+		this._toggleWidthControl( $radio.val() );
+	}
+
+	/**
+	 * Toggle the visibility of the width controls.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param  {string} val Current value of the control.
+	 */
+	_toggleWidthControl( val ) {
+		if ( val ) {
+			this.$control.show();
+		} else {
+			this.$control.hide();
+		}
+	}
+
+	/**
+	 * When the outline 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.applyCssRules( {
+				'outline-style': val
+			} );
+
+			this._toggleWidthControl( val );
+			this.$control.trigger( 'type-change', val );
+		} );
+	}
+}
+
+export { Outline as default };

src/controls/outline/index.js

@@ -0,0 +1 @@
+export * from './control.js';

src/controls/outline/style.scss

@@ -0,0 +1,60 @@
+.outline-width-control {
+	display: none;
+}
+
+.outline-type-control {
+	margin-bottom: 30px;
+
+	.control-title {
+		font-size: 15px;
+	}
+
+	ul {
+		list-style: none;
+		padding-left: 5px;
+		font-size: 15px;
+
+		li {
+			margin: 6px 0;
+
+			label {
+				cursor: pointer;
+				position: relative;
+				display: block;
+
+				input::after {
+					content: '';
+					max-width: 100px;
+					border-top: 4px dashed black;
+					position: absolute;
+					right: 40px;
+					width: 33%;
+					top: 6px;
+					border-bottom: transparent;
+					border-left: transparent;
+					border-right: transparent;
+				}
+
+				input[value='solid']::after {
+					border-style: solid;
+				}
+
+				input[value='dotted']::after {
+					border-style: dotted;
+				}
+
+				input[value='double']::after {
+					border-style: double;
+				}
+
+				input[value='']::after {
+					border-color: transparent;
+				}
+			}
+
+			input {
+				margin: 0 7px;
+			}
+		}
+	}
+}

src/controls/outline/template.html

@@ -0,0 +1,12 @@
+<div class="boldgrid-control outline-control">
+	<div class="outline-type-control">
+		<h4 class="control-title">Outline Type</h4>
+		<ul>
+			<li><label><input type="radio" name="outline-type" checked value="">None</label></li>
+			<li><label><input type="radio" name="outline-type" value="dashed">Dashed</label></li>
+			<li><label><input type="radio" name="outline-type" value="double">Double</label></li>
+			<li><label><input type="radio" name="outline-type" value="solid">Solid</label></li>
+			<li><label><input type="radio" name="outline-type" value="dotted">Dotted</label></li>
+		</ul>
+	</div>
+</div>