编辑文件 - module-css.php

✏️ 正在编辑: module-css.php

路径: /home/qyel0117/public_html/wp-content/themes/semplice7/admin/customize/navigations/module-css.php
提示: 您可以编辑任何文件（包括二进制文件），但请注意不当修改可能导致文件损坏。

<?php

// namespace
namespace Semplice\Admin\Customize\Navigations;

// use
use Semplice\Admin\Customize\Navigations;
use Semplice\Helper\Basic;
use Semplice\Helper\Get;
use Semplice\Helper\Color;
use Semplice\Helper\Typography;

// -----------------------------------------
// module atts
// -----------------------------------------

class ModuleCss {

// -----------------------------------------
	// get
	// -----------------------------------------

public static function get($navbar, $nav_id, $id, $module, $options) {
		$output_css = '';
		$selector = '[data-customize-bp="##breakpoint##"] .' . $nav_id . ' #' . $id;
		// default hover for menu and link
		if($module == 'menu' || $module == 'link') {
			$options['hover-color'] = (isset($options['hover-color'])) ? $options['hover-color'] : '#000000';
			$options['hover-text-decoration-color'] = (isset($options['hover-text-decoration-color'])) ? $options['hover-text-decoration-color'] : '#000000';
		}
		// get module atts
		$modules = self::modules();
		// module is set?
		if(isset($modules[$module])) {
			// module atts
			$module_atts = $modules[$module];
			// get breakpoints
			$breakpoints = Get::breakpoints(true);
			// iterate breakpoints
			foreach ($breakpoints as $bp => $width) {
				// reset css
				$css = '';
				// iterate modules
				foreach($module_atts as $name => $atts) {
					//echo 'Module: ' . $module . ' / attribute: ' . $name . '<br />';
					if(isset($atts['attr']) && is_array($atts['attr'])) {
						$multi_css = '';
						// text decoration thickness shows .5px when set to 0
						if(in_array('text-decoration-thickness', $atts['attr']) && isset($options['text-decoration-thickness']) && $options['text-decoration-thickness'] != '0rem' && !is_array($atts['target']) && false === strpos($atts['target'], ':hover') && $bp == 'xl') {
							$multi_css .= 'text-decoration: underline;';
						}
						foreach($atts['attr'] as $css_attribute) {
							$val = Navigations::get_val($options, $css_attribute, $bp);
							if($val) {
								$multi_css .=  str_replace(array('hover-', 'active-'), '', $css_attribute) . ': ' . $val . ';';
							}
						}
						if(!empty($multi_css)) {
							$css .= Navigations::selector($selector, $atts['target']) . ' {' . $multi_css . '}';
						}
					} else if(false !== strpos($name, 'custom-')) {
						$css .= self::{$atts['handler']}($navbar, $nav_id, $id, $module, $options, $bp);
					} else {
						$val = Navigations::get_val($options, $name, $bp);
						if($val) {
							$css .= Navigations::selector($selector, $atts['target']) . ' { ' . str_replace(array('hover-', 'active-'), '', $atts['attr']) . ': ' . $val . '; }';
						}
					}
				}
				// add to css output
				if(!empty($css) && $bp != 'xl') {
					if(!Navigations::$is_frontend) {
						$output_css .= str_replace('##breakpoint##', $bp, $css);
					} else {
						$output_css .= '@media screen' . $width['min'] . $width['max'] . ' { ' . str_replace('[data-customize-bp="##breakpoint##"] ', '', $css) . '}';
					}
				} else {
					$output_css .= str_replace('[data-customize-bp="##breakpoint##"]', '', $css);
				}
			}
		}
		// return css
		return $output_css;
	}

// -----------------------------------------
	// modules
	// -----------------------------------------

public static function modules() {
		return array(
			'menu' => array(
				'menu' => array(
					'target' => 'ul',
					'attr' => array(
						'text-align',
						'gap'
					)
				),
				'regular' => array(
					'target' => 'nav > ul > li > a span',
					'attr' => array(
						'color',
						'font-size',
						'text-transform',
						'letter-spacing',
						'text-decoration-thickness',
						'text-decoration-color',
						'text-decoration-style',
						'text-underline-offset'
					)
				),
				'custom-item_background' => array(
					'handler' => 'item_background'
				),
				'mouseover' => array(
					'target' => 'nav > ul > li > a:hover span',
					'attr' => array(
						'hover-color',
						'hover-text-decoration-color',
					)
				),
				'mouseoverItemBackground' => array(
					'target' => 'nav > ul > li > a:hover',
					'attr' => array(
						'hover-background'
					)
				),
				'active' => array(
					'target' => array('nav > ul > li.current-menu-item > a span', 'nav > ul > li.current_page_item > a span', 'nav > ul > li.wrap-focus > a span'),
					'attr' => array(
						'active-color',
						'active-text-decoration-color',
					)
				),
				'activeItemBackground' => array(
					'target' => array('nav > ul > li.current-menu-item > a', 'nav > ul > li.current_page_item > a', 'nav > ul > li.wrap-focus > a'),
					'attr' => array(
						'active-background'
					)
				),
				'custom-seperator' => array(
					'handler' => 'seperator'
				),
				'custom-dropdown' => array(
					'handler' => 'dropdown'
				),
				'custom-active_font' => array(
					'handler' => 'active_font'
				),
				'custom-hamburger' => array(
					'handler' => 'hamburger'
				),
				'custom-underline_hover' => array(
					'handler' => 'underline_hover'
				),
			),
			'link' => array(
				'regular' => array(
					'target' => 'a',
					'attr' => array(
						'color',
						'font-size',
						'line-height',
						'text-transform',
						'letter-spacing',
						'padding-bottom',
						'text-decoration-thickness',
						'text-decoration-color',
						'text-decoration-style',
						'text-underline-offset'
					)
				),
				'mouseover' => array(
					'target' => 'a:hover',
					'attr' => array(
						'hover-color',
						'hover-text-decoration-color',
					)
				),
			),
			'text' => array(
				'regular' => array(
					'target' => '.is-content',
					'attr' => array(
						'color',
						'font-size',
						'line-height',
						'text-transform',
						'letter-spacing'
					)
				)
			),
			'image' => array(
				'custom_width' =>array(
					'target' => 'img',
					'attr' => 'width'
				)
			),
			'spacer' => array(
				'regular' => array(
					'target' => '.spacer',
					'attr' => array(
						'background-color',
						'height',
					)
				)
			),
			'button' => array(
				'regular' => array(
					'target' => 'button',
					'attr' => array(
						'color',
						'font-size',
						'line-height',
						'text-transform',
						'letter-spacing',
						'background',
						'border-color',
						'border-width',
						'border-radius',
						'padding-top',
						'padding-right',
						'padding-bottom',
						'padding-left',
						'justify-content'
					)
				),
				'mouseover' => array(
					'mode' => 'multi',
					'target' => 'button:hover',
					'attr' => array(
						'hover-color',
						'hover-letter-spacing',
						'hover-background',
						'hover-border-color',
					)
				),
				'icon_height' => array(
					'target' => 'button span.icon img',
					'attr' => 'height'
				),
				'custom-button_hover' => array(
					'handler' => 'button_hover'
				),
				'custom-button_icon' => array(
					'handler' => 'button_icon'
				)
			),
			'lottie' => array(
				'custom_width' =>array(
					'target' => '.smp-nav-lottie',
					'attr' => 'width'
				)
			)
		);
	}

// -----------------------------------------
	// button hover
	// -----------------------------------------

public static function button_hover($navbar, $nav_id, $id, $module, $options, $bp) {
		// only add for xl
		$css = '';
		if($bp == 'xl') {
			$colors = array(
				'normal' => isset($options['background']) ? $options['background'] : '#ffd300',
				'hover'	 => isset($options['hover-background']) ? $options['hover-background'] : '#ffe152'
			);
			// background color
			$css .= '.' . $nav_id . ' #' . $id . ' button { transition: all .2s ease-out, ' . Color::gradient_vars('.7', '--ease-out-expo') . '; }';
			$css .= Color::gradient_mouseover('.smp-navbar #' . $id . ' button', $colors['normal'], $colors['hover'], false);
		}
		return $css;
	}

// -----------------------------------------
	// button icon
	// -----------------------------------------

public static function button_icon($navbar, $nav_id, $id, $module, $options, $bp) {
		// vars
		$direction = (isset($options['icon_direction'])) ? $options['icon_direction'] : 'right';
		$spacing = Navigations::get_val($options, 'icon_spacing', $bp);
		$spacing_dir = ($direction == 'left') ? 'right' : 'left';
		// is spacing?
		if($spacing) {
			return '.' . $nav_id . ' #' . $id . ' button span.icon { margin-' . $spacing_dir . ': ' . $spacing . '; }';
		}
	}

// -----------------------------------------
	// hamburger
	// -----------------------------------------

public static function hamburger($navbar, $nav_id, $id, $module, $options, $bp) {
		// vars
		$css = '';
		$mode = (isset($options['hamburger_mode'])) ? $options['hamburger_mode'] : 'default';
		// switch
		switch($mode) {
			case 'default':
				// vars
				$prefix = 'hamburger_';
				$sel = '.' . $nav_id . ' #' . $id . ' .hamburger ';
				// defaults
				$defaults = array(
					'color' => '#000000',
					'thickness' => 2,
					'padding' => 6,
					'width' => 24
				);
				// iterate defaults
				foreach($defaults as $attr => $default) {
					// get val
					$val = Navigations::get_val($options, $prefix . $attr, $bp);
					// has val?
					if(false !== $val) {
						// width
						if($attr == 'width') {
							$css .= $sel . '.menu-icon { width: ' . $val . ' !important; }';
						}
						// height
						if($attr == 'thickness') {
							$padding = Navigations::get_val($options, $prefix . 'padding', $bp);
							$height = $val + (((false !== $padding) ? $padding : $defaults['padding']) * 2);
							$css .= $sel . '.menu-icon { height: ' . $height . 'px !important; }';
							$css .= $sel . '.menu-icon span { height: ' . $val . 'px !important; margin-top: ' . ($height / 2) . 'px !important; }';
						}
						// padding
						if($attr == 'padding') {
							// hamburger padding
							$css .= $sel . '
								.open-menu span::before { transform: translateY(-' . $val . 'px) !important; }
								.open-menu span::after { transform: translateY(' . $val . 'px) !important; }
							';
							$css .= '@media (hover: hover) {' . $sel . '
								.open-menu:hover span::before { transform: translateY(-' . ($val + 2) . 'px) !important; }
								.open-menu:hover span::after { transform: translateY(' . ($val + 2) . 'px) !important; }
							}';
						}
						// color
						if($attr == 'color') {
							$css .= $sel . '.menu-icon span { background: ' . $val . ' !important; }';
						}
					}
				}
			break;
			case 'custom':
				// width
				$width = Navigations::get_val($options, 'hamburger_custom_width', $bp);
				if($width) {
					$css .= '.' . $nav_id . ' #' . $id . ' .hamburger img { width: ' . $width . '; }';
				}
			break;
			case 'text':
				// vars
				$prefix = 'hamburger_text_';
				$normal = '';
				$hover = '';
				// values
				$values = array(
					'color' => 'color',
					'mouseover_color' => 'color',
					'fontsize' => 'font-size',
					'text_transform' => 'text-transform',
					'letter_spacing' => 'letter-spacing',
					'border_color' => 'border-bottom-color',
					'mouseover_border_color' => 'border-bottom-color',
					'border' => 'border-bottom-width',
					'border_padding' => 'padding-bottom'
				);
				// iterate
				foreach($values as $name => $css_attr) {
					$val = Navigations::get_val($options, $prefix . $name, $bp);
					if($val) {
						if(false !== strpos($name, 'mouseover')) {
							$hover .= $css_attr . ': ' . $val . ';';
						} else {
							$normal .= $css_attr . ': ' . $val . ';';
						}
					}
				}
				// add to css
				if(!empty($hover)) {
					$css .= '@media (hover: hover) { .' . $nav_id . ' #' . $id . ' .hamburger-text:hover { ' . $hover . ' } }';
				}
				if(!empty($normal)) {
					$css .= '.' . $nav_id . ' #' . $id . ' .hamburger-text { ' . $normal . ' }';
				}
			break;
		}
		// return
		return $css;
	}

// -----------------------------------------
	// item background
	// -----------------------------------------

public static function item_background($navbar, $nav_id, $id, $module, $options, $bp) {
		// vars
		$css = '';
		$sel = '.' . $nav_id . ' #' . $id . ' nav > ul > li > a ';
		$defaults = array(
			'bg_color' => '#00000000',
			'bg_spacing_ver' => 0,
			'bg_spacing_hor' => 0,
			'bg_radius' => 0
		);
		// iterate defaults
		foreach($defaults as $name => $default) {
			$val = Navigations::get_val($options, $name, $bp);
			// get from defaults if xl and not value
			if($bp == 'xl' && false === $val) {
				$val = $defaults[$name];
			}
			// has val
			if(false !== $val) {
				// replace spacing in the defaults
				if(false !== strpos($name, 'spacing')) {
					$defaults[$name] = $val;
				}
				// bg color and border radius
				if($name == 'bg_color') {
					$css .= $sel . '{ background-color: ' . $val . '; }';
				} else if($name == 'bg_radius') {
					$css .= $sel . '{ border-radius: ' . $val . 'px; }';
				}
			}
		}
		// spacing
		if($bp == 'xl' || $defaults['bg_spacing_ver'] != 0 || $defaults['bg_spacing_hor'] != 0) {
			$css .= $sel . ' { padding: ' . $defaults['bg_spacing_ver'] . 'px ' . $defaults['bg_spacing_hor'] . 'px; }';
		}
		// return
		return $css;
	}

// -----------------------------------------
	// active font
	// -----------------------------------------

public static function active_font($navbar, $nav_id, $id, $module, $options, $bp) {
		// is something other than default font?
		if(isset($options['active-font-family']) && $options['active-font-family'] != 'default-font' && $bp == 'xl') {
			$font = Navigations::get_val($options, 'active-font-family', 'xl');
			// has font family set
			if($font) {
				$sel = '.' . $nav_id . ' #' . $id . ' nav ul';
				// get font family
				$font = Typography::get_font_family($font);
				// add to css
				return '
					' . $sel . ' li.current-menu-item a span,
					' . $sel . ' li.current_page_item a span,
					' . $sel . ' li.wrap-focus a span {
						' . $font . '
					}
				';
			}
		}
	}

// -----------------------------------------
	// seperator
	// -----------------------------------------

public static function seperator($navbar, $nav_id, $id, $module, $options, $bp) {
		// vars
		$css = '';
		$prefix = 'seperator_';
		$sel = '#' . $id . ' nav ul li';
		$menu_dir = isset($options['menu_direction']) ? $options['menu_direction'] : 'horizontal';
		$gap = (($gap = Navigations::get_val($options, 'gap', $bp)) !== false) ? Basic::rem_to_px($gap) : 24;
		// set seperator one time for xl
		if($bp == 'xl') {
			// mode
			if($menu_dir == 'vertical' && isset($options['seperator_visibility']) && $options['seperator_visibility'] == 'visible') {
				$mode = (isset($options['seperator_mode'])) ? $options['seperator_mode'] : 'hidden';
				if ($mode == 'top') {
					$css .= "{$sel}:first-child::before { display: block; }";
				} elseif ($mode == 'bottom') {
					$css .= "{$sel}:last-child::after { display: block; }";
				} elseif ($mode == 'both') {
					$css .= "{$sel}:first-child::before { display: block; }";
					$css .= "{$sel}:last-child::after { display: block; }";
				}
			}
			// color
			$color = Navigations::get_val($options, 'seperator_color', 'xl');
			if(false !== $color) {
				$css .= "{$sel}::after, {$sel}::before { background: {$color}; }";
			}
		}
		// height
		$height = Navigations::get_val($options, 'seperator_height', $bp);
		if(false !== $height) {
			// convert to px
			$height = Basic::rem_to_px($height);	
			// add to css
			$css .= "
				{$sel}::after, {$sel}::before { height: {$height}px; }
				{$sel}::after { bottom: -" . (($gap + $height) / 2) . "px; }
				{$sel}::before { top: -" . (($gap + $height) / 2) . "px; }
			";
		}
		// return css
		return $css;
	}

// -----------------------------------------
	// dropdown
	// -----------------------------------------

public static function dropdown($navbar, $nav_id, $id, $module, $options, $bp) {
		// vars
		$css = '';
		$sel = '#' . $id . ' nav ul li';
		$menu_dir = isset($options['menu_direction']) ? $options['menu_direction'] : 'horizontal';
		$type = ($menu_dir == 'horizontal') ? 'dropdown' : 'nested';
		$margin_dir = ($navbar == 'navbar-bottom') ? 'bottom' : 'top';
		$nested_mode = (isset($options['nested_mode'])) ? $options['nested_mode'] : 'toggle';
		// defaults
		$defaults = array(
			'shadow' => array(
				'size' => 10,
				'color' => '#000000'
			),
			'spacing' => array(
				'hor' => '0.88889rem',
				'ver' => '0rem'
			),
			'margin' => array(
				'top' => '0.44445rem',
				'bottom' => '0.44445rem',
			)
		);
		// atts
		$atts = array(
			'dropdown' => array(
				'ul.sub-menu' => array(
					'spacing' => 'padding',
					'bg_color' => 'background',
					'radius' => 'custom',
					'top' => 'custom',
					'gap' => 'gap',
					'text_align' => 'text-align',
					'border_color' => 'border-color',
					'border_width' => 'border-width',
					'bg_blur' => 'custom',
					'shadow_size' => 'custom',
					'shadow_color' => 'custom'
				),
				'ul.sub-menu li a span' => array(
					'color' => 'color',
					'fontsize' => 'font-size',
					'letter_spacing' => 'letter-spacing',
					'text_transform' => 'text-transform',
					'font_family' => 'custom'
				),
				'ul.sub-menu li a:hover span' => array(
					'hover_color' => 'color'
				),
				'submenu-arrow' => array(
					'arrow_width' => 'width',
					'arrow_spacing' => 'margin-left'
				),
				'submenu-arrow svg path' => array(
					'arrow_color' => 'stroke'
				)
			),
			'nested' => array(
				'ul.sub-menu' => array(
					'bg_color' => 'background',
					'radius' => 'border-radius',
					'gap' => 'gap',
					'text_align' => 'text-align',
					'hor_spacing' => 'custom',
					'ver_spacing' => 'custom',
					'top' => 'custom',
					'bottom' => 'custom'
				),
				'ul.sub-menu li a span' => array(
					'color' => 'color',
					'fontsize' => 'font-size',
					'letter_spacing' => 'letter-spacing',
					'text_transform' => 'text-transform',
					'font_family' => 'custom'
				),
				'ul.sub-menu li a:hover span' => array(
					'hover_color' => 'color'
				),
				'submenu-arrow' => array(
					'arrow_width' => 'width',
					'arrow_spacing' => 'margin-left'
				),
				'submenu-arrow svg path' => array(
					'arrow_color' => 'stroke'
				)
			)
		);
		// iterate atts
		foreach($atts[$type] as $target_sel => $css_atts) {
			$local_css = '';
			$has_shadow = false;
			$has_spacing = false;
			foreach($css_atts as $attr => $css_attr) {
				// get val
				$val = Navigations::get_val($options, $type . '_' . $attr, $bp);
				// add to local css
				if(false !== $val) {
					// is custom?
					if($css_attr != 'custom') {
						$local_css .= $css_attr . ': ' . $val . ';';
					} else {
						// border radius
						if($attr == 'radius') {
							$local_css .= 'border-radius: ' . $val . 'px;';
						}
						// dropdown margin
						if($attr == 'top' && $type == 'dropdown') {
							$local_css .= 'margin-' . $margin_dir . ': ' . $val . ';';
						}
						// font family
						if($attr == 'font_family' && $bp == 'xl') {
							$local_css .= Typography::get_font_family($val);
						}
						// bg blur (only add if > 0px)
						if($attr == 'bg_blur' && $val > 0) {
							$local_css .= 'backdrop-filter: blur(' . $val . 'px);';
						}
						// dropdown shadow
						if(false !== strpos($attr, 'shadow_')) {
							$size = Navigations::get_val($options, 'dropdown_shadow_size', $bp);
							$color = Navigations::get_val($options, 'dropdown_shadow_color', $bp);
							$local_css .= 'box-shadow: 0px 0px ' . ((false !== $size) ? $size : $defaults['shadow']['size']) . 'px ' . ((false !== $color) ? $color : $defaults['shadow']['color']) . ';';
							$has_shadow = true;
						}
						// nested mode margin/spacing
						$spacing_atts = ['nested_hor_spacing', 'nested_ver_spacing', 'nested_top', 'nested_bottom'];
						if(in_array($type . '_' . $attr, $spacing_atts)) {
							$hor_spacing = Navigations::get_val($options, 'nested_hor_spacing', $bp);
							$ver_spacing = Navigations::get_val($options, 'nested_ver_spacing', $bp);
							$top = Navigations::get_val($options, 'nested_top', $bp);
							$bottom = Navigations::get_val($options, 'nested_bottom', $bp);
							// nested type
							if($nested_mode == 'open') {
								$local_css .= '
									padding: ' . ((false !== $ver_spacing) ? $ver_spacing : $defaults['spacing']['ver']) . ' ' . ((false !== $hor_spacing) ? $hor_spacing : $defaults['spacing']['hor']) . ';
									margin: ' . ((false !== $top) ? $top : $defaults['margin']['top']) . ' 0px ' . ((false !== $bottom) ? $bottom : $defaults['margin']['bottom']) . ' 0px;
								';
							} else {
								$local_css .= '
									padding-left: ' . ((false !== $hor_spacing) ? $hor_spacing : $defaults['spacing']['hor']) . ';
									padding-right: ' . ((false !== $hor_spacing) ? $hor_spacing : $defaults['spacing']['hor']) . ';
								';
							}
							$has_spacing = true;
						}
					}
				}
			}
			// has local css?
			if(!empty($local_css)) {
				$css .= $sel . ' ' . $target_sel . ' { ' . $local_css . ' }';
			}
		}
		// vertical fixed arrow (only once for xl)
		$arrow_align = Navigations::get_val($options, 'nested_arrow_align', $bp);
		if($menu_dir == 'vertical' && false !== $arrow_align && $arrow_align != 'inline' && $bp == 'xl') {
			$css .= "
				#{$id} nav ul li a submenu-arrow {
					position: absolute;
					{$arrow_align}: 0;
					margin: 0px !important;
				}
			";
		}
		// return
		return $css;
	}

// -----------------------------------------
	// underline hover
	// -----------------------------------------

public static function underline_hover($navbar, $nav_id, $id, $module, $options, $bp) {
		$css = '';
		// is underline effect set?
		if(isset($options['hover-effect']) && $options['hover-effect'] == 'underline') {
			// vars
			$prefix = 'hover-underline-';
			$sel = '#' . $id . ' nav > ul > li >';
			// defaults
			$defaults = [
				'color'  => '#000000',
				'size'   => 2,
				'offset' => 0

];
			// compensate for item background paddings
			$padding_ver = intval(isset($options['bg_spacing_ver']) ? $options['bg_spacing_ver'] : 0);
			$padding_hor = intval(isset($options['bg_spacing_hor']) ? $options['bg_spacing_hor'] : 0);
			// iterate defaults
			foreach($defaults as $name => $val) {
				if(isset($options[$prefix . $name . '_' . $bp])) {
					$defaults[$name] = $options[$prefix . $name . '_' . $bp];
				} else if(isset($options[$prefix . $name])) {
					$defaults[$name] = $options[$prefix . $name];
				}
			}
			// bottom
			$bottom = $padding_ver - intval($defaults['offset']);
			// add to css
			$css .= "
				{$sel} a span::after {
					height: {$defaults['size']}px;
					background: {$defaults['color']};
					bottom: {$bottom}px;
					left: {$padding_hor}px;
					right: {$padding_hor}px;
				}
			";
		}
		// return
		return $css;
	}
}

// instance
new ModuleCss;
?>

← 返回文件管理器