Add CSS for 'more results'

Author: ben-lu-uw

src/mapml.css

@@ -798,7 +798,6 @@ label.mapml-layer-item-toggle {
   max-height: 100%;
   max-width: 100%;
   border-radius: 4px;
-  padding: 5px 10px;
   background-color: #fff;
   cursor: default;
   z-index: 1000;
@@ -814,9 +813,18 @@ label.mapml-layer-item-toggle {
   font: inherit;
 }
 
+.mapml-feature-index-more-content {
+  display: inline-block;
+}
+.mapml-feature-index-more-content > span{
+  padding: 5px 10px 5px 0;
+  display: inline-block;
+}
 .mapml-feature-index-content {
+  padding: 5px 10px;
   display: inline-block;
 }
+.mapml-feature-index-more-content > span > span,
 .mapml-feature-index-content > span{
   display: block;
   font-family: monospace;

src/mapml/layers/FeatureIndex.js

@@ -19,7 +19,7 @@ export var FeatureIndex = L.Layer.extend({
 
         this._output = L.DomUtil.create("output", "mapml-feature-index", map._container);
         this._body = L.DomUtil.create("span", "mapml-feature-index-content", this._output);
-        this._moreContent = L.DomUtil.create("span", "mapml-feature-index-content more-content", this._output);
+        this._moreContent = L.DomUtil.create("span", "mapml-feature-index-more-content", this._output);
         this._moreContent.style.display = "none";
 
         map.on("layerchange layeradd layerremove overlayremove", this._toggleEvents, this);
@@ -54,13 +54,21 @@ export var FeatureIndex = L.Layer.extend({
         keys.forEach(i => {
             if(layers[i].featureAttributes && featureIndexBounds.overlaps(layers[i]._bounds)){
                 let label = layers[i].group.getAttribute("aria-label");
-                if(index === 9){
-                    body.appendChild(this._updateOutput("More results", 9));
-                    index += 1;
+
+                if(index%9 === 0){
+                    let span = document.createElement("span");
+                    span.setAttribute("id", index/9);
+                    moreContent.appendChild(span);
+                    if(index === 9){
+                        body.appendChild(this._updateOutput("More results", 9));
+                        index += 1;
+                    }
                 }
 
                 if(index > 9){
-                    moreContent.appendChild(this._updateOutput(label, index));
+                    let value = Math.floor((index - 1)/9);
+                    let span = moreContent.querySelector(`[id=${CSS.escape(value)}]`);
+                    span.appendChild(this._updateOutput(label, index));
                 } else {
                     body.appendChild(this._updateOutput(label, index));
                 }