Skip to content

Commit

Permalink
update i18n function and change layout
Browse files Browse the repository at this point in the history
  • Loading branch information
sk5s committed Nov 5, 2021
1 parent fbfa5dd commit 672ebc3
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 40 deletions.
63 changes: 46 additions & 17 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="zh" class="has-navbar-fixed-top">
<html id="html" lang="zh" class="has-navbar-fixed-top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -15,7 +15,8 @@
<link rel="stylesheet" href="css/style.css">

<script src="js/chart.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script> -->

<script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
</head>
<body>
<!-- nav bar -->
Expand All @@ -29,23 +30,14 @@ <h5 class="title is-5">alsoweather</h5>

<!-- main content -->
<div class="container mt-3">
<div class="control has-icons-left mt-3 mb-3">
<div class="select is-large is-fullwidth">
<select id="cwb_location_select">
<option value="" disabled selected>選擇地區</option>
</select>
</div>
<div class="icon is-large is-left">
<i class="fas fa-map-marker-alt"></i>
</div>
</div>
<h2 class="title is-2" data-fillin-text="cwb_location_select_value">location</h2>

<!-- refresh button -->
<button class="button is-large is-success is-outlined is-fullwidth mt-3 mb-3" onclick="refresh_all()">
<span class="icon is-small">
<i class="fas fa-sync"></i>
</span>
<span class="ml-3">Refresh</span>
<span class="ml-3" data-i18n-key="refresh">Refresh</span>
</button>

<!-- SpeechSynthesis button -->
Expand Down Expand Up @@ -83,8 +75,8 @@ <h5 class="title is-5">alsoweather</h5>
<span class="card-header-icon">
<i class="fas fa-angle-double-right"></i>
</span>
<span class="card-header-title" style="text-transform:uppercase;">
quote
<span class="card-header-title" data-i18n-key="quote">
Quote
</span>
</div>
<div class="card-content">
Expand All @@ -100,10 +92,47 @@ <h5 class="title is-5">alsoweather</h5>
</div>
</div>

<div>
<!-- open config button -->
<button class="button is-large is-success is-outlined is-fullwidth mt-3 mb-3" onclick="open_modal(this)" data-modal-to-open="config">
<span class="icon is-small">
<i class="fas fa-cog"></i>
</span>
<span data-i18n-key="config" class="ml-3">Config</span>
</button>
</div>

</div>

<!-- SpeechSynthesis config -->
<div id="speechSynthesis_config_container"></div>

<!-- modal -->
<!-- config modal -->
<div data-modal-name="config" class="modal">
<div class="modal-background" onclick="close_modal(this)" data-modal-to-close="config"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title" data-i18n-key="config">Config</p>
<button class="delete" aria-label="close" onclick="close_modal(this)" data-modal-to-close="config"></button>
</header>
<section class="modal-card-body">
<!-- location -->
<div class="control has-icons-left mt-3 mb-3">
<div class="select is-large is-fullwidth">
<select id="cwb_location_select">
<option value="" data-i18n-key="choose-location" disabled selected>choose location</option>
</select>
</div>
<div class="icon is-large is-left">
<i class="fas fa-map-marker-alt"></i>
</div>
</div>
<!-- SpeechSynthesis config -->
<div id="speechSynthesis_config_container"></div>
</section>
<footer class="modal-card-foot">
<button class="button" onclick="close_modal(this)" data-modal-to-close="config" data-i18n-key="close">Close</button>
</footer>
</div>
</div>

<!-- footer -->
Expand Down
68 changes: 47 additions & 21 deletions js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ let speech_script = {
let populated_voice_select //html object

// grab html dom element
let html = document.getElementById('html')
let cwb_location_select = document.getElementById('cwb_location_select')
let quote_block_inner_content = document.getElementById('quote_block_inner_content')
let weather_block_inner_content = document.getElementById('weather_block_inner_content')
Expand All @@ -42,8 +43,14 @@ document.addEventListener('DOMContentLoaded', () => {
restore_speech_voice()
fresh()
speech_synthesis_init()
i18n_init()
})

// html changed service
function html_changed() {
i18n_refresh()
}

// fetch cwb api
async function fetch_cwb(url) {
try {
Expand Down Expand Up @@ -152,32 +159,24 @@ function restore_speech_voice() {
function fresh() {
fetch_cwb(CWB_API)
fetch_quote(QUOTE_API)
fresh_location_text()
}
function refresh_all() {
// set loading class
all_content_switch_to_loading()
fresh()
}
function fresh_location_text() {
let element = document.querySelector("[data-fillin-text='cwb_location_select_value']")
element.innerText = cwb_location_select_value
}

// switch loading
function all_content_switch_to_loading() {
cwb_location_select.parentElement.classList.add('is-loading')
weather_block_inner_content.innerHTML = `
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
`
quote_block_inner_content.innerHTML = `
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
`
weather_block_inner_content.innerHTML = generate_skeleton_html(7)
quote_block_inner_content.innerHTML = generate_skeleton_html(5)
html_changed()
}

// speech
Expand Down Expand Up @@ -238,6 +237,7 @@ function populateVoiceList() {
</div>
</div>
`
html_changed()
populated_voice_select = document.getElementById('populated_voice_select')
populated_voice_select.addEventListener('input', () => {
localStorage.setItem('speechVoice', populated_voice_select.value)
Expand Down Expand Up @@ -307,19 +307,19 @@ function generate_now_weather(nowstate) {
<nav class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">降雨機率</p>
<p class="heading" data-i18n-key="PoP">降雨機率</p>
<p class="title"><i class="fas fa-cloud-showers-heavy"></i> ${nowstate.PoP}%</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">最低溫度</p>
<p class="heading" data-i18n-key="MinT">最低溫度</p>
<p class="title"><i class="fas fa-chevron-down"></i> ${nowstate.MinT}°C</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">最高溫度</p>
<p class="heading" data-i18n-key="MaxT">最高溫度</p>
<p class="title"><i class="fas fa-chevron-up"></i> ${nowstate.MaxT}°C</p>
</div>
</div>
Expand All @@ -335,6 +335,7 @@ function generate_now_weather(nowstate) {
</div>
</div>
`
html_changed()
return div
}
function generate_read_button_html() {
Expand All @@ -345,19 +346,28 @@ function generate_read_button_html() {
<span class="icon is-small">
<i class="fas fa-book-reader"></i>
</span>
<span class="ml-3">Read</span>
<span class="ml-3" data-i18n-key="read">Read</span>
</button>
</div>
</div>
`
}

function generate_skeleton_html(line) {
let html = ''
for (let i = 0; i < line; i++) {
html += `<div class="skeleton skeleton-text"></div>`
}
return html
}

// fill in

// fillin quote
function fillin_quote(data_element) {
quote_block_inner_content.innerHTML = `<span class="is-large">${data_element.content}</span>`
quote_block_inner_content.innerHTML += `<br><span class="has-text-grey">- ${data_element.author}</span>`
html_changed()
}

// fillin_weather
Expand All @@ -369,6 +379,22 @@ function fillin_weather(element) {

// fillin_location_select_options
function fillin_location_select_options(html) {
cwb_location_select.innerHTML = "<option value='' disabled selected>選擇地區</option>"
cwb_location_select.innerHTML = `<option value="" data-i18n-key="choose-location" disabled selected>choose location</option>`
cwb_location_select.innerHTML += html
html_changed()
}

// config modal
function open_modal(buttonElement) {
let modal_to_toggle = buttonElement.getAttribute('data-modal-to-open')
let modal = document.querySelector(`[data-modal-name='${modal_to_toggle}']`)
modal.classList.add('is-active')
html.classList.add('is-clipped')
}

function close_modal(buttonElement) {
let modal_to_toggle = buttonElement.getAttribute('data-modal-to-close')
let modal = document.querySelector(`[data-modal-name='${modal_to_toggle}']`)
modal.classList.remove('is-active')
html.classList.remove('is-clipped')
}
78 changes: 78 additions & 0 deletions js/i18n.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
let user_selected_lang

let i18n_resources = {
en: {
translation: {
test: 'hello world',
config: 'Config',
'choose-location': 'Choose location',
close: 'Close',
quote: 'Quote',
read: 'Read',
PoP: 'PoP',
MinT: 'MinT',
MaxT: 'MaxT',
refresh: 'Refresh',
o_clock: " o'clock",
to: 'to',
},
},
zh: {
translation: {
test: '哈囉!',
config: '設定',
'choose-location': '選擇地區',
close: '關閉',
quote: '佳句',
read: '閱讀',
PoP: '降雨機率',
MinT: '最低溫度',
MaxT: '最高溫度',
refresh: '重新整理',
o_clock: '點',
to: '到',
},
},
}

// !!! key 不能和內容一樣
function i18n_init() {
i18next
.init({
lng: getLanguage(),
debug: true,
resources: i18n_resources,
})
.then((t) => {
fillin_text_by_data_attribute()
})
}

function i18n_refresh() {
fillin_text_by_data_attribute()
}

function i18n_get(key) {
return i18next.t(key)
}

function getLanguage() {
let browser = navigator.language
if (!user_selected_lang) {
if (browser.includes('zh') || browser.includes('en')) {
return browser
} else {
return 'en'
}
} else {
return user_selected_lang
}
}

function fillin_text_by_data_attribute() {
let elements = document.querySelectorAll('[data-i18n-key]')
elements.forEach((el) => {
let key = el.getAttribute('data-i18n-key')
el.innerText = i18next.t(key)
})
}
7 changes: 5 additions & 2 deletions js/my-chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ const CHART_COLORS = {
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)',
}
const line_chart_border_width = 7

function generate_weather_chart_data(weatherElement) {
const time = (str) => {
let m = new Date(str)
let dateString = `${m.getUTCMonth() + 1}/${m.getUTCDate()} ${m.getUTCHours()}`
let dateString = `${m.getUTCMonth() + 1}/${m.getUTCDate()} ${m.getUTCHours()}${i18n_get('o_clock')}`
return dateString
}

Expand All @@ -39,7 +40,7 @@ function generate_weather_chart_data(weatherElement) {
}
}
for (let y = 0; y < data.length - 1; y++) {
labels.push([`${data[y]} -`, data[y + 1]])
labels.push([`${data[y]} ${i18n_get('to')}`, data[y + 1]])
}

for (let i = 0; i < weatherElement.length; i++) {
Expand All @@ -52,6 +53,7 @@ function generate_weather_chart_data(weatherElement) {
label: '最大溫度',
data: [],
borderColor: CHART_COLORS.red,
borderWidth: line_chart_border_width,
},
]
for (let n = 0; n < weatherElement[i].time.length; n++) {
Expand All @@ -67,6 +69,7 @@ function generate_weather_chart_data(weatherElement) {
label: '最小溫度',
data: [],
borderColor: CHART_COLORS.blue,
borderWidth: line_chart_border_width,
},
]
for (let n = 0; n < weatherElement[i].time.length; n++) {
Expand Down

0 comments on commit 672ebc3

Please sign in to comment.