diff --git a/.mapping.json b/.mapping.json index 1b49933..8d5a570 100644 --- a/.mapping.json +++ b/.mapping.json @@ -1 +1 @@ -{"source/main.ptx": ["Discrete-Math-with-SageMath"], "source/frontmatter.ptx": ["frontmatter"], "source/getting-started/ch-getting-started.ptx": ["ch-getting-started"], "source/getting-started/sec-intro-to-sage.ptx": ["about-sage"], "source/getting-started/sec-displaying.ptx": ["displaying"], "source/getting-started/sec-OOP.ptx": ["OOP"], "source/getting-started/sec-data-types.ptx": ["data-types"], "source/getting-started/sec-iteration.ptx": ["iteration"], "source/getting-started/sec-debugging.ptx": ["debugging"], "source/getting-started/sec-documentation.ptx": ["documentation"], "source/getting-started/sec-sage-browser.ptx": ["sage-browser"], "source/set-theory/ch-set-theory.ptx": ["ch-set-theory"], "source/set-theory/sec-creating-sets.ptx": ["creating-sets"], "source/set-theory/sec-cardinality.ptx": ["cardinality"], "source/set-theory/sec-operation-on-sets.ptx": ["sec-operation-on-sets"], "source/combinatorics/ch-combinatorics.ptx": ["ch-combinatorics"], "source/combinatorics/sec-combinatorics.ptx": ["sec-combinatorics"], "source/logic/ch-logic.ptx": ["ch-logic"], "source/logic/sec-logical-operation.ptx": ["sec-logical-operation"], "source/logic/sec-truth-table.ptx": ["sec-truth-table"], "source/logic/sec-tautology.ptx": ["sec-tautology"], "source/relations/ch-relations.ptx": ["ch-relations"], "source/relations/sec-intro-relations.ptx": ["intro-relations"], "source/relations/sec-relations-on-a-set.ptx": ["relations-on-a-set"], "source/relations/sec-digraphs.ptx": ["digraphs"], "source/relations/sec-properties.ptx": ["properties"], "source/relations/sec-equivalence.ptx": ["equivalence"], "source/relations/sec-partial-order.ptx": ["partial-order"], "source/functions/ch-functions.ptx": ["ch-functions"], "source/functions/sec-functions.ptx": ["sec-functions"], "source/functions/sec-recursion.ptx": ["sec-recursion"], "source/graph-theory/ch-graph-theory.ptx": ["ch-graph-theory"], "source/graph-theory/sec-basics.ptx": ["sec-basics"], "source/graph-theory/sec-plot-options.ptx": ["sec-plot-options"], "source/graph-theory/sec-paths.ptx": ["paths"], "source/graph-theory/sec-isomorphism.ptx": ["isomorphism"], "source/graph-theory/sec-euler-and-hamilton.ptx": ["euler-and-hamilton"], "source/graph-theory/sec-search-algorithm.ptx": ["search-algorithm"], "source/trees/ch-trees.ptx": ["ch-trees"], "source/trees/sec-definitions-and-theorems.ptx": ["definitions-and-theorems"], "source/trees/sec-search-algorithms.ptx": ["search-algorithms"], "source/backmatter.ptx": ["backmatter"]} \ No newline at end of file +{"source/main.ptx": ["Discrete-Math-with-SageMath"], "source/frontmatter.ptx": ["frontmatter"], "source/getting-started/ch-getting-started.ptx": ["ch-getting-started"], "source/getting-started/sec-intro-to-sage.ptx": ["about-sage"], "source/getting-started/sec-displaying.ptx": ["displaying"], "source/getting-started/sec-OOP.ptx": ["OOP"], "source/getting-started/sec-data-types.ptx": ["data-types"], "source/getting-started/sec-iteration.ptx": ["iteration"], "source/getting-started/sec-debugging.ptx": ["debugging"], "source/getting-started/sec-defining-functions.ptx": ["defining-functions"], "source/getting-started/sec-documentation.ptx": ["documentation"], "source/getting-started/sec-sage-browser.ptx": ["sage-browser"], "source/set-theory/ch-set-theory.ptx": ["ch-set-theory"], "source/set-theory/sec-creating-sets.ptx": ["creating-sets"], "source/set-theory/sec-cardinality.ptx": ["cardinality"], "source/set-theory/sec-operation-on-sets.ptx": ["sec-operation-on-sets"], "source/combinatorics/ch-combinatorics.ptx": ["ch-combinatorics"], "source/combinatorics/sec-combinatorics.ptx": ["sec-combinatorics"], "source/logic/ch-logic.ptx": ["ch-logic"], "source/logic/sec-logical-operation.ptx": ["sec-logical-operation"], "source/logic/sec-truth-table.ptx": ["sec-truth-table"], "source/logic/sec-tautology.ptx": ["sec-tautology"], "source/relations/ch-relations.ptx": ["ch-relations"], "source/relations/sec-intro-relations.ptx": ["intro-relations"], "source/relations/sec-relations-on-a-set.ptx": ["relations-on-a-set"], "source/relations/sec-digraphs.ptx": ["digraphs"], "source/relations/sec-properties.ptx": ["properties"], "source/relations/sec-equivalence.ptx": ["equivalence"], "source/relations/sec-partial-order.ptx": ["partial-order"], "source/functions/ch-functions.ptx": ["ch-functions"], "source/functions/sec-functions.ptx": ["sec-functions"], "source/functions/sec-recursion.ptx": ["sec-recursion"], "source/graph-theory/ch-graph-theory.ptx": ["ch-graph-theory"], "source/graph-theory/sec-basics.ptx": ["sec-basics"], "source/graph-theory/sec-plot-options.ptx": ["sec-plot-options"], "source/graph-theory/sec-paths.ptx": ["paths"], "source/graph-theory/sec-isomorphism.ptx": ["isomorphism"], "source/graph-theory/sec-euler-and-hamilton.ptx": ["euler-and-hamilton"], "source/graph-theory/sec-search-algorithm.ptx": ["search-algorithm"], "source/trees/ch-trees.ptx": ["ch-trees"], "source/trees/sec-definitions-and-theorems.ptx": ["definitions-and-theorems"], "source/trees/sec-search-algorithms.ptx": ["search-algorithms"], "source/backmatter.ptx": ["backmatter"]} \ No newline at end of file diff --git a/Discrete-Math-with-SageMath.html b/Discrete-Math-with-SageMath.html index 2720a5f..e385830 100644 --- a/Discrete-Math-with-SageMath.html +++ b/Discrete-Math-with-SageMath.html @@ -154,8 +154,9 @@

Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • diff --git a/OOP.html b/OOP.html index c1bc37c..ff49a09 100644 --- a/OOP.html +++ b/OOP.html @@ -154,8 +154,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • 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 = `` - + `` - + `
    `; + + ``; 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 = { "
    " + "loading '"+url+"'" + "
    " + - "" + "" + ""; diff --git a/_static/pretext/js/pretext_add_on.js b/_static/pretext/js/pretext_add_on.js index 85a100f..53de39c 100644 --- a/_static/pretext/js/pretext_add_on.js +++ b/_static/pretext/js/pretext_add_on.js @@ -137,7 +137,7 @@ function permalinkDescription(elem) { if ((lastChr == '.') || (lastChr == ':')) { retStr = retStr.slice(0,retStr.length - 1); } - return retStr; + return retStr.replace(/[\n\r]/g, ""); } /* diff --git a/about-sage.html b/about-sage.html index b5b5347..5c47094 100644 --- a/about-sage.html +++ b/about-sage.html @@ -154,8 +154,9 @@

    Search Results:

  • -
  • -
  • +
  • +
  • +
  • diff --git a/backmatter-2.html b/backmatter-2.html index d51b4ff..da87332 100644 --- a/backmatter-2.html +++ b/backmatter-2.html @@ -142,8 +142,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • diff --git a/backmatter.html b/backmatter.html index 2de26d1..9116daf 100644 --- a/backmatter.html +++ b/backmatter.html @@ -142,8 +142,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • diff --git a/cardinality.html b/cardinality.html index 11643cb..adeb6db 100644 --- a/cardinality.html +++ b/cardinality.html @@ -154,8 +154,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • diff --git a/ch-combinatorics.html b/ch-combinatorics.html index f831757..47e9520 100644 --- a/ch-combinatorics.html +++ b/ch-combinatorics.html @@ -154,8 +154,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • diff --git a/ch-functions.html b/ch-functions.html index bd6824d..febafdd 100644 --- a/ch-functions.html +++ b/ch-functions.html @@ -154,8 +154,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • diff --git a/ch-getting-started.html b/ch-getting-started.html index 27137c9..ee9ff51 100644 --- a/ch-getting-started.html +++ b/ch-getting-started.html @@ -154,8 +154,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • @@ -288,8 +289,9 @@

    Search Results:

  • 1.4 Data Types
  • 1.5 Iteration
  • 1.6 Debugging
  • -
  • 1.7 Documentation
  • -
  • 1.8 Run Sage in the browser
  • +
  • 1.7 Defining Functions
  • +
  • 1.8 Documentation
  • +
  • 1.9 Run Sage in the browser
  • -PrevUpNext -PrevUpNext