adding horizontal dropdown alignment options

stellarwp · Jul 1, 2024 · 0e37b30 · 0e37b30
1 parent 7768155
commit 0e37b30
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 7 deletions.
diff --git a/includes/blocks/class-kadence-blocks-navigation-block.php b/includes/blocks/class-kadence-blocks-navigation-block.php
@@ -164,7 +164,17 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De
 			if ( $sized_attributes['dropdownShadow'] && isset( $sized_attributes['dropdownShadow'][0] ) && $sized_attributes['dropdownShadow'][0]['enable'] ) {
 				$css->add_property( 'box-shadow', $css->render_shadow( $sized_attributes['dropdownShadow'][0] ) );
 			}
+
+			$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . '.wp-block-kadence-navigation .navigation ul.menu li:hover > ul.sub-menu' );
+			if ( $sized_attributes['dropdownHorizontalAlignment'] == 'center' ) {
+				$css->add_property( 'left', '50%' );
+				$css->add_property( 'transform', 'translate(-50%, 0)' );
+			} else if ( $sized_attributes['dropdownHorizontalAlignment'] == 'right' ) {
+				$css->add_property( 'right', '0' );
+			}
 		}
+
+
 		$css->set_selector( '.wp-block-kadence-navigation' . $unique_id . ' .navigation .menu-container ul ul li:not(:last-of-type), .wp-block-kadence-navigation' . $unique_id . ' .menu-container ul.menu > li.kadence-menu-mega-enabled > ul > li.menu-item > a' );
 		$css->add_property( 'border-bottom', $css->render_border( $sized_attributes['dropdownDivider'], 'bottom' ) );
 

diff --git a/includes/navigation/class-kadence-navigation-cpt.php b/includes/navigation/class-kadence-navigation-cpt.php
@@ -1082,6 +1082,21 @@ public function register_meta() {
 				'type' => 'string',
 				'default' => 'em',
 			),
+			array(
+				'key'     => '_kad_navigation_dropdownHorizontalAlignment',
+				'type' => 'string',
+				'default' => '',
+			),
+			array(
+				'key'     => '_kad_navigation_dropdownHorizontalAlignmentTablet',
+				'type' => 'string',
+				'default' => '',
+			),
+			array(
+				'key'     => '_kad_navigation_dropdownHorizontalAlignmentMobile',
+				'type' => 'string',
+				'default' => '',
+			),
 			array(
 				'key' => '_kad_navigation_dropdownShadow',
 				'type' => 'array',

diff --git a/src/blocks/navigation/components/backend-styles/index.js b/src/blocks/navigation/components/backend-styles/index.js
@@ -125,6 +125,9 @@ export default function BackendStyles(props) {
 		dropdownVerticalSpacingTablet,
 		dropdownVerticalSpacingMobile,
 		dropdownVerticalSpacingUnit,
+		dropdownHorizontalAlignment,
+		dropdownHorizontalAlignmentTablet,
+		dropdownHorizontalAlignmentMobile,
 		dropdownShadow,
 		dropdownBorder,
 		dropdownBorderTablet,
@@ -325,6 +328,12 @@ export default function BackendStyles(props) {
 		undefined !== dropdownBorderRadiusTablet ? dropdownBorderRadiusTablet[3] : '',
 		undefined !== dropdownBorderRadiusMobile ? dropdownBorderRadiusMobile[3] : ''
 	);
+	const previewDropdownHorizontalAlignment = getPreviewSize(
+		previewDevice,
+		dropdownHorizontalAlignment,
+		dropdownHorizontalAlignmentTablet,
+		dropdownHorizontalAlignmentMobile
+	);
 	//need to caclulate this outside of conditionals because it uses a hook underneath.
 	const dividerValue = css.render_border(divider, dividerTablet, dividerMobile, previewDevice, 'bottom');
 	const dropdownDividerValue = css.render_border(
@@ -491,6 +500,16 @@ export default function BackendStyles(props) {
 		if (dropdownShadow?.[0]?.enable) {
 			css.add_property('box-shadow', css.render_shadow(dropdownShadow[0]));
 		}
+
+		css.set_selector(
+			`.wp-block-kadence-navigation${uniqueID}.wp-block-kadence-navigation .navigation ul.menu li:hover > ul.sub-menu`
+		);
+		if (previewDropdownHorizontalAlignment == 'center') {
+			css.add_property('left', '50%');
+			css.add_property('transform', 'translate(-50%, 0)');
+		} else if (previewDropdownHorizontalAlignment == 'right') {
+			css.add_property('right', '0');
+		}
 	}
 	css.set_selector(
 		`.wp-block-kadence-navigation${uniqueID} .navigation .menu-container ul ul li:not(:last-of-type), .wp-block-kadence-navigation${uniqueID} .menu-container ul.menu > li.kadence-menu-mega-enabled > ul > li.menu-item > a`

diff --git a/src/blocks/navigation/edit-inner.js b/src/blocks/navigation/edit-inner.js
@@ -235,6 +235,13 @@ export function EditInner(props) {
 		dropdownVerticalSpacingTablet: meta?._kad_navigation_dropdownVerticalSpacingTablet,
 		dropdownVerticalSpacingMobile: meta?._kad_navigation_dropdownVerticalSpacingMobile,
 		dropdownVerticalSpacingUnit: meta?._kad_navigation_dropdownVerticalSpacingUnit,
+		dropdownHorizontalAlignment: meta?._kad_navigation_dropdownHorizontalAlignment,
+		dropdownHorizontalAlignmentTablet: meta?._kad_navigation_dropdownHorizontalAlignmentTablet,
+		dropdownHorizontalAlignmentMobile: meta?._kad_navigation_dropdownHorizontalAlignmentMobile,
+		dropdownHorizontalAlignmentCustom: meta?._kad_navigation_dropdownHorizontalAlignmentCustom,
+		dropdownHorizontalAlignmentCustomTablet: meta?._kad_navigation_dropdownHorizontalAlignmentCustomTablet,
+		dropdownHorizontalAlignmentCustomMobile: meta?._kad_navigation_dropdownHorizontalAlignmentCustomMobile,
+		dropdownHorizontalAlignmentCustomUnit: meta?._kad_navigation_dropdownHorizontalAlignmentCustomUnit,
 		dropdownShadow: meta?._kad_navigation_dropdownShadow,
 		dropdownReveal: meta?._kad_navigation_dropdownReveal,
 		dropdownRevealTablet: meta?._kad_navigation_dropdownRevealTablet,
@@ -382,6 +389,9 @@ export function EditInner(props) {
 		dropdownVerticalSpacingTablet,
 		dropdownVerticalSpacingMobile,
 		dropdownVerticalSpacingUnit,
+		dropdownHorizontalAlignment,
+		dropdownHorizontalAlignmentTablet,
+		dropdownHorizontalAlignmentMobile,
 		dropdownShadow,
 		dropdownReveal,
 		dropdownRevealTablet,
@@ -396,6 +406,12 @@ export function EditInner(props) {
 	} = metaAttributes;
 
 	const previewOrientation = getPreviewSize(previewDevice, orientation, orientationTablet, orientationMobile);
+	const previewDropdownHorizontalAlignment = getPreviewSize(
+		previewDevice,
+		dropdownHorizontalAlignment,
+		dropdownHorizontalAlignmentTablet,
+		dropdownHorizontalAlignmentMobile
+	);
 	const previewStyle = getPreviewSize(previewDevice, style, styleTablet, styleMobile);
 	const previewCollapseSubMenus = getPreviewSize(
 		previewDevice,
@@ -977,7 +993,7 @@ export function EditInner(props) {
 								/>
 							)}
 							<SmallResponsiveControl
-								label={'layout toggles'}
+								label={'layout options'}
 								desktopChildren={generalToggleControls()}
 								tabletChildren={generalToggleControls('Tablet')}
 								mobileChildren={generalToggleControls('Mobile')}
@@ -1174,7 +1190,7 @@ export function EditInner(props) {
 								</>
 							)}
 							<ResponsiveRangeControls
-								label={__('Dropdown Vertical Spacing', 'kadence-blocks')}
+								label={__('Dropdown Item Vertical Spacing', 'kadence-blocks')}
 								value={parseFloat(dropdownVerticalSpacing)}
 								valueTablet={parseFloat(dropdownVerticalSpacingTablet)}
 								valueMobile={parseFloat(dropdownVerticalSpacingMobile)}
@@ -1204,6 +1220,21 @@ export function EditInner(props) {
 								onUnit={(value) => setMetaAttribute(value, 'dropdownVerticalSpacingUnit')}
 								showUnit={true}
 							/>
+
+							<ResponsiveSelectControl
+								label={__('Dropdown Horizontal Alignment', 'kadence-blocks')}
+								value={dropdownHorizontalAlignment}
+								tabletValue={dropdownHorizontalAlignmentTablet}
+								mobileValue={dropdownHorizontalAlignmentMobile}
+								options={[
+									{ value: '', label: __('Left') },
+									{ value: 'center', label: __('Center') },
+									{ value: 'right', label: __('Right') },
+								]}
+								onChange={(value) => setMetaAttribute(value, 'dropdownHorizontalAlignment')}
+								onChangeTablet={(value) => setMetaAttribute(value, 'dropdownHorizontalAlignmentTablet')}
+								onChangeMobile={(value) => setMetaAttribute(value, 'dropdownHorizontalAlignmentMobile')}
+							/>
 							<ResponsiveBorderControl
 								label={__('Dropdown Border', 'kadence-blocks')}
 								value={dropdownBorder}

diff --git a/src/blocks/navigation/style.scss b/src/blocks/navigation/style.scss
@@ -28,7 +28,7 @@
 @mixin hide-sub-menu {
 	opacity: 0;
 	visibility: hidden;
-	transform: translate3d(0, 0, 0);
+	transform: translate(0, 0);
 	clip: rect(1px, 1px, 1px, 1px);
 	height: 1px;
 	overflow: hidden;
@@ -37,17 +37,17 @@
 @mixin show-sub-menu {
 	opacity: 1;
 	visibility: visible;
-	transform: translate3d(0, 0, 0);
+	transform: translate(0, 0);
 	clip: auto;
 	height: auto;
 	overflow: visible;
 }
 
 @mixin navigation-fade-up-styles {
-	transform: translate3d(0, 10px, 0);
+	transform: translate(0, 10px);
 }
 @mixin navigation-fade-down-styles {
-	transform: translate3d(0, -10px, 0);
+	transform: translate(0, -10px);
 }
 
 @mixin horizontal-navigation-base-styles {
@@ -638,7 +638,7 @@
 		text-decoration: none;
 		color: var(--global-palette4);
 		transition: all 0.2s ease-in-out;
-		transform: translate3d(0, 0, 0);
+		transform: translate(0, 0);
 	}
 	.navigation .menu-item > .link-drop-wrap > a:hover,
 	.navigation .menu-item > .link-drop-wrap > a:focus {