You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
435 lines
17 KiB
435 lines
17 KiB
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|
<title>Gitmoji Lite</title> |
|
<link rel="icon" href="https://raw.githubusercontent.com/carloscuesta/gitmoji/master/public/static/favicon.ico"> |
|
<link rel="stylesheet" href="https://unpkg.com/destyle.css@2.0.2/destyle.css"> |
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900"> |
|
<!--suppress CssUnusedSymbol --> |
|
<style> |
|
:root { |
|
--color-dark: #202225; |
|
--color-medium: #2F3136; |
|
--color-light: #B9BBBE; |
|
|
|
--size-biggest: 6rem; |
|
--size-bigger: 3rem; |
|
--size-big: 2rem; |
|
--size-normal: 1.3rem; |
|
--size-small: 1rem; |
|
--size-smaller: 0.85rem; |
|
|
|
--column-count: 4; |
|
} |
|
|
|
@font-face { |
|
font-family: 'Avenir'; |
|
font-weight: 400; |
|
src: url('https://rawcdn.githack.com/bitcamp/bitcamp-branding/6398cd8d73108dac7fe9c85a991aee07a58119e3/fonts/Avenir/Avenir-Regular.woff2') format('woff2'); |
|
} |
|
|
|
@font-face { |
|
font-family: 'Avenir'; |
|
font-weight: 700; |
|
src: url('https://rawcdn.githack.com/bitcamp/bitcamp-branding/6398cd8d73108dac7fe9c85a991aee07a58119e3/fonts/Avenir/Avenir-Bold.woff2') format('woff2'); |
|
} |
|
|
|
::placeholder { |
|
color: inherit; |
|
} |
|
|
|
.app { |
|
background-color: var(--color-dark); |
|
color: var(--color-light); |
|
font-family: 'Avenir', sans-serif; |
|
font-size: var(--size-normal); |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
.app__header, |
|
.app__header__title, |
|
.app__header__subtitle, |
|
.app__header__search, |
|
.app__main__gitmojis, |
|
.app__footer { |
|
margin: var(--size-normal) 0; |
|
} |
|
.app__header { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
.app__header__title, |
|
.app__header__subtitle { |
|
font-weight: 700; |
|
} |
|
.app__header__title { |
|
font-size: var(--size-biggest); |
|
} |
|
.app__header__title__emoji { |
|
height: var(--size-biggest); |
|
} |
|
.app__header__subtitle { |
|
font-size: var(--size-big); |
|
text-align: center; |
|
} |
|
.app__header__search__input { |
|
padding: var(--size-normal); |
|
border-radius: var(--size-bigger); |
|
background-color: var(--color-medium); |
|
width: 50vw; |
|
} |
|
.app__main { |
|
background-color: var(--color-medium); |
|
padding: 0 12.5vw; |
|
} |
|
@keyframes loader { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
.app__main__loader { |
|
margin: 0 auto; |
|
display: flex; |
|
width: var(--size-biggest); |
|
height: var(--size-biggest); |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.app__main__loader--hidden { |
|
display: none; |
|
} |
|
.app__main__loader:after { |
|
content: ' '; |
|
display: block; |
|
width: var(--size-big); |
|
height: var(--size-big); |
|
border-radius: 50%; |
|
border: 6px solid #fff; |
|
border-color: #fff transparent #fff transparent; |
|
animation: loader 1.2s linear infinite; |
|
} |
|
.app__main__gitmojis { |
|
display: grid; |
|
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr)); |
|
} |
|
.app__main__gitmojis__item { |
|
margin: var(--size-normal); |
|
background-color: var(--color-dark); |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
position: relative; |
|
} |
|
.app__main__gitmojis__item--unofficial:before { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
content: 'Unofficial'; |
|
margin: 0.5rem; |
|
padding: 0.25rem 0.5rem; |
|
border-radius: 0.25rem; |
|
font-size: var(--size-smaller); |
|
color: var(--color-dark); |
|
background-color: var(--color-light); |
|
} |
|
.app__main__gitmojis__item__emoji, |
|
.app__main__gitmojis__item__code { |
|
cursor: pointer; |
|
} |
|
.app__main__gitmojis__item__emoji { |
|
/*noinspection CssUnresolvedCustomProperty*/ |
|
background-color: var(--item-color); |
|
padding: var(--size-small) 0 var(--size-normal) 0; |
|
font-size: var(--size-biggest); |
|
width: 100%; |
|
text-align: center; |
|
font-family: |
|
'Apple Color Emoji', |
|
'Segoe UI Emoji', |
|
'Noto Color Emoji', |
|
'Segoe UI Symbol', |
|
'Android Emoji', |
|
'EmojiSymbols', |
|
sans-serif; |
|
color: rgba(0, 0, 0, 0.80); |
|
} |
|
.app__main__gitmojis__item__emoji:hover { |
|
color: rgba(0, 0, 0, 1); |
|
} |
|
.app__main__gitmojis__item__code, |
|
.app__main__gitmojis__item__description { |
|
margin: var(--size-small); |
|
} |
|
.app__main__gitmojis__item__code { |
|
font-weight: 700; |
|
} |
|
.app__main__gitmojis__item__code:hover { |
|
/*noinspection CssUnresolvedCustomProperty*/ |
|
color: var(--item-color); |
|
} |
|
.app__main__gitmojis__item__description { |
|
text-align: center; |
|
font-size: var(--size-small); |
|
height: calc(var(--size-small) * 2); |
|
} |
|
.app__footer { |
|
text-align: center; |
|
} |
|
.app__footer__credits { |
|
line-height: var(--size-big); |
|
} |
|
.app__footer__credits__link { |
|
border-bottom: 1px dotted var(--color-light); |
|
} |
|
.app__footer__credits__link:hover { |
|
border-bottom-style: solid; |
|
} |
|
.app__notification, |
|
.app__scrollTop { |
|
position: fixed; |
|
height: var(--size-bigger); |
|
line-height: var(--size-bigger); |
|
text-align: center; |
|
color: var(--color-dark); |
|
background-color: var(--color-light); |
|
box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px; |
|
} |
|
.app__notification { |
|
top: var(--size-normal); |
|
left: var(--size-normal); |
|
border-radius: var(--size-normal); |
|
padding: 0 var(--size-normal); |
|
transition: opacity 0.25s; |
|
opacity: 0; |
|
} |
|
.app__notification--visible { |
|
opacity: 1; |
|
} |
|
.app__scrollTop { |
|
bottom: var(--size-normal); |
|
right: var(--size-normal); |
|
width: var(--size-bigger); |
|
border-radius: 50%; |
|
cursor: pointer; |
|
} |
|
@media (max-width: 1900px) { |
|
:root { |
|
--size-biggest: 5rem; |
|
--size-normal: 1rem; |
|
} |
|
} |
|
@media (max-width: 1400px) { |
|
.app__main { |
|
padding: 0 6.25vw; |
|
} |
|
} |
|
@media (max-width: 1200px) { |
|
:root { |
|
--size-biggest: 4rem; |
|
--size-small: 0.75rem; |
|
} |
|
.app__main { |
|
padding: 0 var(--size-normal); |
|
} |
|
} |
|
@media (max-width: 1100px) { |
|
:root { |
|
--column-count: 3; |
|
} |
|
} |
|
@media (max-width: 900px) { |
|
:root { |
|
--size-normal: 1.3rem; |
|
--size-small: 1rem; |
|
|
|
--column-count: 2; |
|
} |
|
} |
|
@media (max-width: 750px) { |
|
:root { |
|
--size-normal: 1rem; |
|
--size-small: 0.75rem; |
|
} |
|
} |
|
@media (max-width: 550px) { |
|
:root { |
|
--size-normal: 0.75rem; |
|
--size-small: 0.5rem; |
|
} |
|
} |
|
@media (max-width: 450px) { |
|
:root { |
|
--size-big: 1.5rem; |
|
--size-normal: 1rem; |
|
--size-small: 0.75rem; |
|
|
|
--column-count: 1; |
|
} |
|
} |
|
@media (max-width: 300px) { |
|
:root { |
|
--size-normal: 0.75rem; |
|
--size-small: 0.5rem; |
|
} |
|
} |
|
</style> |
|
<script>module = {}</script> |
|
<script defer src="https://unpkg.com/fast-dice-coefficient@1.0.3/dice.js"></script> |
|
<script> |
|
const copyToClipboard = text => { |
|
const el = document.createElement('textarea'); |
|
el.style.position = 'absolute'; |
|
el.style.opacity = '0'; |
|
el.style.zIndex = '-1'; |
|
el.value = text; |
|
document.body.appendChild(el); |
|
el.select(); |
|
document.execCommand('copy'); |
|
document.body.removeChild(el); |
|
}; |
|
const notify = text => { |
|
const el = document.querySelector('.app__notification'); |
|
el.textContent = text; |
|
el.classList.add('app__notification--visible'); |
|
setTimeout(() => el.classList.remove('app__notification--visible'), 2000); |
|
}; |
|
window.addEventListener('DOMContentLoaded', async () => { |
|
document.querySelector('.app__scrollTop').onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
|
|
const |
|
colors = (await (await fetch('https://raw.githubusercontent.com/carloscuesta/gitmoji/master/src/components/GitmojiList/emojiColorsMap.js')).text()) |
|
.split('\n').filter(line => line.includes(':')).map(item => item.replace(/[\s',;]/g, '').split(':')), |
|
{ gitmojis } = await (await fetch('https://raw.githubusercontent.com/carloscuesta/gitmoji/master/src/data/gitmojis.json')).json(); |
|
gitmojis.push(...[ |
|
{ |
|
emoji: '⏩', |
|
code: ':fast_forward:', |
|
description: 'Redo changes.' |
|
} |
|
].map(item => ({ ...item, isUnofficial: true }))); |
|
gitmojis.forEach(({ emoji, code, description, name, isUnofficial }) => { |
|
const |
|
itemEmoji = document.createElement('span'), |
|
itemCode = document.createElement('span'), |
|
itemDescription = document.createElement('span'), |
|
item = document.createElement('li'); |
|
itemEmoji.classList.add('app__main__gitmojis__item__emoji'); |
|
itemEmoji.textContent = emoji; |
|
itemEmoji.onclick = () => { |
|
copyToClipboard(emoji); |
|
notify(`${emoji} copied !`); |
|
}; |
|
itemCode.classList.add('app__main__gitmojis__item__code') |
|
itemCode.textContent = code; |
|
itemCode.onclick = () => { |
|
copyToClipboard(code); |
|
notify(`${code} copied !`); |
|
}; |
|
itemDescription.classList.add('app__main__gitmojis__item__description'); |
|
itemDescription.textContent = description; |
|
item.classList.add('app__main__gitmojis__item'); |
|
if(isUnofficial) |
|
item.classList.add('app__main__gitmojis__item--unofficial'); |
|
item.appendChild(itemEmoji); |
|
item.appendChild(itemCode); |
|
item.appendChild(itemDescription); |
|
if(name) |
|
item.style.setProperty('--item-color', colors.find(([key]) => key === name)[1] || 'transparent'); |
|
document.querySelector('.app__main__gitmojis').appendChild(item); |
|
}); |
|
|
|
document.querySelector('.app__header__search__input').oninput = ({ target: { value } }) => { |
|
if(!value) |
|
document.querySelectorAll('.app__main__gitmojis__item').forEach((el, index) => el.style.order = (index + 1).toString()); |
|
else |
|
[...document.querySelectorAll('.app__main__gitmojis__item')] |
|
.sort((a, b) => dice(value, b.textContent) - dice(value, a.textContent)) |
|
.forEach((el, index) => el.style.order = (index + 1).toString()); |
|
}; |
|
|
|
document.querySelector('.app__main__loader').classList.add('app__main__loader--hidden'); |
|
}); |
|
document.addEventListener('keydown', event => { |
|
if(event.ctrlKey && event.key === 'f'){ |
|
event.preventDefault(); |
|
document.querySelector('.app__header__search__input').focus(); |
|
} |
|
}); |
|
</script> |
|
</head> |
|
<body class="app"> |
|
<header class="app__header"> |
|
<h1 class="app__header__title"> |
|
gitm<!-- |
|
--><img |
|
class="app__header__title__emoji" |
|
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Emojione_1F602.svg/1200px-Emojione_1F602.svg.png" |
|
alt="o" |
|
><!-- |
|
-->ji |
|
</h1> |
|
<h2 class="app__header__subtitle">An emoji guide for your commit messages.</h2> |
|
<label class="app__header__search"> |
|
<input |
|
class="app__header__search__input" |
|
type="text" |
|
placeholder="Search" |
|
autofocus |
|
> |
|
</label> |
|
</header> |
|
<main class="app__main"> |
|
<div class="app__main__loader"></div> |
|
<ul class="app__main__gitmojis"></ul> |
|
</main> |
|
<footer class="app__footer"> |
|
<p class="app__footer__credits"> |
|
<a |
|
class="app__footer__credits__link" |
|
href="https://github.com/carloscuesta/gitmoji" |
|
target="_blank" |
|
><!-- |
|
-->Original Gitmoji project by carloscuesta<!-- |
|
--></a> |
|
— |
|
<a |
|
class="app__footer__credits__link" |
|
href="https://git.kaki87.net/KaKi87/gitmoji-lite" |
|
target="_blank" |
|
><!-- |
|
-->Modified Gitmoji Lite project by KaKi87<!-- |
|
--></a> |
|
<br> |
|
Both released under the MIT license. |
|
</p> |
|
</footer> |
|
<div class="app__notification"></div> |
|
<button class="app__scrollTop">▲</button> |
|
</body> |
|
</html> |
|
|
|
<!-- |
|
MIT License |
|
|
|
Copyright (c) 2020 Tiana Lemesle |
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
|
of this software and associated documentation files (the "Software"), to deal |
|
in the Software without restriction, including without limitation the rights |
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
copies of the Software, and to permit persons to whom the Software is |
|
furnished to do so, subject to the following conditions: |
|
|
|
The above copyright notice and this permission notice shall be included in all |
|
copies or substantial portions of the Software. |
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|
SOFTWARE. |
|
--> |