From 498bf7007b256cd203532c76177b1766aba21f85 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Fri, 9 Feb 2024 18:18:57 +0800 Subject: [PATCH] Fix interactive tutorials issues --- @theme/markdoc/components.tsx | 8 +++++--- static/js/interactive-tutorial.js | 14 +++++++++++--- static/js/tutorials/create-amm.js | 2 +- static/js/tutorials/enable-no-freeze.js | 2 +- static/js/tutorials/enact-global-freeze.js | 2 +- static/js/tutorials/freeze-individual-line.js | 2 +- static/js/tutorials/issue-a-token.js | 2 +- static/js/tutorials/require-destination-tags.js | 2 +- static/js/tutorials/send-xrp.js | 2 +- static/js/tutorials/trade-in-the-dex.js | 2 +- static/js/tutorials/use-tickets.js | 2 +- 11 files changed, 25 insertions(+), 15 deletions(-) diff --git a/@theme/markdoc/components.tsx b/@theme/markdoc/components.tsx index 2123100073..6fb6bdf090 100644 --- a/@theme/markdoc/components.tsx +++ b/@theme/markdoc/components.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { useLocation } from 'react-router-dom'; // @ts-ignore import dynamicReact from '@markdoc/markdoc/dist/react'; import { usePageSharedData, useTranslate } from '@portal/hooks'; @@ -27,6 +28,7 @@ export function IndexPageItems() { export function InteractiveBlock(props: { children: React.ReactNode; label: string; steps: string[] }) { const stepId = idify(props.label); + const { pathname } = useLocation(); return (
@@ -51,7 +53,7 @@ export function InteractiveBlock(props: { children: React.ReactNode; label: stri })}
-
{dynamicReact(props.children, React, {})}
+
{dynamicReact(props.children, React, {})}
); @@ -102,7 +104,7 @@ export function Badge(props: { } let childstrings = "" - + React.Children.forEach(props.children, (child, index) => { if (typeof child == "string") { childstrings += child @@ -125,7 +127,7 @@ export function Badge(props: { let badge_url = `https://img.shields.io/badge/${left}-${right}-${color}.svg` if (props.href) { - return ( + return ( {childstrings} diff --git a/static/js/interactive-tutorial.js b/static/js/interactive-tutorial.js index dadc55db1d..92484e6d54 100644 --- a/static/js/interactive-tutorial.js +++ b/static/js/interactive-tutorial.js @@ -62,7 +62,7 @@ function tl(key) { */ function idify(s) { // s = s.replace(/[^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]/gu, '').trim().toLowerCase() - s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase() + s = s.replace(/([^\w]|[\s-])/gu, '').trim().toLowerCase() s = s.replace(/[\s-]+/gu, '-') if (!s) { s = "_"; @@ -176,8 +176,8 @@ function show_error(block, message) { * use the generated credentials instead of the placeholder EXAMPLE_ADDR and * EXAMPLE_SECRET. */ -const EXAMPLE_ADDR = "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe" -const EXAMPLE_SECRET = "s████████████████████████████" +var EXAMPLE_ADDR = "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe" +var EXAMPLE_SECRET = "s████████████████████████████" function setup_generate_step() { $("#generate-creds-button").click( async (event) => { @@ -629,6 +629,14 @@ async function show_log(block, msg) { block.find(".output-area").append(msg) } +function onCurrentRouteLoaded(callback) { + const currentPath = window.location.pathname; + window.onRouteChange(() => { + if (window.location.pathname === currentPath) { + callback() + } + }); +} window.onRouteChange(() => { disable_followup_steps() diff --git a/static/js/tutorials/create-amm.js b/static/js/tutorials/create-amm.js index a7caa8b6e9..abed7beebe 100644 --- a/static/js/tutorials/create-amm.js +++ b/static/js/tutorials/create-amm.js @@ -1,7 +1,7 @@ // 1. Generate // 2. Connect // The code for these steps is handled by interactive-tutorial.js -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { const EXPLORER = $("#connect-button").data("explorer") diff --git a/static/js/tutorials/enable-no-freeze.js b/static/js/tutorials/enable-no-freeze.js index 0fe80c6fac..e0819282f6 100644 --- a/static/js/tutorials/enable-no-freeze.js +++ b/static/js/tutorials/enable-no-freeze.js @@ -1,7 +1,7 @@ // 1. Generate // 2. Connect // The code for these steps is handled by interactive-tutorial.js -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { // 3. Send AccountSet -------------------------------------------------------- $("#send-accountset").click( async (event) => { diff --git a/static/js/tutorials/enact-global-freeze.js b/static/js/tutorials/enact-global-freeze.js index 99e8a41c72..52ad267ea8 100644 --- a/static/js/tutorials/enact-global-freeze.js +++ b/static/js/tutorials/enact-global-freeze.js @@ -1,7 +1,7 @@ // 1. Generate // 2. Connect // The code for these steps is handled by interactive-tutorial.js -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { // 3. Send AccountSet to Start the Freeze ------------------------------------ // also 6. Send AccountSet to End the Freeze. diff --git a/static/js/tutorials/freeze-individual-line.js b/static/js/tutorials/freeze-individual-line.js index 168cf6879d..368ac09f97 100644 --- a/static/js/tutorials/freeze-individual-line.js +++ b/static/js/tutorials/freeze-individual-line.js @@ -55,7 +55,7 @@ window.after_connect.push(async () => { trust_line_setup_done = true }) -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { diff --git a/static/js/tutorials/issue-a-token.js b/static/js/tutorials/issue-a-token.js index 231420d9a9..1624631feb 100644 --- a/static/js/tutorials/issue-a-token.js +++ b/static/js/tutorials/issue-a-token.js @@ -87,7 +87,7 @@ function domain_to_hex(s) { return result.toUpperCase() } -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { setup_2x_generate_step() $("#cold-domain-text").keyup( (event) => { diff --git a/static/js/tutorials/require-destination-tags.js b/static/js/tutorials/require-destination-tags.js index 4cfb27b218..f2059dc44d 100644 --- a/static/js/tutorials/require-destination-tags.js +++ b/static/js/tutorials/require-destination-tags.js @@ -1,7 +1,7 @@ // 1. Generate // 2. Connect // The code for these steps is handled by interactive-tutorial.js -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { // 3. Send AccountSet -------------------------------------------------------- $("#send-accountset").click( async (event) => { diff --git a/static/js/tutorials/send-xrp.js b/static/js/tutorials/send-xrp.js index 9429df2f16..4599c99cf6 100644 --- a/static/js/tutorials/send-xrp.js +++ b/static/js/tutorials/send-xrp.js @@ -2,7 +2,7 @@ // 1. Connect // The code for these steps is handled by interactive-tutorial.js -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { // 2. Prepare Transaction ------------------------------------------------------ $("#prepare-button").click( async function(event) { diff --git a/static/js/tutorials/trade-in-the-dex.js b/static/js/tutorials/trade-in-the-dex.js index 92e26455db..10642d341e 100644 --- a/static/js/tutorials/trade-in-the-dex.js +++ b/static/js/tutorials/trade-in-the-dex.js @@ -3,7 +3,7 @@ // Get Credentials, Connect steps handled by the snippet -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { // Look Up Offers -------------------------------------------------------------- diff --git a/static/js/tutorials/use-tickets.js b/static/js/tutorials/use-tickets.js index 7313305ad0..e45162fff8 100644 --- a/static/js/tutorials/use-tickets.js +++ b/static/js/tutorials/use-tickets.js @@ -1,7 +1,7 @@ // 1. Generate // 2. Connect // The code for these steps is handled by interactive-tutorial.js -window.onRouteChange(() => { +onCurrentRouteLoaded(() => { const LLS_OFFSET = 75 // Expire unconfirmed transactions after about ~5 min // 3. Check Sequence Number