Implements first version of section layouts such as tabs and accordion.
This commit is contained in:
mateuswetah
parent
5bdc5230bc
commit
28440c7fcc
|
|
@ -27,10 +27,6 @@
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tainacan-collection--change-text-color .control {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tainacan-collection--change-text-color input[type="radio"]::before {
|
.tainacan-collection--change-text-color input[type="radio"]::before {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
|
@ -48,6 +44,7 @@
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding: 0.7rem 1.25rem 0.7rem 1.0rem;
|
padding: 0.7rem 1.25rem 0.7rem 1.0rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tainacan-collection--change-text-color .color-text[for="black"] {
|
.tainacan-collection--change-text-color .color-text[for="black"] {
|
||||||
|
|
@ -58,8 +55,45 @@
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
padding: 0.7rem 1.25rem 0.7rem 1.0rem;
|
padding: 0.7rem 1.25rem 0.7rem 1.0rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.tainacan-collection--change-text-color .color-text input[type="radio"] {
|
.tainacan-collection--change-text-color .color-text input[type="radio"] {
|
||||||
border-color: white;
|
border-color: white;
|
||||||
vertical-align: middle;
|
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;
|
||||||
|
}
|
||||||
|
|
@ -10,8 +10,8 @@ License: MIT
|
||||||
top:0;
|
top:0;
|
||||||
left:0;
|
left:0;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
*display: inline;
|
display: inline;
|
||||||
*zoom: 1;
|
zoom: 1;
|
||||||
/* https://github.com/bgrins/spectrum/issues/40 */
|
/* https://github.com/bgrins/spectrum/issues/40 */
|
||||||
z-index: 9999994;
|
z-index: 9999994;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -374,8 +374,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
*zoom: 1;
|
zoom: 1;
|
||||||
*display: inline;
|
display: inline;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 42px;
|
border-radius: 42px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
@ -399,9 +399,9 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||||
}
|
}
|
||||||
.sp-preview {
|
.sp-preview {
|
||||||
position:relative;
|
position:relative;
|
||||||
width:32px;
|
width: calc(100% - 24px);
|
||||||
height: 32px;
|
height: 41px;
|
||||||
border-radius: 42px;
|
border-radius: 2px;
|
||||||
border: none;
|
border: none;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
float:left;
|
float:left;
|
||||||
|
|
@ -409,7 +409,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||||
}
|
}
|
||||||
|
|
||||||
.sp-palette {
|
.sp-palette {
|
||||||
*width: 220px;
|
width: 220px;
|
||||||
max-width: 220px;
|
max-width: 220px;
|
||||||
}
|
}
|
||||||
.sp-palette .sp-thumb-el {
|
.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 {
|
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
|
||||||
display:block;
|
display:block;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
border-radius: 42px;
|
border-radius: 2px;
|
||||||
top:0;left:0;bottom:0;right:0;
|
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 |
|
|
@ -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 {
|
#breadcrumb-single-item-pagination {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
height: 1.3rem;
|
height: 1.3rem;
|
||||||
|
|
|
||||||
|
|
@ -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/customizer.php';
|
||||||
require get_template_directory() . '/functions/single-functions.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';
|
require get_template_directory() . '/functions/breadcrumb.php';
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
@ -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
|
|
@ -113,13 +113,25 @@
|
||||||
'after_value' => '</p></div>',
|
'after_value' => '</p></div>',
|
||||||
'exclude_title' => get_theme_mod('tainacan_single_item_hide_core_title_metadata', false)
|
'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(
|
$args = array(
|
||||||
'before' => '<div class="mt-3 tainacan-single-post">',
|
'before' => '',
|
||||||
'after' => '</div><div class="my-5 border-bottom border-silver"></div>',
|
'after' => '',
|
||||||
'before_name' => '<h2 class="title-content-items">',
|
'before_name' => '<input name="tabs" type="radio" id="tab-section-$id" />
|
||||||
'after_name' => '</h2>',
|
<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' ). '
|
'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="single-item-collection--information justify-content-center">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col s-item-collection--metadata">',
|
<div class="col s-item-collection--metadata">',
|
||||||
|
|
@ -131,5 +143,94 @@
|
||||||
'metadata_list_args' => $metadata_args
|
'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 );
|
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 );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
Loading…
Reference in New Issue