tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change background color and text of header by plugin.

This commit is contained in:
Fabiano Alencar 2018-09-05 16:30:08 -03:00
parent e0838f664a
commit 2fad6a7764
4 changed files with 120 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/functions/collection-color.css Normal file
View File

@ -0,0 +1,23 @@
.tainacan-collection--change-color-picker #colorpicker {
border: 0;
height: 40px;
margin: 0.5rem 0.1rem;
padding: 0;
width: 40px;
}
.tainacan-collection--change-text-color .control {
margin-top: 1rem;
}
.tainacan-collection--change-text-color .color-text[for="white"] {
background-color: #000;
color: #fff;
margin-right: 1rem;
padding: 0.8rem;
}
.tainacan-collection--change-text-color .color-text[for="black"] {
background-color: #fff;
color: #000;
margin-right: 1rem;
padding: 0.8rem;
}

14
src/functions/collection-color.js Normal file
View File

@ -0,0 +1,14 @@
document.addEventListener('tainacan-collection-hook-reload', function() {
var colorWell;
colorWell = document.getElementById("colorpicker");
if(colorWell != null){
colorWell.addEventListener('input', function(event){
var label = document.getElementsByClassName('color-text');
if (label[0] && label[1]) {
label[0].style.backgroundColor = event.target.value;
label[1].style.backgroundColor = event.target.value;
}
});
colorWell.select();
}
});

67
src/functions/collection-color.php
View File

@ -4,7 +4,8 @@
class TainacanThemeCollectionColor {
public $meta_name = 'tainacan_theme_collection_color';
public $background_color = 'tainacan_theme_collection_background_color';
public $text_color = 'tainacan_theme_collection_color';
function __construct() {
add_filter('tainacan-api-response-collection-meta', array($this, 'add_meta_to_response'), 10, 2);
@ -12,7 +13,12 @@ class TainacanThemeCollectionColor {
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('colorWell', get_template_directory_uri(). '/functions/collection-color.js', '', '', true);
wp_enqueue_style('colorWellStyle', get_template_directory_uri(). '/functions/collection-color.css');
}
function register_hook() {
@ -26,8 +32,8 @@ class TainacanThemeCollectionColor {
ob_start();
?>
<div class="field">
<label class="label">Collection Color</label>
<div class="field tainacan-collection--change-color-picker">
<label class="label"><?php _e('Collection Background Color', 'tainacan-theme'); ?></label>
<span class="help-wrapper">
<a class="help-button has-text-secondary">
<span class="icon is-small">
@ -36,20 +42,53 @@ class TainacanThemeCollectionColor {
</a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5>Collection Color</h5>
<h5><?php _e('Collection Background Color', 'tainacan-theme'); ?></h5>
</div>
<div class="help-tooltip-body">
<p>Color that will fill the area over collection's header on Tainacan theme.</p>
<p><?php _e('Color that will fill the area over collection\'s header on Tainacan theme.', 'tainacan-theme'); ?></p>
</div>
</div>
</span>
<div class="control is-clearfix">
<input
style="height: 40px;width: 40px;margin: 0.5rem 0.1rem;border: 0;padding: 0;"
type="color"
value="#2c2d2d"
name="<?php echo $this->meta_name; ?>">
</input>
id="colorpicker"
name="<?php echo $this->background_color; ?>">
</div>
</div>
<div class="field tainacan-collection--change-text-color">
<label class="label"><?php _e('Collection Text Color', 'tainacan-theme'); ?></label>
<span class="help-wrapper">
<a class="help-button has-text-secondary">
<span class="icon is-small">
<i class="mdi mdi-help-circle-outline"/></i>
</span>
</a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5><?php _e('Collection Text Color', 'tainacan-theme'); ?></h5>
</div>
<div class="help-tooltip-body">
<p><?php _e('Text color on area over collection\'s header on Tainacan theme.', 'tainacan-theme'); ?></p>
</div>
</div>
</span>
<div class="control is-clearfix">
<input
type="radio"
value="#fff"
name="<?php echo $this->text_color; ?>"
id="white">
<label for="white" id="color-white" class="color-text">White</label>
<input
type="radio"
value="#000"
name="<?php echo $this->text_color; ?>"
id="black">
<label for="black" id="color-black" class="color-text">Black</label>
</div>
</div>
<?php
@ -60,7 +99,10 @@ class TainacanThemeCollectionColor {
}
function add_meta_to_response($extra_meta, $request) {
$extra_meta[] = $this->meta_name;
$extra_meta = array(
$this->background_color,
$this->text_color
);
return $extra_meta;
}
@ -69,8 +111,11 @@ class TainacanThemeCollectionColor {
$post = json_decode($postdata);
if ($object->can_edit()) {
if (isset($post->{$this->meta_name})) {
update_post_meta($object->get_id(), $this->meta_name, $post->{$this->meta_name});
if (isset($post->{$this->background_color})) {
update_post_meta($object->get_id(), $this->background_color, $post->{$this->background_color});
}
if (isset($post->{$this->text_color})) {
update_post_meta($object->get_id(), $this->text_color, $post->{$this->text_color});
}
}

15
src/template-parts/headerCollection.php
View File

@ -10,10 +10,19 @@
min-width: 10rem !important;
}';
$custom_color = get_post_meta(tainacan_get_collection_id(), 'tainacan_theme_collection_color', true);
if ($custom_color) {
$background_color = get_post_meta(tainacan_get_collection_id(), 'tainacan_theme_collection_background_color', true);
$text_color = get_post_meta(tainacan_get_collection_id(), 'tainacan_theme_collection_color', true);
if ($background_color) {
echo ".t-bg-collection {
background-color: $custom_color;
background-color: $background_color !important;
}";
echo ".t-bg-collection h2, .t-bg-collection .t-collection--info-description-text {
color: $text_color !important;
}";
echo ".t-bg-collection a {
color: $text_color !important;
opacity: 0.6;
}";
}