Skip to content
Snippets Groups Projects
Commit 5f6b6f77 authored by Sahana  N's avatar Sahana N Committed by Bohdan Melnychuk
Browse files

Issue #3397545 by bobi-mel: Add the ability to configure the Darkmode Switcher block

parent 68354d70
No related branches found
No related tags found
1 merge request!9Configure the Darkmode switcher block.
bottom: '64px'
right: '32px'
left: 'unset'
time: '0.5s'
mixColor: '#fff'
backgroundColor: '#fff'
buttonColorDark: '#100f2c'
buttonColorLight: '#fff'
saveInCookies: FALSE
label: '🌓'
autoMatchOsTheme: TRUE
......@@ -2,3 +2,4 @@ name: Darkmode
type: module
description: Integration of Darkmodejs library.
core_version_requirement: ^8 || ^9 || ^10
configure: darkmode.options_settings
......@@ -5,6 +5,7 @@ initiator:
js:
js/init.js: {}
dependencies:
- darkmode/darkmodejs
- core/jquery
- core/drupal
- darkmode/darkmodejs
- core/once
darkmode.options_settings:
path: '/admin/config/darkmode'
defaults:
_form: '\Drupal\darkmode\Form\DarkmodeConfigurationForm'
_title: 'Darkmode Options Configuration'
requirements:
_permission: 'administer site configuration'
......@@ -3,7 +3,7 @@
* Provides base JS for darkmode.
*/
(function (Drupal, once) {
(function (Drupal, once, drupalSettings) {
/**
* Enables the dark mode widget.
......@@ -11,20 +11,20 @@
Drupal.behaviors.darkModeWidget = {
attach: function (context) {
once('darkmode', 'body', context).forEach(() => {
const options = {
bottom: '64px',
right: '32px',
left: 'unset',
time: '0.5s',
mixColor: '#fff',
backgroundColor: '#fff',
buttonColorDark: '#100f2c',
buttonColorLight: '#fff',
saveInCookies: false,
label: '🌓',
autoMatchOsTheme: true
};
const options = {
bottom: drupalSettings.darkmode.bottom,
right: drupalSettings.darkmode.right,
left: drupalSettings.darkmode.left,
time: drupalSettings.darkmode.time,
mixColor: drupalSettings.darkmode.mixColor,
backgroundColor: drupalSettings.darkmode.backgroundColor,
buttonColorDark: drupalSettings.darkmode.buttonColorDark,
buttonColorLight: drupalSettings.darkmode.buttonColorLight,
saveInCookies: drupalSettings.darkmode.saveInCookies,
label: '🌓',
autoMatchOsTheme: drupalSettings.darkmode.autoMatchOsTheme
};
// Initialize the dark mode widget.
const darkmode = new Darkmode(options);
darkmode.showWidget();
......@@ -32,4 +32,4 @@
})
}
}
})(Drupal, once);
})(Drupal, once, drupalSettings);
<?php
namespace Drupal\darkmode\Form;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Implements a codimth Config Form API.
*/
class DarkmodeConfigurationForm extends ConfigFormBase {
/**
* The config factory.
*
* @var \Drupal\Core\Config\ConfigFactoryInterface
*/
private ConfigFactoryInterface $config;
/**
* Constructs a ConfigForm object.
*
* @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
* The factory for configuration objects.
*/
public function __construct(ConfigFactoryInterface $config_factory) {
$this->config = $config_factory;
parent::__construct($config_factory);
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
return new static(
$container->get('config.factory'),
);
}
/**
* {@inheritdoc}
*/
public function getFormId() {
return 'darkmode_options_settings';
}
/**
* Gets the configuration names that will be editable.
*
* @return array
* An array of configuration object names that are editable if called in
* conjunction with the trait's config() method.
*/
protected function getEditableConfigNames() {
return [
'darkmode.options_settings',
];
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
$config = $this->config('darkmode.config');
$form['bottom'] = [
'#type' => 'textfield',
'#title' => $this->t('Bottom'),
'#default_value' => $config->get('bottom') ?? $config->get('bottom'),
'#description' => $this->t('Enter number of pixel for Bottom or unset'),
];
$form['right'] = [
'#type' => 'textfield',
'#title' => $this->t('Right'),
'#default_value' => $config->get('right') ?? $config->get('right'),
'#description' => $this->t('Enter number of pixel for Right or unset'),
];
$form['left'] = [
'#type' => 'textfield',
'#title' => $this->t('Left'),
'#default_value' => $config->get('left') ?? 'unset',
'#description' => $this->t('Enter number of pixel for Left or unset'),
];
$form['time'] = [
'#type' => 'textfield',
'#title' => $this->t('Time'),
'#default_value' => ($config->get('time') == '') ? '0.5s' : $config->get('time'),
'#description' => $this->t('Enter number of Seconds'),
];
$form['mixColor'] = [
'#type' => 'textfield',
'#title' => $this->t('MixColor'),
'#default_value' => $config->get('mixColor') ?? '#fff',
'#description' => $this->t('Enter the color code Ex: #fff'),
];
$form['backgroundColor'] = [
'#type' => 'textfield',
'#title' => $this->t('BackgroundColor'),
'#default_value' => $config->get('backgroundColor') ?? '#fff',
'#description' => $this->t('Enter the color code Ex: #fff'),
];
$form['buttonColorDark'] = [
'#type' => 'textfield',
'#title' => $this->t('ButtonColorDark'),
'#default_value' => $config->get('buttonColorDark') ?? '#100f2c',
'#description' => $this->t('Enter the color code Ex: #fff'),
];
$form['buttonColorLight'] = [
'#type' => 'textfield',
'#title' => $this->t('ButtonColorLight'),
'#default_value' => $config->get('buttonColorLight') ?? '#fff',
'#description' => $this->t('Enter the color code Ex: #fff'),
];
$form['saveInCookies'] = [
'#type' => 'checkbox',
'#title' => $this->t('SaveInCookies'),
'#default_value' => $config->get('saveInCookies') ?? FALSE,
];
$form['autoMatchOsTheme'] = [
'#type' => 'checkbox',
'#title' => $this->t('AutoMatchOsTheme'),
'#default_value' => $config->get('autoMatchOsTheme') ?? TRUE,
];
return parent::buildForm($form, $form_state);
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state) {
$this->config->getEditable('darkmode.config')
->set('bottom', $form_state->getValue('bottom'))
->set('right', $form_state->getValue('right'))
->set('left', $form_state->getValue('left'))
->set('time', $form_state->getValue('time'))
->set('mixColor', $form_state->getValue('mixColor'))
->set('backgroundColor', $form_state->getValue('backgroundColor'))
->set('buttonColorDark', $form_state->getValue('buttonColorDark'))
->set('buttonColorLight', $form_state->getValue('buttonColorLight'))
->set('saveInCookies', boolval($form_state->getValue('saveInCookies')))
->set('autoMatchOsTheme', boolval($form_state->getValue('autoMatchOsTheme')))
->save();
}
}
......@@ -3,6 +3,9 @@
namespace Drupal\darkmode\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Adds Darkmode switcher block.
......@@ -12,14 +15,62 @@ use Drupal\Core\Block\BlockBase;
* admin_label = @Translation("Darkmode Switcher"),
* )
*/
class DarkmodeSwitcherBlock extends BlockBase {
class DarkmodeSwitcherBlock extends BlockBase implements ContainerFactoryPluginInterface {
/**
* The config factory.
*
* @var \Drupal\Core\Config\ConfigFactoryInterface
*/
private ConfigFactoryInterface $config;
/**
* The Constructor for DarkmodeSwitcher clock.
*
* @param array $configuration
* Configuration array.
* @param string $plugin_id
* Plugin ID.
* @param mixed $plugin_definition
* Plugin definition.
* @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
* The factory for configuration objects.
*/
public function __construct(array $configuration, $plugin_id, $plugin_definition, ConfigFactoryInterface $config_factory) {
$this->config = $config_factory;
parent::__construct($configuration, $plugin_id, $plugin_definition);
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
return new static($configuration, $plugin_id, $plugin_definition,
$container->get('config.factory')
);
}
/**
* {@inheritdoc}
*/
public function build() {
$config = $this->config->get('darkmode.config');
$build['content'] = [
'#attached' => [
'drupalSettings' => [
'darkmode' => [
'bottom' => $config->get('bottom'),
'right' => $config->get('right'),
'left' => $config->get('left'),
'time' => $config->get('time'),
'mixColor' => $config->get('mixColor'),
'backgroundColor' => $config->get('backgroundColor'),
'buttonColorDark' => $config->get('buttonColorDark'),
'buttonColorLight' => $config->get('buttonColorLight'),
'saveInCookies' => $config->get('saveInCookies'),
'autoMatchOsTheme' => $config->get('autoMatchOsTheme'),
],
],
'library' => [
'darkmode/initiator',
],
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment