Implements first version of section layouts such as tabs and accordion.

This commit is contained in:
mateuswetah 2022-05-11 11:59:42 -03:00
parent 5bdc5230bc
commit 28440c7fcc
12 changed files with 460 additions and 175 deletions

View File

@ -27,10 +27,6 @@
border-width: 2px;
}
.tainacan-collection--change-text-color .control {
margin-top: 0.5rem;
}
.tainacan-collection--change-text-color input[type="radio"]::before {
background-color: #000;
}
@ -48,6 +44,7 @@
border-radius: 2px;
padding: 0.7rem 1.25rem 0.7rem 1.0rem;
font-size: 0.875rem;
display: inline-block;
}
.tainacan-collection--change-text-color .color-text[for="black"] {
@ -58,8 +55,45 @@
border-radius: 2px;
padding: 0.7rem 1.25rem 0.7rem 1.0rem;
font-size: 0.875rem;
display: inline-block;
}
.tainacan-collection--change-text-color .color-text input[type="radio"] {
border-color: white;
vertical-align: middle;
}
.metadata-section-options {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
font-size: 0.875rem;
font-weight: bold;
}
.metadata-section-options label {
width: 94px;
margin: 5px 12px 5px 0px;
}
.metadata-section-options label img {
border-radius: 2px;
border: 1px solid #dbdbdb;
width: 94px;
opacity: 0.8;
transition: border 0.2s ease, opacity 0.2s ease;
}
.metadata-section-options label:hover img,
.metadata-section-options label:focus img {
border: 1px solid var(--tainacan-gray4, #555758);
opacity: 0.9;
}
.metadata-section-options label input:checked+img {
opacity: 1.0;
border: 2px solid var(--tainacan-interface--link-color, #298596);
}
.metadata-section-options label input {
position: absolute;
opacity: 0.0;
}

View File

@ -10,8 +10,8 @@ License: MIT
top:0;
left:0;
display:inline-block;
*display: inline;
*zoom: 1;
display: inline;
zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */
z-index: 9999994;
overflow: hidden;
@ -374,8 +374,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
cursor:pointer;
padding: 0px;
display:inline-block;
*zoom: 1;
*display: inline;
zoom: 1;
display: inline;
border: none;
border-radius: 42px;
background: transparent;
@ -399,9 +399,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
}
.sp-preview {
position:relative;
width:32px;
height: 32px;
border-radius: 42px;
width: calc(100% - 24px);
height: 41px;
border-radius: 2px;
border: none;
margin-right: 5px;
float:left;
@ -409,7 +409,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
}
.sp-palette {
*width: 220px;
width: 220px;
max-width: 220px;
}
.sp-palette .sp-thumb-el {
@ -470,7 +470,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
display:block;
position:absolute;
border-radius: 42px;
border-radius: 2px;
top:0;left:0;bottom:0;right:0;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -642,6 +642,103 @@
}
}
}
.single-item-collection--section-metadata--layout-tabs {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 0 4.16667vw 0 4.16667vw;
.tainacan-metadata-section {
display: none;
padding: 2rem 4.16667vw 1rem 4.16667vw;
border-top: 1px solid #cbcbcb;
}
label {
width: 100%;
text-align: center;
margin: 0;
cursor: pointer;
opacity: 0.85;
border-bottom: 3px solid transparent;
transition: border-bottom 0.2s ease;
h1,h2,h3,h4 {
font-size: 1.0rem !important;
margin: 0.75rem 1.5rem;
}
&:hover {
opacity: 1.0;
}
}
input {
position: absolute;
opacity: 0;
}
input:checked+label {
opacity: 1.0;
border-bottom-color: var(--tainacan-interface--link-color, #298596);
}
input:checked+label+.tainacan-metadata-section {
display: block;
}
@media screen and (min-width: 768px) {
label {
width: auto;
}
.tainacan-metadata-section {
order: 99;
}
}
}
.single-item-collection--section-metadata--layout-collapses,
.single-item-collection--section-metadata--layout-accordion {
box-sizing: border-box;
padding: 0 4.16667vw 0 4.16667vw;
.tainacan-metadata-section {
display: none;
padding: 2rem 4.16667vw 1rem 4.16667vw;
border-bottom: 1px solid #cbcbcb;
}
label {
width: 100%;
margin: 0;
cursor: pointer;
opacity: 0.85;
border-bottom: 1px solid #cbcbcb;
transition: opacity 0.2s ease;
h1,h2,h3,h4 {
font-size: 1.0rem !important;
margin: 0.75rem 1.5rem 0.75rem 2.25rem;
}
.tainacan-icon {
color: var(--tainacan-interface--link-color, #298596);
position: absolute;
transform: rotate(0deg);
transition: transform 0.2s ease;
}
&:hover {
opacity: 1.0;
border-bottom: 1px solid #dbdbdb;
}
}
input {
position: absolute;
opacity: 0;
}
input:checked+label {
opacity: 1.0;
.tainacan-icon {
transform: rotate(90deg);
}
}
input:checked+label+.tainacan-metadata-section {
display: block;
}
}
#breadcrumb-single-item-pagination {
font-size: 0.875rem;
height: 1.3rem;

View File

@ -586,5 +586,5 @@ add_action( 'enqueue_block_editor_assets', 'tainacan_editor_styles' );
require get_template_directory() . '/functions/customizer.php';
require get_template_directory() . '/functions/single-functions.php';
require get_template_directory() . '/functions/class-tainacanthemecollectioncolor.php';
require get_template_directory() . '/functions/class-tainacan-interface-collection-settings.php';
require get_template_directory() . '/functions/breadcrumb.php';

View File

@ -0,0 +1,197 @@
<?php
/**
* Class that hooks in the tainacan plugin (if present) to add new options to Collections
*/
class TainacanInterfaceCollectionSettings {
public $tainacan_background_color = 'tainacan_theme_collection_background_color'; // These has bad naming, but its too late to change
public $tainacan_text_color = 'tainacan_theme_collection_color';
public $tainacan_sections_layout = 'tainacan_interface_section_layout';
function __construct() {
add_filter( 'tainacan-api-response-collection-meta', array( $this, 'add_meta_to_response' ), 10, 2 );
add_action( 'tainacan-register-admin-hooks', array( $this, 'register_hook' ) );
add_action( 'tainacan-insert-tainacan-collection', array( $this, 'save_meta' ) );
add_action( 'tainacan-enqueue-admin-scripts', array( $this, 'action_tainacan_enqueue_admin_scripts' ) );
}
function action_tainacan_enqueue_admin_scripts() {
wp_enqueue_script( 'tainacan_colorWell', get_template_directory_uri() . '/assets/js/collection-color.js', false, false, true );
wp_enqueue_style( 'tainacan_colorWellStyle', get_template_directory_uri() . '/assets/css/collection-color.css', [], TAINACAN_INTERFACE_VERSION );
wp_localize_script( 'tainacan_colorWell', 'tainacan_colorPickerVars', array(
'cancelText' => __( 'Cancel', 'tainacan-interface' ),
'chooseText' => __( 'Choose', 'tainacan-interface' ),
'togglePaletteMoreText' => __( 'more', 'tainacan-interface' ),
'togglePaletteLessText' => __( 'less', 'tainacan-interface' ),
'clearText' => __( 'Clear Color Selection', 'tainacan-interface' ),
'noColorSelectedText' => __( 'No Color Selected', 'tainacan-interface' ),
));
wp_enqueue_script( 'spectrum', get_template_directory_uri() . '/assets/js/spectrum.js', false, false, true );
wp_enqueue_style( 'spectrum', get_template_directory_uri() . '/assets/css/spectrum.css' );
}
function register_hook() {
if ( function_exists( 'tainacan_register_admin_hook' ) ) {
tainacan_register_admin_hook( 'collection', array( $this, 'form' ) );
}
}
function form() {
if ( ! function_exists( 'tainacan_get_api_postdata' ) ) {
return '';
}
ob_start();
?>
<div class="field tainacan-collection--section-header">
<h4><?php _e( 'Tainacan Interface extra settings', 'tainacan-interface' ); ?></h4>
<hr>
</div>
<div>
<label class="label"><?php _e( 'Collection items list header colors', 'tainacan-interface' ); ?></label>
<span class="help-wrapper">
<a class="help-button has-text-secondary">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-help"/></i>
</span>
</a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5><?php _e( 'Collection items list header colorsr', 'tainacan-interface' ); ?></h5>
</div>
<div class="help-tooltip-body">
<p><?php _e( 'Select which color will be used for the text and background of your collection items list header.', 'tainacan-interface' ); ?></p>
</div>
</div>
</span>
</div>
<div class="columns">
<div class="column is-one-third field tainacan-collection--change-color-picker">
<label class="label"><?php _e( 'Background', 'tainacan-interface' ); ?></label>
<div class="control is-clearfix">
<input type="text" value="" id="colorpicker" name="<?php echo $this->tainacan_background_color; ?>">
</div>
</div>
<div class="column is-two-thirds field tainacan-collection--change-text-color">
<label class="label"><?php _e( 'Text', 'tainacan-interface' ); ?></label>
<div class="control is-clearfix">
<label for="white" id="color-white" class="color-text">
<input
type="radio"
value="#fff"
name="<?php echo $this->tainacan_text_color; ?>"
id="white" checked>
<?php _e( 'White', 'tainacan-interface' ); ?>
</label>
<label for="black" id="color-black" class="color-text">
<input
type="radio"
value="#000"
name="<?php echo $this->tainacan_text_color; ?>"
id="black">
<?php _e( 'Black', 'tainacan-interface' ); ?>
</label>
</div>
</div>
</div>
<div class="field tainacan-metadata-section--change-section-layout">
<label class="label"><?php _e( 'Metadata sections layout', 'tainacan-interface' ); ?></label>
<span class="help-wrapper">
<a class="help-button has-text-secondary">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-help"></i>
</span>
</a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5><?php _e( 'Metadata sections layout', 'tainacan-interface' ); ?></h5>
</div>
<div class="help-tooltip-body">
<p><?php _e( 'Define how the metadata sections will appear in the public item page.', 'tainacan-interface' ); ?></p>
</div>
</div>
</span>
<div class="control is-clearfix metadata-section-options">
<label for="default" id="layout-default" class="layout-options">
<input
type="radio"
value="default"
name="<?php echo $this->tainacan_sections_layout; ?>"
id="default" checked>
<img src="<?php echo esc_url( get_template_directory_uri()); ?>/assets/images/section_default.png" alt="<?php _e( 'Default', 'tainacan-interface' ); ?>" />
<?php _e( 'Default', 'tainacan-interface' ); ?>
</label>
<label for="tabs" id="layout-tabs" class="layout-options">
<input
type="radio"
value="tabs"
name="<?php echo $this->tainacan_sections_layout; ?>"
id="tabs">
<img src="<?php echo esc_url( get_template_directory_uri()); ?>/assets/images/section_tabs.png" alt="<?php _e( 'Tabs', 'tainacan-interface' ); ?>" />
<?php _e( 'Tabs', 'tainacan-interface' ); ?>
</label>
<label for="collapses" id="layout-collapses" class="layout-options">
<input
type="radio"
value="collapses"
name="<?php echo $this->tainacan_sections_layout; ?>"
id="collapses">
<img src="<?php echo esc_url( get_template_directory_uri()); ?>/assets/images/section_collapse.png" alt="<?php _e( 'Collapses', 'tainacan-interface' ); ?>" />
<?php _e( 'Collapses', 'tainacan-interface' ); ?>
</label>
<label for="accordion" id="layout-accordion" class="layout-options">
<input
type="radio"
value="accordion"
name="<?php echo $this->tainacan_sections_layout; ?>"
id="accordion">
<img src="<?php echo esc_url( get_template_directory_uri()); ?>/assets/images/section_accordion.png" alt="<?php _e( 'Accordion', 'tainacan-interface' ); ?>" />
<?php _e( 'Accordion', 'tainacan-interface' ); ?>
</label>
</div>
</div>
<?php
return ob_get_clean();
}
function add_meta_to_response( $extra_meta, $request ) {
$extra_meta = array(
$this->tainacan_background_color,
$this->tainacan_text_color,
$this->tainacan_sections_layout
);
return $extra_meta;
}
function save_meta( $object ) {
if ( ! function_exists( 'tainacan_get_api_postdata' ) ) {
return;
}
$post = tainacan_get_api_postdata();
if ( $object->can_edit() ) {
if ( isset( $post->{$this->tainacan_background_color} ) ) {
update_post_meta( $object->get_id(), $this->tainacan_background_color, $post->{$this->tainacan_background_color} );
}
if ( isset( $post->{$this->tainacan_text_color} ) ) {
update_post_meta( $object->get_id(), $this->tainacan_text_color, $post->{$this->tainacan_text_color} );
}
if ( isset( $post->{$this->tainacan_sections_layout} ) ) {
update_post_meta( $object->get_id(), $this->tainacan_sections_layout, $post->{$this->tainacan_sections_layout} );
}
}
}
}
new TainacanInterfaceCollectionSettings();

View File

@ -1,144 +0,0 @@
<?php
/**
* Class that hooks in the tainacan plugin (if present) to add new options to Collections
*/
class TainacanThemeCollectionColor {
public $tainacan_background_color = 'tainacan_theme_collection_background_color';
public $tainacan_text_color = 'tainacan_theme_collection_color';
function __construct() {
add_filter( 'tainacan-api-response-collection-meta', array( $this, 'add_meta_to_response' ), 10, 2 );
add_action( 'tainacan-register-admin-hooks', array( $this, 'register_hook' ) );
add_action( 'tainacan-insert-tainacan-collection', array( $this, 'save_meta' ) );
add_action( 'tainacan-enqueue-admin-scripts', array( $this, 'action_tainacan_enqueue_admin_scripts' ) );
}
function action_tainacan_enqueue_admin_scripts() {
wp_enqueue_script( 'tainacan_colorWell', get_template_directory_uri() . '/assets/js/collection-color.js', false, false, true );
wp_enqueue_style( 'tainacan_colorWellStyle', get_template_directory_uri() . '/assets/css/collection-color.css', [], TAINACAN_INTERFACE_VERSION );
wp_localize_script( 'tainacan_colorWell', 'tainacan_colorPickerVars', array(
'cancelText' => __( 'Cancel', 'tainacan-interface' ),
'chooseText' => __( 'Choose', 'tainacan-interface' ),
'togglePaletteMoreText' => __( 'more', 'tainacan-interface' ),
'togglePaletteLessText' => __( 'less', 'tainacan-interface' ),
'clearText' => __( 'Clear Color Selection', 'tainacan-interface' ),
'noColorSelectedText' => __( 'No Color Selected', 'tainacan-interface' ),
));
wp_enqueue_script( 'spectrum', get_template_directory_uri() . '/assets/js/spectrum.js', false, false, true );
wp_enqueue_style( 'spectrum', get_template_directory_uri() . '/assets/css/spectrum.css' );
}
function register_hook() {
if ( function_exists( 'tainacan_register_admin_hook' ) ) {
tainacan_register_admin_hook( 'collection', array( $this, 'form' ) );
}
}
function form() {
if ( ! function_exists( 'tainacan_get_api_postdata' ) ) {
return '';
}
ob_start();
?>
<div class="field tainacan-collection--section-header">
<h4><?php _e( 'Tainacan theme header settings', 'tainacan-interface' ); ?></h4>
<hr>
</div>
<div class="field tainacan-collection--change-color-picker">
<label class="label"><?php _e( 'Collection Background Color', 'tainacan-interface' ); ?></label>
<span class="help-wrapper">
<a class="help-button has-text-secondary">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-help"/></i>
</span>
</a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5><?php _e( 'Collection Background Color', 'tainacan-interface' ); ?></h5>
</div>
<div class="help-tooltip-body">
<p><?php _e( 'Collection header fill color', 'tainacan-interface' ); ?></p>
</div>
</div>
</span>
<div class="control is-clearfix">
<input type="text" value="" id="colorpicker" name="<?php echo $this->tainacan_background_color; ?>">
</div>
</div>
<div class="field tainacan-collection--change-text-color">
<label class="label"><?php _e( 'Collection Text Color', 'tainacan-interface' ); ?></label>
<span class="help-wrapper">
<a class="help-button has-text-secondary">
<span class="icon is-small">
<i class="tainacan-icon tainacan-icon-help"></i>
</span>
</a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5><?php _e( 'Collection Text Color', 'tainacan-interface' ); ?></h5>
</div>
<div class="help-tooltip-body">
<p><?php _e( 'Text color on collection header', 'tainacan-interface' ); ?></p>
</div>
</div>
</span>
<div class="control is-clearfix">
<label for="white" id="color-white" class="color-text">
<input
type="radio"
value="#fff"
name="<?php echo $this->tainacan_text_color; ?>"
id="white" checked>
<?php _e( 'White', 'tainacan-interface' ); ?>
</label>
<label for="black" id="color-black" class="color-text">
<input
type="radio"
value="#000"
name="<?php echo $this->tainacan_text_color; ?>"
id="black">
<?php _e( 'Black', 'tainacan-interface' ); ?>
</label>
</div>
</div>
<?php
return ob_get_clean();
}
function add_meta_to_response( $extra_meta, $request ) {
$extra_meta = array(
$this->tainacan_background_color,
$this->tainacan_text_color,
);
return $extra_meta;
}
function save_meta( $object ) {
if ( ! function_exists( 'tainacan_get_api_postdata' ) ) {
return;
}
$post = tainacan_get_api_postdata();
if ( $object->can_edit() ) {
if ( isset( $post->{$this->tainacan_background_color} ) ) {
update_post_meta( $object->get_id(), $this->tainacan_background_color, $post->{$this->tainacan_background_color} );
}
if ( isset( $post->{$this->tainacan_text_color} ) ) {
update_post_meta( $object->get_id(), $this->tainacan_text_color, $post->{$this->tainacan_text_color} );
}
}
}
}
new TainacanThemeCollectionColor();

File diff suppressed because one or more lines are too long

View File

@ -113,13 +113,25 @@
'after_value' => '</p></div>',
'exclude_title' => get_theme_mod('tainacan_single_item_hide_core_title_metadata', false)
);
$section_layout = esc_attr( get_post_meta( tainacan_get_collection_id(), 'tainacan_interface_section_layout', 'default' ) );
if ( $section_layout == 'tabs') {
add_filter('tainacan-get-metadata-section-as-html-before-name--index-0', function($before, $item_metadatum) {
return str_replace('<input', '<input checked="checked"', $before);
}, 10, 2);
$args = array(
'before' => '<div class="mt-3 tainacan-single-post">',
'after' => '</div><div class="my-5 border-bottom border-silver"></div>',
'before_name' => '<h2 class="title-content-items">',
'after_name' => '</h2>',
'before' => '',
'after' => '',
'before_name' => '<input name="tabs" type="radio" id="tab-section-$id" />
<label for="tab-section-$id">
<h2 class="title-content-items" id="metadata-section-$slug">',
'after_name' => '</h2>
</label>',
'before_metadata_list' => do_action( 'tainacan-interface-single-item-metadata-begin' ). '
<section class="single-item-collection margin-two-column">
<section class="single-item-collection tainacan-metadata-section" aria-labelledby="metadata-section-$slug">
<div class="single-item-collection--information justify-content-center">
<div class="row">
<div class="col s-item-collection--metadata">',
@ -131,5 +143,94 @@
'metadata_list_args' => $metadata_args
);
echo '<div class="single-item-collection--section-metadata--layout-tabs mt-3 tainacan-single-post">';
tainacan_the_metadata_sections( $args );
echo '</div><div class="my-5 border-bottom border-silver"></div>';
} else if ( $section_layout == 'collapses') {
add_filter('tainacan-get-metadata-section-as-html-before-name--index-0', function($before, $item_metadatum) {
return str_replace('<input', '<input checked="checked"', $before);
}, 10, 2);
$args = array(
'before' => '',
'after' => '',
'before_name' => '<input name="collapses" type="checkbox" id="collapse-section-$id"/>
<label for="collapse-section-$id">
<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-30px"></i>
<h2 class="title-content-items" id="metadata-section-$slug">',
'after_name' => '</h2>
</label>',
'before_metadata_list' => do_action( 'tainacan-interface-single-item-metadata-begin' ). '
<section class="single-item-collection tainacan-metadata-section" aria-labelledby="metadata-section-$slug">
<div class="single-item-collection--information justify-content-center">
<div class="row">
<div class="col s-item-collection--metadata">',
'after_metadata_list' => '
</div>
</div>
</div>
</section>' . do_action( 'tainacan-interface-single-item-metadata-end' ),
'metadata_list_args' => $metadata_args
);
echo '<div class="single-item-collection--section-metadata--layout-collapses mt-3 tainacan-single-post">';
tainacan_the_metadata_sections( $args );
echo '</div><div class="my-5 border-bottom border-silver"></div>';
} else if ( $section_layout == 'accordion') {
add_filter('tainacan-get-metadata-section-as-html-before-name--index-0', function($before, $item_metadatum) {
return str_replace('<input', '<input checked="checked"', $before);
}, 10, 2);
$args = array(
'before' => '',
'after' => '',
'before_name' => '<input name="accordion" type="radio" id="accordion-section-$id"/>
<label for="accordion-section-$id">
<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-30px"></i>
<h2 class="title-content-items" id="metadata-section-$slug">',
'after_name' => '</h2>
</label>',
'before_metadata_list' => do_action( 'tainacan-interface-single-item-metadata-begin' ). '
<section class="single-item-collection tainacan-metadata-section" aria-labelledby="metadata-section-$slug">
<div class="single-item-collection--information justify-content-center">
<div class="row">
<div class="col s-item-collection--metadata">',
'after_metadata_list' => '
</div>
</div>
</div>
</section>' . do_action( 'tainacan-interface-single-item-metadata-end' ),
'metadata_list_args' => $metadata_args
);
echo '<div class="single-item-collection--section-metadata--layout-accordion mt-3 tainacan-single-post">';
tainacan_the_metadata_sections( $args );
echo '</div><div class="my-5 border-bottom border-silver"></div>';
} else {
$args = array(
'before' => '<div class="mt-3 tainacan-single-post">',
'after' => '</div><div class="my-5 border-bottom border-silver"></div>',
'before_name' => '<h2 class="title-content-items" id="metadata-section-$slug">',
'after_name' => '</h2>',
'before_metadata_list' => do_action( 'tainacan-interface-single-item-metadata-begin' ). '
<section class="single-item-collection margin-two-column tainacan-metadata-section" aria-labelledby="metadata-section-$slug">
<div class="single-item-collection--information justify-content-center">
<div class="row">
<div class="col s-item-collection--metadata">',
'after_metadata_list' => '
</div>
</div>
</div>
</section>' . do_action( 'tainacan-interface-single-item-metadata-end' ),
'metadata_list_args' => $metadata_args
);
tainacan_the_metadata_sections( $args );
}
?>