diff --git a/_static/pretext/css/knowls_default.css b/_static/pretext/css/knowls_default.css
index dd7d528..8600b33 100644
--- a/_static/pretext/css/knowls_default.css
+++ b/_static/pretext/css/knowls_default.css
@@ -1,230 +1,73 @@
/*
- main knowls style
+ main knowls styles
*/
-[data-knowl] {
- display: inline;
- position: relative;
+.knowl__link {
cursor: pointer;
- color: #9c2310;
- padding: 0px 2px 0px 2px;
- margin: 0;
- text-decoration: none;
- margin-bottom: 1px;
-/*
- margin-bottom: 0;
-*/
- font-weight: 500;
- white-space: nowrap;
- border-bottom: none;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- transition-property: background-color;
- transition-duration: 0ms;
-}
-table [data-knowl] {
- white-space: pre-line;
-}
-
-[data-knowl]:hover, [data-knowl]:active, [data-knowl].active {
- color: #8a1200;
- background: #ffedeb;
-/*
- margin-bottom: 0;
-*/
- border-bottom: none;
-}
-
-[data-knowl]::after, [data-knowl]:hover::after, [data-knowl].active::after {
- content: "";
- position: absolute;
- top: 0;
- bottom: 1px;
- right: 2.4px;
- left: 2.4px;
- border-bottom: 1px dotted #9c2310;
- transition-property: left, right;
- transition-duration: 0ms;
- z-index: 0;
-}
-/* is the next only for a proof or other content that is only a knowl? */
-article > [data-knowl]::after, article > [data-knowl]:hover::after, article > [data-knowl].active::after,
- section > details > summary > .heading, article + details > summary > .heading {
- content: "";
- position: absolute;
- top: 0;
- bottom: 1px;
- right: 8.4px;
- right: 0.6em;
- left: 2.4px;
- border-bottom: 1px dotted #9c2310;
- transition-property: left, right;
- transition-duration: 0ms;
- z-index: 0;
-}
-
-[data-knowl].fn-knowl {
- padding-left: 0;
- padding-right: 0;
- margin-right: 2px;
-}
-[data-knowl].fn-knowl::after {
- bottom: 7px;
-}
-
-.knowl-error {
- color: red;
- border-bottom: 0;
-}
-.knowl-output {
- background: #f5f5ff;
- border: 10px solid #ddf;
- border-radius: 10px;
- padding: 0;
- margin-top: 10px;
- scroll-margin-top: 60px; /* height of header */
-}
-
-.knowl-output.original {
- background: #f8f8f8;
- border: none;
-/* border-left: 1px solid #666;
-*/
- border-radius: 0;
- padding: 0;
- margin-top: 10px;
-}
-.knowl-output.original .knowl-content {
- padding-top: 0;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-/*
-.knowl-output.original:after {
- content: '';
- display: block;
- padding-top: 0.35em;
-}
-*/
-.example-like .knowl-output.original {
- background: inherit;
+ margin-left: 0.1em;
+ margin-right: 0.1em;
+ color: var(--knowlLinkColor);
+ border-bottom: 1px dotted var(--knowlLinkColor);
}
-.knowl-output--hide {
- display: none;
+summary.knowl__link {
+ display: list-item inline;
}
-.knowl-output__error .para:first-child {
- margin-top: 0;
-}
-
-.knowl-output__error a {
- text-decoration: underline;
+.knowl__link > * {
+ display: inline;
}
-.knowl-output .knowl-output {
- border-width: 6px;
- background: #fffff5;
- border-radius: 4px;
- margin-bottom: -3px;
- margin-left: -7px;
- margin-right: -7px;
-}
-.knowl-output .knowl-output .knowl-output {
- background: #fff5ff;
-}
-.knowl-output .knowl-output .knowl-output .knowl-output {
- background: #fafffa;
-}
-.knowl-footer {
- position: relative;
- bottom: -9px;
- font-size: x-small;
- background: #ddf;
- color: grey;
- padding: 0 0 0 12px;
- margin: -10px 0 0 0;
-}
-.knowl-footer a {
- color: #006;
-}
-.knowl-footer a:hover {
- background: none;
- color: #88f;
-}
-/* .knowl-footer:after {
- content: "\2002";
-} */
-.knowl-output .knowl-output .knowl-footer {
- bottom: -5px;
- margin: -5px 0 0 0;
+.knowl__link:is(:hover, :focus, [open]) {
+ background-color: var(--knowlbackground);
+ border-bottom-color: transparent;
}
-.knowl-output + .knowl-output {
- margin-top: 0;
-}
-.knowl-output + .knowl-output.original {
- margin-top: 0.5em;
-}
-.knowl-content {
- padding: 10px;
- padding-bottom: 7px;
-}
-.knowl-content > *:first-child {
- margin-top: 0;
+.knowl__content {
+ margin: 0.2em;
+ border: 6px solid var(--knowlborder);
+ border-radius: 0.4em;
+ padding: 0.8em;
+ background-color: var(--knowlbackground);
}
-/* sort of a hack for proof knows in theorem knowls */
-.ptx-content div.knowl .posterior a[data-knowl]:first-child {
- padding: 0;
-}
-
-/* not sure where this was being used, but it made short knowls
- * look bad, like the hint here:
- * SAFurtherReading.html
-*/
-.ptx-content .knowl-output .knowl-content > *:last-child:not(.incontext) {
- margin-bottom: 0.5em;
-}
/* No Greg's L in knowls, to save space */
-
-.ptx-content .knowl-content > article.theorem-like,
-.ptx-content .knowl-content > article.definition-like,
-.ptx-content .knowl-content > article.example-like,
-.ptx-content .knowl-content > article.project-like,
-.ptx-content .knowl-content > article.objectives,
-.ptx-content .knowl-content > article.outcomes,
-.ptx-content .knowl-content > article.remark-like {
- padding-left: 0;
- border-left: none;
-}
-.ptx-content .knowl-content > article.theorem-like::after,
-.ptx-content .knowl-content > article.definition-like::after,
-.ptx-content .knowl-content > article.example-like::after,
-.ptx-content .knowl-content > article.project-like::after,
-.ptx-content .knowl-content > article.objectives::after,
-.ptx-content .knowl-content > article.outcomes::after,
-.ptx-content .knowl-content > article.remark-like::after {
- content: '';
+.ptx-content .knowl__content > article:is(.theorem-like, .definition-like, .example-like, .project-like, .objectives, .outcomes, .remark-like, .proof)::after {
+ content: '' !important;
border-bottom: none;
margin: 0;
padding: 0;
width: 0;
}
-
-/* sup knowls are used for footnotes */
-/* the next 2 are obsolete, because (in PTX HTML) the structure is now a(sup), not sup(a) */
-sup [data-knowl] {
- padding: 0px 0px 0px 3px;
+.ptx-content .knowl__content > article:is(.theorem-like, .definition-like, .example-like, .project-like, .objectives, .outcomes, .remark-like) {
+ padding-left: 0;
+ border-left: none;
}
-
-sup .active[data-knowl] {
- padding: 0px 0px 0px 3px;
+.ptx-content .knowl__content > article:is(.proof) {
+ padding-right: 0;
+ border-right: none;
}
-sup [data-knowl]:hover {
- padding: 0px 0px 0px 3px;
+
+/* nested knowl alt colors */
+.knowl__content .knowl__content {
+ background-color: var(--knowlNested1Background);
+}
+.knowl__content .knowl__content .knowl__content {
+ background-color: var(--knowlNested2Background);
}
+.knowl__content .knowl__content .knowl__content .knowl__content {
+ background-color: var(--knowlNested3Background);
+}
+.knowl__content .knowl__content .knowl__content .knowl__content .knowl__content {
+ background-color: var(--knowlNested4Background);
+}
+
+/* spacing tweaks inside knowls */
+.ptx-content .knowl__content > figure {
+ margin-left: 0;
+ margin-right: 0;
+}
\ No newline at end of file
diff --git a/_static/pretext/css/pretext.css b/_static/pretext/css/pretext.css
index dc38010..85daeec 100644
--- a/_static/pretext/css/pretext.css
+++ b/_static/pretext/css/pretext.css
@@ -134,11 +134,6 @@ nav .ptx-navbar {
display: inline;
}
-/* Oscar Levin figured out the cause of chrome showing a funny border focus */
-.ptx-content .knowl .para {
- position: unset;
-}
-
/* CSS defult values:
https://www.w3schools.com/cssref/css_default_values.asp
*/
@@ -263,9 +258,6 @@ so that we can set our own later */
display: inline;
}
-.ptx-content .exercisegroup article.exercise-like .solution .para:first-child {
- margin-top: -3px; /* because of the 10px (instread of 7) on the .knowl-content */
-}
.ptx-content .exercisegroup article.exercise-like li > .para:first-child {
margin-top: 0;
}
@@ -284,9 +276,6 @@ so that we can set our own later */
.ptx-content .exercisegroup .conclusion .heading {
margin-top: 0.5em;
}
-.ptx-content .exercisegroup .hidden-knowl-wrapper {
- margin: 0;
-}
.ptx-content .exercisegroup article + article {
margin-top: 1em;
}
@@ -323,81 +312,6 @@ so that we can set our own later */
margin-top: 0;
}
-.ptx-content .exercisegroup article + .hidden-knowl-wrapper {
- margin-left: 4em;
-}
-
-/* make it look like a list, and have entra indenting when already more indented */
-.ptx-content .exercise-like .introduction + .hidden-knowl-wrapper,
-.ptx-content .exercise-like .conclusion {
- margin-left: 1.0em;
-}
-.ptx-content .exercisegroup .exercise-like .introduction + .hidden-knowl-wrapper,
-.ptx-content .exercisegroup .exercise-like .conclusion {
- margin-left: 1.5em;
-}
-.ptx-content section > .hidden-knowl-wrapper {
- margin-top: 1em;
-}
-.ptx-content article + .hidden-knowl-wrapper {
- margin-top: 1em;
-}
-.ptx-content .knowl-content > section:first-child > .heading:first-child {
- margin-top: 0;
-}
-
-
-
-/* 9/23/23 a knowled article is now in a "details", so we add style
- to mimic the old style below */
-
-.ptx-content section .born-hidden-knowl > summary {
- cursor: pointer;
-}
-
-.ptx-content section > .born-hidden-knowl > summary::marker,
-.ptx-content article + .born-hidden-knowl > summary::marker {
- content: "";
-}
-
-.ptx-content section > .born-hidden-knowl , .ptx-content .paragraphs > .born-hidden-knowl ,
-.ptx-content article + .born-hidden-knowl {
- margin-top: 1.25em;
-}
-.ptx-content .born-hidden-knowl summary + article {
- margin-top: 1em;
-}
-.ptx-content section .born-hidden-knowl + .born-hidden-knowl ,
-.ptx-content section .introduction + .born-hidden-knowl ,
-.ptx-content section .para + .born-hidden-knowl ,
-.ptx-content section .posterior + .born-hidden-knowl {
- margin-top: 1.75em;
-}
-
-.ptx-content .born-hidden-knowl > article {
- padding-top: 0.25em;
-}
-.ptx-content .born-hidden-knowl > article:not(.theorem-like):not(.definition-like) {
- padding: 0.25em;
- padding-left: 0.5em;
- padding-bottom: 0;
-}
-.ptx-content .born-hidden-knowl > article {
- background-color: #f5f5ff;
-}
-.ptx-content .born-hidden-knowl > article .born-hidden-knowl > article,
-.ptx-content .born-hidden-knowl > article .born-hidden-knowl > .answer {
- margin: 0.5em;
- padding: 0.25em;
- padding-left: 0.5em;
- background-color: #fffff5;
-}
-.ptx-content .born-hidden-knowl > article .born-hidden-knowl > article .born-hidden-knowl > article {
- background-color: #fff5ff;
-}
-.ptx-content .born-hidden-knowl > article .born-hidden-knowl > article .born-hidden-knowl > article .born-hidden-knowl > article {
- background-color: #fafffa;
-}
/* this > may be too restrictive. The purpose is to not put a
top margin on an article at the top of a knowl */
@@ -575,22 +489,6 @@ https://yoshiwarabooks.org/mfg/MathModels.html */
display: inline;
}
-/* born hidden articls are now in "details", so adding markup
-to immitate what is below. */
-
-.ptx-content .born-hidden-knowl summary,
-.ptx-content .born-hidden-knowl summary > .heading {
- position: relative;
-}
-
-.ptx-content .born-hidden-knowl summary > .heading {
- font-size: 1.125em;
- line-height: 1.125em;
- margin-top: 0;
- display: inline;
-}
-
-
/* ----- */
diff --git a/_static/pretext/css/pretext_add_on.css b/_static/pretext/css/pretext_add_on.css
index 9a08c89..9772495 100644
--- a/_static/pretext/css/pretext_add_on.css
+++ b/_static/pretext/css/pretext_add_on.css
@@ -1492,9 +1492,6 @@ from Jiří Lebl */
/* padding, not margin, to get colored background (and not be absorbed) */
padding-top: 0.25em;
}
-.ptx-content .knowl-footer {
- display: none;
-}
.ptx-content .exercisegroup > .conclusion {
margin-left: 1.5em;
diff --git a/_static/pretext/css/setcolors.css b/_static/pretext/css/setcolors.css
index 1e54aae..94bb1dd 100644
--- a/_static/pretext/css/setcolors.css
+++ b/_static/pretext/css/setcolors.css
@@ -95,17 +95,9 @@ body.pretext {
background: var(--highlighttoc);
}
-.ptx-content [data-knowl], .ptx-content [data-knowl]:hover, .ptx-content [data-knowl]:active, .ptx-content [data-knowl].active, .ptx-content summary {
- color: var(--bodytitle);
-}
-.ptx-content [data-knowl]:hover, .ptx-content [data-knowl]:active, .ptx-content [data-knowl].active {
- color: var(--bodyfontcolorhighlight);
- background-color: var(--bodytitlehighlight);
-}
-
/* next two groups concern accessibility, so check when making changes */
.ptx-content .para > a.internal {
- color: var(--bodytitle);
+ color: var(--bodysubtitle);
}
.ptx-content .para > a.external {
color: var(--bodysubtitle);
@@ -113,7 +105,7 @@ body.pretext {
.ptx-content .para > a.internal:hover, .ptx-content .para > a.internal:hover *,
.ptx-content .para > a.internal:focus, .ptx-content .para > a.internal:focus * {
color: var(--bodyfontcolorhighlight);
- background-color: var(--bodytitlehighlight);
+ background-color: var(--bodysubtitlehighlight);
}
.ptx-content .para > a.external:hover, .ptx-content .para > a.external:hover *,
.ptx-content .para > a.external:focus, .ptx-content .para > a.external:focus * {
@@ -138,9 +130,6 @@ body.pretext {
border-color: var(--knowlborder);
background-color: var(--knowlbackground);
}
-.ptx-content .knowl-footer {
- background-color: var(--knowlborder);
-}
/*
pastel
@@ -450,3 +439,13 @@ body.pretext {
background: #606;
}
+/* link/knowl coloring */
+:root {
+ --knowlLinkColor: var(--documenttitle);
+ --linkColor: var(--bodysubtitle);
+ --linkBackground: var(--bodysubtitlehighlight);
+ --knowlNested1Background: #f5f5ff;
+ --knowlNested2Background: #fffff5;
+ --knowlNested3Background: #f5ffff;
+ --knowlNested4Background: #fff5f5;
+}
\ No newline at end of file
diff --git a/_static/pretext/css/style_oscarlevin.css b/_static/pretext/css/style_oscarlevin.css
index 2e1296c..cde49ca 100644
--- a/_static/pretext/css/style_oscarlevin.css
+++ b/_static/pretext/css/style_oscarlevin.css
@@ -14,13 +14,13 @@
:root {
/* Set colors for environments */
- --assembbody: var(--bluelight, hsl(210, 90%, 80%));
+ --assembbody: var(--bluelight, hsl(210, 90%, 90%));
--assembborder: var(--blue, hsl(210, 40%, 60%));
--assembhead: var(--blue, hsl(210, 40%, 75%));
- --definitionbody: var(--greenlight, hsl(180, 40%, 80%));
+ --definitionbody: var(--greenlight, hsl(180, 40%, 90%));
--definitionborder: var(--green, hsl(180, 40%, 50%));
--definitionhead: var(--green, hsl(180, 40%, 50%));
- --theorembody: var(--violetlight, hsl(270, 40%, 94%));
+ --theorembody: var(--violetlight, hsl(270, 40%, 90%));
--theoremborder: var(--violet, hsl(270, 40%, 75%));
--theoremhead: var(--violetdark, hsl(270, 40%, 25%));
--examplebody: var(--bluedull, hsl(240, 40%, 90%));
@@ -29,14 +29,14 @@
--examplelikebody: var(--examplebody);
--examplelikeborder: var(--bluedull, hsl(240, 40%, 75%));
--examplelikehead: var(--examplelikeborder);
- --projectbody: var(--greenlight, hsl(180, 40%, 94%));
+ --projectbody: var(--greenlight, hsl(180, 40%, 90%));
--projectborder: var(--green, hsl(180, 40%, 75%));
--projecthead: var(--green, hsl(180, 40%, 75%));
--investigateborder: var(--bluerich, hsl(180, 40%, 25%));
--goalborder: var(--violetrich, hsl(270, 90%, 25%));
- --remarklikebody: var(--yellowlight, hsl(59, 55%, 85%));
- --remarklikeborder: var(--yellow, hsl(59, 55%, 50%));
- --remarklikehead: var(--yellow, hsl(59, 55%, 50%));
+ --remarklikebody: var(--yellowlight, hsl(330, 55%, 90%));
+ --remarklikeborder: var(--yellow, hsl(330, 55%, 50%));
+ --remarklikehead: var(--yellow, hsl(330, 55%, 50%));
--computationborder: var(--orangedull, hsl(180, 40%, 75%));
/* temporary workaround for setcolors.css use of assemblage */
diff --git a/_static/pretext/js/lib/knowl.js b/_static/pretext/js/lib/knowl.js
index efec04c..6e20021 100644
--- a/_static/pretext/js/lib/knowl.js
+++ b/_static/pretext/js/lib/knowl.js
@@ -1,18 +1,126 @@
-// Code for link based knowls
+// Code controlling behavior of xref knowls and born hidden knowls
// Assumes this file is loaded as part of initial page
window.addEventListener("load", (event) => {
- addLinkKnowls(document);
+ addKnowls(document);
});
-function addLinkKnowls(target) {
+function addKnowls(target) {
const xrefs = target.querySelectorAll("[data-knowl]");
for (const xref of xrefs) {
LinkKnowl.initializeXrefKnowl(xref);
}
+
+ const bornHiddens = target.querySelectorAll(".born-hidden-knowl");
+ for (const bhk of bornHiddens) {
+ const summary = bhk.querySelector(":scope > summary");
+ const contents = bhk.querySelector(":scope > summary + *");
+ new SlideRevealer(summary, contents, bhk);
+ }
+}
+
+// Used to animate both types of knowls
+class SlideRevealer {
+ static STATE = Object.freeze({
+ INACTIVE: 0,
+ CLOSING: 1,
+ EXPANDING: 2
+ });
+
+ // triggerElement is the element clicked to open/close
+ // contentElement is the element that will hide/reveal
+ // animatedElement is the element that will grow/shrink as contentElement is modified
+ // may be the same as contentElement or a parent of it
+ constructor(triggerElement, contentElement, animatedElement) {
+ this.triggerElement = triggerElement;
+ this.contentElement = contentElement;
+ this.animatedElement = animatedElement;
+
+ // mid animation state tracking
+ this.animation = null;
+ this.animationState = SlideRevealer.STATE.INACTIVE;
+
+ this.triggerElement.addEventListener('click', (e) => this.onClick(e));
+ }
+
+ onClick(e) {
+ // Stop default behavior from the browser
+ if (e) e.preventDefault();
+
+ // Add an overflow on the to avoid content overflowing
+ this.animatedElement.style.overflow = 'hidden';
+
+ // Check if the element is being closed or is already closed
+ if (this.animationState === SlideRevealer.STATE.CLOSING || !this.animatedElement.hasAttribute("open")) {
+ // Force the [open] attributes - allow for similar targetting of xref and born-hidden knowls
+ this.animatedElement.setAttribute("open","");
+ this.triggerElement.setAttribute("open","");
+ this.contentElement.style.display = '';
+ // Wait for the next frame to call the toggle function
+ window.requestAnimationFrame(() => this.toggle(true));
+ } else if (this.animationState === SlideRevealer.STATE.EXPANDING || this.animatedElement.hasAttribute("open")) {
+ this.toggle(false);
+ }
+ }
+
+ toggle(expanding) {
+ let closedHeight = 0;
+ if (this.animatedElement.contains(this.triggerElement))
+ closedHeight = this.triggerElement.offsetHeight;
+ const fullHeight = closedHeight + this.contentElement.offsetHeight;
+
+ const startHeight = `${expanding ? closedHeight : fullHeight}px`;
+ const endHeight = `${expanding ? fullHeight : closedHeight}px`;
+
+ // Need to animate padding to avoid extra height for xref knowls
+ const padding = this.animatedElement.offsetHeight - this.animatedElement.clientHeight;
+ const startPad = `${expanding ? 0 : padding}px`;
+ const endPad = `${expanding ? padding : 0}px`;
+
+ // Cancel any existing animation
+ if (this.animation) {
+ this.animation.cancel();
+ }
+
+ // Animate ~400 pixels per second with max of 0.75 second and min of 0.25
+ const animDuration = Math.max( Math.min( (Math.abs(closedHeight - fullHeight) / 400 * 1000), 750), 250);
+
+ // Start animation
+ this.animationState = expanding ? SlideRevealer.STATE.EXPANDING : SlideRevealer.STATE.CLOSING;
+ this.animation = this.animatedElement.animate({
+ height: [startHeight, endHeight],
+ paddingTop: [startPad, endPad],
+ paddingBottom: [startPad, endPad]
+ }, {
+ duration: animDuration,
+ easing: 'ease'
+ });
+
+ this.animation.onfinish = () => { this.onAnimationFinish(expanding); };
+ this.animation.oncancel = () => { this.animationState = SlideRevealer.STATE.INACTIVE; };
+ }
+
+ onAnimationFinish(isOpen) {
+ // Clear animation state
+ this.animation = null;
+ this.animationState = SlideRevealer.STATE.INACTIVE;
+
+ // Make sure animated element has open (needed for details)
+ if(!isOpen) {
+ this.animatedElement.removeAttribute("open");
+ this.triggerElement.removeAttribute("open");
+ }
+
+ // Clear styles used in animation
+ this.animatedElement.style.overflow = '';
+ if (!isOpen)
+ this.contentElement.style.display = 'none';
+ }
}
-// A LinkKnowl managages a single link based knowl
+
+
+// A LinkKnowl manages a single link based knowl
class LinkKnowl {
// Used to uniquely identify XrefKnowls
static xrefCount = 0;
@@ -40,6 +148,8 @@ class LinkKnowl {
// If no title, use textContent
knowlLinkElement.setAttribute("data-base-title", knowlLinkElement.getAttribute("title") || this.linkElement.textContent);
+ knowlLinkElement.classList.add("knowl__link");
+
this.updateLabels(false);
// Bind required to force "this" of event handler to be this object
@@ -62,12 +172,11 @@ class LinkKnowl {
// Assumes output is already created
toggle() {
this.linkElement.classList.toggle("active");
- this.updateLabels(this.linkElement.classList.contains("active"));
-
- this.outputElement.classList.toggle("knowl-output--hide");
+ const isActive = this.linkElement.classList.contains("active");
+ this.updateLabels(isActive);
// Scroll to reveal if needed
- if (!this.outputElement.classList.contains("knowl-output--hide")) {
+ if (isActive) {
const h = this.outputElement.getBoundingClientRect().height;
if (h > window.innerHeight) {
// knowl is taller than window, scroll to top of knowl
@@ -99,13 +208,9 @@ class LinkKnowl {
const outputContentsId = "knowl-output-" + this.uid;
const linkTarget = this.linkElement.getAttribute("data-knowl");
- const placeholderText = `
`
- + `
`
- + `
`
+ const placeholderText = `
`
+ `Loading '${linkTarget}'`
- + `
`
- + ``
- + `
`;
+ + ``;
const temp = document.createElement("template");
temp.innerHTML = placeholderText;
@@ -153,10 +258,15 @@ class LinkKnowl {
} else {
this.createOutputElement();
+ const slideHandler = new SlideRevealer(this.linkElement, this.outputElement, this.outputElement);
+ //slideHandler is now responsible for handling clicks to this element
+ this.linkElement.addEventListener('click', slideHandler);
+
// Wait up to a half second in hopes of avoiding double content change
// then render to show loading message
let loadingTimeout = setTimeout(() => {
loadingTimeout = null;
+ slideHandler.onClick(); //fake initial click
this.toggle();
}, 500);
@@ -171,10 +281,11 @@ class LinkKnowl {
}
// Now give code that follows .1 seconds to render before making visible
setTimeout(() => {
+ slideHandler.onClick(); //fake initial click
this.toggle();
}, 100);
- // check embeded runestone interactives by loading content into a temp container
+ // check embedded runestone interactives by loading content into a temp container
// we want to not render any that already are on page. Dupe IDs probably bad
const runestoneElements = tempContainer.querySelectorAll(".ptx-runestone-container");
[...runestoneElements].forEach((e) => {
@@ -189,17 +300,16 @@ class LinkKnowl {
});
// now move all contents to the real output element
- const target = document.getElementById("knowl-output-" + this.uid);
const children = [...tempContainer.children];
- target.innerHTML = "";
- target.append(...children);
+ this.outputElement.innerHTML = "";
+ this.outputElement.append(...children);
// render any knowls and mathjax in the knowl
- MathJax.typesetPromise([target]);
- addLinkKnowls(target);
+ MathJax.typesetPromise([this.outputElement]);
+ addKnowls(this.outputElement);
// force any scripts (e.g. sagecell) to execute by evaling them
- [...target.getElementsByTagName("script")].forEach((s) => {
+ [...this.outputElement.getElementsByTagName("script")].forEach((s) => {
if (
s.getAttribute("type") === null ||
s.getAttribute("type") === "text/javascript"
diff --git a/_static/pretext/js/lib/mathjaxknowl.js b/_static/pretext/js/lib/mathjaxknowl.js
index 17ae21f..11dacae 100644
--- a/_static/pretext/js/lib/mathjaxknowl.js
+++ b/_static/pretext/js/lib/mathjaxknowl.js
@@ -38,7 +38,6 @@ MathJax.Extension.Knowl = {
"
The graph \(G' = (V', E')\) is a subgraph of \(G = (V, E)\) if \(V' \subseteq V\) and \(E' \subseteq \{\{u, v\} \in E \ |\ u, v \in V'\}\text{.}\)
-
-
The subgraph \(G' = (V', E')\) is a spanning subgraph of \(G = (V, E)\) if \(V' = V\text{.}\)
-
-
A spanning tree for the graph \(G\) is a spanning subgraph of \(G\) that is a tree.
-
-
Breadth-first search algorithm
-
-
Choose a vertex of the graph (root), arbitrarily.
-
Travel all the edges incident with the root vertex.
-
Give an order to this set of new vertices added.
-
Consider each of these vertices as a root, in order, and add all the unvisited incident edges that do not produce a cycle.
-
Repeat the method with the new set of vertices.
-
Follow the same procedure until all the vertices have been visited.
-
-
The output of this algorithm is a spanning tree.
-
-
-
Given a weighted graph, a minimal spanning tree is a spanning tree whose sum of wights is minimal.
-
-
-Prim’s Algorithm: Keep two disjoint sets of vertices. One \((L)\) contains vertices that are in the growwing spanning tree and the other \((R)\) that are not in the growing spanning tree.
-
-
Choose a vertex \(u \in V\) arbitrarily. At this step, \(L = \{u\}\) and \(R = V - \{u\}\text{.}\)
-
-
Select the cheapest vertex in \(R\) that is connected to the growing spanning tree \(L\) and add it into \(L\)
-
-
Follow the same procedure until all the vertices are in \(L\)
-
-
-
The output of this algorithm is a minimal spanning tree.
-
-
Let’s explore the following graph:
-
+
You can also add input validation to your functions to make them more robust.
+
+
Try calling the function with an empty string or a non-string argument to see the input validation in action.
+
-
We can ask Sage for the minimal spanning tree of this graph.
can be found at this link. Right now, reading the documentation is optional. We will do our best to get you up and running with Sage with this text.
You can quickly reference Sage documentation with the ? operator. You may also view the source code with the ?? operator.
@@ -294,7 +295,7 @@
Search Results:
-
March 19, 2024
+
March 25, 2024
-Section1.8Run Sage in the browser
+Section1.9Run Sage in the browser
The easiest way to get started is by running SageMath online. However, if you do not have reliable internet, you can also install the software locally on your own computer. Begin your journey with SageMath by following these steps:
Start your new project and create a new worksheet. Choose the SageMath Worksheet option.
Enter SageMath code into the worksheet. Try to evaluate a simple expression and use the worksheet like a calculator. Execute the code by clicking Run or using the shortcut Shift + Enter. We’ll learn more ways to run code in the next section.
Save your worksheet as a PDF for your records.
-
To learn more about SageMath worksheets, refer to the documentation 5
https://doc.cocalc.com/sagews.html
+
To learn more about SageMath worksheets, refer to the documentation 5