class Border in Bootstrap Styles 1.0.x
Same name in this branch
- 1.0.x src/Plugin/BootstrapStyles/Style/Border.php \Drupal\bootstrap_styles\Plugin\BootstrapStyles\Style\Border
- 1.0.x src/Plugin/BootstrapStyles/StylesGroup/Border.php \Drupal\bootstrap_styles\Plugin\BootstrapStyles\StylesGroup\Border
Class Border.
@package Drupal\bootstrap_styles\Plugin\Style
Plugin annotation
@Style(
id = "border",
title = @Translation("Border"),
group_id = "border",
weight = 1
)
Hierarchy
- class \Drupal\Component\Plugin\PluginBase implements DerivativeInspectionInterface, PluginInspectionInterface
- class \Drupal\bootstrap_styles\Style\StylePluginBase implements StylePluginInterface uses StringTranslationTrait
- class \Drupal\bootstrap_styles\Plugin\BootstrapStyles\Style\Border
- class \Drupal\bootstrap_styles\Style\StylePluginBase implements StylePluginInterface uses StringTranslationTrait
Expanded class hierarchy of Border
3 string references to 'Border'
- bootstrap_styles.schema.yml in config/
schema/ bootstrap_styles.schema.yml - config/schema/bootstrap_styles.schema.yml
- Border::buildConfigurationForm in src/
Plugin/ BootstrapStyles/ StylesGroup/ Border.php - Border::buildStyleFormElements in src/
Plugin/ BootstrapStyles/ Style/ Border.php
File
- src/
Plugin/ BootstrapStyles/ Style/ Border.php, line 20
Namespace
Drupal\bootstrap_styles\Plugin\BootstrapStyles\StyleView source
class Border extends StylePluginBase {
/**
* {@inheritdoc}
*/
public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
$config = $this
->config();
$directions = [
'left',
'top',
'right',
'bottom',
];
// Border style.
$form['border']['style_description'] = [
'#type' => 'item',
'#title' => $this
->t('Border style'),
'#markup' => $this
->t('<p>Enter one value per line, in the format <b>key|label</b> where <em>key</em> is the CSS class name (without the .), and <em>label</em> is the human readable name of the border style.</p>'),
];
$form['border']['style_group'] = [
'#type' => 'container',
'#title' => $this
->t('Border style group'),
'#title_display' => 'invisible',
'#tree' => FALSE,
'#attributes' => [
'class' => [
'bs-admin-d-lg-flex',
'bs-admin-group-form-item-lg-ml',
],
],
];
$form['border']['style_group']['border_style'] = [
'#type' => 'textarea',
'#default_value' => $config
->get('border_style'),
'#title' => $this
->t('Border style (classes)'),
'#cols' => 60,
'#rows' => 5,
];
for ($i = 0; $i < 4; $i++) {
$form['border']['style_group']['border_' . $directions[$i] . '_style'] = [
'#type' => 'textarea',
'#default_value' => $config
->get('border_' . $directions[$i] . '_style'),
'#title' => $this
->t('Border @direction style (classes)', [
'@direction' => $directions[$i],
]),
'#cols' => 60,
'#rows' => 5,
];
}
// Border width.
$form['border']['width_description'] = [
'#type' => 'item',
'#title' => $this
->t('Border width'),
'#markup' => $this
->t('<p>Enter one value per line, in the format <b>key|label</b> where <em>key</em> is the CSS class name (without the .), and <em>label</em> is the human readable name of the border width. <br /> <b>Note:</b> These options will be reflected on the range slider at the Layout Builder form, so make sure to sort them from lowest to greatest.</p>'),
];
$form['border']['width_group'] = [
'#type' => 'container',
'#title' => $this
->t('Border width group'),
'#title_display' => 'invisible',
'#tree' => FALSE,
'#attributes' => [
'class' => [
'bs-admin-d-lg-flex',
'bs-admin-group-form-item-lg-ml',
],
],
];
$form['border']['width_group']['border_width'] = [
'#type' => 'textarea',
'#default_value' => $config
->get('border_width'),
'#title' => $this
->t('Border width (classes)'),
'#cols' => 60,
'#rows' => 5,
];
for ($i = 0; $i < 4; $i++) {
$form['border']['width_group']['border_' . $directions[$i] . '_width'] = [
'#type' => 'textarea',
'#default_value' => $config
->get('border_' . $directions[$i] . '_width'),
'#title' => $this
->t('Border @direction width (classes)', [
'@direction' => $directions[$i],
]),
'#cols' => 60,
'#rows' => 5,
];
}
// Border colors.
$form['border']['color_description'] = [
'#type' => 'item',
'#title' => $this
->t('Border color'),
'#markup' => $this
->t('<p>Enter one value per line, in the format <b>key|label</b> where <em>key</em> is the CSS class name (without the .), and <em>label</em> is the human readable name of the border color.</p>'),
];
$form['border']['color_group'] = [
'#type' => 'container',
'#title' => $this
->t('Border color group'),
'#title_display' => 'invisible',
'#tree' => FALSE,
'#attributes' => [
'class' => [
'bs-admin-d-lg-flex',
'bs-admin-group-form-item-lg-ml',
],
],
];
$form['border']['color_group']['border_color'] = [
'#type' => 'textarea',
'#default_value' => $config
->get('border_color'),
'#title' => $this
->t('Border colors (classes)'),
'#cols' => 60,
'#rows' => 5,
];
for ($i = 0; $i < 4; $i++) {
$form['border']['color_group']['border_' . $directions[$i] . '_color'] = [
'#type' => 'textarea',
'#default_value' => $config
->get('border_' . $directions[$i] . '_color'),
'#title' => $this
->t('Border @direction colors (classes)', [
'@direction' => $directions[$i],
]),
'#cols' => 60,
'#rows' => 5,
];
}
// Border rounded corners.
$form['border']['rounded_corners_description'] = [
'#type' => 'item',
'#title' => $this
->t('Rounded Corners'),
'#markup' => $this
->t('<p>Enter one value per line, in the format <b>key|label</b> where <em>key</em> is the CSS class name (without the .), and <em>label</em> is the human readable name of the rounded corner. <br /> <b>Note:</b> These options will be reflected on the range slider at the Layout Builder form, so make sure to sort them from lowest to greatest.</p>'),
];
$form['border']['rounded_corners'] = [
'#type' => 'container',
'#title' => $this
->t('Rounded cornerns'),
'#title_display' => 'invisible',
'#tree' => FALSE,
'#attributes' => [
'class' => [
'bs-admin-d-lg-flex',
'bs-admin-group-form-item-lg-ml',
],
],
];
$form['border']['rounded_corners']['rounded_corners'] = [
'#type' => 'textarea',
'#default_value' => $config
->get('rounded_corners'),
'#title' => $this
->t('Rounded corners (classes)'),
'#cols' => 60,
'#rows' => 5,
];
$corners = [
'top_left' => 'Top Left',
'top_right' => 'Top Right',
'bottom_left' => 'Bottom Left',
'bottom_right' => 'Bottom Right',
];
foreach ($corners as $corner_key => $corner_value) {
$form['border']['rounded_corners']['rounded_corner_' . $corner_key] = [
'#type' => 'textarea',
'#default_value' => $config
->get('rounded_corner_' . $corner_key),
'#title' => $this
->t('@corner rounded corner (classes)', [
'@corner' => $corner_value,
]),
'#cols' => 60,
'#rows' => 5,
];
}
return $form;
}
/**
* {@inheritdoc}
*/
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
$this
->config()
->set('border_style', $form_state
->getValue('border_style'))
->set('border_left_style', $form_state
->getValue('border_left_style'))
->set('border_top_style', $form_state
->getValue('border_top_style'))
->set('border_right_style', $form_state
->getValue('border_right_style'))
->set('border_bottom_style', $form_state
->getValue('border_bottom_style'))
->set('border_width', $form_state
->getValue('border_width'))
->set('border_left_width', $form_state
->getValue('border_left_width'))
->set('border_top_width', $form_state
->getValue('border_top_width'))
->set('border_right_width', $form_state
->getValue('border_right_width'))
->set('border_bottom_width', $form_state
->getValue('border_bottom_width'))
->set('border_color', $form_state
->getValue('border_color'))
->set('border_left_color', $form_state
->getValue('border_left_color'))
->set('border_top_color', $form_state
->getValue('border_top_color'))
->set('border_right_color', $form_state
->getValue('border_right_color'))
->set('border_bottom_color', $form_state
->getValue('border_bottom_color'))
->set('rounded_corners', $form_state
->getValue('rounded_corners'))
->set('rounded_corner_top_left', $form_state
->getValue('rounded_corner_top_left'))
->set('rounded_corner_top_right', $form_state
->getValue('rounded_corner_top_right'))
->set('rounded_corner_bottom_left', $form_state
->getValue('rounded_corner_bottom_left'))
->set('rounded_corner_bottom_right', $form_state
->getValue('rounded_corner_bottom_right'))
->save();
}
/**
* {@inheritdoc}
*/
public function buildStyleFormElements(array &$form, FormStateInterface $form_state, $storage) {
$directions = [
'left',
'top',
'right',
'bottom',
];
// This only for frontend no storage needed for this field.
$form['border_type'] = [
'#type' => 'radios',
'#options' => [
'border' => $this
->t('Border') . '<div class="bs_tooltip" data-placement="top" role="tooltip">' . $this
->t('All') . '</div>',
'border_left' => $this
->t('Left') . '<div class="bs_tooltip" data-placement="top" role="tooltip">' . $this
->t('Left') . '</div>',
'border_top' => $this
->t('Top') . '<div class="bs_tooltip" data-placement="top" role="tooltip">' . $this
->t('Top') . '</div>',
'border_right' => $this
->t('Right') . '<div class="bs_tooltip" data-placement="top" role="tooltip">' . $this
->t('Right') . '</div>',
'border_bottom' => $this
->t('Bottom') . '<div class="bs_tooltip" data-placement="top" role="tooltip">' . $this
->t('Bottom') . '</div>',
],
'#title' => $this
->t('Border type'),
'#title_display' => 'invisible',
'#default_value' => 'border',
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs_col--full',
'bs_input-boxes',
'bs_input-boxes--box-model',
'bs_border--type',
],
],
'#disable_live_preview' => TRUE,
];
$form['border_style'] = [
'#type' => 'radios',
'#options' => $this
->getStyleOptions('border_style'),
'#title' => $this
->t('Border style'),
'#default_value' => $storage['border']['border_style']['class'] ?? NULL,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-border-style',
'bs_input-circles',
],
],
'#states' => [
'visible' => [
':input.bs_border--type' => [
'value' => 'border',
],
],
],
];
$default_value = 0;
if (isset($storage['border']['border_width']['class'])) {
$default_value = $this
->getStyleOptionIndexByClass('border_width', $storage['border']['border_width']['class']);
}
$form['border_width'] = [
'#title' => $this
->t('Border width'),
'#type' => 'range',
'#min' => 0,
'#max' => $this
->getStyleOptionsCount('border_width'),
'#step' => 1,
'#default_value' => $default_value,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-border-width',
],
],
'#states' => [
'visible' => [
':input.bs_border--type' => [
'value' => 'border',
],
],
],
];
$form['border_color'] = [
'#type' => 'radios',
'#options' => $this
->getStyleOptions('border_color'),
'#title' => $this
->t('Border color'),
'#default_value' => $storage['border']['border_color']['class'] ?? NULL,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-border-color',
'bs_input-circles',
],
],
'#states' => [
'visible' => [
':input.bs_border--type' => [
'value' => 'border',
],
],
],
];
for ($i = 0; $i < 4; $i++) {
$form['border_' . $directions[$i] . '_style'] = [
'#type' => 'radios',
'#options' => $this
->getStyleOptions('border_' . $directions[$i] . '_style'),
'#title' => $this
->t('Border style'),
'#default_value' => $storage['border']['border_' . $directions[$i] . '_style']['class'] ?? NULL,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-border-style-' . $directions[$i],
'bs_input-circles',
],
],
'#states' => [
'visible' => [
':input.bs_border--type' => [
'value' => 'border_' . $directions[$i],
],
],
],
];
$default_value = 0;
if (isset($storage['border']['border_' . $directions[$i] . '_width']['class'])) {
$default_value = $this
->getStyleOptionIndexByClass('border_' . $directions[$i] . '_width', $storage['border']['border_' . $directions[$i] . '_width']['class']);
}
$form['border_' . $directions[$i] . '_width'] = [
'#type' => 'range',
'#title' => $this
->t('Border @direction width', [
'@direction' => $directions[$i],
]),
'#min' => 0,
'#max' => $this
->getStyleOptionsCount('border_' . $directions[$i] . '_width'),
'#step' => 1,
'#default_value' => $default_value,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-border-width-' . $directions[$i],
],
],
'#states' => [
'visible' => [
':input.bs_border--type' => [
'value' => 'border_' . $directions[$i],
],
],
],
];
$form['border_' . $directions[$i] . '_color'] = [
'#type' => 'radios',
'#options' => $this
->getStyleOptions('border_' . $directions[$i] . '_color'),
'#title' => $this
->t('Border color'),
'#default_value' => $storage['border']['border_' . $directions[$i] . '_color']['class'] ?? NULL,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-border-color-' . $directions[$i],
'bs_input-circles',
],
],
'#states' => [
'visible' => [
':input.bs_border--type' => [
'value' => 'border_' . $directions[$i],
],
],
],
];
}
// Rounded Corners.
$corners = [
'top_left' => 'Top Left',
'top_right' => 'Top Right',
'bottom_left' => 'Bottom Left',
'bottom_right' => 'Bottom Right',
];
$form['rounded_corners_description'] = [
'#type' => 'inline_template',
'#template' => "<strong>{% trans %}Border Radius <small>(Round Corners)</small>{% endtrans %}</strong>",
'#prefix' => '<hr class="bs_divider"/>',
];
$default_value = 0;
if (isset($storage['border']['rounded_corners']['class'])) {
$default_value = $this
->getStyleOptionIndexByClass('rounded_corners', $storage['border']['rounded_corners']['class']);
}
$icon_path = drupal_get_path('module', 'bootstrap_styles') . '/images/';
$form['rounded_corners'] = [
'#type' => 'range',
'#title' => '<span class="sr-only">' . $this
->t('Corners') . '</span><div class="bs_tooltip" data-placement="top" role="tooltip">' . $this
->t('All Corners') . '</div>',
'#min' => 0,
'#max' => $this
->getStyleOptionsCount('rounded_corners'),
'#step' => 1,
'#default_value' => $default_value,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-rounded-corners',
],
],
'#description' => $this
->getSvgIconMarkup($icon_path . 'plugins/border/border-radius.svg'),
];
foreach ($corners as $corner_key => $corner_value) {
$default_value = 0;
if (isset($storage['border']['rounded_corner_' . $corner_key]['class'])) {
$default_value = $this
->getStyleOptionIndexByClass('rounded_corner_' . $corner_key, $storage['border']['rounded_corner_' . $corner_key]['class']);
}
$form['rounded_corner_' . $corner_key] = [
'#type' => 'range',
'#title' => '<span class="sr-only">' . $this
->t('@corner', [
'@corner' => $corner_value,
]) . '</span><div class="bs_tooltip" data-placement="top" role="tooltip">' . $this
->t('@corner', [
'@corner' => $corner_value,
]) . '</div>',
'#min' => 0,
'#max' => $this
->getStyleOptionsCount('rounded_corner_' . $corner_key),
'#step' => 1,
'#default_value' => $default_value,
'#validated' => TRUE,
'#attributes' => [
'class' => [
'bs-field-rounded-corner-' . $corner_key,
],
],
'#description' => $this
->getSvgIconMarkup($icon_path . 'plugins/border/border-radius-' . $corner_key . '.svg'),
];
}
// Pass border width and round corners options to drupal settings.
$border_width_options = [];
$border_width_options['border_width'] = array_keys($this
->getStyleOptions('border_width'));
for ($i = 0; $i < 4; $i++) {
$border_width_options['border_' . $directions[$i] . '_width'] = array_keys($this
->getStyleOptions('border_' . $directions[$i] . '_width'));
}
$rounded_corners_options = [];
$rounded_corners_options['rounded_corners'] = array_keys($this
->getStyleOptions('rounded_corners'));
foreach (array_keys($corners) as $corner_key) {
$rounded_corners_options['rounded_corner_' . $corner_key] = array_keys($this
->getStyleOptions('rounded_corner_' . $corner_key));
}
$border_options = [
'border_width' => $border_width_options,
'rounded_corners' => $rounded_corners_options,
];
$form['#attached']['drupalSettings']['bootstrap_styles']['border'] = $border_options;
// Attach the Layout Builder form style for this plugin.
$form['#attached']['library'][] = 'bootstrap_styles/plugin.border.layout_builder_form';
return $form;
}
/**
* {@inheritdoc}
*/
public function submitStyleFormElements(array $group_elements) {
$directions = [
'left',
'top',
'right',
'bottom',
];
$schema = [
'border' => [
'border_style' => [
'class' => $group_elements['border_style'],
],
'border_width' => [
'class' => $this
->getStyleOptionClassByIndex('border_width', $group_elements['border_width']),
],
'border_color' => [
'class' => $group_elements['border_color'],
],
'rounded_corners' => [
'class' => $this
->getStyleOptionClassByIndex('rounded_corners', $group_elements['rounded_corners']),
],
],
];
for ($i = 0; $i < 4; $i++) {
$schema['border']['border_' . $directions[$i] . '_style']['class'] = $group_elements['border_' . $directions[$i] . '_style'];
$schema['border']['border_' . $directions[$i] . '_width']['class'] = $this
->getStyleOptionClassByIndex('border_' . $directions[$i] . '_width', $group_elements['border_' . $directions[$i] . '_width']);
$schema['border']['border_' . $directions[$i] . '_color']['class'] = $group_elements['border_' . $directions[$i] . '_color'];
}
// Rounded corners.
$corners = [
'top_left' => 'Top Left',
'top_right' => 'Top Right',
'bottom_left' => 'Bottom Left',
'bottom_right' => 'Bottom Right',
];
foreach (array_keys($corners) as $corner_key) {
$schema['border']['rounded_corner_' . $corner_key]['class'] = $this
->getStyleOptionClassByIndex('rounded_corner_' . $corner_key, $group_elements['rounded_corner_' . $corner_key]);
}
return $schema;
}
/**
* {@inheritdoc}
*/
public function build(array $build, array $storage, $theme_wrapper = NULL) {
$classes = [];
$classes[] = $storage['border']['border_style']['class'];
$classes[] = $storage['border']['border_width']['class'];
$classes[] = $storage['border']['border_color']['class'];
$directions = [
'left',
'top',
'right',
'bottom',
];
$corners = [
'top_left' => 'Top Left',
'top_right' => 'Top Right',
'bottom_left' => 'Bottom Left',
'bottom_right' => 'Bottom Right',
];
for ($i = 0; $i < 4; $i++) {
$classes[] = $storage['border']['border_' . $directions[$i] . '_style']['class'];
$classes[] = $storage['border']['border_' . $directions[$i] . '_width']['class'];
$classes[] = $storage['border']['border_' . $directions[$i] . '_color']['class'];
}
// Rounded corners.
if (isset($storage['border']['rounded_corners']['class'])) {
$classes[] = $storage['border']['rounded_corners']['class'];
}
foreach (array_keys($corners) as $corner_key) {
$classes[] = $storage['border']['rounded_corner_' . $corner_key]['class'];
}
// Add the classes to the build.
$build = $this
->addClassesToBuild($build, $classes, $theme_wrapper);
// Attach bs-classes to the build.
$build['#attached']['library'][] = 'bootstrap_styles/plugin.border.build';
return $build;
}
}
Members
Name | Modifiers | Type | Description | Overrides |
---|---|---|---|---|
Border:: |
public | function |
Overrides StylePluginBase:: |
|
Border:: |
public | function |
Overrides StylePluginBase:: |
|
Border:: |
public | function |
Overrides StylePluginBase:: |
|
Border:: |
public | function |
Overrides StylePluginBase:: |
|
Border:: |
public | function |
Overrides StylePluginBase:: |
|
PluginBase:: |
protected | property | Configuration information passed into the plugin. | 1 |
PluginBase:: |
protected | property | The plugin implementation definition. | 1 |
PluginBase:: |
protected | property | The plugin_id. | |
PluginBase:: |
constant | A string which is used to separate base plugin IDs from the derivative ID. | ||
PluginBase:: |
public | function |
Gets the base_plugin_id of the plugin instance. Overrides DerivativeInspectionInterface:: |
|
PluginBase:: |
public | function |
Gets the derivative_id of the plugin instance. Overrides DerivativeInspectionInterface:: |
|
PluginBase:: |
public | function |
Gets the definition of the plugin implementation. Overrides PluginInspectionInterface:: |
2 |
PluginBase:: |
public | function |
Gets the plugin_id of the plugin instance. Overrides PluginInspectionInterface:: |
|
PluginBase:: |
public | function | Determines if the plugin is configurable. | |
StringTranslationTrait:: |
protected | property | The string translation service. | 4 |
StringTranslationTrait:: |
protected | function | Formats a string containing a count of items. | |
StringTranslationTrait:: |
protected | function | Returns the number of plurals supported by a given language. | |
StringTranslationTrait:: |
protected | function | Gets the string translation service. | |
StringTranslationTrait:: |
public | function | Sets the string translation service to use. | 2 |
StringTranslationTrait:: |
protected | function | Translates a string to the current language or to a given language. | |
StylePluginBase:: |
protected | property | The config factory. | |
StylePluginBase:: |
public | function | Helper function to add the classes to the build. | |
StylePluginBase:: |
public | function | ||
StylePluginBase:: |
constant | Config settings. | ||
StylePluginBase:: |
public static | function |
Creates an instance of the plugin. Overrides ContainerFactoryPluginInterface:: |
1 |
StylePluginBase:: |
public | function | Helper function to get the class from the options list. | |
StylePluginBase:: |
public | function | Helper function to get the index of the class at options list. | |
StylePluginBase:: |
public | function | Helper function to get the options of given style name. | |
StylePluginBase:: |
public | function | Helper function to get the options of given style name. | |
StylePluginBase:: |
public | function | Helper function to get SVG Markup. | |
StylePluginBase:: |
public | function |
Return the name of the Styles Group form plugin. Overrides StylePluginInterface:: |
|
StylePluginBase:: |
public | function | ||
StylePluginBase:: |
public | function |
Constructs a StylePluginBase object. Overrides PluginBase:: |
1 |