Your IP : 216.73.216.162

Current Path : /home/x/b/o/xbodynamge/namtation/wp-content/
Upload File :
Current File : /home/x/b/o/xbodynamge/namtation/wp-content/sizing-control.tar

index.js000066600000007154151146321030006220 0ustar00/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;

const {
	Dropdown,
	IconButton,
	RangeControl
} = wp.components;

const { withInstanceId } = wp.compose;

const { Component } = wp.element;

/**
 * Internal dependencies
 */
import './editor.scss';

class SizingControl extends Component {
	constructor() {
		super( ...arguments );
	}

	render() {
		const id = `inspector-sizing-control-${ this.props.instanceId }`;

		if ( this.props.options && 1 > this.props.options.length ) {
			return __( 'Please specify more options.' );
		}

		return (
			<div
				id={ id }
				className="wp-block-themeisle-blocks-sizing-control"
			>
				<div className="components-base-control__field">
					{ this.props.label && (
						<label
							className="components-base-control__label"
							htmlFor={ id }
						>
							{ this.props.label }
						</label>
					) }

					<div
						className={ classnames(
							'wp-block-themeisle-blocks-sizing-control-wrapper',
							{ 'linking': this.props.type }
						) }
					>
						{ this.props.options.map( ( i, n ) => {
							return (
								<div className="wp-block-themeisle-blocks-sizing-control-item">
									{ i.disabled ? (
										<input
											type="number"
											disabled={ i.disabled }
											className="wp-block-themeisle-blocks-sizing-control-item-input"
											id={ `wp-block-themeisle-blocks-sizing-control-item-input-${ n }` }
										/>
									) : (
										<Dropdown
											position="top center"
											focusOnMount={ false }
											renderToggle={ ({ isOpen, onToggle }) => (
												<input
													type="number"
													className="wp-block-themeisle-blocks-sizing-control-item-input"
													id={ `wp-block-themeisle-blocks-sizing-control-item-input-${ n }` }
													value={ i.value }
													min={ this.props.min }
													max={ this.props.max }
													onFocus={ onToggle }
													onFocusOut={ onToggle }
													onChange={ e => this.props.onChange( i.type, parseInt( e.target.value ) ) }
												/>
											) }
											renderContent={ ({ onToggle }) => (
												<div className="wp-block-themeisle-blocks-sizing-control-overlay">
													<RangeControl
														value={ i.value }
														initialPosition={ i.value }
														beforeIcon="minus"
														afterIcon="plus"
														min={ this.props.min }
														max={ this.props.max }
														onChange={ e => this.props.onChange( i.type, e ) }
													/>
												</div>
											) }
										/>
									)}

									{ i.label && (
										<label
											className="wp-block-themeisle-blocks-sizing-control-item-label"
											htmlFor={ `wp-block-themeisle-blocks-sizing-control-item-input-${ n }` }
										>
											{ i.label }
										</label>
									) }
								</div>
							);
						}) }

						{ this.props.type && (
							<div
								className={ classnames(
									'wp-block-themeisle-blocks-sizing-control-item',
									'toggle-linking',
									{ 'is-linked': 'linked' === this.props.type }
								) }
							>
								<IconButton
									icon={ 'linked' === this.props.type ? 'admin-links' : 'editor-unlink' }
									tooltip={ 'linked' === this.props.type ? __( 'Unlink Values' ) : __( 'Link Values' ) }
									className="wp-block-themeisle-blocks-sizing-control-item-input"
									onClick={ () => this.props.changeType( 'linked' === this.props.type ? 'unlinked' : 'linked' ) }
								/>
							</div>
						) }
					</div>
				</div>
			</div>
		);
	}
}

export default withInstanceId( SizingControl );
editor.scss000066600000003760151146321030006735 0ustar00.wp-block-themeisle-blocks-sizing-control {
	.components-base-control__label {
		margin-bottom: 4px;
	}

	.wp-block-themeisle-blocks-sizing-control-wrapper {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		padding: 6px 0;

		&.linking {
			grid-template-columns: 20% 20% 20% 20% 20%;
		}

		.wp-block-themeisle-blocks-sizing-control-item {
			.wp-block-themeisle-blocks-sizing-control-item-input {
				width: 100%;
				border-radius: 0;
				text-align: center;
				padding: 5px;

				&[disabled] {
					background-color: #e6e9ec;
					cursor: not-allowed;
				}
			}

			.wp-block-themeisle-blocks-sizing-control-item-label {
				display: block;
				text-align: center;
				font-size: 9px;
				text-transform: uppercase;
				padding-top: 2px;
			}

			&:first-child {
				.wp-block-themeisle-blocks-sizing-control-item-input {
					border-radius: 5px 0 0 5px;
				}
			}

			&:last-child {
				.wp-block-themeisle-blocks-sizing-control-item-input {
					border-radius: 0 5px 5px 0;
				}
			}

			&.toggle-linking {
				display: flex;

				.wp-block-themeisle-blocks-sizing-control-item-input {
					height: 28px;
					border: 1px solid #8d96a0;
					width: 100%;
					display: flex;
					justify-content: center;
					margin: 1px;

					svg {
						width: 16px;
					    height: 16px;
					}
				}

				&.is-linked {
					.wp-block-themeisle-blocks-sizing-control-item-input {
						background: #a4afb7;
						color: #fff;

						&:hover {
							box-shadow: inset 0 0 0 1px #e2e4e7,inset 0 0 0 2px #a4afb7,0 1px 1px rgba(25,30,35,.2);
						}
					}
				}
			}
		}
	}
}

.wp-block-themeisle-blocks-sizing-control-overlay {
	margin: 8px;

	.dashicons-plus {
		margin-left: 10px;
		margin-right: 5px;
	}
}

@media ( max-width: 782px )  {
	.wp-block-themeisle-blocks-sizing-control {
		.wp-block-themeisle-blocks-sizing-control-wrapper {
			.wp-block-themeisle-blocks-sizing-control-item {
				&.toggle-linking {
					.wp-block-themeisle-blocks-sizing-control-item-input {
						height: 40px;
					}
				}
			}
		}
	}
}