JSFiddle - React, Tailwind, and code Playground

by Theo van den Heuvel

HTML

<body style="padding: 0;">
    <!-- <embed src="hltwebsite.svg" width="100%" height="800"/> -->
    <div class="lcol" id="mainpage">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        width="100%" height="100%" id="hlt_bg" version="1.1" onload="startup()">

        <g id="fo_text" transform="translate(850,60),skewX(2),rotate(2),scale(0.8)">
          <switch>
            <foreignObject width="500" height="840" x="0" y="0"
              requiredExtensions="http://www.w3.org/1999/xhtml">
              <style>
                body{
                    font-family:verdana;
                    background-color:#eef;
                    padding:2em;
                }
                form{
                    display:block;
                    width:265px;
                    border-radius:5px;
                    /*    border-style: groove;*/
                }
                form > button{
                    display:block;
                    width:100px;
                    padding:0px;
                }
                form input{
                    font-size:20px;
                }
                form textarea{
                    font-size:20px;
                }</style>
              <body xmlns="http://www.w3.org/1999/xhtml">
                <div id="inject"></div>
              </body>
            </foreignObject>
            <text font-family="Verdana" font-size="20">
              <tspan x="10" y="20">foreignObject not working.</tspan>
            </text>
          </switch>
        </g>

        <g id="buttons">
          <g id="button_face"></g>
          <g id="button_label"></g>
        </g>
        <g id="fo_callout" transform="translate(550,100),skewX(2),rotate(2),scale(0.8)" pointer-events="none" display="none">
            <foreignObject width="400" height="700" x="0" y="0"
              requiredExtensions="http://www.w3.org/1999/xhtml">
              <style>
                body{
                   ...

CSS

*{
    margin:0;
    padding:0;
}
.fullcol{
}
.lcol{
    float:left;
    width:1200px;
}
.rcol{
    float: left;
    width: 300px;
    padding:10px;
    /* overflow:hidden; */
}

JavaScript

"use strict";

/*

Testcase to illustrate problem I have in Opera.

steps to reproduce:

1. click on button primary. Notice that a foreignObject is filled with "primary".
2. hover over button secondary. Notice that the color of the button changes.
3. a new foreignObject is filled with text "secondary", as can be seen in the HTML.


Expected result:
a new foreignObject is not displayed.

Actual result:
the foreignObject is not displayed.

*/

var svgns = "http://www.w3.org/2000/svg"
  , xlinkns = "http://www.w3.org/1999/xlink"
  , hlt = hlt || new Object()
  , fo_allowed
  , focusX = 550
  , focusY = 100
  , button_face
  , button_label
  ;

hlt.enums = {
    STATE: {
      HOME: {name: 'home'}
    , Primary:  {name: 'primary'}
    }
};
hlt.state = hlt.enums.STATE.HOME; // initial state

// ==================== generic
/* JQuery-ish */
function $(id) {
    return document.getElementById(id);
}



// ==================== Button
/*
    If a button has an action associated (via its configuration) that 
    action is triggered on mouseup. If a hover action is provided,
    this is called both on mouseenter and on mouseleave of the button.
    The first argument is a boolean indicating if mouseenter was the trigger.
    A button can be set to be (not) hot. This is useful for navigation buttons
    where the hot button designates the current location (e.g. page).
    This means that you can see which button lead to the current location.
    By default a hot button has a larger label with bright yellow text.
*/
var button_colour_schemes = {// off, hover, disabled, text_off, text_hover, text_disabled, text_hot
    basic: ['#f00', '#0f0', '#a00', '#ffd', '#fff', '#aaa', '#ffd']
  , diagram: ['#f00', '#fd2', '#a04', '#ffd', '#fff', '#aaa']
//  , patch: ['#aaf', '#bbf', '#669', '#eef', '#fff', '#aaa']
  , patch: ['#68a', '#bbf', '#558', '#ddf', '#fff', '#aaa']
};

var all_buttons = []; // we need this, because redrawing text after all buttons
function Button(hash) { 
    //...