编辑文件 - button.php

✏️ 正在编辑: button.php

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

<?php

// namespace
namespace Semplice\Editor\Modules;

// use
use Semplice\Editor;
use Semplice\Helper\Get;
use Semplice\Helper\Color;

// -----------------------------------------
// module
// -----------------------------------------

class ButtonModule extends Editor {

public $module;

// -----------------------------------------
	// constructor
	// -----------------------------------------

public function __construct() {
		$this->module = array(
			'html' => '',
			'css'  => '',
		);
	}

// -----------------------------------------
	// output editor
	// -----------------------------------------

public function editor($id, $values) {
		// extract options
		extract( shortcode_atts(
			array(
				'label'						=> 'Semplice Button',
				'font_family'				=> 'inter_medium',
				'icon'						=> false,
				'icon_height'				=> '1.111111111111111rem',
				'icon_spacing'				=> '0.5555555555555556',
				'icon_direction'			=> 'right',
				'align' 					=> 'center',
				'width'						=> 'auto',
				'link'						=> 'https://www.semplice.com',
				'link_target'				=> '_blank',
				'link_type'					=> 'url',
				'link_page'					=> '',
				'link_project'				=> '',
				'link_post'					=> '',
				'effect'					=> 'colorfade',
				'text_effect'				=> 'none',
				'text_align'				=> 'center',
				'easing'					=> '--ease-out-expo',
				'duration'					=> 700
			), $values['options'] )
		);
		// vars
		$styles = $values['styles']['xl'];
		$output_css = '';
		$label = (empty($label)) ? 'Semplice Button' : $label;
		// font family
		if(!empty($font_family)) {
			$font_family = ' data-font="' . $font_family . '"';
		}
		// check for gradients and change the css atts
		$has_text_gradient = 'false';
		$skip_css = array('color' => false, 'background-color' => false);
		$gradient_css_atts = array('color' => 'color', 'background-color' => 'background-color');
		$gradient_atts = array('color', 'hover-color', 'background-color', 'hover-background-color');
		foreach($gradient_atts as $attribute) {
			if(isset($values['options'][$attribute]) && strpos($values['options'][$attribute], 'gradient') !== false) {
				$gradient_css_atts[str_replace('hover-', '', $attribute)] = 'background';
				if(strpos($attribute, 'background') !== false) {
					if($effect == 'colorfade' || $effect == 'icon-move') {
						$skip_css['background-color'] = true;
					}
				} else if($text_effect == 'none') {
					$skip_css['color'] = true;
				}
				if($attribute == 'color' || $attribute == 'hover-color') {
					$has_text_gradient = 'true';
				}
			}
		}
		// css atts
		$css_atts = array(
			'parent' => array('background-color', 'hover-background-color', 'border-width', 'border-radius', 'border-color', 'hover-border-color'),
			'child'  => array('font-size', 'color', 'hover-color', 'letter-spacing', 'hover-letter-spacing', 'border-radius', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top'),
		);
		// selector
		$selector = '[data-breakpoint="##breakpoint##"] #content-holder #' . $id;
		// effect defaults
		$effect_defaults = array(
			'effect' 				=> 'colorfade',
			'easing' 				=> '--ease-out-expo',
			'duration' 				=> 700,
			'background-color'  	=> '#ffd300',
			'hover-background-color'=> '#ffe152'
		);
		foreach($effect_defaults as $attr => $default) {
			if(isset($values['options'][$attr])) {
				$effect_defaults[$attr] = $values['options'][$attr];
			}
		}
		// duration
		$duration = intval($effect_defaults['duration']) / 1000;
		// change css atts indivdiually for a preset effect
		switch($effect) {
			case 'slide-left-to-right':
			case 'slide-right-to-left':
			case 'slide-top-to-bottom':
			case 'slide-bottom-to-top':
			case 'expand-vertically':
			case 'expand-horizontally':
			case 'fill-up':
				unset($css_atts['parent'][1]);
				$output_css .= '#content-holder #' . $id . ' .is-content:after { ' . $gradient_css_atts['background-color'] . ': ' . $effect_defaults['hover-background-color'] . '; }';
			break;
		}
		// gradient transition vars
		$gradient_vars = Color::gradient_vars($duration, $effect_defaults['easing']);
		// transition atts
		$trans_atts = array('background-color', 'transform', 'top', 'opacity', 'color', 'padding', 'border', 'letter-spacing', 'width');
		$trans_atts_css = '';
		foreach($trans_atts as $attr) {
			$dur = (!self::$is_editor) ? $duration : (intval($effect_defaults['duration']) / 1000) . 's';
			$trans_atts_css .= $attr . ' ' . $dur . 's var(' . $effect_defaults['easing'] . '), ';
		}
		// easing for the frontend
		$sel = '#content-holder #' . $id . ((!self::$is_editor) ? ' .is-content' : ' .button-mouseover');
		$output_css .= 
			$sel . ',
			' . $sel . ':after,
			' . $sel . ' a,
			' . $sel . ' a:before,
			' . $sel . ' a:after,
			' . $sel . ' img,
			' . $sel . ' .icon-padding { 
				transition: ' . substr($trans_atts_css, 0, -2) . ', ' . $gradient_vars . ';
			}
		';
		// hover defaults
		$hover_defaults = $this->hover_defaults($values['options']);
		// iterate breakpoints
		$breakpoints = Get::breakpoints(true);
		foreach ($breakpoints as $breakpoint => $bp_width) {
			// css
			$bp_css = '';
			// bp
			$bp = ($breakpoint == 'xl') ? false : '_' . $breakpoint;
			// define inline css output
			$css = array(
				'normal' => array('parent' => '','child' => ''),
				'hover' => array('parent' => '','child' => ''),
			);
			// options short
			$options = $values['options'];
			// text effect
			if($text_effect != 'none') {
				$te_label = $label;
				if(isset($options['label' . $bp]) && !empty($options['label' . $bp])) {
					$te_label = $options['label' . $bp];
				}
				$bp_css .= $selector . ' a:before, ' . $selector . ' a:after { content: "' . $te_label . '"; }';
			}
			// iterate css atts
			foreach($css_atts as $type => $attributes) {
				foreach($attributes as $attribute) {
					$val = false;
					if(isset($options[$attribute . $bp])) {
						$val = $options[$attribute . $bp];
					}
					$normal_hover = 'normal';
					$important = '';
					if(strpos($attribute, 'hover-') !== false) {
						$normal_hover = 'hover';
						$important = ' !important';
						if(!$val && isset($hover_defaults[$attribute])) {
							$val = $hover_defaults[$attribute];
						}
					}
					// has value?
					if($val) {
						// only append gradients if not colorfade or editor
						if(in_array($attribute, $gradient_atts) && $gradient_css_atts[str_replace('hover-', '', $attribute)] == 'background') {
							if(false !== strpos($attribute, 'background-color') && !$skip_css['background-color'] || str_replace('hover-', '', $attribute) == 'color' && !$skip_css['color']) {
								if($attribute == 'color' || $attribute == 'hover-color') {
									$css[$normal_hover][$type] .= $gradient_css_atts['color'] . ': ' . $val . $important . ';';
									$css[$normal_hover][$type] .= '-webkit-background-clip: text' . $important . '; -webkit-text-fill-color: transparent' . $important . ';';
								} else {
									$css[$normal_hover][$type] .= $gradient_css_atts['background-color'] . ': ' . $val . $important . ';';
								}
							}
						} else {
							$css[$normal_hover][$type] .= str_replace('hover-', '', $attribute) . ': ' . $val . $important . ';';
						}
						if(strpos($attribute, 'letter-spacing') !== false) {
							if(strpos($val, '-') === false) {
								$css[$normal_hover][$type] .= 'margin-right: -' . $val . ';';
							} else {
								$css[$normal_hover][$type] .= 'margin-right: ' . str_replace('-', '', $val) . ';';
							}
						}
					}
				}
			}
			// iterate css and add to output
			foreach($css as $type => $element) {
				foreach($element as $element_type => $element_css) {
					$state = '';
					if($type == 'hover') {
						$state = ':hover';
					}
					if($element_type == 'parent' && !empty($css[$type]['parent'])) {
						$bp_css .= $selector . ' .is-content' . $state . ' {' . $css[$type]['parent'] . '}';
					} else if($element_type == 'child' && !empty($css[$type]['child'])) {
						$bp_css .= $selector . ' .is-content' . $state . ' a, ' . $selector . ' .is-content' . $state . ' a:before, ' . $selector . ' .is-content' . $state . ' a:after {' . $css[$type]['child'] . '}';
					}
				}
			}
			// icon css
			$icon_css = '';
			if($icon) {
				$icon_spacing_prefix = 'margin-left';
				if($icon_direction != 'right') {
					$icon_spacing_prefix = 'margin-right';
				}
				if(isset($options['icon_height' . $bp])) {
					$icon_css .= 'height: ' . $options['icon_height' . $bp] . ';';
				}
				if(isset($options['icon_spacing' . $bp])) {
					$icon_css .= $icon_spacing_prefix . ': ' . $options['icon_spacing' . $bp] . ';';
				}
				if(!empty($icon_css)) {
					$bp_css .= '.is-frontend #content-holder #' . $id . ' .is-content a img { ' . $icon_css . '}';
				}
			}
			// add to css output
			if($breakpoint != 'xl') {
				if(self::$is_editor) {
					$output_css .= str_replace('##breakpoint##', $breakpoint, $bp_css);
				} else {
					$output_css .= '@media screen' . $bp_width['min'] . $bp_width['max'] . ' { ' . str_replace('[data-breakpoint="##breakpoint##"] ', '', $bp_css) . '}';
				}
			} else {
				$output_css .= str_replace('[data-breakpoint="##breakpoint##"] ', '', $bp_css);
			}
		}
		// $link array
		$link = array(
			'type'		=> $link_type,
			'url'		=> $link,
			'page'		=> $link_page,
			'project'	=> $link_project,
			'post'		=> $link_post, 
		);
		// only display link on frontend
		if(!self::$is_editor) {
			// get url
			$url = Get::url($values['options'], 'url');
			// link target
			if($link_target == 'same') {
				$link_target = '_self';
			} else {
				$link_target = '_blank';
			}
			// link
			$link = 'href="' . $url . '" target="' . $link_target . '"';
		} else {
			$link = '';
		}
		// get icon src
		$icon_src = false;
		$icon_padding = '<span class="icon-padding"></span>';
		if($text_effect == 'none' && false !== $icon) {
			$icon_src = wp_get_attachment_image_src($icon, 'full', false);
			if(false !== $icon_src) {
				$icon_src = '<img src="' . $icon_src[0] . '" alt="button-icon">';
				$icon_src = ($icon_direction == 'right') ? $icon_padding . $icon_src : $icon_src . $icon_padding;
			}
		}
		// label
		if(!self::$is_editor) {
			$label = $this->label($label, $values['options'], $icon_src, $icon_direction);
		} else {
			$label = array('content' => $label . $icon_src, 'classes' => '');
		}
		// check for button gradient animation
		$gradient_js = '';
		if(!self::$is_editor) {
			$colors = array(
				'bg' => array(
					'normal' => isset($values['options']['background-color']) ? $values['options']['background-color'] : '#ffd300',
					'hover'	 => isset($values['options']['hover-background-color']) ? $values['options']['hover-background-color'] : '#ffe152'
				),
				'color' => array(
					'normal' => isset($values['options']['color']) ? $values['options']['color'] : '#000000',
					'hover'  => isset($values['options']['hover-color']) ? $values['options']['hover-color'] : '#000000',
				)
			);
			// background color
			$output_css .= Color::gradient_mouseover('#content-holder #' . $id . ' .is-content', $colors['bg']['normal'], $colors['bg']['hover'], false);
			// color
			$output_css .= Color::gradient_mouseover('#content-holder #' . $id . ' .is-content a', $colors['color']['normal'], $colors['color']['hover'], false);
		}
		// output
		$this->module['html'] = '
			<div class="smp-button" data-align="' . $align . '">
				<div class="is-content ' . $label['classes'] . '" data-width="' . $width . '" data-effect="' . $effect . '" data-icon-direction="' . $icon_direction . '" data-text-gradient="' . $has_text_gradient  . '">
					<a ' . $font_family . ' ' . $link . ' data-text-effect="' . $text_effect . '" data-text-align="' . $text_align . '">' . $label['content'] . '</a>
				</div>
			</div>
		';
		// output css 
		if(!self::$is_editor) {
			$this->module['css'] = $output_css;
		}
		// output
		return $this->module;
	}

// -----------------------------------------
	// output frontend
	// -----------------------------------------

public function frontend($id, $values) {
		// same as editor
		return $this->editor($id, $values);
	}

// -----------------------------------------
	// hover defaults
	// -----------------------------------------

public function hover_defaults($styles) {
		$defaults = array(
			'hover-color'				=> '#000000',
			'hover-background-color'	=> '#ffe152',
			'hover-letter-spacing'		=> false,
		);
		// check if values set and overwrite
		foreach($defaults as $attribute => $value) {
			if(isset($styles[$attribute])) {
				$defaults[$attribute] = $styles[$attribute];
			}
		}
		// ret
		return $defaults;
	}

// -----------------------------------------
	// get label
	// -----------------------------------------

public function label($default, $options, $icon, $icon_dir) {
		// label
		$label = array('content' => '', 'classes' => '');
		// define breakpoints
		$breakpoints = array('lg', 'md', 'sm', 'xs');
		// add xl first
		if(false !== $icon) {
			if($icon_dir == 'right') {
				$default = $default . $icon;
			} else {
				$default = $icon . $default;
			}
		}
		$label['content'] = '<div data-content-for="xl"><div class="inner">' . $default . '</div></div>';
		// has other content?
		foreach ($breakpoints as $breakpoint) {
			if(isset($options['label_' . $breakpoint]) && !empty($options['label_' . $breakpoint])) {
				if($breakpoint != 'xl') {
					$label['classes'] .= ' has-' . $breakpoint;
				}
				// define content
				$content = $options['label_' . $breakpoint];
				// add xl first
				if(false !== $icon) {
					if($icon_dir == 'right') {
						$content = $content  . $icon;
					} else {
						$content = $icon . $content;
					}
				}
				$label['content'] .= '<div data-content-for="' . $breakpoint . '"><div class="inner">' . $content . '</div></div>';
			}
		}
		// return
		return $label;
	}
}
// instance
Editor::$modules['button'] = new ButtonModule;
?>

← 返回文件管理器