编辑文件 - table.php

✏️ 正在编辑: table.php

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

<?php
// use
use Semplice\Helper\Color;
// output
$output = array(
	'html' => '',
	'css'  => '',
);
// content editable
$head_editable = '';
$editable = '';
// attributes
extract(shortcode_atts(
	array(
		'content_order'					=> array('date', 'title', 'type', 'client'),
		'table_font_size'				=> '1.222222222222222rem',
		'table_line_height'				=> '1.777777777777778rem',
		'table_text_transform'			=> 'none',
		'table_letter_spacing'			=> '0rem',
		'table_head_visibility'			=> 'visible',
		'table_head_bg_color'			=> 'transparent',
		'table_head_font_family'		=> 'inter_regular',
		'table_head_font_size'			=> '0.7222222222222222rem',
		'table_head_letter_spacing'		=> '0rem',
		'table_head_text_transform'		=> 'uppercase',
		'table_head_padding'			=> '0.8888888888888889rem',
		'table_head_color'				=> '#000000',
		'table_column_bg_color'			=> '#ffffff',
		'label_date'					=> 'Date',
		'label_title'					=> 'Project',
		'label_type'					=> 'Type',
		'label_client'					=> 'Client',
		'table_seperator_visibility'	=> 'visible',
		'table_seperator_width'			=> '0.0555555555555556rem',
		'table_seperator_color'			=> '#dddddd',
		'table_padding'					=> '0.8888888888888889rem',
		'table_padding_hor'				=> '1.666666666666667rem',
		'table_title_visibility'		=> 'visible',
		'table_title_color'				=> '#000000',
		'table_title_font_family'		=> 'inter_regular',
		'table_title_align'				=> 'left',
		'table_type_visibility'			=> 'visible',
		'table_type_font_family'		=> 'inter_light',
		'table_type_color'				=> '#999999',
		'table_type_align'				=> 'left',
		'table_date_visibility'			=> 'visible',
		'table_date_font_family'		=> 'inter_light',
		'table_date_color'				=> '#999999',
		'table_date_align'				=> 'left',
		'table_client_visibility'		=> 'visible',
		'table_client_font_family'		=> 'inter_light',
		'table_client_color'			=> '#999999',
		'table_client_align'			=> 'left',
		'table_hover_type'				=> 'both',
		'table_hover_img_type'			=> 'fade',
		'table_hover_img_width'			=> '35',
		'table_hover_bg_type'			=> 'growing',
		'table_hover_text_type'			=> 'fade',
		'table_hover_bg_color'			=> '#000000',
	), $content['options'])
);
// create apg wrapper
$output['html'] .= '<div class="apg apg-table" data-hover-type="' . $table_hover_type . '" data-table-bg-hover="' . $table_hover_bg_type . '" data-table-text-hover="' . $table_hover_text_type . '" data-table-img-hover="' . $table_hover_img_type . '" data-table-date-align="' . $table_date_align . '" data-table-title-align="' . $table_title_align . '" data-table-type-align="' . $table_type_align . '" data-table-client-align="' . $table_client_align . '"';
// add thumb holder only for the editor
if(self::$is_editor) {
	// add visibiliti
	$output['html'] .= ' data-table-date-visibility="' . $table_date_visibility . '" data-table-title-visibility="' . $table_title_visibility . '" data-table-type-visibility="' . $table_type_visibility . '" data-table-client-visibility="' . $table_client_visibility . '"';
	// close apg wrapper div tag and add thumb holder
	$output['html'] .= '><div class="apg-thumb-animation"></div>';
} else {
	// close apg wrapper div tag
	$output['html'] .= '>';
}
// head
if($table_head_visibility == 'visible' || self::$is_editor) {
	$head_labels = array(
		'date' 		=> $label_date,
		'title' 	=> $label_title,
		'type' 		=> $label_type,
		'client' 	=> $label_client
	);
	// open header
	$output['html'] .= '<div class="apg-table-head" data-font="' . $table_head_font_family . '" data-visibility="' . $table_head_visibility . '"' . Color::has_gradient($table_head_color, '') . '>';
	// iterate labels
	foreach($content_order as $column) {
		if(self::$is_editor) {
			$head_editable = ' data-apg-editable="editable" data-content-id="' . $id . '" data-table-head="' . $column . '" data-table-column="' . $column . '" contenteditable="true"';
		}
		// is visible or editor?
		if(self::$is_editor || !isset($content['options']['table_' . $column . '_visibility']) || $content['options']['table_' . $column . '_visibility'] != 'hidden') {
			$output['html'] .= '
				<div class="apg-table-column" data-table-column="' . $column . '"' . $head_editable . '><span>' . $head_labels[$column] . '</span></div>
			';
		}
	}
	// close heaqder
	$output['html'] .= '</div>';
}
// iterate projects
foreach ($posts as $key => $post) {
	// options
	$values = $this->custom_options($post['post_id'], $post['thumbnail']['src'], $content['options']);
	// has external link?
	if(!empty($values['link'])) {
		$link = 'href="' . $values['link'] . '" target="_blank"';
	} else {
		$link = 'href="' . $post['permalink'] . '"';
	}
	// link
	$link = array(
		'open'  => '<a ' . $link . ' class="apg-table-link" data-seperator-visibility="' . $table_seperator_visibility . '">',
		'close' => '</a>'
	);
	// edtiable
	if(self::$is_editor) {
		$editable = ' data-apg-editable="editable" data-content-id="' . $id . '" data-post-id="' . $post['post_id'] . '" contenteditable="true"';
		$link = array(
			'open'  => '<div class="apg-table-link" data-seperator-visibility="' . $table_seperator_visibility . '">',
			'close' => '</div>'
		);
	}
	// post title and project type
	$defaults = array(
		'title' 	=> $post['post_title'],
		'type' 		=> $post['project_type'],
		'thumbnail' => $this->thumbnail($values['thumbnail'], 'table', $id, $post),
		'client'	=> 'Semplice',
		'date'		=> '2021',
	);
	// get values
	foreach($defaults as $default => $value) {
		if(isset($values[$default]) && false !== $values[$default]) {
			if($default != 'thumbnail') {
				$defaults[$default] = $values[$default];
			}
		}				
	}
	// table
	$table = array(
		'date' => array(
			'font_family' 	=> $table_date_font_family
		),
		'title' => array(
			'font_family' 	=> $table_title_font_family
		),
		'type' => array(
			'font_family' 	=> $table_type_font_family
		),
		'client' => array(
			'font_family' 	=> $table_client_font_family
		),
	);
	// thumbnail
	$thumbnail = '';
	if(self::$is_editor || $table_hover_type == 'both' || $table_hover_type == 'img_only') {
		$thumbnail = '<div class="post-thumbnail" data-thumb-id="' . $post['post_id'] . '"><div class="img-wrapper">' . $defaults['thumbnail'] . '</div></div>';
	}
	// output
	$output['html'] .= '
		<div class="post-' . $post['post_id'] . ' apg-post apg-post-table' . $values['custom_class'] . '" data-post-id="' . $post['post_id'] . '">
			' . $this->custom_styles($id, 'table', $post, $values) . '
			<div class="apg-post-table-bg"></div>
			' . $thumbnail . '
	';
	// link open
	$output['html'] .= $link['open'];
	// iterate column order
	foreach($content_order as $column) {
		if(self::$is_editor || !isset($content['options']['table_' . $column . '_visibility']) || $content['options']['table_' . $column . '_visibility'] == 'visible') {
			$output['html'] .= '
				<div class="apg-table-column table-column-' . $column . '" data-table-column="' . $column . '" data-font="' . $table[$column]['font_family'] . '">
					<div class="' . $column . '" ' . $editable . '>
						' . $defaults[$column] . '
					</div>
				</div>
			';
		}
	}
	// output
	$output['html'] .= $link['close'] . '</div>';
}
// css
$selector = '#' . $id;
// grid columns css and text mouseover
$grid_columns_css 	= 'grid-template-columns: ';
// define mouseover text css and set default for title hover color
$mouseover_text_css = $selector . ' .apg-table-link:hover .table-column-title { color: #ffffff; }';
// define columns width
$columnsWidth = array(
	'date'	=> 1,
	'title'	=> 4,
	'type'	=> 4,
	'client'=> 3
);
foreach($content_order as $column) {
	if(!isset($content['options']['table_' . $column . '_visibility']) || $content['options']['table_' . $column . '_visibility'] == 'visible') {
		if(isset($content['options']['table_' . $column . '_width'])) {
			$width = $content['options']['table_' . $column . '_width'];
		} else {
			$width = $columnsWidth[$column];
		}
		// add to css
		$grid_columns_css .= 'calc(100% / 12 * ' . $width . ') ';
	}
	// text hover colors
	if(isset($content['options']['table_' . $column . '_hover_color']) && $content['options']['table_' . $column . '_hover_color'] != 'transparent') {
		$mouseover_text_css .= $selector . ' .apg-table-link:hover .table-column-' . $column . ' { color: ' . $content['options']['table_' . $column . '_hover_color'] . '; }';
	}
}
// gradient mouseover duration
$duration = ($table_hover_bg_type == 'none') ? '.01' : '.75';
$hover_duration = ($table_hover_bg_type == 'none') ? '.01' : '.15';
// hover css to wrap in media hover later to exclude mobile
$hover_css = '
	' . $selector . ' .apg-post-table:hover { transition: background-color ' . $hover_duration . 's ease-out, ' . Color::gradient_vars($hover_duration, '--ease-out-expo') . '; }
	' . $mouseover_text_css . '
';
// css output (non-hover rules)
$output['css'] .= '
	' . $selector . ' .apg-post { ' . Color::bg_css($table_column_bg_color, self::$is_editor, false) . ' }
	' . $selector . ' .apg-post-table { transition: background-color ' . $duration . 's ease-out, ' . Color::gradient_vars($duration, '--ease-out-expo') . '; }
	' . $selector . ' .apg-table-head, ' . $selector . ' .apg-table-link { ' . $grid_columns_css . '; }
	' . $selector . ' .apg-table-head {
		' . Color::bg_css($table_head_bg_color, self::$is_editor, false) . '
		padding: ' . $table_head_padding . ' ' . $table_padding_hor . ';
		font-size: ' . $table_head_font_size . ';
		text-transform: ' . $table_head_text_transform . ';
		letter-spacing: ' . $table_head_letter_spacing . ';
	}
	' . $selector . ' .apg-table-head .apg-table-column span {
		' . Color::css($table_head_color, self::$is_editor) . '
	}
	' . $selector . ' .apg-post .apg-table-link {
		border-top-width: ' . $table_seperator_width . ';
		border-color: ' . $table_seperator_color . ';
		padding: ' . $table_padding . ' ' . $table_padding_hor . ';
		font-size: ' . $table_font_size . ';
		line-height: ' . $table_line_height . ';
		letter-spacing: ' . $table_letter_spacing . ';
		text-transform: ' . $table_text_transform . ';
	}
	' . $selector . ' .apg-thumb-animation .post-thumbnail .img-wrapper, #' . $id . '-thumbholder .img-wrapper { width: ' . $table_hover_img_width . '%; }
	' . $selector . ' .apg-post .table-column-title { color: ' . $table_title_color . '; }
	' . $selector . ' .apg-post .table-column-type { color: ' . $table_type_color . '; }
	' . $selector . ' .apg-post .table-column-date { color: ' . $table_date_color . '; }
	' . $selector . ' .apg-post .table-column-client { color: ' . $table_client_color . '; }
';
// hover bg color
if($table_hover_bg_color != 'transparent' && $table_hover_type != 'none' && $table_hover_type != 'img_only') {
	$sel_inner = false;
	// add post table bg color
	$output['css'] .= $selector . ' .apg-post-table-bg { ' . Color::bg_css($table_hover_bg_color, self::$is_editor, false) . ' }';
	if(!strpos($table_hover_bg_color, 'gradient')) {
		$hover_css .= $selector . ' .apg-post:hover { background-color: ' . $table_hover_bg_color . '; }';
	}
	// gradient animation for the frontend
	if(!self::$is_editor) {
		$hover_css .= Color::gradient_mouseover($selector . ' .apg-post-table', $table_column_bg_color, $table_hover_bg_color, false);
	}
}
// emit hover css — wrap on frontend so touch swipes don't leave sticky :hover state
if(self::$is_editor) {
	$output['css'] .= $hover_css;
} else {
	$output['css'] .= '@media (hover: hover) {' . $hover_css . '}';
}
// responsive css
if(!self::$is_editor) {
	$output['css'] .= $this->breakpoints_css($id, 'table', $content['options'], false);
}
// close apg wrapper
$output['html'] .= '</div>';
// return
return $output;
?>

← 返回文件管理器