From 2fad6a7764b8271fecdc5d90ccf133976b300f7c Mon Sep 17 00:00:00 2001 From: Fabiano Alencar Date: Wed, 5 Sep 2018 16:30:08 -0300 Subject: [PATCH] Change background color and text of header by plugin. --- src/functions/collection-color.css | 23 ++++++ src/functions/collection-color.js | 14 ++++ src/functions/collection-color.php | 97 ++++++++++++++++++------- src/template-parts/headerCollection.php | 15 +++- 4 files changed, 120 insertions(+), 29 deletions(-) create mode 100644 src/functions/collection-color.css create mode 100644 src/functions/collection-color.js diff --git a/src/functions/collection-color.css b/src/functions/collection-color.css new file mode 100644 index 0000000..f16a223 --- /dev/null +++ b/src/functions/collection-color.css @@ -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; +} \ No newline at end of file diff --git a/src/functions/collection-color.js b/src/functions/collection-color.js new file mode 100644 index 0000000..2ec21cf --- /dev/null +++ b/src/functions/collection-color.js @@ -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(); + } +}); \ No newline at end of file diff --git a/src/functions/collection-color.php b/src/functions/collection-color.php index e139463..300bb94 100644 --- a/src/functions/collection-color.php +++ b/src/functions/collection-color.php @@ -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,32 +32,65 @@ class TainacanThemeCollectionColor { ob_start(); ?> -
- - - - - - - -
-
-
Collection Color
-
-
-

Color that will fill the area over collection's header on Tainacan theme.

+
+ + + + + + + +
+
+
+
+
+

+
-
- -
- +
+ - + id="colorpicker" + name="background_color; ?>"> +
- + +
+ + + + + + + +
+
+
+
+
+

+
+
+ +
+ + + + +
+
+ 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}); } } diff --git a/src/template-parts/headerCollection.php b/src/template-parts/headerCollection.php index c52aa0d..0dcd574 100644 --- a/src/template-parts/headerCollection.php +++ b/src/template-parts/headerCollection.php @@ -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; }"; }