Редактируемое имя аккордеона Bootstrap

Я пытаюсь создать аккордеон Bootstrap, используя Knockout foreach с редактируемым заголовком. При двойном щелчке по имени аккордеона имя должно стать полем ввода (вероятно, не лучшая идея для этого), которое должно сохранять изменения при вводе щелчка или щелчке за пределами этой области (изменение фокуса). Моя проблема в том, что когда пользователь дважды щелкает имя, чтобы отредактировать его, панель расширяется и сворачивается, а некоторым трудно редактировать.

<div class="col-lg-12 panel m-t-5 panel-group" id="mAccordion">
    <div class="panel panel-default" data-bind="foreach:{ data: selectedItemM, as: 'mod'}">
        <div class="panel-heading ui-sortable-handle" style="border-color:black; background-color:black; margin-bottom: 2px" data-bind="visible:!IsDeleted()">
            <i class="fas fa-trash-alt pull-right" style="color:red; cursor:pointer" data-bind="event:{'click':$root.deleteM}"></i>
            <a class="accordion-toggle accordion-inner" style="color:#fff; text-decoration:none;cursor:pointer;" data-bind="attr:{href:'#mPanelBody_'+Id}" data-toggle="collapse" data-parent="#modAccordion">
                <h4 class="panel-title" data-bind="attr:{id:'header_'+Id}, text: Name, event:{'dblclick':$root.editM}" style="color:white;cursor: pointer; width:30%"></h4>
                <input type="text" class="panel-title" data-bind="attr:{id:'input_'+Id}, textInput: Name,valueUpdate: 'afterkeydown', event:{keypress:$root.renameM}" style="color:white;display:none; background-color:black; width:30%;" />
            </a>
        </div>
        <div class="panel-collapse accordion-sub collapse" data-bind="attr:{id:'mPanelBody_'+Id}, visible:!IsDeleted()"></div>
    </div>
</div>

Можно сделать так, чтобы имя аккордеона редактировалось двойным щелчком (или простым щелчком), ничего не делая с аккордеоном (разворачивая или сворачивая), и разворачивать или сворачивать его, просто щелкнув за пределами области имени, на пустом месте. из заголовка?


bootstrap-4 knockout.js bootstrap-accordion
person Dana    schedule 31.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать привязку hasFocus для обнаружения и установки фокуса на входе. Вы можете использовать event.stopPropagation в своих обработчиках кликов, чтобы предотвратить всплытие события клика до целевого клика переключателя аккориона. Вот пример, который показывает:

  • Щелчок по тексту (зеленая рамка) в заголовке запускает его редактирование.
  • Удаление фокуса на вводе редактирования возвращает заголовок
  • Щелчок за пределами текста в заголовке (синяя рамка) переключает аккордеон.

const expanded = ko.observable(false);

const focus = ko.observable(false);
const title = ko.observable("Heading");


const startEdit = function(data, event) {
  focus(true);
  event.stopPropagation();
};

const toggle = function() {
  if (!focus()) {
    expanded(!expanded());
  }
};

ko.applyBindings({ expanded, toggle, focus, title, startEdit });
h2 {
 border: 1px solid blue;
 padding: .5rem;
}

span {
 border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<h2 data-bind="click: toggle">
  <span data-bind="text: title, click: startEdit, visible: !focus()"></span>
  <input type="text" data-bind="textInput: title, visible: focus, hasFocus: focus, clickBubble: false">
</h2>

<div data-bind="visible: expanded">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

person user3297291    schedule 31.05.2019