Bootstrap редактируемое имя аккордеона - PullRequest
Новая
       40

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

1 голос
/ 31 мая 2019

Я пытаюсь создать аккордеон 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>

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

1 Ответ

1 голос
/ 31 мая 2019

Вы можете использовать привязку 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>
...