Skip to content

Commit

Permalink
Responsive column widths
Browse files Browse the repository at this point in the history
  • Loading branch information
@oakesjosh
oakesjosh committed Dec 4, 2024
1 parent f34d368 commit 21d69ae
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 46 deletions.
28 changes: 24 additions & 4 deletions includes/blocks/class-kadence-blocks-table-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,13 +95,33 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$has_fixed_columns = false;

foreach ( $attributes['columnSettings'] as $index => $settings ) {
if ( ( empty( $settings['useAuto'] ) || !$settings['useAuto'] ) && isset( $settings['width'] ) && '' !== $settings['width'] ) {
if ( ( empty( $settings['useAuto'] ) || !$settings['useAuto'] ) ) {
$has_fixed_columns = true;
$width_unit = ! empty( $settings['unit'] ) ? $settings['unit'] : '%';

$css->set_selector( '.kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . '), ' .
'.kb-table' . esc_attr( $unique_id ) . ' th:nth-of-type(' . ( $index + 1 ) . ')' );
$css->add_property( 'width', $settings['width'] . $width_unit );
if( isset( $settings['width'] ) && '' !== $settings['width'] ) {
$css->set_selector('.kb-table' . esc_attr($unique_id) . ' td:nth-of-type(' . ($index + 1) . '), ' .
'.kb-table' . esc_attr($unique_id) . ' th:nth-of-type(' . ($index + 1) . ')');
$css->add_property('width', $settings['width'] . $width_unit);
}

if( isset( $settings['widthTablet'] ) && '' !== $settings['widthTablet'] ) {
if( ! empty( $settings['unitTablet'] ) ) {
$width_unit = $settings['unitTablet'];
}
$css->set_media_state( 'tablet' );
$css->add_property('width', $settings['widthTablet'] . $width_unit);
$css->set_media_state( 'desktop' );
}

if( isset( $settings['widthMobile'] ) && '' !== $settings['widthMobile'] ) {
if( ! empty( $settings['unitMobile'] ) ) {
$width_unit = $settings['unitMobile'];
}
$css->set_media_state( 'mobile' );
$css->add_property('width', $settings['widthMobile'] . $width_unit);
$css->set_media_state( 'desktop' );
}
}
}

Expand Down
21 changes: 17 additions & 4 deletions src/blocks/table/components/backend-styles/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,12 @@ export default function BackendStyles(props) {
const previewMaxHeight = getPreviewSize(previewDevice, maxHeight?.[0], maxHeight?.[1], maxHeight?.[2]);
const previewMaxWidth = getPreviewSize(previewDevice, maxWidth?.[0], maxWidth?.[1], maxWidth?.[2]);
const previewRowMinHeight = getPreviewSize(previewDevice, rowMinHeight, tabletRowMinHeight, mobileRowMinHeight);
const previewColumnSettingUnit = getPreviewSize(
previewDevice,
columnSettings?.[0]?.unit,
columnSettings?.[0]?.unitTablet,
columnSettings?.[0]?.unitMobile
);

css.set_selector(`.kb-table${uniqueID}`);
css.render_font(dataTypography ? dataTypography : [], previewDevice);
Expand Down Expand Up @@ -94,19 +100,26 @@ export default function BackendStyles(props) {
if (!settings?.useAuto && settings?.width) {
hasFixedColumns = true;
if (!fixedUnit) {
fixedUnit = settings.unit;
fixedUnit = previewColumnSettingUnit;
}
if (settings.unit === fixedUnit) {
if (previewColumnSettingUnit === fixedUnit) {
totalFixedWidth += parseFloat(settings.width);
}
}
});

// Apply widths
columnSettings.forEach((settings, index) => {
if (!settings?.useAuto && settings?.width) {
if (!settings?.useAuto) {
const previewWidth = getPreviewSize(
previewDevice,
settings.width,
settings.widthTablet,
settings.widthMobile,
true
);
css.set_selector(`.kb-table${uniqueID} tr > *:nth-child(${index + 1})`);
css.add_property('width', `${settings.width}${settings.unit}`);
css.add_property('width', `${previewWidth}${previewColumnSettingUnit}`);
} else if (settings?.useAuto && hasFixedColumns) {
// For auto columns, distribute remaining space evenly
const autoColumns = columnSettings.filter((s) => s?.useAuto).length;
Expand Down
132 changes: 94 additions & 38 deletions src/blocks/table/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
ResponsiveAlignControls,
} from '@kadence/components';

import { setBlockDefaults, getUniqueId, getPostOrFseId } from '@kadence/helpers';
import { setBlockDefaults, getUniqueId, getPostOrFseId, getPreviewSize } from '@kadence/helpers';
import BackendStyles from './components/backend-styles';
import { applyFilters } from '@wordpress/hooks';
import { plus } from '@wordpress/icons';
Expand Down Expand Up @@ -272,25 +272,26 @@ export function Edit(props) {
const currentSetting = getColumnSetting(index);

// If we're changing units, update all columns
if (updates.unit && updates.unit !== currentSetting.unit) {
const defaultWidth = updates.unit === '%' ? DEFAULT_PERCENT_WIDTH : DEFAULT_PIXEL_WIDTH;

if (updates.unit || updates.unitTablet || updates.unitMobile) {
newSettings.forEach((setting, idx) => {
if (setting) {
newSettings[idx] = {
...setting,
unit: updates.unit,
width: defaultWidth,
...(updates.unit && { unit: updates.unit }),
...(updates.unitTablet && { unitTablet: updates.unitTablet }),
...(updates.unitMobile && { unitMobile: updates.unitMobile }),
};
}
});

// Fill in missing columns
for (let i = 0; i < columns; i++) {
if (!newSettings[i]) {
newSettings[i] = {
...getColumnDefaults(),
unit: updates.unit,
width: defaultWidth,
...(updates.unit && { unit: updates.unit }),
...(updates.unitTablet && { unitTablet: updates.unitTablet }),
...(updates.unitMobile && { unitMobile: updates.unitMobile }),
};
}
}
Expand Down Expand Up @@ -327,6 +328,12 @@ export function Edit(props) {
headerTypography: [{ ...headerTypography[0], ...value }, ...headerTypography.slice(1)],
});
};
const previewColumnSettingUnit = getPreviewSize(
previewDevice,
columnSettings?.[0]?.unit,
columnSettings?.[0]?.unitTablet,
columnSettings?.[0]?.unitMobile
);

const StickyUpsell = (
<>
Expand Down Expand Up @@ -490,32 +497,69 @@ export function Edit(props) {
}}
>
<div style={{ flex: 1 }}>
<RangeControl
<ResponsiveRangeControls
label={__('Max Width', 'kadence-blocks')}
value={
parseFloat(columnSetting.width) ||
(columnSetting.unit === '%'
(previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH)
}
onChange={(value) =>
updateColumnSetting(index, { width: value })
onChange={(value) => {
value = value ? value : '';
updateColumnSetting(index, { width: value });
}}
tabletValue={
parseFloat(columnSetting.widthTablet) ||
(previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH)
}
min={columnSetting.unit === '%' ? 1 : 20}
max={columnSetting.unit === '%' ? 100 : 1000}
onChangeTablet={(value) => {
value = value ? value : '';
updateColumnSetting(index, { widthTablet: value });
}}
mobileValue={
parseFloat(columnSetting.widthMobile) ||
(previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH)
}
onChangeMobile={(value) => {
value = value ? value : '';
updateColumnSetting(index, { widthMobile: value });
}}
min={0}
max={previewColumnSettingUnit === 'px' ? 2000 : 100}
step={1}
reset={() =>
updateColumnSetting(index, {
width: '',
widthTablet: '',
widthMobile: '',
})
}
unit={
previewColumnSettingUnit
? previewColumnSettingUnit
: '%'
}
allowResponsiveUnitChange={true}
onUnit={(value) => {
const device =
'Desktop' === previewDevice
? ''
: previewDevice;
console.log('Setting unit to: ', {
['unit' + device]: value,
});
updateColumnSetting(index, {
['unit' + device]: value,
});
}}
units={['px', '%']}
/>
</div>
<SelectControl
value={columnSetting.unit}
options={[
{ label: '%', value: '%' },
{ label: 'px', value: 'px' },
]}
onChange={(value) =>
updateColumnSetting(index, { unit: value })
}
style={{ minWidth: '70px' }}
/>
</div>
</>
)}
Expand Down Expand Up @@ -985,15 +1029,25 @@ export function Edit(props) {
);
}

const previewColumnWidth = getPreviewSize(
previewDevice,
columnSetting.width,
columnSetting.widthTablet,
columnSetting.widthMobile,
true
);

return (
<ResizableBox
key={index}
size={{
width: `${columnSetting.width || DEFAULT_PERCENT_WIDTH}${columnSetting.unit}`,
width: `${
previewColumnWidth || DEFAULT_PERCENT_WIDTH
}${previewColumnSettingUnit}`,
height: 30,
}}
minWidth={columnSetting.unit === '%' ? '1%' : '20'}
maxWidth={columnSetting.unit === '%' ? '100%' : '1000'}
minWidth={previewColumnSettingUnit === '%' ? '1%' : '20'}
maxWidth={previewColumnSettingUnit === '%' ? '100%' : '1000'}
enable={{
top: false,
right: true,
Expand All @@ -1007,10 +1061,10 @@ export function Edit(props) {
onResizeStart={() => {
setIsResizing(true);
// Ensure we have a valid initial width
if (!columnSetting.width) {
if (!previewColumnWidth) {
updateColumnSetting(index, {
width:
columnSetting.unit === '%'
previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH,
});
Expand All @@ -1019,19 +1073,21 @@ export function Edit(props) {
onResizeStop={(event, direction, elt, delta) => {
setIsResizing(false);
const currentWidth =
parseFloat(columnSetting.width) ||
(columnSetting.unit === '%' ? DEFAULT_PERCENT_WIDTH : DEFAULT_PIXEL_WIDTH);
parseFloat(previewColumnWidth) ||
(previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH);

const newWidth =
columnSetting.unit === '%'
previewColumnSettingUnit === '%'
? currentWidth + (delta.width / elt.parentElement.offsetWidth) * 100
: currentWidth + delta.width;

updateColumnSetting(index, {
width: Math.round(
Math.max(
columnSetting.unit === '%' ? 1 : 20,
Math.min(columnSetting.unit === '%' ? 100 : 1000, newWidth)
previewColumnSettingUnit === '%' ? 1 : 20,
Math.min(previewColumnSettingUnit === '%' ? 100 : 1000, newWidth)
)
),
});
Expand All @@ -1049,11 +1105,11 @@ export function Edit(props) {
}}
>
{`${Math.round(
columnSetting.width ||
(columnSetting.unit === '%'
previewColumnWidth ||
(previewColumnSettingUnit === '%'
? DEFAULT_PERCENT_WIDTH
: DEFAULT_PIXEL_WIDTH)
)}${columnSetting.unit}`}
)}${previewColumnSettingUnit}`}
</div>
</ResizableBox>
);
Expand Down

0 comments on commit 21d69ae

Please sign in to comment.