From d8ce03553bfb7e005a7d0b3c5418636887009620 Mon Sep 17 00:00:00 2001 From: Valentin Ceaprazaru <6508597+valentinceaprazaru@users.noreply.github.com> Date: Wed, 6 Mar 2024 20:40:29 +0200 Subject: [PATCH 1/2] Writing evaluation form - Moving JS to react --- package.json | 1 + .../components/_writing-evaluation-form.scss | 69 +++++++++++-------- .../forms/writing-evaluation-form.jsx | 49 +++++++++++-- yarn.lock | 5 ++ 4 files changed, 90 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 66042bd..e8e5a21 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "firebase": "^9.12.1", "formik": "^2.2.9", "framer-motion": "^7.6.7", + "jquery": "^3.7.1", "next": "^14.0.4", "next-themes": "^0.2.0", "react": "^18.2.0", diff --git a/public/assets/scss/components/_writing-evaluation-form.scss b/public/assets/scss/components/_writing-evaluation-form.scss index 3901592..710e7ee 100644 --- a/public/assets/scss/components/_writing-evaluation-form.scss +++ b/public/assets/scss/components/_writing-evaluation-form.scss @@ -35,45 +35,60 @@ .hovertextp { position: relative; display: inline-block; -} -.hovertextp .hovertext:before { - content: "Feedback: " attr(data-hover); - visibility: hidden; - background-color: rgba(0, 0, 0, 0.8); - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px 0; /* Position the tooltip */ - position: absolute; - display: block; - z-index: 9999; - top: auto; /* Reset the top property */ - overflow: visible; - width: max-content; - max-width: 200px; -} + .hovertext { + &:before { + content: "Feedback: " attr(data-hover); + visibility: hidden; + background-color: rgba(0, 0, 0, 0.8); + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; /* Position the tooltip */ + position: absolute; + display: block; + z-index: 9999; + top: auto; /* Reset the top property */ + overflow: visible; + width: max-content; + max-width: 200px; + } -.hovertextp .hovertext:hover:before { - opacity: 1; - visibility: visible; + &:hover:before { + opacity: 1; + visibility: visible; + } + } } + .nopaque { opacity: 0.2; } .opaque { opacity: 1.0; + background: #fff; } .waf-menu.waf-menu { li { + padding-top: 10px; + + &:after { + content: ''; + } + &:hover { background-color: #f0f0f0; } + + li { + padding-top: 0; + margin-top: 0; + } } a { @@ -82,10 +97,15 @@ padding: 5px; } - .waf-submenu { + ul { display: none; list-style-type: none; - padding: 0 0 20px 20px; + padding: 0 0 15px; + margin: 0; + + ul { + padding: 0 0 5px; + } &.active { display: block; @@ -94,11 +114,6 @@ } - -.sentences { - display: none; -} - .waf-textarea { textarea { background: #f5f4f4; diff --git a/src/components/forms/writing-evaluation-form.jsx b/src/components/forms/writing-evaluation-form.jsx index 70cc2fb..c76cc76 100644 --- a/src/components/forms/writing-evaluation-form.jsx +++ b/src/components/forms/writing-evaluation-form.jsx @@ -53,11 +53,43 @@ const WritingEvaluationForm = () => { el = el.parentNode; } if (el && el.tagName === "A") { - // ...do your state change... - console.log(el.nextSibling.classList.toggle('active')); + /** + * Show the UL next to the A tag + */ + let siblingUl = el.nextSibling; + if (siblingUl) { + el.nextSibling.classList.toggle('active'); + + /** + * Show the sentences for the current A tag + */ + if (el.classList.contains('waf-trigger-level1')) { + + let triggers = siblingUl.querySelectorAll('a.waf-trigger-sentence'), + targets = document.querySelectorAll(`.content-box.hovertextp span`); + + + triggers.forEach((trigger) => { + + trigger.addEventListener('click', (e) => { + e.preventDefault(); + + targets.forEach((target) => { + target.classList.remove('opaque'); + }); + + let target = document.querySelector(`.content-box.hovertextp span.${trigger.dataset.sentence}`); + target.classList.add('opaque'); + + console.log(target) + }) + + }); + } + } } } @@ -89,7 +121,10 @@ const WritingEvaluationForm = () => { data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false" - spellcheck="false" + spellCheck="false" + autoComplete="off" + autoCorrect="off" + autoCapitalize="off" /> @@ -104,10 +139,10 @@ const WritingEvaluationForm = () => { data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false" - spellcheck="false" - autocomplete="off" - autocorrect="off" - autocapitalize="off" + spellCheck="false" + autoComplete="off" + autoCorrect="off" + autoCapitalize="off" /> diff --git a/yarn.lock b/yarn.lock index 0079d03..a6c7145 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3774,6 +3774,11 @@ iterator.prototype@^1.1.2: reflect.getprototypeof "^1.0.4" set-function-name "^2.0.1" +jquery@^3.7.1: + version "3.7.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de" + integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" From 2c0f5ca2d69a53a85cd5fd77ab5e137f19bea5ed Mon Sep 17 00:00:00 2001 From: Valentin Ceaprazaru <6508597+valentinceaprazaru@users.noreply.github.com> Date: Wed, 6 Mar 2024 20:41:05 +0200 Subject: [PATCH 2/2] Writing evaluation form - Moving JS to react --- src/components/forms/writing-evaluation-form.jsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/forms/writing-evaluation-form.jsx b/src/components/forms/writing-evaluation-form.jsx index c76cc76..f3b40c3 100644 --- a/src/components/forms/writing-evaluation-form.jsx +++ b/src/components/forms/writing-evaluation-form.jsx @@ -23,7 +23,7 @@ const WritingEvaluationForm = () => { body: JSON.stringify({ essay, task, - demo: true + // demo: true }) }); if (!response.ok) throw new Error(response.statusText); @@ -36,13 +36,6 @@ const WritingEvaluationForm = () => { setResponse(item.passage_html + item.indicator_html); setLoading(false); - // } catch (error) { - // console.error(error); - // setError(error.message); - // } finally { - // setLoading(false); - // } - } const toggleSubmenu = (e) => {