"+b(a)+"
"}return{empty:a.empty&&k.templatify(a.empty),header:a.header&&k.templatify(a.header),footer:a.footer&&k.templatify(a.footer),suggestion:a.suggestion||c}}function g(a){return/^[_a-zA-Z0-9-]+$/.test(a)}var h="aaDataset",i="aaValue",j="aaDatum",k=c(4),l=c(2),m=c(18),n=c(19),o=c(8);d.extractDatasetName=function(a){return l.element(a).data(h)},d.extractValue=function(a){return l.element(a).data(i)},d.extractDatum=function(a){var b=l.element(a).data(j);return"string"==typeof b&&(b=JSON.parse(b)),b},k.mixin(d.prototype,o,{_render:function(a,b){function c(){var b=[].slice.call(arguments,0);return b=[{query:a,isEmpty:!0}].concat(b),n.templates.empty.apply(this,b)}function d(){function a(a){var b,c=m.suggestion.replace("%PREFIX%",f.cssClasses.prefix).replace("%SUGGESTION%",f.cssClasses.suggestion);return b=l.element(c).attr({role:"option",id:["option",Math.floor(1e8*Math.random())].join("-")}).append(n.templates.suggestion.apply(this,[a].concat(e))),b.data(h,n.name),b.data(i,n.displayFn(a)||void 0),b.data(j,JSON.stringify(a)),b.children().each(function(){l.element(this).css(f.css.suggestionChild)}),b}var c,d,e=[].slice.call(arguments,0),f=this,g=m.suggestions.replace("%PREFIX%",this.cssClasses.prefix).replace("%SUGGESTIONS%",this.cssClasses.suggestions);return c=l.element(g).css(this.css.suggestions),d=k.map(b,a),c.append.apply(c,d),c}function e(){var b=[].slice.call(arguments,0);return b=[{query:a,isEmpty:!g}].concat(b),n.templates.header.apply(this,b)}function f(){var b=[].slice.call(arguments,0);return b=[{query:a,isEmpty:!g}].concat(b),n.templates.footer.apply(this,b)}if(this.$el){var g,n=this,o=[].slice.call(arguments,2);if(this.$el.empty(),g=b&&b.length,this._isEmpty=!g,!g&&this.templates.empty)this.$el.html(c.apply(this,o)).prepend(n.templates.header?e.apply(this,o):null).append(n.templates.footer?f.apply(this,o):null);else if(g)this.$el.html(d.apply(this,o)).prepend(n.templates.header?e.apply(this,o):null).append(n.templates.footer?f.apply(this,o):null);else if(b&&!Array.isArray(b))throw new TypeError("suggestions must be an array");this.$menu&&this.$menu.addClass(this.cssClasses.prefix+(g?"with":"without")+"-"+this.name).removeClass(this.cssClasses.prefix+(g?"without":"with")+"-"+this.name),this.trigger("rendered",a)}},getRoot:function(){return this.$el},update:function(a){function b(b){if(!this.canceled&&a===this.query){ -var c=[].slice.call(arguments,1);this.cacheSuggestions(a,b,c),this._render.apply(this,[a,b].concat(c))}}if(this.query=a,this.canceled=!1,this.shouldFetchFromCache(a))b.apply(this,[this.cachedSuggestions].concat(this.cachedRenderExtraArgs));else{var c=this,d=function(){c.canceled||c.source(a,b.bind(c))};if(this.debounce){var e=function(){c.debounceTimeout=null,d()};clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(e,this.debounce)}else d()}},cacheSuggestions:function(a,b,c){this.cachedQuery=a,this.cachedSuggestions=b,this.cachedRenderExtraArgs=c},shouldFetchFromCache:function(a){return this.cache&&this.cachedQuery===a&&this.cachedSuggestions&&this.cachedSuggestions.length},clearCachedSuggestions:function(){delete this.cachedQuery,delete this.cachedSuggestions,delete this.cachedRenderExtraArgs},cancel:function(){this.canceled=!0},clear:function(){this.$el&&(this.cancel(),this.$el.empty(),this.trigger("rendered",""))},isEmpty:function(){return this._isEmpty},destroy:function(){this.clearCachedSuggestions(),this.$el=null}}),a.exports=d},function(a,b){"use strict";a.exports={wrapper:'',dropdown:'',dataset:'',suggestions:'',suggestion:''}},function(a,b,c){"use strict";var d=c(4),e={wrapper:{position:"relative",display:"inline-block"},hint:{position:"absolute",top:"0",left:"0",borderColor:"transparent",boxShadow:"none",opacity:"1"},input:{position:"relative",verticalAlign:"top",backgroundColor:"transparent"},inputWithNoHint:{position:"relative",verticalAlign:"top"},dropdown:{position:"absolute",top:"100%",left:"0",zIndex:"100",display:"none"},suggestions:{display:"block"},suggestion:{whiteSpace:"nowrap",cursor:"pointer"},suggestionChild:{whiteSpace:"normal"},ltr:{left:"0",right:"auto"},rtl:{left:"auto",right:"0"},defaultClasses:{root:"algolia-autocomplete",prefix:"aa",noPrefix:!1,dropdownMenu:"dropdown-menu",input:"input",hint:"hint",suggestions:"suggestions",suggestion:"suggestion",cursor:"cursor",dataset:"dataset",empty:"empty"},appendTo:{wrapper:{position:"absolute",zIndex:"100",display:"none"},input:{},inputWithNoHint:{},dropdown:{display:"block"}}};d.isMsie()&&d.mixin(e.input,{backgroundImage:"url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"}),d.isMsie()&&d.isMsie()<=7&&d.mixin(e.input,{marginTop:"-1px"}),a.exports=e},function(a,b,c){"use strict";a.exports={hits:c(21),popularIn:c(24)}},function(a,b,c){"use strict";var d=c(4),e=c(22),f=c(23);a.exports=function(a,b){function c(c,e){a.search(c,b,function(a,b){if(a)return void d.error(a.message);e(b.hits,b)})}var g=f(a.as._ua);return g&&g[0]>=3&&g[1]>20&&(b=b||{},b.additionalUA="autocomplete.js "+e),c}},function(a,b){a.exports="0.37.1"},function(a,b){"use strict";a.exports=function(a){var b=a.match(/Algolia for JavaScript \((\d+\.)(\d+\.)(\d+)\)/)||a.match(/Algolia for vanilla JavaScript (\d+\.)(\d+\.)(\d+)/);if(b)return[b[1],b[2],b[3]]}},function(a,b,c){"use strict";var d=c(4),e=c(22),f=c(23);a.exports=function(a,b,c,g){function h(h,i){a.search(h,b,function(a,h){if(a)return void d.error(a.message);if(h.hits.length>0){var l=h.hits[0],m=d.mixin({hitsPerPage:0},c);delete m.source,delete m.index;var n=f(k.as._ua);return n&&n[0]>=3&&n[1]>20&&(b.additionalUA="autocomplete.js "+e),void k.search(j(l),m,function(a,b){if(a)return void d.error(a.message);var c=[];if(g.includeAll){var e=g.allTitle||"All departments";c.push(d.mixin({facet:{value:e,count:b.nbHits}},d.cloneDeep(l)))}d.each(b.facets,function(a,b){d.each(a,function(a,e){c.push(d.mixin({facet:{facet:b,value:e,count:a}},d.cloneDeep(l)))})});for(var f=1;f element next to the search input
- // this is important because the search input value is replaced with the suggestion note's title
- .autocomplete("val", $autoComplete.next().text())
- .trigger('focus')
- .trigger('select');
+ ac.setIsOpen(true);
+ ac.ext.focus();
+ ac.ext.select();
}
lastOpenedTs = Date.now();
diff --git a/src/public/app/services/note_autocomplete.js b/src/public/app/services/note_autocomplete.js
index e05d9ad6d..fdbe3a604 100644
--- a/src/public/app/services/note_autocomplete.js
+++ b/src/public/app/services/note_autocomplete.js
@@ -8,7 +8,75 @@ import froca from "./froca.js";
// this key needs to have this value so it's hit by the tooltip
const SELECTED_NOTE_PATH_KEY = "data-note-path";
-const SELECTED_EXTERNAL_LINK_KEY = "data-external-link";
+const acMixin = {
+ selectedNotePath: "",
+ selectedExternalLink: "",
+ $el: "",
+
+ focus() {
+ this.$el.find('.aa-Input').focus();
+ },
+
+ select() {
+ this.$el.find('.aa-Input').select();
+ },
+
+ getQuery() {
+ return this?.lastState.query;
+ },
+
+ getSelectedNotePath() {
+ if (!this.getQuery()) {
+ return "";
+ } else {
+ return this.selectedNotePath;
+ }
+ },
+
+ getSelectedNoteId() {
+ const notePath = this.getSelectedNotePath();
+ const chunks = notePath.split('/');
+
+ return chunks.length >= 1 ? chunks[chunks.length - 1] : null;
+ },
+
+ setSelectedNotePath(notePath) {
+ notePath = notePath || "";
+
+ this.selectedNotePath = notePath;
+
+ $(this)
+ .closest(".input-group")
+ .find(".go-to-selected-note-button")
+ .toggleClass("disabled", !notePath.trim())
+ .attr(SELECTED_NOTE_PATH_KEY, notePath); // we also set attr here so tooltip can be displayed
+ },
+
+ getSelectedExternalLink() {
+ if (!$(this).val().trim()) {
+ return "";
+ } else {
+ return this.selectedExternalLink;
+ }
+ },
+
+ setSelectedExternalLink(externalLink) {
+ this.selectedExternalLink = externalLink;
+
+ $(this)
+ .closest(".input-group")
+ .find(".go-to-selected-note-button")
+ .toggleClass("disabled", true);
+ },
+
+ async setNote(noteId) {
+ const note = noteId ? await froca.getNote(noteId, true) : null;
+
+ $(this)
+ .val(note ? note.title : "")
+ .setSelectedNotePath(noteId);
+ }
+}
async function autocompleteSourceForCKEditor(queryText) {
return await new Promise((res, rej) => {
@@ -30,7 +98,7 @@ async function autocompleteSourceForCKEditor(queryText) {
});
}
-async function autocompleteSource(term, cb, options = {}) {
+async function autocompleteSource(term, options = {}) {
const activeNoteId = appContext.tabManager.getActiveContextNoteId();
let results = await server.get('autocomplete'
@@ -58,206 +126,176 @@ async function autocompleteSource(term, cb, options = {}) {
].concat(results);
}
- cb(results);
+ return results;
}
-function clearText($el) {
+function clearText(acObj) {
if (utils.isMobile()) {
return;
}
- $el.setSelectedNotePath("");
- $el.autocomplete("val", "").trigger('change');
+ acObj.ext.setSelectedNotePath("");
+ acObj.setQuery("");
}
-function setText($el, text) {
+function setText(ac, text) {
if (utils.isMobile()) {
return;
}
- $el.setSelectedNotePath("");
- $el
- .autocomplete("val", text.trim())
- .autocomplete("open");
+ ac.ext.setSelectedNotePath("");
+ ac.setQuery(text.trim());
+ ac.setIsOpen(true);
}
-function showRecentNotes($el) {
+function showRecentNotes(ac) {
if (utils.isMobile()) {
return;
}
- $el.setSelectedNotePath("");
- $el.autocomplete("val", "");
- $el.trigger('focus');
+ ac.ext.$el.find(".aa-Input").val("").change();
+
+ ac.setQuery("");
+ ac.setIsOpen(true);
+ ac.update();
+ ac.ext.setSelectedNotePath("");
+ ac.ext.focus();
+
+
+ console.log("BBB");
}
-function initNoteAutocomplete($el, options) {
- if ($el.hasClass("note-autocomplete-input") || utils.isMobile()) {
+function initNoteAutocomplete($container, options) {
+ if ($container.hasClass("note-autocomplete-container") || utils.isMobile()) {
// clear any event listener added in previous invocation of this function
- $el.off('autocomplete:noteselected');
+ $container.off('autocomplete:noteselected');
- return $el;
+ return $container.prop("acObj");
}
options = options || {};
- $el.addClass("note-autocomplete-input");
+ const $el = $('');
+ const $sideButtons = $('');
- const $clearTextButton = $("")
- .addClass("input-group-text input-clearer-button bx bx-x")
- .prop("title", "Clear text field");
+ $container.addClass("note-autocomplete-container")
+ .append($el)
+ .append($sideButtons);
const $showRecentNotesButton = $("")
- .addClass("input-group-text show-recent-notes-button bx bx-time")
+ .addClass("show-recent-notes-button bx bx-time")
.prop("title", "Show recent notes");
const $goToSelectedNoteButton = $("")
- .addClass("input-group-text go-to-selected-note-button bx bx-arrow-to-right")
+ .addClass("go-to-selected-note-button bx bx-arrow-to-right")
.attr("data-action", "note");
- const $sideButtons = $("")
- .addClass("input-group-append")
- .append($clearTextButton)
- .append($showRecentNotesButton);
+ $sideButtons.append($showRecentNotesButton);
if (!options.hideGoToSelectedNoteButton) {
$sideButtons.append($goToSelectedNoteButton);
}
- $el.after($sideButtons);
-
- $clearTextButton.on('click', () => clearText($el));
-
$showRecentNotesButton.on('click', e => {
- showRecentNotes($el);
+ showRecentNotes(acObj);
// this will cause the click not give focus to the "show recent notes" button
// this is important because otherwise input will lose focus immediatelly and not show the results
return false;
});
- $el.autocomplete({
- appendTo: document.querySelector('body'),
- hint: false,
- autoselect: true,
+ const { autocomplete } = window['@algolia/autocomplete-js'];
+
+ let acObj = autocomplete({
+ container: $el[0],
+ defaultActiveItemId: 0,
openOnFocus: true,
- minLength: 0,
- tabAutocomplete: false
- }, [
- {
- source: (term, cb) => autocompleteSource(term, cb, options),
- displayKey: 'notePathTitle',
- templates: {
- suggestion: suggestion => suggestion.highlightedNotePathTitle
- },
- // we can't cache identical searches because notes can be created / renamed, new recent notes can be added
- cache: false
+ tabAutocomplete: false,
+ placeholder: options.placeholder,
+ onStateChange({ state }) {
+ acObj.lastState = state;
+ },
+ async getSources({ query }) {
+ const items = await autocompleteSource(query, options);
+
+ return [
+ {
+ getItems() {
+ return items;
+ },
+ onSelect({item}) {
+ acObj.ext.$el.trigger("autocomplete:selected", [item]);
+ },
+ displayKey: 'notePathTitle',
+ templates: {
+ item({ item, createElement }) {
+ return createElement('div', {
+ dangerouslySetInnerHTML: {
+ __html: item.highlightedNotePathTitle,
+ },
+ });
+ }
+ },
+ // we can't cache identical searches because notes can be created / renamed, new recent notes can be added
+ cache: false
+ }
+ ]
}
- ]);
+ });
- $el.on('autocomplete:selected', async (event, suggestion) => {
- if (suggestion.action === 'external-link') {
- $el.setSelectedNotePath(null);
- $el.setSelectedExternalLink(suggestion.externalLink);
+ acObj.ext = {...acMixin, $el, $container };
- $el.autocomplete("val", suggestion.externalLink);
+ $container.prop("acObj", acObj);
- $el.autocomplete("close");
+ $container.on('autocomplete:selected', async (event, item) => {
+ if (item.action === 'external-link') {
+ acObj.ext.setSelectedNotePath(null);
+ acObj.ext.setSelectedExternalLink(item.externalLink);
- $el.trigger('autocomplete:externallinkselected', [suggestion]);
+ acObj.setQuery(item.externalLink);
+
+ $container.autocomplete("close");
+
+ $container.trigger('autocomplete:externallinkselected', [item]);
return;
}
- if (suggestion.action === 'create-note') {
- const {note} = await noteCreateService.createNote(suggestion.parentNoteId, {
- title: suggestion.noteTitle,
+ if (item.action === 'create-note') {
+ const {note} = await noteCreateService.createNote(item.parentNoteId, {
+ title: item.noteTitle,
activate: false
});
- suggestion.notePath = treeService.getSomeNotePath(note);
+ item.notePath = treeService.getSomeNotePath(note);
}
- $el.setSelectedNotePath(suggestion.notePath);
- $el.setSelectedExternalLink(null);
+ acObj.ext.setSelectedNotePath(item.notePath);
+ acObj.ext.setSelectedExternalLink(null);
- $el.autocomplete("val", suggestion.noteTitle);
+ acObj.setQuery(item.noteTitle);
- $el.autocomplete("close");
+ acObj.setIsOpen(false);
- $el.trigger('autocomplete:noteselected', [suggestion]);
+ $container.trigger('autocomplete:noteselected', [item]);
});
- $el.on('autocomplete:closed', () => {
- if (!$el.val().trim()) {
- clearText($el);
+ $container.on('autocomplete:closed', () => {
+ if (!$container.val().trim()) {
+ clearText($container);
}
});
- $el.on('autocomplete:opened', () => {
- if ($el.attr("readonly")) {
- $el.autocomplete('close');
+ $container.on('autocomplete:opened', () => {
+ if ($container.attr("readonly")) {
+ $container.autocomplete('close');
}
});
// clear any event listener added in previous invocation of this function
- $el.off('autocomplete:noteselected');
+ $container.off('autocomplete:noteselected');
- return $el;
-}
-
-function init() {
- $.fn.getSelectedNotePath = function () {
- if (!$(this).val().trim()) {
- return "";
- } else {
- return $(this).attr(SELECTED_NOTE_PATH_KEY);
- }
- };
-
- $.fn.getSelectedNoteId = function () {
- const notePath = $(this).getSelectedNotePath();
- const chunks = notePath.split('/');
-
- return chunks.length >= 1 ? chunks[chunks.length - 1] : null;
- }
-
- $.fn.setSelectedNotePath = function (notePath) {
- notePath = notePath || "";
-
- $(this).attr(SELECTED_NOTE_PATH_KEY, notePath);
-
- $(this)
- .closest(".input-group")
- .find(".go-to-selected-note-button")
- .toggleClass("disabled", !notePath.trim())
- .attr(SELECTED_NOTE_PATH_KEY, notePath); // we also set attr here so tooltip can be displayed
- };
-
- $.fn.getSelectedExternalLink = function () {
- if (!$(this).val().trim()) {
- return "";
- } else {
- return $(this).attr(SELECTED_EXTERNAL_LINK_KEY);
- }
- };
-
- $.fn.setSelectedExternalLink = function (externalLink) {
- $(this).attr(SELECTED_EXTERNAL_LINK_KEY, externalLink);
-
- $(this)
- .closest(".input-group")
- .find(".go-to-selected-note-button")
- .toggleClass("disabled", true);
- }
-
- $.fn.setNote = async function (noteId) {
- const note = noteId ? await froca.getNote(noteId, true) : null;
-
- $(this)
- .val(note ? note.title : "")
- .setSelectedNotePath(noteId);
- }
+ return acObj;
}
export default {
@@ -265,6 +303,5 @@ export default {
autocompleteSourceForCKEditor,
initNoteAutocomplete,
showRecentNotes,
- setText,
- init
+ setText
}
diff --git a/src/public/app/services/note_context.js b/src/public/app/services/note_context.js
index d2b4b4fb5..e49ade543 100644
--- a/src/public/app/services/note_context.js
+++ b/src/public/app/services/note_context.js
@@ -59,10 +59,10 @@ class NoteContext extends Component {
});
}
- if (utils.isDesktop()) {
- // close dangling autocompletes after closing the tab
- $(".aa-input").autocomplete("close");
- }
+ // if (utils.isDesktop()) {
+ // // close dangling autocompletes after closing the tab
+ // $(".aa-input").autocomplete("close");
+ // }
}
getSubContexts() {
diff --git a/src/public/app/widgets/attribute_widgets/attribute_detail.js b/src/public/app/widgets/attribute_widgets/attribute_detail.js
index 388c1f8ce..cf433dff8 100644
--- a/src/public/app/widgets/attribute_widgets/attribute_detail.js
+++ b/src/public/app/widgets/attribute_widgets/attribute_detail.js
@@ -292,7 +292,9 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
this.$rowTargetNote = this.$widget.find('.attr-row-target-note');
this.$inputTargetNote = this.$widget.find('.attr-input-target-note');
- noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote, {allowCreatingNotes: true})
+ noteAutocompleteService.initNoteAutocomplete(this.$inputTargetNote, {allowCreatingNotes: true});
+
+ this.$inputTargetNote
.on('autocomplete:noteselected', (event, suggestion, dataset) => {
if (!suggestion.notePath) {
return false;
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 42a5b5c93..1b89e5a3d 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -358,9 +358,12 @@ pre:not(.CodeMirror-line) {
color: var(--button-disabled-background-color) !important;
}
-.note-autocomplete-input {
- /* this is for seamless integration of "input clearer" button */
- border-right: 0;
+.note-autocomplete-container {
+ display: flex;
+}
+
+.note-autocomplete-container .note-autocomplete-input {
+ flex-grow: 1;
}
table.promoted-attributes-in-tooltip {
@@ -432,43 +435,6 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
opacity: 1;
}
-.algolia-autocomplete {
- width: calc(100% - 30px);
- z-index: 2000 !important;
-}
-
-.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
- width: 100%;
-}
-
-.algolia-autocomplete .aa-dropdown-menu {
- width: 100%;
- background-color: var(--main-background-color);
- border: 1px solid var(--main-border-color);
- border-top: none;
- z-index: 2000 !important;
- max-height: 500px;
- overflow: auto;
- padding: 0;
- margin: 0;
-}
-
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
- cursor: pointer;
- padding: 5px;
- margin: 0;
-}
-
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion p {
- padding: 0;
- margin: 0;
-}
-
-.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
- color: var(--hover-item-text-color);
- background-color: var(--hover-item-background-color);
-}
-
.help-button {
float: right;
background: none;
@@ -958,3 +924,7 @@ input {
.note-split.full-content-width {
max-width: 999999px;
}
+
+.aa-Panel {
+ z-index: 10000;
+}
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index ca45a1beb..fb4989c6b 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -79,7 +79,8 @@
-
+
+
diff --git a/src/views/dialogs/jump_to_note.ejs b/src/views/dialogs/jump_to_note.ejs
index 90549300d..ca897df78 100644
--- a/src/views/dialogs/jump_to_note.ejs
+++ b/src/views/dialogs/jump_to_note.ejs
@@ -10,9 +10,8 @@
-
-
-
+
+