Skip to content
Open
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
cb5801d
Language menu alignment
share-with-me Jul 1, 2017
26813c0
Remove trailing space
share-with-me Jul 1, 2017
f0ceb1b
Code style changes
share-with-me Jul 1, 2017
a6a91f5
sass-lint
share-with-me Jul 1, 2017
ac58ded
Travis
share-with-me Jul 1, 2017
0b5212a
Use locales.json to fetch current page name
share-with-me Jul 1, 2017
f56e6cd
Change ID name
share-with-me Jul 1, 2017
bda28d6
Styling the dropdown button
share-with-me Jul 6, 2017
405ab95
Travis
share-with-me Jul 6, 2017
ee1f6b4
Style and align like select
share-with-me Jul 6, 2017
d7a6cbe
padding added to locale button names
share-with-me Jul 11, 2017
3c12e62
Changes
share-with-me Jul 13, 2017
ba1fbd9
Travis
share-with-me Jul 13, 2017
f2a5416
sass-lint disable for !important
share-with-me Jul 13, 2017
3525be4
CHange cursor on hover of button to default
share-with-me Jul 14, 2017
13c48fa
Changes
share-with-me Jul 16, 2017
375fa10
Extract lang info in isRtlLanguage
share-with-me Jul 19, 2017
fac9d09
Restore direction function
share-with-me Jul 21, 2017
c35bc9a
Reduce space between dropdown button and menu
share-with-me Jul 31, 2017
383957a
Travis
share-with-me Jul 31, 2017
388db58
Add CSS to force visible a scrollbar on OSX
share-with-me Aug 10, 2017
bc98919
Travis and rename pageLocales to localeToLanguageMap
share-with-me Aug 10, 2017
cc01036
Space added between paren and selector
share-with-me Aug 12, 2017
f4e7e8d
Remove localeToLanguageMap and append this as key-value data to local…
share-with-me Aug 19, 2017
95abf26
Style only the scrollbar corresponding to language dropdown
share-with-me Aug 19, 2017
8018e6a
Use data method and remove closing option tag
share-with-me Aug 20, 2017
83124bf
Update localization.js
sushain97 Aug 20, 2017
da42d9c
Move styles to css file
share-with-me Aug 20, 2017
a8cba41
Travis
share-with-me Aug 20, 2017
67a3cb5
Travis
share-with-me Aug 20, 2017
449e813
Remove media quey for dropdown scrollbar
share-with-me Aug 21, 2017
32163af
Merge branch 'master' into gsoc-mono-language-menu
share-with-me Sep 3, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,38 @@ h2 {
margin-top: 7px;
}

#localeDropdown {
height: 300px;
min-width: 0 !important; /* sass-lint:disable-line no-important */
overflow-y: scroll;
width: 130px;
}

#localeDropdown li > a:hover,
#localeDropdownSelect:hover {
cursor: default;
}

#localeDropdownSelect {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
color: #000;
margin-top: 5px;
padding: 0;
width: 130px;
}

#localeName {
padding-left: 7px;
padding-right: 7px;
}

#localeDropdownCaret {
position: absolute;
top: 50%;
}

.nav-pills { /* sass-lint:disable-line class-name-format */
cursor: pointer;
}
Expand Down
43 changes: 40 additions & 3 deletions assets/js/localization.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var locale;
var locale, pageLocales = {};
// eslint-disable-next-line
var languages = {'af': 'Afrikaans', 'id': 'Bahasa Indonesia', 'cy': 'Cymraeg', 'de': 'Deutsch', 'en': 'English', 'ga': 'Gaeilge', 'gv': 'Gaelg', 'gd': 'Gàidhlig', 'rn': 'Ikirundi', 'sw': 'Kiswahili', 'lg': 'Luganda', 'mt': 'Malti', 'nl': 'Nederlands', 'sq': 'Shqip', 'vi': 'Tiếng Việt', 'tr': 'Türkçe', 'az': 'azərbaycan', 'br': 'brezhoneg', 'ca': 'català', 'da': 'dansk', 'se': 'davvisámegiella', 'et': 'eesti', 'es': 'español', 'eo': 'esperanto', 'eu': 'euskara', 'fr': 'français', 'fo': 'føroyskt', 'ia': 'interlingua', 'xh': 'isiXhosa', 'zu': 'isiZulu', 'it': 'italiano', 'mfe': 'kreol morisien', 'lv': 'latviešu', 'lt': 'lietuvių', 'hu': 'magyar', 'nb': 'norsk bokmål', 'nn': 'nynorsk', 'uz': 'oʻzbekcha', 'pl': 'polski', 'pt': 'português', 'ro': 'română', 'rm': 'rumantsch', 'sk': 'slovenčina', 'sl': 'slovenščina', 'fi': 'suomi', 'sv': 'svenska', 'is': 'íslenska', 'cs': 'čeština', 'el': 'Ελληνικά', 'tg': 'Тоҷикӣ', 'ba': 'башҡортса', 'be': 'беларуская', 'bg': 'български', 'os': 'ирон', 'kum': 'къумукъча', 'ky': 'кыргызча', 'mk': 'македонски', 'ru': 'русский', 'tt': 'татарча', 'uk': 'українська', 'kk': 'қазақша', 'hy': 'հայերեն', 'he': 'עברית', 'ur': 'اردو', 'ar': 'العربية', 'fa': 'فارسی', 'ne': 'नेपाली', 'mr': 'मराठी', 'hi': 'हिंदी', 'as': 'অসমীয়া', 'bn': 'বাংলা', 'pa': 'ਪੰਜਾਬੀ', 'te': 'తెలుగు', 'ml': 'മലയാളം', 'si': 'සිංහල', 'th': 'ไทย', 'lo': 'ລາວ', 'zh': '中文', 'ko': '한국어', 'mrj': 'Мары йӹлмӹ', 'gl': 'galego', 'myv': 'Эрзянь кель', 'oc': 'occitan', 'cv': 'чӑвашла', 'arg': 'aragonés', 'ast': 'asturianu', 'msa': 'bahasa malay', 'hbs': 'srpskohrvatski', 'srp': 'српски', 'hrv': 'hrvatski', 'bos': 'bosanski', 'nog': 'ногъайша', 'sah': 'сахалыы', 'uig': 'ئۇيغۇرچە', 'tyv': 'тыва дылда'};
// eslint-disable-next-line
Expand Down Expand Up @@ -76,16 +76,29 @@ $(document).ready(function () {
console.warn('No config.LOCALES');
}
$('.localeSelect').val(locale);
$('#localeName').text(pageLocales[locale]);
localizeEverything(localizedHTML);
persistChoices('localization');
});

$('.localeSelect').change(function () {
locale = $(this).val();
$('#localeName').text(pageLocales[locale]);
localizeCurrentInterface();
});

$('#localeDropdown li > a').click(function () {
locale = this.rel;
$('.localeSelect').val(locale);
$('#localeName').text(this.text);
localizeCurrentInterface();
});

function localizeCurrentInterface() {
sendEvent('localization', 'localize', locale);
localizeEverything(false);
persistChoices('localization');
});
}

function localizeEverything(stringsFresh) {
localizeInterface();
Expand Down Expand Up @@ -114,6 +127,7 @@ $(document).ready(function () {
window.location.hash;
window.history.replaceState({}, document.title, newURL);
}
$('#localeDropdownCaret').css('left', rtlLanguages.indexOf(locale) !== -1 ? '5%' : '90%');
}
});

Expand Down Expand Up @@ -169,7 +183,6 @@ function getLocale() {
deferred.resolve();
}
}

return deferred.promise();
}

Expand Down Expand Up @@ -207,18 +220,42 @@ function getLocales() {
var localePairs = [];
for(var code in locales) {
localePairs.push([code, locales[code]]);
pageLocales[code] = locales[code];
Copy link
Member

@sushain97 sushain97 Jul 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is pageLocales? Sorry, completely missed this earlier.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Um, pageLocales is an object storing locale: corresponding language as key: value pairs. I populate this object through AJAX call from locales.json. This was required because, for select, it was simple to just set the val to locale as the associated value held was the corresponding language. However, for the bootstrap button, to set its text, I fetch the locale and then set its text through this object. One more approach I had was to run a loop and fetch the language name from locales[], but I chose this as it looked more cleaner and not much cluttering.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It sounds like this data could also be stored inside the locale dropdown's items below at L242. I'm also not sure why this is called pageLocales.

}
localePairs = localePairs.sort(function (a, b) {
return a[1].toLowerCase().localeCompare(b[1].toLowerCase());
});
$('.localeSelect').empty();
$('#localeDropdown').empty();
$.each(localePairs, function () {
$('.localeSelect').append(
$('<option></option>')
Copy link
Member

@sushain97 sushain97 Aug 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think that "</option>" is required here?

.val(this[0])
.text(this[1])
.prop('dir', rtlLanguages.indexOf(this[0]) !== -1 ? 'rtl' : 'ltr')
);

$('#localeDropdown').append(
$('<li></li>').append(
$('<a>', {
rel: this[0] // eslint-disable-line id-length
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem to be a valid value for the rel attribute per https://www.w3.org/TR/html5/links.html#linkTypes. Have you tried using something like data-locale? Note that jQuery has a helpful $.data().

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On it.

})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use .data('locale', this[0]) for the sake of consistency?

.text(this[1])
.prop('dir', rtlLanguages.indexOf(this[0]) !== -1 ? 'rtl' : 'ltr')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it would be worth not exporting rtlLanguages and instead a function like isRtlLanguage or something like that... I don't recall if we use rtlLanguages for any other purpose though.

Copy link
Contributor Author

@share-with-me share-with-me Jul 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Um, would making a function instead serve better? The entire usage of rtlLanguages is to determine if it is present in that particular array. Should I make a function instead?

Something like:

function isRtlLanguage(lang) {
    return rtlLanguages.indexOf(lang) !== -1;
}

.css('padding-left', rtlLanguages.indexOf(this[0]) !== -1 ? '105px' : '5px')
.css('padding-right', rtlLanguages.indexOf(this[0]) !== -1 ? '5px' : '105px')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be possible to use text-align instead and then add padding on both sides?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

.hover(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should go in CSS if at all possible. Is there a reason you put it here? CSS transitions might be helpful.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, yep. It does make sense to put it in CSS. Would change it

function () {
$(this).css('background-color', '#446e9b');
$(this).css('color', '#FFF');
},
function () {
$(this).css('background-color', '#FFF');
$(this).css('color', '#000');
}
)
)
);
});
}

Expand Down
6 changes: 4 additions & 2 deletions index.html.in
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,11 @@
<p data-text="tagline" class="tagline"></p>
</div>
<div style="width: 35%" class="pull-right hidden-xs">
<!-- <i class="icon-globe localeGlobe pull-right"></i> -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:D

<i class="fa fa-globe fa-2x fa-inverse pull-right localeGlobe" style="padding: 5px 5px 0px 0px"></i>
<select class="localeSelect pull-right"><option> </option></select>
<div class="dropdown pull-right">
<button id="localeDropdownSelect" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span id="localeName" class="pull-left"></span><span class="caret" id="localeDropdownCaret"></span></button>
<ul class="dropdown-menu" id="localeDropdown"></ul>
</div>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><a href="#translation" data-mode="translation" data-text="Translation" class="hide">Translation</a></li>
Expand Down