From d484e6c3985bf3f809fe684d41247139cf6d4f8e Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Fri, 8 Oct 2021 13:21:20 -0400 Subject: [PATCH 01/23] refactored the layer HTML anatomy to not include nested interactive elements --- src/mapml.css | 91 ++++++++++++++++++++++++++++ src/mapml/layers/MapLayer.js | 114 +++++++++++++++++++++++++++-------- 2 files changed, 181 insertions(+), 24 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index fa71adbc1..12e479986 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -620,4 +620,95 @@ svg.leaflet-image-layer.leaflet-interactive g { .mapml-link-preview > p { margin: 3px 5px 2px 3px; color: rgb(60,64,67); +} + +/** +* layer item controls +*/ + +button.mapml-button:disabled, +.mapml-button[aria-disabled="true"], +.mapml-layer-item:disabled button.mapml-button { + opacity: .3; +} + +.mapml-button-icon { + pointer-events: none; +} + +.mapml-button-icon svg { + fill: currentColor; +} + +.mapml-layer-item, +.mapml-layer-item *, +.mapml-layer-item ::before, +.mapml-layer-item ::after { + box-sizing: border-box; +} + +.mapml-layer-item { + border: 0; + margin: 0; + padding: 0; +} + +.mapml-layer-item:not(:last-of-type) { + border-bottom: 1px solid #e3e3e3; +} + +.mapml-layer-item-properties { + align-items: center; + display: flex; + justify-content: space-between; +} + +.mapml-layer-item-controls { + margin-inline-start: auto; +} + +.mapml-layer-item-controls button svg { + vertical-align: middle; +} + +.mapml-layer-item-controls, +label.mapml-layer-item-toggle, +.mapml-layer-item-remove-control { + align-items: center; + display: flex; + justify-content: center; +} + +.mapml-layer-item-name { + padding: .5rem; + padding-inline-start: 0; + word-break: break-word; +} + +.mapml-layer-item-toggle, +.mapml-layer-item-remove-control, +.mapml-layer-item-settings-control { + min-height: 44px; + min-width: 44px; + height: 44px; + width: 44px; +} + +.mapml-layer-item-settings > * { + display: block; + padding-block-start: .25rem; + padding-block-end: .25rem; + padding-inline-start: 44px; + padding-inline-end: 20px; +} + +.mapml-layer-item-settings summary { + -webkit-user-select: none; + user-select: none; +} + +.mapml-layer-item-opacity [type="range"] { + margin-inline-end: 0; + margin-inline-start: 0; + width: 100%; } \ No newline at end of file diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index 596a5071c..35d67b8e6 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -484,34 +484,89 @@ export var MapMLLayer = L.Layer.extend({ var fieldset = document.createElement('fieldset'), input = document.createElement('input'), label = document.createElement('label'), - name = document.createElement('span'), + layerItemName = document.createElement('span'), + buttonNameIcon = document.createElement('span'), + settingsButtonNameIcon = document.createElement('span'), details = document.createElement('details'), summary = document.createElement('summary'), summaryContainer = document.createElement('div'), + layerItemProperty = document.createElement('div'), + layerItemControls = document.createElement('div'), + layerItemSettings = document.createElement('div'), opacity = document.createElement('input'), opacityControl = document.createElement('details'), opacityControlSummary = document.createElement('summary'), - opacityControlSummaryLabel = document.createElement('label'), + itemToggleLabel = document.createElement('label'), + svgRemoveIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), + svgSettingsControlIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), + removeIconPath1 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), + removeIconPath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), + settingsControlPath1 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), + settingsControlPath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), mapEl = this._layerEl.parentNode; this.opacityEl = opacity; - + + // append the paths in svg for the remove layer and toggle icons + svgRemoveIcon.setAttribute('viewBox', '0 0 24 24'); + svgRemoveIcon.setAttribute('height', '22'); + svgRemoveIcon.setAttribute('width', '22'); + svgSettingsControlIcon.setAttribute('viewBox', '0 0 24 24'); + svgSettingsControlIcon.setAttribute('height', '22'); + svgSettingsControlIcon.setAttribute('width', '22'); + removeIconPath1.setAttribute('d', 'M0 0h24v24H0V0z'); + removeIconPath1.setAttribute('fill', 'none'); + removeIconPath2.setAttribute('d', 'M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'); + settingsControlPath1.setAttribute('d', 'M0 0h24v24H0z'); + settingsControlPath1.setAttribute('fill', 'none'); + settingsControlPath2.setAttribute('d', 'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'); + svgRemoveIcon.appendChild(removeIconPath1); + svgRemoveIcon.appendChild(removeIconPath2); + svgSettingsControlIcon.appendChild(settingsControlPath1); + svgSettingsControlIcon.appendChild(settingsControlPath2); + summaryContainer.classList.add('mapml-control-summary-container'); + layerItemProperty.classList.add('mapml-layer-item-properties'); + layerItemSettings.classList.add('mapml-layer-item-settings'); + fieldset.classList.add('mapml-layer-item'); + buttonNameIcon.classList.add('mapml-button-icon'); + settingsButtonNameIcon.classList.add('mapml-button-icon'); + layerItemName.classList.add('mapml-layer-item-name'); + layerItemControls.classList.add('mapml-layer-item-controls'); - let removeButton = document.createElement('button'); - removeButton.type = 'button'; - removeButton.title = 'Remove Layer'; - removeButton.innerHTML = ""; - removeButton.classList.add('mapml-layer-remove-button', 'mapml-button'); - L.DomEvent.disableClickPropagation(removeButton); - L.DomEvent.on(removeButton, 'click', L.DomEvent.stop); - L.DomEvent.on(removeButton, 'click', (e)=>{ + layerItemSettings.hidden = true; + buttonNameIcon.setAttribute('aria-hidden', true); + settingsButtonNameIcon.setAttribute('aria-hidden', true); + + let removeControlButton = document.createElement('button'); + removeControlButton.type = 'button'; + removeControlButton.title = 'Remove Layer'; + removeControlButton.classList.add('mapml-layer-item-remove-control', 'mapml-button'); + L.DomEvent.disableClickPropagation(removeControlButton); + L.DomEvent.on(removeControlButton, 'click', L.DomEvent.stop); + L.DomEvent.on(removeControlButton, 'click', (e)=>{ mapEl.removeChild(e.target.closest("fieldset").querySelector("span").layer._layerEl); }, this); + let itemSettingControlButton = document.createElement('button'); + itemSettingControlButton.type = 'button'; + itemSettingControlButton.title = 'Layer Settings'; + itemSettingControlButton.setAttribute('aria-expanded', false); + itemSettingControlButton.classList.add('mapml-layer-item-settings-control', 'mapml-button'); + L.DomEvent.on(itemSettingControlButton, 'click', (e)=>{ + if(layerItemSettings.hidden == true){ + itemSettingControlButton.setAttribute('aria-expanded', true); + layerItemSettings.hidden = false; + } else { + itemSettingControlButton.setAttribute('aria-expanded', false); + layerItemSettings.hidden = true; + } + }, this); + input.defaultChecked = this._map ? true: false; input.type = 'checkbox'; input.className = 'leaflet-control-layers-selector'; - name.layer = this; + layerItemName.layer = this; + if (this._legendUrl) { var legendLink = document.createElement('a'); @@ -519,28 +574,30 @@ export var MapMLLayer = L.Layer.extend({ legendLink.href = this._legendUrl; legendLink.target = '_blank'; legendLink.draggable = false; - name.appendChild(legendLink); + layerItemName.appendChild(legendLink); } else { - name.innerHTML = ' ' + this._title; + layerItemName.innerHTML = ' ' + this._title; } - label.appendChild(input); - label.appendChild(name); - opacityControlSummaryLabel.innerText = 'Opacity'; - opacity.id = "o" + L.stamp(opacity); - opacityControlSummaryLabel.setAttribute('for', opacity.id); - opacityControlSummary.appendChild(opacityControlSummaryLabel); + layerItemName.id = this._title; + itemToggleLabel.classList.add('mapml-layer-item-toggle'); + itemToggleLabel.setAttribute('title', 'Enable Layer'); + itemToggleLabel.appendChild(input); + opacityControlSummary.innerText = 'Opacity'; + opacityControlSummary.id = 'mapml-layer-item-opacity-' + this._title; opacityControl.appendChild(opacityControlSummary); opacityControl.appendChild(opacity); L.DomUtil.addClass(details, 'mapml-control-layers'); - L.DomUtil.addClass(opacityControl,'mapml-control-layers'); + L.DomUtil.addClass(opacityControl,'mapml-layer-item-opacity'); opacity.setAttribute('type','range'); opacity.setAttribute('min', '0'); opacity.setAttribute('max','1.0'); opacity.setAttribute('value', this._container.style.opacity || '1.0'); opacity.setAttribute('step','0.1'); + opacity.setAttribute('aria-labelledby', 'mapml-layer-item-opacity-' + this._title); opacity.value = this._container.style.opacity || '1.0'; fieldset.setAttribute("aria-grabbed", "false"); + fieldset.setAttribute('aria-labelledby', this._title); fieldset.onmousedown = (downEvent) => { if(downEvent.target.tagName.toLowerCase() === "input" || downEvent.target.tagName.toLowerCase() === "select") return; @@ -609,12 +666,21 @@ export var MapMLLayer = L.Layer.extend({ L.DomEvent.on(opacity,'change', this._changeOpacity, this); - fieldset.appendChild(details); + fieldset.appendChild(layerItemProperty); + fieldset.appendChild(layerItemSettings); + layerItemProperty.appendChild(itemToggleLabel); + layerItemProperty.appendChild(layerItemName); + layerItemProperty.appendChild(layerItemControls); + layerItemControls.appendChild(removeControlButton); + layerItemControls.appendChild(itemSettingControlButton); + removeControlButton.appendChild(buttonNameIcon); + itemSettingControlButton.appendChild(settingsButtonNameIcon); + buttonNameIcon.appendChild(svgRemoveIcon); + settingsButtonNameIcon.appendChild(svgSettingsControlIcon); details.appendChild(summary); summaryContainer.appendChild(label); - summaryContainer.appendChild(removeButton); summary.appendChild(summaryContainer); - details.appendChild(opacityControl); + layerItemSettings.appendChild(opacityControl); if (this._styles) { details.appendChild(this._styles); From df90e05bbd7246d00c453a7705fb8a2707851370 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Tue, 12 Oct 2021 13:52:10 -0400 Subject: [PATCH 02/23] made span a child element of label to fix a few issues --- src/mapml.css | 20 ++++++++++++++------ src/mapml/layers/MapLayer.js | 5 +++-- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index 12e479986..a183ff4df 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -662,7 +662,6 @@ button.mapml-button:disabled, display: flex; justify-content: space-between; } - .mapml-layer-item-controls { margin-inline-start: auto; } @@ -672,17 +671,26 @@ button.mapml-button:disabled, } .mapml-layer-item-controls, -label.mapml-layer-item-toggle, .mapml-layer-item-remove-control { align-items: center; display: flex; justify-content: center; } -.mapml-layer-item-name { - padding: .5rem; - padding-inline-start: 0; - word-break: break-word; +.mapml-layer-item-properties label { + display: contents; + padding-right: 15px; + padding-left: 15px; + text-indent: 5px; + margin-right: 15px; +} + +.mapml-layer-item-properties label input { + vertical-align: middle; +} + +.mapml-layer-item-properties label span { + vertical-align: middle; } .mapml-layer-item-toggle, diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index 35d67b8e6..b60636203 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -564,7 +564,7 @@ export var MapMLLayer = L.Layer.extend({ input.defaultChecked = this._map ? true: false; input.type = 'checkbox'; - input.className = 'leaflet-control-layers-selector'; + //input.className = 'leaflet-control-layers-selector'; layerItemName.layer = this; @@ -669,7 +669,8 @@ export var MapMLLayer = L.Layer.extend({ fieldset.appendChild(layerItemProperty); fieldset.appendChild(layerItemSettings); layerItemProperty.appendChild(itemToggleLabel); - layerItemProperty.appendChild(layerItemName); + //layerItemProperty.appendChild(layerItemName); + itemToggleLabel.appendChild(layerItemName); layerItemProperty.appendChild(layerItemControls); layerItemControls.appendChild(removeControlButton); layerItemControls.appendChild(itemSettingControlButton); From 7ecf8c5133fa1fd71114825e76eec867d2cd155f Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Tue, 12 Oct 2021 17:57:57 -0400 Subject: [PATCH 03/23] changed the locators in tests to reflect changes in the layer layout --- src/mapml.css | 5 +---- src/mapml/layers/MapLayer.js | 3 --- test/e2e/core/debugMode.test.js | 4 ++-- test/e2e/core/drag.test.js | 8 ++++---- test/e2e/core/featureLinks.test.js | 4 ++-- test/e2e/core/layerAttributes.test.js | 6 +++--- test/e2e/core/layerContextMenu.test.js | 8 ++++---- test/e2e/core/mapContextMenu.test.js | 13 ++++++------- test/e2e/core/mismatchedLayerWithMap.test.js | 2 +- test/e2e/mapml-viewer/viewerContextMenu.test.js | 12 ++++++------ 10 files changed, 29 insertions(+), 36 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index a183ff4df..491959e24 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -685,10 +685,7 @@ button.mapml-button:disabled, margin-right: 15px; } -.mapml-layer-item-properties label input { - vertical-align: middle; -} - +.mapml-layer-item-properties label input, .mapml-layer-item-properties label span { vertical-align: middle; } diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index b60636203..fb0a6d594 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -564,10 +564,8 @@ export var MapMLLayer = L.Layer.extend({ input.defaultChecked = this._map ? true: false; input.type = 'checkbox'; - //input.className = 'leaflet-control-layers-selector'; layerItemName.layer = this; - if (this._legendUrl) { var legendLink = document.createElement('a'); legendLink.text = ' ' + this._title; @@ -669,7 +667,6 @@ export var MapMLLayer = L.Layer.extend({ fieldset.appendChild(layerItemProperty); fieldset.appendChild(layerItemSettings); layerItemProperty.appendChild(itemToggleLabel); - //layerItemProperty.appendChild(layerItemName); itemToggleLabel.appendChild(layerItemName); layerItemProperty.appendChild(layerItemControls); layerItemControls.appendChild(removeControlButton); diff --git a/test/e2e/core/debugMode.test.js b/test/e2e/core/debugMode.test.js index 4cc9f40ea..952d71abb 100644 --- a/test/e2e/core/debugMode.test.js +++ b/test/e2e/core/debugMode.test.js @@ -164,7 +164,7 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Layer deselected then reselected", async () => { await page.hover(".leaflet-top.leaflet-right"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > details > summary"); + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span"); const feature = await page.$eval( "xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g", (tile) => tile.childElementCount @@ -174,7 +174,7 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Layer deselected then reselected", async () => { await page.hover(".leaflet-top.leaflet-right"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > details > summary"); + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span"); const feature = await page.$eval( "xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path:nth-child(4)", (tile) => tile.getAttribute("d") diff --git a/test/e2e/core/drag.test.js b/test/e2e/core/drag.test.js index a01911aec..aa13e6aef 100644 --- a/test/e2e/core/drag.test.js +++ b/test/e2e/core/drag.test.js @@ -61,7 +61,7 @@ jest.setTimeout(30000); await page.hover(".leaflet-top.leaflet-right"); const controlText = await page.$eval( - "xpath=//html/body/map >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > label > span", + "xpath=//html/body/map >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > label > span", (span) => span.innerText ); const layerIndex = await page.$eval( @@ -75,7 +75,7 @@ jest.setTimeout(30000); expect(controlText.toLowerCase()).toContain(domLayer.toLowerCase()); expect(layerIndex).toEqual("2"); - expect(controlText).toBe(" Canada Base Map - Transportation (CBMT)"); + expect(controlText).toBe("Canada Base Map - Transportation (CBMT)"); }); test("[" + browserType + "]" + " Moving layer up one in control overlay", async () => { @@ -89,7 +89,7 @@ jest.setTimeout(30000); await page.hover(".leaflet-top.leaflet-right"); const controlText = await page.$eval( - "xpath=//html/body/map >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > details > summary > div > label > span", + "xpath=//html/body/map >> css=div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span", (span) => span.innerText ); const layerIndex = await page.$eval( @@ -103,7 +103,7 @@ jest.setTimeout(30000); expect(controlText.toLowerCase()).toContain(domLayer.toLowerCase()); expect(layerIndex).toEqual("1"); - expect(controlText).toBe(" Static MapML With Tiles"); + expect(controlText).toBe("Static MapML With Tiles"); }); }); diff --git a/test/e2e/core/featureLinks.test.js b/test/e2e/core/featureLinks.test.js index 3aa336762..368d40505 100644 --- a/test/e2e/core/featureLinks.test.js +++ b/test/e2e/core/featureLinks.test.js @@ -36,7 +36,7 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Sub-point inplace link adds new layer, parent feature has separate link", async () => { await page.hover(".leaflet-top.leaflet-right"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > button"); + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)"); await page.click("body > map"); for(let i = 0; i < 6; i++) await page.keyboard.press("Tab"); @@ -68,7 +68,7 @@ jest.setTimeout(50000); describe("Main Part Link Tests in " + browserType, () => { test("[" + browserType + "]" + " Main part adds new layer", async () => { await page.hover(".leaflet-top.leaflet-right"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > button"); + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)"); await page.click("body > map"); for(let i = 0; i < 5; i++) await page.keyboard.press("Tab"); diff --git a/test/e2e/core/layerAttributes.test.js b/test/e2e/core/layerAttributes.test.js index f4e762174..ecb110fd8 100644 --- a/test/e2e/core/layerAttributes.test.js +++ b/test/e2e/core/layerAttributes.test.js @@ -26,7 +26,7 @@ jest.setTimeout(50000); await page.$eval("body > mapml-viewer > layer-", (layer) => layer.removeAttribute("checked")); await page.hover('div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > a'); - const layerController = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > summary > div > label > input", + const layerController = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div > label > input", (controller) => controller.checked); expect(layerController).toEqual(false); @@ -34,7 +34,7 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Check attribute added", async () => { await page.$eval("body > mapml-viewer > layer-", (layer) => layer.setAttribute("checked", "")); - const layerController = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > summary > div > label > input", + const layerController = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div > label > input", (controller) => controller.checked); expect(layerController).toEqual(true); @@ -106,7 +106,7 @@ jest.setTimeout(50000); await page.reload(); await page.$eval("body > mapml-viewer > layer-", (layer) => layer.opacity = 0.4); - let value = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input[type=range]", + let value = await page.$eval("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input[type=range]", (input) => input.value); expect(value).toEqual("0.4"); }); diff --git a/test/e2e/core/layerContextMenu.test.js b/test/e2e/core/layerContextMenu.test.js index bdbfefb25..d3e1ece60 100644 --- a/test/e2e/core/layerContextMenu.test.js +++ b/test/e2e/core/layerContextMenu.test.js @@ -24,7 +24,7 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Layer context menu shows when layer is clicked", async () => { await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > details > summary > div > label > span", + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span", { button: "right" }); const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer")); @@ -50,7 +50,7 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Map zooms in to layer 2", async () => { await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > label > span", + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > label > span", { button: "right" }); await page.keyboard.press("z"); await page.waitForTimeout(1000); @@ -73,7 +73,7 @@ jest.setTimeout(50000); await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in"); await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(3) > details > summary > div > label > span", + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(3) > div:nth-child(1) > label > span", { button: "right" }); await page.keyboard.press("z"); await page.waitForTimeout(1000); @@ -96,7 +96,7 @@ jest.setTimeout(50000); await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.leaflet-control-zoom.leaflet-bar.leaflet-control > a.leaflet-control-zoom-in"); await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(4) > details > summary > div > label > span", + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(4) > div:nth-child(1) > label > span", { button: "right" }); await page.keyboard.press("z"); await page.waitForTimeout(1000); diff --git a/test/e2e/core/mapContextMenu.test.js b/test/e2e/core/mapContextMenu.test.js index 2c22afee5..dfb151861 100644 --- a/test/e2e/core/mapContextMenu.test.js +++ b/test/e2e/core/mapContextMenu.test.js @@ -187,17 +187,16 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Context menu, toggle controls after changing opacity", async () => { await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); - await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details", - (div) => div.open = true + await page.click( + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div > div > button:nth-child(2)", ); await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details", + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details", (div) => div.open = true ); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input"); + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input"); const valueBefore = await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input", + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", (opacity) => opacity.value ); expect(valueBefore).toEqual("0.5"); @@ -208,7 +207,7 @@ jest.setTimeout(50000); await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); const valueAfter = await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input", + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", (opacity) => opacity.value ); diff --git a/test/e2e/core/mismatchedLayerWithMap.test.js b/test/e2e/core/mismatchedLayerWithMap.test.js index 1c4975488..559002596 100644 --- a/test/e2e/core/mismatchedLayerWithMap.test.js +++ b/test/e2e/core/mismatchedLayerWithMap.test.js @@ -80,7 +80,7 @@ jest.setTimeout(30000); (controller) => controller.hasAttribute('disabled')) await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > details > summary > div > label > span", + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span", { button: "right" }); const aHandle = await page.evaluateHandle(() => document.querySelector("mapml-viewer")); diff --git a/test/e2e/mapml-viewer/viewerContextMenu.test.js b/test/e2e/mapml-viewer/viewerContextMenu.test.js index 4570dca64..4e271cea0 100644 --- a/test/e2e/mapml-viewer/viewerContextMenu.test.js +++ b/test/e2e/mapml-viewer/viewerContextMenu.test.js @@ -199,17 +199,17 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " Context menu, toggle controls after changing opacity", async () => { await page.hover("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div"); - await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details", + await page.click( + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div > div > button:nth-child(2)", (div) => div.open = true ); await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details", + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details", (div) => div.open = true ); - await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input"); + await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input"); const valueBefore = await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input", + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", (opacity) => opacity.value ); expect(valueBefore).toEqual("0.5"); @@ -220,7 +220,7 @@ jest.setTimeout(50000); await page.click("div > div.mapml-contextmenu > button:nth-child(5)"); const valueAfter = await page.$eval( - "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input", + "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > div:nth-child(2) > details > input", (opacity) => opacity.value ); From 5e7338237807a2963177dc6645e0dd278e042cc9 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Wed, 13 Oct 2021 11:10:16 -0400 Subject: [PATCH 04/23] deleted css that was no longer needed --- src/mapml.css | 62 +-------------------------------------------------- 1 file changed, 1 insertion(+), 61 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index 491959e24..f2bc0a7c1 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -189,48 +189,10 @@ min-height: 44px; } -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary, -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary ~ * { - padding-left: 15px; - padding-right: 15px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary { - padding-top: 12.5px; - padding-bottom: 12.5px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary { - padding-top: 4px; - padding-bottom: 4px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details { - padding-bottom: 4px; - margin: 0 0 0 15px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary ~ * { - display: block; - margin-top: 5px; - margin-left: 15px; - width: calc(100% - 15px); -} - .leaflet-control-layers label { display: inline; } -.mapml-control-layers summary::marker { - margin-right: 5px; -} - -.mapml-control-layers details [type="radio"], -.mapml-control-layers details [type="checkbox"] { - margin-right: 5px; - margin-left: 0; -} - .leaflet-control-layers-list .leaflet-control-layers-overlays > :not(:last-of-type) { border-bottom: 1px solid #e3e3e3; } @@ -240,9 +202,6 @@ margin-top: revert; position: revert; } -.mapml-control-layers summary label > * { - vertical-align: middle; -} /* * Context menu. @@ -408,9 +367,7 @@ /* Disable pointer events where they'd interfere with the intended action. */ .leaflet-tooltip, .leaflet-crosshair *, -.mapml-contextmenu-item > *, -.mapml-control-layers .mapml-control-layers summary label, -.mapml-draggable [aria-grabbed="true"] .mapml-control-layers > * { +.mapml-contextmenu-item > * { pointer-events: none!important; } @@ -570,23 +527,6 @@ summary { height: 100%; width: 100%; } - -/* Quick fix for https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/358, - refactor TBD in https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/263. */ -.mapml-control-summary-container { - display: contents; -} -.mapml-control-summary-container .mapml-layer-remove-button { - text-decoration: none; - float: right; -} -.mapml-control-summary-container * { - display: inline; -} -.mapml-control-summary-container label { - margin-right: 15px; -} - /* Force printers to include background-images of controls for printing. (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/294) */ From 9acd92c25df0ee42219bf5c244aed2572e8f2d1c Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Thu, 14 Oct 2021 19:54:43 -0400 Subject: [PATCH 05/23] deleted unused variables and changed the x to an html icon --- src/mapml.css | 6 ++++++ src/mapml/layers/MapLayer.js | 17 ++++++++--------- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index f2bc0a7c1..53892949d 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -617,6 +617,12 @@ button.mapml-button:disabled, justify-content: center; } +.mapml-layer-item-controls button span { + font-size: large; + font-weight: 900; + vertical-align: middle; +} + .mapml-layer-item-properties label { display: contents; padding-right: 15px; diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index fb0a6d594..c49ade2e0 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -487,7 +487,6 @@ export var MapMLLayer = L.Layer.extend({ layerItemName = document.createElement('span'), buttonNameIcon = document.createElement('span'), settingsButtonNameIcon = document.createElement('span'), - details = document.createElement('details'), summary = document.createElement('summary'), summaryContainer = document.createElement('div'), layerItemProperty = document.createElement('div'), @@ -540,6 +539,7 @@ export var MapMLLayer = L.Layer.extend({ let removeControlButton = document.createElement('button'); removeControlButton.type = 'button'; removeControlButton.title = 'Remove Layer'; + removeControlButton.innerHTML = ""; removeControlButton.classList.add('mapml-layer-item-remove-control', 'mapml-button'); L.DomEvent.disableClickPropagation(removeControlButton); L.DomEvent.on(removeControlButton, 'click', L.DomEvent.stop); @@ -551,6 +551,7 @@ export var MapMLLayer = L.Layer.extend({ itemSettingControlButton.type = 'button'; itemSettingControlButton.title = 'Layer Settings'; itemSettingControlButton.setAttribute('aria-expanded', false); + //itemSettingControlButton.innerHTML = ""; itemSettingControlButton.classList.add('mapml-layer-item-settings-control', 'mapml-button'); L.DomEvent.on(itemSettingControlButton, 'click', (e)=>{ if(layerItemSettings.hidden == true){ @@ -584,7 +585,6 @@ export var MapMLLayer = L.Layer.extend({ opacityControlSummary.id = 'mapml-layer-item-opacity-' + this._title; opacityControl.appendChild(opacityControlSummary); opacityControl.appendChild(opacity); - L.DomUtil.addClass(details, 'mapml-control-layers'); L.DomUtil.addClass(opacityControl,'mapml-layer-item-opacity'); opacity.setAttribute('type','range'); opacity.setAttribute('min', '0'); @@ -671,17 +671,16 @@ export var MapMLLayer = L.Layer.extend({ layerItemProperty.appendChild(layerItemControls); layerItemControls.appendChild(removeControlButton); layerItemControls.appendChild(itemSettingControlButton); - removeControlButton.appendChild(buttonNameIcon); + //removeControlButton.appendChild(buttonNameIcon); itemSettingControlButton.appendChild(settingsButtonNameIcon); - buttonNameIcon.appendChild(svgRemoveIcon); + //buttonNameIcon.appendChild(svgRemoveIcon); settingsButtonNameIcon.appendChild(svgSettingsControlIcon); - details.appendChild(summary); summaryContainer.appendChild(label); summary.appendChild(summaryContainer); layerItemSettings.appendChild(opacityControl); if (this._styles) { - details.appendChild(this._styles); + layerItemSettings.appendChild(this._styles); } if (this._userInputs) { var frag = document.createDocumentFragment(); @@ -700,7 +699,7 @@ export var MapMLLayer = L.Layer.extend({ selectSummaryLabel = document.createElement('label'); selectSummaryLabel.innerText = mapmlInput.getAttribute('name'); selectSummaryLabel.setAttribute('for', mapmlInput.getAttribute('id')); - L.DomUtil.addClass(selectdetails, 'mapml-control-layers'); + L.DomUtil.addClass(selectdetails, 'mapml-layer-item-settings'); selectsummary.appendChild(selectSummaryLabel); selectdetails.appendChild(selectsummary); selectdetails.appendChild(mapmlInput.htmlselect); @@ -709,7 +708,7 @@ export var MapMLLayer = L.Layer.extend({ } } } - details.appendChild(frag); + layerItemSettings.appendChild(frag); } return fieldset; }, @@ -996,7 +995,7 @@ export var MapMLLayer = L.Layer.extend({ styleOptionInput.checked = true; } stylesControl.appendChild(styleOption); - L.DomUtil.addClass(stylesControl,'mapml-control-layers'); + L.DomUtil.addClass(stylesControl,'mapml-layer-item-settings'); L.DomEvent.on(styleOptionInput,'click', changeStyle, layer); } layer._styles = stylesControl; From 7348e137223aa6de6a64a040102c488a679f9441 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Fri, 15 Oct 2021 09:47:07 -0400 Subject: [PATCH 06/23] fixed the Style and Time details element --- src/mapml.css | 42 ++++++++++++++++++++++++++++++++++++ src/mapml/layers/MapLayer.js | 4 ++-- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index 53892949d..62aba7b85 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -193,6 +193,48 @@ display: inline; } +.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary, +.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary ~ * { + padding-left: 15px; + padding-right: 15px; +} + +.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary { + padding-top: 12.5px; + padding-bottom: 12.5px; +} + +.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary { + padding-top: 4px; + padding-bottom: 4px; +} + +.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details { + padding-bottom: 4px; + margin: 0 0 0 15px; +} + +.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary ~ * { + display: block; + margin-top: 5px; + margin-left: 15px; + width: calc(100% - 15px); +} + +.mapml-control-layers summary::marker { + margin-right: 5px; +} + +.mapml-control-layers details [type="radio"], +.mapml-control-layers details [type="checkbox"] { + margin-right: 5px; + margin-left: 0; +} + +.mapml-control-layers summary span label > * { + vertical-align: middle; +} + .leaflet-control-layers-list .leaflet-control-layers-overlays > :not(:last-of-type) { border-bottom: 1px solid #e3e3e3; } diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index c49ade2e0..59ac11e02 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -699,7 +699,7 @@ export var MapMLLayer = L.Layer.extend({ selectSummaryLabel = document.createElement('label'); selectSummaryLabel.innerText = mapmlInput.getAttribute('name'); selectSummaryLabel.setAttribute('for', mapmlInput.getAttribute('id')); - L.DomUtil.addClass(selectdetails, 'mapml-layer-item-settings'); + L.DomUtil.addClass(selectdetails, 'mapml-control-layers'); selectsummary.appendChild(selectSummaryLabel); selectdetails.appendChild(selectsummary); selectdetails.appendChild(mapmlInput.htmlselect); @@ -995,7 +995,7 @@ export var MapMLLayer = L.Layer.extend({ styleOptionInput.checked = true; } stylesControl.appendChild(styleOption); - L.DomUtil.addClass(stylesControl,'mapml-layer-item-settings'); + L.DomUtil.addClass(stylesControl,'mapml-control-layers'); L.DomEvent.on(styleOptionInput,'click', changeStyle, layer); } layer._styles = stylesControl; From 11cdd731f222384741805a45939a068e245679dd Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Fri, 15 Oct 2021 10:39:09 -0400 Subject: [PATCH 07/23] fixed the vertical alignment of labels under Style --- src/mapml.css | 37 +------------------------------------ 1 file changed, 1 insertion(+), 36 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index 62aba7b85..7bea720e0 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -193,48 +193,13 @@ display: inline; } -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary, -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary ~ * { - padding-left: 15px; - padding-right: 15px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary { - padding-top: 12.5px; - padding-bottom: 12.5px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary { - padding-top: 4px; - padding-bottom: 4px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details { - padding-bottom: 4px; - margin: 0 0 0 15px; -} - -.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary ~ * { +.leaflet-control-layers-overlays > fieldset > .mapml-layer-item-settings > .mapml-control-layers > summary ~ * { display: block; margin-top: 5px; margin-left: 15px; width: calc(100% - 15px); } -.mapml-control-layers summary::marker { - margin-right: 5px; -} - -.mapml-control-layers details [type="radio"], -.mapml-control-layers details [type="checkbox"] { - margin-right: 5px; - margin-left: 0; -} - -.mapml-control-layers summary span label > * { - vertical-align: middle; -} - .leaflet-control-layers-list .leaflet-control-layers-overlays > :not(:last-of-type) { border-bottom: 1px solid #e3e3e3; } From 25a87f77f0f3d94486c554b6f5294c4d1a85366b Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Fri, 15 Oct 2021 11:01:31 -0400 Subject: [PATCH 08/23] replaced the x button with the html icon --- src/mapml/layers/MapLayer.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index 59ac11e02..edd1969d0 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -496,30 +496,19 @@ export var MapMLLayer = L.Layer.extend({ opacityControl = document.createElement('details'), opacityControlSummary = document.createElement('summary'), itemToggleLabel = document.createElement('label'), - svgRemoveIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), svgSettingsControlIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - removeIconPath1 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), - removeIconPath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), settingsControlPath1 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), settingsControlPath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), mapEl = this._layerEl.parentNode; this.opacityEl = opacity; // append the paths in svg for the remove layer and toggle icons - svgRemoveIcon.setAttribute('viewBox', '0 0 24 24'); - svgRemoveIcon.setAttribute('height', '22'); - svgRemoveIcon.setAttribute('width', '22'); svgSettingsControlIcon.setAttribute('viewBox', '0 0 24 24'); svgSettingsControlIcon.setAttribute('height', '22'); svgSettingsControlIcon.setAttribute('width', '22'); - removeIconPath1.setAttribute('d', 'M0 0h24v24H0V0z'); - removeIconPath1.setAttribute('fill', 'none'); - removeIconPath2.setAttribute('d', 'M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'); settingsControlPath1.setAttribute('d', 'M0 0h24v24H0z'); settingsControlPath1.setAttribute('fill', 'none'); settingsControlPath2.setAttribute('d', 'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'); - svgRemoveIcon.appendChild(removeIconPath1); - svgRemoveIcon.appendChild(removeIconPath2); svgSettingsControlIcon.appendChild(settingsControlPath1); svgSettingsControlIcon.appendChild(settingsControlPath2); @@ -671,9 +660,7 @@ export var MapMLLayer = L.Layer.extend({ layerItemProperty.appendChild(layerItemControls); layerItemControls.appendChild(removeControlButton); layerItemControls.appendChild(itemSettingControlButton); - //removeControlButton.appendChild(buttonNameIcon); itemSettingControlButton.appendChild(settingsButtonNameIcon); - //buttonNameIcon.appendChild(svgRemoveIcon); settingsButtonNameIcon.appendChild(svgSettingsControlIcon); summaryContainer.appendChild(label); summary.appendChild(summaryContainer); From 83c2822a22ad46918247729f931e23e078d08156 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Fri, 15 Oct 2021 13:31:38 -0400 Subject: [PATCH 09/23] made the time label clickable --- src/mapml.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/mapml.css b/src/mapml.css index 7bea720e0..63359648c 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -374,6 +374,7 @@ /* Disable pointer events where they'd interfere with the intended action. */ .leaflet-tooltip, .leaflet-crosshair *, +.mapml-layer-item-settings .mapml-control-layers summary label, .mapml-contextmenu-item > * { pointer-events: none!important; } From 73152dae1df25aef846a948ac0fcfd8a3f1d5f82 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Mon, 18 Oct 2021 08:02:01 -0400 Subject: [PATCH 10/23] repositioned properties --- src/mapml.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/mapml.css b/src/mapml.css index 63359648c..da8c8c467 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -609,6 +609,7 @@ button.mapml-button:disabled, align-items: center; display: flex; justify-content: space-between; + padding: 2% 10%; } .mapml-layer-item-controls { margin-inline-start: auto; From dd7faeb2c5c792560f545604a1ed32fd8b705406 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Mon, 18 Oct 2021 09:20:28 -0400 Subject: [PATCH 11/23] positioned the layer-item-properties class --- src/mapml.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mapml.css b/src/mapml.css index da8c8c467..fa0e79fa5 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -609,7 +609,7 @@ button.mapml-button:disabled, align-items: center; display: flex; justify-content: space-between; - padding: 2% 10%; + padding-left: .5rem; } .mapml-layer-item-controls { margin-inline-start: auto; From 394fb6360f29468ea44294327635d33b43287e1a Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Mon, 18 Oct 2021 10:57:31 -0400 Subject: [PATCH 12/23] fixed some css --- src/mapml.css | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index fa0e79fa5..d8560b610 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -619,19 +619,20 @@ button.mapml-button:disabled, vertical-align: middle; } -.mapml-layer-item-controls, -.mapml-layer-item-remove-control { - align-items: center; - display: flex; - justify-content: center; -} - .mapml-layer-item-controls button span { font-size: large; font-weight: 900; vertical-align: middle; } +.mapml-layer-item-controls, +.mapml-layer-item-remove-control, +.mapml-layer-item-settings-control { + align-items: center; + display: flex; + justify-content: center; +} + .mapml-layer-item-properties label { display: contents; padding-right: 15px; @@ -640,11 +641,6 @@ button.mapml-button:disabled, margin-right: 15px; } -.mapml-layer-item-properties label input, -.mapml-layer-item-properties label span { - vertical-align: middle; -} - .mapml-layer-item-toggle, .mapml-layer-item-remove-control, .mapml-layer-item-settings-control { From 9433198f8878bb95c235fcb4071fc92d973e4f70 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Mon, 18 Oct 2021 13:35:30 -0400 Subject: [PATCH 13/23] deleted the title attribute to fix an accessibility issue --- src/mapml/layers/MapLayer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index edd1969d0..d703902c2 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -568,7 +568,6 @@ export var MapMLLayer = L.Layer.extend({ } layerItemName.id = this._title; itemToggleLabel.classList.add('mapml-layer-item-toggle'); - itemToggleLabel.setAttribute('title', 'Enable Layer'); itemToggleLabel.appendChild(input); opacityControlSummary.innerText = 'Opacity'; opacityControlSummary.id = 'mapml-layer-item-opacity-' + this._title; From 3f6509f0b4cd00f10e1c6d6dfeaf571ccf88a8de Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Tue, 19 Oct 2021 10:11:05 -0400 Subject: [PATCH 14/23] made suggested changes to the css --- src/mapml.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index d8560b610..6d834781e 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -609,7 +609,7 @@ button.mapml-button:disabled, align-items: center; display: flex; justify-content: space-between; - padding-left: .5rem; + padding-inline-start: .5rem; } .mapml-layer-item-controls { margin-inline-start: auto; @@ -635,10 +635,7 @@ button.mapml-button:disabled, .mapml-layer-item-properties label { display: contents; - padding-right: 15px; - padding-left: 15px; text-indent: 5px; - margin-right: 15px; } .mapml-layer-item-toggle, @@ -654,8 +651,8 @@ button.mapml-button:disabled, display: block; padding-block-start: .25rem; padding-block-end: .25rem; - padding-inline-start: 44px; - padding-inline-end: 20px; + padding-inline-start: 2rem; + padding-inline-end: 1rem; } .mapml-layer-item-settings summary { From 4c0ac94367404226884471f7ae3380b18a65572e Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Wed, 20 Oct 2021 10:58:04 -0400 Subject: [PATCH 15/23] condensed some code --- src/mapml/layers/MapLayer.js | 43 ++++++++++-------------------------- 1 file changed, 12 insertions(+), 31 deletions(-) diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index d703902c2..5986f9c17 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -481,24 +481,21 @@ export var MapMLLayer = L.Layer.extend({ return this.options.attribution; }, getLayerUserControlsHTML: function () { - var fieldset = document.createElement('fieldset'), + var fieldset = L.DomUtil.create('fieldset', 'mapml-layer-item'), input = document.createElement('input'), - label = document.createElement('label'), - layerItemName = document.createElement('span'), + layerItemName = L.DomUtil.create('span', 'mapml-layer-item-name'), buttonNameIcon = document.createElement('span'), settingsButtonNameIcon = document.createElement('span'), - summary = document.createElement('summary'), - summaryContainer = document.createElement('div'), - layerItemProperty = document.createElement('div'), - layerItemControls = document.createElement('div'), - layerItemSettings = document.createElement('div'), + layerItemProperty = L.DomUtil.create('div', 'mapml-layer-item-properties', fieldset), + layerItemSettings = L.DomUtil.create('div', 'mapml-layer-item-settings', fieldset), + itemToggleLabel = L.DomUtil.create('label', 'mapml-layer-item-toggle', layerItemProperty), + layerItemControls = L.DomUtil.create('div', 'mapml-layer-item-controls', layerItemProperty), + opacityControl = L.DomUtil.create('details', 'mapml-layer-item-opacity', layerItemSettings), opacity = document.createElement('input'), - opacityControl = document.createElement('details'), opacityControlSummary = document.createElement('summary'), - itemToggleLabel = document.createElement('label'), - svgSettingsControlIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), - settingsControlPath1 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), - settingsControlPath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path'), + svgSettingsControlIcon = L.SVG.create('svg'), + settingsControlPath1 = L.SVG.create('path'), + settingsControlPath2 = L.SVG.create('path'), mapEl = this._layerEl.parentNode; this.opacityEl = opacity; @@ -512,14 +509,8 @@ export var MapMLLayer = L.Layer.extend({ svgSettingsControlIcon.appendChild(settingsControlPath1); svgSettingsControlIcon.appendChild(settingsControlPath2); - summaryContainer.classList.add('mapml-control-summary-container'); - layerItemProperty.classList.add('mapml-layer-item-properties'); - layerItemSettings.classList.add('mapml-layer-item-settings'); - fieldset.classList.add('mapml-layer-item'); buttonNameIcon.classList.add('mapml-button-icon'); - settingsButtonNameIcon.classList.add('mapml-button-icon'); - layerItemName.classList.add('mapml-layer-item-name'); - layerItemControls.classList.add('mapml-layer-item-controls'); + //settingsButtonNameIcon.classList.add('mapml-button-icon'); layerItemSettings.hidden = true; buttonNameIcon.setAttribute('aria-hidden', true); @@ -540,7 +531,6 @@ export var MapMLLayer = L.Layer.extend({ itemSettingControlButton.type = 'button'; itemSettingControlButton.title = 'Layer Settings'; itemSettingControlButton.setAttribute('aria-expanded', false); - //itemSettingControlButton.innerHTML = ""; itemSettingControlButton.classList.add('mapml-layer-item-settings-control', 'mapml-button'); L.DomEvent.on(itemSettingControlButton, 'click', (e)=>{ if(layerItemSettings.hidden == true){ @@ -567,13 +557,10 @@ export var MapMLLayer = L.Layer.extend({ layerItemName.innerHTML = ' ' + this._title; } layerItemName.id = this._title; - itemToggleLabel.classList.add('mapml-layer-item-toggle'); - itemToggleLabel.appendChild(input); opacityControlSummary.innerText = 'Opacity'; opacityControlSummary.id = 'mapml-layer-item-opacity-' + this._title; opacityControl.appendChild(opacityControlSummary); opacityControl.appendChild(opacity); - L.DomUtil.addClass(opacityControl,'mapml-layer-item-opacity'); opacity.setAttribute('type','range'); opacity.setAttribute('min', '0'); opacity.setAttribute('max','1.0'); @@ -652,18 +639,12 @@ export var MapMLLayer = L.Layer.extend({ L.DomEvent.on(opacity,'change', this._changeOpacity, this); - fieldset.appendChild(layerItemProperty); - fieldset.appendChild(layerItemSettings); - layerItemProperty.appendChild(itemToggleLabel); + itemToggleLabel.appendChild(input); itemToggleLabel.appendChild(layerItemName); - layerItemProperty.appendChild(layerItemControls); layerItemControls.appendChild(removeControlButton); layerItemControls.appendChild(itemSettingControlButton); itemSettingControlButton.appendChild(settingsButtonNameIcon); settingsButtonNameIcon.appendChild(svgSettingsControlIcon); - summaryContainer.appendChild(label); - summary.appendChild(summaryContainer); - layerItemSettings.appendChild(opacityControl); if (this._styles) { layerItemSettings.appendChild(this._styles); From 78256652d5a9cf27d59e5bad91a689fc9273d9c5 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Thu, 21 Oct 2021 08:02:32 -0400 Subject: [PATCH 16/23] made whitespace clickable and fixed some alignment --- src/mapml.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index 6d834781e..807ab8fba 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -615,9 +615,6 @@ button.mapml-button:disabled, margin-inline-start: auto; } -.mapml-layer-item-controls button svg { - vertical-align: middle; -} .mapml-layer-item-controls button span { font-size: large; @@ -625,6 +622,10 @@ button.mapml-button:disabled, vertical-align: middle; } +.mapml-layer-item-controls button svg { + vertical-align: text-bottom; +} + .mapml-layer-item-controls, .mapml-layer-item-remove-control, .mapml-layer-item-settings-control { @@ -634,11 +635,10 @@ button.mapml-button:disabled, } .mapml-layer-item-properties label { - display: contents; text-indent: 5px; } -.mapml-layer-item-toggle, + .mapml-layer-item-remove-control, .mapml-layer-item-settings-control { min-height: 44px; @@ -647,6 +647,10 @@ button.mapml-button:disabled, width: 44px; } +.mapml-layer-item-toggle{ + width: 100%; +} + .mapml-layer-item-settings > * { display: block; padding-block-start: .25rem; From 92db3efea72f97dd880604320f5cefe322e9e234 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Thu, 21 Oct 2021 09:05:01 -0400 Subject: [PATCH 17/23] reverted a change in drag.test --- test/e2e/core/drag.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/core/drag.test.js b/test/e2e/core/drag.test.js index aa13e6aef..5ec780bbe 100644 --- a/test/e2e/core/drag.test.js +++ b/test/e2e/core/drag.test.js @@ -75,7 +75,7 @@ jest.setTimeout(30000); expect(controlText.toLowerCase()).toContain(domLayer.toLowerCase()); expect(layerIndex).toEqual("2"); - expect(controlText).toBe("Canada Base Map - Transportation (CBMT)"); + expect(controlText).toBe(" Canada Base Map - Transportation (CBMT)"); }); test("[" + browserType + "]" + " Moving layer up one in control overlay", async () => { @@ -103,7 +103,7 @@ jest.setTimeout(30000); expect(controlText.toLowerCase()).toContain(domLayer.toLowerCase()); expect(layerIndex).toEqual("1"); - expect(controlText).toBe("Static MapML With Tiles"); + expect(controlText).toBe(" Static MapML With Tiles"); }); }); From f744c268397c156cb8dca7132ea343c8df4d201e Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Thu, 21 Oct 2021 13:42:36 -0400 Subject: [PATCH 18/23] fixed the alignment of the span element --- src/mapml.css | 10 ++++++---- src/mapml/layers/MapLayer.js | 2 +- test/e2e/core/drag.test.js | 4 ++-- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/mapml.css b/src/mapml.css index 807ab8fba..aead29b9a 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -634,10 +634,6 @@ button.mapml-button:disabled, justify-content: center; } -.mapml-layer-item-properties label { - text-indent: 5px; -} - .mapml-layer-item-remove-control, .mapml-layer-item-settings-control { @@ -648,9 +644,15 @@ button.mapml-button:disabled, } .mapml-layer-item-toggle{ + display: inline-flex !important; width: 100%; } +.mapml-layer-item-name { + word-break: break-word; + text-align: left; +} + .mapml-layer-item-settings > * { display: block; padding-block-start: .25rem; diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index 5986f9c17..a1d20aaa0 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -554,7 +554,7 @@ export var MapMLLayer = L.Layer.extend({ legendLink.draggable = false; layerItemName.appendChild(legendLink); } else { - layerItemName.innerHTML = ' ' + this._title; + layerItemName.innerHTML = this._title; } layerItemName.id = this._title; opacityControlSummary.innerText = 'Opacity'; diff --git a/test/e2e/core/drag.test.js b/test/e2e/core/drag.test.js index 5ec780bbe..aa13e6aef 100644 --- a/test/e2e/core/drag.test.js +++ b/test/e2e/core/drag.test.js @@ -75,7 +75,7 @@ jest.setTimeout(30000); expect(controlText.toLowerCase()).toContain(domLayer.toLowerCase()); expect(layerIndex).toEqual("2"); - expect(controlText).toBe(" Canada Base Map - Transportation (CBMT)"); + expect(controlText).toBe("Canada Base Map - Transportation (CBMT)"); }); test("[" + browserType + "]" + " Moving layer up one in control overlay", async () => { @@ -103,7 +103,7 @@ jest.setTimeout(30000); expect(controlText.toLowerCase()).toContain(domLayer.toLowerCase()); expect(layerIndex).toEqual("1"); - expect(controlText).toBe(" Static MapML With Tiles"); + expect(controlText).toBe("Static MapML With Tiles"); }); }); From 098b77918d2d285572b7d297bebf3846701502eb Mon Sep 17 00:00:00 2001 From: Anshpreet8 <34603452+Anshpreet8@users.noreply.github.com> Date: Thu, 21 Oct 2021 13:46:47 -0400 Subject: [PATCH 19/23] Update src/mapml.css Co-authored-by: Robert Linder --- src/mapml.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mapml.css b/src/mapml.css index aead29b9a..5255bb252 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -650,7 +650,7 @@ button.mapml-button:disabled, .mapml-layer-item-name { word-break: break-word; - text-align: left; + text-align: inline-start; } .mapml-layer-item-settings > * { From 218e097bac8eb8ab9e66d2a737e9dd5edffe48fa Mon Sep 17 00:00:00 2001 From: Anshpreet8 <34603452+Anshpreet8@users.noreply.github.com> Date: Mon, 25 Oct 2021 08:50:25 -0400 Subject: [PATCH 20/23] Update src/mapml.css Co-authored-by: Robert Linder --- src/mapml.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/mapml.css b/src/mapml.css index 5255bb252..9a7fc123a 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -651,6 +651,8 @@ button.mapml-button:disabled, .mapml-layer-item-name { word-break: break-word; text-align: inline-start; + padding-inline-start: .25rem; + padding-inline-end: 1rem; } .mapml-layer-item-settings > * { From 1549242cd83e57127f2e0d631e3b92276f19a48a Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Mon, 25 Oct 2021 11:31:59 -0400 Subject: [PATCH 21/23] allwed the layer to be dragged from the Remove Layer Control button to allow for better consistency --- src/mapml/layers/MapLayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index a1d20aaa0..edc79a392 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -521,7 +521,7 @@ export var MapMLLayer = L.Layer.extend({ removeControlButton.title = 'Remove Layer'; removeControlButton.innerHTML = ""; removeControlButton.classList.add('mapml-layer-item-remove-control', 'mapml-button'); - L.DomEvent.disableClickPropagation(removeControlButton); + //L.DomEvent.disableClickPropagation(removeControlButton); L.DomEvent.on(removeControlButton, 'click', L.DomEvent.stop); L.DomEvent.on(removeControlButton, 'click', (e)=>{ mapEl.removeChild(e.target.closest("fieldset").querySelector("span").layer._layerEl); From 00c98218c914e253e83eed80c41ba387425be48e Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Thu, 28 Oct 2021 08:23:49 -0400 Subject: [PATCH 22/23] changed document.createElement to L.DomUtil.create for better consistency --- src/mapml/layers/MapLayer.js | 31 +++++++++++-------------------- 1 file changed, 11 insertions(+), 20 deletions(-) diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index edc79a392..58592d64b 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -482,17 +482,16 @@ export var MapMLLayer = L.Layer.extend({ }, getLayerUserControlsHTML: function () { var fieldset = L.DomUtil.create('fieldset', 'mapml-layer-item'), - input = document.createElement('input'), + input = L.DomUtil.create('input'), layerItemName = L.DomUtil.create('span', 'mapml-layer-item-name'), - buttonNameIcon = document.createElement('span'), - settingsButtonNameIcon = document.createElement('span'), + settingsButtonNameIcon = L.DomUtil.create('span'), layerItemProperty = L.DomUtil.create('div', 'mapml-layer-item-properties', fieldset), layerItemSettings = L.DomUtil.create('div', 'mapml-layer-item-settings', fieldset), itemToggleLabel = L.DomUtil.create('label', 'mapml-layer-item-toggle', layerItemProperty), layerItemControls = L.DomUtil.create('div', 'mapml-layer-item-controls', layerItemProperty), opacityControl = L.DomUtil.create('details', 'mapml-layer-item-opacity', layerItemSettings), - opacity = document.createElement('input'), - opacityControlSummary = document.createElement('summary'), + opacity = L.DomUtil.create('input'), + opacityControlSummary = L.DomUtil.create('summary'), svgSettingsControlIcon = L.SVG.create('svg'), settingsControlPath1 = L.SVG.create('path'), settingsControlPath2 = L.SVG.create('path'), @@ -508,30 +507,26 @@ export var MapMLLayer = L.Layer.extend({ settingsControlPath2.setAttribute('d', 'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'); svgSettingsControlIcon.appendChild(settingsControlPath1); svgSettingsControlIcon.appendChild(settingsControlPath2); - - buttonNameIcon.classList.add('mapml-button-icon'); - //settingsButtonNameIcon.classList.add('mapml-button-icon'); layerItemSettings.hidden = true; - buttonNameIcon.setAttribute('aria-hidden', true); settingsButtonNameIcon.setAttribute('aria-hidden', true); - let removeControlButton = document.createElement('button'); + let removeControlButton = L.DomUtil.create('button', 'mapml-layer-item-remove-control', layerItemControls); removeControlButton.type = 'button'; removeControlButton.title = 'Remove Layer'; removeControlButton.innerHTML = ""; - removeControlButton.classList.add('mapml-layer-item-remove-control', 'mapml-button'); + removeControlButton.classList.add('mapml-button'); //L.DomEvent.disableClickPropagation(removeControlButton); L.DomEvent.on(removeControlButton, 'click', L.DomEvent.stop); L.DomEvent.on(removeControlButton, 'click', (e)=>{ mapEl.removeChild(e.target.closest("fieldset").querySelector("span").layer._layerEl); }, this); - let itemSettingControlButton = document.createElement('button'); + let itemSettingControlButton = L.DomUtil.create('button', 'mapml-layer-item-settings-control', layerItemControls); itemSettingControlButton.type = 'button'; itemSettingControlButton.title = 'Layer Settings'; itemSettingControlButton.setAttribute('aria-expanded', false); - itemSettingControlButton.classList.add('mapml-layer-item-settings-control', 'mapml-button'); + itemSettingControlButton.classList.add('mapml-button'); L.DomEvent.on(itemSettingControlButton, 'click', (e)=>{ if(layerItemSettings.hidden == true){ itemSettingControlButton.setAttribute('aria-expanded', true); @@ -641,8 +636,6 @@ export var MapMLLayer = L.Layer.extend({ itemToggleLabel.appendChild(input); itemToggleLabel.appendChild(layerItemName); - layerItemControls.appendChild(removeControlButton); - layerItemControls.appendChild(itemSettingControlButton); itemSettingControlButton.appendChild(settingsButtonNameIcon); settingsButtonNameIcon.appendChild(svgSettingsControlIcon); @@ -661,16 +654,14 @@ export var MapMLLayer = L.Layer.extend({ // don't add it again if it is referenced > once if (mapmlInput.tagName.toLowerCase() === 'map-select' && !frag.querySelector(id)) { // generate a
- var selectdetails = document.createElement('details'), - selectsummary = document.createElement('summary'), - selectSummaryLabel = document.createElement('label'); + var selectdetails = L.DomUtil.create('details', 'mapml-control-layers', frag), + selectsummary = L.DomUtil.create('summary'), + selectSummaryLabel = L.DomUtil.create('label'); selectSummaryLabel.innerText = mapmlInput.getAttribute('name'); selectSummaryLabel.setAttribute('for', mapmlInput.getAttribute('id')); - L.DomUtil.addClass(selectdetails, 'mapml-control-layers'); selectsummary.appendChild(selectSummaryLabel); selectdetails.appendChild(selectsummary); selectdetails.appendChild(mapmlInput.htmlselect); - frag.appendChild(selectdetails); } } } From 124a1821a59fa8d04124bf8196505fbdead74434 Mon Sep 17 00:00:00 2001 From: Anshpreet Date: Thu, 28 Oct 2021 12:55:51 -0400 Subject: [PATCH 23/23] fixed radio buttons and removed whitespace from id --- src/mapml/layers/MapLayer.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index 58592d64b..5dc2870fd 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -551,7 +551,7 @@ export var MapMLLayer = L.Layer.extend({ } else { layerItemName.innerHTML = this._title; } - layerItemName.id = this._title; + layerItemName.id = 'mapml-layer-item-name-{' + L.stamp(layerItemName) + '}'; opacityControlSummary.innerText = 'Opacity'; opacityControlSummary.id = 'mapml-layer-item-opacity-' + this._title; opacityControl.appendChild(opacityControlSummary); @@ -565,7 +565,7 @@ export var MapMLLayer = L.Layer.extend({ opacity.value = this._container.style.opacity || '1.0'; fieldset.setAttribute("aria-grabbed", "false"); - fieldset.setAttribute('aria-labelledby', this._title); + fieldset.setAttribute('aria-labelledby', layerItemName.id); fieldset.onmousedown = (downEvent) => { if(downEvent.target.tagName.toLowerCase() === "input" || downEvent.target.tagName.toLowerCase() === "select") return; @@ -942,12 +942,12 @@ export var MapMLLayer = L.Layer.extend({ var styleOption = document.createElement('span'), styleOptionInput = styleOption.appendChild(document.createElement('input')); styleOptionInput.setAttribute("type", "radio"); - styleOptionInput.setAttribute("id", "rad"+j); - styleOptionInput.setAttribute("name", "styles"); + styleOptionInput.setAttribute("id", "rad-"+L.stamp(styleOptionInput)); + styleOptionInput.setAttribute("name", "styles-"+layer._title); styleOptionInput.setAttribute("value", styleLinks[j].getAttribute('title')); styleOptionInput.setAttribute("data-href", new URL(styleLinks[j].getAttribute('href'),base).href); var styleOptionLabel = styleOption.appendChild(document.createElement('label')); - styleOptionLabel.setAttribute("for", "rad"+j); + styleOptionLabel.setAttribute("for", "rad-"+L.stamp(styleOptionInput)); styleOptionLabel.innerText = styleLinks[j].getAttribute('title'); if (styleLinks[j].getAttribute("rel") === "style self" || styleLinks[j].getAttribute("rel") === "self style") { styleOptionInput.checked = true;