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(); ?> -
Color that will fill the area over collection's header on Tainacan theme.
+