exports.id = 50373; exports.ids = [50373]; exports.modules = { /***/ 61821: /***/ ((module) => { // Exports module.exports = { "footnoteContainer": "FootnoteText_footnoteContainer__2GrJa", "text": "FootnoteText_text__o_c03", "header": "FootnoteText_header__M_Q2C" }; /***/ }), /***/ 68505: /***/ ((module) => { // Exports module.exports = { "text": "TranslationText_text__4atf8", "translation-font-size-1": "TranslationText_translation-font-size-1__TqSPj", "translation-font-size-2": "TranslationText_translation-font-size-2__AW2i1", "translation-font-size-3": "TranslationText_translation-font-size-3__ww3t4", "translation-font-size-4": "TranslationText_translation-font-size-4__TKdKv", "translation-font-size-5": "TranslationText_translation-font-size-5__5bjGX", "translation-font-size-6": "TranslationText_translation-font-size-6__6SMJi", "translation-font-size-7": "TranslationText_translation-font-size-7__03ez5", "translation-font-size-8": "TranslationText_translation-font-size-8__IA0Tr", "translation-font-size-9": "TranslationText_translation-font-size-9__tq3IG", "translation-font-size-10": "TranslationText_translation-font-size-10__A9YEa", "ltr": "TranslationText_ltr__146rZ", "rtl": "TranslationText_rtl__ytrpw", "urdu": "TranslationText_urdu__9N37Y", "kurdish": "TranslationText_kurdish__je0yf", "divehi": "TranslationText_divehi__e3rqQ", "translationName": "TranslationText_translationName__Vm9Sj" }; /***/ }), /***/ 23575: /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(59003); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(60866); /* harmony import */ var next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _FootnoteText_module_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(61821); /* harmony import */ var _FootnoteText_module_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_FootnoteText_module_scss__WEBPACK_IMPORTED_MODULE_8__); /* harmony import */ var _TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(68505); /* harmony import */ var _TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_9__); /* harmony import */ var _dls_Button_Button__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(50497); /* harmony import */ var _dls_Spinner_Spinner__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7190); /* harmony import */ var _icons_close_svg__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(51053); /* harmony import */ var _utils_locale__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(24709); var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_dls_Button_Button__WEBPACK_IMPORTED_MODULE_4__]); _dls_Button_Button__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0]; /* eslint-disable react/no-danger */ const FootnoteText = ({ footnoteName , footnote , onCloseClicked , onTextClicked , isLoading , })=>{ const { t , lang } = next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3___default()("quran-reader"); const languageId = footnote?.languageId || (0,_utils_locale__WEBPACK_IMPORTED_MODULE_7__/* .findLanguageIdByLocale */ .zi)(lang); const landData = (0,_utils_locale__WEBPACK_IMPORTED_MODULE_7__/* .getLanguageDataById */ .j2)(languageId); return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (_FootnoteText_module_scss__WEBPACK_IMPORTED_MODULE_8___default().footnoteContainer), children: [ /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (_FootnoteText_module_scss__WEBPACK_IMPORTED_MODULE_8___default().header), children: [ /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p", { children: [ t("footnote"), " ", footnoteName ? `- ${footnoteName}` : null ] }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Button_Button__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .ZP, { size: _dls_Button_Button__WEBPACK_IMPORTED_MODULE_4__/* .ButtonSize.Small */ .qE.Small, variant: _dls_Button_Button__WEBPACK_IMPORTED_MODULE_4__/* .ButtonVariant.Ghost */ .Wu.Ghost, shape: _dls_Button_Button__WEBPACK_IMPORTED_MODULE_4__/* .ButtonShape.Circle */ .jL.Circle, onClick: onCloseClicked, children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_icons_close_svg__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {}) }) ] }), isLoading ? /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_dls_Spinner_Spinner__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {}) : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_FootnoteText_module_scss__WEBPACK_IMPORTED_MODULE_8___default().text), (_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_9___default())[landData.direction], (_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_9___default())[landData.font]), dangerouslySetInnerHTML: { __html: footnote.text }, ...onTextClicked && { onClick: onTextClicked } }) ] }); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FootnoteText); __webpack_async_result__(); } catch(e) { __webpack_async_result__(e); } }); /***/ }), /***/ 18809: /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(20997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(59003); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(60866); /* harmony import */ var next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _FootnoteText__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(23575); /* harmony import */ var _TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(68505); /* harmony import */ var _TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8__); /* harmony import */ var _utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(55943); /* harmony import */ var _utils_locale__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(24709); /* harmony import */ var src_api__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(92684); var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_FootnoteText__WEBPACK_IMPORTED_MODULE_4__, _utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__]); ([_FootnoteText__WEBPACK_IMPORTED_MODULE_4__, _utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__); /* eslint-disable react-func/max-lines-per-function */ /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/no-danger */ const TranslationText = ({ translationFontScale , text , languageId , resourceName , })=>{ const { t } = next_translate_useTranslation__WEBPACK_IMPORTED_MODULE_3___default()("quran-reader"); const { 0: isLoading , 1: setIsLoading } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false); const { 0: showFootnote , 1: setShowFootnote } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true); const { 0: footnote , 1: setFootnote } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null); const { 0: activeFootnoteName , 1: setActiveFootnoteName } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null); const { 0: activeSubFootnoteName , 1: setActiveSubFootnoteName } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null); const { 0: subFootnote , 1: setSubFootnote } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null); const PRE_DEFINED_FOOTNOTES = { sg: t("footnote-sg"), pl: t("footnote-pl"), dl: t("footnote-dl") }; const resetFootnote = ()=>{ setFootnote(null); setSubFootnote(null); setIsLoading(false); setActiveFootnoteName(null); setActiveSubFootnoteName(null); }; const resetSubFootnote = ()=>{ setSubFootnote(null); setActiveSubFootnoteName(null); }; /** * Handle when the translation text is clicked. This is needed to handle when a footnote * is clicked since we receive the translation text as HTML from BE. Any footnote will * be inside an ... element. so when the translation container is clicked * we check whether the clicked element is of tag name SUP and if so, we handle showing the * footnote as following: * * 1. If it's not a sub-footnote (a footnote inside a footnote) which is all translations * except Bridge's Foundation translation: * 1. check if the sup element has foot_note attribute (the ID) and if it has: * 1. Check if we already have a footnote in the local state with the same ID: * 1. if yes, it means this is the second time the user clicks on the * footnote so we should close the footnote. * 2. if no, it means we need to call BE to fetch the footnote text by its ID. * 2. if not, it means it's a pre-defined footnote and in this case, we access the text * inside the element and check if it's in the list of pre-defined footnotes and if it * is, we get the value from the pre-defined footnotes and assign it as the footnote * text without having to call BE (only happens with Bridge's Foundation translation) * 2. If it's a sub-footnote it will only have pre-defined footnotes so we handle it the same * way as above (only happens with Bridge's Foundation translation, ex: Surah 30, Verse 11). * * @param {MouseEvent} event * @param {boolean} isSubFootnote whether we are handling a footnote or a sub-footnote (only happens * with Bridge's Foundation translation). */ const onTextClicked = (event, isSubFootnote = false)=>{ const target = event.target; // if we just clicked on anything other than a footnote element, return early. if (target.tagName !== "SUP") { return; } // we get the text inside the sup element and trim the extra spaces. const footnoteText = target.innerText.trim(); // if it's the main footnote and not the sub footnote. if (!isSubFootnote) { const footNoteId = target.getAttribute("foot_note"); // Set the activeFootnoteNumber to the current number of the footnote from the innerHTML setActiveFootnoteName(footnoteText); // if it's the normal case that needs us to call BE and not a fixed footnote like the ones found for Bridge's translation. if (footNoteId) { // if this is the second time to click the footnote, close it if (showFootnote && footnote && footnote.id === Number(footNoteId)) { (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__/* .logButtonClick */ .MY)("translation_footnote_double_click_to_close"); resetFootnote(); } else { (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__/* .logButtonClick */ .MY)("translation_show_footnote"); resetSubFootnote(); setShowFootnote(true); setIsLoading(true); (0,src_api__WEBPACK_IMPORTED_MODULE_7__/* .getFootnote */ .ei)(footNoteId).then((res)=>{ if (res.status !== 500) { setFootnote(res.footNote); } }).finally(()=>{ setIsLoading(false); }); } } else if (footnote && footnote.id === footnoteText) { // if this is the second time we are clicking on the footnote, we close it. (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__/* .logButtonClick */ .MY)("translation_pre_defined_footnote_double_click_to_close"); resetFootnote(); } else if (PRE_DEFINED_FOOTNOTES[footnoteText]) { (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__/* .logButtonClick */ .MY)("translation_pre_defined_footnote"); resetSubFootnote(); setFootnote({ id: footnoteText, text: PRE_DEFINED_FOOTNOTES[footnoteText] }); } } else { // Set the activeSubFootnoteNumber to the current number of the footnote from the innerHTML setActiveSubFootnoteName(footnoteText); const subFootnoteId = `${footnote.id} - ${footnoteText}`; // if this is the second time we are clicking on the sub footnote, we close it. if (subFootnote && subFootnote.id === subFootnoteId) { (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__/* .logButtonClick */ .MY)("translation_sub_footnote_double_click_to_close"); resetSubFootnote(); } else if (PRE_DEFINED_FOOTNOTES[footnoteText]) { (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__/* .logButtonClick */ .MY)("translation_show_sub_footnote"); setSubFootnote({ id: subFootnoteId, text: PRE_DEFINED_FOOTNOTES[footnoteText] }); } } }; const hideFootnote = ()=>setShowFootnote(false); const langData = (0,_utils_locale__WEBPACK_IMPORTED_MODULE_6__/* .getLanguageDataById */ .j2)(languageId); const shouldShowFootnote = showFootnote && (footnote || isLoading); return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default())[`translation-font-size-${translationFontScale}`], children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", { onClick: (event)=>onTextClicked(event), className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default().text), (_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default())[langData.direction], (_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default())[langData.font]), dangerouslySetInnerHTML: { __html: text } }), shouldShowFootnote && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_FootnoteText__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, { footnoteName: activeFootnoteName || undefined, footnote: footnote, isLoading: isLoading, onCloseClicked: ()=>{ (0,_utils_eventLogger__WEBPACK_IMPORTED_MODULE_5__/* .logButtonClick */ .MY)("translation_footnote_close"); if (isLoading) { hideFootnote(); } else { resetFootnote(); } }, onTextClicked: (event)=>onTextClicked(event, true) }), subFootnote && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_FootnoteText__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, { footnoteName: activeSubFootnoteName || undefined, footnote: subFootnote, onCloseClicked: resetSubFootnote }), resourceName && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p", { className: classnames__WEBPACK_IMPORTED_MODULE_2___default()((_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default().translationName), (_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default())[langData.direction], (_TranslationText_module_scss__WEBPACK_IMPORTED_MODULE_8___default())[langData.font]), children: [ "— ", resourceName ] }) ] }); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationText); __webpack_async_result__(); } catch(e) { __webpack_async_result__(e); } }); /***/ }), /***/ 88548: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "ZP": () => (__WEBPACK_DEFAULT_EXPORT__), /* harmony export */ "qw": () => (/* binding */ selectSelectedTranslations), /* harmony export */ "uz": () => (/* binding */ setSelectedTranslations), /* harmony export */ "z2": () => (/* binding */ selectIsUsingDefaultTranslations) /* harmony export */ }); /* unused harmony exports translationsSlice, selectTranslations */ /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(75184); /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _redux_actions_reset_settings__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(78733); /* harmony import */ var _redux_actions_sync_user_preferences__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(91767); /* harmony import */ var _redux_defaultSettings_util__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17241); /* harmony import */ var _redux_types_SliceName__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(61243); /* harmony import */ var _utils_array__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5639); /* harmony import */ var types_auth_PreferenceGroup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(13591); const translationsSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createSlice)({ name: _redux_types_SliceName__WEBPACK_IMPORTED_MODULE_4__/* ["default"].TRANSLATIONS */ .Z.TRANSLATIONS, initialState: (0,_redux_defaultSettings_util__WEBPACK_IMPORTED_MODULE_3__/* .getTranslationsInitialState */ .h0)(), reducers: { setSelectedTranslations: (state, action)=>({ ...state, // we need to before we compare because there is a corner case when the user changes the default translations then re-selects them which results in the same array as the default one but reversed e.g. instead of [20, 131] it becomes [131, 20]. isUsingDefaultTranslations: (0,_utils_array__WEBPACK_IMPORTED_MODULE_6__/* .areArraysEqual */ .Hj)((0,_redux_defaultSettings_util__WEBPACK_IMPORTED_MODULE_3__/* .getTranslationsInitialState */ .h0)(action.payload.locale).selectedTranslations, action.payload.translations), selectedTranslations: action.payload.translations }) }, // reset the translation state to initial state // when `reset` action is dispatched extraReducers: (builder)=>{ builder.addCase(_redux_actions_reset_settings__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, (state, action)=>{ return (0,_redux_defaultSettings_util__WEBPACK_IMPORTED_MODULE_3__/* .getTranslationsInitialState */ .h0)(action.payload.locale); }); builder.addCase(_redux_actions_sync_user_preferences__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, (state, action)=>{ const { payload: { userPreferences , locale } , } = action; const remotePreferences = userPreferences[types_auth_PreferenceGroup__WEBPACK_IMPORTED_MODULE_5__/* ["default"].TRANSLATIONS */ .Z.TRANSLATIONS]; if (remotePreferences) { const { selectedTranslations: defaultTranslations } = (0,_redux_defaultSettings_util__WEBPACK_IMPORTED_MODULE_3__/* .getTranslationsInitialState */ .h0)(locale); const { selectedTranslations: remoteTranslations } = remotePreferences; return { ...state, ...remotePreferences, isUsingDefaultTranslations: (0,_utils_array__WEBPACK_IMPORTED_MODULE_6__/* .areArraysEqual */ .Hj)(defaultTranslations, remoteTranslations) }; } return state; }); } }); const { setSelectedTranslations } = translationsSlice.actions; const selectTranslations = (state)=>state.translations; const selectSelectedTranslations = (state)=>state.translations.selectedTranslations; const selectIsUsingDefaultTranslations = (state)=>state.translations.isUsingDefaultTranslations; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (translationsSlice.reducer); /***/ }) }; ; //# sourceMappingURL=50373.js.map