Package: add 1000-hours repo in workspace (#337)
* add 1000-hours repo in workspace * update README
This commit is contained in:
an-lee
GitHub
66
1000-hours/.vitepress/theme/components/SpeakWord.scss
Normal file
66
1000-hours/.vitepress/theme/components/SpeakWord.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
.speak-word {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-top: 1px solid #d87676;
|
||||
padding: 8px 0;
|
||||
.ctrl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ctrl-part {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ctrl .divider {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
margin: 0 16px 0 6px;
|
||||
}
|
||||
.accent-label {
|
||||
margin-right: 4px;
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
font-size: 16px;
|
||||
}
|
||||
.word {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #af4c4c;
|
||||
}
|
||||
audio {
|
||||
display: none;
|
||||
}
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.pos {
|
||||
opacity: 0.7;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
border: none;
|
||||
border-radius: 4rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
width: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.speak-word:last-child {
|
||||
border-bottom: 1px solid #d87676;
|
||||
}
|
||||
99
1000-hours/.vitepress/theme/components/SpeakWord.vue
Normal file
99
1000-hours/.vitepress/theme/components/SpeakWord.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="speak-word">
|
||||
<div class="word" >
|
||||
{{ props.word }}
|
||||
</div>
|
||||
<div v-if="pos" class="pos">
|
||||
{{ props.pos }}
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="ctrl">
|
||||
<div class="ctrl-part" :class="item.label" v-for="item, ix in audios" :key="`audio-${ix}`">
|
||||
<div v-if="ix !== 0" class="divider"></div>
|
||||
<button class="play-button" :class="item.label" @click="playAudio(item.label)">
|
||||
<span class="accent-label">{{ item.label }}</span>
|
||||
<img :src="svgUrl(item.label)" class="icon" alt="sound" />
|
||||
</button>
|
||||
<audio class="audio" :class="item.label" :src="item.audio" controls="false" ></audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { getAudioPath } from "../data";
|
||||
const props = defineProps({
|
||||
word: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
audioUs: {
|
||||
type: String,
|
||||
},
|
||||
audioUk: {
|
||||
type: String,
|
||||
},
|
||||
audioOther: {
|
||||
type: String,
|
||||
},
|
||||
pos: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const svgUrl = (accent) => {
|
||||
if (accent === 'uk') {
|
||||
return '/images/speaker-brown.svg';
|
||||
} else if (accent === 'us') {
|
||||
return '/images/speaker-blue.svg';
|
||||
}
|
||||
return '/images/speaker-black.svg';
|
||||
}
|
||||
|
||||
const audioPathUS = computed(() => {
|
||||
if (props.audioUs) {
|
||||
return props.audioUs;
|
||||
}
|
||||
return getAudioPath(props.word, "us")
|
||||
});
|
||||
|
||||
const audioPathUK = computed(() => {
|
||||
if (props.audioUk) {
|
||||
return props.audioUk;
|
||||
}
|
||||
return getAudioPath(props.word, "uk")
|
||||
});
|
||||
|
||||
const audioPathOther = computed(() => {
|
||||
if (props.audioUk) {
|
||||
return props.audioUk;
|
||||
}
|
||||
return getAudioPath(props.word, "other")
|
||||
});
|
||||
|
||||
const audios = computed(() => {
|
||||
const ret:any = [];
|
||||
if (audioPathUS.value) {
|
||||
ret.push({ label: 'us', audio: audioPathUS.value});
|
||||
}
|
||||
if (audioPathUK.value) {
|
||||
ret.push({ label: 'uk', audio: audioPathUK.value});
|
||||
}
|
||||
if (audioPathOther.value) {
|
||||
ret.push({ label: 'other', audio: audioPathOther.value});
|
||||
}
|
||||
return ret;
|
||||
});
|
||||
|
||||
function playAudio(accent) {
|
||||
const audioEl:any = document.querySelector(`audio.${accent}`);
|
||||
audioEl.play();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import url(./SpeakWord.scss);
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
import { onMounted, watch } from "vue";
|
||||
import { useRouter } from 'vitepress';
|
||||
const router = useRouter();
|
||||
|
||||
watch(() => router.route.data.relativePath, (newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
setTimeout(() => {
|
||||
buildSpeakWordInline();
|
||||
console.log("route changed", newVal, oldVal);
|
||||
}, 200);
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
function buildPlayButton(parent, accent, url) {
|
||||
const labelEl = document.createElement('span');
|
||||
labelEl.classList.add('accent-label');
|
||||
labelEl.innerText = accent.toUpperCase();
|
||||
const audioEl = document.createElement('audio');
|
||||
audioEl.classList.add('audio')
|
||||
audioEl.setAttribute('src', url)
|
||||
audioEl.setAttribute('controls', 'false')
|
||||
const iconEl = document.createElement('img');
|
||||
iconEl.classList.add('icon');
|
||||
|
||||
let svg = '/images/speaker-black.svg';
|
||||
if (accent === 'uk') {
|
||||
svg = '/images/speaker-brown.svg';
|
||||
} else if (accent === 'us') {
|
||||
svg = '/images/speaker-blue.svg';
|
||||
}
|
||||
|
||||
iconEl.setAttribute('src', svg)
|
||||
iconEl.innerText = accent.toUpperCase();
|
||||
|
||||
const btnEl = document.createElement('button')
|
||||
btnEl.classList.add('play-button')
|
||||
btnEl.classList.add(accent);
|
||||
btnEl.addEventListener('click', () => {
|
||||
audioEl.play();
|
||||
})
|
||||
// btnEl.append(labelEl)
|
||||
btnEl.append(iconEl)
|
||||
btnEl.append(audioEl)
|
||||
parent.append(btnEl)
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
const wrapperEl = document.createElement('div')
|
||||
wrapperEl.classList.add('speak-word-wrapper')
|
||||
const canEl = document.createElement('div')
|
||||
canEl.classList.add('speak-word')
|
||||
canEl.classList.add('inline')
|
||||
|
||||
if (dataAudioUk || dataAudioUs || dataAudioOther) {
|
||||
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)
|
||||
}
|
||||
ctrlEl.append(ctrlPartEl);
|
||||
|
||||
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);
|
||||
|
||||
canEl.append(ctrlEl)
|
||||
}
|
||||
wrapperEl.append(canEl)
|
||||
// insert at el's side
|
||||
el.insertAdjacentElement('afterend', wrapperEl)
|
||||
el.style.display = 'none'
|
||||
el.setAttribute('data-converted', 'true')
|
||||
}
|
||||
|
||||
function buildSpeakWordInline() {
|
||||
const inlinePlayerEls = document.querySelectorAll('.speak-word-inline')
|
||||
for (let i = 0; i < inlinePlayerEls.length; i += 1) {
|
||||
convertToInlineComponent(inlinePlayerEls[i]);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import url(./SpeakWord.scss);
|
||||
.speak-word-wrapper {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.speak-word.inline {
|
||||
border: none;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
.word {
|
||||
display: inline-block;
|
||||
}
|
||||
.ctrl-part {
|
||||
.play-button {
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.accent-label {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20m0-8"/></svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PlayCircleOutline'
|
||||
}
|
||||
</script>
|
||||
5
1000-hours/.vitepress/theme/components/icons/index.ts
Normal file
5
1000-hours/.vitepress/theme/components/icons/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import PlayCircleOutline from './PlayCircleOutline.vue'
|
||||
|
||||
export {
|
||||
PlayCircleOutline
|
||||
}
|
||||
Reference in New Issue
Block a user