Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactoring HTML anatomy of items in layers #531

Merged
merged 22 commits into from
Oct 28, 2021
Merged

Refactoring HTML anatomy of items in layers #531

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
d484e6c
refactored the layer HTML anatomy to not include nested interactive e…
Oct 8, 2021
df90e05
made span a child element of label to fix a few issues
Oct 12, 2021
7ecf8c5
changed the locators in tests to reflect changes in the layer layout
Oct 12, 2021
5e73382
deleted css that was no longer needed
Oct 13, 2021
9acd92c
deleted unused variables and changed the x to an html icon
Oct 14, 2021
7348e13
fixed the Style and Time details element
Oct 15, 2021
11cdd73
fixed the vertical alignment of labels under Style
Oct 15, 2021
25a87f7
replaced the x button with the html icon
Oct 15, 2021
83c2822
made the time label clickable
Oct 15, 2021
73152da
repositioned properties
Oct 18, 2021
dd7faeb
positioned the layer-item-properties class
Oct 18, 2021
394fb63
fixed some css
Oct 18, 2021
9433198
deleted the title attribute to fix an accessibility issue
Oct 18, 2021
3f6509f
made suggested changes to the css
Oct 19, 2021
4c0ac94
condensed some code
Oct 20, 2021
7825665
made whitespace clickable and fixed some alignment
Oct 21, 2021
92db3ef
reverted a change in drag.test
Oct 21, 2021
f744c26
fixed the alignment of the span element
Oct 21, 2021
098b779
Update src/mapml.css
Anshpreet8 Oct 21, 2021
218e097
Update src/mapml.css
Anshpreet8 Oct 25, 2021
1549242
allwed the layer to be dragged from the Remove Layer Control button t…
Oct 25, 2021
00c9821
changed document.createElement to L.DomUtil.create for better consist…
Oct 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 109 additions & 57 deletions src/mapml.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,48 +189,17 @@
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 label {
display: inline;
}

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

.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;
}
Expand All @@ -240,9 +209,6 @@
margin-top: revert;
position: revert;
}
.mapml-control-layers summary label > * {
vertical-align: middle;
}

/*
* Context menu.
Expand Down Expand Up @@ -408,9 +374,8 @@
/* 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-layer-item-settings .mapml-control-layers summary label,
.mapml-contextmenu-item > * {
pointer-events: none!important;
}

Expand Down Expand Up @@ -570,23 +535,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) */
Expand Down Expand Up @@ -620,4 +568,108 @@ 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;
padding-inline-start: .5rem;
}
.mapml-layer-item-controls {
margin-inline-start: auto;
}


.mapml-layer-item-controls button span {
font-size: large;
font-weight: 900;
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 {
align-items: center;
display: flex;
justify-content: center;
}


.mapml-layer-item-remove-control,
.mapml-layer-item-settings-control {
min-height: 44px;
min-width: 44px;
height: 44px;
width: 44px;
}

.mapml-layer-item-toggle{
display: inline-flex !important;
width: 100%;
}

.mapml-layer-item-name {
word-break: break-word;
text-align: inline-start;
padding-inline-start: .25rem;
padding-inline-end: 1rem;
}

.mapml-layer-item-settings > * {
display: block;
padding-block-start: .25rem;
padding-block-end: .25rem;
padding-inline-start: 2rem;
padding-inline-end: 1rem;
}

.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%;
}
104 changes: 67 additions & 37 deletions src/mapml/layers/MapLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -481,66 +481,96 @@ 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'),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably use L.DomUtil.create(...) consistently. I think you can call it with no class values and have it work like document.createElement().

label = document.createElement('label'),
name = document.createElement('span'),
details = document.createElement('details'),
summary = document.createElement('summary'),
summaryContainer = document.createElement('div'),
layerItemName = L.DomUtil.create('span', 'mapml-layer-item-name'),
buttonNameIcon = document.createElement('span'),
ahmadayubi marked this conversation as resolved.
Show resolved Hide resolved
settingsButtonNameIcon = document.createElement('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'),
opacityControl = document.createElement('details'),
opacityControlSummary = document.createElement('summary'),
opacityControlSummaryLabel = document.createElement('label'),
svgSettingsControlIcon = L.SVG.create('svg'),
settingsControlPath1 = L.SVG.create('path'),
settingsControlPath2 = L.SVG.create('path'),
mapEl = this._layerEl.parentNode;
this.opacityEl = opacity;

// append the paths in svg for the remove layer and toggle icons
svgSettingsControlIcon.setAttribute('viewBox', '0 0 24 24');
svgSettingsControlIcon.setAttribute('height', '22');
svgSettingsControlIcon.setAttribute('width', '22');
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');
svgSettingsControlIcon.appendChild(settingsControlPath1);
svgSettingsControlIcon.appendChild(settingsControlPath2);

buttonNameIcon.classList.add('mapml-button-icon');
//settingsButtonNameIcon.classList.add('mapml-button-icon');

summaryContainer.classList.add('mapml-control-summary-container');
layerItemSettings.hidden = true;
buttonNameIcon.setAttribute('aria-hidden', true);
settingsButtonNameIcon.setAttribute('aria-hidden', true);

let removeButton = document.createElement('button');
removeButton.type = 'button';
removeButton.title = 'Remove Layer';
removeButton.innerHTML = "<span aria-hidden='true'>&#10006;</span>";
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)=>{
let removeControlButton = document.createElement('button');
ahmadayubi marked this conversation as resolved.
Show resolved Hide resolved
removeControlButton.type = 'button';
removeControlButton.title = 'Remove Layer';
removeControlButton.innerHTML = "<span aria-hidden='true'>&#10005;</span>";
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');
ahmadayubi marked this conversation as resolved.
Show resolved Hide resolved
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');
legendLink.text = ' ' + this._title;
legendLink.href = this._legendUrl;
legendLink.target = '_blank';
legendLink.draggable = false;
name.appendChild(legendLink);
layerItemName.appendChild(legendLink);
ahmadayubi marked this conversation as resolved.
Show resolved Hide resolved
} 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;
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');
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;
Expand Down Expand Up @@ -609,15 +639,15 @@ export var MapMLLayer = L.Layer.extend({

L.DomEvent.on(opacity,'change', this._changeOpacity, this);

fieldset.appendChild(details);
details.appendChild(summary);
summaryContainer.appendChild(label);
summaryContainer.appendChild(removeButton);
summary.appendChild(summaryContainer);
details.appendChild(opacityControl);
itemToggleLabel.appendChild(input);
itemToggleLabel.appendChild(layerItemName);
layerItemControls.appendChild(removeControlButton);
layerItemControls.appendChild(itemSettingControlButton);
itemSettingControlButton.appendChild(settingsButtonNameIcon);
settingsButtonNameIcon.appendChild(svgSettingsControlIcon);

if (this._styles) {
details.appendChild(this._styles);
layerItemSettings.appendChild(this._styles);
}
if (this._userInputs) {
var frag = document.createDocumentFragment();
Expand Down Expand Up @@ -645,7 +675,7 @@ export var MapMLLayer = L.Layer.extend({
}
}
}
details.appendChild(frag);
layerItemSettings.appendChild(frag);
}
return fieldset;
},
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/core/debugMode.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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")
Expand Down
Loading