Skip to content

Create <map-caption> custom element#741

Merged
prushforth merged 15 commits into
Maps4HTML:mainfrom
kevinkim31:map-caption
Feb 15, 2023
Merged

Create <map-caption> custom element#741
prushforth merged 15 commits into
Maps4HTML:mainfrom
kevinkim31:map-caption

Conversation

@kevinkim31

Copy link
Copy Markdown
Contributor

Closes #736

@kevinkim31 kevinkim31 self-assigned this Feb 3, 2023
@prushforth

Copy link
Copy Markdown
Member

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

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

This comment was marked as resolved.

@AliyanH

AliyanH commented Feb 7, 2023

Copy link
Copy Markdown
Member

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

kevinkim31 commented Feb 7, 2023

Copy link
Copy Markdown
Contributor Author
  • 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.

@AliyanH AliyanH left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

some comments

Comment thread src/map-caption.js Outdated
Comment thread src/map-caption.js Outdated
Comment thread src/mapml-viewer.js
@kevinkim31

kevinkim31 commented Feb 10, 2023

Copy link
Copy Markdown
Contributor Author

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 prushforth left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

Comment thread src/map-caption.js Outdated
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;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

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.

Comment thread src/map-caption.js Outdated
Comment thread src/map-caption.js Outdated
Comment thread src/map-caption.js Outdated
// 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;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Good use of textContent, see comment above

Comment thread src/map-caption.js Outdated
Comment thread src/map-caption.js Outdated
}
});

this.observer.observe(this, {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Maybe observing too much, perhaps only subtree is necessary?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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.

Comment thread src/web-map.js Outdated
let mapcaption = this.querySelector('map-caption');

if (mapcaption != null){
setTimeout(() => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is so that the ariaupdate has time to load

Comment thread src/web-map.js Outdated
Comment thread src/web-map.js Outdated
Comment thread src/web-map.js Outdated

@prushforth prushforth left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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.

Comment thread src/map-caption.js
Comment thread src/map-caption.js Outdated
}
});

this.observer.observe(this, {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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.

Comment thread src/map-caption.js Outdated
Comment thread src/web-map.js Outdated

@prushforth prushforth left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM

@prushforth
prushforth merged commit abff1aa into Maps4HTML:main Feb 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Web map title or caption

3 participants