- {this.props.compare ?
- {this.props.compare ?
{title}
- :
-
- Table of Contents
-
}
{Sefaria.interfaceLang !== "hebrew" ?
- )}>
:
{title}
);
diff --git a/static/js/ContentText.jsx b/static/js/ContentText.jsx
index 2e0c14049d..41346075ad 100644
--- a/static/js/ContentText.jsx
+++ b/static/js/ContentText.jsx
@@ -2,6 +2,7 @@ import React from "react";
import {useContentLang} from './Hooks';
import Sefaria from './sefaria/sefaria';
import ReactMarkdown from "react-markdown";
+import PropTypes from "prop-types";
const ContentText = (props) => {
/* Renders content language throughout the site (content that comes from the database and is not interface language).
@@ -18,24 +19,28 @@ const ContentText = (props) => {
return langAndContentItems.map(item =>
- {Sefaria.interfaceLang !== "hebrew" && Sefaria._siteSettings.TORAH_SPECIFIC ?
-
{
}
);
- if (lang === 'he' && languageToFilter === "bilingual") {content = ''}
-
- return({content})
+ if (toFilter) {content = ''}
+ return ({content})
};
const _filterContentTextByLang = ({text, html, markdown, overrideLanguage, defaultToInterfaceOnBilingual=false, bilingualOrder = null}) => {
@@ -77,9 +81,9 @@ const _filterContentTextByLang = ({text, html, markdown, overrideLanguage, defau
return langAndContentItems;
}
-const ContentSpan = ({lang, content, isHTML, markdown}) => {
+const ContentSpan = ({lang, content, isHTML, markdown, primaryOrTranslation}) => {
return isHTML ?
-
+
: markdown ?
{altText}
+
+ Font Size
+
+
+ );
+}
+export default FontSizeButtons;
diff --git a/static/js/Header.jsx b/static/js/Header.jsx
index 53ea388954..be88743550 100644
--- a/static/js/Header.jsx
+++ b/static/js/Header.jsx
@@ -40,38 +40,38 @@ const LoggedOutDropdown = () => {
return encodeURIComponent(Sefaria.util.currentPath());
}
return (
-
- Site Language
-
-
-
-
- English
-
-
-
- עברית
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+);
}
@@ -82,71 +82,77 @@ const LoggedInDropdown = () => {
}
return (
-
+ Site Language
+
+
+
+
+ English
+
+
+
+ עברית
+
+
+
- Site Language
-
-
-
- English
-
- ·
-
- עברית
-
-
-
+
+ {Sefaria.full_name}
+
+
+ Account Settings
+
+
+
+
+
+
+
+
+
+
+
+);
}
const ModuleSwitcher = () => {
return (
-
+ Site Language
+
+
+
+ English
+
+ ·
+
+ עברית
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
}
class Header extends Component {
constructor(props) {
diff --git a/static/js/Hooks.jsx b/static/js/Hooks.jsx
index 115812ee73..2cc55521b4 100644
--- a/static/js/Hooks.jsx
+++ b/static/js/Hooks.jsx
@@ -1,6 +1,6 @@
import React, {useState, useEffect, useMemo, useCallback, useRef, useContext} from 'react';
import $ from './sefaria/sefariaJquery';
-import {ContentLanguageContext} from "./context";
+import {ReaderPanelContext} from "./context";
import Sefaria from "./sefaria/sefaria";
@@ -8,8 +8,20 @@ function useContentLang(defaultToInterfaceOnBilingual, overrideLanguage){
/* useful for determining language for content text while taking into account ContentLanguageContent and interfaceLang
* `overrideLanguage` a string with the language name (full not 2 letter) to force to render to overriding what the content language context says. Can be useful if calling object determines one langugae is missing in a dynamic way
* `defaultToInterfaceOnBilingual` use if you want components not to render all languages in bilingual mode, and default them to what the interface language is*/
- const contentLanguage = useContext(ContentLanguageContext);
- const languageToFilter = (defaultToInterfaceOnBilingual && contentLanguage.language === "bilingual") ? Sefaria.interfaceLang : (overrideLanguage ? overrideLanguage : contentLanguage.language);
+ const {language, textsData} = useContext(ReaderPanelContext);
+ const hasContent = !!textsData;
+ const shownLanguage = (language === "bilingual") ? language : (language === "english" && textsData?.text?.length) ? textsData?.translationLang : textsData?.primaryLang; //the 'hebrew' of language means source
+ const isContentLangAmbiguous = !['hebrew', 'english'].includes(shownLanguage);
+ let languageToFilter;
+ if (defaultToInterfaceOnBilingual && hasContent && isContentLangAmbiguous) {
+ languageToFilter = Sefaria.interfaceLang;
+ } else if (overrideLanguage) {
+ languageToFilter = overrideLanguage;
+ } else if (isContentLangAmbiguous || !hasContent) {
+ languageToFilter = language;
+ } else {
+ languageToFilter = shownLanguage;
+ }
const langShort = languageToFilter.slice(0,2);
return [languageToFilter, langShort];
}
diff --git a/static/js/LayoutButtons.jsx b/static/js/LayoutButtons.jsx
new file mode 100644
index 0000000000..e4ab052267
--- /dev/null
+++ b/static/js/LayoutButtons.jsx
@@ -0,0 +1,64 @@
+import {useContext} from "react";
+import {ReaderPanelContext} from "./context";
+import {layoutOptions} from "./constants";
+import {InterfaceText} from "./Misc";
+import PropTypes from "prop-types";
+
+const calculateLayoutState = (language, textsData, panelMode) => {
+ const primaryDir = textsData?.primaryDirection;
+ const translationDir = textsData?.translationDirection;
+ return (language !== 'bilingual') ? 'mono' //one text
+ : (primaryDir !== translationDir || panelMode === 'Sheet') ? 'mixed' //two texts with different directions
+ : (primaryDir === 'rtl') ? 'bi-rtl' //two rtl texts
+ : 'bi-ltr'; //two ltr texts
+};
+
+const getPath = (layoutOption, layoutState, textsData) => {
+ if (layoutState === 'mixed') {
+ const primaryDirection = textsData?.primaryDirection || 'rtl'; //no primary is the case of sheet
+ const translationDirection = textsData?.translationDirection || primaryDirection.split('').reverse().join(''); //when there is an empty translation it has no direction. we will show the button as opposite layouts.
+ const directions = (layoutOption === 'heLeft') ? `${primaryDirection}${translationDirection}` //heLeft means primary in left
+ : `${translationDirection}${primaryDirection}`;
+ if (layoutOption !== 'stacked') {
+ layoutOption = 'beside';
+ }
+ layoutOption = `${layoutOption}-${directions}`;
+ }
+ return `/static/icons/${layoutState}-${layoutOption}.svg`;
+};
+
+const LayoutButton = ({layoutOption, layoutState}) => {
+ const {language, textsData, setOption, layout} = useContext(ReaderPanelContext);
+ const path = getPath(layoutOption, layoutState, textsData);
+ const optionName = (language === 'bilingual') ? 'biLayout' : 'layout';
+ return (
+