abstract class StyleBase in GridStack 8.2
Provides the base styles.
@todo move all backend/ form stuffs into GridStackAdminStylizer.
Hierarchy
- class \Drupal\Component\Plugin\PluginBase implements DerivativeInspectionInterface, PluginInspectionInterface
- class \Drupal\Core\Plugin\PluginBase uses DependencySerializationTrait, MessengerTrait, StringTranslationTrait
- class \Drupal\gridstack\GridStackPluginBase implements GridStackPluginInterface
- class \Drupal\gridstack\GridStackStylizerPluginBase implements GridStackStylizerPluginInterface
- class \Drupal\gridstack\Plugin\gridstack\stylizer\StyleBase
- class \Drupal\gridstack\GridStackStylizerPluginBase implements GridStackStylizerPluginInterface
- class \Drupal\gridstack\GridStackPluginBase implements GridStackPluginInterface
- class \Drupal\Core\Plugin\PluginBase uses DependencySerializationTrait, MessengerTrait, StringTranslationTrait
Expanded class hierarchy of StyleBase
File
- src/
Plugin/ gridstack/ stylizer/ StyleBase.php, line 14
Namespace
Drupal\gridstack\Plugin\gridstack\stylizerView source
abstract class StyleBase extends GridStackStylizerPluginBase {
/**
* Provides both CSS grid and js-driven attributes configurable via UI.
*
* Can be applied to either $attributes or $content_attributes depending on
* whether using CSS framework, or original js-driven or native Grid layouts.
* Must be applied to $content_attributes for UI draggable to work.
* Do not unset anything here so that nested grids (.row) can still access it.
*
* The CSS BG rule is good at .box or .box__content for native grid, yet
* .box__content for js-driven and CSS framework due to absolute and
* overlapping containers respectively. The CSS framework was done at
* self::modifyNestedItem. For logic consistency, js-driven native grid uses
* .box__content too.
*/
public function attributes(array &$attributes, array $settings) {
if (!empty($settings['attributes']) && is_string($settings['attributes'])) {
$this
->parseAttributes($attributes, $settings['attributes']);
}
foreach ([
'row',
'wrapper',
] as $key) {
if (!empty($settings[$key . '_classes']) && is_string($settings[$key . '_classes'])) {
$this
->parseClasses($attributes, $settings[$key . '_classes']);
}
}
// These options affect layouts, provides the contexts.
$this
->extraAttributes($attributes, $settings);
}
/**
* Returns selectors and sub-selectors with context related to box levels.
*/
public function getSelector(array $settings, $key = '', array $rules = []) {
$sub = '';
$selector = $settings['_selector'];
$index = isset($settings['delta']) ? $settings['delta'] + 1 : 0;
$overlay = $this
->getStyle('overlay', $settings);
$rid = empty($settings['rid']) ? '' : $settings['rid'];
$suffix = str_replace([
'gridstack_',
':root',
], '', $rid);
$suffix = str_replace('_', '-', $suffix);
switch ($settings['_level']) {
case GridStackDefault::LEVEL_ROOT:
$context = GridStackDefault::ROOT;
$suffix = 0;
break;
case GridStackDefault::LEVEL_ROOT_ITEM:
$context = $index;
$selector = $selector . ' .box--' . $index;
$sub = '.box__content';
break;
case GridStackDefault::LEVEL_NESTED:
$context = GridStackDefault::NESTED . $index;
$selector = $selector . ' .gridstack--' . $index;
break;
case GridStackDefault::LEVEL_NESTED_ITEM:
$context = $settings['nested_id'];
$selector = $selector . ' .box--' . $context;
$sub = '.box__content';
break;
default:
break;
}
$main_selector = $sub ? $selector . ' ' . $sub : $selector;
// @todo $bg_selector = $overlay ? $selector . ' .b-gs--' . $suffix . ' .media__overlay' : $main_selector;
$bg_selector = $overlay ? $selector . ' .b-gs .media__overlay' : $main_selector;
$rules = $rules ? array_unique($rules) : [];
$data = [
'index' => $index,
'level' => $settings['_level'],
'context' => $context,
'selector' => $main_selector,
'bg_selector' => $bg_selector,
'overlay' => $overlay,
'rid' => $rid,
'suffix' => $suffix,
'sub' => $sub,
'rules' => $rules,
];
if ($key) {
return isset($data[$key]) ? $data[$key] : FALSE;
}
return $data;
}
/**
* Modifies inline style to not nullify others.
*/
public function inlineStyle(array &$attributes, $css) {
$attributes['style'] = (isset($attributes['style']) ? $attributes['style'] : '') . $css;
}
/**
* Builds inline styles if so required with multiple instances on a page.
*/
public function parseStyles(array $styles, $stringify = FALSE) {
$build = [];
foreach ($styles as $id => $groups) {
foreach ($groups as $rules) {
foreach ($rules as $selector => $rule) {
if ($stringify) {
$build[$id][] = $this
->cssRule($selector, $rule, TRUE);
}
else {
$build[$id][$selector] = $rule;
}
}
}
}
return $build;
}
/**
* Returns an animation.
*/
public function getAnimation(array $settings, $key = 'animation') {
return $this
->getStyle($key, $settings, 'animations');
}
/**
* Returns a style.
*/
public function getStyle($key, array $settings, $group = 'extras') {
$values = empty($settings['styles'][$group]) ? [] : $settings['styles'][$group];
if ($key == 'all') {
return is_array($values) ? array_filter($values) : $values;
}
$output = empty($values[$key]) ? FALSE : $values[$key];
// Chances are optionset is updated, but Layout Builder settings not.
if ($key == 'ete' && $output && isset($settings['region']['_fw'])) {
$output = $settings['region']['_fw'];
}
return $output;
}
/**
* Returns the CSS rule with a selector and sub selector if available.
*/
protected function cssRule($selector, $rule, $stringify = FALSE) {
return $stringify ? $selector . '{' . $rule . '}' : [
$selector => $rule,
];
}
/**
* Checks if it has colors.
*/
protected function hasColors(array $settings = []) {
return isset($settings['styles']['colors']) && array_filter($settings['styles']['colors']);
}
/**
* Returns available colors.
*/
protected function getColors(array $settings = []) {
return $this
->hasColors($settings) ? $settings['styles']['colors'] : [];
}
/**
* Checks for valid color excluding black (#000000) by design.
*/
protected function getColor($key, array $settings = []) {
$colors = $this
->getColors($settings);
return !empty($colors[$key]) && $colors[$key] != '#000000' ? $colors[$key] : FALSE;
}
/**
* Modifies any attributes relevant to use backgrounds.
*/
protected function extraAttributes(array &$attributes, array $settings) {
if ($extras = $this
->getStyle('all', $settings, 'extras')) {
foreach (array_keys($extras) as $key) {
$attributes['class'][] = 'is-gs-' . $key;
}
}
}
/**
* Parses the string attribute: role|navigation,data-something|some value.
*
* No need to whitelist as this already requires admin priviledges.
* With admin privileges, the site is already taken over before playing
* around with attributes. However provides few basic sanitizations to
* satisfy curious playful editors.
*
* @nottodo: Token support.
*/
protected function parseAttributes(array &$attributes, $string = '') {
foreach (explode(',', $string) as $data) {
if (strpos($data, '|') !== FALSE) {
list($key, $value) = array_pad(array_map('trim', explode('|', $data, 2)), 2, NULL);
$key = mb_substr($key, 0, 2) === 'on' ? 'data-' . $key : $key;
$attributes[$key] = Html::cleanCssIdentifier(strip_tags($value));
}
}
}
/**
* Parses the given string classes.
*/
protected function parseClasses(array &$attributes, $string = '') {
$classes = array_map('\\Drupal\\Component\\Utility\\Html::cleanCssIdentifier', explode(' ', $string));
$attributes['class'] = empty($attributes['class']) ? array_unique($classes) : array_unique(array_merge($attributes['class'], $classes));
}
/**
* Returns the variant class.
*/
public function getVariantClass($variant) {
// Unless prefixed, Html::getClass removes number, 03|13 Twain -> 3-twain.
return Html::getClass('is-gs-variant-' . str_replace([
'_',
], '-', $variant));
}
/**
* Return the style element.
*/
protected function styleElement($key, $value, array $settings) {
$context = $settings['_scope'];
$range = in_array($key, GridStackDefault::rangeElements());
$css = str_replace([
'_',
':',
], '-', $key);
$type = $key == 'rgba' ? 'hidden' : 'color';
$type = $range ? 'range' : $type;
$height = strpos($key, 'height') !== FALSE;
$property = $key == 'bg' ? 'background-color' : 'color';
$property = $range || $key == 'rgba' ? $key : $property;
$title = $key == 'alpha' ? 'BG transparency' : $key;
$title = $key == 'opacity' ? 'Image opacity' : $title;
$title = $range ? $title : mb_strtoupper($title);
$selector = $key !== 'text' && in_array($key, GridStackDefault::textElements()) ? $key : '';
$selector = $key == 'opacity' ? '.b-gs' : $selector;
$selector = $height ? '.is-gs-ete' : $selector;
$group_type = $type == 'hidden' ? 'color' : $type;
$group_css = $type;
if (in_array($key, [
'alpha',
'opacity',
])) {
$group_css = 'color';
}
$element = [
'#type' => $type,
'#title' => $this
->t('@title', [
'@title' => $title,
]),
'#default_value' => $range && empty($value) ? 1 : $value,
'#attributes' => [
'class' => [
'form-' . $group_type . '--gs',
'form-' . $group_type . '--gs-' . $css,
'form-' . $group_type . '--gs-' . $context,
'form-' . $group_type . '--gs-' . $group_css,
],
'data-gs-color-picker' => $property,
'data-gs-color-region' => $context,
'data-gs-target-selector' => $selector,
],
];
if ($height) {
$element['#attributes']['class'][] = 'form-range--gs-height';
}
return $element;
}
}
Members
Name![]() |
Modifiers | Type | Description | Overrides |
---|---|---|---|---|
DependencySerializationTrait:: |
protected | property | An array of entity type IDs keyed by the property name of their storages. | |
DependencySerializationTrait:: |
protected | property | An array of service IDs keyed by property name used for serialization. | |
DependencySerializationTrait:: |
public | function | 1 | |
DependencySerializationTrait:: |
public | function | 2 | |
GridStackPluginBase:: |
protected | property | The layout breakpoints. | |
GridStackPluginBase:: |
protected | property | The optionset cell height. | |
GridStackPluginBase:: |
protected | property | The breakpoint columns. | |
GridStackPluginBase:: |
protected | property | The current user. | |
GridStackPluginBase:: |
protected | property | The gridstack manager service. | |
GridStackPluginBase:: |
protected | property | The optionset min-width. | |
GridStackPluginBase:: |
protected | property | The gridstack optionset. | |
GridStackPluginBase:: |
protected | property | The optionset vertical margin. | |
GridStackPluginBase:: |
protected | function | Returns gridstack config shortcut. | |
GridStackPluginBase:: |
public | function |
Gets default configuration for this plugin. Overrides ConfigurableInterface:: |
1 |
GridStackPluginBase:: |
public | function | ||
GridStackPluginBase:: |
public | function |
Gets this plugin's configuration. Overrides ConfigurableInterface:: |
|
GridStackPluginBase:: |
public | function | ||
GridStackPluginBase:: |
public | function | ||
GridStackPluginBase:: |
public | function |
Returns the plugin label. Overrides GridStackPluginInterface:: |
|
GridStackPluginBase:: |
public | function |
Sets the configuration for this plugin instance. Overrides ConfigurableInterface:: |
|
GridStackPluginBase:: |
public | function | Sets the optionset. | |
GridStackPluginBase:: |
public | function | ||
GridStackStylizerPluginBase:: |
protected | property | The blazy entity service to support Media Library at Layout Builder pages. | |
GridStackStylizerPluginBase:: |
public | function | Provides gridstack skins and libraries. | 1 |
GridStackStylizerPluginBase:: |
public static | function |
Creates an instance of the plugin. Overrides GridStackPluginBase:: |
1 |
GridStackStylizerPluginBase:: |
protected | function | Returns unique variant ID. | |
GridStackStylizerPluginBase:: |
public | function | 1 | |
MessengerTrait:: |
protected | property | The messenger. | 29 |
MessengerTrait:: |
public | function | Gets the messenger. | 29 |
MessengerTrait:: |
public | function | Sets the messenger. | |
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:: |
3 |
PluginBase:: |
public | function |
Gets the plugin_id of the plugin instance. Overrides PluginInspectionInterface:: |
|
PluginBase:: |
public | function | Determines if the plugin is configurable. | |
PluginBase:: |
public | function | Constructs a \Drupal\Component\Plugin\PluginBase object. | 92 |
StringTranslationTrait:: |
protected | property | The string translation service. | 1 |
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. | |
StyleBase:: |
public | function | Provides both CSS grid and js-driven attributes configurable via UI. | |
StyleBase:: |
protected | function | Returns the CSS rule with a selector and sub selector if available. | |
StyleBase:: |
protected | function | Modifies any attributes relevant to use backgrounds. | |
StyleBase:: |
public | function | Returns an animation. | |
StyleBase:: |
protected | function | Checks for valid color excluding black (#000000) by design. | |
StyleBase:: |
protected | function | Returns available colors. | |
StyleBase:: |
public | function | Returns selectors and sub-selectors with context related to box levels. | |
StyleBase:: |
public | function | Returns a style. | |
StyleBase:: |
public | function | Returns the variant class. | |
StyleBase:: |
protected | function | Checks if it has colors. | |
StyleBase:: |
public | function | Modifies inline style to not nullify others. | |
StyleBase:: |
protected | function | Parses the string attribute: role|navigation,data-something|some value. | |
StyleBase:: |
protected | function | Parses the given string classes. | |
StyleBase:: |
public | function | Builds inline styles if so required with multiple instances on a page. | |
StyleBase:: |
protected | function | Return the style element. |