Skip to content

[이벤트 위임] 과제4 번역(#1313) #1411

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

Merged
Violet-Bora-Lee merged 2 commits into from
May 1, 2022
Merged

[이벤트 위임] 과제4 번역(#1313) #1411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11ab606
[이벤트 위임] 과제4 번역(#1313)
Violet-Bora-Lee Apr 28, 2022
6aaa9f3
Merge branch 'master' into 1313
Violet-Bora-Lee May 1, 2022
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
22 changes: 11 additions & 11 deletions 2-ui/2-events/03-event-delegation/4-behavior-tooltip/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<style>
body {
height: 2000px;
/* make body scrollable, the tooltip should work after the scroll */
/* body 높이를 일부러 키워서 스크롤이 나타나도록 하였습니다. 스크롤 위치에 상관없이 요구사항대로 툴팁이 나타나야 합니다.*/
}

.tooltip {
Expand All @@ -25,13 +25,13 @@

<body>

<p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
<p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
<p>무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>

<button data-tooltip="the tooltip is longer than the element">Short button</button>
<button data-tooltip="HTML<br>tooltip">One more button</button>
<button data-tooltip="버튼 요소 길이보다 툴팁 길이가 훨씬 기네요.">짧은 버튼</button>
<button data-tooltip="두 줄짜리<br>툴팁">...또 다른 버튼...</button>

<p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
<p>버튼이 화면 맨 위쪽에 위치하도록 스크롤을 움직여보고, 그 상태에서 툴팁이 제대로 버튼 아래에 나타나는지 확인해보세요.</p>


<script>
Expand All @@ -40,25 +40,25 @@
document.onmouseover = function(event) {
let target = event.target;

// if we have tooltip HTML...
// data-tooltip 속성이 있는 요소
let tooltipHtml = target.dataset.tooltip;
if (!tooltipHtml) return;

// ...create the tooltip element
// 툴팁 요소를 만듭니다.

tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip';
tooltipElem.innerHTML = tooltipHtml;
document.body.append(tooltipElem);

// position it above the annotated element (top-center)
// 툴팁 요소를 data-tooltip 속성이 있는 요소 위, 가운데에 위치시킵니다.
let coords = target.getBoundingClientRect();

let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
if (left < 0) left = 0; // don't cross the left window edge
if (left < 0) left = 0; // 툴팁이 창 왼쪽 가장자리를 넘지 않도록 합니다.

let top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) { // if crossing the top window edge, show below instead
if (top < 0) { // 툴팁이 창 위로 넘치면 요소 아래에 보여줍니다.
top = coords.top + target.offsetHeight + 5;
}

Expand Down
12 changes: 6 additions & 6 deletions 2-ui/2-events/03-event-delegation/4-behavior-tooltip/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<style>
body {
height: 2000px;
/* 높이를 일부러 키워서 스크롤이 나타나도록 하였습니다. 스크롤 위치에 상관없이 요구사항대로 툴팁이 나타나야 합니다. */
/* body 높이를 일부러 키워서 스크롤이 나타나도록 하였습니다. 스크롤 위치에 상관없이 요구사항대로 툴팁이 나타나야 합니다.*/
}

.tooltip {
Expand All @@ -26,17 +26,17 @@

<body>

<p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
<p>LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa LaLaLa</p>
<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
<p>무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>

<button data-tooltip="the tooltip is longer than the element">Short button</button>
<button data-tooltip="버튼 요소 길이보다 툴팁 길이가 훨씬 기네요.">짧은 버튼</button>
<button data-tooltip="두 줄짜리<br>툴팁">...또 다른 버튼...</button>

<p>Scroll the page to make buttons appear on the top, check if the tooltips show up correctly.</p>
<p>버튼이 화면 맨 위쪽에 위치하도록 스크롤을 움직여보고, 그 상태에서 툴팁이 제대로 버튼 아래에 나타나는지 확인해보세요.</p>


<script>
// ...your code...
// ...여기에 코드를 작성하세요...
</script>

</body>
Expand Down
16 changes: 8 additions & 8 deletions 2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,37 @@ importance: 5

---

# Tooltip behavior
# 툴팁 보여주기

툴팁(tooltip)을 보여주는 JS 코드를 작성해봅시다.

`data-tooltip` 속성이 있는 요소에 마우스를 가져다 대면 툴팁이 보여야 하고, 마우스 커서가 요소에서 떠나면 툴팁이 사라져야 합니다.
`data-tooltip` 속성이 있는 요소에 마우스를 가져다 대면 툴팁이 보여야 하고, 마우스 커서가 요소에서 떠나면 툴팁이 사라져야 합니다.

`data-tooltip` 속성은 다음 HTML처럼 추가할 수 있습니다.
```html
<button data-tooltip="the tooltip is longer than the element">Short button</button>
<button data-tooltip="버튼 요소 길이보다 툴팁 길이가 훨씬 기네요.">짧은 버튼</button>
<button data-tooltip="두 줄짜리<br>툴팁">...또 다른 버튼...</button>
```

Should work like this:
답을 잘 작성했다면 아래 예시처럼 동작해야 합니다.

[iframe src="solution" height=200 border=1]

`data-tooltip`이 있는 요소엔 텍스트만 있다고 가정하겠습니다. 요소 안에 다른 태그가 있는 경우는 생각하지 않기로 합시다.

Details:
자세한 요구사항은 다음과 같습니다.

- 툴팁과 요소의 간격은 `5px`입니다.
- 가능하면 툴팁은 요소를 기준으로 중앙에 있도록 합시다.
- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
- 툴팁은 창 크기보다 커질 수 없습니다. 일반적인 경우라면 툴팁은 요소 위에 있을 텐데, 요소가 창 맨 위에 있어서 툴팁을 보여줄 공간이 없다면 툴팁은 요소 아래에 나타납니다.
- 툴팁안에 띄울 콘텐츠는 `data-tooltip` 속성에서 가져옵니다. 속성값은 HTML일 수 있습니다.

You'll need two events here:
원하는 기능을 구현하려면 다음 두 가지 이벤트가 필요합니다.
- `mouseover` -- 요소 안으로 포인터가 이동할 때 발생하는 이벤트
- `mouseout`-- 요소 밖으로 포인터가 이동할 때 발생하는 이벤트

이벤트 위임을 사용해서 두 개의 핸들러만으로 원하는 기능을 구현하세요. `document`에 핸들러를 추가해 `data-tooltip` 속성이 있는 요소 안이나 밖으로 마우스 포인터가 이동하는 경우를 모두 감지하고 두 핸들러를 통해 툴팁을 보여주거나 감추시면 됩니다.

After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
이렇게 툴팁 기능을 구현해 놓으면 자바스크립트에 익숙하지 않은 사람도 원하는 요소에 쉽게 툴팁을 보여줄 수 있을 겁니다.

P.S. 한 번에 한 개의 툴팁 만 보여줄 수 있습니다.