Skip to content

Commit

Permalink
emoji lookup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@klezm
klezm committed Sep 4, 2023
1 parent d29728f commit 5ac6224
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 101 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
"check:types": "tsc",
"prettier": "prettier --check .",
"prettier:fix": "prettier --write .",
"test": "jest"
"test": "jest",
"start": "yarn install && yarn dev",
"start-vite": "yarn add -O --ignore-workspace-root-check vite && yarn install && vite"
},
"devDependencies": {
"@babel/core": "7.18.9",
Expand Down
45 changes: 41 additions & 4 deletions packages/emoji-mart-website/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<extends src="layout.html" locals='{ "exampleName": "", "exampleFile": "" }'>
<block name="content" type="append">
<div id="options">

<h1 class="flex flex-middle" style="margin-bottom: 1em;">
<em-emoji id="convenience_store"></em-emoji>
Emoji Mart
</h1>

<div class="flex flex-middle">
Set:&nbsp;<span class="select flex flex-grow"
><select id="set" class="flex-grow">
Expand Down Expand Up @@ -91,8 +97,9 @@
<div class="flex flex-middle">
Auto focus:&nbsp;<span class="select flex flex-grow"
><select id="autoFocus" class="flex-grow">
<option value="true">True</option>
<option value="false">False</option>
<option value="true">True</option></select
</select
><em-emoji id="arrow_down_small"></em-emoji
></span>
</div>
Expand Down Expand Up @@ -130,8 +137,8 @@
<div class="flex flex-middle">
Skin tone position:&nbsp;<span class="select flex flex-grow"
><select id="skinTonePosition" class="flex-grow">
<option value="preview">Preview</option>
<option value="search">Search</option>
<option value="preview">Preview</option>
<option value="none">None</option></select
><em-emoji id="arrow_down_small"></em-emoji
></span>
Expand All @@ -142,6 +149,30 @@
<span><em-emoji id="broom" fallback="🧹"></em-emoji></span>
</button>
</div>

<div class="flex flex-middle" style="margin-top: 1em;">
<a
href="https://github.com/missive/emoji-mart"
class="flex flex-middle"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
height="16"
width="16"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
&nbsp; GitHub
</a>
&nbsp;•&nbsp;
<a href="./examples.html">Examples</a>
</div>

</div>

<dialog id="dialog">
Expand Down Expand Up @@ -287,9 +318,15 @@
}

window.picker = new EmojiMart.Picker({
dynamicWidth: true,
emojiButtonSize: 110,
emojiSize: 110 - (110 / 4),
skinTonePosition: "search",
autoFocus: true,
//
parent: document.querySelector('#picker'),
data: localStorage.set || localStorage.version ? undefined : data,
autoFocus: localStorage.autoFocus,
// autoFocus: localStorage.autoFocus,
set: localStorage.set,
theme: localStorage.theme,
icons: localStorage.icons,
Expand All @@ -298,7 +335,7 @@
navPosition: localStorage.navPosition,
previewPosition: localStorage.previewPosition,
searchPosition: localStorage.searchPosition,
skinTonePosition: localStorage.skinTonePosition,
// skinTonePosition: localStorage.skinTonePosition,
onEmojiSelect: console.log,
custom: [
{
Expand Down
192 changes: 98 additions & 94 deletions packages/emoji-mart-website/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,116 +23,120 @@
<body>
<section class="flex flex-center">
<div>
<header>
<h1>
<em-emoji id="convenience_store"></em-emoji>
Emoji Mart
</h1>
<if condition="exampleName">
<a href="./examples.html">⬅️ Examples</a> → {{ exampleName }}
</if>
</header>
<if condition="exampleName">
<header>
<h1>
<em-emoji id="convenience_store"></em-emoji>
Emoji Mart
</h1>
<if condition="exampleName">
<a href="./examples.html">⬅️ Examples</a> → {{ exampleName }}
</if>
</header>
</if>

<div class="relative">
<block name="content">
<div id="picker" class="flex flex-center"></div>
</block>
</div>

<footer>
<nav class="flex flex-middle flex-center">
<if condition="exampleFile">
<a
href="https://github.com/missive/emoji-mart/tree/main/packages/emoji-mart-website/{{ exampleFile }}"
class="flex flex-middle"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
height="16"
width="16"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
&nbsp; Source code
</a>
&nbsp;•&nbsp;
<a href="./" title="Home"
><em-emoji id="convenience_store"></em-emoji
></a>
</if>
<else>
<a
href="https://github.com/missive/emoji-mart"
class="flex flex-middle"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
height="16"
width="16"
fill="currentColor"
<if condition="exampleName">
<footer>
<nav class="flex flex-middle flex-center">
<if condition="exampleFile">
<a
href="https://github.com/missive/emoji-mart/tree/main/packages/emoji-mart-website/{{ exampleFile }}"
class="flex flex-middle"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
&nbsp; GitHub
</a>
&nbsp;•&nbsp;
<a href="./examples.html">Examples</a>
</else>
</nav>

<div class="flex flex-center">
<div id="missive" class="flex flex-middle">
<div id="coin-box">
<img
src="./assets/missive.png"
width="34"
height="34"
draggable="false"
/>
</div>
<p>
Brought to you by the
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
height="16"
width="16"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
&nbsp; Source code
</a>
&nbsp;•&nbsp;
<a href="./" title="Home"
><em-emoji id="convenience_store"></em-emoji
></a>
</if>
<else>
<a
href="https://missiveapp.com"
title="Team Email, Chat & Tasks"
><em-emoji id="mailbox_with_mail"></em-emoji> Missive</a
href="https://github.com/missive/emoji-mart"
class="flex flex-middle"
>
team
</p>
<audio id="coin-audio" src="./assets/coin.mp3"></audio>
<script type="module">
const coinBox = document.querySelector('#coin-box')
const coinAudio = document.querySelector('#coin-audio')
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
height="16"
width="16"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
&nbsp; GitHub
</a>
&nbsp;•&nbsp;
<a href="./examples.html">Examples</a>
</else>
</nav>

coinBox.addEventListener('mousedown', () => {
const coin = document.createElement('span')
coin.className = 'coin-wrap'
coin.innerHTML = '<span class="coin"></span>'
<div class="flex flex-center" style="display: none;">
<div id="missive" class="flex flex-middle">
<div id="coin-box">
<img
src="./assets/missive.png"
width="34"
height="34"
draggable="false"
/>
</div>
<p>
Brought to you by the
<a
href="https://missiveapp.com"
title="Team Email, Chat & Tasks"
><em-emoji id="mailbox_with_mail"></em-emoji> Missive</a
>
team
</p>
<audio id="coin-audio" src="./assets/coin.mp3"></audio>
<script type="module">
const coinBox = document.querySelector('#coin-box')
const coinAudio = document.querySelector('#coin-audio')

coinBox.appendChild(coin)
coinBox.addEventListener('mousedown', () => {
const coin = document.createElement('span')
coin.className = 'coin-wrap'
coin.innerHTML = '<span class="coin"></span>'

const audio = new Audio(coinAudio.src)
audio.currentTime = 0.25
audio.volume = 0.33
audio.play()
coinBox.appendChild(coin)

coin.addEventListener('animationend', () => {
coinBox.removeChild(coin)
const audio = new Audio(coinAudio.src)
audio.currentTime = 0.25
audio.volume = 0.33
audio.play()

coin.addEventListener('animationend', () => {
coinBox.removeChild(coin)
})
})
})
</script>
</script>
</div>
</div>
</div>
</footer>
</footer>
</if>
</div>
</section>

Expand Down
24 changes: 22 additions & 2 deletions packages/emoji-mart-website/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,13 @@ dialog {
section {
max-width: 1000px;
margin: 0 auto;
padding: 4% 0;
// padding: 4% 0;
// padding: 10px 0;
}

header {
margin-bottom: 2em;
// margin-bottom: 2em;
margin-bottom: 10px;
text-align: center;
}

Expand Down Expand Up @@ -215,6 +217,8 @@ footer {
text-align: center;

nav { margin: 1em 0 2em }

// display: none;
}

#missive {
Expand Down Expand Up @@ -298,3 +302,19 @@ $coinSize: 24px;
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}


// my custom styles

em-emoji-picker {
// width: 400px;
// width: 100%;
width: 80vw;
// min-width: 250px;
// height: 100%;
// height: 85vh;
height: 99vh;
resize: horizontal;
// overflow: auto;
overflow-x: auto;
}
5 changes: 5 additions & 0 deletions packages/emoji-mart/src/components/Picker/PickerProps.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
export default {
autoFocus: {
value: false,
// value: true,
},
dynamicWidth: {
value: false,
// value: true,
},
emojiButtonColors: {
value: null,
Expand All @@ -13,9 +15,11 @@ export default {
},
emojiButtonSize: {
value: 36,
// value: 100,
},
emojiSize: {
value: 24,
// value: 100 - (100 / 4),
},
emojiVersion: {
value: 14,
Expand Down Expand Up @@ -70,6 +74,7 @@ export default {
},
perLine: {
value: 9,
// value: 20,
},
previewEmoji: {
value: null,
Expand Down
Loading

0 comments on commit 5ac6224

Please sign in to comment.