first commit

2023-11-30 13:20:54 -05:00
commit e9e5c0546c
5833 changed files with 1801865 additions and 0 deletions
@@ -0,0 +1,188 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+const {
+	Component,
+	Fragment,
+} = wp.element;
+
+const {
+	PanelBody,
+	RangeControl,
+} = wp.components;
+
+const {
+	InspectorControls,
+	InnerBlocks,
+	RichText,
+} = wp.blockEditor;
+
+/**
+ * Component
+ */
+export default class TabsBlockEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			// fix for WP 5.2
+			// styles control generates error
+			showInnerBlocks: !! this.props.clientId,
+		};
+
+		this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
+	}
+
+	/**
+	 * Returns the template configuration for a given section layout.
+	 *
+	 * @return {Object[]} Layout configuration.
+	 */
+	getLayoutTemplate() {
+		const {
+			attributes,
+		} = this.props;
+
+		let {
+			tabsData,
+		} = attributes;
+
+		const result = [];
+
+		console.log(tabsData);
+
+		for ( let k = 0; k < tabsData.length; k++ ) {
+			result.push( [
+				'canvas/tab',
+				{},
+			] );
+		}
+
+		return result;
+	}
+
+	render() {
+		const {
+			setAttributes,
+		} = this.props;
+
+		let {
+			className,
+		} = this.props;
+
+		const {
+			tabActive,
+			tabsData,
+			tabsPosition,
+			canvasClassName,
+		} = this.props.attributes;
+
+		className = classnames(
+			'cnvs-block-tabs',
+			`cnvs-block-tabs-${ tabsData.length }`,
+			'vertical' === tabsPosition ? `cnvs-block-tabs-${ tabsPosition }` : '',
+			canvasClassName,
+			className,
+		);
+
+		return (
+			<Fragment>
+				<InspectorControls>
+					<PanelBody>
+						<RangeControl
+							label={ __( 'Tabs' ) }
+							value={ tabsData.length }
+							min={ 1 }
+							max={ 20 }
+							onChange={ ( val ) => {
+								const newTabsData = [];
+
+								for ( let k = 0; k < val; k += 1 ) {
+									if ( tabsData[ k ] ) {
+										newTabsData.push( tabsData[ k ] );
+									} else {
+										newTabsData.push( `Tab ${ k + 1 }` );
+									}
+								}
+
+								setAttributes( { tabsData: newTabsData } );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+				<div className={ className }>
+					<div className="cnvs-block-tabs-buttons">
+						{
+							tabsData.map( ( title, i ) => {
+								const selected = tabActive === i;
+
+								return (
+									<div
+										className={
+											classnames(
+												'cnvs-block-tabs-button',
+												{
+													'cnvs-block-tabs-button-active': selected,
+												}
+											)
+										}
+										key={ `tab_button_${ i }` }
+									>
+										<RichText
+											tagName="span"
+											placeholder={ __( 'Tab label' ) }
+											value={ title }
+											unstableOnFocus={ () => setAttributes( { tabActive: i } ) }
+											onChange={ ( value ) => {
+												if ( tabsData[ i ] ) {
+													const newTabsData = tabsData.map( ( oldTabData, newIndex ) => {
+														if ( i === newIndex ) {
+															return value;
+														}
+
+														return oldTabData;
+													} );
+
+													setAttributes( {
+														tabsData: newTabsData,
+													} );
+												}
+											} }
+											keepPlaceholderOnFocus
+										/>
+									</div>
+								);
+							} )
+						}
+					</div>
+					<div className="cnvs-block-tabs-content">
+						{ this.state.showInnerBlocks ? (
+							<InnerBlocks
+								template={ this.getLayoutTemplate() }
+								templateLock="all"
+								allowedBlocks={ [ 'canvas/tab' ] }
+							/>
+						) : __( 'Tab content' ) }
+					</div>
+				</div>
+				<style>
+					{ `
+						[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > div {
+							display: none;
+						}
+						[data-block="${ this.props.clientId }"] > .canvas-component-custom-blocks > .cnvs-block-tabs > .cnvs-block-tabs-content > .block-editor-inner-blocks > .block-editor-block-list__layout > :nth-child(${ tabActive + 1 }) {
+							display: block;
+						}
+					` }
+				</style>
+			</Fragment>
+		);
+	}
+}