编辑文件 - accordion.php

✏️ 正在编辑: accordion.php

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

<?php

// namespace
namespace Semplice\Editor\Modules;

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

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

class AccordionModule extends Editor {

public $module;

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

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

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

public function editor($id, $values) {
		// values
		extract( shortcode_atts(
			array(
				'first_item'					=> 'collapsed',
				'mode'							=> 'toggle',
				'bg_color'						=> '#ffffff',
				'padding_ver'					=> '1.666666666666667rem',
				'padding_hor'					=> '0rem',
				'border_radius'					=> '0',
				'seperator_visibility'			=> 'visible',
				'seperator_height'				=> '0.0555555555555556rem',
				'seperator_color'				=> '#cccccc',
				'seperator_mode'				=> 'hidden',
				'title_color'					=> '#000000',
				'title_font_family'				=> 'inter_bold',
				'title_font_size'				=> '2.222222222222222rem',
				'title_line_height'				=> '2.777777777777778rem',
				'title_letter_spacing'			=> '0rem',
				'title_text_transform'			=> 'none',
				'title_right_spacing'			=> '3.333333333333333rem',
				'title_align'					=> 'left',
				'content_spacing'				=> '1.666666666666667rem',
				'description_color'				=> '#777777',
				'description_font_family'		=> 'inter_light',
				'description_font_size'			=> '1.111111111111111rem',
				'description_line_height'		=> '1.666666666666667rem',
				'description_letter_spacing'	=> '0rem',
				'description_text_transform'	=> 'none',
				'description_spacing'			=> '1.111111111111111rem',
				'description_align'				=> 'left',
				'icon_type'						=> 'plus',
				'icon_color'					=> '#000000',
				'icon_width'					=> '1.666666666666667rem',
				'icon_spacing'					=> '0.5555555555555556rem',
				'icon_expand'					=> false,
				'icon_collapse'					=> false
			), $values['options'] )
		);
		// vars
		$content = $values['content']['xl'];
		$editable = (self::$is_editor) ? ' contenteditable="true" data-accordion-editable="editable"' : '';
		$items = '';
		$count = 0;
		$max = count($content['order']) - 1;
		// add top seperator
		$items .= '<div class="seperator top-seperator"></div>';
		// iterate order
		foreach($content['order'] as $accordion_id) {
			// check if item is still there
			if(isset($content['items'][$accordion_id])) {
				// shorthand
				$item = $content['items'][$accordion_id];
				// status
				$status = array('"', '');
				if(!self::$is_editor && $count == 0 && $first_item == 'expanded') {
					$status = array(' expanded"', 'style="height: auto";');
				}
				// default icon
				$icon = array(
					'expand' => Get::svg('frontend', 'accordion/plus_expand'),
					'collapse' => Get::svg('frontend', 'accordion/plus_collapse')
				);
				// icon
				$types = array('expand' => $icon_expand, 'collapse' => $icon_collapse);
				foreach($types as $type => $attachment) {
					if($icon_type == 'custom' && $attachment) {
						$image = Image::get($attachment, 'full');
						$icon[$type] = '<img src="' . $image['src'] . '" alt="' . $image['alt'] . '">';
					} else if($icon_type != 'custom') {
						$icon[$type] = Get::svg('frontend', 'accordion/' . $icon_type . '_' . $type);
					}
				}
				// add seperator
				if($count > 0) {
					$items .= '<div class="seperator"></div>';
				}
				// get content
				$item_content = $this->item_content($item);
				// add to items
				$items .= '
					<div class="accordion-item' . $status[0] . ' data-accordion-id="' . $accordion_id . '">
						<div class="title" data-font="' . $title_font_family . '">
							<div class="title-span"' . $editable . ' data-name="title"><span>' . preg_replace('/<\s*\/?\s*span\b[^>]*>/i', '', $item['title']) . '</span></div>
							<div class="icon">
								<span class="expand">' . $icon['expand'] . '</span>
								<span class="collapse">' . $icon['collapse'] . '</span>
							</div>
						</div>
						<div class="description" ' . $status[1] . '><div class="description-inner" data-font="' . $description_font_family . '">' . $item_content . '</div></div>
						' . $this->actions($id, $accordion_id) . '
					</div>
				';
			}
			// inc count
			$count++;
		}
		// add bottom seperator
		$items .= '<div class="seperator bottom-seperator"></div>';
		// css
		$target = '#content-holder #' . $id;
		$css = '
			' . $target . ' .accordion-item {
				padding: ' . $padding_ver . ' ' . $padding_hor . ';
				background: ' . $bg_color . ';
				border-radius: ' . $border_radius . ';
			}
			' . $target . ' .seperator {
				height: ' . $seperator_height . ';
				background: ' . $seperator_color . ';
			}
			' . $target . ' .title {
				font-size: ' . $title_font_size . ';
				line-height: ' . $title_line_height . ';
				letter-spacing: ' . $title_letter_spacing . ';
				text-transform: ' . $title_text_transform . ';
				text-align: ' . $title_align . ';
			}
			' . $target . ' .title .title-span {
				max-width: calc(100% - ' . $icon_width . ');
				padding-right: ' . $title_right_spacing . ';
			}
			' . $target . ' .title .title-span span {
				' . Color::css($title_color, self::$is_editor) . '
			}
			' . $target . ' .icon {
				fill: ' . $icon_color . ';
				top: ' . $icon_spacing . ';
			}
			' . $target . ' .title .icon svg,  ' . $target . ' .title .icon img {
				width: ' . $icon_width . ';
			}
			' . $target . ' .description-inner {
				color: ' . $description_color . ';
				font-size: ' . $description_font_size . ';
				line-height: ' . $description_line_height . ';
				letter-spacing: ' . $description_letter_spacing . ';
				text-transform: ' . $description_text_transform . ';
				margin-top: ' . $description_spacing . ';
				text-align: ' . $description_align . ';
			}
			' . $target . ' .accordion-content {
				margin-bottom: ' . $content_spacing . ';
			}
		';
		// get breakpoint css
		$css .= $this->breakpoint_css($values['options'], '[data-breakpoint="##breakpoint##"] #content-holder #' . $id, $padding_ver, $padding_hor);
		// add to html output
		$this->module['html'] = '
			<div class="is-content" data-seperator-visibility="' . $seperator_visibility . '" data-seperator-mode="' . $seperator_mode . '" data-accordion-id="' . $id . '" data-mode="' . $mode . '"' . Color::has_gradient($title_color, '') . '>
				' . $items . '
			</div>
		';
		// add to css output
		$this->module['css'] = $css;
		// output
		return $this->module;
	}

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

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

// -----------------------------------------
	// get actions
	// -----------------------------------------

public function actions($id, $accordion_id) {
		$actions = '';
		if(self::$is_editor) {
			$actions = '
				<div class="actions">
					<a class="accordion-add-element"></a>
					<a class="accordion-remove click-handler" data-handler="run" data-action-type="accordion" data-action="remove" data-id="' . $id . '" data-remove-id="' . $accordion_id . '"></a>
					<a class="accordion-handle ui-sortable-handle"></a>
					<ul>
						<li><a class="click-handler" data-handler="run" data-action-type="accordion" data-action="addContent" data-content="text" data-item-id="' . $accordion_id . '">Text</a></li>
						<li><a class="semplice-upload" data-id="' . $id . '" data-item-id="' . $accordion_id . '" data-upload-type="image" data-name="accordion-image" data-upload="accordionImage" data-video-support="false" data-has-unsplash="false">Image</a></li>
					</ul>
				</div>
			';
		}
		// return
		return $actions;
	}

// -----------------------------------------
	// get item content
	// -----------------------------------------

public function item_content($item) {
		// content
		$content = '';
		// checken ob altes descprtion format
		if(isset($item['description'])) {
			$content .= '<div id="accordion-content_' . substr(md5(rand()), 0, 9) . '" class="accordion-text accordion-content">' . $item['description'] . '</div>';
		} else if(isset($item['content']) && is_array($item['content']) && !empty($item['content'])) {
			foreach($item['content'] as $content_id => $item_content) {
				// vars
				$data_atts = '';
				$link = false;
				$target = '_self';
				if(isset($item_content['settings']) && !empty($item_content['settings'])) {
					$settings = array('align', 'width', 'link', 'target');
					foreach($settings as $setting) {
						if(isset($item_content['settings'][$setting])) {
							$data_atts .= ' data-' . $setting . '="' . $item_content['settings'][$setting] . '"';
							if($setting == 'link' && !empty($item_content['settings'][$setting])) {
								$link = $item_content['settings'][$setting];
							} else if($setting == 'target') {
								$target = $item_content['settings'][$setting];
							}
						}
					}
				}
				// link on frontend
				if($link && !self::$is_editor) {
					$html = '<a href="' . $link . '" target="' . $target . '">' . $item_content['html'] . '</a>';
				} else {
					$html = $item_content['html'];
				}
				// add html
				$content .= '<div id="' . $content_id . '" class="accordion-' . $item_content['type'] . ' accordion-content"' . $data_atts . '>' . $html . '</div>';
			}
		}
		// return
		return $content;
	}

// -----------------------------------------
	// breakpoint css
	// -----------------------------------------

public function breakpoint_css($styles, $selector, $padding_ver, $padding_hor) {
		// output css
		$output_css = '';
		// get breakpoints
		$breakpoints = Get::breakpoints(false);
		// iterate breakpoints
		foreach ($breakpoints as $breakpoint => $width) {
			// css
			$css = '';
			// padding ver
			if(isset($styles['padding_ver_' . $breakpoint])) {
				$padding_ver = $styles['padding_ver_' . $breakpoint];
			}
			// padding hor
			if(isset($styles['padding_hor_' . $breakpoint])) {
				$padding_hor = $styles['padding_hor_' . $breakpoint];
			}
			// set padding
			$css .= $selector . ' .accordion-item { padding: ' . $padding_ver . ' ' . $padding_hor . '; }';
			// border radius
			if(isset($styles['border_radius_' . $breakpoint])) {
				$css .= $selector . ' .accordion-item { border-radius: ' . $styles['border_radius_' . $breakpoint] . '; }';
			}
			// seperator width
			if(isset($styles['seperator_height_' . $breakpoint])) {
				$css .= $selector . ' .seperator { height: ' . $styles['seperator_height_' . $breakpoint] . '; }';

}
			// title right spacing
			if(isset($styles['title_right_spacing_' . $breakpoint])) {
				$css .= $selector . ' .title .title-span { padding-right: ' . $styles['title_right_spacing_' . $breakpoint] . '; }';
			}
			// description top spacing
			if(isset($styles['description_spacing_' . $breakpoint])) {
				$css .= $selector . ' .description-inner { margin-top: ' . $styles['description_spacing_' . $breakpoint] . '; }';
			}
			// content spacing
			if(isset($styles['content_spacing_' . $breakpoint])) {
				$css .= $selector . ' .description-inner .accordion-content { margin-bottom: ' . $styles['content_spacing_' . $breakpoint] . '; }';
			}
			// icon width
			if(isset($styles['icon_width_' . $breakpoint])) {
				$css .= $selector . ' .title .title-span { width: calc(100% - ' . $styles['icon_width_' . $breakpoint] . '); }';
				$css .= $selector . ' .title .icon svg, ' . $selector . ' .title .icon img { width: ' . $styles['icon_width_' . $breakpoint] . '; }';
			}
			// icon spacing
			if(isset($styles['icon_spacing_' . $breakpoint])) {
				$css .= $selector . ' .title .icon { top: ' . $styles['icon_spacing_' . $breakpoint] . '; }';
			}
			// formatting options
			$types = array('title' => '.title', 'description' => '.description-inner');
			$formatting = array('font-size', 'line-height', 'letter-spacing');
			foreach($types as $type => $target) {
				foreach($formatting as $attribute) {
					if(isset($styles[$type . '_' . str_replace('-', '_', $attribute) . '_' . $breakpoint])) {
						$css .= $selector . ' ' . $target . ' { ' . $attribute . ': ' . $styles[$type . '_' . str_replace('-', '_', $attribute) . '_' . $breakpoint] . '; }';
					}
				}
			}
			// add to css output
			if(!empty($css)) {
				if(self::$is_editor) {
					$output_css .= str_replace('##breakpoint##', $breakpoint, $css);
				} else {
					$output_css .= '@media screen' . $width['min'] . $width['max'] . ' { ' . str_replace('[data-breakpoint="##breakpoint##"] ', '', $css) . '}';
				}
			}
		}
		// return
		return $output_css;
	}
}

// instance
Editor::$modules['accordion'] = new AccordionModule;
?>

← 返回文件管理器