1#@!#!123s

: / opt / psa / admin / application / default / views / scripts / partials /
Filename : editable-select-element.phtml
back
<?php
// Copyright 1999-2025. WebPros International GmbH. All rights reserved.

$defaultText = ' (' . $this->defaultText . ')';

?>
<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(); ?>'>
            <?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>