sync
sync copied to clipboard
calzoneman
Native Localizations
Many forks are done just only for replace english words.
CyTube using jade replаcements for customize #{brandName} / #{pageTitle} but i think it's bad idea use this for locals change, and i think css implementation is better (for locals):
/*
sync/www/css/lang.css
*/
/* ==== GLOBAL en-US ==== */
/* navbar */
html .lacss-home:before { content: "Home" }
html .lacss-account:before { content: "Account" }
html .lacss-logout:before { content: "Logout" }
html .lacss-channels:before { content: "Channels" }
html .lacss-profile:before { content: "Profile" }
html .lacss-edit:before { content: "Change Password/Email" }
html .lacss-login:before { content: "Login" }
html .lacss-register:before { content: "Register" }
/* homepage */
html .lacss-public-channels:before { content: "Public Channels" }
html .lacss-channel:before { content: "Channel" }
html .lacss-connected:before { content: "# Connected" }
html .lacss-now-playng:before { content: "Now Playing" }
html .lacss-enter-channel:before { content: "Enter Channel" }
html .lacss-new-channel-info:before { content: "New channels can be registered from the " }
html .lacss-my-chennels:before { content: "My Channels" }
html .lacss-new-channel-info:after { content: " page." }
/* ==== ru-RU ==== */
/* navbar */
html[lang="ru"] .lacss-home:before { content: "Главная" }
html[lang="ru"] .lacss-account:before { content: "Аккуант" }
html[lang="ru"] .lacss-logout:before { content: "Выйти" }
html[lang="ru"] .lacss-channels:before { content: "Каналы" }
html[lang="ru"] .lacss-profile:before { content: "Профиль" }
html[lang="ru"] .lacss-edit:before { content: "Сменить Пароль/Email" }
html[lang="ru"] .lacss-login:before { content: "Войти" }
html[lang="ru"] .lacss-register:before { content: "Регистрация" }
/* homepage */
html[lang="ru"] .lacss-public-channels:before { content: "Публичные каналы" }
html[lang="ru"] .lacss-channel:before { content: "Канал" }
html[lang="ru"] .lacss-connected:before { content: "# Онлайн" }
html[lang="ru"] .lacss-now-playng:before { content: "Смотрят" }
html[lang="ru"] .lacss-enter-channel:before { content: "Войти в комнату" }
html[lang="ru"] .lacss-new-channel-info:before { content: "Новые каналы можно зарегистрировать на странице " }
html[lang="ru"] .lacss-my-chennels:before { content: "настроек моих каналов" }
html[lang="ru"] .lacss-new-channel-info:after { content: "." }
diff --git a/templates/head.jade b/templates/head.jade
index 7be37e4..bbd729c 100644
--- a/templates/head.jade
+++ b/templates/head.jade
@@ -5,6 +5,7 @@ mixin head()
meta(name="author", content="#{siteAuthor}")
title= siteTitle
+ link(href="/css/lang.css", rel="stylesheet")
link(href="/css/bootstrap.css", rel="stylesheet")
//link(href="/css/bootstrap-theme.min.css", rel="stylesheet")
link(href="/css/sticky-footer-navbar.css", rel="stylesheet")
diff --git a/templates/index.jade b/templates/index.jade
index 3fe38da..712c78f 100644
--- a/templates/index.jade
+++ b/templates/index.jade
@@ -15,12 +15,12 @@ html(lang="en")
section#mainpage
.container
.col-lg-9.col-md-9
- h3 Public Channels
+ h3.lacss-public-channels
table.table.table-bordered.table-striped
thead
- th Channel
- th # Connected
- th Now Playing
+ th.lacss-channel
+ th.lacss-connected
+ th.lacss-now-playng
tbody
each chan in channels
tr
@@ -28,9 +28,10 @@ html(lang="en")
td= chan.usercount
td= chan.mediatitle
.col-lg-3.col-md-3
- h3 Enter Channel
+ h3.lacss-enter-channel
input#channelname.form-control(type="text", placeholder="Channel Name")
- p.text-muted New channels can be registered from the <a href="/account/channels">My Channels</a> page.
+ p.text-muted.lacss-new-channel-info
+ a.lacss-my-chennels(href="/account/channels")
include footer
mixin footer()
script(type="text/javascript").
diff --git a/templates/nav.jade b/templates/nav.jade
index 5298100..5fb9d57 100644
--- a/templates/nav.jade
+++ b/templates/nav.jade
@@ -1,12 +1,12 @@
-- var links = { "/": "Home" }
+- var links = { "/": "" }
mixin navlink(page, title, active)
if active
li.active
- a(href=page)= title
+ a.lacss-home(href=page)= title
else
li
- a(href=page)= title
+ a.lacss-home(href=page)= title
mixin navheader()
.navbar-header
@@ -23,18 +23,18 @@ mixin navdefaultlinks(page)
else
mixin navlink(p, t, false)
li.dropdown
- a.dropdown-toggle(href="#", data-toggle="dropdown") Account
+ a.dropdown-toggle.lacss-account(href="#", data-toggle="dropdown")
b.caret
ul.dropdown-menu
if loggedIn
- li: a(href="/logout?redirect=#{page}") Logout
+ li: a.lacss-logout(href="/logout?redirect=#{page}")
li.divider
- li: a(href="/account/channels") Channels
- li: a(href="/account/profile") Profile
- li: a(href="/account/edit") Change Password/Email
+ li: a.lacss-channels(href="/account/channels")
+ li: a.lacss-profile(href="/account/profile")
+ li: a.lacss-edit(href="/account/edit")
else
- li: a(href="/login") Login
- li: a(href="/register") Register
+ li: a.lacss-login(href="/login")
+ li: a.lacss-register(href="/register")
mixin navloginlogout(redirect)
if loggedIn
@@ -52,7 +52,7 @@ mixin navloginform(redirect)
input#username.form-control(type="text", name="name", placeholder="Username")
.form-group
input#password.form-control(type="password", name="password", placeholder="Password")
- button#login.btn.btn-default(type="submit") Login
+ button#login.btn.btn-default.lacss-login(type="submit")
mixin navlogoutform(redirect)
if loginDomain == null
@@ -64,4 +64,4 @@ mixin navlogoutform(redirect)
p#logoutform.navbar-text.pull-right
span#welcome Welcome, #{loginName}
span ·
- a#logout.navbar-link(href="#{loginDomain}/#{url}") Logout
+ a#logout.navbar-link.lacss-logout(href="#{loginDomain}/#{url}")
Result: 
- Very simple
- Switch locals dinamically
- Very flexibility with :after :bofore pseudo classes
- No need to know jade/js for adding new localizations
- useless for placeholders (and maybe options selection)
- only works with class (in first variant i think using something like this:
<span data-lang="chennels">
html [data-lang^="chennel"]:before {content: "Chennel"}
html [data-lang$="s"]:after {content: "s"}
but specific attributes doesnt work for table's elements [h1 tr td th])
If I finish migrate, do you accept this implementation? /My bad english is very bad, sorry есличо
I think this is a step in the right direction for internationalization of CyTube. For version 4.0 I've been toying with the idea of adding internationalization for server-generated informational/error messages. The main barrier to this is finding trustworthy multilingual people to translate.
I have a couple of points to make about your proposed change:
- Do all reasonably modern browsers (i.e. browsers that work with CyTube currently) support this?
- Consider changing the
lacss-prefix to something a little more clear in meaning. One idea is to usei18n-since "i18n" is a universally recognized shorthand for internationalization. - What would you think about altering the template to dynamically set the
langattribute based on theAccept-Languageheader sent by the browser? This is not something I would expect you to do before submitting a pull request, but I'd like to know what you think of it.
/My bad english is very bad, sorry есличо
No problem, you got the point across ;)
I was referring to the CSS :before and :after rules, not the lang attribute
On Nov 18, 2014, at 13:13, Erik Little [email protected] wrote:
The lang attribute is supported by all main browsers.
— Reply to this email directly or view it on GitHub.
Another idea for the prefix name would be lc (easier to type, stands for locale).
Another idea for the prefix name would be lc (easier to type, stands for locale).
i18n look's better in the code i think, but anyway it's your deal
:before and :after pseudo elements supports all browsers -
- Firefox 3.5+
- IE 8+
- Safari 1.0+
- Chrome 1.0+
- Opera Presto
- etc etc
it's CSS2.1 standart
What would you think about altering the template to dynamically set the lang attribute based on the Accept-Language header sent by the browser? This is not something I would expect you to do before submitting a pull request, but I'd like to know what you think of it.
it's need send information to the server? i dont know, but maybe better just using navigator.language ? something like this:
function getlSValue(name, def, sess) {
var stor = sess ? sessionStorage : localStorage;
if (name in stor) {
var v = stor.getItem(name);
v = v == 'false' ? false :
v == 'true' ? true : v;
return v;
} else {
stor.setItem(name, def);
return def;
}
}
function setLocale(e) {
var val = e.target.value;
localStorage.setItem('i18n', val);
document.documentElement.lang = val;
}
var navLang = navigator.language.split('-')[0]
document.documentElement.lang = getlSValue('i18n', navLang)
If user visit site in the first time, locales getting from the navigator.language (browser lang). If user needs to change locale, he can choose locale from the options:
//(i don't know why, but onchenge event not working without name attribute)
<select id="us-locale" name="i18n" onchenge="setLocale(event)">
<option value="en">English</option>
<option value="ru">Русский</option>
</select>
Just to follow up on this, I've started looking at localization for CyTube 4.0 (the next major release which will be a complete rewrite-- no ETA at this time), and I've decided to go with the i18n module rather than CSS-based localization.
- Does not require clients to download (potentially large) CSS files containing a bunch of translations they will never use
- More elegant in situations where text and HTML are mixed together (e.g. the "New channels can be registered from the My Channels page" prompt on the index page)
- Less confusing to work with (
__("Channel")in the template using the new method vs.th.i18n-channelusing CSS) - Translations are stored in JSON files for easy editing
@calzoneman I can somehow help? maybe it's time to do the replacement text on templates, and localization in the json file?
Actually I have not worked on this at all since the last comment. The previously mentioned CyTube 4.0 is a defunct project -- I decided to focus on making incremental improvements to 3.x instead. Localizing CyTube is a nontrivial project and I've been focusing my time on other features of CyTube. If there is sufficient interest in getting it implemented soon, it would be best if someone could familiarize themselves with the codebase and I'd be happy to give some guidance and walk them through implementing this.