From 3c83e4aac2d638c85d97049797d7bf1e0e086e17 Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Thu, 3 Oct 2024 13:47:59 -0400 Subject: [PATCH 1/8] Implement attribute for mock dropdown --- .../catalog/components/thesaurus/ThesaurusDirective.js | 5 +++++ 1 file changed, 5 insertions(+) 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 203b3b546ed..d9cb7cfe3c9 100644 --- a/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js +++ b/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js @@ -662,6 +662,11 @@ 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.mockDropdown = attrs.mockDropdown === "true"; + if (scope.mockDropdown) { + // Add a class to the element + element.addClass("mock-dropdown"); + } // Configuration only required when using the directive in template fields. // From f7eb897a702ac60924b5c1b3b8d74fe58b410ebd Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Thu, 3 Oct 2024 13:48:08 -0400 Subject: [PATCH 2/8] Implement styles for mock dropdown --- .../views/default/less/gn_editor_default.less | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) 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..36bc562e513 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 +.tt-input.mock-dropdown { + 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.mock-dropdown.hidden)) { + .tt-input.mock-dropdown { + background-position-y: 90%; + } + } +} From 18eacd040a6a1bcc3216afda9390038a77654bc2 Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Thu, 3 Oct 2024 13:51:47 -0400 Subject: [PATCH 3/8] Documentation --- .../catalog/components/thesaurus/ThesaurusDirective.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 d9cb7cfe3c9..26b5f324526 100644 --- a/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js +++ b/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js @@ -662,9 +662,10 @@ 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.mockDropdown = attrs.mockDropdown === "true"; + scope.mockDropdown = attrs.mockDropdown === "true"; // Adds a caret to the end of the field to mock a dropdown or HTML5 datalist + + // Add the required mock dropdown class if the attribute is set if (scope.mockDropdown) { - // Add a class to the element element.addClass("mock-dropdown"); } From 0b6da5b9f35fb3e50456ef2dff1612ba5b9e5e6f Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Tue, 8 Oct 2024 10:33:34 -0400 Subject: [PATCH 4/8] Modify directive to enable mock dropdown by default when showHintsOnFocus is enabled --- .../catalog/components/thesaurus/ThesaurusDirective.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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 26b5f324526..efb6971bb0b 100644 --- a/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js +++ b/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js @@ -661,11 +661,10 @@ 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.mockDropdown = attrs.mockDropdown === "true"; // Adds a caret to the end of the field to mock a dropdown or HTML5 datalist + scope.showHintsOnFocus = attrs.showHintsOnFocus === "true"; // displays all the values on focus and adds a dropdown caret icon, default shows only the selected value - // Add the required mock dropdown class if the attribute is set - if (scope.mockDropdown) { + // Add the required mock dropdown class if show hints on focus is enabled + if (scope.showHintsOnFocus) { element.addClass("mock-dropdown"); } From 17b09560e0e6399dbaf3606bd9a38e324548bc10 Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Tue, 8 Oct 2024 10:51:32 -0400 Subject: [PATCH 5/8] retrigger checks From 24d03ecb5f06a6dd4c8dc979a8ed9835c54fad4f Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Tue, 8 Oct 2024 15:54:43 -0400 Subject: [PATCH 6/8] Implement showHintsOnFocus on multientrycombiner --- .../edit/multientrycombiner/partials/multientrycombiner.html | 1 + .../partials/multientrycombiner_onlineresourcesdescription.html | 1 + 2 files changed, 2 insertions(+) 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}}" From cbc1e9e13463bddbc608839298418ce42875de93 Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Mon, 21 Oct 2024 15:44:40 -0400 Subject: [PATCH 7/8] Update styles so that the class is not required --- .../catalog/components/thesaurus/ThesaurusDirective.js | 5 ----- .../catalog/views/default/less/gn_editor_default.less | 6 +++--- 2 files changed, 3 insertions(+), 8 deletions(-) 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 efb6971bb0b..c8c638dbf5f 100644 --- a/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js +++ b/web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js @@ -663,11 +663,6 @@ scope.fauxMultilingual = scope.fauxMultilingual === "true"; //default false scope.showHintsOnFocus = attrs.showHintsOnFocus === "true"; // displays all the values on focus and adds a dropdown caret icon, default shows only the selected value - // Add the required mock dropdown class if show hints on focus is enabled - if (scope.showHintsOnFocus) { - element.addClass("mock-dropdown"); - } - // Configuration only required when using the directive in template fields. // // - data-template-field: true to indicate a template field 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 36bc562e513..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 @@ -691,7 +691,7 @@ form.gn-editor.gn-indent-bluescale { } // Mock dropdown for typeahead -.tt-input.mock-dropdown { +[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; @@ -700,8 +700,8 @@ form.gn-editor.gn-indent-bluescale { // Move mock dropdown caret in multilingual mode .gn-multilingual-field { - div:not(:has(.tt-input.mock-dropdown.hidden)) { - .tt-input.mock-dropdown { + div:not(:has(.tt-input[data-show-hints-on-focus="true"].hidden)) { + .tt-input[data-show-hints-on-focus="true"] { background-position-y: 90%; } } From 205a0bcd4b81809b6c3d71ce63b72af089c7977c Mon Sep 17 00:00:00 2001 From: tylerjmchugh Date: Mon, 21 Oct 2024 15:45:53 -0400 Subject: [PATCH 8/8] Support show-hints-on-focus for language picker --- .../iso19139/src/main/plugin/iso19139/layout/layout.xsl | 3 +++ .../catalog/components/utility/UtilityDirective.js | 8 +++++++- 2 files changed, 10 insertions(+), 1 deletion(-) 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/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"); });