thomasdarimont/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpeakJava</title>

    <link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism.css" rel="stylesheet" />

    <style>
        .token {
            position: relative;
        }

        .token::before,
        .token::after {

            --scale: 0;
            --tooltip-color: #333;
            --arrow-size: 10px;

            position: absolute;
            top: -.25rem;
            left: 50%;
            transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
            transition: 50ms transform;
            transform-origin: bottom center;
        }

        .token::before {
            --translate-y: calc(-100% - var(--arrow-size));
            content: attr(class);
            color: white;
            padding: .5rem;
            width: max-content;
            /* max-width: 100%; */
            border-radius: .3rem;
            text-align: center;
            background: var(--tooltip-color);
        }

        .token:after {
            --scale: 0;
            --translate-y: calc(-1 * var(--arrow-size));
            content: '';
            border: var(--arrow-size) solid transparent;
            border-top-color: var(--tooltip-color);
        }

        .token:hover::before,
        .token:hover::after {
            --scale: 1
        }
    </style>

</head>

<body>
    <div>
        Speak Java
    </div>

    <pre><code id="codeInput" class="language-java">
@Controller
class UserInterfaceController {

    private final String uiPath;

    private final SpqrProperties spqrProperties;

    private final AccessTokenResolver accessTokenResolver;

    public UserInterfaceController(@Value("${graphql.spqr.gui.endpoint:/gui}") String uiPath, SpqrProperties spqrProperties, AccessTokenResolver tokenResolver) {
        this.uiPath = uiPath;
        this.spqrProperties = spqrProperties;
        this.accessTokenResolver = tokenResolver;
    }

    @RequestMapping(
            value = {"${graphql.spqr.gui.endpoint:/ui}"},
            produces = {"text/html; charset=utf-8"}
    )
    String renderUserInterface(@AuthenticationPrincipal Authentication authentication, Model model) throws IOException {

        SpqrProperties.Gui gui = this.spqrProperties.getGui();

        String accessToken = accessTokenResolver.getToken((OAuth2AuthenticationToken) authentication);

        model.addAttribute("pageTitle", gui.getPageTitle());
        model.addAttribute("graphQLEndpoint", gui.getTargetEndpoint());
        model.addAttribute("webSocketEndpoint", gui.getTargetWsEndpoint());
        model.addAttribute("accessToken", accessToken);

        return "playground-jwt.html";
    }

    @GetMapping("/")
    String redirectToUserInterface() {
        return "redirect:" + uiPath;
    }
}
</code></pre>

    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-java.min.js"></script>
    <script defer>
        document.getElementById("codeInput").addEventListener("mouseover", evt => {

            if (evt.target.id === "codeInput") {
                return;
            }

            let targetElement = evt.target;

            let elementClasses = targetElement.classList;

            if (elementClasses.contains("punctuation") || elementClasses.contains("keyword")) {
                return;
            }

            let textContent = targetElement.textContent;

            let followingText = targetElement.nextSibling.textContent;

            // console.log(evt, targetElement, textContent, followingText);

            if (elementClasses.contains("class-name") && textContent) {
                console.log("Class: " + textContent);
            } else {
                console.log(textContent, followingText);
            }
        });

        function say(text) {

            if (!text || typeof text !== "string") {
                return;
            }

            let synth = window.speechSynthesis;
            if (synth.speaking) {
                console.error('speechSynthesis.speaking');
                return;
            }

            var msg = new SpeechSynthesisUtterance();
            msg.text = text;
            msg.rate = .7; // From 0.1 to 10
            msg.pitch = 1; // From 0 to 2
            window.speechSynthesis.speak(msg);
        }


        let lastSaid = { text: null };
        window.setInterval(() => {

            console.log("try speaking...")

            let selection = window.getSelection();
            if (!selection) {
                return;
            }

            let currentText = selection.toString();

            if (currentText.trim().match(/^[{}().;]$/g)) {
                return;
            }

            if (lastSaid.text && lastSaid.text.trim() === currentText.trim()) {
                return;
            }

            lastSaid.text = currentText;

            say(selection.toString());


        }, 500);

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SpeakJava</title>

	<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism.css" rel="stylesheet" />

	<style>
	.token {
	position: relative;
	}

	.token::before,
	.token::after {

	--scale: 0;
	--tooltip-color: #333;
	--arrow-size: 10px;

	position: absolute;
	top: -.25rem;
	left: 50%;
	transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
	transition: 50ms transform;
	transform-origin: bottom center;
	}

	.token::before {
	--translate-y: calc(-100% - var(--arrow-size));
	content: attr(class);
	color: white;
	padding: .5rem;
	width: max-content;
	/* max-width: 100%; */
	border-radius: .3rem;
	text-align: center;
	background: var(--tooltip-color);
	}

	.token:after {
	--scale: 0;
	--translate-y: calc(-1 * var(--arrow-size));
	content: '';
	border: var(--arrow-size) solid transparent;
	border-top-color: var(--tooltip-color);
	}

	.token:hover::before,
	.token:hover::after {
	--scale: 1
	}
	</style>

	</head>

	<body>
	<div>
	Speak Java
	</div>

	<pre><code id="codeInput" class="language-java">
	@Controller
	class UserInterfaceController {

	private final String uiPath;

	private final SpqrProperties spqrProperties;

	private final AccessTokenResolver accessTokenResolver;

	public UserInterfaceController(@Value("${graphql.spqr.gui.endpoint:/gui}") String uiPath, SpqrProperties spqrProperties, AccessTokenResolver tokenResolver) {
	this.uiPath = uiPath;
	this.spqrProperties = spqrProperties;
	this.accessTokenResolver = tokenResolver;
	}

	@RequestMapping(
	value = {"${graphql.spqr.gui.endpoint:/ui}"},
	produces = {"text/html; charset=utf-8"}
	)
	String renderUserInterface(@AuthenticationPrincipal Authentication authentication, Model model) throws IOException {

	SpqrProperties.Gui gui = this.spqrProperties.getGui();

	String accessToken = accessTokenResolver.getToken((OAuth2AuthenticationToken) authentication);

	model.addAttribute("pageTitle", gui.getPageTitle());
	model.addAttribute("graphQLEndpoint", gui.getTargetEndpoint());
	model.addAttribute("webSocketEndpoint", gui.getTargetWsEndpoint());
	model.addAttribute("accessToken", accessToken);

	return "playground-jwt.html";
	}

	@GetMapping("/")
	String redirectToUserInterface() {
	return "redirect:" + uiPath;
	}
	}
	</code></pre>

	<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-java.min.js"></script>
	<script defer>
	document.getElementById("codeInput").addEventListener("mouseover", evt => {

	if (evt.target.id === "codeInput") {
	return;
	}

	let targetElement = evt.target;

	let elementClasses = targetElement.classList;

	if (elementClasses.contains("punctuation") \|\| elementClasses.contains("keyword")) {
	return;
	}

	let textContent = targetElement.textContent;

	let followingText = targetElement.nextSibling.textContent;

	// console.log(evt, targetElement, textContent, followingText);

	if (elementClasses.contains("class-name") && textContent) {
	console.log("Class: " + textContent);
	} else {
	console.log(textContent, followingText);
	}
	});

	function say(text) {

	if (!text \|\| typeof text !== "string") {
	return;
	}

	let synth = window.speechSynthesis;
	if (synth.speaking) {
	console.error('speechSynthesis.speaking');
	return;
	}

	var msg = new SpeechSynthesisUtterance();
	msg.text = text;
	msg.rate = .7; // From 0.1 to 10
	msg.pitch = 1; // From 0 to 2
	window.speechSynthesis.speak(msg);
	}


	let lastSaid = { text: null };
	window.setInterval(() => {

	console.log("try speaking...")

	let selection = window.getSelection();
	if (!selection) {
	return;
	}

	let currentText = selection.toString();

	if (currentText.trim().match(/^[{}().;]$/g)) {
	return;
	}

	if (lastSaid.text && lastSaid.text.trim() === currentText.trim()) {
	return;
	}

	lastSaid.text = currentText;

	say(selection.toString());


	}, 500);

	</script>
	</body>

	</html>