Вывести дата-атрибуты у родителя и у детей в одно поле

Question

При клике на кнопку '[' открывается дроп меню, где можно выбрать позицию.

HTML


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style/style.css">
    </head>
    
    <body>
    
        <div class="modal-win">
            <div contenteditable="true" class="modal-win-text-field">
            </div>
            <img src="img/Keyboard.svg" alt="Keyboard.svg" height="20" width="20" class="keyboard">
            <div class="keyboardShortcut" contenteditable="false" aria-readonly="true">
                <p class="keyboardShortcut-title">Комбинация клавиш</p>
                <div class="keyboardShortcut-down">
                    <img src="img/btn.svg" alt="["> - выбрать значения поля
                </div>
            </div>
    
            <div class="dropMenu active">
                <ul class="dropMenu-nav"></ul>
            </div>
        </div>
        <textarea name="out-data-final" id="out-data" cols="30" rows="10" disabled></textarea>
        <div id="save-case"></div>
    </body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="js/app.js"></script>
    
    </html>

CSS


    @font-face {
      font-family: PTsans;
      src: url(../fonts/PTSans-Regular.ttf);
    }
    
    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      font-family: PTsans;
    }
    
    a {
      text-decoration: none;
    }
    
    li {
      list-style-type: none;
    }
    
    .modal-win {
      position: relative;
      margin-top: 200px;
      margin-left: 100px;
    }
    
    .modal-win-text-field {
      position: relative;
      padding: 5px 30px 5px 5px;
      background: #FFFFFF;
      border: 1px solid #DBDEDF;
      -webkit-box-shadow: 0px 1px 1px rgba(152, 152, 152, 0.12);
              box-shadow: 0px 1px 1px rgba(152, 152, 152, 0.12);
      border-radius: 3px;
      max-width: 256px;
      min-height: 22px;
      outline: none;
    }
    
    .dropMenu {
      background: white;
      position: absolute;
      top: -207px;
      left: 20px;
      width: 192px;
      height: 192px;
      -webkit-filter: drop-shadow(0px 12px 24px rgba(0, 0, 0, 0.1));
              filter: drop-shadow(0px 12px 24px rgba(0, 0, 0, 0.1));
      border-radius: 4px;
      overflow: auto;
    }
    
    .dropMenu-elem {
      padding: 10px;
      cursor: pointer;
    }
    
    .active {
      visibility: hidden;
    }
    
    .li-elem,
    .backtick {
      background-color: #E5E5E5;
    }
    
    .white {
      background-color: white;
    }
    
    .test {
      display: inline;
    }
    
    .hide {
      display: none;
    }
    
    #out-data {
      width: 999px;
    }
    
    .li-elem {
      padding: 2px 5px;
      border-radius: 5px;
      margin: 1px 0px;
      outline: none;
      border: 0px;
      text-align: center;
    }
    
    .block {
      display: block;
    }
    
    .keyboard {
      position: absolute;
      cursor: pointer;
      padding: 2px;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
      left: 226px;
      top: 5px;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    
    .keyboard-active {
      display: none;
    }
    
    .keyboard:hover {
      -webkit-transform: scale(1.05);
              transform: scale(1.05);
    }
    
    .keyboardShortcut {
      -webkit-animation: keyboard 0.5s;
              animation: keyboard 0.5s;
      position: absolute;
      top: -55px;
      left: 90px;
      display: none;
      padding: 7px;
      width: 185px;
      height: 58px;
      background: #FFFFFF;
      border: 1px solid #C3C3C3;
      -webkit-box-shadow: 0px 11.9408px 23.8816px rgba(0, 0, 0, 0.1);
              box-shadow: 0px 11.9408px 23.8816px rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      font-style: normal;
      font-weight: 400;
      font-size: 13px;
    }
    
    .keyboardShortcut::after {
      content: '';
      position: absolute;
      right: 32px;
      bottom: -10px;
      border: 5px solid transparent;
      border-top: 5px solid white;
    }
    
    .keyboardShortcut-down {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    
    .keyboardShortcut-active {
      display: block;
    }
    
    @-webkit-keyframes keyboard {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes keyboard {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    .dropMenu-elem:hover {
      background-color: #efefef;
    }
    
    .dropMenu::-webkit-scrollbar {
      width: 10px;
      height: 5px;
      background-color: #eaeaea;
    }
    
    .dropMenu::-webkit-scrollbar-thumb {
      background-color: #cdcdcd;
      border-radius: 9em;
    }
    
    .dropMenu::-webkit-scrollbar-thumb:hover {
      background-color: #cbc5c5;
    }
    
    .dropMenu::-webkit-scrollbar-button:vertical:start:decrement,
    .dropMenu::-webkit-scrollbar-button:vertical:end:increment {
      display: none;
    }
    
    .text-field {
      min-height: 22px;
    }
    
    .shadow-inp {
      width: 35%;
      outline: none;
      border: none;
      border-bottom: 1px solid red;
      position: absolute;
    }

JS


    'use strict';
    // $(document).ready(function() {
    const $textInsert = $('.modal-win-text-field');
    const $dropMenu = $('.dropMenu');
    const $dropMenuNav = $('.dropMenu-nav');
    const $outData = $('#out-data');
    const $keyboard = $('.keyboardShortcut');
    const $body = $('body');
    const $keyboardImg = $('.keyboard');
    const $textField = ('<p class="text-field">&nbsp;</p>');
    const $saveBlock = $('#save-case');
    let focusElement = $('');
    
    let masDropMenu = [{
            id: 'lead.id',
            name: 'ID'
        },
        {
            id: 'lead.name',
            name: 'Название сделки',
        },
        {
            id: 'lead.money',
            name: 'Бюджет',
        },
        {
            id: 'lead.status',
            name: 'Статус',
        },
        {
            id: 'lead.responsible',
            name: 'Ответственный',
        },
        {
            id: 'lead.clear',
            name: 'Чёткий',
        },
    ];
    
    $textInsert.append($textField);
    /**
     * @description выполнение поиска из дроп меню
     */
    function liveSearch() {
        $textInsert.on('keyup', function(e) {
            // try {
            let value = searchField[0].value;
            let list = $('.dropMenu-elem');
            if (value != '') {
                list.each(function(par, elem) {
                    if ($(elem).text().toLowerCase().search(value) == -1) {
                        $(elem).addClass('hide');
                    } else {
                        $(elem).removeClass('hide');
                    }
                });
            } else {
                list.each(function(par, elem) {
                    $(elem).removeClass('hide');
                });
            }
            // } catch (error) {}
        });
    }
    
    /**
     * @description Выведение категорий в список
     */
    (function setDataDropMenu() {
        for (let key of masDropMenu) {
            const li = `<li class=\"dropMenu-elem\" data-id={{${key.id}}}>${key['name']}</li>`
            $dropMenuNav.append(li);
        }
    })();
    /**
     * @description Получение размеров инпута
     * @param {string} elem класс\id
     * @returns width размер инпута
     */
    function getWidth(elem) {
        let input = elem;
        let fontSize = getComputedStyle(input);
        let newSpan = document.createElement('span');
        newSpan.style.fontSize = fontSize;
        newSpan.style.margin = '0px';
        newSpan.style.padding = '0px';
        newSpan.innerHTML = input.value || input.getAttribute('placeholder');
        document.body.appendChild(newSpan);
        let width = newSpan.offsetWidth;
        newSpan.remove()
        return width;
    }
    
    /**
     * @description Закртытие модального окна через Esc
     */
    $body.on('keydown', function(param) {
        if (param.key === 'Escape') {
            $('.keyboardShortcut').removeClass('keyboardShortcut-active');
        }
    });
    
    $keyboardImg.on('click', function() {
        if ($($keyboard).hasClass('keyboardShortcut-active')) {
            $($keyboard).removeClass('keyboardShortcut-active');
            $keyboard.slideUp();
        } else {
            $($keyboard).addClass('keyboardShortcut-active');
            $keyboard.slideDown();
        }
    });
    
    $(document).on('click', function(e) {
        if (!$keyboardImg.is(e.target) && !$body.is(e.target) && $body.has(e.target).length === 0) {
            $keyboard.removeClass('keyboardShortcut-active');
        };
        if ($('.shadow-inp').is(":focus") === false) {
            $('.shadow-inp').remove();
            $dropMenu.addClass('active');
        }
    });
    
    //Получение позиции каретки
    $textInsert.on('click mousedown keydown keyup', function(e) {
        focusElement = window.getSelection().focusNode;
        $('.li-elem').css('position', 'unset');
    
    });
    let caretLeftText;
    let caretRightText;
    let letfSpan;
    let RightSpan;
    let focusBlock;
    let searchField;
    $textInsert.on('keydown', function(param) {
        if (param.key === '[') {
            param.preventDefault();
            if ($dropMenu.hasClass('active') === false) {
                return false;
            }
            if ($('.shadow-inp')) {
                $('.shadow-inp').remove();
            }
            if ($keyboard.hasClass('keyboardShortcut-active')) {
                $keyboard.removeClass('keyboardShortcut-active');
            }
            $dropMenu.removeClass('active');
            searchField = $('<input type="text" class="shadow-inp" name="searchField">');
            focusBlock = window.getSelection().focusNode;
            if (param.target === $textInsert[0]) {
                caretLeftText = focusBlock.textContent.slice(0, window.getSelection().anchorOffset);
                caretRightText = focusBlock.textContent.slice(window.getSelection().anchorOffset);
            }
            if (caretLeftText !== '' && caretRightText !== '') {
                let leftSpan = $(`<span data-id="${caretLeftText}">${caretLeftText}</span>`);
                let rightSpan = $(`<span data-id="${caretRightText}">${caretRightText}</span>`);
                focusBlock.before(leftSpan[0]);
                focusBlock.after(rightSpan[0]);
                focusBlock.remove();
                leftSpan[0].after(searchField[0]);
                searchField[0].focus();
                liveSearch();
            } else if (caretRightText === '') {
                focusBlock.parentElement.append(searchField[0]);
                searchField[0].focus();
                liveSearch();
            } else if (caretLeftText === '') {
                focusBlock.parentElement.prepend(searchField[0]);
                searchField[0].focus();
                liveSearch();
            }
            resizeObserver.observe(searchField[0]);
            textInsertPrevHeight = $textInsert.css('height').slice(0, -2);
        }
    
        //Проверка на удаление открытого поиска
        if ($('.shadow-inp')[0] !== undefined && $('.shadow-inp').val().length < 1 && param.key === 'Backspace') {
            $('.shadow-inp').remove();
            $dropMenu.addClass('active');
            $textInsert.focus();
        }
        //Отмена действия энтера
        if (param.key === 'Enter') {
            param.preventDefault();
        }
    });
    
    $textInsert.on('click', function(param) {
        focusElement = window.getSelection().focusNode;
        if ($dropMenu.hasClass('active') === true && $('.shadow-inp')) {
            $('.shadow-inp').remove();
        }
    });
    $dropMenuNav.on('click', '.dropMenu-elem', function(e) {
        const $current = e.currentTarget;
        const $shadowInp = $('.shadow-inp');
        $shadowInp.addClass('li-elem')
        $shadowInp.attr('data-id', $($current).attr('data-id'));
        $shadowInp.attr('disabled', 'true');
        $shadowInp.val($current.textContent);
        let width = getWidth($('.shadow-inp')[0]);
        $('.shadow-inp').css('width', width + 10);
        $('.shadow-inp').after("&nbsp;");
        $('.shadow-inp').before("&nbsp;");
        $shadowInp.removeClass('shadow-inp');
        $dropMenu.addClass('active');
    });
    
    
    $textInsert.trigger('input');
    let str;
    let z;
    //Выведение текста с маской в текстарею
    $textInsert.on('input click mouseenter', (e) => {
        // if ($('.text-field').children().length < 1) {
        $('.text-field').attr('data-id', $('.text-field').text());
        z = $('.text-field').attr('data-id');
        // }
    
    
    
    
        // for (let i = 0; i < $('.text-field').children().length; i++) {
        //     str = $('.text-field').text();
        //     str = str.replace('<input type="text" class="li-elem" name="searchField" style="position: unset; width: 64px;" data-id="', '');
        //     str = str.replace('" disabled="disabled">', '');
        //     str = str.replace(`<input type="text" class="li-elem" name="searchField" style="position: unset; width: 53px;" data-id="`, '');
        //     str = str.replace(`" disabled="disabled">`, '');
        //     str = str.trim();
        // }
    
    
    
        // $('.text-field').children().each(function(_, el) {
        //     z = $('.text-field').attr('data-id') + $(el).attr('data-id');
        //     // console.log(el.nex);
        // });
        $outData.text(z.trim());
    });
    
    
    //Проверка на удаление текста
    $textInsert.on('input', (e) => {
        const text = $(e.currentTarget)[0].innerText;
        if (text.length === 0) {
            $('.modal-win-text-field').html($textField);
        }
    });
    
    //Подгон дроп меню к блоку с кареткой
    let textInsertPrevHeight;
    let positionDropMenu;
    let resizeObserver = new ResizeObserver(function(param) {
        try {
            let sizeSpace = $('.shadow-inp').css('top').slice(0, -2);
            $dropMenu.css('top', `${sizeSpace - 190}px`);
            $('.shadow-inp').css('position', 'sticky');
        } catch (error) {}
    });

Получается след. структура HTML

Вопрос такой, можно ли как - то вывести в одно поле простой текст + data-id блоков .li-elem?

У меня получилось пока что так, но блоки с .li-elem(из data-id) не выводятся

Я пытался реализовать след. способами, но не получилось


    // if ($('.text-field').children().length < 1) {
    $('.text-field').attr('data-id', $('.text-field').text());
    z = $('.text-field').attr('data-id');
    // }
    
    
    
    
    // for (let i = 0; i < $('.text-field').children().length; i++) {
    //     str = $('.text-field').text();
    //     str = str.replace('<input type="text" class="li-elem" name="searchField" style="position: unset; width: 64px;" data-id="', '');
    //     str = str.replace('" disabled="disabled">', '');
    //     str = str.replace(`<input type="text" class="li-elem" name="searchField" style="position: unset; width: 53px;" data-id="`, '');
    //     str = str.replace(`" disabled="disabled">`, '');
    //     str = str.trim();
    // }
    
    
    
    // $('.text-field').children().each(function(_, el) {
    //     z = $('.text-field').attr('data-id') + $(el).attr('data-id');
    //     // console.log(el.nex);
    // });

БЛОГ НА HUSL

Вывести дата-атрибуты у родителя и у детей в одно поле

Ответы (0 шт):