gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixes for change propagation (conflict between knockout and jquery UI autocomplete)

Browse Source
This commit is contained in:
azivner 2018-02-04 23:16:45 -05:00
parent c84e15c9be
commit 3d2dc8e699
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/public/javascripts/dialogs/attributes.js
View File

@ -2,6 +2,7 @@
const attributesDialog = (function() { const attributesDialog = (function() {
const dialogEl = $("#attributes-dialog"); const dialogEl = $("#attributes-dialog");
const saveAttributesButton = $("#save-attributes-button");
const attributesModel = new AttributesModel(); const attributesModel = new AttributesModel();
let attributeNames = []; let attributeNames = [];
@ -35,6 +36,11 @@ const attributesDialog = (function() {
} }
this.save = async function() { this.save = async function() {
// we need to defocus from input (in case of enter-triggered save) because value is updated
// on blur event (because of conflict with jQuery UI Autocomplete). Without this, input would
// stay in focus, blur wouldn't be triggered and change wouldn't be updated in the viewmodel.
saveAttributesButton.focus();
if (!isValid()) { if (!isValid()) {
alert("Please fix all validation errors and try saving again."); alert("Please fix all validation errors and try saving again.");
return; return;
@ -143,6 +149,8 @@ const attributesDialog = (function() {
$(this).autocomplete("search", $(this).val()); $(this).autocomplete("search", $(this).val());
}); });
$(document).on('blur', '.attribute-name', function (e) { console.log("blur!"); });
$(document).on('focus', '.attribute-value', async function (e) { $(document).on('focus', '.attribute-value', async function (e) {
if (!$(this).hasClass("ui-autocomplete-input")) { if (!$(this).hasClass("ui-autocomplete-input")) {
const attributeName = $(this).parent().parent().find('.attribute-name').val(); const attributeName = $(this).parent().parent().find('.attribute-name').val();

7
src/views/index.ejs
View File

@ -389,7 +389,7 @@
<div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;"> <div id="attributes-dialog" title="Note attributes" style="display: none; padding: 20px;">
<form data-bind="submit: save"> <form data-bind="submit: save">
<div style="text-align: center"> <div style="text-align: center">
<button class="btn-primary btn-large" type="submit">Save</button> <button class="btn-primary btn-large" id="save-attributes-button" type="submit">Save</button>
</div> </div>
<div style="height: 97%; overflow: auto"> <div style="height: 97%; overflow: auto">
@ -405,13 +405,14 @@
<tr> <tr>
<td data-bind="text: attributeId"></td> <td data-bind="text: attributeId"></td>
<td> <td>
<input type="text" class="attribute-name" data-bind="value: name, event: { change: $parent.attributeChanged }"/> <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
<input type="text" class="attribute-name" data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"/>
<div style="color: red" data-bind="if: $parent.isNotUnique($index())">Attribute name must be unique per note.</div> <div style="color: red" data-bind="if: $parent.isNotUnique($index())">Attribute name must be unique per note.</div>
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div> <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
</td> </td>
<td> <td>
<input type="text" class="attribute-value" data-bind="value: value, event: { change: $parent.attributeChanged }" style="width: 300px"/> <input type="text" class="attribute-value" data-bind="value: value, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>
</td> </td>
</tr> </tr>
</tbody> </tbody>