diff --git a/1000-hours/.vitepress/theme/components/SpeakWord.scss b/1000-hours/.vitepress/theme/components/SpeakWord.scss index 94a3fa37..dc94fc0f 100644 --- a/1000-hours/.vitepress/theme/components/SpeakWord.scss +++ b/1000-hours/.vitepress/theme/components/SpeakWord.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; gap: 0.5rem; - border-top: 1px solid #d87676; + // border-bottom: 1px solid #d87676; padding: 8px 0; .ctrl { display: flex; @@ -42,25 +42,63 @@ .play-button { border: none; - border-radius: 4rem; - padding: 0; + border-radius: 2px; + padding: 0 4px; text-align: center; text-decoration: none; display: inline-block; font-size: 28px; cursor: pointer; height: 28px; - width: 48px; + max-width: 48px; display: flex; align-items: center; + position: relative; + transition: transform 0.3s ease; + .emoji { + width: 20px; + font-size: 1rem; + } .icon { + position: absolute; cursor: pointer; opacity: 0.7; - height: 14px; - width: 14px; + width: 12px; + height: 12px; + padding: 2px; + border-radius: 10px; + bottom: 0; + opacity: 1; + right: 0; + transform: translateY(-3px); + } + &.female { + .icon { + background-color: #d87272; + } + } + &.male { + .icon { + background-color: #7575d3; + } + } + &:active { + animation: pulse 0.3s ease; + } + &:hover { + transform: scale(1.1); } } } -.speak-word:last-child { - border-bottom: 1px solid #d87676; -} +// add an active animation to the play button +@keyframes pulse { + 0% { + transform: scale(1.1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1.1); + } +} \ No newline at end of file diff --git a/1000-hours/.vitepress/theme/components/SpeakWordInlineConverter.vue b/1000-hours/.vitepress/theme/components/SpeakWordInlineConverter.vue index 36bfd7dc..579754a9 100644 --- a/1000-hours/.vitepress/theme/components/SpeakWordInlineConverter.vue +++ b/1000-hours/.vitepress/theme/components/SpeakWordInlineConverter.vue @@ -12,7 +12,10 @@ watch(() => router.route.data.relativePath, (newVal, oldVal) => { } }, { immediate: true }); -function buildPlayButton(parent, accent, url) { +function buildPlayButton(parent, accent, gender, url) { + gender = gender || 'male'; + accent = accent || 'us'; + const labelEl = document.createElement('span'); labelEl.classList.add('accent-label'); labelEl.innerText = accent.toUpperCase(); @@ -22,37 +25,60 @@ function buildPlayButton(parent, accent, url) { audioEl.setAttribute('controls', 'false') const iconEl = document.createElement('img'); iconEl.classList.add('icon'); + const emojiEl = document.createElement('span'); + emojiEl.classList.add('emoji'); - let svg = '/images/speaker-black.svg'; + let svg = '/images/speaker-white.svg'; + let iconEmoji = ''; if (accent === 'uk') { - svg = '/images/speaker-brown.svg'; + iconEmoji = 'πŸ‡¬πŸ‡§'; } else if (accent === 'us') { - svg = '/images/speaker-blue.svg'; + iconEmoji = 'πŸ‡ΊπŸ‡Έ'; } iconEl.setAttribute('src', svg) iconEl.innerText = accent.toUpperCase(); + emojiEl.innerText = iconEmoji const btnEl = document.createElement('button') btnEl.classList.add('play-button') btnEl.classList.add(accent); + btnEl.classList.add(gender); btnEl.addEventListener('click', () => { audioEl.play(); }) // btnEl.append(labelEl) + btnEl.append(emojiEl) btnEl.append(iconEl) btnEl.append(audioEl) parent.append(btnEl) } +function fillDataAudio(el) { + let dataAudio = []; + dataAudio.push({accent: 'us', gender: '', value: el.getAttribute('data-audio-us') || null}) + dataAudio.push({accent: 'uk', gender: '', value: el.getAttribute('data-audio-uk') || null}) + dataAudio.push({accent: 'other', gender: '', value: el.getAttribute('data-audio-other') || null}) + dataAudio.push({accent: 'us', gender: 'male', value: el.getAttribute('data-audio-us-male') || null}) + dataAudio.push({accent: 'uk', gender: 'male', value: el.getAttribute('data-audio-uk-male') || null}) + dataAudio.push({accent: 'other', gender: 'male', value: el.getAttribute('data-audio-other-male') || null}) + dataAudio.push({accent: 'us', gender: 'female', value: el.getAttribute('data-audio-us-female') || null}) + dataAudio.push({accent: 'uk', gender: 'female', value: el.getAttribute('data-audio-uk-female') || null}) + dataAudio.push({accent: 'other', gender: 'female', value: el.getAttribute('data-audio-other-female') || null}) + + // remove null item + dataAudio = dataAudio.filter((item) => item.value !== null) + return dataAudio +} + function convertToInlineComponent(el) { if (el.getAttribute('data-converted')) { return; } - const dataAudioUs = el.getAttribute('data-audio-us') - const dataAudioUk = el.getAttribute('data-audio-uk') - const dataAudioOther = el.getAttribute('data-audio-other') - console.log('inline component', dataAudioUs, dataAudioUk, dataAudioOther) + + // fill dataAudio + const dataAudio = fillDataAudio(el); + console.log('inline component', dataAudio) const wrapperEl = document.createElement('div') wrapperEl.classList.add('speak-word-wrapper') @@ -60,29 +86,39 @@ function convertToInlineComponent(el) { canEl.classList.add('speak-word') canEl.classList.add('inline') - if (dataAudioUk || dataAudioUs || dataAudioOther) { + if (dataAudio.length > 0) { const ctrlEl = document.createElement('div') ctrlEl.classList.add('ctrl') - const ctrlPartEl = document.createElement('div') - ctrlPartEl.classList.add('ctrl-part') - if (dataAudioUs) { - buildPlayButton(ctrlPartEl, 'us', dataAudioUs) + for (let i = 0; i < dataAudio.length; i += 1) { + const audioItem = dataAudio[i]; + const ctrlPartEl = document.createElement('div') + ctrlPartEl.classList.add('ctrl-part') + console.log(audioItem); + if (audioItem) { + buildPlayButton(ctrlPartEl, audioItem.accent, audioItem.gender, audioItem.value) + } + ctrlEl.append(ctrlPartEl); } - ctrlEl.append(ctrlPartEl); + // const ctrlPartEl = document.createElement('div') + // ctrlPartEl.classList.add('ctrl-part') + // if (dataAudioUs) { + // buildPlayButton(ctrlPartEl, 'us', dataAudioUs) + // } + // ctrlEl.append(ctrlPartEl); - const ctrlPartEl2 = document.createElement('div') - ctrlPartEl2.classList.add('ctrl-part') - if (dataAudioUk) { - buildPlayButton(ctrlPartEl2, 'uk', dataAudioUk) - } - ctrlEl.append(ctrlPartEl2); + // const ctrlPartEl2 = document.createElement('div') + // ctrlPartEl2.classList.add('ctrl-part') + // if (dataAudioUk) { + // buildPlayButton(ctrlPartEl2, 'uk', dataAudioUk) + // } + // ctrlEl.append(ctrlPartEl2); - const ctrlPartEl3 = document.createElement('div') - ctrlPartEl3.classList.add('ctrl-part') - if (dataAudioOther) { - buildPlayButton(ctrlPartEl3, 'other', dataAudioOther) - } - ctrlEl.append(ctrlPartEl3); + // const ctrlPartEl3 = document.createElement('div') + // ctrlPartEl3.classList.add('ctrl-part') + // if (dataAudioOther) { + // buildPlayButton(ctrlPartEl3, 'other', dataAudioOther) + // } + // ctrlEl.append(ctrlPartEl3); canEl.append(ctrlEl) } @@ -107,36 +143,4 @@ function buildSpeakWordInline() { \ No newline at end of file diff --git a/1000-hours/.vitepress/theme/layouts/index.vue b/1000-hours/.vitepress/theme/layouts/index.vue index cee94a85..43078f00 100644 --- a/1000-hours/.vitepress/theme/layouts/index.vue +++ b/1000-hours/.vitepress/theme/layouts/index.vue @@ -18,37 +18,12 @@ const { Layout } = DefaultTheme - \ No newline at end of file diff --git a/1000-hours/public/images/speaker-white.svg b/1000-hours/public/images/speaker-white.svg new file mode 100644 index 00000000..39d29442 --- /dev/null +++ b/1000-hours/public/images/speaker-white.svg @@ -0,0 +1,9 @@ + + + speaker-white + + + + + + \ No newline at end of file