Create <map-caption> custom element #741

kevinkim31 · 2023-02-03T20:27:05Z

Closes #736

prushforth · 2023-02-05T22:52:21Z

I think that the generated aria-label should be removed if the <map-caption> is disconnected / deleted? WDYT?

AliyanH · 2023-02-07T20:27:14Z

This is working great, just had 2 comments:

I think we should probably have a test for testing the removal of map-caption now that it is functioning properly.
When you have multiple <map-caption>'s I think the most recently added map-caption is used, which seems logical, but once that most recent map-caption is removed and there are other map-captions that are present, the mapml-viewer does not incorporate them, which does not seem right. I would assume it should used the second most recent one?

implement <map-caption> custom element for web-map fix minor details and addded comment about potential features and limitations add tests fix minor details for testing Revert "Merge branch 'map-caption' of https://github.com/kevinkim31/Web-Map-Custom-Element into map-caption" This reverts commit 770e2a7, reversing changes made to b9b8ddb. add tests fix minor details for testing add removing function add removing function

kevinkim31 · 2023-02-07T20:49:30Z

When you have multiple <map-caption>'s I think the most recently added map-caption is used, which seems logical, but
once that most recent map-caption is removed and there are other map-captions that are present, the mapml-viewer does not incorporate them, which does not seem right. I would assume it should used the second most recent one?

I think this would require adding code to mapml-viewer itself, which I'm not sure is an issue or not.

…ustom-Element into map-caption

AliyanH

some comments

src/map-caption.js

src/mapml-viewer.js

kevinkim31 · 2023-02-10T18:10:31Z

Fixes:

Only allows innerHTML modifications to the first map-caption
Doesn't delete aria-label when one was initially set up by user; even if separate map-caption elements are created
Only the first map-captioncan modify and remove the aria-label except for if aria-label is created manually (mentioned in previous point)

prushforth

Tests look good, I suggest a few updates, if possible. Thanks!

prushforth · 2023-02-10T22:05:03Z

src/map-caption.js

+    connectedCallback() {
+
+        // calls MutationObserver; needed to observe changes to content between <map-caption> tags and update to aria-label
+        let mapcaption = this.parentElement.querySelector('map-caption').innerHTML;


I think you can use this.textContent here, unless I'm mistaken. Also, the query you're making is returning the first and only the first of potentially many <map-caption> elements, which will sometimes be this one, and sometimes not.

I think .textContent is appropriate here. I could be convinced otherwise, but See for a discussion: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext

For mapcaption, I need this to return the first map-caption only so that I can store it to then compare it to the mapcaption that was removed/modified.

src/map-caption.js

prushforth · 2023-02-10T22:11:27Z

src/map-caption.js

+        // don't change aria-label if one already exists from user  (checks when element is first created)
+        if (!this.parentElement.hasAttribute('aria-label'))
+        {
+            const ariaLabel = this.textContent;


Good use of textContent, see comment above

src/map-caption.js

prushforth · 2023-02-10T22:29:03Z

src/map-caption.js

+            }
+        });
+
+        this.observer.observe(this, {


Maybe observing too much, perhaps only subtree is necessary?

Still think that we're observing too much for <map-caption>, only need to watch our content / subtree, no? If you disagree, put a comment below, then mark as resolved. Thanks.

prushforth · 2023-02-10T22:33:55Z

src/web-map.js

+    let mapcaption = this.querySelector('map-caption');
+
+    if (mapcaption != null){
+      setTimeout(() => {


Why is it required to put this on the event queue?

This is so that the ariaupdate has time to load

src/web-map.js

prushforth

A couple of small things. A test for when you add <map-caption> inside e.g. <layer-> to show it doesn't add aria-label to that element would be good.

src/map-caption.js

prushforth · 2023-02-13T20:27:43Z

src/map-caption.js

+            }
+        });
+
+        this.observer.observe(this, {


Still think that we're observing too much for <map-caption>, only need to watch our content / subtree, no? If you disagree, put a comment below, then mark as resolved. Thanks.

src/map-caption.js

src/web-map.js

…ustom-Element into map-caption

prushforth

LGTM

kevinkim31 self-assigned this Feb 3, 2023

kevinkim31 marked this pull request as ready for review February 7, 2023 14:08

This comment was marked as resolved.

Sign in to view

AliyanH mentioned this pull request Feb 7, 2023

Add documentation for map-caption Maps4HTML/web-map-doc#102

Merged

kevinkim31 closed this Feb 7, 2023

kevinkim31 reopened this Feb 7, 2023

prushforth force-pushed the map-caption branch from b2d2b5e to 6fc0d56 Compare February 7, 2023 20:49

prushfor and others added 4 commits February 7, 2023 16:22

Add caption to demo map that is distributed with dist

2f8c5f7

remove delete function for now, add aria-label precheck

2c4b1f9

Merge branch 'map-caption' of https://github.com/kevinkim31/Web-Map-C…

01c525b

…ustom-Element into map-caption

multiple arialabels

7320940

AliyanH reviewed Feb 10, 2023

View reviewed changes

src/map-caption.js Outdated Show resolved Hide resolved

src/map-caption.js Outdated Show resolved Hide resolved

src/mapml-viewer.js Show resolved Hide resolved

kevinkim31 added 2 commits February 10, 2023 11:56

major fixes

8ea7b40

add testing and slight modifications to further bulletproof

d7967cf

change document -> this

555e817

prushforth requested changes Feb 10, 2023

View reviewed changes

kevinkim31 and others added 4 commits February 12, 2023 19:10

syntax fixing

4a5f24e

test

06bbf29

test 2

73628cd

test 3

dc50104

prushforth requested changes Feb 14, 2023

View reviewed changes

kevinkim31 added 3 commits February 14, 2023 14:15

add testing for layer and other fixes

fb03226

Merge branch 'map-caption' of https://github.com/kevinkim31/Web-Map-C…

a2bfa4d

…ustom-Element into map-caption

move function inside isconnected block

e252ac2

prushforth approved these changes Feb 15, 2023

View reviewed changes

prushforth merged commit abff1aa into Maps4HTML:main Feb 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create <map-caption> custom element #741

Create <map-caption> custom element #741

kevinkim31 commented Feb 3, 2023

prushforth commented Feb 5, 2023

This comment was marked as resolved.

AliyanH commented Feb 7, 2023

kevinkim31 commented Feb 7, 2023 •

edited

Loading

AliyanH left a comment

kevinkim31 commented Feb 10, 2023 •

edited

Loading

prushforth left a comment

prushforth Feb 10, 2023

kevinkim31 Feb 10, 2023

prushforth Feb 10, 2023

prushforth Feb 10, 2023

prushforth Feb 13, 2023

prushforth Feb 10, 2023

kevinkim31 Feb 10, 2023

prushforth left a comment

prushforth Feb 13, 2023

prushforth left a comment

Create <map-caption> custom element #741

Create <map-caption> custom element #741

Conversation

kevinkim31 commented Feb 3, 2023

prushforth commented Feb 5, 2023

This comment was marked as resolved.

AliyanH commented Feb 7, 2023

kevinkim31 commented Feb 7, 2023 • edited Loading

AliyanH left a comment

Choose a reason for hiding this comment

kevinkim31 commented Feb 10, 2023 • edited Loading

prushforth left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prushforth left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prushforth left a comment

Choose a reason for hiding this comment

kevinkim31 commented Feb 7, 2023 •

edited

Loading

kevinkim31 commented Feb 10, 2023 •

edited

Loading