forked from devhatt/pet-dex-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: avatar button issue devhatt#18
- Loading branch information
1 parent
6fa036c
commit 4009756
Showing
5 changed files
with
49 additions
and
23 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { Component } from 'pet-dex-utilities'; | ||
import './index.scss'; | ||
import icon from './Icon.svg'; | ||
import iconHover from './iconHover.svg'; | ||
|
||
const html = ` | ||
<a href="#" class="avatarButton" data-select="container"> | ||
<img class="plus" data-select="image" src="${icon}" alt="" /> | ||
</a> | ||
`; | ||
|
||
export default function AvatarButton() { | ||
Component.call(this, { html }); | ||
|
||
const $image = this.selected.get('image'); | ||
const imageOriginal = icon; | ||
const imageHover = iconHover; | ||
|
||
$image.addEventListener('mouseover', () => ($image.src = imageHover)); | ||
$image.addEventListener('mouseout', () => ($image.src = imageOriginal)); | ||
} | ||
|
||
AvatarButton.prototype = Object.assign(AvatarButton.prototype, Component.prototype); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
body { | ||
background: #111; | ||
} | ||
|
||
.plus { | ||
padding: 18px; | ||
border-radius: 9999px; | ||
border: 1.5px solid #fff; | ||
background: rgba(32, 35, 38, 1); | ||
} | ||
|
||
.plus:hover { | ||
transition: 0.3s; | ||
border: 1.5px solid #62dcf6; | ||
cursor: pointer; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,11 @@ | ||
import { extractElements } from 'pet-dex-utilities'; | ||
import Card from '../components/Card'; | ||
import './index.scss'; | ||
|
||
function renderCards(qty, $container) { | ||
for (let i = 0; i < qty; i += 1) { | ||
const card = new Card(); | ||
card.mount($container); | ||
card.setTitle(`Card ${i}`); | ||
card.listen('purchase', () => { | ||
console.log(`purchase de quem usa o componente, esse é o card ${i}`); | ||
}); | ||
|
||
const $card = card.selected.get('card-button'); | ||
|
||
if (i === 2) { | ||
card.disable(); | ||
$card.classList.add('card-container__button--disabled'); | ||
} else { | ||
$card.classList.add('card-container__button--active'); | ||
} | ||
} | ||
} | ||
import AvatarButton from '../components/Avatar'; | ||
|
||
document.addEventListener('DOMContentLoaded', () => { | ||
const selected = extractElements([document.body]); | ||
const $container = selected.get('container'); | ||
|
||
renderCards(5, $container); | ||
const avatar = new AvatarButton(); | ||
avatar.mount($container); | ||
}); | ||
|