From b62e6c27252767d084471ae66ea031280f2a7e93 Mon Sep 17 00:00:00 2001 From: tylerjmchugh <163562062+tylerjmchugh@users.noreply.github.com> Date: Tue, 29 Oct 2024 06:12:16 -0400 Subject: [PATCH] Add option to mock a dropdown for keywordPickers (#8401) * Implement attribute for mock dropdown * Implement styles for mock dropdown * Documentation * Modify directive to enable mock dropdown by default when showHintsOnFocus is enabled * retrigger checks * Implement showHintsOnFocus on multientrycombiner * Update styles so that the class is not required * Support show-hints-on-focus for language picker --- .../src/main/plugin/iso19139/layout/layout.xsl | 3 +++ .../partials/multientrycombiner.html | 1 + ...ntrycombiner_onlineresourcesdescription.html | 1 + .../components/thesaurus/ThesaurusDirective.js | 2 +- .../components/utility/UtilityDirective.js | 8 +++++++- .../views/default/less/gn_editor_default.less | 17 +++++++++++++++++ 6 files changed, 30 insertions(+), 2 deletions(-) diff --git a/schemas/iso19139/src/main/plugin/iso19139/layout/layout.xsl b/schemas/iso19139/src/main/plugin/iso19139/layout/layout.xsl index 726eeb40d78..e9955bed2d7 100644 --- a/schemas/iso19139/src/main/plugin/iso19139/layout/layout.xsl +++ b/schemas/iso19139/src/main/plugin/iso19139/layout/layout.xsl @@ -541,6 +541,9 @@ + + + diff --git a/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner.html b/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner.html index 6351bf308e2..76c6d3576d7 100644 --- a/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner.html +++ b/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner.html @@ -24,6 +24,7 @@ data-gn-keyword-picker="" data-thesaurus-key="{{c.thesaurus}}" data-number-of-suggestions="{{c.numberOfSuggestions || 20}}" + data-show-hints-on-focus="{{c.showHintsOnFocus || false}}" data-faux-multilingual="true" data-focus-to-input="false" lang="{{lang}}" diff --git a/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner_onlineresourcesdescription.html b/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner_onlineresourcesdescription.html index 4e85378e2e3..14dadc8d13c 100644 --- a/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner_onlineresourcesdescription.html +++ b/web-ui/src/main/resources/catalog/components/edit/multientrycombiner/partials/multientrycombiner_onlineresourcesdescription.html @@ -19,6 +19,7 @@ data-gn-keyword-picker="" data-thesaurus-key="{{c.thesaurus}}" data-number-of-suggestions="{{c.numberOfSuggestions || 20}}" + data-show-hints-on-focus="{{c.showHintsOnFocus || false}}" data-faux-multilingual="true" data-focus-to-input="false" lang="{{lang}}" diff --git a/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js b/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js index 14567e0696a..3b371027283 100644 --- a/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js +++ b/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js @@ -662,7 +662,7 @@ scope.orderById = attrs.orderById || "false"; scope.max = gnThesaurusService.DEFAULT_NUMBER_OF_RESULTS; scope.fauxMultilingual = scope.fauxMultilingual === "true"; //default false - scope.showHintsOnFocus = attrs.showHintsOnFocus === "true"; // displays all the values on focus, default shows only the selected value + scope.showHintsOnFocus = attrs.showHintsOnFocus === "true"; // displays all the values on focus and adds a dropdown caret icon, default shows only the selected value // Configuration only required when using the directive in template fields. // diff --git a/web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js b/web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js index 493c85a99f6..8a765a04ff5 100644 --- a/web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js +++ b/web-ui/src/main/resources/catalog/components/utility/UtilityDirective.js @@ -901,6 +901,7 @@ restrict: "A", link: function (scope, element, attrs) { scope.prefix = attrs["prefix"] || ""; + scope.showHintsOnFocus = attrs.showHintsOnFocus === "true"; // displays all the values on focus, default shows only the selected value element.attr("placeholder", "..."); element.on("focus", function () { $http @@ -945,7 +946,8 @@ $(element).typeahead( { minLength: 0, - highlight: true + highlight: true, + showHintsOnFocus: scope.showHintsOnFocus }, { name: "isoLanguages", @@ -958,6 +960,10 @@ } } ); + // Since the typeahead is initialized on focus the first focus will not trigger the hints + // So we blur then refocus to trigger the hints + $(element).blur(); + $(element).focus(); }); element.unbind("focus"); }); diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less index 79345fda1af..f36b116924f 100644 --- a/web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less +++ b/web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less @@ -689,3 +689,20 @@ form.gn-editor.gn-indent-bluescale { content: ""; } } + +// Mock dropdown for typeahead +[data-show-hints-on-focus="true"]:not(.tt-hint) { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); + background-repeat: no-repeat; + background-position: right; + padding-right: 1.5em; +} + +// Move mock dropdown caret in multilingual mode +.gn-multilingual-field { + div:not(:has(.tt-input[data-show-hints-on-focus="true"].hidden)) { + .tt-input[data-show-hints-on-focus="true"] { + background-position-y: 90%; + } + } +}