first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,338 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Icon from './icon';
|
||||
import ImageSelector from '../../../gutenberg/components/image-selector';
|
||||
import iconLayouts from './icon-layouts';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const {
|
||||
Component,
|
||||
Fragment,
|
||||
} = wp.element;
|
||||
|
||||
const {
|
||||
BaseControl,
|
||||
PanelBody,
|
||||
Placeholder,
|
||||
RangeControl,
|
||||
SelectControl,
|
||||
ToggleControl,
|
||||
Notice,
|
||||
} = wp.components;
|
||||
|
||||
const {
|
||||
InspectorControls,
|
||||
InnerBlocks,
|
||||
} = wp.blockEditor;
|
||||
|
||||
const { BlockControls, BlockAlignmentToolbar } = wp.blockEditor;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Component
|
||||
*/
|
||||
export default class SectionBlockEdit extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.getLayoutTemplate = this.getLayoutTemplate.bind( this );
|
||||
this.getLayoutSelector = this.getLayoutSelector.bind( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the template configuration for a given section layout.
|
||||
*
|
||||
* @return {Object[]} Layout configuration.
|
||||
*/
|
||||
getLayoutTemplate() {
|
||||
const {
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
layout,
|
||||
} = attributes;
|
||||
|
||||
const result = [];
|
||||
|
||||
switch (layout) {
|
||||
case 'full':
|
||||
result.push( [ 'canvas/section-content' ] );
|
||||
break;
|
||||
case 'with-sidebar':
|
||||
result.push( [ 'canvas/section-content' ] );
|
||||
result.push( [ 'canvas/section-sidebar' ] );
|
||||
break;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns layout selector.
|
||||
*
|
||||
* @return {JSX} ImageSelector.
|
||||
*/
|
||||
getLayoutSelector() {
|
||||
const {
|
||||
setAttributes,
|
||||
attributes,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
layout,
|
||||
sidebarPosition,
|
||||
} = attributes;
|
||||
|
||||
let val = '';
|
||||
switch( layout ) {
|
||||
case 'full':
|
||||
val = 'full';
|
||||
break;
|
||||
case 'with-sidebar':
|
||||
val = `with-sidebar${ 'left' === sidebarPosition ? '-left' : '' }`;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<ImageSelector
|
||||
value={ val }
|
||||
onChange={ ( val ) => {
|
||||
// confirmation to remove sidebar.
|
||||
if ( val === 'full' && ( 'with-sidebar' === layout || 'with-sidebar-left' === layout ) ) {
|
||||
if ( ! window.confirm( __( 'When switching from a Sidebar layout to the Fullwidth layout all sidebar content will be removed. Are you sure you would like to switch the layout?' ) ) ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
switch( val ) {
|
||||
case 'full':
|
||||
setAttributes( {
|
||||
layout: 'full',
|
||||
} );
|
||||
break;
|
||||
case 'with-sidebar':
|
||||
setAttributes( {
|
||||
layout: 'with-sidebar',
|
||||
sidebarPosition: 'right',
|
||||
} );
|
||||
break;
|
||||
case 'with-sidebar-left':
|
||||
setAttributes( {
|
||||
layout: 'with-sidebar',
|
||||
sidebarPosition: 'left',
|
||||
} );
|
||||
break;
|
||||
}
|
||||
} }
|
||||
items={
|
||||
[
|
||||
{
|
||||
content: iconLayouts.full,
|
||||
value: 'full',
|
||||
label: __( 'Fullwidth' ),
|
||||
}, {
|
||||
content: iconLayouts['with-sidebar'],
|
||||
value: 'with-sidebar',
|
||||
label: __( 'Right Sidebar' ),
|
||||
}, {
|
||||
content: iconLayouts['with-sidebar-left'],
|
||||
value: 'with-sidebar-left',
|
||||
label: __( 'Left Sidebar' ),
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
setAttributes,
|
||||
attributes,
|
||||
location,
|
||||
} = this.props;
|
||||
|
||||
let {
|
||||
className,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
layout,
|
||||
layoutAlign,
|
||||
contentWidth,
|
||||
sidebarSticky,
|
||||
sidebarStickyMethod,
|
||||
sidebarPosition,
|
||||
textColor,
|
||||
backgroundColor,
|
||||
canvasClassName,
|
||||
} = attributes;
|
||||
|
||||
const pageTemplate = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'template' );
|
||||
|
||||
className = classnames(
|
||||
'cnvs-block-section',
|
||||
{
|
||||
[ `cnvs-block-section-fullwidth` ]: 'full' === layout,
|
||||
[ `cnvs-block-section-layout-align-${ layoutAlign }` ]: 'full' === layout && layoutAlign,
|
||||
[ `cnvs-block-section-sidebar-sticky-${ sidebarStickyMethod }` ]: 'with-sidebar' === layout && sidebarSticky,
|
||||
[ `cnvs-block-section-sidebar-position-${ sidebarPosition }` ]: 'with-sidebar' === layout && sidebarPosition,
|
||||
'cnvs-block-section-with-text-color': textColor,
|
||||
'cnvs-block-section-with-background-color': backgroundColor,
|
||||
},
|
||||
canvasClassName,
|
||||
);
|
||||
|
||||
// Page template is Canvas Full Width.
|
||||
if ( 'template-canvas-fullwidth.php' !== pageTemplate ) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon={ Icon }
|
||||
label={ __( 'Section' ) }
|
||||
className="cnvs-block-section-notice"
|
||||
>
|
||||
<Notice status="warning" isDismissible={ false }>
|
||||
{ __( 'To use this block, please select the page template - "Canvas Full Width".' ) }
|
||||
</Notice>
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
// Block is not in root.
|
||||
if ( 'root' !== location ) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon={ Icon }
|
||||
label={ __( 'Section' ) }
|
||||
className="cnvs-block-section-notice"
|
||||
>
|
||||
<Notice status="warning" isDismissible={ false }>
|
||||
{ __( 'Sections are supported on root level only. You’ve added the section inside another block and layout will most likely break. Please add the section block as a parent block instead.' ) }
|
||||
</Notice>
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
// Layout selector.
|
||||
if ( ! layout ) {
|
||||
return (
|
||||
<Placeholder
|
||||
className="canvas-component-custom-layouts-placeholder"
|
||||
icon={ Icon }
|
||||
label={ __( 'Section' ) }
|
||||
instructions={ __( 'Select the section layout type.' ) }
|
||||
>
|
||||
{ this.getLayoutSelector() }
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
var sectionStyle = {};
|
||||
|
||||
if ( ! canvasBSLocalize.disableSectionResponsive ) {
|
||||
sectionStyle = {
|
||||
maxWidth: ( contentWidth || canvasBSLocalize.sectionResponsiveMaxWidth ) + 'px',
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{ 'full' === layout ? (
|
||||
<BlockControls key="controls">
|
||||
<BlockAlignmentToolbar
|
||||
value={ layoutAlign }
|
||||
onChange={ ( val ) => {
|
||||
setAttributes( { layoutAlign: val } );
|
||||
|
||||
window.dispatchEvent(new Event( 'resize' ) );
|
||||
}
|
||||
}
|
||||
controls={ [ 'full' ] }
|
||||
/>
|
||||
</BlockControls>
|
||||
) : '' }
|
||||
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __( 'Layout' ) }
|
||||
>
|
||||
<BaseControl>
|
||||
{ this.getLayoutSelector() }
|
||||
</BaseControl>
|
||||
|
||||
{ ( ! canvasBSLocalize.disableSectionResponsive ) && ( ( 'full' === layout && ! layoutAlign ) || ( 'full' !== layout ) ) ? (
|
||||
<Fragment>
|
||||
<RangeControl
|
||||
label={ __( 'Content Width (px.)' ) }
|
||||
value={ contentWidth || canvasBSLocalize.sectionResponsiveMaxWidth }
|
||||
min={ 320 }
|
||||
max={ 2560 }
|
||||
step={ 1 }
|
||||
onChange={ ( val ) => {
|
||||
setAttributes( { contentWidth: val } );
|
||||
|
||||
window.dispatchEvent(new Event( 'resize' ) );
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
) : '' }
|
||||
|
||||
{ 'with-sidebar' === layout ? (
|
||||
<Fragment>
|
||||
<ToggleControl
|
||||
label={ __( 'Sticky Sidebar' ) }
|
||||
checked={ !! sidebarSticky }
|
||||
onChange={ () => { setAttributes( { sidebarSticky: ! sidebarSticky } ) } }
|
||||
/>
|
||||
{ sidebarSticky ? (
|
||||
<SelectControl
|
||||
label={ __( 'Sticky Method' ) }
|
||||
value={ sidebarStickyMethod }
|
||||
onChange={ ( val ) => { setAttributes( { sidebarStickyMethod: val } ) } }
|
||||
options={ [
|
||||
{
|
||||
label: __( 'Top Edge' ),
|
||||
value: 'top',
|
||||
}, {
|
||||
label: __( 'Bottom Edge' ),
|
||||
value: 'bottom',
|
||||
}, {
|
||||
label: __( 'Top Edge of Last Block' ),
|
||||
value: 'top-last-block',
|
||||
}
|
||||
] }
|
||||
/>
|
||||
) : '' }
|
||||
</Fragment>
|
||||
) : '' }
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
<div className={ className }>
|
||||
<div className="cnvs-block-section-inner" style={ sectionStyle }>
|
||||
<InnerBlocks
|
||||
template={ this.getLayoutTemplate() }
|
||||
templateLock="all"
|
||||
allowedBlocks={ [ 'canvas/section-content', 'canvas/section-sidebar' ] }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user