@doenet/doenetml 0.6.0-alpha1

package/src/Viewer/renderers/ellipsis.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function Ellipsis(props) {
+  let { name, id, SVs } = useDoenetRender(props);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  return (
+    <>
+      <a name={id} />
+      &hellip;
+    </>
+  );
+});

package/src/Viewer/renderers/em.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function Em(props) {
+  let { name, id, SVs, children } = useDoenetRender(props);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  return (
+    <em id={id}>
+      <a name={id} />
+      {children}
+    </em>
+  );
+});

package/src/Viewer/renderers/embed.jsx

@@ -0,0 +1,110 @@
+import React, { useEffect } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import { sizeToCSS } from "./utils/css";
+import VisibilitySensor from "react-visibility-sensor-v2";
+
+export default React.memo(function Figure(props) {
+  let { name, id, SVs, actions, callAction } = useDoenetRender(props);
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    if (SVs.encodedGeogebraContent) {
+      let doenetSvData = SVs;
+
+      let cName = id;
+
+      let width = sizeToCSS(SVs.width);
+      let height = sizeToCSS(SVs.height);
+
+      window.MathJax.Hub.Register.StartupHook("End", function () {
+        let parameters = {
+          id: cName,
+          width,
+          height,
+          showResetIcon: false,
+          enableLabelDrags: false,
+          useBrowserForJS: true,
+          showMenubar: false,
+          errorDialogsActive: true,
+          showToolbar: false,
+          showAlgebraicInput: false,
+          enableShiftDragZoom: true,
+          enableRightClick: true,
+          showToolBarHelp: false,
+          ggbBase64: doenetSvData.encodedGeogebraContent.trim(),
+          language: "en",
+          country: "US",
+          isPreloader: false,
+          screenshotGenerator: false,
+          preventFocus: false,
+          fixApplet: false,
+          prerelease: false,
+          playButtonAutoDecide: true,
+          playButton: false,
+          canary: false,
+          allowUpscale: false,
+        };
+        let applet = new window.GGBApplet(parameters, true);
+        applet.setHTML5Codebase("/geogebra/HTML5/5.0/web/", "true");
+        applet.inject("container_" + cName, "preferhtml5");
+      });
+    }
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let width = sizeToCSS(SVs.width);
+  let height = sizeToCSS(SVs.height);
+
+  if (SVs.geogebra) {
+    return (
+      <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+        <div className="geogebra" id={id}>
+          <a name={id} />
+          <iframe
+            scrolling="no"
+            title=""
+            src={`https://www.geogebra.org/material/iframe/id/${SVs.geogebra}/width/${width}/height/${height}/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false`}
+            width={width}
+            height={height}
+            style={{ border: "0px" }}
+          >
+            {" "}
+          </iframe>
+        </div>
+      </VisibilitySensor>
+    );
+  } else if (SVs.encodedGeogebraContent) {
+    return (
+      <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+        <div className="javascriptapplet" id={id}>
+          <div
+            className="geogebrawebapplet"
+            id={"container_" + id}
+            style={{ minWidth: width, minHeight: height }}
+          />
+        </div>
+      </VisibilitySensor>
+    );
+  }
+
+  console.warn("Nothing specified to embed");
+  return null;
+});

package/src/Viewer/renderers/feedback.jsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faComment as thoughtBubble } from "@fortawesome/free-regular-svg-icons";
+import VisibilitySensor from "react-visibility-sensor-v2";
+import styled from "styled-components";
+const FeedbackStyling = styled.aside`
+  background-color: var(--canvas);
+  margin: 0px 4px 12px 4px;
+  padding: 1em;
+  border: 2px solid var(--canvastext);
+  border-top: 0px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  //   &: focus {
+  //   outline: 2px solid var(--canvastext);
+  //   outline-offset: 2px;
+  //  }
+`;
+const SpanStyling = styled.span`
+  display: block;
+  margin: 12px 4px 0px 4px;
+  padding: 6px;
+  border: 2px solid var(--canvastext);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background-color: var(--mainGray);
+  &: focus {
+    outline: 2px solid var(--canvastext);
+    outline-offset: 2px;
+  }
+`;
+export default React.memo(function Feedback(props) {
+  let { name, id, SVs, children, actions, callAction } = useDoenetRender(props);
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let icon = <FontAwesomeIcon icon={thoughtBubble} />;
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <>
+        <SpanStyling tabIndex="0">{icon} Feedback</SpanStyling>
+        <FeedbackStyling
+          id={id}
+          // tabIndex="0"
+        >
+          <a name={id} />
+
+          {SVs.feedbackText}
+          {children}
+        </FeedbackStyling>
+      </>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/figure.jsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import VisibilitySensor from "react-visibility-sensor-v2";
+import Measure from "react-measure";
+
+export default React.memo(function Figure(props) {
+  let { name, id, SVs, children, actions, callAction } = useDoenetRender(props);
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  if (SVs.hidden || !children) {
+    return null;
+  }
+
+  // BADBADBAD: need to redo how getting the caption child
+  // getting it using the internal guts of componentInstructions
+  // is just asking for trouble
+  let childrenToRender = children;
+  let caption = null; // The <div/> element holding the figureName and the caption description
+  let captionChild = null; // The caption description
+
+  if (SVs.captionChildName) {
+    let captionChildInd;
+    for (let [ind, child] of children.entries()) {
+      //child might be null or a string
+      if (
+        child?.props?.componentInstructions.componentName ===
+        SVs.captionChildName
+      ) {
+        captionChildInd = ind;
+        break;
+      }
+    }
+
+    captionChild = children[captionChildInd];
+    childrenToRender.splice(captionChildInd, 1); // remove caption
+  }
+
+  if (!SVs.suppressFigureNameInCaption) {
+    let figureName = <strong>{SVs.figureName}</strong>;
+    if (captionChild) {
+      caption = (
+        <div>
+          {figureName}: {captionChild}
+        </div>
+      );
+    } else {
+      caption = <div>{figureName}</div>;
+    }
+  } else {
+    if (captionChild) {
+      caption = <div>{captionChild}</div>;
+    }
+  }
+
+  const [captionTextAlign, setCaptionTextAlign] = useState("center");
+
+  // Helper function for countCaptionLines
+  function getLineHeight(el) {
+    var temp = document.createElement(el.nodeName),
+      ret;
+    temp.setAttribute(
+      "style",
+      "margin:0; padding:0; " +
+        "font-family:" +
+        (el.style.fontFamily || "inherit") +
+        "; " +
+        "font-size:" +
+        (el.style.fontSize || "inherit"),
+    );
+    temp.innerHTML = "A";
+
+    el.parentNode.appendChild(temp);
+    ret = temp.clientHeight;
+    temp.parentNode.removeChild(temp);
+
+    return ret;
+  }
+
+  // Helper function for handleResize
+  // Count the number of lines in the caption
+  function countCaptionLines() {
+    var el = document.getElementById(id + "_caption");
+    var divHeight = el.offsetHeight;
+    var lineHeight = getLineHeight(document.getElementById(id + "_caption"));
+    var lines = Math.round(divHeight / lineHeight);
+    return lines;
+  }
+
+  // Change the display of the caption based on the number of lines in the caption
+  // Same behavior as LaTeX
+  function handleResize() {
+    if (countCaptionLines() >= 2) {
+      setCaptionTextAlign("left"); // If the caption is 2 or more lines long, it is left-aligned
+    } else {
+      setCaptionTextAlign("center"); // Otherwise, it is centered
+    }
+  }
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <figure id={id} style={{ margin: "12px 0" }}>
+        <a name={id} />
+        {childrenToRender}
+        <figcaption id={id + "_caption"}>
+          <Measure onResize={handleResize}>
+            {({ measureRef }) => (
+              <div ref={measureRef} style={{ textAlign: captionTextAlign }}>
+                {caption}
+              </div>
+            )}
+          </Measure>
+        </figcaption>
+      </figure>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/footnote.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function Footnote(props) {
+  let { name, id, SVs } = useDoenetRender(props, false);
+  let [isVisible, setIsVisible] = useState(false);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  const footnoteMessageStyle = {
+    padding: "10px",
+    borderRadius: "5px",
+    backgroundColor: "#e2e2e2",
+    display: `static`,
+  };
+  let footnoteMessage = "";
+
+  if (isVisible) {
+    footnoteMessage = <div style={footnoteMessageStyle}>{SVs.text}</div>;
+  }
+
+  const buttonStyle = {
+    backgroundColor: "white",
+    border: "none",
+  };
+
+  const footnoteStyle = {
+    textDecoration: "none",
+    color: "#1A5A99",
+  };
+
+  return (
+    <>
+      <span id={id}>
+        <a name={id} />
+        <sup>
+          <button
+            style={buttonStyle}
+            onClick={() => setIsVisible((was) => !was)}
+          >
+            <a href="#" title={SVs.text} style={footnoteStyle}>
+              [{SVs.footnoteTag}]
+            </a>
+          </button>
+        </sup>
+      </span>
+      {footnoteMessage}
+    </>
+  );
+});