126 lines
4.7 KiB
PHTML
126 lines
4.7 KiB
PHTML
<?php
|
|
// Copyright 1999-2025. WebPros International GmbH. All rights reserved.
|
|
|
|
$defaultText = ' (' . $this->defaultText . ')';
|
|
$ariaLabel = $this->lmsg('components.elements.editable-select.input-ariaLabel');
|
|
|
|
?>
|
|
<div class='form-row'>
|
|
<div class='field-name'>
|
|
<?php echo $this->element->getLabel(); ?>
|
|
</div>
|
|
<div class='field-value'>
|
|
<div class='combobox'><!-- + combobox-open + dropup -->
|
|
<input
|
|
type='text' class='combobox-input input-text <?php if ($this->element->getAttrib('isLongLength')): ?>f-big-size<?php endif; ?>'
|
|
<?php echo $this->element->getAttrib('disabled'); ?>
|
|
value='<?php echo $this->value; ?>'
|
|
id='<?php echo $this->element->getId(); ?>'
|
|
aria-label="<?= $ariaLabel ?>">
|
|
<?php echo $this->defaultElementContent; ?>
|
|
<?php echo $this->realElementContent; ?>
|
|
<?php echo $this->options; ?>
|
|
<input type='hidden' value='<?= $defaultText ?>' id='<?= $this->element->getId() ?>-default-text'/>
|
|
</div>
|
|
<?php echo $this->restoreToDefaultElementContent; ?>
|
|
<?php echo $this->description; ?>
|
|
<span class='field-errors'></span>
|
|
</div>
|
|
|
|
</div>
|
|
<script type='text/javascript'>
|
|
//<![CDATA[
|
|
(function () {
|
|
var mainElement = document.getElementById(<?php echo $this->jsEscape($this->element->getId()); ?>);
|
|
var defaultElement = document.getElementById(mainElement.id + '-default');
|
|
var resetElement = document.getElementById(mainElement.id + '-reset-to-default');
|
|
var realValueElement = document.getElementById(mainElement.id + '-real');
|
|
var defaultText = '<?=$defaultText?>';
|
|
|
|
if (!mainElement || !defaultElement || !resetElement || !realValueElement) {
|
|
return;
|
|
}
|
|
|
|
var cleanupTextValue = function () {
|
|
if (-1 < this.value.indexOf(defaultText)) {
|
|
this.value = this.value.replace(defaultText, '');
|
|
}
|
|
};
|
|
|
|
var tempValue = mainElement.value.replace(defaultText, '');
|
|
if (tempValue === defaultElement.value) {
|
|
resetElement.style.display = 'none';
|
|
}
|
|
|
|
resetElement.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
if (mainElement.disabled) {
|
|
return;
|
|
}
|
|
mainElement.value = defaultElement.value;
|
|
realValueElement.value = defaultElement.value;
|
|
if (mainElement.value == defaultElement.value && '' != defaultElement.value) {
|
|
mainElement.value = mainElement.value + defaultText;
|
|
}
|
|
resetElement.style.display = 'none';
|
|
});
|
|
|
|
mainElement.addEventListener('change', function (event) {
|
|
realValueElement.value = this.value;
|
|
cleanupTextValue.apply(realValueElement);
|
|
if (realValueElement.value === defaultElement.value) {
|
|
resetElement.style.display = 'none';
|
|
} else {
|
|
resetElement.style.display = '';
|
|
}
|
|
});
|
|
|
|
var editableSelectButton = document.getElementById(mainElement.id + '-button');
|
|
if (editableSelectButton) {
|
|
var optionList = editableSelectButton.parentNode.nextElementSibling;
|
|
optionList.querySelectorAll('li').forEach(function (item) {
|
|
item.addEventListener('mousedown', function (event) {
|
|
var comboBox = this.parentNode.parentNode;
|
|
comboBox.classList.toggle('combobox-open');
|
|
realValueElement.value = this.dataset.value;
|
|
mainElement.value = realValueElement.value;
|
|
});
|
|
});
|
|
|
|
editableSelectButton.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (mainElement.disabled) {
|
|
return;
|
|
}
|
|
var combobox = this.parentNode.parentNode;
|
|
document.querySelectorAll('.combobox').forEach(function (item) {
|
|
if (combobox === item) {
|
|
combobox.classList.toggle('combobox-open');
|
|
mainElement.focus();
|
|
} else {
|
|
item.classList.remove('combobox-open');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
mainElement.addEventListener('focusin', cleanupTextValue);
|
|
mainElement.addEventListener('focus', cleanupTextValue);
|
|
|
|
mainElement.addEventListener('blur', function (event){
|
|
if (editableSelectButton) {
|
|
optionList.parentNode.classList.remove('combobox-open');
|
|
|
|
}
|
|
if (this.value === defaultElement.value) {
|
|
this.value = this.value + defaultText;
|
|
resetElement.style.display = 'none';
|
|
} else if (this.value != defaultElement.value + defaultText) {
|
|
resetElement.style.display = '';
|
|
}
|
|
});
|
|
})();
|
|
//]]>
|
|
</script>
|