Commit ce1d1a90 authored by Sam152's avatar Sam152 Committed by frjo
Browse files

Issue #2642380 by Sam152: Use states API for the admin form instead of custom JavaScript toggles

parent c84536e6
...@@ -30,14 +30,6 @@ init: ...@@ -30,14 +30,6 @@ init:
- core/jquery - core/jquery
- core/drupal - core/drupal
admin_settings:
version: VERSION
js:
js/colorbox_admin_settings.js: { preprocess: false }
dependencies:
- core/jquery
- core/drupal
plain: plain:
version: VERSION version: VERSION
js: js:
......
(function ($) {
Drupal.behaviors.initColorboxAdminSettings = {
attach: function (context, settings) {
$('div.colorbox-custom-settings-activate input.form-radio', context).click(function () {
if (this.value == 1) {
$('div.colorbox-custom-settings', context).show();
}
else {
$('div.colorbox-custom-settings', context).hide();
}
});
$('div.colorbox-slideshow-settings-activate input.form-radio', context).click(function () {
if (this.value == 1) {
$('div.colorbox-slideshow-settings', context).show();
}
else {
$('div.colorbox-slideshow-settings', context).hide();
}
});
$('div.colorbox-title-trim-settings-activate input.form-radio', context).click(function () {
if (this.value == 1) {
$('div.colorbox-title-trim-settings', context).show();
}
else {
$('div.colorbox-title-trim-settings', context).hide();
}
});
}
};
})(jQuery);
...@@ -16,6 +16,16 @@ use Drupal\Core\Form\FormStateInterface; ...@@ -16,6 +16,16 @@ use Drupal\Core\Form\FormStateInterface;
*/ */
class ColorboxSettingsForm extends ConfigFormBase { class ColorboxSettingsForm extends ConfigFormBase {
/**
* A state that represents the custom settings being enabled.
*/
const STATE_CUSTOM_SETTINGS = 0;
/**
* A state that represents the slideshow being enabled.
*/
const STATE_SLIDESHOW_ENABLED = 1;
/** /**
* {@inheritdoc} * {@inheritdoc}
*/ */
...@@ -34,12 +44,8 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -34,12 +44,8 @@ class ColorboxSettingsForm extends ConfigFormBase {
* {@inheritdoc} * {@inheritdoc}
*/ */
public function buildForm(array $form, FormStateInterface $form_state) { public function buildForm(array $form, FormStateInterface $form_state) {
// Get all settings
$config = $this->configFactory->get('colorbox.settings');
$form['#attached']['library'][] = 'colorbox/admin_settings';
//$library = libraries_detect('colorbox'); $config = $this->configFactory->get('colorbox.settings');
$form['colorbox_custom_settings'] = array( $form['colorbox_custom_settings'] = array(
'#type' => 'details', '#type' => 'details',
...@@ -70,21 +76,14 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -70,21 +76,14 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#options' => array(0 => t('Default'), 1 => t('Custom')), '#options' => array(0 => t('Default'), 1 => t('Custom')),
'#default_value' => $config->get('custom.activate'), '#default_value' => $config->get('custom.activate'),
'#description' => t('Use the default or custom options for Colorbox.'), '#description' => t('Use the default or custom options for Colorbox.'),
'#prefix' => '<div class="colorbox-custom-settings-activate">',
'#suffix' => '</div>',
); );
$js_hide = $config->get('custom.activate') ? '' : ' js-hide';
$form['colorbox_custom_settings']['wrapper_start'] = array(
'#markup' => '<div class="colorbox-custom-settings' . $js_hide . '">',
);
$form['colorbox_custom_settings']['colorbox_transition_type'] = array( $form['colorbox_custom_settings']['colorbox_transition_type'] = array(
'#type' => 'radios', '#type' => 'radios',
'#title' => t('Transition type'), '#title' => t('Transition type'),
'#options' => array('elastic' => t('Elastic'), 'fade' => t('Fade'), 'none' => t('None')), '#options' => array('elastic' => t('Elastic'), 'fade' => t('Fade'), 'none' => t('None')),
'#default_value' => $config->get('custom.transition_type'), '#default_value' => $config->get('custom.transition_type'),
'#description' => t('The transition type.'), '#description' => t('The transition type.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$speed_options = array(100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600); $speed_options = array(100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600);
$form['colorbox_custom_settings']['colorbox_transition_speed'] = array( $form['colorbox_custom_settings']['colorbox_transition_speed'] = array(
...@@ -93,6 +92,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -93,6 +92,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#options' => array_combine($speed_options, $speed_options), '#options' => array_combine($speed_options, $speed_options),
'#default_value' => $config->get('custom.transition_speed'), '#default_value' => $config->get('custom.transition_speed'),
'#description' => t('Sets the speed of the fade and elastic transitions, in milliseconds.'), '#description' => t('Sets the speed of the fade and elastic transitions, in milliseconds.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$opacity_options = array('0', '0.10', '0.15', '0.20', '0.25', '0.30', '0.35', '0.40', '0.45', '0.50', '0.55', '0.60', '0.65', '0.70', '0.75', '0.80', '0.85', '0.90', '0.95', '1'); $opacity_options = array('0', '0.10', '0.15', '0.20', '0.25', '0.30', '0.35', '0.40', '0.45', '0.50', '0.55', '0.60', '0.65', '0.70', '0.75', '0.80', '0.85', '0.90', '0.95', '1');
$form['colorbox_custom_settings']['colorbox_opacity'] = array( $form['colorbox_custom_settings']['colorbox_opacity'] = array(
...@@ -101,6 +101,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -101,6 +101,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#options' => array_combine($opacity_options, $opacity_options), '#options' => array_combine($opacity_options, $opacity_options),
'#default_value' => $config->get('custom.opacity'), '#default_value' => $config->get('custom.opacity'),
'#description' => t('The overlay opacity level. Range: 0 to 1.'), '#description' => t('The overlay opacity level. Range: 0 to 1.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_text_current'] = array( $form['colorbox_custom_settings']['colorbox_text_current'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -108,6 +109,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -108,6 +109,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.text_current'), '#default_value' => $config->get('custom.text_current'),
'#size' => 30, '#size' => 30,
'#description' => t('Text format for the content group / gallery count. {current} and {total} are detected and replaced with actual numbers while Colorbox runs.'), '#description' => t('Text format for the content group / gallery count. {current} and {total} are detected and replaced with actual numbers while Colorbox runs.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_text_previous'] = array( $form['colorbox_custom_settings']['colorbox_text_previous'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -115,6 +117,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -115,6 +117,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.text_previous'), '#default_value' => $config->get('custom.text_previous'),
'#size' => 30, '#size' => 30,
'#description' => t('Text for the previous button in a shared relation group.'), '#description' => t('Text for the previous button in a shared relation group.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_text_next'] = array( $form['colorbox_custom_settings']['colorbox_text_next'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -122,6 +125,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -122,6 +125,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.text_next'), '#default_value' => $config->get('custom.text_next'),
'#size' => 30, '#size' => 30,
'#description' => t('Text for the next button in a shared relation group.'), '#description' => t('Text for the next button in a shared relation group.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_text_close'] = array( $form['colorbox_custom_settings']['colorbox_text_close'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -129,6 +133,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -129,6 +133,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.text_close'), '#default_value' => $config->get('custom.text_close'),
'#size' => 30, '#size' => 30,
'#description' => t('Text for the close button. The "Esc" key will also close Colorbox.'), '#description' => t('Text for the close button. The "Esc" key will also close Colorbox.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_maxwidth'] = array( $form['colorbox_custom_settings']['colorbox_maxwidth'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -136,6 +141,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -136,6 +141,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.maxwidth'), '#default_value' => $config->get('custom.maxwidth'),
'#size' => 30, '#size' => 30,
'#description' => t('Set a maximum width for loaded content. Example: "100%", 500, "500px".'), '#description' => t('Set a maximum width for loaded content. Example: "100%", 500, "500px".'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_maxheight'] = array( $form['colorbox_custom_settings']['colorbox_maxheight'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -143,6 +149,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -143,6 +149,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.maxheight'), '#default_value' => $config->get('custom.maxheight'),
'#size' => 30, '#size' => 30,
'#description' => t('Set a maximum height for loaded content. Example: "100%", 500, "500px".'), '#description' => t('Set a maximum height for loaded content. Example: "100%", 500, "500px".'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_initialwidth'] = array( $form['colorbox_custom_settings']['colorbox_initialwidth'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -150,6 +157,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -150,6 +157,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.initialwidth'), '#default_value' => $config->get('custom.initialwidth'),
'#size' => 30, '#size' => 30,
'#description' => t('Set the initial width, prior to any content being loaded. Example: "100%", 500, "500px".'), '#description' => t('Set the initial width, prior to any content being loaded. Example: "100%", 500, "500px".'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_initialheight'] = array( $form['colorbox_custom_settings']['colorbox_initialheight'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -157,24 +165,28 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -157,24 +165,28 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.initialheight'), '#default_value' => $config->get('custom.initialheight'),
'#size' => 30, '#size' => 30,
'#description' => t('Set the initial height, prior to any content being loaded. Example: "100%", 500, "500px".'), '#description' => t('Set the initial height, prior to any content being loaded. Example: "100%", 500, "500px".'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_overlayclose'] = array( $form['colorbox_custom_settings']['colorbox_overlayclose'] = array(
'#type' => 'checkbox', '#type' => 'checkbox',
'#title' => t('Overlay close'), '#title' => t('Overlay close'),
'#default_value' => $config->get('custom.overlayclose'), '#default_value' => $config->get('custom.overlayclose'),
'#description' => t('Enable closing Colorbox by clicking on the background overlay.'), '#description' => t('Enable closing Colorbox by clicking on the background overlay.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_fixed'] = array( $form['colorbox_custom_settings']['colorbox_fixed'] = array(
'#type' => 'checkbox', '#type' => 'checkbox',
'#title' => t('Fixed'), '#title' => t('Fixed'),
'#default_value' => $config->get('custom.fixed'), '#default_value' => $config->get('custom.fixed'),
'#description' => t('If the Colorbox should be displayed in a fixed position within the visitor\'s viewport or relative to the document.'), '#description' => t('If the Colorbox should be displayed in a fixed position within the visitor\'s viewport or relative to the document.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_scrolling'] = array( $form['colorbox_custom_settings']['colorbox_scrolling'] = array(
'#type' => 'checkbox', '#type' => 'checkbox',
'#title' => t('Scrollbars'), '#title' => t('Scrollbars'),
'#default_value' => $config->get('custom.scrolling'), '#default_value' => $config->get('custom.scrolling'),
'#description' => t('If unchecked, Colorbox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method for a smoother transition if you are appending content to an already open instance of Colorbox.'), '#description' => t('If unchecked, Colorbox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method for a smoother transition if you are appending content to an already open instance of Colorbox.'),
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_slideshow_settings'] = array( $form['colorbox_custom_settings']['colorbox_slideshow_settings'] = array(
...@@ -182,6 +194,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -182,6 +194,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#title' => t('Slideshow settings'), '#title' => t('Slideshow settings'),
'#collapsible' => TRUE, '#collapsible' => TRUE,
'#collapsed' => TRUE, '#collapsed' => TRUE,
'#states' => $this->getState(static::STATE_CUSTOM_SETTINGS),
); );
$form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshow'] = array( $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshow'] = array(
'#type' => 'radios', '#type' => 'radios',
...@@ -189,20 +202,13 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -189,20 +202,13 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#options' => array(0 => t('Off'), 1 => t('On')), '#options' => array(0 => t('Off'), 1 => t('On')),
'#default_value' => $config->get('custom.slideshow.slideshow'), '#default_value' => $config->get('custom.slideshow.slideshow'),
'#description' => t('An automatic slideshow to a content group / gallery.'), '#description' => t('An automatic slideshow to a content group / gallery.'),
'#prefix' => '<div class="colorbox-slideshow-settings-activate">',
'#suffix' => '</div>',
); );
$js_hide = $config->get('custom.slideshow.slideshow') ? '' : ' js-hide';
$form['colorbox_custom_settings']['colorbox_slideshow_settings']['wrapper_start'] = array(
'#markup' => '<div class="colorbox-slideshow-settings' . $js_hide . '">',
);
$form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshowauto'] = array( $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshowauto'] = array(
'#type' => 'checkbox', '#type' => 'checkbox',
'#title' => t('Slideshow autostart'), '#title' => t('Slideshow autostart'),
'#default_value' => $config->get('custom.slideshow.auto'), '#default_value' => $config->get('custom.slideshow.auto'),
'#description' => t('If the slideshow should automatically start to play.'), '#description' => t('If the slideshow should automatically start to play.'),
'#states' => $this->getState(static::STATE_SLIDESHOW_ENABLED),
); );
$slideshow_options = array(1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000); $slideshow_options = array(1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000);
$form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshowspeed'] = array( $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_slideshowspeed'] = array(
...@@ -211,6 +217,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -211,6 +217,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#options' => array_combine($slideshow_options, $slideshow_options), '#options' => array_combine($slideshow_options, $slideshow_options),
'#default_value' => $config->get('custom.slideshow.speed'), '#default_value' => $config->get('custom.slideshow.speed'),
'#description' => t('Sets the speed of the slideshow, in milliseconds.'), '#description' => t('Sets the speed of the slideshow, in milliseconds.'),
'#states' => $this->getState(static::STATE_SLIDESHOW_ENABLED),
); );
$form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_text_start'] = array( $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_text_start'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -218,6 +225,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -218,6 +225,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.slideshow.text_start'), '#default_value' => $config->get('custom.slideshow.text_start'),
'#size' => 30, '#size' => 30,
'#description' => t('Text for the slideshow start button.'), '#description' => t('Text for the slideshow start button.'),
'#states' => $this->getState(static::STATE_SLIDESHOW_ENABLED),
); );
$form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_text_stop'] = array( $form['colorbox_custom_settings']['colorbox_slideshow_settings']['colorbox_text_stop'] = array(
'#type' => 'textfield', '#type' => 'textfield',
...@@ -225,14 +233,7 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -225,14 +233,7 @@ class ColorboxSettingsForm extends ConfigFormBase {
'#default_value' => $config->get('custom.slideshow.text_stop'), '#default_value' => $config->get('custom.slideshow.text_stop'),
'#size' => 30, '#size' => 30,
'#description' => t('Text for the slideshow stop button.'), '#description' => t('Text for the slideshow stop button.'),
); '#states' => $this->getState(static::STATE_SLIDESHOW_ENABLED),
$form['colorbox_custom_settings']['colorbox_slideshow_settings']['wrapper_stop'] = array(
'#markup' => '</div>',
);
$form['colorbox_custom_settings']['wrapper_stop'] = array(
'#markup' => '</div>',
); );
$form['colorbox_advanced_settings'] = array( $form['colorbox_advanced_settings'] = array(
...@@ -318,7 +319,6 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -318,7 +319,6 @@ class ColorboxSettingsForm extends ConfigFormBase {
*/ */
public function submitForm(array &$form, FormStateInterface $form_state) { public function submitForm(array &$form, FormStateInterface $form_state) {
// Get config factory
$config = $this->configFactory->getEditable('colorbox.settings'); $config = $this->configFactory->getEditable('colorbox.settings');
$config $config
...@@ -365,4 +365,29 @@ class ColorboxSettingsForm extends ConfigFormBase { ...@@ -365,4 +365,29 @@ class ColorboxSettingsForm extends ConfigFormBase {
parent::submitForm($form, $form_state); parent::submitForm($form, $form_state);
} }
/**
* Get one of the pre-defined states used in this form.
*
* @param string $state
* The state to get that matches one of the state class constants.
*
* @return array
* A corresponding form API state.
*/
protected function getState($state) {
$states = [
static::STATE_CUSTOM_SETTINGS => [
'visible' => [
':input[name="colorbox_custom_settings_activate"]' => ['value' => '1'],
],
],
static::STATE_SLIDESHOW_ENABLED => [
'visible' => [
':input[name="colorbox_slideshow"]' => ['value' => '1']
],
],
];
return $states[$state];
}
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment