web3privacy/w3ps1
1
0
Fork 0
mirror of https://github.com/web3privacy/w3ps1.git synced 2024-10-15 16:26:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

Speaker anim

Browse source
This commit is contained in:
tree🌴 2023-02-16 13:26:53 +01:00
parent 8e56655fca
commit 21e28a720c
4 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
package-lock.json generated
View file

@ -21,6 +21,7 @@
"postcss": "^8.4.21", "postcss": "^8.4.21",
"prettier": "^2.8.0", "prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1", "prettier-plugin-svelte": "^2.8.1",
"remove-markdown": "^0.5.0",
"svelte": "^3.54.0", "svelte": "^3.54.0",
"svelte-markdown": "^0.2.3", "svelte-markdown": "^0.2.3",
"tailwindcss": "^3.2.6", "tailwindcss": "^3.2.6",
@ -2307,6 +2308,12 @@
"url": "https://github.com/sponsors/mysticatea" "url": "https://github.com/sponsors/mysticatea"
} }
}, },
"node_modules/remove-markdown": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.5.0.tgz",
"integrity": "sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg==",
"dev": true
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.1", "version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",

1
package.json
View file

@ -24,6 +24,7 @@
"postcss": "^8.4.21", "postcss": "^8.4.21",
"prettier": "^2.8.0", "prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1", "prettier-plugin-svelte": "^2.8.1",
"remove-markdown": "^0.5.0",
"svelte": "^3.54.0", "svelte": "^3.54.0",
"svelte-markdown": "^0.2.3", "svelte-markdown": "^0.2.3",
"tailwindcss": "^3.2.6", "tailwindcss": "^3.2.6",

12
src/lib/components/PeopleList.svelte
View file

@ -12,18 +12,24 @@
function twitterLink(handle) { function twitterLink(handle) {
return `https://twitter.com/${handle}`; return `https://twitter.com/${handle}`;
} }
function animateSpeaker (el) {
for(const e of el.target.getElementsByClassName('animate-speaker')) {
animateText({ target: e })
}
}
</script> </script>
{#each items.map(getPerson) as item} {#each items.map(getPerson) as item}
<div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-2/3 sm:w-48' : 'w-2/3 sm:w-64'} person-item"> <div class="hover:bg-white hover:text-black p-2 {size === 'small' ? 'w-2/3 sm:w-48' : 'w-2/3 sm:w-64'} person-item" on:mouseenter={animateSpeaker}>
<div> <div>
<a href={twitterLink(item.twitter)} target="_blank" <a href={twitterLink(item.twitter)} target="_blank"
><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a ><img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" /></a
> >
</div> </div>
<div class="mt-4">{item.name}</div> <div class="mt-4 speaker-name animate-speaker">{item.name}</div>
<div class="text-base text-mild"> <div class="text-base text-mild">
<a href={twitterLink(item.twitter)} class="hover:underline">@{item.twitter}</a> <a href={twitterLink(item.twitter)} class="hover:underline animate-speaker">@{item.twitter}</a>
</div> </div>
{#if item.caption} {#if item.caption}
<div class="mt-2 text-base text-supermild"><SvelteMarkdown source={item.caption} /></div> <div class="mt-2 text-base text-supermild"><SvelteMarkdown source={item.caption} /></div>

5
src/lib/helpers.js
View file

@ -1,3 +1,6 @@
import removeMd from 'remove-markdown'
export function rand(length) { export function rand(length) {
let result = ''; let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@ -18,7 +21,7 @@ export function animateText (ev) {
return; return;
} }
ev.target.setAttribute('data-animate', "1") ev.target.setAttribute('data-animate', "1")
const orig = ev.target.getAttribute('data-text') const orig = removeMd(ev.target.getAttribute('data-text'))
const steps = orig.length const steps = orig.length
const genRand = (pos = 0, len = null) => orig.substring(pos, len).split(' ').map(x => rand(x.length)).join(' ') const genRand = (pos = 0, len = null) => orig.substring(pos, len).split(' ').map(x => rand(x.length)).join(' ')