[Backport 4.2.x] Add option to mock a dropdown for keywordPickers (#8477

)

* Implement attribute for mock dropdown

* Implement styles for mock dropdown

* Documentation

* Modify directive to enable mock dropdown by default when showHintsOnFocus is enabled

* Implement showHintsOnFocus on multientrycombiner

* Update styles so that the class is not required

* Support show-hints-on-focus for language picker

schemas/iso19139/src/main/plugin/iso19139/layout/layout.xsl

@@ -541,6 +541,9 @@
       <xsl:with-param name="cls" select="local-name()"/>
       <xsl:with-param name="xpath" select="$xpath"/>
       <xsl:with-param name="type" select="gn-fn-iso19139:getCodeListType(name())"/>
+      <xsl:with-param name="directiveAttributes">
+        <xsl:copy-of select="gn-fn-metadata:getFieldDirective($editorConfig, name(),name(*[@codeListValue]), $xpath)"/>
+      </xsl:with-param>
       <xsl:with-param name="name"
                       select="if ($isEditing) then concat(*/gn:element/@ref, '_codeListValue') else ''"/>
       <xsl:with-param name="editInfo" select="*/gn:element"/>

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}}"

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}}"

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.
           //

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");
           });

web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less

@@ -636,3 +636,20 @@ form.gn-editor.gn-indent-bluescale {
 
   }
 }
+
+// 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%;
+    }
+  }
+}