nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

i18n: add RTL support for nav bar and child items #470

Browse source
This commit is contained in:
Sören Weber 2023-02-09 00:53:11 +01:00
parent ba09924026
commit 381b74f837
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 98 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
exampleSite/content/basics/migration/_index.en.md
View file

@ -18,6 +18,12 @@ This document shows you what's new in the latest release. For a detailed list of
---
## 5.12.0 (not yet released)
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for languages that are written right to left (like Arabic) is expanded to the top navigation bar. This feature is not available in Internet Explorer 11.
---
## 5.11.0 (2023-02-07)
- {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme removed the popular [jQuery](https://jquery.com) library from its distribution.

14
layouts/partials/header.html
View file

@ -56,7 +56,7 @@
<div id="body" class="default-animation">
<div id="sidebar-overlay"></div>
<div id="toc-overlay"></div>
<nav id="topbar" class="highlightable" dir="ltr">
<nav id="topbar" class="highlightable">
<div>
{{- $File := .File }}
{{- $Site := .Site }}
@ -67,12 +67,18 @@
{{- if $parent }}
{{- $ispublished = gt (int (len $parent.Permalink)) 0 }}
{{- end }}
{{- $startarrow := "&#129104;" }}
{{- $endarrow := "&#129106;" }}
{{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
{{- $startarrow = "&#129106;" }}
{{- $endarrow = "&#129104;" }}
{{- end }}
<div class="navigation">
{{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
<span class="nav nav-next topbar-link"><i class="fa fa-chevron-right fa-fw"></i></span>
{{- else }}
{{- with ($.Scratch.Get "relearnNextPage") }}
<a class="nav nav-next topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} (&#129106;)"><i class="fas fa-chevron-right fa-fw"></i></a>
<a class="nav nav-next topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $endarrow | safeHTML }})"><i class="fas fa-chevron-right fa-fw"></i></a>
{{- end }}
{{- end }}
</div>
@ -81,11 +87,11 @@
<span class="nav nav-prev topbar-link"><i class="fa fa-chevron-left fa-fw"></i></span>
{{- else if or (ne $outputFormat "html") (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) }}
{{- with .Site.Home }}
<a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} (&#129104;)"><i class="fas fa-chevron-left fa-fw"></i></a>
<a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $startarrow | safeHTML }})"><i class="fas fa-chevron-left fa-fw"></i></a>
{{- end }}
{{- else }}
{{- with ($.Scratch.Get "relearnPrevPage") }}
<a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} (&#129104;)"><i class="fas fa-chevron-left fa-fw"></i></a>
<a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $startarrow | safeHTML }})"><i class="fas fa-chevron-left fa-fw"></i></a>
{{- end}}
{{- end}}
</div>

14
static/css/ie.css
View file

@ -1,5 +1,19 @@
@media all and (-ms-high-contrast:none) {
/* turn off LTR support as it is dependend on CSS properties that aren't supported by IE11 */
html[dir="rtl"] #body #breadcrumbs {
float: left;
}
html[dir="rtl"] .navigation,
html[dir="rtl"] #top-print-link,
html[dir="rtl"] #top-github-link {
float: right;
}
html[dir="rtl"] .nav i{
transform: scaleX(1);
}
html[dir="rtl"] .progress {
left: 4.25rem;
}
article,
.toc-wrapper,
.tags {

27
static/css/theme.css
View file

@ -843,6 +843,11 @@ td {
display: block;
float: right;
}
html[dir="rtl"] .navigation,
html[dir="rtl"] #top-print-link,
html[dir="rtl"] #top-github-link {
float: left;
}
.nav,
.print-link,
@ -851,6 +856,9 @@ td {
padding-left: 1rem;
padding-right: 1rem;
}
html[dir="rtl"] .nav i{
transform: scaleX(-1);
}
span.nav i{
color: rgba( 134, 134, 134, .333 );
}
@ -887,6 +895,9 @@ span.nav i{
white-space: nowrap;
width: calc(100% - 5*3.25rem);
}
html[dir="rtl"] #body #breadcrumbs {
float: right;
}
@media screen and (max-width: 47.938em) {
#body #breadcrumbs {
text-overflow: unset;
@ -897,16 +908,24 @@ span.nav i{
display: none;
}
.progress {
left: 1rem;
top: 1rem;
}
html[dir="ltr"] .progress {
left: 1rem;
}
html[dir="rtl"] .progress {
right: 1rem;
}
@media screen and (max-width: 47.938em) {
.mobile-support #sidebar-toggle-span {
display: inline;
}
.progress {
html[dir="ltr"] .progress {
left: 4.25rem;
}
html[dir="rtl"] .progress {
right: 4.25rem;
}
}
#body #breadcrumbs .links {
@ -1750,3 +1769,7 @@ article ul li input[type="checkbox"]:checked::before {
overflow: auto;
padding: min(2vh, 2vw);
}
#TableOfContents{
min-width: 1px;
}

69
static/js/theme.js
View file

@ -11,6 +11,20 @@ else{
}
var isPrint = document.querySelector( 'body' ).classList.contains( 'print' );
var isRtl = document.querySelector( 'html' ).getAttribute( 'dir' ) == 'rtl';
var dir_padding_start = 'padding-left';
var dir_padding_end = 'padding-right';
var dir_key_start = 37;
var dir_key_end = 39;
var dir_scroll = 1;
if( isRtl && !isIE ){
dir_padding_start = 'padding-right';
dir_padding_end = 'padding-left';
dir_key_start = 39;
dir_key_end = 37;
dir_scroll = -1;
}
var touchsupport = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
var formelements = 'button, datalist, fieldset, input, label, legend, meter, optgroup, option, output, progress, select, textarea';
@ -26,7 +40,7 @@ var pst;
var elc = document.querySelector('#body-inner');
function documentFocus(){
document.querySelector( '#body-inner' ).focus();
elc.focus();
psc && psc.scrollbarY.focus();
}
@ -45,13 +59,13 @@ function scrollbarWidth(){
var scrollbarSize = scrollbarWidth();
function adjustContentWidth(){
var left = parseFloat( getComputedStyle( elc ).getPropertyValue( 'padding-left' ) );
var right = left;
var start = parseFloat( getComputedStyle( elc ).getPropertyValue( dir_padding_start ) );
var end = start;
if( elc.scrollHeight > elc.clientHeight ){
// if we have a scrollbar reduce the right margin by the scrollbar width
right = Math.max( 0, left - scrollbarSize );
// if we have a scrollbar reduce the end margin by the scrollbar width
end = Math.max( 0, start - scrollbarSize );
}
elc.style[ 'padding-right' ] = '' + right + 'px';
elc.style[ dir_padding_end ] = '' + end + 'px';
}
function switchTab(tabGroup, tabId) {
@ -416,41 +430,41 @@ function initArrowNav(){
// avoid prev/next navigation if we are not at the start/end of the
// horizontal area
var el = document.querySelector('#body-inner');
var scrollLeft = 0;
var scrollRight = 0;
var scrollStart = 0;
var scrollEnd = 0;
document.addEventListener('keydown', function(event){
if( !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey ){
if( event.which == '37' ){
if( !scrollLeft && +el.scrollLeft.toFixed() <= 0 ){
if( event.which == dir_key_start ){
if( !scrollStart && +el.scrollLeft.toFixed()*dir_scroll <= 0 ){
prev && prev.click();
}
else if( scrollLeft != -1 ){
clearTimeout( scrollLeft );
else if( scrollStart != -1 ){
clearTimeout( scrollStart );
}
scrollLeft = -1;
scrollStart = -1;
}
if( event.which == '39' ){
if( !scrollRight && +el.scrollLeft.toFixed() + +el.clientWidth.toFixed() >= +el.scrollWidth.toFixed() ){
if( event.which == dir_key_end ){
if( !scrollEnd && +el.scrollLeft.toFixed()*dir_scroll + +el.clientWidth.toFixed() >= +el.scrollWidth.toFixed() ){
next && next.click();
}
else if( scrollRight != -1 ){
clearTimeout( scrollRight );
else if( scrollEnd != -1 ){
clearTimeout( scrollEnd );
}
scrollRight = -1;
scrollEnd = -1;
}
}
});
document.addEventListener('keyup', function(event){
if( !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey ){
if( event.which == '37' ){
if( event.which == dir_key_start ){
// check for false indication if keyup is delayed after navigation
if( scrollLeft == -1 ){
scrollLeft = setTimeout( function(){ scrollLeft = 0; }, 300 );
if( scrollStart == -1 ){
scrollStart = setTimeout( function(){ scrollStart = 0; }, 300 );
}
}
if( event.which == '39' ){
if( scrollRight == -1 ){
scrollRight = setTimeout( function(){ scrollRight = 0; }, 300 );
if( event.which == dir_key_end ){
if( scrollEnd == -1 ){
scrollEnd = setTimeout( function(){ scrollEnd = 0; }, 300 );
}
}
}
@ -459,7 +473,7 @@ function initArrowNav(){
// avoid keyboard navigation for input fields
document.querySelectorAll( formelements ).forEach( function( e ){
e.addEventListener( 'keydown', function( event ){
if( event.which == 37 || event.which == 39 ){
if( event.which == dir_key_start || event.which == dir_key_end ){
event.stopPropagation();
}
});
@ -545,8 +559,11 @@ function initMenuScrollbar(){
psm && psm.update();
});
});
// bugfix for PS in RTL mode: the initial scrollbar position is off;
// calling update() once, fixes this
pst && setTimeout( function(){ pst.update(); }, 0 );
// finally, we want to adjust the contents right padding if there is a scrollbar visible
// finally, we want to adjust the contents end padding if there is a scrollbar visible
window.addEventListener('resize', adjustContentWidth );
adjustContentWidth();
}