Skip to content
Snippets Groups Projects
Commit 2cba96cf authored by Tirupati Singh's avatar Tirupati Singh
Browse files

Issue #3470486: Added new field widget configuration for displaying similar...

Issue #3470486: Added new field widget configuration for displaying similar design for single value select field.
parent 2dda0645
No related branches found
No related tags found
1 merge request!40Issue #3470486: Added new field widget configuration for displaying similar...
...@@ -5,6 +5,9 @@ field.widget.settings.select2: ...@@ -5,6 +5,9 @@ field.widget.settings.select2:
width: width:
type: string type: string
label: 'Field width' label: 'Field width'
single_item_style:
type: boolean
label: 'Single item style'
field.widget.settings.select2_entity_reference: field.widget.settings.select2_entity_reference:
type: field.widget.settings.select2 type: field.widget.settings.select2
......
.select2-container--default .selection .select2-selection--single.single-item-style{
min-height:32px;
height:auto;
padding:0 5px;
cursor:text;
}
.select2-container--default .selection .select2-selection--single.single-item-style .select2-selection__rendered{
padding:0;
}
.select2-container--default .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]){
background-color:#e4e4e4;
color:#212529;
border:1px solid #aaa;
display:inline-block;
float:none;
border-radius:4px;
cursor:default;
margin-right:5px;
margin-top:5px;
padding:0 5px;
line-height:1.5;
}
.select2-container--default .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear{
float:left;
color:#999;
margin-right:2px;
}
.select2-container--default .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear:hover{
color:#333;
}
.select2-container--default .selection .select2-selection--single.single-item-style .select2-selection__arrow{
top:50%;
transform:translateY(-50%);
}
.select2-container--claro .selection .select2-selection--single.single-item-style,
.select2-container--gin .selection .select2-selection--single.single-item-style,
.select2-container--seven .selection .select2-selection--single.single-item-style{
padding:0 8px;
height:auto;
min-height:32px;
cursor:text;
}
.select2-container--claro .selection .select2-selection--single.single-item-style .select2-selection__rendered,
.select2-container--gin .selection .select2-selection--single.single-item-style .select2-selection__rendered,
.select2-container--seven .selection .select2-selection--single.single-item-style .select2-selection__rendered{
padding:calc(0.75rem - 1px) 0;
}
.select2-container--claro .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]),
.select2-container--gin .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]),
.select2-container--seven .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]){
display:inline-block;
background-color:#e9ecf1;
border:1px solid transparent !important;
border-radius:1.5rem;
font-size:0.889rem;
font-weight:700;
line-height:1rem;
margin-top:0.5rem;
margin-right:0.5rem;
padding:calc(0.5rem - 1px);
}
[dir=rtl] .select2-container--claro .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]),
[dir=rtl] .select2-container--gin .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]),
[dir=rtl] .select2-container--seven .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]){
margin:5px 0 0 0.35rem;
}
.select2-container--claro .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear,
.select2-container--gin .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear,
.select2-container--seven .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear{
float:right;
position:relative;
border-radius:50%;
color:#e9ecf1;
font-size:0;
margin-right:0;
margin-left:0.35rem;
width:1rem;
background-color:#999aa3;
}
.select2-container--claro .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear:before,
.select2-container--gin .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear:before,
.select2-container--seven .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear:before{
content:"";
position:absolute;
width:100%;
height:100%;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23000000' stroke-width='2.25' d='M19,9L9,19'/%3E%3Cpath stroke='%23000000' stroke-width='2.25' d='M19,19L9,9'/%3E%3C/svg%3E%0A");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23000000' stroke-width='2.25' d='M19,9L9,19'/%3E%3Cpath stroke='%23000000' stroke-width='2.25' d='M19,19L9,9'/%3E%3C/svg%3E%0A");
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center center;
mask-position:center center;
background-color:#e9ecf1;
}
.select2-container--claro .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear:hover,
.select2-container--gin .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear:hover,
.select2-container--seven .selection .select2-selection--single.single-item-style .select2-selection__rendered:has([title]) .select2-selection__clear:hover{
background-color:#232429;
}
(function ($, Drupal, once) {
Drupal.behaviors.singleItemStyle = {
attach: function (context) {
$(once('single-style', '.select2-selection.select2-selection--single', context)).each(function () {
const parentDiv = $(this).closest('.select2.select2-container');
const selectDiv = $(parentDiv).parent().find('.select2-widget');
const config = $(selectDiv).data('select2-config');
if (config.single_item_style) {
$(this).addClass('single-item-style');
}
});
}
};
})(jQuery, Drupal, once);
.select2-container--default {
.selection {
.select2-selection--single {
&.single-item-style {
min-height: 32px;
height: auto;
padding: 0 5px;
cursor: text;
.select2-selection__rendered {
padding: 0;
&:has([title]) {
background-color: #e4e4e4;
color: #212529;
border: 1px solid #aaa;
display: inline-block;
float: none;
border-radius: 4px;
cursor: default;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
line-height: 1.5;
.select2-selection__clear {
float: left;
color: #999;
margin-right: 2px;
&:hover {
color: #333;
}
}
}
}
.select2-selection__arrow {
top: 50%;
transform: translateY(-50%);
}
}
}
}
}
.select2-container--claro,
.select2-container--gin,
.select2-container--seven {
.selection {
.select2-selection--single {
&.single-item-style {
padding: 0 8px;
height: auto;
min-height: 32px;
cursor: text;
.select2-selection__rendered {
padding: calc(0.75rem - 1px) 0;
&:has([title]) {
display: inline-block;
background-color: #e9ecf1;
border: 1px solid transparent !important;
border-radius: 1.5rem;
font-size: var(--font-size-s);
font-weight: 700;
line-height: 1rem;
margin-top: 0.5rem;
margin-right: 0.5rem;
padding: calc(0.5rem - 1px);
[dir=rtl] & {
margin: 5px 0 0 0.35rem;
}
.select2-selection__clear {
float: right;
position: relative;
border-radius: 50%;
color: #e9ecf1;
font-size: 0;
margin-right: 0;
margin-left: 0.35rem;
width: 1rem;
background-color: #999aa3;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23000000' stroke-width='2.25' d='M19,9L9,19'/%3E%3Cpath stroke='%23000000' stroke-width='2.25' d='M19,19L9,9'/%3E%3C/svg%3E%0A");
mask-repeat: no-repeat;
mask-position: center center;
background-color: #e9ecf1;
}
&:hover {
background-color: #232429;
}
}
}
}
}
}
}
}
...@@ -20,3 +20,14 @@ select2.min: ...@@ -20,3 +20,14 @@ select2.min:
- core/drupal - core/drupal
- core/jquery - core/jquery
- core/once - core/once
single_item_style:
css:
component:
css/select2.single-style.css: { minified: false }
js:
js/single-style.js: {}
dependencies:
- core/drupal
- core/jquery
- core/once
...@@ -298,6 +298,7 @@ class Select2 extends Select { ...@@ -298,6 +298,7 @@ class Select2 extends Select {
'tokenSeparators' => $element['#autocreate'] ? [','] : [], 'tokenSeparators' => $element['#autocreate'] ? [','] : [],
'selectOnClose' => $element['#autocomplete'], 'selectOnClose' => $element['#autocomplete'],
'width' => '100%', 'width' => '100%',
'single_item_style' => $element['#select2']['single_item_style'],
]; ];
$element['#attributes']['class'][] = 'select2-widget'; $element['#attributes']['class'][] = 'select2-widget';
......
...@@ -28,6 +28,7 @@ class Select2Widget extends OptionsSelectWidget { ...@@ -28,6 +28,7 @@ class Select2Widget extends OptionsSelectWidget {
public static function defaultSettings() { public static function defaultSettings() {
return [ return [
'width' => '100%', 'width' => '100%',
'single_item_style' => FALSE,
] + parent::defaultSettings(); ] + parent::defaultSettings();
} }
...@@ -45,6 +46,12 @@ class Select2Widget extends OptionsSelectWidget { ...@@ -45,6 +46,12 @@ class Select2Widget extends OptionsSelectWidget {
'#size' => '12', '#size' => '12',
'#pattern' => "([0-9]*\.[0-9]+|[0-9]+)(cm|mm|in|px|pt|pc|em|ex|ch|rem|vm|vh|vmin|vmax|%)|element|computedstyle|style|resolve|auto|initial|inherit", '#pattern' => "([0-9]*\.[0-9]+|[0-9]+)(cm|mm|in|px|pt|pc|em|ex|ch|rem|vm|vh|vmin|vmax|%)|element|computedstyle|style|resolve|auto|initial|inherit",
]; ];
$element['single_item_style'] = [
'#type' => 'checkbox',
'#title' => $this->t('Single item style'),
'#default_value' => $this->getSetting('single_item_style'),
'#description' => $this->t("In case of single value allowed, choose whether selected list item will be displayed as multiple design or normal design."),
];
return $element; return $element;
} }
...@@ -54,6 +61,7 @@ class Select2Widget extends OptionsSelectWidget { ...@@ -54,6 +61,7 @@ class Select2Widget extends OptionsSelectWidget {
public function settingsSummary() { public function settingsSummary() {
$summary = []; $summary = [];
$summary[] = $this->t('Field width: @width', ['@width' => $this->getSetting('width')]); $summary[] = $this->t('Field width: @width', ['@width' => $this->getSetting('width')]);
$summary[] = $this->t('Single item style: @single_style', ['@single_style' => $this->getSetting('single_item_style') ? $this->t('On') : $this->t('Off')]);
return $summary; return $summary;
} }
...@@ -66,8 +74,14 @@ class Select2Widget extends OptionsSelectWidget { ...@@ -66,8 +74,14 @@ class Select2Widget extends OptionsSelectWidget {
$element['#cardinality'] = $this->fieldDefinition->getFieldStorageDefinition()->getCardinality(); $element['#cardinality'] = $this->fieldDefinition->getFieldStorageDefinition()->getCardinality();
$element['#select2'] = [ $element['#select2'] = [
'width' => $this->getSetting('width'), 'width' => $this->getSetting('width'),
'single_item_style' => $this->getSetting('single_item_style'),
]; ];
// Attach the library based on the single_item_style setting.
if ($this->getSetting('single_item_style')) {
$element['#attached']['library'][] = 'select2/single_item_style';
}
return $element; return $element;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment