-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #62 from apeltzer/rootstock-2020-11-11
Rootstock 2020 11 11
- Loading branch information
Showing
8 changed files
with
118 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!-- d3 plugin --> | ||
|
|
||
| <script | ||
| src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js" | ||
| integrity="sha512-C2RveGuPIWqkaLAluvoxyiaN1XYNe5ss11urhZWZYBUA9Ydgj+hfGKPcxCzTwut1/fmjEZR7Ac35f2aycT8Ogw==" | ||
| crossorigin="anonymous" | ||
| > | ||
| // ///////////////////////// | ||
| // DESCRIPTION | ||
| // ///////////////////////// | ||
|
|
||
| // This third-party plugin 'D3' allows you to create complex, dynamic, | ||
| // interactive, data-driven visualizations in SVG. | ||
|
|
||
| // https://d3js.org/ | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!-- inline svg plugin --> | ||
|
|
||
| <script> | ||
| (function() { | ||
| // ///////////////////////// | ||
| // DESCRIPTION | ||
| // ///////////////////////// | ||
|
|
||
| // This Manubot plugin fetches the text source code of SVGs in <img> tags, | ||
| // and inserts it into the document in-place. This provides many | ||
| // advantages, such as being able to style SVGs globally from the CSS | ||
| // themes, and being able to make SVGs interactive with JavaScript and D3. | ||
| // If you have a script that expects SVGs to be inlined, wait for an | ||
| // "SVGLoaded" event before running it. | ||
|
|
||
| // Note: This requires the page to be served from a server to work | ||
| // See: https://stackoverflow.com/a/11063963/2180570 | ||
| // Tip: Use the manubot commands to open the page in a local webserver | ||
| // See: https://github.com/manubot/rootstock#local-execution | ||
|
|
||
| // ///////////////////////// | ||
| // SCRIPT | ||
| // ///////////////////////// | ||
|
|
||
| // start script | ||
| async function start() { | ||
| // get all <img> tags that have "src" attributes that end with ".svg" | ||
| const imgs = document.querySelectorAll('img[src$=".svg"]'); | ||
| const inlineSvgs = Array.from(imgs).map(inlineSvg); | ||
| await Promise.all(inlineSvgs); | ||
|
|
||
| // dispatch "inline finished" event | ||
| document.dispatchEvent(new Event('SVGLoaded')); | ||
| } | ||
|
|
||
| // take an svg <img> tag, fetch its source code, and replace it | ||
| async function inlineSvg(img) { | ||
| try { | ||
| // fetch svg source code | ||
| const response = await fetch(img.src); | ||
| if (!response.ok) throw new Error('Couldn\'t get SVG source'); | ||
| const source = await response.text(); | ||
| if (!source.trim()) throw new Error('No SVG source'); | ||
| // parse specifically as svg, create new (hidden) dom node | ||
| const svg = new DOMParser() | ||
| .parseFromString(source, 'image/svg+xml') | ||
| .querySelector('svg'); | ||
| if (!svg) throw new Error('Couldn\'t parse SVG'); | ||
| // transfer original img attributes into new svg | ||
| for (const { name, value } of img.attributes) | ||
| svg.setAttribute(name, value); | ||
| // replace original image with new svg | ||
| img.outerHTML = svg.outerHTML; | ||
| } catch (error) { | ||
| console.log(error); | ||
| } | ||
| } | ||
|
|
||
| // start script when document is finished loading | ||
| window.addEventListener('load', start); | ||
| })(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters