From d324bcd45dfe92521d465f6328e79c2ee819c12d Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Thu, 9 Apr 2020 15:54:01 -0700 Subject: attempt to unfuck git-lfs --- docs/_includes/charset-table.html | 2 +- docs/_includes/ctxedit.html | 8 +- docs/_layouts/default.html | 22 +- docs/_scripts/optimize-resources.sh | 6 +- docs/dynmetrics/index.html | 8 +- docs/index.html | 2 +- docs/lab/lab.css | 16 +- docs/r/base.css | 854 ++++++++++++++++++++++++++++++++ docs/r/base.js | 115 +++++ docs/r/bindings.js | 242 +++++++++ docs/r/close.svg | 1 + docs/r/ctxedit.css | 337 +++++++++++++ docs/r/ctxedit.js | 560 +++++++++++++++++++++ docs/r/dismiss.svg | 1 + docs/r/favicon.png | 3 + docs/r/graphplot.js | 239 +++++++++ docs/r/grid.css | 341 +++++++++++++ docs/r/icons/close-black.svg | 1 + docs/r/icons/close.svg | 1 + docs/r/icons/dismiss-black.svg | 1 + docs/r/icons/dismiss.svg | 1 + docs/r/icons/font-size-black.svg | 1 + docs/r/icons/font-size.svg | 1 + docs/r/icons/letter-spacing-black.svg | 1 + docs/r/icons/letter-spacing.svg | 1 + docs/r/icons/line-height-black.svg | 1 + docs/r/icons/line-height.svg | 1 + docs/r/icons/minimize-black.svg | 3 + docs/r/icons/minimize.svg | 3 + docs/r/icons/popup-black.svg | 1 + docs/r/icons/popup.svg | 1 + docs/r/icons/reset-black.svg | 1 + docs/r/icons/reset.svg | 1 + docs/r/icons/settings-black.svg | 1 + docs/r/icons/settings.svg | 1 + docs/r/icons/style-black.svg | 1 + docs/r/icons/style.svg | 1 + docs/r/metrics.png | 3 + docs/r/noise512.png | 3 + docs/r/popup.svg | 1 + docs/r/preview-app.png | 3 + docs/r/reset.svg | 1 + docs/r/sample.png | 3 + docs/r/settings.svg | 1 + docs/r/share.png | 3 + docs/r/weights-and-styles.svg | 1 + docs/res/base.css | 854 -------------------------------- docs/res/base.js | 115 ----- docs/res/bindings.js | 242 --------- docs/res/close.svg | 1 - docs/res/ctxedit.css | 337 ------------- docs/res/ctxedit.js | 560 --------------------- docs/res/dismiss.svg | 1 - docs/res/favicon.png | 3 - docs/res/graphplot.js | 239 --------- docs/res/grid.css | 341 ------------- docs/res/icons/close-black.svg | 1 - docs/res/icons/close.svg | 1 - docs/res/icons/dismiss-black.svg | 1 - docs/res/icons/dismiss.svg | 1 - docs/res/icons/font-size-black.svg | 1 - docs/res/icons/font-size.svg | 1 - docs/res/icons/letter-spacing-black.svg | 1 - docs/res/icons/letter-spacing.svg | 1 - docs/res/icons/line-height-black.svg | 1 - docs/res/icons/line-height.svg | 1 - docs/res/icons/minimize-black.svg | 3 - docs/res/icons/minimize.svg | 3 - docs/res/icons/popup-black.svg | 1 - docs/res/icons/popup.svg | 1 - docs/res/icons/reset-black.svg | 1 - docs/res/icons/reset.svg | 1 - docs/res/icons/settings-black.svg | 1 - docs/res/icons/settings.svg | 1 - docs/res/icons/style-black.svg | 1 - docs/res/icons/style.svg | 1 - docs/res/metrics.png | 3 - docs/res/noise512.png | 3 - docs/res/popup.svg | 1 - docs/res/preview-app.png | 3 - docs/res/reset.svg | 1 - docs/res/sample.png | 3 - docs/res/settings.svg | 1 - docs/res/share.png | 3 - docs/res/weights-and-styles.svg | 1 - docs/samples/index.html | 8 +- 86 files changed, 2772 insertions(+), 2772 deletions(-) create mode 100644 docs/r/base.css create mode 100644 docs/r/base.js create mode 100644 docs/r/bindings.js create mode 100644 docs/r/close.svg create mode 100644 docs/r/ctxedit.css create mode 100644 docs/r/ctxedit.js create mode 100644 docs/r/dismiss.svg create mode 100644 docs/r/favicon.png create mode 100644 docs/r/graphplot.js create mode 100644 docs/r/grid.css create mode 100755 docs/r/icons/close-black.svg create mode 100755 docs/r/icons/close.svg create mode 100755 docs/r/icons/dismiss-black.svg create mode 100755 docs/r/icons/dismiss.svg create mode 100755 docs/r/icons/font-size-black.svg create mode 100755 docs/r/icons/font-size.svg create mode 100755 docs/r/icons/letter-spacing-black.svg create mode 100755 docs/r/icons/letter-spacing.svg create mode 100755 docs/r/icons/line-height-black.svg create mode 100755 docs/r/icons/line-height.svg create mode 100644 docs/r/icons/minimize-black.svg create mode 100644 docs/r/icons/minimize.svg create mode 100755 docs/r/icons/popup-black.svg create mode 100755 docs/r/icons/popup.svg create mode 100755 docs/r/icons/reset-black.svg create mode 100755 docs/r/icons/reset.svg create mode 100755 docs/r/icons/settings-black.svg create mode 100755 docs/r/icons/settings.svg create mode 100755 docs/r/icons/style-black.svg create mode 100755 docs/r/icons/style.svg create mode 100644 docs/r/metrics.png create mode 100644 docs/r/noise512.png create mode 100644 docs/r/popup.svg create mode 100644 docs/r/preview-app.png create mode 100644 docs/r/reset.svg create mode 100644 docs/r/sample.png create mode 100644 docs/r/settings.svg create mode 100644 docs/r/share.png create mode 100644 docs/r/weights-and-styles.svg delete mode 100644 docs/res/base.css delete mode 100644 docs/res/base.js delete mode 100644 docs/res/bindings.js delete mode 100644 docs/res/close.svg delete mode 100644 docs/res/ctxedit.css delete mode 100644 docs/res/ctxedit.js delete mode 100644 docs/res/dismiss.svg delete mode 100644 docs/res/favicon.png delete mode 100644 docs/res/graphplot.js delete mode 100644 docs/res/grid.css delete mode 100755 docs/res/icons/close-black.svg delete mode 100755 docs/res/icons/close.svg delete mode 100755 docs/res/icons/dismiss-black.svg delete mode 100755 docs/res/icons/dismiss.svg delete mode 100755 docs/res/icons/font-size-black.svg delete mode 100755 docs/res/icons/font-size.svg delete mode 100755 docs/res/icons/letter-spacing-black.svg delete mode 100755 docs/res/icons/letter-spacing.svg delete mode 100755 docs/res/icons/line-height-black.svg delete mode 100755 docs/res/icons/line-height.svg delete mode 100644 docs/res/icons/minimize-black.svg delete mode 100644 docs/res/icons/minimize.svg delete mode 100755 docs/res/icons/popup-black.svg delete mode 100755 docs/res/icons/popup.svg delete mode 100755 docs/res/icons/reset-black.svg delete mode 100755 docs/res/icons/reset.svg delete mode 100755 docs/res/icons/settings-black.svg delete mode 100755 docs/res/icons/settings.svg delete mode 100755 docs/res/icons/style-black.svg delete mode 100755 docs/res/icons/style.svg delete mode 100644 docs/res/metrics.png delete mode 100644 docs/res/noise512.png delete mode 100644 docs/res/popup.svg delete mode 100644 docs/res/preview-app.png delete mode 100644 docs/res/reset.svg delete mode 100644 docs/res/sample.png delete mode 100644 docs/res/settings.svg delete mode 100644 docs/res/share.png delete mode 100644 docs/res/weights-and-styles.svg diff --git a/docs/_includes/charset-table.html b/docs/_includes/charset-table.html index aabc6c318..756ea7986 100644 --- a/docs/_includes/charset-table.html +++ b/docs/_includes/charset-table.html @@ -3,7 +3,7 @@ if site.safe == false %}{% assign url_root = "/" %}{% else %}{% assign url_root = "/inter/" %}{% endif %} - +
{% for g in site.data.glyphinfo.glyphs %} {% comment %} diff --git a/docs/_includes/ctxedit.html b/docs/_includes/ctxedit.html index 931a5164e..21ed7b8d2 100644 --- a/docs/_includes/ctxedit.html +++ b/docs/_includes/ctxedit.html @@ -6,15 +6,15 @@ assign url_root = "/inter/" %}{% endif %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% - if _path == "/res/ctxedit.js" %}{% + if _path == "/r/ctxedit.js" %}{% assign ctxedit_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/ctxedit.css" %}{% + elsif _path == "/r/ctxedit.css" %}{% assign ctxedit_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% endif %}{% endfor %} - +
@@ -60,4 +60,4 @@ endfor
- + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 865f3374a..c0c68727c 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -16,13 +16,13 @@ endcapture %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% - if _path == "/res/base.css" %}{% + if _path == "/r/base.css" %}{% assign base_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/grid.css" %}{% + elsif _path == "/r/grid.css" %}{% assign grid_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/base.js" %}{% + elsif _path == "/r/base.js" %}{% assign base_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/favicon.png" %}{% + elsif _path == "/r/favicon.png" %}{% assign favicon_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% endif %}{% endfor @@ -36,10 +36,10 @@ endfor - - - - + + + + {% include preload-font-files.html %} @@ -59,8 +59,8 @@ endfor {% else %} - - + + {% endif %} @@ -78,7 +78,7 @@ endfor } {% endif %}
Hello
- +
    diff --git a/docs/_scripts/optimize-resources.sh b/docs/_scripts/optimize-resources.sh index 030ab49e9..c4d083690 100755 --- a/docs/_scripts/optimize-resources.sh +++ b/docs/_scripts/optimize-resources.sh @@ -27,17 +27,17 @@ fi pushd res >/dev/null -# crunch /docs/res/*.svg +# crunch /docs/r/*.svg for f in *.svg; do svgo --multipass -q "$f" & done -# crunch /docs/res/icons/*.svg +# crunch /docs/r/icons/*.svg for f in icons/*.svg; do svgo --multipass -q "$f" & done -# crunch /docs/res/*.png +# crunch /docs/r/*.png for f in *.png; do TMPNAME=.$f.tmp (pngcrush -q "$f" "$TMPNAME" && mv -f "$TMPNAME" "$f") & diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html index e442fbff3..e179b2979 100644 --- a/docs/dynmetrics/index.html +++ b/docs/dynmetrics/index.html @@ -12,17 +12,17 @@ for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% if _path == "/dynmetrics/index.css" %}{% assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/bindings.js" %}{% + elsif _path == "/r/bindings.js" %}{% assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/graphplot.js" %}{% + elsif _path == "/r/graphplot.js" %}{% assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% endif %}{% endfor %} - - + +

    Dynamic Metrics

    diff --git a/docs/index.html b/docs/index.html index e14492cb6..9c1b3e49d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -156,7 +156,7 @@ html { font-family: 'Inter', sans-serif; } There are nine weights, each with italic counterparts, making a total of 18 styles.

    - +
    diff --git a/docs/lab/lab.css b/docs/lab/lab.css index e67068e92..dde23e205 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -79,10 +79,10 @@ --surface2-shadow-intensity-hover: 0.75; --surface2-shadow-intensity-active: 1.5; - --icon-minimize: url(../res/icons/minimize-black.svg); - --icon-popup: url(../res/icons/popup-black.svg); - --icon-reset: url(../res/icons/reset-black.svg); - --icon-settings: url(../res/icons/settings-black.svg); + --icon-minimize: url(../r/icons/minimize-black.svg); + --icon-popup: url(../r/icons/popup-black.svg); + --icon-reset: url(../r/icons/reset-black.svg); + --icon-settings: url(../r/icons/settings-black.svg); } :root.color-scheme-dark { @@ -110,10 +110,10 @@ --surface2-shadow-intensity-hover: 4; --surface2-shadow-intensity-active: 10; - --icon-minimize: url(../res/icons/minimize.svg); - --icon-popup: url(../res/icons/popup.svg); - --icon-reset: url(../res/icons/reset.svg); - --icon-settings: url(../res/icons/settings.svg); + --icon-minimize: url(../r/icons/minimize.svg); + --icon-popup: url(../r/icons/popup.svg); + --icon-reset: url(../r/icons/reset.svg); + --icon-settings: url(../r/icons/settings.svg); } /* document ———————————————————————————————————————————————————————————————————————————— */ diff --git a/docs/r/base.css b/docs/r/base.css new file mode 100644 index 000000000..39137d079 --- /dev/null +++ b/docs/r/base.css @@ -0,0 +1,854 @@ +:root { + --fontSize: 15px; + /*--emsAcrossViewport: 80; + --fontSize: calc(100vw / var(--emsAcrossViewport));*/ + + --lineHeight: calc(var(--fontSize) * 1.5); + + --spacing: 2rem; + --spacingv: calc(var(--lineHeight) / 2); + + --columnGap: 2rem; + + /* colors */ + --red: color(display-p3 0.94 0.19 0.04); + --yellow: color(display-p3 1 0.96 0.05); + --warm-yellow: color(display-p3 1 0.87 0.05); + --light-yellow: color(display-p3 1 1 0.7); + --blue: rgb(3, 102, 230); + --green: rgb(38, 220, 78); + --mediumGreen: rgb(119, 221, 134); +} + +@supports not (color: color(display-p3 1 1 1)) { + /* sRGB colors */ + :root { + --red: #F03009; + --yellow: #FFF310; + --warm-yellow: #FFE310; + --light-yellow: rgb(255, 255, 179); + } +} + +* { margin:0; padding:0; font-synthesis: none; } + +html.debug *:nth-child(4n) { outline:1px solid rgba(0,0,255,0.5); } +html.debug *:nth-child(4n+1) { outline:1px solid rgba(0,255,255,0.5); } +html.debug *:nth-child(4n+2) { outline:1px solid rgba(255,0,255,0.5); } +html.debug *:nth-child(4n+3) { outline:1px solid rgba(255,0,0,0.5); } + +html { } +body { + background-color: #f4f4f4; + color: #111; + font: 15px/22px 'Inter', system-ui, sans-serif; + + /*font-size: 15px; + line-height: 1.5;*/ + + font-size: var(--fontSize); + line-height: var(--lineHeight); + + letter-spacing: -0.004em; + + font-weight: 400; + + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; + + font-kerning: normal; + -webkit-font-kerning: normal; + -ms-font-kerning: normal; + -moz-font-kerning: normal; + -o-font-kerning: normal; + + font-variant-ligatures: contextual common-ligatures; + -webkit-font-variant-ligatures: contextual common-ligatures; + -ms-font-variant-ligatures: contextual common-ligatures; + -moz-font-variant-ligatures: contextual common-ligatures; + -o-font-variant-ligatures: contextual common-ligatures; + + /* required to work around letter-spacing bug in Chrome: */ + font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; +} + +/* Font style classifiers used by samples and dynmetrics */ +/* Note: font-variation-settings is needed for Safari. */ +.font-style-thin { font-variation-settings: "wght" 100, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; } +.font-style-thin-italic { font-variation-settings: "wght" 100, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; } +.font-style-extra-light { font-variation-settings: "wght" 200, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; } +.font-style-extra-light-italic { font-variation-settings: "wght" 200, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; } +.font-style-light { font-variation-settings: "wght" 300, "slnt" 0 !important; font-weight:300 !important; font-style:normal !important; } +.font-style-light-italic { font-variation-settings: "wght" 300, "slnt" 100 !important; font-weight:300 !important; font-style:oblique !important; } +.font-style-regular { font-variation-settings: "wght" 400, "slnt" 0 !important; font-weight:400 !important; font-style:normal !important; } +.font-style-italic { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !importants; font-style:oblique !important; } +.font-style-medium { font-variation-settings: "wght" 500, "slnt" 0 !important; font-weight:500 !important; font-style:normal !important; } +.font-style-medium-italic { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; } +.font-style-semi-bold { font-variation-settings: "wght" 600, "slnt" 0 !important; font-weight:600 !important; font-style:normal !important; } +.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; } +.font-style-bold { font-variation-settings: "wght" 700, "slnt" 0 !important; font-weight:700 !important; font-style:normal !important; } +.font-style-bold-italic { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; } +.font-style-extra-bold { font-variation-settings: "wght" 800, "slnt" 0 !important; font-weight:800 !important; font-style:normal !important; } +.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; } +.font-style-black { font-variation-settings: "wght" 900, "slnt" 0 !important; font-weight:900 !important; font-style:normal !important; } +.font-style-black-italic { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; } + +@supports (font-variation-settings: normal) { + body { + font-family: 'Inter var', system-ui, sans-serif; + } + body.chrome-win { + /* Chrome has some VF issues; worst are on Windows with incorrect kerning. + We disable VF on Chrome on Windows for that reason. + */ + font-family: Inter, system-ui, sans-serif; + } +} + +DISABLED:target:before { + content:""; + display: block; + height: 20px; /* fixed header height*/ + margin: -20px 0 0; /* negative fixed header height */ + visibility: hidden; +} + +a { + text-decoration: underline rgba(0, 0, 0, 0.3); + color: black; + word-break: break-word; + word-wrap: break-word; +} +a.fat { + font-weight:500; + color: #333; +} +a:hover { + color: var(--red); + text-decoration: underline; +} +a.plain, a.fat { + background: none; + text-shadow: none; + text-decoration: none; + cursor: pointer; +} +a[href^="#"]:hover { + text-decoration-style: dashed; +} + +/*p, pre { + margin: 1rem 0; +}*/ +code, pre, q, tt { + font-family: 'IBM Plex Mono', monospace; + font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss02' 1, 'zero' 1; + line-height: inherit; +} +code { + display: block; + border-radius:1px; + padding: 0.5em 0; + overflow: auto; +} +pre { + white-space: pre-wrap; + line-break: loose; + overflow-x: auto; +} +q { + display: inline; + white-space: pre-wrap; +} +q { + display: inline; +} +q:before { + content: ""; +} +q:after { + content: ""; +} +kbd { + -moz-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; + -ms-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; + -o-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; + -webkit-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; + font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; + border: 1px solid rgba(0,0,0,0.18); + border-radius: 3px; + padding:0.1em 0.2em; + margin:0 0.1em; +} +dem { /* de-emphasize */ + font-weight: 400; + opacity: 0.7; +} +num { /* number */ + /*-moz-font-feature-settings: 'calt' 1, 'ss01' 1; + -ms-font-feature-settings: 'calt' 1, 'ss01' 1; + -o-font-feature-settings: 'calt' 1, 'ss01' 1; + -webkit-font-feature-settings: 'kern' 1, 'calt' 1, 'ss01' 1; + font-feature-settings: 'calt' 1, 'ss01' 1;*/ + letter-spacing:0.01em; + white-space: pre; +} + +em, i, .italic { + font-style: oblique; +} + +small { + font-size: 11px; + letter-spacing: 0.012em; +} + +h1, h2, h3, h4, h5, h6 { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +/*h1, .h1 { + color: #222; + font-size: 55px; + letter-spacing: -0.038em; + line-height: 1.1em; + text-indent: -2px; + font-weight: 700; +} +h1 { + margin-bottom: 30px; + margin-top: 10px; +}*/ +h1, .h1 { + margin-left: calc(3rem / -20); + font-weight: 700; + font-size: 4rem; + letter-spacing: -0.07em; + line-height: calc(var(--spacingv) * 6); +} +h1 { + margin-bottom: calc(var(--spacingv) * 2); +} + +h2, .h2 { + font-weight: 700; + font-size: 1.8rem; + letter-spacing: -0.03em; + line-height: calc(var(--spacingv) * 3); +} +h2 { + margin-bottom: calc(var(--spacingv) * 2); +} +h3, .h3 { + font-weight: 700; + font-weight: 650; + font-size: 1.2rem; + letter-spacing: -0.018em; + line-height: calc(var(--spacingv) * 2); +} +h3 { + margin-bottom: calc(var(--spacingv) * 2); +} + +h3 q, h3. q { + font-weight: 400; + padding-left: 0.5em; +} + +h1 > a, h2 > a, h3 > a, h4 > a, +.h1 > a, .h2 > a, .h3 > a, .h4 > a { + display:block; + color: inherit; + text-decoration: none !important; + text-shadow: none; + background: none; + outline:none; +} + +h4, h5, h6, .h4, .h5, .h6 { + font-weight: 640; + letter-spacing: -0.015em; +} +h4, h5, h6 { + margin-bottom: calc(var(--spacingv) * 1); +} +/* add top margin to Hn when it follows another element */ +* + h1 { margin-top: calc(var(--spacingv) * 6); } +* + h2 { margin-top: calc(var(--spacingv) * 4); } +* + h3 { margin-top: calc(var(--spacingv) * 3); } +* + h4 { margin-top: calc(var(--spacingv) * 2); } + +p, pre, p + grid, pre + grid { + margin-bottom: var(--lineHeight); +} + + +.row.dark h2, +.row.black h2 { + letter-spacing: -0.014em; +} +h2.back { + color:rgba(0,0,0,0.2); + font-size: inherit; + letter-spacing: inherit; + font-weight:400; + margin:0; + margin-top:-1.9em; +} +h2.back a:hover { + color: black; + margin-left:-1.3em; +} +h2.back a:hover::before { + content: "<- "; +} +h2.banner { + text-align: center; + display: flex; + justify-content: center; +} + h2.banner > * { + flex: 0 1 auto; + padding: 0.8em 1.2em; + border-radius: 4em; + display: block; + background: white; + } + h2.banner > a:hover { + color: black; + background: rgba(0,0,0,0.1); + } + +.row.dark h3, +.row.black h3 { + letter-spacing: -0.012em; +} + +.row.yellow { + background: var(--yellow); + color: rgba(0, 0, 0, 0.98); +} + +.row { + padding: 50px; + display: flex; + justify-content: center; +} + .row > * { + width:100%; + max-width: 888px; + flex: 1 0 100%; + } + .row .learn-more { + margin-top: 2em; + text-align: center; + font-size: 11px; + letter-spacing: 0.007em; + } + .row .learn-more a { + color: rgba(0,0,0,0.4); + text-decoration-color: rgba(0, 0, 0, 0); + } + .row .learn-more a:hover { + color: inherit; + } + +.row.full-width { + padding: 50px 0; + justify-content: flex-start; +} + .row.full-width > * { + max-width: initial; + } + +.row-divider { + height: 1rem; + /*margin: 0 auto; + max-width: 888px; + height: 0.11rem; + background: black;*/ +} + +.row.menu { + padding: 0; + border-bottom:1px solid rgba(0,0,0,0.1); + background: #111; + color: white; + border-top: 40px solid red; + margin-top: -40px; +} + .row.menu ul { + width: auto; + max-width: 888px; + flex: 1 1 auto; + list-style: none; + padding: 0; + margin: 0 50px; + display: flex; + flex-wrap: wrap; + white-space: nowrap; + } + .row.menu ul li { + margin-bottom: -1px; + text-indent: -0.5px; + text-align: center; + } + .row.menu ul li > a { + color: inherit; + opacity: 0.8; + text-decoration:none; + display: inline-block; + padding: 15px 20px 13px 20px; + margin-right: 1px; + font-weight: 450; + /*transition: 80ms all cubic-bezier(0.25, 0.47, 0.44, 0.93);*/ + } + .row.menu ul li > a:hover, + .row.menu ul li > a.active { + color: white; + background: var(--red); + opacity: 1; + } + .row.menu ul li:first-child > a { + padding-left:0; + padding-right:0; + margin-right: 25px; + background:transparent; + } + .row.menu ul li:first-child > a:hover { + text-decoration:underline; + } + .row.menu ul li.nav-home > a { + font-weight: 600; + color: white; + opacity: 1; + } + +/* narrow windows */ +@media only screen and (max-width: 565px) { + .row { + padding-left: 24px; + padding-right: 24px; + } + .row.menu ul { + display: grid; + grid-template-columns: repeat(4,1fr); + margin: 0 20px; + } + .row.menu ul { + } + .row.menu ul li { + display: flex; + } + .row.menu ul li > a { + flex: 0 1 100%; + margin: 0; + padding-right:0; + padding-left:0; + box-shadow: inset 1px 0 0 0 rgba(255,255,255,0.1); + } + .row.menu ul li:first-child > a { + margin-right: 0; + box-shadow: none; + } + .row.menu ul li.nav-home a { + text-align: left; + } +} + +/* progressively hide menu items */ +@media only screen and (max-width: 680px) { + .row.menu .nav-lab { display: none; } +} +@media only screen and (max-width: 565px) { + .row.menu .nav-download { display: none; } +} +@media only screen and (max-width: 280px) { + .row.menu ul { grid-template-columns: repeat(3,1fr); } + .row.menu .nav-dynmetrics { display: none; } +} + + +.row.white { + background: white; +} + +.row.dark, +.row.black { + background: #2b2b2b; + color: #99999b; +} +.row.green { + background: var(--mediumGreen); + color: black; +} +.row.blue { + background: var(--blue); + color: white; +} +.row.black { + background: #010101; +} +.row.dark a, +.row.black a { + text-decoration-color: rgba(255, 255, 255, 0.2); + color: #aaa; +} +.row.dark a:hover, +.row.black a:hover { + color: rgb(95, 170, 255); + text-decoration: underline rgb(95, 170, 255); +} +.row.dark h2, .row.dark h2 > a, +.row.black h2, .row.black h2 > a { + color: #ccc; + background: none; +} +.row.green h2 > a:hover { + color: inherit; + text-decoration-style: solid !important; + text-decoration: underline !important; + text-decoration: underline rgba(0, 0, 0, 0.3) !important; +} +.row.green > * > p > a:hover { + color: inherit; +} + +.row.color1 { + background: #C0CDE2; + color: #3B414A; +} + +.noise-layer { + background-image: url(noise512.png); + background-size: 256px; + opacity: 0.03; + pointer-events: none; + position: absolute; + top:0; + left:0; + right:0; + /*bottom:0;*/ +} + + +/* --------------------------------------------------------------------- */ + +ul { margin-left:1.1em; } +a > img { display: block; } + +/* --------------------------------------------------------------------- */ +/* generic helpers */ + +.low-contrast { opacity: 0.4; } +.center-text { text-align: center; } + +/* --------------------------------------------------------------------- */ + +#repertoire-image { + display:block; + width:100%; + height:40vw; + background-image: url(r/repertoire.png); + background-repeat: no-repeat; + background-size: cover; + background-blend-mode: multiply; + background-color: #f4f4f4; +} + +.sample-images {} + .sample-images img, .sample-images svg { + display: block; + width: 100%; + } + +/* --------------------------------------------------------------------- */ +/* grid */ + +grid { + grid-column-gap: var(--columnGap); + grid-row-gap: 0; +} +grid > c.spacer { + grid-column: 1 / -1; + height: calc(var(--spacingv) * 6); +} + +@media only screen and (max-width: 565px) { + grid { grid-column-gap: 1rem; } + grid > c.spacer { height: calc(var(--spacingv) * 3); } +} + +.row.features { display:none; } +@supports (display: grid) { + .row.features { display:flex; } +} +.row.features p.example { margin-top:2rem; opacity:0.4; } + +.row.features grid { + grid-column-gap: 1rem; + grid-row-gap: 0.5rem; + margin-bottom: 0; +} + +/* --------------------------------------------------------------------- */ +/* flow */ + +flow { display:block; appearance: none; -webkit-appearance: none } +flow[columns] { + column-gap: var(--columnGap); + column-fill: balance; +} +flow[columns="2"] { + column-count: 2; +} +@media only screen and (max-width: 565px) { + flow[columns-s="1"] { + column-count: 1; + } +} + +/* column flow */ +[flow-cols], [flow-cols-s], [flow-cols-l] { + column-gap: var(--columnGap); + column-fill: balance; +} +[flow-cols="1"] { column-count: 1 } +[flow-cols="2"] { column-count: 2 } +[flow-cols="3"] { column-count: 3 } +[flow-cols="4"] { column-count: 4 } +[flow-cols="5"] { column-count: 5 } +[flow-cols="6"] { column-count: 6 } +[flow-cols="7"] { column-count: 7 } +[flow-cols="8"] { column-count: 8 } + +@media only screen and (max-width: 565px) { + [flow-cols-s="1"] { column-count: 1 } + [flow-cols-s="2"] { column-count: 2 } + [flow-cols-s="3"] { column-count: 3 } + [flow-cols-s="4"] { column-count: 4 } + [flow-cols-s="5"] { column-count: 5 } + [flow-cols-s="6"] { column-count: 6 } + [flow-cols-s="7"] { column-count: 7 } + [flow-cols-s="8"] { column-count: 8 } +} + + +/* --------------------------------------------------------------------- */ + +boxes { + display: flex; + flex-wrap: wrap; + justify-content: stretch; + margin-right:-1em; +} +box { + overflow: auto; + flex: 1 1 0; + box-sizing: border-box; + min-width: 270px; + max-width: 100%; + display: flex; + flex-direction: column; + background: white; + padding: 2em; + border-radius: 3px; + margin-right:1em; + margin-bottom:1em; +} +body.safari box { + /* Fix for broken flex wrap in safari */ + flex-basis: 40%; +} +box:first-child { + margin-left:0; +} +box h3 { + margin-bottom:0.8em; +} + +box.large tablex r { + line-height: 1.5; +} +box.large tablex r in, +box.large tablex r to, +box.large tablex r out { + font-size: 2rem; + padding-bottom: 0; +} + +#hud-notification { + position: fixed; + bottom: 20px; + left: 0; + right: 0; + display: flex; + justify-content: center; + z-index: 9; + pointer-events: none; +} + #hud-notification .msg { + background: #000; + color: white; + height: 32px; + line-height: 32px; + font-size: 14px; + letter-spacing: 0em; + padding: 0 0.7em; + border-radius: 4px; + opacity: 0.1; + transition: 250ms all ease-in; + transform: translate3d(0, 71px, 0); /* height + bottom offset + 1 */ + } + #hud-notification.visible .msg { + transform: translate3d(0, 0, 0); + transition: 120ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); + opacity: 1; + } + + +/* ------------------------------------------------------ */ + + +/* wide windows */ +@media only screen and (min-width: 566px) { + .narrow-window, .only-small-screen { display: none; } +} + +/* narrow windows */ +@media only screen and (max-width: 565px) { + .wide-window, .only-large-screen { display: none; } +} + +/* small devices (<= iPhone 6+) */ +@media only screen and (max-device-width: 414px) { + box { padding: 1em; } + box tablex r { font-size: 0.9em; } + body { + font-size: 14px; + line-height: 20px; + } + .row { + padding-left: 20px; + padding-right: 20px; + } +} + +/* small devices (<= iPhone 5) */ +@media only screen and (max-device-width: 320px) { + box { + font-size: 0.8em; + min-width: 240px; + } +} + +/* +Feature helpers. + +Note: font-variant-alternates:character-variant is not yet supported by +most browsers, which is why we use the "low leve" font-feature-settings +instead. + +*/ + +.ff-none { font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; -webkit-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; -ms-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; -moz-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; } + +.ff-liga, +.ff-calt { font-feature-settings: 'liga' 1, 'calt' 1; -webkit-font-feature-settings: 'liga' 1, 'calt' 1; -ms-font-feature-settings: 'liga' 1, 'calt' 1; -moz-font-feature-settings: 'liga' 1, 'calt' 1; } +.ff-dlig { font-feature-settings: 'kern' 1, 'dlig' 1; -webkit-font-feature-settings: 'kern' 1, 'dlig' 1; -ms-font-feature-settings: 'kern' 1, 'dlig' 1; -moz-font-feature-settings: 'kern' 1, 'dlig' 1; } +.ff-numr { font-feature-settings: 'kern' 1, 'numr' 1; -webkit-font-feature-settings: 'kern' 1, 'numr' 1; -ms-font-feature-settings: 'kern' 1, 'numr' 1; -moz-font-feature-settings: 'kern' 1, 'numr' 1; } +.ff-dnom { font-feature-settings: 'kern' 1, 'dnom' 1; -webkit-font-feature-settings: 'kern' 1, 'dnom' 1; -ms-font-feature-settings: 'kern' 1, 'dnom' 1; -moz-font-feature-settings: 'kern' 1, 'dnom' 1; } +.ff-tnum { font-feature-settings: 'kern' 1, 'tnum' 1; -webkit-font-feature-settings: 'kern' 1, 'tnum' 1; -ms-font-feature-settings: 'kern' 1, 'tnum' 1; -moz-font-feature-settings: 'kern' 1, 'tnum' 1; } +.ff-case { font-feature-settings: 'kern' 1, 'case' 1; -webkit-font-feature-settings: 'kern' 1, 'case' 1; -ms-font-feature-settings: 'kern' 1, 'case' 1; -moz-font-feature-settings: 'kern' 1, 'case' 1; } +.ff-zero { font-feature-settings: 'kern' 1, 'zero' 1; -webkit-font-feature-settings: 'kern' 1, 'zero' 1; -ms-font-feature-settings: 'kern' 1, 'zero' 1; -moz-font-feature-settings: 'kern' 1, 'zero' 1; } +.ff-frac { font-feature-settings: 'kern' 1, 'frac' 1; -webkit-font-feature-settings: 'kern' 1, 'frac' 1; -ms-font-feature-settings: 'kern' 1, 'frac' 1; -moz-font-feature-settings: 'kern' 1, 'frac' 1; } +.ff-sups { font-feature-settings: 'kern' 1, 'sups' 1; -webkit-font-feature-settings: 'kern' 1, 'sups' 1; -ms-font-feature-settings: 'kern' 1, 'sups' 1; -moz-font-feature-settings: 'kern' 1, 'sups' 1; } +.ff-subs { font-feature-settings: 'kern' 1, 'subs' 1; -webkit-font-feature-settings: 'kern' 1, 'subs' 1; -ms-font-feature-settings: 'kern' 1, 'subs' 1; -moz-font-feature-settings: 'kern' 1, 'subs' 1; } +.ff-cpsp { font-feature-settings: 'kern' 1, 'cpsp' 1; -webkit-font-feature-settings: 'kern' 1, 'cpsp' 1; -ms-font-feature-settings: 'kern' 1, 'cpsp' 1; -moz-font-feature-settings: 'kern' 1, 'cpsp' 1; } +.ff-salt { font-feature-settings: 'kern' 1, 'salt' 1; -webkit-font-feature-settings: 'kern' 1, 'salt' 1; -ms-font-feature-settings: 'kern' 1, 'salt' 1; -moz-font-feature-settings: 'kern' 1, 'salt' 1; } +.ff-salt-zero { font-feature-settings: 'kern' 1, 'salt' 1, 'zero' 1; } +.ff-cv07-salt-zero { font-feature-settings: 'kern' 1, 'cv07' 1, 'salt' 1, 'zero' 1; } + +.ff-ss01 { font-feature-settings: 'kern' 1, 'ss01' 1; -webkit-font-feature-settings: 'kern' 1, 'ss01' 1; -ms-font-feature-settings: 'kern' 1, 'ss01' 1; -moz-font-feature-settings: 'kern' 1, 'ss01' 1; } +.ff-ss02 { font-feature-settings: 'kern' 1, 'ss02' 1; -webkit-font-feature-settings: 'kern' 1, 'ss02' 1; -ms-font-feature-settings: 'kern' 1, 'ss02' 1; -moz-font-feature-settings: 'kern' 1, 'ss02' 1; } +.ff-ss03 { font-feature-settings: 'kern' 1, 'ss03' 1; -webkit-font-feature-settings: 'kern' 1, 'ss03' 1; -ms-font-feature-settings: 'kern' 1, 'ss03' 1; -moz-font-feature-settings: 'kern' 1, 'ss03' 1; } +.ff-cv01 { font-feature-settings: 'kern' 1, 'cv01' 1; -webkit-font-feature-settings: 'kern' 1, 'cv01' 1; -ms-font-feature-settings: 'kern' 1, 'cv01' 1; -moz-font-feature-settings: 'kern' 1, 'cv01' 1; } +.ff-cv02 { font-feature-settings: 'kern' 1, 'cv02' 1; -webkit-font-feature-settings: 'kern' 1, 'cv02' 1; -ms-font-feature-settings: 'kern' 1, 'cv02' 1; -moz-font-feature-settings: 'kern' 1, 'cv02' 1; } +.ff-cv03 { font-feature-settings: 'kern' 1, 'cv03' 1; -webkit-font-feature-settings: 'kern' 1, 'cv03' 1; -ms-font-feature-settings: 'kern' 1, 'cv03' 1; -moz-font-feature-settings: 'kern' 1, 'cv03' 1; } +.ff-cv04 { font-feature-settings: 'kern' 1, 'cv04' 1; -webkit-font-feature-settings: 'kern' 1, 'cv04' 1; -ms-font-feature-settings: 'kern' 1, 'cv04' 1; -moz-font-feature-settings: 'kern' 1, 'cv04' 1; } +.ff-cv05 { font-feature-settings: 'kern' 1, 'cv05' 1; -webkit-font-feature-settings: 'kern' 1, 'cv05' 1; -ms-font-feature-settings: 'kern' 1, 'cv05' 1; -moz-font-feature-settings: 'kern' 1, 'cv05' 1; } +.ff-cv06 { font-feature-settings: 'kern' 1, 'cv06' 1; -webkit-font-feature-settings: 'kern' 1, 'cv06' 1; -ms-font-feature-settings: 'kern' 1, 'cv06' 1; -moz-font-feature-settings: 'kern' 1, 'cv06' 1; } +.ff-cv07 { font-feature-settings: 'kern' 1, 'cv07' 1; -webkit-font-feature-settings: 'kern' 1, 'cv07' 1; -ms-font-feature-settings: 'kern' 1, 'cv07' 1; -moz-font-feature-settings: 'kern' 1, 'cv07' 1; } +.ff-cv08 { font-feature-settings: 'kern' 1, 'cv08' 1; -webkit-font-feature-settings: 'kern' 1, 'cv08' 1; -ms-font-feature-settings: 'kern' 1, 'cv08' 1; -moz-font-feature-settings: 'kern' 1, 'cv08' 1; } +.ff-cv09 { font-feature-settings: 'kern' 1, 'cv09' 1; -webkit-font-feature-settings: 'kern' 1, 'cv09' 1; -ms-font-feature-settings: 'kern' 1, 'cv09' 1; -moz-font-feature-settings: 'kern' 1, 'cv09' 1; } +.ff-cv10 { font-feature-settings: 'kern' 1, 'cv10' 1; -webkit-font-feature-settings: 'kern' 1, 'cv10' 1; -ms-font-feature-settings: 'kern' 1, 'cv10' 1; -moz-font-feature-settings: 'kern' 1, 'cv10' 1; } +.ff-cv11 { font-feature-settings: 'kern' 1, 'cv11' 1; -webkit-font-feature-settings: 'kern' 1, 'cv11' 1; -ms-font-feature-settings: 'kern' 1, 'cv11' 1; -moz-font-feature-settings: 'kern' 1, 'cv11' 1; } + + + +.row.charset { + padding-top: 1rem; + padding-left: 0; + padding-right: 0; + /* maintain cascading margin-bottom */ +} + +.charset-table { + --gridColor: #bbb; + --columns: 24; + --columnsL: 32; + --columnsS: 16; + --columnsXS: 8; + --tableWidth: 95vw; + + flex: 1 1 auto; + padding: 0; + margin: 1rem auto; + + max-width: var(--tableWidth); + width: var(--tableWidth); + overflow: hidden; + + display: flex; + flex-wrap: wrap; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + box-shadow: -1px -1px 0 var(--gridColor), + -1px 0 0 var(--gridColor), + 0 -1px 0 var(--gridColor); +} + .charset-table > a { + flex: 0 0 auto; + + margin: 0; + padding: 0; + + display: flex; + align-items: center; + justify-content: center; + + width: calc(var(--tableWidth) / var(--columns)); + height: calc(var(--tableWidth) / var(--columns)); + + font-size: calc(100vw / calc(var(--columns) * 2)); + line-height: 100%; + text-align: center; + font-feature-settings: "calt" 0; /* disable all */ + + box-shadow: inset -1px -1px 0 var(--gridColor); + text-decoration: none; + } +/* for window width >= 1600 */ +@media only screen and (min-width: 1599px) { + .charset-table { --columns: var(--columnsL); } +} +@media only screen and (max-width: 800px) { + .charset-table { --columns: var(--columnsS); } +} +@media only screen and (max-width: 565px) { + .charset-table { --columns: var(--columnsXS); } +} diff --git a/docs/r/base.js b/docs/r/base.js new file mode 100644 index 000000000..7d38721b0 --- /dev/null +++ b/docs/r/base.js @@ -0,0 +1,115 @@ + +function $$(query, el) { + return [].slice.call((el || document).querySelectorAll(query)) +} + +function $(query, el) { + return (el || document).querySelector(query) +} + +// fetchjson(url string) :Promise +// +var fetchjson = ( + typeof window.fetch == 'function' ? ( + function _fetchjson(url, cb) { + return window.fetch(url).then(function(r) { return r.json() }) + } + ) : + function _fetchjson(url, cb) { + return new Promise(function(resolve, reject) { + var r = new XMLHttpRequest() + r.addEventListener("load", function(){ + try { + resolve(JSON.parse(r.responseText)) + } catch (err) { + reject(err) + } + }) + r.addEventListener("error", function(ev) { + reject(ev.error || ev || new Error('network error')) + }) + r.open("GET", url) + r.send() + }) + } +) + + +// timeNow() :float +// +var timeNow = ( + window.performance !== undefined && window.performance.now ? function() { + return window.performance.now() + } : Date.now ? function() { + return Date.now() + } : function() { + return (new Date()).getTime() + } +) + + +var HUDNotification = { + el: $('#hud-notification'), + timer: null, + visible: false, + + show: function(message, duration) { + var n = this + n.el.firstChild.innerText = message + n.el.classList.add('visible') + if (n.visible) { + n.hide() + setTimeout(function(){ n.show(message, duration) }, 120) + return + } + n.visible = true + n.el.style.visibility = null + clearTimeout(n.timer) + n.timer = setTimeout(function(){ n.hide() }, duration || 1200) + }, + + hide: function() { + var n = this + if (n.visible) { + n.el.classList.remove('visible') + n.visible = false + n.el.style.visibility = 'hidden' + } + } +} + + +// InterDynamicTracking takes the font size in points or pixels and returns +// the compensating tracking in EM. +// +function InterDynamicTracking(fontSize) { + var a = -0.0223, b = 0.185, c = -0.1745; + // tracking = a + b * e ^ (c * fontSize) + return a + b * Math.pow(Math.E, c * fontSize) +} + +// InterDynamicLineHeight produces the line height for the given font size +// +function InterDynamicLineHeight(fontSize) { + var l = 1.4 + return Math.round(fontSize * l) +} + + +// Mac or not? Maybe a buggy Safari or a busted Chrome on Windows... +var isMac = false +if (!window.MSStream && + /mac|ipad|iphone|ipod/i.test(navigator.userAgent)) +{ + isMac = true + if (navigator.userAgent.indexOf('Safari') != -1 && + navigator.userAgent.indexOf('Chrome') == -1) + { + document.body.classList.add('safari') + } +} else if ( + navigator.userAgent.indexOf('Windows') != -1 && + navigator.userAgent.indexOf('Chrome') != -1 +) { + document.body.classList.add('chrome-win') +} diff --git a/docs/r/bindings.js b/docs/r/bindings.js new file mode 100644 index 000000000..3de3ec0b4 --- /dev/null +++ b/docs/r/bindings.js @@ -0,0 +1,242 @@ +// requires index.js + +function passThrough(v) { return v } + +function valueGetter(el) { + return ( + 'valueAsNumber' in el ? () => el.valueAsNumber : + (el.type == 'number' || el.type == 'range') ? () => parseFloat(el.value) : + () => el.value + ) +} + +function Binding(name){ + this.name = name + this.value = undefined + this.inputs = [] + this.outputs = [] + this.listeners = [] + this.parser = undefined + this.formatter = passThrough +} + + +Binding.prototype.addInput = function(el) { + var binding = this + var getValue = valueGetter(el) + var _onInput = ev => { + binding.setValue(getValue(), el) + } + var input = { + el: el, + _onInput: _onInput, + } + this.inputs.push(input) + if (this.value === undefined) { + this.value = getValue() + } else { + input.el.value = this.formatter(this.value) + } + if (el.tagName == 'SELECT' || el.type == 'checkbox') { + el.addEventListener('change', _onInput, {passive:true}) + } else { + el.addEventListener('input', _onInput, {passive:true}) + } +} + + +Binding.prototype.addOutput = function(el) { + this.outputs.push(el) + if (this.value !== undefined) { + el.innerText = this.formatter(this.value) + } +} + + +// listener signature: +// function(nextval string, prevval string, b Binding)void +// +Binding.prototype.addListener = function(listener) { + this.listeners.push(listener) +} + + +Binding.prototype.setValue = function(nextval, origin) { + var prevval = this.value + if (this.parser) { + nextval = this.parser(nextval, prevval) + } + if (this.value === nextval) { + return + } + var binding = this + this.value = nextval + var value = binding.formatter(nextval) + this.inputs.forEach(function(input) { + if (input.el !== origin) { + input.el.value = value + } + }) + this.outputs.forEach(function(el) { + el.innerText = value + }) + this.listeners.forEach(function(listener) { + listener(nextval, prevval, this) + }) +} + +// ------------------------------------------------------------------------ + +function Bindings() { + this.bindings = {} +} + +Bindings.prototype.getBinding = function(name) { + var binding = this.bindings[name] + if (!binding) { + binding = new Binding(name) + this.bindings[name] = binding + } + return binding +} + +Bindings.prototype.bindInput = function(name, input) { + var binding = this.getBinding(name) + binding.addInput(input) +} + +Bindings.prototype.bindOutput = function(name, el) { + var binding = this.getBinding(name) + binding.addOutput(el) +} + +Bindings.prototype.bindAllInputs = function(queryOrInputElementList) { + var bindings = this + + var elements = ( + typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) : + queryOrInputElementList + ) + + elements.forEach(function(el) { + var bindingName = el.dataset.binding + if (bindingName) { + if ( + el.tagName == 'INPUT' || + el.tagName == 'TEXTAREA' || + el.tagName == 'SELECT' + ) { + bindings.bindInput(bindingName, el) + } else { + bindings.bindOutput(bindingName, el) + } + } + }) +} + +// listener signature: +// function(nextval string, prevval string, b Binding)void +// +Bindings.prototype.addListener = function(name, listener) { + var binding = this.getBinding(name) + binding.addListener(listener) +} + +Bindings.prototype.setValue = function(name, value) { + var binding = this.getBinding(name) + binding.setValue(value) +} + +Bindings.prototype.setFormatter = function(name, formatter) { + var binding = this.getBinding(name) + binding.formatter = formatter || passThrough +} + + +Bindings.prototype.value = function(name, defaultValue) { + var binding = this.bindings[name] + return binding && binding.value !== undefined ? binding.value : defaultValue +} + + +function fmt_float(nextval, prevval) { + var n = parseFloat(nextval) + return isNaN(n) ? 0 : n +} + +function fmt_int(nextval, prevval) { + var n = parseInt(nextval) + return isNaN(n) ? 0 : n +} + + +// configure is convenience function for setting value, adding a +// listener and associating a parser with a binding. +// If a listener and a value is provided, the value is set and the listener +// is immediately invoked. +// +Bindings.prototype.configure = function(name, value, parser, listener) { + var binding = this.getBinding(name) + if (listener) { + binding.addListener(listener) + } + if (value !== undefined && value !== null) { + binding.setValue(value) + } + if (parser) { + if (typeof parser == 'string') { + switch (parser) { + case 'number': + case 'float': + parser = fmt_float; break; + + case 'int': + case 'integer': + parser = fmt_int; break; + + default: + throw new Error('unknown parser "' + parser + '"') + } + } else if (typeof parser != 'function') { + throw new Error('parser should be a string or function') + } + binding.parser = parser + } +} + + +Bindings.prototype.allBindings = ( + typeof Object.values == 'function' ? function() { + return Object.values(this.bindings) + } : function() { + let v = [] + for (let name in this.bindings) { + v.push(this.bindings[name]) + } + return v + } +) + + +Bindings.prototype.getValues = function() { + let values = {} + for (let name in this.bindings) { + values[name] = this.bindings[name].value + } + return values +} + + +Bindings.prototype.setValues = function(values) { + Object.keys(values).forEach(name => { + let b = this.bindings[name] + if (!b) { + if (console.warn) { + console.warn('Bindings.setValues: ignoring unknown "' + name + '"') + } + return + } + // console.log(`bindings setValue ${name} => ${values[name]}`) + b.setValue(values[name]) + }) +} diff --git a/docs/r/close.svg b/docs/r/close.svg new file mode 100644 index 000000000..f6b7b196e --- /dev/null +++ b/docs/r/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/ctxedit.css b/docs/r/ctxedit.css new file mode 100644 index 000000000..fb17514ae --- /dev/null +++ b/docs/r/ctxedit.css @@ -0,0 +1,337 @@ +:root { + --strip-height: 40px; +} + +#ctxedit-ui { + box-sizing: border-box; + overflow: hidden; + display: flex; + position: fixed; + left: 0; + right: 0; + bottom: 0; + padding: 0 0; + height: var(--strip-height); + + background: #111; + color: #ccc; + font-size: 12px; + /*border-top-left-radius: 4px; + border-bottom-left-radius: 4px;*/ + + padding: 0 50px; + display: flex; + justify-content: center; + + opacity:0; + transition: 90ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); + transform: translate(0, var(--strip-height)); + + outline: none; + pointer-events: none; +} +#ctxedit-ui.visible { + opacity:1; + transform: translate(0, 0); + pointer-events: initial; +} +#ctxedit-ui .wrapper { + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: center; + width: 100%; + max-width: 888px; /* same as base.css .row > * */ + flex: 1 0 100%; +} + #ctxedit-ui .control { + display: flex; + justify-content: space-between; + align-items: center; + overflow: hidden; + min-height: 30px; + margin: 0 16px; + } + #ctxedit-ui .control:first-child { + margin-left:0; + } + #ctxedit-ui .control.range { + flex: 1 1 auto; + max-width: 200px; + } + #ctxedit-ui .control > * { + flex: 1 1 auto; + margin:0; + box-sizing: border-box; + } + #ctxedit-ui .control > :last-child { + margin-right: 0; + } + #ctxedit-ui .control > select { + min-width: 8em; + flex: 0 1 auto; + align-items: center; + justify-content: center; + } + #ctxedit-ui .control > input, + #ctxedit-ui .control > select { + width: 0; + outline: none; + color: inherit; + } + #ctxedit-ui .control.popup { + margin-right: 0px; + } + #ctxedit-ui .control > select { + font: inherit; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border: none; + background-color: #111; + margin: 0; + padding: 0; + height: var(--strip-height); + background-image: url(popup.svg); + background-repeat: no-repeat; + background-position: left center; + width: 120px; + color: white; + opacity: 0.6; + padding-left: 20px; + line-height: var(--strip-height); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + #ctxedit-ui .control > select::-ms-expand { + display: none; + } + #ctxedit-ui .control > select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #fff; + background-color: #111; + font: inherit; + font-size: inherit; + } + #ctxedit-ui .control > select:hover { + opacity: 1; + } + #ctxedit-ui .control > input[type="number"], + #ctxedit-ui .control > input[type="text"] { + background: none; + border: none; + padding: 4px 0; + font-size: inherit; + /*border-radius: 2px;*/ + } + #ctxedit-ui .control > input[type="number"] { + max-width: 48px; + text-align: left; + -moz-appearance: textfield; + -moz-font-feature-settings: 'tnum' 1; + -ms-font-feature-settings: 'tnum' 1; + -o-font-feature-settings: 'tnum' 1; + -webkit-font-feature-settings: 'tnum' 1; + font-feature-settings: 'tnum' 1; + } + #ctxedit-ui .control > input[type=number]::-webkit-inner-spin-button, + #ctxedit-ui .control > input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + #ctxedit-ui .control > input[type="range"] { + /*max-width: 80%;*/ + flex: 1 1 auto; + display: block; + } + #ctxedit-ui .control > input[type="color"] { + width:20px; + height:20px; + border: none; + background: transparent; + } + #ctxedit-ui .control > img.icon, + #ctxedit-ui .control > label { + user-select: none; + font-family: georgia, serif; + font-style: italic; + color: white; + width: 16px; + height: 16px; + flex: 0 0 auto; + margin-right: 16px; + opacity: 0.6; + } + + #ctxedit-ui .button { + width: var(--strip-height); + height: var(--strip-height); + background-repeat: no-repeat; + background-position: center; + opacity: 0.6; + margin:0; + } + #ctxedit-ui .button:hover { + opacity: 1; + background-color: #292929; + } + #ctxedit-ui .button:active { + background-color: #444; + } + #ctxedit-ui .button.features-button { background-image: url(settings.svg); } + #ctxedit-ui .button.reset-button { background-image: url(reset.svg); } + #ctxedit-ui .button.dismiss-button { background-image: url(dismiss.svg); } + + + +/* narrow viewports */ +@media only screen and (max-width: 639px) { + #ctxedit-ui { + background: black; + height: calc(var(--strip-height) * 4); + } + #ctxedit-ui .wrapper { + flex-direction: column; + flex-wrap: wrap; + } +} + + +.font-preload { + position: fixed; + display: block; + opacity: 0; + pointer-events: none; +} + + +.slider-value-tip { + pointer-events: none; + opacity: 0; + position: fixed; + text-align: center; + width: 100px; + /*background: hotpink;*/ + left: 500px; + display: flex; + flex-direction: column; + align-items: center; + z-index: 9; + transition: opacity 120ms ease-out; + filter: drop-shadow(0px 2px 6px rgba(0,0,0,0.2)); + --fgcolor: #fff; + --bgcolor: #444; +} +.slider-value-tip .value { + padding: 4px 10px; + border-radius: 2px; + font-size: 11px; + letter-spacing: 0.013em; + color: var(--fgcolor); + background: var(--bgcolor); + -moz-font-feature-settings: 'tnum' 1; + -ms-font-feature-settings: 'tnum' 1; + -o-font-feature-settings: 'tnum' 1; + -webkit-font-feature-settings: 'tnum' 1; + font-feature-settings: 'tnum' 1; + z-index: 1; +} +.slider-value-tip .callout { + background: var(--bgcolor); + width:10px; + height:10px; + transform: translate(0, -6px) rotate(45deg); + z-index: 0; +} +.slider-value-tip.visible { + opacity: 1; +} + +.styled-inputs-neg { + --track-thickness: 2px; + --track-color: rgba(255, 255, 255, 0.3); + + --thumb-outline-thickness: 2px; + --thumb-outline-color: #111; /* match control strip */ + --thumb-diameter: 10px; + --thumb-color: white; + + --active-color: rgb(95, 170, 255); +} + +.styled-inputs-neg input[type=range] { + -webkit-appearance: none; + margin: 0; + width: 100%; + height: var(--strip-height); + background: transparent; +} +.styled-inputs-neg input[type=range]:focus { + outline: none; +} + +.styled-inputs-neg input[type=range]::-webkit-slider-runnable-track { + width: 100%; + margin: 0; + animate: 0.2s; + background: var(--track-color); + height: var(--track-thickness); +} +.styled-inputs-neg input[type=range]:focus::-webkit-slider-runnable-track { + background: var(--active-color); +} +.styled-inputs-neg input[type=range]::-moz-range-track { + width: 100%; + margin: 0; + animate: 0.2s; + background: var(--track-color); + height: var(--track-thickness); +} +.styled-inputs-neg input[type=range]:focus::-moz-range-track { + background: var(--active-color); +} + +.styled-inputs-neg input[type=range]::-webkit-slider-thumb { + --thumb-diameter2: calc(var(--thumb-diameter) + var(--thumb-outline-thickness) * 2); + width: var(--thumb-diameter2); + height: var(--thumb-diameter2); + border: var(--thumb-outline-thickness) solid var(--thumb-outline-color); + border-radius: 100%; + background: var(--thumb-color); + -webkit-appearance: none; + margin-top: calc(((var(--thumb-diameter2) / 2) - (var(--track-thickness) / 2)) * -1); +} +.styled-inputs-neg input[type=range]::-moz-range-thumb { + width: var(--thumb-diameter); + height: var(--thumb-diameter); + border: var(--thumb-outline-thickness) solid var(--thumb-outline-color); + border-radius: 100%; + background: var(--thumb-color); + margin-top: calc(((var(--thumb-diameter) / 2) - (var(--track-thickness) / 2)) * -1); +} + +/* MS Edge -- note that we can't use CSS variables here */ +.styled-inputs-neg input[type=range]::-ms-track { + background: transparent; + border-color: transparent; + border-width: 0 0; + color: transparent; /* markings */ + height: 2px; + animate: 0.2s; + margin: 0; +} +.styled-inputs-neg input[type=range]::-ms-fill-lower, +.styled-inputs-neg input[type=range]::-ms-fill-upper { + background: white; + opacity: 0.3; +} +.styled-inputs-neg input[type=range]::-ms-thumb { + width: 9px; + height: 9px; + /*border: 2px solid rgba(0,0,0,0.8);*/ + box-shadow: 0px 0px 0px 2px #111; + border-radius: 100%; + background: white; +} +/* Note: :focus selectors are buggy in Edge, so we skip that */ diff --git a/docs/r/ctxedit.js b/docs/r/ctxedit.js new file mode 100644 index 000000000..1ab896b08 --- /dev/null +++ b/docs/r/ctxedit.js @@ -0,0 +1,560 @@ +var CtxEdit = (function(){ + + +function getLocalObject(key) { + let s = sessionStorage.getItem(key) + if (s) { + try { + return JSON.parse(s) + } catch (e) { + console.error( + `failed to parse sessionStorage value "${s}" for key ${key}`, + err.stack || String(err) + ) + } + } + return null +} + + +function setLocalObject(key, value) { + let json = JSON.stringify(value) + sessionStorage.setItem(key, json) +} + + +function rmLocalObject(key) { + sessionStorage.removeItem(key) +} + + +class FloatProp { + constructor(cssProp, unitSuffix) { + this.cssProp = cssProp + this.unitSuffix = unitSuffix + } + + valueInStyle(s) { + let v = s[this.cssProp] + return v !== undefined ? parseFloat(v) : v + } + + applyStyle(el, value) { + el.style[this.cssProp] = value + this.unitSuffix + } +} + +class FontStyleProp { + + valueInStyle(s) { + let italic = s['font-style'] == 'italic' || s['font-style'].indexOf('oblique') != -1 + let weight = parseFloat(s['font-weight']) + if (isNaN(weight)) { + weight = s['font-weight'] + if (weight == 'thin') { return italic ? 'thin-italic' : 'thin' } + if (weight == 'extra-light') {return italic ? 'extra-light-italic' :'extra-light' } + if (weight == 'light') { return italic ? 'light-italic' : 'light' } + if (weight == 'normal') { return italic ? 'italic' : 'regular' } + if (weight == 'medium') { return italic ? 'medium-italic' : 'medium' } + if (weight == 'semi-bold') { return italic ? 'semi-bold-italic' : 'semi-bold' } + if (weight == 'bold') { return italic ? 'bold-italic' : 'bold' } + if (weight == 'extra-bold') { return italic ? 'extra-bold-italic' : 'extra-bold' } + } else { + if (weight <= 150) { return italic ? 'thin-italic' : 'thin' } + if (weight <= 250) { return italic ? 'extra-light-italic' :'extra-light' } + if (weight <= 350) { return italic ? 'light-italic' : 'light' } + if (weight <= 450) { return italic ? 'italic' : 'regular' } + if (weight <= 550) { return italic ? 'medium-italic' : 'medium' } + if (weight <= 650) { return italic ? 'semi-bold-italic' : 'semi-bold' } + if (weight <= 750) { return italic ? 'bold-italic' : 'bold' } + if (weight <= 850) { return italic ? 'extra-bold-italic' : 'extra-bold' } + } + return italic ? 'black-italic' : 'black' + } + + applyStyle(el, value) { + let cl = el.classList + for (let k of Array.from(cl.values())) { + if (k.indexOf('font-style-') == 0) { + cl.remove(k) + } + } + cl.add('font-style-' + value) + } +} + +class LineHeightProp { + valueInStyle(s) { + let v = s['line-height'] + if (v === undefined) { + return 1.0 + } + if (v.lastIndexOf('px') == v.length - 2) { + // compute + return parseFloat( + (parseFloat(v) / parseFloat(s['font-size'])).toFixed(3) + ) + } + v = parseFloat(v) + return isNaN(v) ? 1.0 : v + } + + applyStyle(el, value) { + el.style['line-height'] = String(value) + } +} + +class TrackingProp { + valueInStyle(s) { + let v = s['letter-spacing'] + if (v === undefined) { + return 0 + } + if (v.lastIndexOf('px') == v.length - 2) { + // compute + return parseFloat( + (parseFloat(v) / parseFloat(s['font-size'])).toFixed(3) + ) + } + v = parseFloat(v) + return isNaN(v) ? 0 : v + } + + applyStyle(el, value) { + el.style['letter-spacing'] = value.toFixed(3) + 'em' + } +} + +const Props = { + size: new FloatProp('font-size', 'px'), + tracking: new TrackingProp(), + lineHeight: new LineHeightProp(), + style: new FontStyleProp(), +} + +function valuesFromStyle(s) { + let values = {} + for (let name in Props) { + let p = Props[name] + values[name] = p.valueInStyle(s) + } + return values +} + + +class Editable { + constructor(el, key) { + this.el = el + this.key = key + this.defaultValues = valuesFromStyle(getComputedStyle(this.el)) + this.values = Object.assign({}, this.defaultValues) + this.defaultExplicitTracking = this.defaultValues['tracking'] != 0 + this.explicitTracking = this.defaultExplicitTracking + this.explicitTrackingKey = this.key + ":etracking" + this.loadValues() + this.updateSizeDependantProps() + } + + resetValues() { + this.values = Object.assign({}, this.defaultValues) + let style = this.el.style + for (let name in this.values) { + Props[name].applyStyle(this.el, this.values[name]) + } + rmLocalObject(this.key) + rmLocalObject(this.explicitTrackingKey) + this.explicitTracking = this.defaultExplicitTracking + this.updateSizeDependantProps() + } + + setExplicitTracking(explicitTracking) { + if (this.explicitTracking !== explicitTracking) { + this.explicitTracking = explicitTracking + if (!this.explicitTracking) { + this.updateSizeDependantProps() + } + } + } + + setValue(name, value) { + this.values[name] = value + Props[name].applyStyle(this.el, value) + if (name == 'size') { + this.updateSizeDependantProps() + } + } + + updateSizeDependantProps() { + let size = this.values.size + + // dynamic tracking + if (!this.explicitTracking) { + this.setValue('tracking', InterDynamicTracking(size)) + } + + // left indent + // TODO: Consider making this part of dynamic metrics. + let leftMargin = size / -16 + if (leftMargin == 0) { + this.el.style.marginLeft = null + } else { + this.el.style.marginLeft = leftMargin.toFixed(1) + 'px' + } + } + + loadValues() { + let values = getLocalObject(this.key) + if (values && typeof values == 'object') { + for (let name in values) { + if (name in this.values) { + let value = values[name] + this.values[name] = value + Props[name].applyStyle(this.el, value) + } else if (console.warn) { + console.warn(`Editable.loadValues ignoring unknown "${name}"`) + } + } + // console.log(`loaded values for ${this}:`, values) + } + let etr = getLocalObject(this.explicitTrackingKey) + this.explicitTracking = this.defaultExplicitTracking || etr + } + + isDefaultValues() { + for (let k in this.values) { + if (this.values[k] !== this.defaultValues[k]) { + return false + } + } + return true + } + + saveValues() { + if (this.isDefaultValues()) { + rmLocalObject(this.key) + rmLocalObject(this.explicitTrackingKey) + } else { + setLocalObject(this.key, this.values) + setLocalObject(this.explicitTrackingKey, this.explicitTracking ? "1" : "0") + } + // console.log(`saved values for ${this}`) + } + + toString() { + return `Editable(${this.key})` + } +} + + +var supportsFocusTrick = (u => + u.indexOf('Firefox/') == -1 +)(navigator.userAgent) + + +class CtxEdit { + constructor() { + this.bindings = new Bindings() + this.keyPrefix = 'ctxedit:' + document.location.pathname + ':' + this.editables = new Map() + this.ui = $('#ctxedit-ui') + this.currEditable = null + this._saveValuesTimer = null + this.isChangingBindings = true + this.bindings = new Bindings() + this.initBindings() + this.initUI() + this.addAllEditables() + this.isChangingBindings = false + this.preloadFonts() + + if (supportsFocusTrick) { + this.ui.addEventListener('focus', ev => { + if (this.currEditable) { + ev.preventDefault() + ev.stopImmediatePropagation() + this.currEditable.el.focus() // breaks Firefox + } + }, {capture:true, passive:false}) + } + } + + initUI() { + $('.reset-button', this.ui).addEventListener('click', ev => this.reset()) + $('.dismiss-button', this.ui).addEventListener('click', ev => this.stopEditing()) + this.initRangeSliders() + } + + initRangeSliders() { + this._sliderTimers = new Map() + $$('input[type="range"]', this.ui).forEach(input => { + var binding = this.bindings.getBinding(input.dataset.binding) + + // create and hook up value tip + let valtip = document.createElement('div') + let valtipval = document.createElement('div') + let valtipcallout = document.createElement('div') + valtip.className = 'slider-value-tip' + valtipval.className = 'value' + valtipcallout.className = 'callout' + valtipval.innerText = '0' + valtip.appendChild(valtipval) + valtip.appendChild(valtipcallout) + binding.addOutput(valtipval) + document.body.appendChild(valtip) + + let inputBounds = {} + let min = parseFloat(input.getAttribute('min')) + let max = parseFloat(input.getAttribute('max')) + if (isNaN(min)) { + min = 0 + } + if (isNaN(max)) { + max = 1 + } + const sliderThumbWidth = 12 + const valtipYOffset = 14 + + let updateValTipXPos = () => { + let r = (binding.value - min) / (max - min) + let sliderWidth = inputBounds.width - sliderThumbWidth + let x = ((inputBounds.x + (sliderThumbWidth / 2)) + (sliderWidth * r)) - (valtip.clientWidth / 2) + valtip.style.left = x + 'px' + } + + binding.addListener(updateValTipXPos) + + let shownCounter = 0 + let showValTip = () => { + if (++shownCounter == 1) { + valtip.classList.add('visible') + inputBounds = input.getBoundingClientRect() + valtip.style.top = (inputBounds.y - valtip.clientHeight + valtipYOffset) + 'px' + updateValTipXPos() + } + } + let hideValTip = () => { + if (--shownCounter == 0) { + valtip.classList.remove('visible') + } + } + + input.addEventListener('pointerdown', showValTip) + input.addEventListener('pointerup', hideValTip) + input.addEventListener('pointercancel', hideValTip) + + let timer = null + input.addEventListener('input', ev => { + if (timer === null) { + showValTip() + } else { + clearTimeout(timer) + } + timer = setTimeout(() => { + timer = null + hideValTip() + }, 400) + }) + }) + } + + initBindings() { + let b = this.bindings + + // let updateTracking = fontSize => { + // if (!this.currEditable.explicitTracking) { + // var tracking = InterDynamicTracking(fontSize) + // this.isChangingBindings = true + // b.setValue('tracking', tracking) + // this.isChangingBindings = false + // } + // } + + b.configure('tracking', 0, 'float', tracking => { + if (!this.isChangingBindings && !this.currEditable.explicitTracking) { + // console.log('enabled explicit tracking') + this.currEditable.setExplicitTracking(true) + this.setNeedsSaveValues() + } + }) + b.setFormatter('tracking', v => v.toFixed(3)) + + b.configure('size', 0, 'float', size => { + let ed = this.currEditable + if (ed) { + setTimeout(() => { + // HERE BE DRAGONS! Feedback loop from Editable + if (!ed.explicitTracking) { + this.isChangingBindings = true + b.setValue('tracking', ed.values.tracking) + this.isChangingBindings = false + } + }, 10) + } + }) + + b.configure('lineHeight', 1, 'float') + + b.bindAllInputs($$('.control input', this.ui)) + b.bindAllInputs($$('.control select', this.ui)) + + $('.control input[data-binding="tracking"]').addEventListener("dblclick", ev => { + let ed = this.currEditable + setTimeout(() => { + ed.setExplicitTracking(false) + this.setNeedsSaveValues() + this.isChangingBindings = true + b.setValue('tracking', ed.values.tracking) + this.isChangingBindings = false + }, 50) + }) + + for (let binding of b.allBindings()) { + binding.addListener(() => this.bindingChanged(binding)) + } + } + + preloadFonts() { + // Note: This has no effect on systems supporting variable fonts. + [ + "regular", + "italic", + "medium", + "medium-italic", + "semi-bold", + "semi-bold-italic", + "bold", + "bold-italic", + "extra-bold", + "extra-bold-italic", + "black", + "black-italic", + ].forEach(style => { + let e = document.createElement('div') + e.className = 'font-preload font-style-' + style + e.innerText = 'a' + document.body.appendChild(e) + }) + } + + bindingChanged(binding) { + if (this.isChangingBindings) { + // Note: this.isChangingBindings is true when binding values are + // changed internally, in which case we do nothing here. + return + } + if (this.currEditable) { + this.currEditable.setValue(binding.name, binding.value) + } + this.setNeedsSaveValues() + } + + reset() { + for (let ed of this.editables.values()) { + ed.resetValues() + } + this.updateBindingValues() + } + + updateBindingValues() { + if (this.currEditable) { + this.isChangingBindings = true + this.bindings.setValues(this.currEditable.values) + this.isChangingBindings = false + } + } + + saveValues() { + if (this._saveValuesTimer !== null) { + clearTimeout(this._saveValuesTimer) + this._saveValuesTimer = null + } + if (this.currEditable) { + this.currEditable.saveValues() + } + } + + setNeedsSaveValues() { + if (this._saveValuesTimer !== null) { + clearTimeout(this._saveValuesTimer) + } + this._saveValuesTimer = setTimeout(() => this.saveValues(), 300) + } + + setCurrEditable(ed) { + if (this._saveValuesTimer !== null && + this.currEditable && + !this.isChangingBindings) + { + this.saveValues() + } + this.currEditable = ed + this.updateBindingValues() + if (this.currEditable) { + this.showUI() + } else { + this.hideUI() + } + } + + onEditableReceivedFocus(ed) { + // console.log(`onEditableReceivedFocus ${ed}`) + clearTimeout(this._deselectTimer) + this.setCurrEditable(ed) + } + + onEditableLostFocus(ed) { + // console.log(`onEditableLostFocus ${ed}`) + // this.setCurrEditable(null) + if (supportsFocusTrick) { + this._deselectTimer = setTimeout(() => this.setCurrEditable(null), 10) + } + } + + showUI() { + this.ui.classList.add('visible') + } + + hideUI() { + this.ui.classList.remove('visible') + } + + stopEditing() { + if (this.currEditable) { + this.currEditable.el.blur() + this.setCurrEditable(null) + } + } + + addAllEditables() { + for (let el of $$('[data-ctxedit]')) { + this.addEditable(el) + } + } + + addEditable(el) { + let key = this.keyPrefix + el.dataset.ctxedit + let existing = this.editables.get(key) + if (existing) { + throw new Error(`duplicate editable ${key}`) + } + let ed = new Editable(el, key) + this.editables.set(key, ed) + this.initEditable(ed) + // this.showUI() // XXX + } + + initEditable(ed) { + // filter paste + ed.el.addEventListener('paste', ev => { + ev.preventDefault() + let text = ev.clipboardData.getData("text/plain") + document.execCommand("insertHTML", false, text) + }, {capture:true,passive:false}) + + ed.el.addEventListener('focus', ev => this.onEditableReceivedFocus(ed)) + ed.el.addEventListener('blur', ev => this.onEditableLostFocus(ed)) + } +} + +return CtxEdit +})(); diff --git a/docs/r/dismiss.svg b/docs/r/dismiss.svg new file mode 100644 index 000000000..0749e2196 --- /dev/null +++ b/docs/r/dismiss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/favicon.png b/docs/r/favicon.png new file mode 100644 index 000000000..414217338 --- /dev/null +++ b/docs/r/favicon.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8941a9dfdb8de43d438d164d1cec675b399846c44426e6570df99d86ba5d74a7 +size 914 diff --git a/docs/r/graphplot.js b/docs/r/graphplot.js new file mode 100644 index 000000000..b06f67f16 --- /dev/null +++ b/docs/r/graphplot.js @@ -0,0 +1,239 @@ + +function GraphPlot(canvas) { + this.canvas = canvas + const g = canvas.getContext('2d') + if (g == null) { + throw new Error('failed to acquire 2d context') + } + + this.width = 0 // dp + this.height = 0 // dp + this.widthPx = 0 // px + this.heightPx = 0 // px + this.pixelRatio = 1 + this.g = g + this.dataSegments = [] + this.axes = { + x0: .5, // % from left to x=0 + y0: .5, // % from top to y=0 + scalex: 40, // pixels from x=0 to x=1 + scaley: 40, // pixels from y=0 to y=1 + negativeX: true, + } + + if (!this.autosize()) { + this.setSize(256, 256) + } +} + +GraphPlot.prototype.autosize = function() { + try { + this.canvas.width = null + this.canvas.height = null + this.canvas.style.width = null + this.canvas.style.height = null + var cs = window.getComputedStyle(this.canvas) + var width = parseFloat(cs.width) + var height = parseFloat(cs.height) + this.setSize(width, height) + return true + } catch (err) { + if (typeof console != 'undefined' && console.warn) { + console.warn('GraphPlot.autosize failed: ' + err) + } + } + return false +} + +// setOrigin sets the origin of axis x and y +// The values should be in the range [0-1] and maps to the extremes +// of the canvas. +// +GraphPlot.prototype.setOrigin = function(x, y) { + var p = this + p.axes.x0 = x + p.axes.y0 = y +} + +// setScale sets the value scale for x and y axis. +// The values should be provided as display points. +// +GraphPlot.prototype.setScale = function(x, y) { + var p = this + if (y === undefined) { + y = x + } + p.axes.scalex = x + p.axes.scaley = y +} + +// setSize sets the size of canvas in display points +// +GraphPlot.prototype.setSize = function(width, height) { + var p = this + p.width = width + p.height = height + const el = p.canvas, g = p.g + p.pixelRatio = window.devicePixelRatio || 1 + if (p.pixelRatio != 1) { + el.width = p.widthPx = width * p.pixelRatio + el.height = p.heightPx = height * p.pixelRatio + g.scale(p.pixelRatio, p.pixelRatio) + } else { + el.width = p.widthPx = width + el.height = p.heightPx = height + g.scale(1, 1) + } + el.style.width = `${width}px` + el.style.height = `${height}px` +} + + +GraphPlot.prototype.renderAxes = function() { + var p = this + , g = p.g + , x0 = Math.round(p.axes.x0 * p.widthPx) / p.pixelRatio + , y0 = Math.round(p.axes.y0 * p.heightPx) / p.pixelRatio + + g.beginPath() + g.strokeStyle = "rgb(0, 0, 0, 0.2)" + if (y0 > 0 && y0 < p.width) { + g.moveTo(0, y0); g.lineTo(p.width, y0) // X axis + } + if (x0 > 0 && x0 < p.height) { + g.moveTo(x0, 0); g.lineTo(x0, p.height) // Y axis + } + g.stroke() +} + + +// plotf plots an arbitrary function on the graph +// +GraphPlot.prototype.plotf = function(f, color) { + var p = this + , g = p.g + , w = p.width + , h = p.height + , x0 = p.axes.x0 * p.width + , y0 = p.axes.y0 * p.height + , x = 0 + , y = 0 + , dx = 4 / p.pixelRatio // smaller means finer curves and more CPU + , scalex = p.axes.scalex * w + , scaley = p.axes.scaley * h + , iMax = Math.round((w - x0) / dx) + , iMin = p.axes.negativeX ? Math.round(-x0 / dx) : 0 + + g.beginPath() + g.lineWidth = 1 + g.strokeStyle = color || "rgb(0, 0, 0, 0.8)" + + for (var i = iMin; i <= iMax; i++) { + x = dx * i + y = f(x / scalex) * scaley + if (i == iMin) { + g.moveTo(x0 + x, y0 - y) + } else { + g.lineTo(x0 + x, y0 - y) + } + } + + g.stroke() +} + + +// plotLines draws straight lines between a collection of points +// +GraphPlot.prototype.plotLine = function(points, color) { + var p = this + , g = p.g + , x0 = p.axes.x0 * p.width + , y0 = p.axes.y0 * p.height + , x = 0 + , y = 0 + , scalex = p.axes.scalex * p.width + , scaley = p.axes.scaley * p.height + , pt + + g.beginPath() + g.lineWidth = 1 + g.strokeStyle = color || "rgb(0, 0, 0, 0.8)" + + var i = 0 + for (; i < points.length; i++) { + pt = points[i] + x = pt[0] * scalex + y = pt[1] * scaley + if (i == 0) { + g.moveTo(x0 + x, y0 - y) + } else { + g.lineTo(x0 + x, y0 - y) + } + } + + g.stroke() +} + + +// plotPoints draws points +// +GraphPlot.prototype.plotPoints = function(points, color) { + var p = this + , g = p.g + , x0 = p.axes.x0 * p.width + , y0 = p.axes.y0 * p.height + , x = 0 + , y = 0 + , scalex = p.axes.scalex * p.width + , scaley = p.axes.scaley * p.height + , pt + , i = 0 + + g.fillStyle = color || "rgb(0, 0, 0, 0.8)" + + for (; i < points.length; i++) { + pt = points[i] + x = x0 + pt[0] * scalex + y = y0 - pt[1] * scaley + g.beginPath() + g.arc(x, y, 3, 0, Math.PI + (Math.PI * 2) / 2, false) + g.fill() + } +} + + +GraphPlot.prototype.clear = function() { + var p = this + p.g.clearRect(0, 0, p.width, p.height) + p.renderAxes() +} + + +GraphPlot.prototype.renderDemo = function() { + var p = this + , g = p.g + , dpscale = p.pixelRatio + , w = p.widthPx + , h = p.heightPx + + p.clear() + + p.plotf( + function(x) { return Math.sin(x) }, + 'blue' + ) + + p.plotf( + function(x) { return Math.cos(3*x) }, + 'hotpink' + ) + + // var scale = p.height / 4 + // g.moveTo(0, scale) + // var i, sine, lines = 200, frag = p.width / lines + // for (i = 0; i < lines; i++) { + // sine = Math.sin(i / scale * 2) * scale + // g.lineTo(i * frag, -sine + scale) + // } + // g.stroke() +} diff --git a/docs/r/grid.css b/docs/r/grid.css new file mode 100644 index 000000000..3d5a70bdc --- /dev/null +++ b/docs/r/grid.css @@ -0,0 +1,341 @@ +/* Raster Simple CSS Grid System, version 3 */ +grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + --grid-cs: 1; /* start */ + --grid-ce: -1 /* end */ +} + +/* c -- cell or column */ +grid > c { display: block; appearance: none; -webkit-appearance: none } + +grid[columns="1"] { grid-template-columns: repeat(1, 1fr) } +grid[columns="2"] { grid-template-columns: repeat(2, 1fr) } +grid[columns="3"] { grid-template-columns: repeat(3, 1fr) } +grid[columns="4"] { grid-template-columns: repeat(4, 1fr) } +grid[columns="5"] { grid-template-columns: repeat(5, 1fr) } +grid[columns="6"] { grid-template-columns: repeat(6, 1fr) } +grid[columns="7"] { grid-template-columns: repeat(7, 1fr) } +grid[columns="8"] { grid-template-columns: repeat(8, 1fr) } +grid[columns="9"] { grid-template-columns: repeat(9, 1fr) } +grid[columns="10"] { grid-template-columns: repeat(10, 1fr) } +grid[columns="11"] { grid-template-columns: repeat(11, 1fr) } +grid[columns="12"] { grid-template-columns: repeat(12, 1fr) } +grid[columns="13"] { grid-template-columns: repeat(13, 1fr) } +grid[columns="14"] { grid-template-columns: repeat(14, 1fr) } +grid[columns="15"] { grid-template-columns: repeat(15, 1fr) } +grid[columns="16"] { grid-template-columns: repeat(16, 1fr) } +grid[columns="17"] { grid-template-columns: repeat(17, 1fr) } +grid[columns="18"] { grid-template-columns: repeat(18, 1fr) } +grid[columns="19"] { grid-template-columns: repeat(19, 1fr) } +grid[columns="20"] { grid-template-columns: repeat(20, 1fr) } +grid[columns="21"] { grid-template-columns: repeat(21, 1fr) } +grid[columns="22"] { grid-template-columns: repeat(22, 1fr) } +grid[columns="23"] { grid-template-columns: repeat(23, 1fr) } +grid[columns="24"] { grid-template-columns: repeat(24, 1fr) } +grid[columns="25"] { grid-template-columns: repeat(25, 1fr) } +grid[columns="26"] { grid-template-columns: repeat(26, 1fr) } +grid[columns="27"] { grid-template-columns: repeat(27, 1fr) } +grid[columns="28"] { grid-template-columns: repeat(28, 1fr) } +grid[columns="29"] { grid-template-columns: repeat(29, 1fr) } +grid[columns="30"] { grid-template-columns: repeat(30, 1fr) } + +/* span=start... */ +grid > c[span^="1"] { --grid-cs: 1 } +grid > c[span^="2"] { --grid-cs: 2 } +grid > c[span^="3"] { --grid-cs: 3 } +grid > c[span^="4"] { --grid-cs: 4 } +grid > c[span^="5"] { --grid-cs: 5 } +grid > c[span^="6"] { --grid-cs: 6 } +grid > c[span^="7"] { --grid-cs: 7 } +grid > c[span^="8"] { --grid-cs: 8 } +grid > c[span^="9"] { --grid-cs: 9 } +grid > c[span^="10"] { --grid-cs: 10 } +grid > c[span^="11"] { --grid-cs: 11 } +grid > c[span^="12"] { --grid-cs: 12 } +grid > c[span^="13"] { --grid-cs: 13 } +grid > c[span^="14"] { --grid-cs: 14 } +grid > c[span^="15"] { --grid-cs: 15 } +grid > c[span^="16"] { --grid-cs: 16 } +grid > c[span^="17"] { --grid-cs: 17 } +grid > c[span^="18"] { --grid-cs: 18 } +grid > c[span^="19"] { --grid-cs: 19 } +grid > c[span^="20"] { --grid-cs: 20 } +grid > c[span^="21"] { --grid-cs: 21 } +grid > c[span^="22"] { --grid-cs: 22 } +grid > c[span^="23"] { --grid-cs: 23 } +grid > c[span^="24"] { --grid-cs: 24 } +grid > c[span^="25"] { --grid-cs: 25 } +grid > c[span^="26"] { --grid-cs: 26 } +grid > c[span^="27"] { --grid-cs: 27 } +grid > c[span^="28"] { --grid-cs: 28 } +grid > c[span^="29"] { --grid-cs: 29 } +grid > c[span^="30"] { --grid-cs: 30 } + +/* span=...+width, span=...-end */ +grid > c[span$="+1"], grid > c[span="1"] { --grid-ce: 1 } +grid > c[span$="+2"], grid > c[span$="-1"], grid > c[span="2"] { --grid-ce: 2 } +grid > c[span$="+3"], grid > c[span$="-2"], grid > c[span="3"] { --grid-ce: 3 } +grid > c[span$="+4"], grid > c[span$="-3"], grid > c[span="4"] { --grid-ce: 4 } +grid > c[span$="+5"], grid > c[span$="-4"], grid > c[span="5"] { --grid-ce: 5 } +grid > c[span$="+6"], grid > c[span$="-5"], grid > c[span="6"] { --grid-ce: 6 } +grid > c[span$="+7"], grid > c[span$="-6"], grid > c[span="7"] { --grid-ce: 7 } +grid > c[span$="+8"], grid > c[span$="-7"], grid > c[span="8"] { --grid-ce: 8 } +grid > c[span$="+9"], grid > c[span$="-8"], grid > c[span="9"] { --grid-ce: 9 } +grid > c[span$="+10"], grid > c[span$="-9"], grid > c[span="10"] { --grid-ce: 10 } +grid > c[span$="+11"], grid > c[span$="-10"], grid > c[span="11"] { --grid-ce: 11 } +grid > c[span$="+12"], grid > c[span$="-11"], grid > c[span="12"] { --grid-ce: 12 } +grid > c[span$="+13"], grid > c[span$="-12"], grid > c[span="13"] { --grid-ce: 13 } +grid > c[span$="+14"], grid > c[span$="-13"], grid > c[span="14"] { --grid-ce: 14 } +grid > c[span$="+15"], grid > c[span$="-14"], grid > c[span="15"] { --grid-ce: 15 } +grid > c[span$="+16"], grid > c[span$="-15"], grid > c[span="16"] { --grid-ce: 16 } +grid > c[span$="+17"], grid > c[span$="-16"], grid > c[span="17"] { --grid-ce: 17 } +grid > c[span$="+18"], grid > c[span$="-17"], grid > c[span="18"] { --grid-ce: 18 } +grid > c[span$="+19"], grid > c[span$="-18"], grid > c[span="19"] { --grid-ce: 19 } +grid > c[span$="+20"], grid > c[span$="-19"], grid > c[span="20"] { --grid-ce: 20 } +grid > c[span$="+21"], grid > c[span$="-20"], grid > c[span="21"] { --grid-ce: 21 } +grid > c[span$="+22"], grid > c[span$="-21"], grid > c[span="22"] { --grid-ce: 22 } +grid > c[span$="+23"], grid > c[span$="-22"], grid > c[span="23"] { --grid-ce: 23 } +grid > c[span$="+24"], grid > c[span$="-23"], grid > c[span="24"] { --grid-ce: 24 } +grid > c[span$="+25"], grid > c[span$="-24"], grid > c[span="25"] { --grid-ce: 25 } +grid > c[span$="+26"], grid > c[span$="-25"], grid > c[span="26"] { --grid-ce: 26 } +grid > c[span$="+27"], grid > c[span$="-26"], grid > c[span="27"] { --grid-ce: 27 } +grid > c[span$="+28"], grid > c[span$="-27"], grid > c[span="28"] { --grid-ce: 28 } +grid > c[span$="+29"], grid > c[span$="-28"], grid > c[span="29"] { --grid-ce: 29 } +grid > c[span$="+30"], grid > c[span$="-29"], grid > c[span="30"] { --grid-ce: 30 } +grid > c[span$="-30"] { --grid-ce: 31 } + +/* connect vars */ +grid > c[span] { grid-column-end: span var(--grid-ce) } +grid > c[span*="+"], grid > c[span*="-"], grid > c[span*=".."] { + grid-column-start: var(--grid-cs) } +grid > c[span*="-"], grid > c[span*=".."] { + grid-column-end: var(--grid-ce) } +grid > c[span="row"] { grid-column: 1 / -1 } + +/* for window width <= 600 */ +@media only screen and (max-width: 600px) { + grid[columns-s="1"] { grid-template-columns: repeat(1, 1fr) } + grid[columns-s="2"] { grid-template-columns: repeat(2, 1fr) } + grid[columns-s="3"] { grid-template-columns: repeat(3, 1fr) } + grid[columns-s="4"] { grid-template-columns: repeat(4, 1fr) } + grid[columns-s="5"] { grid-template-columns: repeat(5, 1fr) } + grid[columns-s="6"] { grid-template-columns: repeat(6, 1fr) } + grid[columns-s="7"] { grid-template-columns: repeat(7, 1fr) } + grid[columns-s="8"] { grid-template-columns: repeat(8, 1fr) } + grid[columns-s="9"] { grid-template-columns: repeat(9, 1fr) } + grid[columns-s="10"] { grid-template-columns: repeat(10, 1fr) } + grid[columns-s="11"] { grid-template-columns: repeat(11, 1fr) } + grid[columns-s="12"] { grid-template-columns: repeat(12, 1fr) } + grid[columns-s="13"] { grid-template-columns: repeat(13, 1fr) } + grid[columns-s="14"] { grid-template-columns: repeat(14, 1fr) } + grid[columns-s="15"] { grid-template-columns: repeat(15, 1fr) } + grid[columns-s="16"] { grid-template-columns: repeat(16, 1fr) } + grid[columns-s="17"] { grid-template-columns: repeat(17, 1fr) } + grid[columns-s="18"] { grid-template-columns: repeat(18, 1fr) } + grid[columns-s="19"] { grid-template-columns: repeat(19, 1fr) } + grid[columns-s="20"] { grid-template-columns: repeat(20, 1fr) } + grid[columns-s="21"] { grid-template-columns: repeat(21, 1fr) } + grid[columns-s="22"] { grid-template-columns: repeat(22, 1fr) } + grid[columns-s="23"] { grid-template-columns: repeat(23, 1fr) } + grid[columns-s="24"] { grid-template-columns: repeat(24, 1fr) } + grid[columns-s="25"] { grid-template-columns: repeat(25, 1fr) } + grid[columns-s="26"] { grid-template-columns: repeat(26, 1fr) } + grid[columns-s="27"] { grid-template-columns: repeat(27, 1fr) } + grid[columns-s="28"] { grid-template-columns: repeat(28, 1fr) } + grid[columns-s="29"] { grid-template-columns: repeat(29, 1fr) } + grid[columns-s="30"] { grid-template-columns: repeat(30, 1fr) } + + /* span-s=start... */ + grid > c[span-s^="1"] { --grid-cs: 1 } + grid > c[span-s^="2"] { --grid-cs: 2 } + grid > c[span-s^="3"] { --grid-cs: 3 } + grid > c[span-s^="4"] { --grid-cs: 4 } + grid > c[span-s^="5"] { --grid-cs: 5 } + grid > c[span-s^="6"] { --grid-cs: 6 } + grid > c[span-s^="7"] { --grid-cs: 7 } + grid > c[span-s^="8"] { --grid-cs: 8 } + grid > c[span-s^="9"] { --grid-cs: 9 } + grid > c[span-s^="10"] { --grid-cs: 10 } + grid > c[span-s^="11"] { --grid-cs: 11 } + grid > c[span-s^="12"] { --grid-cs: 12 } + grid > c[span-s^="13"] { --grid-cs: 13 } + grid > c[span-s^="14"] { --grid-cs: 14 } + grid > c[span-s^="15"] { --grid-cs: 15 } + grid > c[span-s^="16"] { --grid-cs: 16 } + grid > c[span-s^="17"] { --grid-cs: 17 } + grid > c[span-s^="18"] { --grid-cs: 18 } + grid > c[span-s^="19"] { --grid-cs: 19 } + grid > c[span-s^="20"] { --grid-cs: 20 } + grid > c[span-s^="21"] { --grid-cs: 21 } + grid > c[span-s^="22"] { --grid-cs: 22 } + grid > c[span-s^="23"] { --grid-cs: 23 } + grid > c[span-s^="24"] { --grid-cs: 24 } + grid > c[span-s^="25"] { --grid-cs: 25 } + grid > c[span-s^="26"] { --grid-cs: 26 } + grid > c[span-s^="27"] { --grid-cs: 27 } + grid > c[span-s^="28"] { --grid-cs: 28 } + grid > c[span-s^="29"] { --grid-cs: 29 } + grid > c[span-s^="30"] { --grid-cs: 30 } + + /* span-s=...+width, span-s=...-end */ + grid > c[span-s$="+1"], grid > c[span-s="1"] { --grid-ce: 1 } + grid > c[span-s$="+2"], grid > c[span-s$="-1"], grid > c[span-s="2"] { --grid-ce: 2 } + grid > c[span-s$="+3"], grid > c[span-s$="-2"], grid > c[span-s="3"] { --grid-ce: 3 } + grid > c[span-s$="+4"], grid > c[span-s$="-3"], grid > c[span-s="4"] { --grid-ce: 4 } + grid > c[span-s$="+5"], grid > c[span-s$="-4"], grid > c[span-s="5"] { --grid-ce: 5 } + grid > c[span-s$="+6"], grid > c[span-s$="-5"], grid > c[span-s="6"] { --grid-ce: 6 } + grid > c[span-s$="+7"], grid > c[span-s$="-6"], grid > c[span-s="7"] { --grid-ce: 7 } + grid > c[span-s$="+8"], grid > c[span-s$="-7"], grid > c[span-s="8"] { --grid-ce: 8 } + grid > c[span-s$="+9"], grid > c[span-s$="-8"], grid > c[span-s="9"] { --grid-ce: 9 } + grid > c[span-s$="+10"], grid > c[span-s$="-9"], grid > c[span-s="10"] { --grid-ce: 10 } + grid > c[span-s$="+11"], grid > c[span-s$="-10"], grid > c[span-s="11"] { --grid-ce: 11 } + grid > c[span-s$="+12"], grid > c[span-s$="-11"], grid > c[span-s="12"] { --grid-ce: 12 } + grid > c[span-s$="+13"], grid > c[span-s$="-12"], grid > c[span-s="13"] { --grid-ce: 13 } + grid > c[span-s$="+14"], grid > c[span-s$="-13"], grid > c[span-s="14"] { --grid-ce: 14 } + grid > c[span-s$="+15"], grid > c[span-s$="-14"], grid > c[span-s="15"] { --grid-ce: 15 } + grid > c[span-s$="+16"], grid > c[span-s$="-15"], grid > c[span-s="16"] { --grid-ce: 16 } + grid > c[span-s$="+17"], grid > c[span-s$="-16"], grid > c[span-s="17"] { --grid-ce: 17 } + grid > c[span-s$="+18"], grid > c[span-s$="-17"], grid > c[span-s="18"] { --grid-ce: 18 } + grid > c[span-s$="+19"], grid > c[span-s$="-18"], grid > c[span-s="19"] { --grid-ce: 19 } + grid > c[span-s$="+20"], grid > c[span-s$="-19"], grid > c[span-s="20"] { --grid-ce: 20 } + grid > c[span-s$="+21"], grid > c[span-s$="-20"], grid > c[span-s="21"] { --grid-ce: 21 } + grid > c[span-s$="+22"], grid > c[span-s$="-21"], grid > c[span-s="22"] { --grid-ce: 22 } + grid > c[span-s$="+23"], grid > c[span-s$="-22"], grid > c[span-s="23"] { --grid-ce: 23 } + grid > c[span-s$="+24"], grid > c[span-s$="-23"], grid > c[span-s="24"] { --grid-ce: 24 } + grid > c[span-s$="+25"], grid > c[span-s$="-24"], grid > c[span-s="25"] { --grid-ce: 25 } + grid > c[span-s$="+26"], grid > c[span-s$="-25"], grid > c[span-s="26"] { --grid-ce: 26 } + grid > c[span-s$="+27"], grid > c[span-s$="-26"], grid > c[span-s="27"] { --grid-ce: 27 } + grid > c[span-s$="+28"], grid > c[span-s$="-27"], grid > c[span-s="28"] { --grid-ce: 28 } + grid > c[span-s$="+29"], grid > c[span-s$="-28"], grid > c[span-s="29"] { --grid-ce: 29 } + grid > c[span-s$="+30"], grid > c[span-s$="-29"], grid > c[span-s="30"] { --grid-ce: 30 } + grid > c[span-s$="-30"] { --grid-ce: 31 } + + /* connect vars */ + grid > c[span-s] { grid-column-end: span var(--grid-ce) } + grid > c[span-s*="+"], grid > c[span-s*="-"], grid > c[span-s*=".."] { + grid-column-start: var(--grid-cs) } + grid > c[span-s*="-"], grid > c[span-s*=".."] { + grid-column-end: var(--grid-ce) } + grid > c[span-s="row"] { grid-column: 1 / -1 } +} + +/* for window width >= 1600 */ +@media only screen and (min-width: 1599px) { + grid[columns-l="1"] { grid-template-columns: repeat(1, 1fr) } + grid[columns-l="2"] { grid-template-columns: repeat(2, 1fr) } + grid[columns-l="3"] { grid-template-columns: repeat(3, 1fr) } + grid[columns-l="4"] { grid-template-columns: repeat(4, 1fr) } + grid[columns-l="5"] { grid-template-columns: repeat(5, 1fr) } + grid[columns-l="6"] { grid-template-columns: repeat(6, 1fr) } + grid[columns-l="7"] { grid-template-columns: repeat(7, 1fr) } + grid[columns-l="8"] { grid-template-columns: repeat(8, 1fr) } + grid[columns-l="9"] { grid-template-columns: repeat(9, 1fr) } + grid[columns-l="10"] { grid-template-columns: repeat(10, 1fr) } + grid[columns-l="11"] { grid-template-columns: repeat(11, 1fr) } + grid[columns-l="12"] { grid-template-columns: repeat(12, 1fr) } + grid[columns-l="13"] { grid-template-columns: repeat(13, 1fr) } + grid[columns-l="14"] { grid-template-columns: repeat(14, 1fr) } + grid[columns-l="15"] { grid-template-columns: repeat(15, 1fr) } + grid[columns-l="16"] { grid-template-columns: repeat(16, 1fr) } + grid[columns-l="17"] { grid-template-columns: repeat(17, 1fr) } + grid[columns-l="18"] { grid-template-columns: repeat(18, 1fr) } + grid[columns-l="19"] { grid-template-columns: repeat(19, 1fr) } + grid[columns-l="20"] { grid-template-columns: repeat(20, 1fr) } + grid[columns-l="21"] { grid-template-columns: repeat(21, 1fr) } + grid[columns-l="22"] { grid-template-columns: repeat(22, 1fr) } + grid[columns-l="23"] { grid-template-columns: repeat(23, 1fr) } + grid[columns-l="24"] { grid-template-columns: repeat(24, 1fr) } + grid[columns-l="25"] { grid-template-columns: repeat(25, 1fr) } + grid[columns-l="26"] { grid-template-columns: repeat(26, 1fr) } + grid[columns-l="27"] { grid-template-columns: repeat(27, 1fr) } + grid[columns-l="28"] { grid-template-columns: repeat(28, 1fr) } + grid[columns-l="29"] { grid-template-columns: repeat(29, 1fr) } + grid[columns-l="30"] { grid-template-columns: repeat(30, 1fr) } + + /* span-l=start... */ + grid > c[span-l^="1"] { --grid-cs: 1 } + grid > c[span-l^="2"] { --grid-cs: 2 } + grid > c[span-l^="3"] { --grid-cs: 3 } + grid > c[span-l^="4"] { --grid-cs: 4 } + grid > c[span-l^="5"] { --grid-cs: 5 } + grid > c[span-l^="6"] { --grid-cs: 6 } + grid > c[span-l^="7"] { --grid-cs: 7 } + grid > c[span-l^="8"] { --grid-cs: 8 } + grid > c[span-l^="9"] { --grid-cs: 9 } + grid > c[span-l^="10"] { --grid-cs: 10 } + grid > c[span-l^="11"] { --grid-cs: 11 } + grid > c[span-l^="12"] { --grid-cs: 12 } + grid > c[span-l^="13"] { --grid-cs: 13 } + grid > c[span-l^="14"] { --grid-cs: 14 } + grid > c[span-l^="15"] { --grid-cs: 15 } + grid > c[span-l^="16"] { --grid-cs: 16 } + grid > c[span-l^="17"] { --grid-cs: 17 } + grid > c[span-l^="18"] { --grid-cs: 18 } + grid > c[span-l^="19"] { --grid-cs: 19 } + grid > c[span-l^="20"] { --grid-cs: 20 } + grid > c[span-l^="21"] { --grid-cs: 21 } + grid > c[span-l^="22"] { --grid-cs: 22 } + grid > c[span-l^="23"] { --grid-cs: 23 } + grid > c[span-l^="24"] { --grid-cs: 24 } + grid > c[span-l^="25"] { --grid-cs: 25 } + grid > c[span-l^="26"] { --grid-cs: 26 } + grid > c[span-l^="27"] { --grid-cs: 27 } + grid > c[span-l^="28"] { --grid-cs: 28 } + grid > c[span-l^="29"] { --grid-cs: 29 } + grid > c[span-l^="30"] { --grid-cs: 30 } + + /* span-l=...+width, span-l=...-end */ + grid > c[span-l$="+1"], grid > c[span-l="1"] { --grid-ce: 1 } + grid > c[span-l$="+2"], grid > c[span-l$="-1"], grid > c[span-l="2"] { --grid-ce: 2 } + grid > c[span-l$="+3"], grid > c[span-l$="-2"], grid > c[span-l="3"] { --grid-ce: 3 } + grid > c[span-l$="+4"], grid > c[span-l$="-3"], grid > c[span-l="4"] { --grid-ce: 4 } + grid > c[span-l$="+5"], grid > c[span-l$="-4"], grid > c[span-l="5"] { --grid-ce: 5 } + grid > c[span-l$="+6"], grid > c[span-l$="-5"], grid > c[span-l="6"] { --grid-ce: 6 } + grid > c[span-l$="+7"], grid > c[span-l$="-6"], grid > c[span-l="7"] { --grid-ce: 7 } + grid > c[span-l$="+8"], grid > c[span-l$="-7"], grid > c[span-l="8"] { --grid-ce: 8 } + grid > c[span-l$="+9"], grid > c[span-l$="-8"], grid > c[span-l="9"] { --grid-ce: 9 } + grid > c[span-l$="+10"], grid > c[span-l$="-9"], grid > c[span-l="10"] { --grid-ce: 10 } + grid > c[span-l$="+11"], grid > c[span-l$="-10"], grid > c[span-l="11"] { --grid-ce: 11 } + grid > c[span-l$="+12"], grid > c[span-l$="-11"], grid > c[span-l="12"] { --grid-ce: 12 } + grid > c[span-l$="+13"], grid > c[span-l$="-12"], grid > c[span-l="13"] { --grid-ce: 13 } + grid > c[span-l$="+14"], grid > c[span-l$="-13"], grid > c[span-l="14"] { --grid-ce: 14 } + grid > c[span-l$="+15"], grid > c[span-l$="-14"], grid > c[span-l="15"] { --grid-ce: 15 } + grid > c[span-l$="+16"], grid > c[span-l$="-15"], grid > c[span-l="16"] { --grid-ce: 16 } + grid > c[span-l$="+17"], grid > c[span-l$="-16"], grid > c[span-l="17"] { --grid-ce: 17 } + grid > c[span-l$="+18"], grid > c[span-l$="-17"], grid > c[span-l="18"] { --grid-ce: 18 } + grid > c[span-l$="+19"], grid > c[span-l$="-18"], grid > c[span-l="19"] { --grid-ce: 19 } + grid > c[span-l$="+20"], grid > c[span-l$="-19"], grid > c[span-l="20"] { --grid-ce: 20 } + grid > c[span-l$="+21"], grid > c[span-l$="-20"], grid > c[span-l="21"] { --grid-ce: 21 } + grid > c[span-l$="+22"], grid > c[span-l$="-21"], grid > c[span-l="22"] { --grid-ce: 22 } + grid > c[span-l$="+23"], grid > c[span-l$="-22"], grid > c[span-l="23"] { --grid-ce: 23 } + grid > c[span-l$="+24"], grid > c[span-l$="-23"], grid > c[span-l="24"] { --grid-ce: 24 } + grid > c[span-l$="+25"], grid > c[span-l$="-24"], grid > c[span-l="25"] { --grid-ce: 25 } + grid > c[span-l$="+26"], grid > c[span-l$="-25"], grid > c[span-l="26"] { --grid-ce: 26 } + grid > c[span-l$="+27"], grid > c[span-l$="-26"], grid > c[span-l="27"] { --grid-ce: 27 } + grid > c[span-l$="+28"], grid > c[span-l$="-27"], grid > c[span-l="28"] { --grid-ce: 28 } + grid > c[span-l$="+29"], grid > c[span-l$="-28"], grid > c[span-l="29"] { --grid-ce: 29 } + grid > c[span-l$="+30"], grid > c[span-l$="-29"], grid > c[span-l="30"] { --grid-ce: 30 } + grid > c[span-l$="-30"] { --grid-ce: 31 } + + /* connect vars */ + grid > c[span-l] { grid-column-end: span var(--grid-ce) } + grid > c[span-l*="+"], grid > c[span-l*="-"], grid > c[span-l*=".."] { + grid-column-start: var(--grid-cs) } + grid > c[span-l*="-"], grid > c[span-l*=".."] { + grid-column-end: var(--grid-ce) } + grid > c[span-l="row"] { grid-column: 1 / -1 } +} + +/* .debug can be added to a grid to visualize its effective cells */ +grid.debug > * { +--color: rgba(248,110,91 ,0.3); +background-image: + linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); +} +grid.debug > :nth-child(6n+2) { --color: rgba(103,126,208,0.3) } +grid.debug > :nth-child(6n+3) { --color: rgba(224,174,72 ,0.3) } +grid.debug > :nth-child(6n+4) { --color: rgba(77, 214,115,0.3) } +grid.debug > :nth-child(6n+5) { --color: rgba(217,103,219,0.3) } +grid.debug > :nth-child(6n+6) { --color: rgba(94, 204,211,0.3) } +grid.debug > :nth-child(6n+7) { --color: rgba(248,110,91 ,0.3) } diff --git a/docs/r/icons/close-black.svg b/docs/r/icons/close-black.svg new file mode 100755 index 000000000..a67a2e22b --- /dev/null +++ b/docs/r/icons/close-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/close.svg b/docs/r/icons/close.svg new file mode 100755 index 000000000..f6b7b196e --- /dev/null +++ b/docs/r/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/dismiss-black.svg b/docs/r/icons/dismiss-black.svg new file mode 100755 index 000000000..d359e4123 --- /dev/null +++ b/docs/r/icons/dismiss-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/dismiss.svg b/docs/r/icons/dismiss.svg new file mode 100755 index 000000000..427522b60 --- /dev/null +++ b/docs/r/icons/dismiss.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/font-size-black.svg b/docs/r/icons/font-size-black.svg new file mode 100755 index 000000000..fb0b9df50 --- /dev/null +++ b/docs/r/icons/font-size-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/font-size.svg b/docs/r/icons/font-size.svg new file mode 100755 index 000000000..0dd5cfd61 --- /dev/null +++ b/docs/r/icons/font-size.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/letter-spacing-black.svg b/docs/r/icons/letter-spacing-black.svg new file mode 100755 index 000000000..267c0ac62 --- /dev/null +++ b/docs/r/icons/letter-spacing-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/letter-spacing.svg b/docs/r/icons/letter-spacing.svg new file mode 100755 index 000000000..993435895 --- /dev/null +++ b/docs/r/icons/letter-spacing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/line-height-black.svg b/docs/r/icons/line-height-black.svg new file mode 100755 index 000000000..04c1e66a9 --- /dev/null +++ b/docs/r/icons/line-height-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/line-height.svg b/docs/r/icons/line-height.svg new file mode 100755 index 000000000..627f62faa --- /dev/null +++ b/docs/r/icons/line-height.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/minimize-black.svg b/docs/r/icons/minimize-black.svg new file mode 100644 index 000000000..4fef3328f --- /dev/null +++ b/docs/r/icons/minimize-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/r/icons/minimize.svg b/docs/r/icons/minimize.svg new file mode 100644 index 000000000..861eec592 --- /dev/null +++ b/docs/r/icons/minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/r/icons/popup-black.svg b/docs/r/icons/popup-black.svg new file mode 100755 index 000000000..4046411f2 --- /dev/null +++ b/docs/r/icons/popup-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/popup.svg b/docs/r/icons/popup.svg new file mode 100755 index 000000000..eba6b62fe --- /dev/null +++ b/docs/r/icons/popup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/reset-black.svg b/docs/r/icons/reset-black.svg new file mode 100755 index 000000000..6f20feaef --- /dev/null +++ b/docs/r/icons/reset-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/reset.svg b/docs/r/icons/reset.svg new file mode 100755 index 000000000..33b7ca175 --- /dev/null +++ b/docs/r/icons/reset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/settings-black.svg b/docs/r/icons/settings-black.svg new file mode 100755 index 000000000..81365ff40 --- /dev/null +++ b/docs/r/icons/settings-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/settings.svg b/docs/r/icons/settings.svg new file mode 100755 index 000000000..31ed727a1 --- /dev/null +++ b/docs/r/icons/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/style-black.svg b/docs/r/icons/style-black.svg new file mode 100755 index 000000000..0dd668a3d --- /dev/null +++ b/docs/r/icons/style-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/icons/style.svg b/docs/r/icons/style.svg new file mode 100755 index 000000000..ab0589a56 --- /dev/null +++ b/docs/r/icons/style.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/metrics.png b/docs/r/metrics.png new file mode 100644 index 000000000..1a3d2c638 --- /dev/null +++ b/docs/r/metrics.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bf98ba617d84d5ac73f8711974e75667e0d973f39cf3cc9f762fe23c3b2c4d10 +size 272310 diff --git a/docs/r/noise512.png b/docs/r/noise512.png new file mode 100644 index 000000000..cba935879 --- /dev/null +++ b/docs/r/noise512.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9f808e4bfe2281c9e1c6455e71410f4c2c0de7d47fdaac81d2d0d90cdcd8b2bb +size 36283 diff --git a/docs/r/popup.svg b/docs/r/popup.svg new file mode 100644 index 000000000..a20c03fa8 --- /dev/null +++ b/docs/r/popup.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/preview-app.png b/docs/r/preview-app.png new file mode 100644 index 000000000..d70b71a7a --- /dev/null +++ b/docs/r/preview-app.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:146a2d6eb5e14abd38e67637956fd04e45064739b23d824828a9e61ae4d593eb +size 236331 diff --git a/docs/r/reset.svg b/docs/r/reset.svg new file mode 100644 index 000000000..33b7ca175 --- /dev/null +++ b/docs/r/reset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/sample.png b/docs/r/sample.png new file mode 100644 index 000000000..390deba1f --- /dev/null +++ b/docs/r/sample.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0771694b2073ba15269971ba90a1a293129d4ca816790c04fddc6d59fac92551 +size 425764 diff --git a/docs/r/settings.svg b/docs/r/settings.svg new file mode 100644 index 000000000..31ed727a1 --- /dev/null +++ b/docs/r/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/r/share.png b/docs/r/share.png new file mode 100644 index 000000000..f0dafe1f8 --- /dev/null +++ b/docs/r/share.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a5775db8b3b74f7d602423246c9b3fe8a104fa1cd3e9f3909b33bff9fe6e50a0 +size 45806 diff --git a/docs/r/weights-and-styles.svg b/docs/r/weights-and-styles.svg new file mode 100644 index 000000000..240d4f9a4 --- /dev/null +++ b/docs/r/weights-and-styles.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/res/base.css b/docs/res/base.css deleted file mode 100644 index 1cedcdffb..000000000 --- a/docs/res/base.css +++ /dev/null @@ -1,854 +0,0 @@ -:root { - --fontSize: 15px; - /*--emsAcrossViewport: 80; - --fontSize: calc(100vw / var(--emsAcrossViewport));*/ - - --lineHeight: calc(var(--fontSize) * 1.5); - - --spacing: 2rem; - --spacingv: calc(var(--lineHeight) / 2); - - --columnGap: 2rem; - - /* colors */ - --red: color(display-p3 0.94 0.19 0.04); - --yellow: color(display-p3 1 0.96 0.05); - --warm-yellow: color(display-p3 1 0.87 0.05); - --light-yellow: color(display-p3 1 1 0.7); - --blue: rgb(3, 102, 230); - --green: rgb(38, 220, 78); - --mediumGreen: rgb(119, 221, 134); -} - -@supports not (color: color(display-p3 1 1 1)) { - /* sRGB colors */ - :root { - --red: #F03009; - --yellow: #FFF310; - --warm-yellow: #FFE310; - --light-yellow: rgb(255, 255, 179); - } -} - -* { margin:0; padding:0; font-synthesis: none; } - -html.debug *:nth-child(4n) { outline:1px solid rgba(0,0,255,0.5); } -html.debug *:nth-child(4n+1) { outline:1px solid rgba(0,255,255,0.5); } -html.debug *:nth-child(4n+2) { outline:1px solid rgba(255,0,255,0.5); } -html.debug *:nth-child(4n+3) { outline:1px solid rgba(255,0,0,0.5); } - -html { } -body { - background-color: #f4f4f4; - color: #111; - font: 15px/22px 'Inter', system-ui, sans-serif; - - /*font-size: 15px; - line-height: 1.5;*/ - - font-size: var(--fontSize); - line-height: var(--lineHeight); - - letter-spacing: -0.004em; - - font-weight: 400; - - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - - -webkit-overflow-scrolling: touch; - scroll-behavior: smooth; - - font-kerning: normal; - -webkit-font-kerning: normal; - -ms-font-kerning: normal; - -moz-font-kerning: normal; - -o-font-kerning: normal; - - font-variant-ligatures: contextual common-ligatures; - -webkit-font-variant-ligatures: contextual common-ligatures; - -ms-font-variant-ligatures: contextual common-ligatures; - -moz-font-variant-ligatures: contextual common-ligatures; - -o-font-variant-ligatures: contextual common-ligatures; - - /* required to work around letter-spacing bug in Chrome: */ - font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; -} - -/* Font style classifiers used by samples and dynmetrics */ -/* Note: font-variation-settings is needed for Safari. */ -.font-style-thin { font-variation-settings: "wght" 100, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; } -.font-style-thin-italic { font-variation-settings: "wght" 100, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; } -.font-style-extra-light { font-variation-settings: "wght" 200, "slnt" 0 !important; font-weight:100 !important; font-style:normal !important; } -.font-style-extra-light-italic { font-variation-settings: "wght" 200, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; } -.font-style-light { font-variation-settings: "wght" 300, "slnt" 0 !important; font-weight:300 !important; font-style:normal !important; } -.font-style-light-italic { font-variation-settings: "wght" 300, "slnt" 100 !important; font-weight:300 !important; font-style:oblique !important; } -.font-style-regular { font-variation-settings: "wght" 400, "slnt" 0 !important; font-weight:400 !important; font-style:normal !important; } -.font-style-italic { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !importants; font-style:oblique !important; } -.font-style-medium { font-variation-settings: "wght" 500, "slnt" 0 !important; font-weight:500 !important; font-style:normal !important; } -.font-style-medium-italic { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; } -.font-style-semi-bold { font-variation-settings: "wght" 600, "slnt" 0 !important; font-weight:600 !important; font-style:normal !important; } -.font-style-semi-bold-italic { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; } -.font-style-bold { font-variation-settings: "wght" 700, "slnt" 0 !important; font-weight:700 !important; font-style:normal !important; } -.font-style-bold-italic { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; } -.font-style-extra-bold { font-variation-settings: "wght" 800, "slnt" 0 !important; font-weight:800 !important; font-style:normal !important; } -.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; } -.font-style-black { font-variation-settings: "wght" 900, "slnt" 0 !important; font-weight:900 !important; font-style:normal !important; } -.font-style-black-italic { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; } - -@supports (font-variation-settings: normal) { - body { - font-family: 'Inter var', system-ui, sans-serif; - } - body.chrome-win { - /* Chrome has some VF issues; worst are on Windows with incorrect kerning. - We disable VF on Chrome on Windows for that reason. - */ - font-family: Inter, system-ui, sans-serif; - } -} - -DISABLED:target:before { - content:""; - display: block; - height: 20px; /* fixed header height*/ - margin: -20px 0 0; /* negative fixed header height */ - visibility: hidden; -} - -a { - text-decoration: underline rgba(0, 0, 0, 0.3); - color: black; - word-break: break-word; - word-wrap: break-word; -} -a.fat { - font-weight:500; - color: #333; -} -a:hover { - color: var(--red); - text-decoration: underline; -} -a.plain, a.fat { - background: none; - text-shadow: none; - text-decoration: none; - cursor: pointer; -} -a[href^="#"]:hover { - text-decoration-style: dashed; -} - -/*p, pre { - margin: 1rem 0; -}*/ -code, pre, q, tt { - font-family: 'IBM Plex Mono', monospace; - font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss02' 1, 'zero' 1; - line-height: inherit; -} -code { - display: block; - border-radius:1px; - padding: 0.5em 0; - overflow: auto; -} -pre { - white-space: pre-wrap; - line-break: loose; - overflow-x: auto; -} -q { - display: inline; - white-space: pre-wrap; -} -q { - display: inline; -} -q:before { - content: ""; -} -q:after { - content: ""; -} -kbd { - -moz-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; - -ms-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; - -o-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; - -webkit-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; - font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1; - border: 1px solid rgba(0,0,0,0.18); - border-radius: 3px; - padding:0.1em 0.2em; - margin:0 0.1em; -} -dem { /* de-emphasize */ - font-weight: 400; - opacity: 0.7; -} -num { /* number */ - /*-moz-font-feature-settings: 'calt' 1, 'ss01' 1; - -ms-font-feature-settings: 'calt' 1, 'ss01' 1; - -o-font-feature-settings: 'calt' 1, 'ss01' 1; - -webkit-font-feature-settings: 'kern' 1, 'calt' 1, 'ss01' 1; - font-feature-settings: 'calt' 1, 'ss01' 1;*/ - letter-spacing:0.01em; - white-space: pre; -} - -em, i, .italic { - font-style: oblique; -} - -small { - font-size: 11px; - letter-spacing: 0.012em; -} - -h1, h2, h3, h4, h5, h6 { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -/*h1, .h1 { - color: #222; - font-size: 55px; - letter-spacing: -0.038em; - line-height: 1.1em; - text-indent: -2px; - font-weight: 700; -} -h1 { - margin-bottom: 30px; - margin-top: 10px; -}*/ -h1, .h1 { - margin-left: calc(3rem / -20); - font-weight: 700; - font-size: 4rem; - letter-spacing: -0.07em; - line-height: calc(var(--spacingv) * 6); -} -h1 { - margin-bottom: calc(var(--spacingv) * 2); -} - -h2, .h2 { - font-weight: 700; - font-size: 1.8rem; - letter-spacing: -0.03em; - line-height: calc(var(--spacingv) * 3); -} -h2 { - margin-bottom: calc(var(--spacingv) * 2); -} -h3, .h3 { - font-weight: 700; - font-weight: 650; - font-size: 1.2rem; - letter-spacing: -0.018em; - line-height: calc(var(--spacingv) * 2); -} -h3 { - margin-bottom: calc(var(--spacingv) * 2); -} - -h3 q, h3. q { - font-weight: 400; - padding-left: 0.5em; -} - -h1 > a, h2 > a, h3 > a, h4 > a, -.h1 > a, .h2 > a, .h3 > a, .h4 > a { - display:block; - color: inherit; - text-decoration: none !important; - text-shadow: none; - background: none; - outline:none; -} - -h4, h5, h6, .h4, .h5, .h6 { - font-weight: 640; - letter-spacing: -0.015em; -} -h4, h5, h6 { - margin-bottom: calc(var(--spacingv) * 1); -} -/* add top margin to Hn when it follows another element */ -* + h1 { margin-top: calc(var(--spacingv) * 6); } -* + h2 { margin-top: calc(var(--spacingv) * 4); } -* + h3 { margin-top: calc(var(--spacingv) * 3); } -* + h4 { margin-top: calc(var(--spacingv) * 2); } - -p, pre, p + grid, pre + grid { - margin-bottom: var(--lineHeight); -} - - -.row.dark h2, -.row.black h2 { - letter-spacing: -0.014em; -} -h2.back { - color:rgba(0,0,0,0.2); - font-size: inherit; - letter-spacing: inherit; - font-weight:400; - margin:0; - margin-top:-1.9em; -} -h2.back a:hover { - color: black; - margin-left:-1.3em; -} -h2.back a:hover::before { - content: "<- "; -} -h2.banner { - text-align: center; - display: flex; - justify-content: center; -} - h2.banner > * { - flex: 0 1 auto; - padding: 0.8em 1.2em; - border-radius: 4em; - display: block; - background: white; - } - h2.banner > a:hover { - color: black; - background: rgba(0,0,0,0.1); - } - -.row.dark h3, -.row.black h3 { - letter-spacing: -0.012em; -} - -.row.yellow { - background: var(--yellow); - color: rgba(0, 0, 0, 0.98); -} - -.row { - padding: 50px; - display: flex; - justify-content: center; -} - .row > * { - width:100%; - max-width: 888px; - flex: 1 0 100%; - } - .row .learn-more { - margin-top: 2em; - text-align: center; - font-size: 11px; - letter-spacing: 0.007em; - } - .row .learn-more a { - color: rgba(0,0,0,0.4); - text-decoration-color: rgba(0, 0, 0, 0); - } - .row .learn-more a:hover { - color: inherit; - } - -.row.full-width { - padding: 50px 0; - justify-content: flex-start; -} - .row.full-width > * { - max-width: initial; - } - -.row-divider { - height: 1rem; - /*margin: 0 auto; - max-width: 888px; - height: 0.11rem; - background: black;*/ -} - -.row.menu { - padding: 0; - border-bottom:1px solid rgba(0,0,0,0.1); - background: #111; - color: white; - border-top: 40px solid red; - margin-top: -40px; -} - .row.menu ul { - width: auto; - max-width: 888px; - flex: 1 1 auto; - list-style: none; - padding: 0; - margin: 0 50px; - display: flex; - flex-wrap: wrap; - white-space: nowrap; - } - .row.menu ul li { - margin-bottom: -1px; - text-indent: -0.5px; - text-align: center; - } - .row.menu ul li > a { - color: inherit; - opacity: 0.8; - text-decoration:none; - display: inline-block; - padding: 15px 20px 13px 20px; - margin-right: 1px; - font-weight: 450; - /*transition: 80ms all cubic-bezier(0.25, 0.47, 0.44, 0.93);*/ - } - .row.menu ul li > a:hover, - .row.menu ul li > a.active { - color: white; - background: var(--red); - opacity: 1; - } - .row.menu ul li:first-child > a { - padding-left:0; - padding-right:0; - margin-right: 25px; - background:transparent; - } - .row.menu ul li:first-child > a:hover { - text-decoration:underline; - } - .row.menu ul li.nav-home > a { - font-weight: 600; - color: white; - opacity: 1; - } - -/* narrow windows */ -@media only screen and (max-width: 565px) { - .row { - padding-left: 24px; - padding-right: 24px; - } - .row.menu ul { - display: grid; - grid-template-columns: repeat(4,1fr); - margin: 0 20px; - } - .row.menu ul { - } - .row.menu ul li { - display: flex; - } - .row.menu ul li > a { - flex: 0 1 100%; - margin: 0; - padding-right:0; - padding-left:0; - box-shadow: inset 1px 0 0 0 rgba(255,255,255,0.1); - } - .row.menu ul li:first-child > a { - margin-right: 0; - box-shadow: none; - } - .row.menu ul li.nav-home a { - text-align: left; - } -} - -/* progressively hide menu items */ -@media only screen and (max-width: 680px) { - .row.menu .nav-lab { display: none; } -} -@media only screen and (max-width: 565px) { - .row.menu .nav-download { display: none; } -} -@media only screen and (max-width: 280px) { - .row.menu ul { grid-template-columns: repeat(3,1fr); } - .row.menu .nav-dynmetrics { display: none; } -} - - -.row.white { - background: white; -} - -.row.dark, -.row.black { - background: #2b2b2b; - color: #99999b; -} -.row.green { - background: var(--mediumGreen); - color: black; -} -.row.blue { - background: var(--blue); - color: white; -} -.row.black { - background: #010101; -} -.row.dark a, -.row.black a { - text-decoration-color: rgba(255, 255, 255, 0.2); - color: #aaa; -} -.row.dark a:hover, -.row.black a:hover { - color: rgb(95, 170, 255); - text-decoration: underline rgb(95, 170, 255); -} -.row.dark h2, .row.dark h2 > a, -.row.black h2, .row.black h2 > a { - color: #ccc; - background: none; -} -.row.green h2 > a:hover { - color: inherit; - text-decoration-style: solid !important; - text-decoration: underline !important; - text-decoration: underline rgba(0, 0, 0, 0.3) !important; -} -.row.green > * > p > a:hover { - color: inherit; -} - -.row.color1 { - background: #C0CDE2; - color: #3B414A; -} - -.noise-layer { - background-image: url(noise512.png); - background-size: 256px; - opacity: 0.03; - pointer-events: none; - position: absolute; - top:0; - left:0; - right:0; - /*bottom:0;*/ -} - - -/* --------------------------------------------------------------------- */ - -ul { margin-left:1.1em; } -a > img { display: block; } - -/* --------------------------------------------------------------------- */ -/* generic helpers */ - -.low-contrast { opacity: 0.4; } -.center-text { text-align: center; } - -/* --------------------------------------------------------------------- */ - -#repertoire-image { - display:block; - width:100%; - height:40vw; - background-image: url(res/repertoire.png); - background-repeat: no-repeat; - background-size: cover; - background-blend-mode: multiply; - background-color: #f4f4f4; -} - -.sample-images {} - .sample-images img, .sample-images svg { - display: block; - width: 100%; - } - -/* --------------------------------------------------------------------- */ -/* grid */ - -grid { - grid-column-gap: var(--columnGap); - grid-row-gap: 0; -} -grid > c.spacer { - grid-column: 1 / -1; - height: calc(var(--spacingv) * 6); -} - -@media only screen and (max-width: 565px) { - grid { grid-column-gap: 1rem; } - grid > c.spacer { height: calc(var(--spacingv) * 3); } -} - -.row.features { display:none; } -@supports (display: grid) { - .row.features { display:flex; } -} -.row.features p.example { margin-top:2rem; opacity:0.4; } - -.row.features grid { - grid-column-gap: 1rem; - grid-row-gap: 0.5rem; - margin-bottom: 0; -} - -/* --------------------------------------------------------------------- */ -/* flow */ - -flow { display:block; appearance: none; -webkit-appearance: none } -flow[columns] { - column-gap: var(--columnGap); - column-fill: balance; -} -flow[columns="2"] { - column-count: 2; -} -@media only screen and (max-width: 565px) { - flow[columns-s="1"] { - column-count: 1; - } -} - -/* column flow */ -[flow-cols], [flow-cols-s], [flow-cols-l] { - column-gap: var(--columnGap); - column-fill: balance; -} -[flow-cols="1"] { column-count: 1 } -[flow-cols="2"] { column-count: 2 } -[flow-cols="3"] { column-count: 3 } -[flow-cols="4"] { column-count: 4 } -[flow-cols="5"] { column-count: 5 } -[flow-cols="6"] { column-count: 6 } -[flow-cols="7"] { column-count: 7 } -[flow-cols="8"] { column-count: 8 } - -@media only screen and (max-width: 565px) { - [flow-cols-s="1"] { column-count: 1 } - [flow-cols-s="2"] { column-count: 2 } - [flow-cols-s="3"] { column-count: 3 } - [flow-cols-s="4"] { column-count: 4 } - [flow-cols-s="5"] { column-count: 5 } - [flow-cols-s="6"] { column-count: 6 } - [flow-cols-s="7"] { column-count: 7 } - [flow-cols-s="8"] { column-count: 8 } -} - - -/* --------------------------------------------------------------------- */ - -boxes { - display: flex; - flex-wrap: wrap; - justify-content: stretch; - margin-right:-1em; -} -box { - overflow: auto; - flex: 1 1 0; - box-sizing: border-box; - min-width: 270px; - max-width: 100%; - display: flex; - flex-direction: column; - background: white; - padding: 2em; - border-radius: 3px; - margin-right:1em; - margin-bottom:1em; -} -body.safari box { - /* Fix for broken flex wrap in safari */ - flex-basis: 40%; -} -box:first-child { - margin-left:0; -} -box h3 { - margin-bottom:0.8em; -} - -box.large tablex r { - line-height: 1.5; -} -box.large tablex r in, -box.large tablex r to, -box.large tablex r out { - font-size: 2rem; - padding-bottom: 0; -} - -#hud-notification { - position: fixed; - bottom: 20px; - left: 0; - right: 0; - display: flex; - justify-content: center; - z-index: 9; - pointer-events: none; -} - #hud-notification .msg { - background: #000; - color: white; - height: 32px; - line-height: 32px; - font-size: 14px; - letter-spacing: 0em; - padding: 0 0.7em; - border-radius: 4px; - opacity: 0.1; - transition: 250ms all ease-in; - transform: translate3d(0, 71px, 0); /* height + bottom offset + 1 */ - } - #hud-notification.visible .msg { - transform: translate3d(0, 0, 0); - transition: 120ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); - opacity: 1; - } - - -/* ------------------------------------------------------ */ - - -/* wide windows */ -@media only screen and (min-width: 566px) { - .narrow-window, .only-small-screen { display: none; } -} - -/* narrow windows */ -@media only screen and (max-width: 565px) { - .wide-window, .only-large-screen { display: none; } -} - -/* small devices (<= iPhone 6+) */ -@media only screen and (max-device-width: 414px) { - box { padding: 1em; } - box tablex r { font-size: 0.9em; } - body { - font-size: 14px; - line-height: 20px; - } - .row { - padding-left: 20px; - padding-right: 20px; - } -} - -/* small devices (<= iPhone 5) */ -@media only screen and (max-device-width: 320px) { - box { - font-size: 0.8em; - min-width: 240px; - } -} - -/* -Feature helpers. - -Note: font-variant-alternates:character-variant is not yet supported by -most browsers, which is why we use the "low leve" font-feature-settings -instead. - -*/ - -.ff-none { font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; -webkit-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; -ms-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; -moz-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0; } - -.ff-liga, -.ff-calt { font-feature-settings: 'liga' 1, 'calt' 1; -webkit-font-feature-settings: 'liga' 1, 'calt' 1; -ms-font-feature-settings: 'liga' 1, 'calt' 1; -moz-font-feature-settings: 'liga' 1, 'calt' 1; } -.ff-dlig { font-feature-settings: 'kern' 1, 'dlig' 1; -webkit-font-feature-settings: 'kern' 1, 'dlig' 1; -ms-font-feature-settings: 'kern' 1, 'dlig' 1; -moz-font-feature-settings: 'kern' 1, 'dlig' 1; } -.ff-numr { font-feature-settings: 'kern' 1, 'numr' 1; -webkit-font-feature-settings: 'kern' 1, 'numr' 1; -ms-font-feature-settings: 'kern' 1, 'numr' 1; -moz-font-feature-settings: 'kern' 1, 'numr' 1; } -.ff-dnom { font-feature-settings: 'kern' 1, 'dnom' 1; -webkit-font-feature-settings: 'kern' 1, 'dnom' 1; -ms-font-feature-settings: 'kern' 1, 'dnom' 1; -moz-font-feature-settings: 'kern' 1, 'dnom' 1; } -.ff-tnum { font-feature-settings: 'kern' 1, 'tnum' 1; -webkit-font-feature-settings: 'kern' 1, 'tnum' 1; -ms-font-feature-settings: 'kern' 1, 'tnum' 1; -moz-font-feature-settings: 'kern' 1, 'tnum' 1; } -.ff-case { font-feature-settings: 'kern' 1, 'case' 1; -webkit-font-feature-settings: 'kern' 1, 'case' 1; -ms-font-feature-settings: 'kern' 1, 'case' 1; -moz-font-feature-settings: 'kern' 1, 'case' 1; } -.ff-zero { font-feature-settings: 'kern' 1, 'zero' 1; -webkit-font-feature-settings: 'kern' 1, 'zero' 1; -ms-font-feature-settings: 'kern' 1, 'zero' 1; -moz-font-feature-settings: 'kern' 1, 'zero' 1; } -.ff-frac { font-feature-settings: 'kern' 1, 'frac' 1; -webkit-font-feature-settings: 'kern' 1, 'frac' 1; -ms-font-feature-settings: 'kern' 1, 'frac' 1; -moz-font-feature-settings: 'kern' 1, 'frac' 1; } -.ff-sups { font-feature-settings: 'kern' 1, 'sups' 1; -webkit-font-feature-settings: 'kern' 1, 'sups' 1; -ms-font-feature-settings: 'kern' 1, 'sups' 1; -moz-font-feature-settings: 'kern' 1, 'sups' 1; } -.ff-subs { font-feature-settings: 'kern' 1, 'subs' 1; -webkit-font-feature-settings: 'kern' 1, 'subs' 1; -ms-font-feature-settings: 'kern' 1, 'subs' 1; -moz-font-feature-settings: 'kern' 1, 'subs' 1; } -.ff-cpsp { font-feature-settings: 'kern' 1, 'cpsp' 1; -webkit-font-feature-settings: 'kern' 1, 'cpsp' 1; -ms-font-feature-settings: 'kern' 1, 'cpsp' 1; -moz-font-feature-settings: 'kern' 1, 'cpsp' 1; } -.ff-salt { font-feature-settings: 'kern' 1, 'salt' 1; -webkit-font-feature-settings: 'kern' 1, 'salt' 1; -ms-font-feature-settings: 'kern' 1, 'salt' 1; -moz-font-feature-settings: 'kern' 1, 'salt' 1; } -.ff-salt-zero { font-feature-settings: 'kern' 1, 'salt' 1, 'zero' 1; } -.ff-cv07-salt-zero { font-feature-settings: 'kern' 1, 'cv07' 1, 'salt' 1, 'zero' 1; } - -.ff-ss01 { font-feature-settings: 'kern' 1, 'ss01' 1; -webkit-font-feature-settings: 'kern' 1, 'ss01' 1; -ms-font-feature-settings: 'kern' 1, 'ss01' 1; -moz-font-feature-settings: 'kern' 1, 'ss01' 1; } -.ff-ss02 { font-feature-settings: 'kern' 1, 'ss02' 1; -webkit-font-feature-settings: 'kern' 1, 'ss02' 1; -ms-font-feature-settings: 'kern' 1, 'ss02' 1; -moz-font-feature-settings: 'kern' 1, 'ss02' 1; } -.ff-ss03 { font-feature-settings: 'kern' 1, 'ss03' 1; -webkit-font-feature-settings: 'kern' 1, 'ss03' 1; -ms-font-feature-settings: 'kern' 1, 'ss03' 1; -moz-font-feature-settings: 'kern' 1, 'ss03' 1; } -.ff-cv01 { font-feature-settings: 'kern' 1, 'cv01' 1; -webkit-font-feature-settings: 'kern' 1, 'cv01' 1; -ms-font-feature-settings: 'kern' 1, 'cv01' 1; -moz-font-feature-settings: 'kern' 1, 'cv01' 1; } -.ff-cv02 { font-feature-settings: 'kern' 1, 'cv02' 1; -webkit-font-feature-settings: 'kern' 1, 'cv02' 1; -ms-font-feature-settings: 'kern' 1, 'cv02' 1; -moz-font-feature-settings: 'kern' 1, 'cv02' 1; } -.ff-cv03 { font-feature-settings: 'kern' 1, 'cv03' 1; -webkit-font-feature-settings: 'kern' 1, 'cv03' 1; -ms-font-feature-settings: 'kern' 1, 'cv03' 1; -moz-font-feature-settings: 'kern' 1, 'cv03' 1; } -.ff-cv04 { font-feature-settings: 'kern' 1, 'cv04' 1; -webkit-font-feature-settings: 'kern' 1, 'cv04' 1; -ms-font-feature-settings: 'kern' 1, 'cv04' 1; -moz-font-feature-settings: 'kern' 1, 'cv04' 1; } -.ff-cv05 { font-feature-settings: 'kern' 1, 'cv05' 1; -webkit-font-feature-settings: 'kern' 1, 'cv05' 1; -ms-font-feature-settings: 'kern' 1, 'cv05' 1; -moz-font-feature-settings: 'kern' 1, 'cv05' 1; } -.ff-cv06 { font-feature-settings: 'kern' 1, 'cv06' 1; -webkit-font-feature-settings: 'kern' 1, 'cv06' 1; -ms-font-feature-settings: 'kern' 1, 'cv06' 1; -moz-font-feature-settings: 'kern' 1, 'cv06' 1; } -.ff-cv07 { font-feature-settings: 'kern' 1, 'cv07' 1; -webkit-font-feature-settings: 'kern' 1, 'cv07' 1; -ms-font-feature-settings: 'kern' 1, 'cv07' 1; -moz-font-feature-settings: 'kern' 1, 'cv07' 1; } -.ff-cv08 { font-feature-settings: 'kern' 1, 'cv08' 1; -webkit-font-feature-settings: 'kern' 1, 'cv08' 1; -ms-font-feature-settings: 'kern' 1, 'cv08' 1; -moz-font-feature-settings: 'kern' 1, 'cv08' 1; } -.ff-cv09 { font-feature-settings: 'kern' 1, 'cv09' 1; -webkit-font-feature-settings: 'kern' 1, 'cv09' 1; -ms-font-feature-settings: 'kern' 1, 'cv09' 1; -moz-font-feature-settings: 'kern' 1, 'cv09' 1; } -.ff-cv10 { font-feature-settings: 'kern' 1, 'cv10' 1; -webkit-font-feature-settings: 'kern' 1, 'cv10' 1; -ms-font-feature-settings: 'kern' 1, 'cv10' 1; -moz-font-feature-settings: 'kern' 1, 'cv10' 1; } -.ff-cv11 { font-feature-settings: 'kern' 1, 'cv11' 1; -webkit-font-feature-settings: 'kern' 1, 'cv11' 1; -ms-font-feature-settings: 'kern' 1, 'cv11' 1; -moz-font-feature-settings: 'kern' 1, 'cv11' 1; } - - - -.row.charset { - padding-top: 1rem; - padding-left: 0; - padding-right: 0; - /* maintain cascading margin-bottom */ -} - -.charset-table { - --gridColor: #bbb; - --columns: 24; - --columnsL: 32; - --columnsS: 16; - --columnsXS: 8; - --tableWidth: 95vw; - - flex: 1 1 auto; - padding: 0; - margin: 1rem auto; - - max-width: var(--tableWidth); - width: var(--tableWidth); - overflow: hidden; - - display: flex; - flex-wrap: wrap; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - box-shadow: -1px -1px 0 var(--gridColor), - -1px 0 0 var(--gridColor), - 0 -1px 0 var(--gridColor); -} - .charset-table > a { - flex: 0 0 auto; - - margin: 0; - padding: 0; - - display: flex; - align-items: center; - justify-content: center; - - width: calc(var(--tableWidth) / var(--columns)); - height: calc(var(--tableWidth) / var(--columns)); - - font-size: calc(100vw / calc(var(--columns) * 2)); - line-height: 100%; - text-align: center; - font-feature-settings: "calt" 0; /* disable all */ - - box-shadow: inset -1px -1px 0 var(--gridColor); - text-decoration: none; - } -/* for window width >= 1600 */ -@media only screen and (min-width: 1599px) { - .charset-table { --columns: var(--columnsL); } -} -@media only screen and (max-width: 800px) { - .charset-table { --columns: var(--columnsS); } -} -@media only screen and (max-width: 565px) { - .charset-table { --columns: var(--columnsXS); } -} diff --git a/docs/res/base.js b/docs/res/base.js deleted file mode 100644 index 7d38721b0..000000000 --- a/docs/res/base.js +++ /dev/null @@ -1,115 +0,0 @@ - -function $$(query, el) { - return [].slice.call((el || document).querySelectorAll(query)) -} - -function $(query, el) { - return (el || document).querySelector(query) -} - -// fetchjson(url string) :Promise -// -var fetchjson = ( - typeof window.fetch == 'function' ? ( - function _fetchjson(url, cb) { - return window.fetch(url).then(function(r) { return r.json() }) - } - ) : - function _fetchjson(url, cb) { - return new Promise(function(resolve, reject) { - var r = new XMLHttpRequest() - r.addEventListener("load", function(){ - try { - resolve(JSON.parse(r.responseText)) - } catch (err) { - reject(err) - } - }) - r.addEventListener("error", function(ev) { - reject(ev.error || ev || new Error('network error')) - }) - r.open("GET", url) - r.send() - }) - } -) - - -// timeNow() :float -// -var timeNow = ( - window.performance !== undefined && window.performance.now ? function() { - return window.performance.now() - } : Date.now ? function() { - return Date.now() - } : function() { - return (new Date()).getTime() - } -) - - -var HUDNotification = { - el: $('#hud-notification'), - timer: null, - visible: false, - - show: function(message, duration) { - var n = this - n.el.firstChild.innerText = message - n.el.classList.add('visible') - if (n.visible) { - n.hide() - setTimeout(function(){ n.show(message, duration) }, 120) - return - } - n.visible = true - n.el.style.visibility = null - clearTimeout(n.timer) - n.timer = setTimeout(function(){ n.hide() }, duration || 1200) - }, - - hide: function() { - var n = this - if (n.visible) { - n.el.classList.remove('visible') - n.visible = false - n.el.style.visibility = 'hidden' - } - } -} - - -// InterDynamicTracking takes the font size in points or pixels and returns -// the compensating tracking in EM. -// -function InterDynamicTracking(fontSize) { - var a = -0.0223, b = 0.185, c = -0.1745; - // tracking = a + b * e ^ (c * fontSize) - return a + b * Math.pow(Math.E, c * fontSize) -} - -// InterDynamicLineHeight produces the line height for the given font size -// -function InterDynamicLineHeight(fontSize) { - var l = 1.4 - return Math.round(fontSize * l) -} - - -// Mac or not? Maybe a buggy Safari or a busted Chrome on Windows... -var isMac = false -if (!window.MSStream && - /mac|ipad|iphone|ipod/i.test(navigator.userAgent)) -{ - isMac = true - if (navigator.userAgent.indexOf('Safari') != -1 && - navigator.userAgent.indexOf('Chrome') == -1) - { - document.body.classList.add('safari') - } -} else if ( - navigator.userAgent.indexOf('Windows') != -1 && - navigator.userAgent.indexOf('Chrome') != -1 -) { - document.body.classList.add('chrome-win') -} diff --git a/docs/res/bindings.js b/docs/res/bindings.js deleted file mode 100644 index 3de3ec0b4..000000000 --- a/docs/res/bindings.js +++ /dev/null @@ -1,242 +0,0 @@ -// requires index.js - -function passThrough(v) { return v } - -function valueGetter(el) { - return ( - 'valueAsNumber' in el ? () => el.valueAsNumber : - (el.type == 'number' || el.type == 'range') ? () => parseFloat(el.value) : - () => el.value - ) -} - -function Binding(name){ - this.name = name - this.value = undefined - this.inputs = [] - this.outputs = [] - this.listeners = [] - this.parser = undefined - this.formatter = passThrough -} - - -Binding.prototype.addInput = function(el) { - var binding = this - var getValue = valueGetter(el) - var _onInput = ev => { - binding.setValue(getValue(), el) - } - var input = { - el: el, - _onInput: _onInput, - } - this.inputs.push(input) - if (this.value === undefined) { - this.value = getValue() - } else { - input.el.value = this.formatter(this.value) - } - if (el.tagName == 'SELECT' || el.type == 'checkbox') { - el.addEventListener('change', _onInput, {passive:true}) - } else { - el.addEventListener('input', _onInput, {passive:true}) - } -} - - -Binding.prototype.addOutput = function(el) { - this.outputs.push(el) - if (this.value !== undefined) { - el.innerText = this.formatter(this.value) - } -} - - -// listener signature: -// function(nextval string, prevval string, b Binding)void -// -Binding.prototype.addListener = function(listener) { - this.listeners.push(listener) -} - - -Binding.prototype.setValue = function(nextval, origin) { - var prevval = this.value - if (this.parser) { - nextval = this.parser(nextval, prevval) - } - if (this.value === nextval) { - return - } - var binding = this - this.value = nextval - var value = binding.formatter(nextval) - this.inputs.forEach(function(input) { - if (input.el !== origin) { - input.el.value = value - } - }) - this.outputs.forEach(function(el) { - el.innerText = value - }) - this.listeners.forEach(function(listener) { - listener(nextval, prevval, this) - }) -} - -// ------------------------------------------------------------------------ - -function Bindings() { - this.bindings = {} -} - -Bindings.prototype.getBinding = function(name) { - var binding = this.bindings[name] - if (!binding) { - binding = new Binding(name) - this.bindings[name] = binding - } - return binding -} - -Bindings.prototype.bindInput = function(name, input) { - var binding = this.getBinding(name) - binding.addInput(input) -} - -Bindings.prototype.bindOutput = function(name, el) { - var binding = this.getBinding(name) - binding.addOutput(el) -} - -Bindings.prototype.bindAllInputs = function(queryOrInputElementList) { - var bindings = this - - var elements = ( - typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) : - queryOrInputElementList - ) - - elements.forEach(function(el) { - var bindingName = el.dataset.binding - if (bindingName) { - if ( - el.tagName == 'INPUT' || - el.tagName == 'TEXTAREA' || - el.tagName == 'SELECT' - ) { - bindings.bindInput(bindingName, el) - } else { - bindings.bindOutput(bindingName, el) - } - } - }) -} - -// listener signature: -// function(nextval string, prevval string, b Binding)void -// -Bindings.prototype.addListener = function(name, listener) { - var binding = this.getBinding(name) - binding.addListener(listener) -} - -Bindings.prototype.setValue = function(name, value) { - var binding = this.getBinding(name) - binding.setValue(value) -} - -Bindings.prototype.setFormatter = function(name, formatter) { - var binding = this.getBinding(name) - binding.formatter = formatter || passThrough -} - - -Bindings.prototype.value = function(name, defaultValue) { - var binding = this.bindings[name] - return binding && binding.value !== undefined ? binding.value : defaultValue -} - - -function fmt_float(nextval, prevval) { - var n = parseFloat(nextval) - return isNaN(n) ? 0 : n -} - -function fmt_int(nextval, prevval) { - var n = parseInt(nextval) - return isNaN(n) ? 0 : n -} - - -// configure is convenience function for setting value, adding a -// listener and associating a parser with a binding. -// If a listener and a value is provided, the value is set and the listener -// is immediately invoked. -// -Bindings.prototype.configure = function(name, value, parser, listener) { - var binding = this.getBinding(name) - if (listener) { - binding.addListener(listener) - } - if (value !== undefined && value !== null) { - binding.setValue(value) - } - if (parser) { - if (typeof parser == 'string') { - switch (parser) { - case 'number': - case 'float': - parser = fmt_float; break; - - case 'int': - case 'integer': - parser = fmt_int; break; - - default: - throw new Error('unknown parser "' + parser + '"') - } - } else if (typeof parser != 'function') { - throw new Error('parser should be a string or function') - } - binding.parser = parser - } -} - - -Bindings.prototype.allBindings = ( - typeof Object.values == 'function' ? function() { - return Object.values(this.bindings) - } : function() { - let v = [] - for (let name in this.bindings) { - v.push(this.bindings[name]) - } - return v - } -) - - -Bindings.prototype.getValues = function() { - let values = {} - for (let name in this.bindings) { - values[name] = this.bindings[name].value - } - return values -} - - -Bindings.prototype.setValues = function(values) { - Object.keys(values).forEach(name => { - let b = this.bindings[name] - if (!b) { - if (console.warn) { - console.warn('Bindings.setValues: ignoring unknown "' + name + '"') - } - return - } - // console.log(`bindings setValue ${name} => ${values[name]}`) - b.setValue(values[name]) - }) -} diff --git a/docs/res/close.svg b/docs/res/close.svg deleted file mode 100644 index f6b7b196e..000000000 --- a/docs/res/close.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/ctxedit.css b/docs/res/ctxedit.css deleted file mode 100644 index fb17514ae..000000000 --- a/docs/res/ctxedit.css +++ /dev/null @@ -1,337 +0,0 @@ -:root { - --strip-height: 40px; -} - -#ctxedit-ui { - box-sizing: border-box; - overflow: hidden; - display: flex; - position: fixed; - left: 0; - right: 0; - bottom: 0; - padding: 0 0; - height: var(--strip-height); - - background: #111; - color: #ccc; - font-size: 12px; - /*border-top-left-radius: 4px; - border-bottom-left-radius: 4px;*/ - - padding: 0 50px; - display: flex; - justify-content: center; - - opacity:0; - transition: 90ms all cubic-bezier(0.25, 0.47, 0.44, 0.93); - transform: translate(0, var(--strip-height)); - - outline: none; - pointer-events: none; -} -#ctxedit-ui.visible { - opacity:1; - transform: translate(0, 0); - pointer-events: initial; -} -#ctxedit-ui .wrapper { - display: flex; - flex-direction: row; - align-items: stretch; - justify-content: center; - width: 100%; - max-width: 888px; /* same as base.css .row > * */ - flex: 1 0 100%; -} - #ctxedit-ui .control { - display: flex; - justify-content: space-between; - align-items: center; - overflow: hidden; - min-height: 30px; - margin: 0 16px; - } - #ctxedit-ui .control:first-child { - margin-left:0; - } - #ctxedit-ui .control.range { - flex: 1 1 auto; - max-width: 200px; - } - #ctxedit-ui .control > * { - flex: 1 1 auto; - margin:0; - box-sizing: border-box; - } - #ctxedit-ui .control > :last-child { - margin-right: 0; - } - #ctxedit-ui .control > select { - min-width: 8em; - flex: 0 1 auto; - align-items: center; - justify-content: center; - } - #ctxedit-ui .control > input, - #ctxedit-ui .control > select { - width: 0; - outline: none; - color: inherit; - } - #ctxedit-ui .control.popup { - margin-right: 0px; - } - #ctxedit-ui .control > select { - font: inherit; - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - border: none; - background-color: #111; - margin: 0; - padding: 0; - height: var(--strip-height); - background-image: url(popup.svg); - background-repeat: no-repeat; - background-position: left center; - width: 120px; - color: white; - opacity: 0.6; - padding-left: 20px; - line-height: var(--strip-height); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - #ctxedit-ui .control > select::-ms-expand { - display: none; - } - #ctxedit-ui .control > select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #fff; - background-color: #111; - font: inherit; - font-size: inherit; - } - #ctxedit-ui .control > select:hover { - opacity: 1; - } - #ctxedit-ui .control > input[type="number"], - #ctxedit-ui .control > input[type="text"] { - background: none; - border: none; - padding: 4px 0; - font-size: inherit; - /*border-radius: 2px;*/ - } - #ctxedit-ui .control > input[type="number"] { - max-width: 48px; - text-align: left; - -moz-appearance: textfield; - -moz-font-feature-settings: 'tnum' 1; - -ms-font-feature-settings: 'tnum' 1; - -o-font-feature-settings: 'tnum' 1; - -webkit-font-feature-settings: 'tnum' 1; - font-feature-settings: 'tnum' 1; - } - #ctxedit-ui .control > input[type=number]::-webkit-inner-spin-button, - #ctxedit-ui .control > input[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - #ctxedit-ui .control > input[type="range"] { - /*max-width: 80%;*/ - flex: 1 1 auto; - display: block; - } - #ctxedit-ui .control > input[type="color"] { - width:20px; - height:20px; - border: none; - background: transparent; - } - #ctxedit-ui .control > img.icon, - #ctxedit-ui .control > label { - user-select: none; - font-family: georgia, serif; - font-style: italic; - color: white; - width: 16px; - height: 16px; - flex: 0 0 auto; - margin-right: 16px; - opacity: 0.6; - } - - #ctxedit-ui .button { - width: var(--strip-height); - height: var(--strip-height); - background-repeat: no-repeat; - background-position: center; - opacity: 0.6; - margin:0; - } - #ctxedit-ui .button:hover { - opacity: 1; - background-color: #292929; - } - #ctxedit-ui .button:active { - background-color: #444; - } - #ctxedit-ui .button.features-button { background-image: url(settings.svg); } - #ctxedit-ui .button.reset-button { background-image: url(reset.svg); } - #ctxedit-ui .button.dismiss-button { background-image: url(dismiss.svg); } - - - -/* narrow viewports */ -@media only screen and (max-width: 639px) { - #ctxedit-ui { - background: black; - height: calc(var(--strip-height) * 4); - } - #ctxedit-ui .wrapper { - flex-direction: column; - flex-wrap: wrap; - } -} - - -.font-preload { - position: fixed; - display: block; - opacity: 0; - pointer-events: none; -} - - -.slider-value-tip { - pointer-events: none; - opacity: 0; - position: fixed; - text-align: center; - width: 100px; - /*background: hotpink;*/ - left: 500px; - display: flex; - flex-direction: column; - align-items: center; - z-index: 9; - transition: opacity 120ms ease-out; - filter: drop-shadow(0px 2px 6px rgba(0,0,0,0.2)); - --fgcolor: #fff; - --bgcolor: #444; -} -.slider-value-tip .value { - padding: 4px 10px; - border-radius: 2px; - font-size: 11px; - letter-spacing: 0.013em; - color: var(--fgcolor); - background: var(--bgcolor); - -moz-font-feature-settings: 'tnum' 1; - -ms-font-feature-settings: 'tnum' 1; - -o-font-feature-settings: 'tnum' 1; - -webkit-font-feature-settings: 'tnum' 1; - font-feature-settings: 'tnum' 1; - z-index: 1; -} -.slider-value-tip .callout { - background: var(--bgcolor); - width:10px; - height:10px; - transform: translate(0, -6px) rotate(45deg); - z-index: 0; -} -.slider-value-tip.visible { - opacity: 1; -} - -.styled-inputs-neg { - --track-thickness: 2px; - --track-color: rgba(255, 255, 255, 0.3); - - --thumb-outline-thickness: 2px; - --thumb-outline-color: #111; /* match control strip */ - --thumb-diameter: 10px; - --thumb-color: white; - - --active-color: rgb(95, 170, 255); -} - -.styled-inputs-neg input[type=range] { - -webkit-appearance: none; - margin: 0; - width: 100%; - height: var(--strip-height); - background: transparent; -} -.styled-inputs-neg input[type=range]:focus { - outline: none; -} - -.styled-inputs-neg input[type=range]::-webkit-slider-runnable-track { - width: 100%; - margin: 0; - animate: 0.2s; - background: var(--track-color); - height: var(--track-thickness); -} -.styled-inputs-neg input[type=range]:focus::-webkit-slider-runnable-track { - background: var(--active-color); -} -.styled-inputs-neg input[type=range]::-moz-range-track { - width: 100%; - margin: 0; - animate: 0.2s; - background: var(--track-color); - height: var(--track-thickness); -} -.styled-inputs-neg input[type=range]:focus::-moz-range-track { - background: var(--active-color); -} - -.styled-inputs-neg input[type=range]::-webkit-slider-thumb { - --thumb-diameter2: calc(var(--thumb-diameter) + var(--thumb-outline-thickness) * 2); - width: var(--thumb-diameter2); - height: var(--thumb-diameter2); - border: var(--thumb-outline-thickness) solid var(--thumb-outline-color); - border-radius: 100%; - background: var(--thumb-color); - -webkit-appearance: none; - margin-top: calc(((var(--thumb-diameter2) / 2) - (var(--track-thickness) / 2)) * -1); -} -.styled-inputs-neg input[type=range]::-moz-range-thumb { - width: var(--thumb-diameter); - height: var(--thumb-diameter); - border: var(--thumb-outline-thickness) solid var(--thumb-outline-color); - border-radius: 100%; - background: var(--thumb-color); - margin-top: calc(((var(--thumb-diameter) / 2) - (var(--track-thickness) / 2)) * -1); -} - -/* MS Edge -- note that we can't use CSS variables here */ -.styled-inputs-neg input[type=range]::-ms-track { - background: transparent; - border-color: transparent; - border-width: 0 0; - color: transparent; /* markings */ - height: 2px; - animate: 0.2s; - margin: 0; -} -.styled-inputs-neg input[type=range]::-ms-fill-lower, -.styled-inputs-neg input[type=range]::-ms-fill-upper { - background: white; - opacity: 0.3; -} -.styled-inputs-neg input[type=range]::-ms-thumb { - width: 9px; - height: 9px; - /*border: 2px solid rgba(0,0,0,0.8);*/ - box-shadow: 0px 0px 0px 2px #111; - border-radius: 100%; - background: white; -} -/* Note: :focus selectors are buggy in Edge, so we skip that */ diff --git a/docs/res/ctxedit.js b/docs/res/ctxedit.js deleted file mode 100644 index 1ab896b08..000000000 --- a/docs/res/ctxedit.js +++ /dev/null @@ -1,560 +0,0 @@ -var CtxEdit = (function(){ - - -function getLocalObject(key) { - let s = sessionStorage.getItem(key) - if (s) { - try { - return JSON.parse(s) - } catch (e) { - console.error( - `failed to parse sessionStorage value "${s}" for key ${key}`, - err.stack || String(err) - ) - } - } - return null -} - - -function setLocalObject(key, value) { - let json = JSON.stringify(value) - sessionStorage.setItem(key, json) -} - - -function rmLocalObject(key) { - sessionStorage.removeItem(key) -} - - -class FloatProp { - constructor(cssProp, unitSuffix) { - this.cssProp = cssProp - this.unitSuffix = unitSuffix - } - - valueInStyle(s) { - let v = s[this.cssProp] - return v !== undefined ? parseFloat(v) : v - } - - applyStyle(el, value) { - el.style[this.cssProp] = value + this.unitSuffix - } -} - -class FontStyleProp { - - valueInStyle(s) { - let italic = s['font-style'] == 'italic' || s['font-style'].indexOf('oblique') != -1 - let weight = parseFloat(s['font-weight']) - if (isNaN(weight)) { - weight = s['font-weight'] - if (weight == 'thin') { return italic ? 'thin-italic' : 'thin' } - if (weight == 'extra-light') {return italic ? 'extra-light-italic' :'extra-light' } - if (weight == 'light') { return italic ? 'light-italic' : 'light' } - if (weight == 'normal') { return italic ? 'italic' : 'regular' } - if (weight == 'medium') { return italic ? 'medium-italic' : 'medium' } - if (weight == 'semi-bold') { return italic ? 'semi-bold-italic' : 'semi-bold' } - if (weight == 'bold') { return italic ? 'bold-italic' : 'bold' } - if (weight == 'extra-bold') { return italic ? 'extra-bold-italic' : 'extra-bold' } - } else { - if (weight <= 150) { return italic ? 'thin-italic' : 'thin' } - if (weight <= 250) { return italic ? 'extra-light-italic' :'extra-light' } - if (weight <= 350) { return italic ? 'light-italic' : 'light' } - if (weight <= 450) { return italic ? 'italic' : 'regular' } - if (weight <= 550) { return italic ? 'medium-italic' : 'medium' } - if (weight <= 650) { return italic ? 'semi-bold-italic' : 'semi-bold' } - if (weight <= 750) { return italic ? 'bold-italic' : 'bold' } - if (weight <= 850) { return italic ? 'extra-bold-italic' : 'extra-bold' } - } - return italic ? 'black-italic' : 'black' - } - - applyStyle(el, value) { - let cl = el.classList - for (let k of Array.from(cl.values())) { - if (k.indexOf('font-style-') == 0) { - cl.remove(k) - } - } - cl.add('font-style-' + value) - } -} - -class LineHeightProp { - valueInStyle(s) { - let v = s['line-height'] - if (v === undefined) { - return 1.0 - } - if (v.lastIndexOf('px') == v.length - 2) { - // compute - return parseFloat( - (parseFloat(v) / parseFloat(s['font-size'])).toFixed(3) - ) - } - v = parseFloat(v) - return isNaN(v) ? 1.0 : v - } - - applyStyle(el, value) { - el.style['line-height'] = String(value) - } -} - -class TrackingProp { - valueInStyle(s) { - let v = s['letter-spacing'] - if (v === undefined) { - return 0 - } - if (v.lastIndexOf('px') == v.length - 2) { - // compute - return parseFloat( - (parseFloat(v) / parseFloat(s['font-size'])).toFixed(3) - ) - } - v = parseFloat(v) - return isNaN(v) ? 0 : v - } - - applyStyle(el, value) { - el.style['letter-spacing'] = value.toFixed(3) + 'em' - } -} - -const Props = { - size: new FloatProp('font-size', 'px'), - tracking: new TrackingProp(), - lineHeight: new LineHeightProp(), - style: new FontStyleProp(), -} - -function valuesFromStyle(s) { - let values = {} - for (let name in Props) { - let p = Props[name] - values[name] = p.valueInStyle(s) - } - return values -} - - -class Editable { - constructor(el, key) { - this.el = el - this.key = key - this.defaultValues = valuesFromStyle(getComputedStyle(this.el)) - this.values = Object.assign({}, this.defaultValues) - this.defaultExplicitTracking = this.defaultValues['tracking'] != 0 - this.explicitTracking = this.defaultExplicitTracking - this.explicitTrackingKey = this.key + ":etracking" - this.loadValues() - this.updateSizeDependantProps() - } - - resetValues() { - this.values = Object.assign({}, this.defaultValues) - let style = this.el.style - for (let name in this.values) { - Props[name].applyStyle(this.el, this.values[name]) - } - rmLocalObject(this.key) - rmLocalObject(this.explicitTrackingKey) - this.explicitTracking = this.defaultExplicitTracking - this.updateSizeDependantProps() - } - - setExplicitTracking(explicitTracking) { - if (this.explicitTracking !== explicitTracking) { - this.explicitTracking = explicitTracking - if (!this.explicitTracking) { - this.updateSizeDependantProps() - } - } - } - - setValue(name, value) { - this.values[name] = value - Props[name].applyStyle(this.el, value) - if (name == 'size') { - this.updateSizeDependantProps() - } - } - - updateSizeDependantProps() { - let size = this.values.size - - // dynamic tracking - if (!this.explicitTracking) { - this.setValue('tracking', InterDynamicTracking(size)) - } - - // left indent - // TODO: Consider making this part of dynamic metrics. - let leftMargin = size / -16 - if (leftMargin == 0) { - this.el.style.marginLeft = null - } else { - this.el.style.marginLeft = leftMargin.toFixed(1) + 'px' - } - } - - loadValues() { - let values = getLocalObject(this.key) - if (values && typeof values == 'object') { - for (let name in values) { - if (name in this.values) { - let value = values[name] - this.values[name] = value - Props[name].applyStyle(this.el, value) - } else if (console.warn) { - console.warn(`Editable.loadValues ignoring unknown "${name}"`) - } - } - // console.log(`loaded values for ${this}:`, values) - } - let etr = getLocalObject(this.explicitTrackingKey) - this.explicitTracking = this.defaultExplicitTracking || etr - } - - isDefaultValues() { - for (let k in this.values) { - if (this.values[k] !== this.defaultValues[k]) { - return false - } - } - return true - } - - saveValues() { - if (this.isDefaultValues()) { - rmLocalObject(this.key) - rmLocalObject(this.explicitTrackingKey) - } else { - setLocalObject(this.key, this.values) - setLocalObject(this.explicitTrackingKey, this.explicitTracking ? "1" : "0") - } - // console.log(`saved values for ${this}`) - } - - toString() { - return `Editable(${this.key})` - } -} - - -var supportsFocusTrick = (u => - u.indexOf('Firefox/') == -1 -)(navigator.userAgent) - - -class CtxEdit { - constructor() { - this.bindings = new Bindings() - this.keyPrefix = 'ctxedit:' + document.location.pathname + ':' - this.editables = new Map() - this.ui = $('#ctxedit-ui') - this.currEditable = null - this._saveValuesTimer = null - this.isChangingBindings = true - this.bindings = new Bindings() - this.initBindings() - this.initUI() - this.addAllEditables() - this.isChangingBindings = false - this.preloadFonts() - - if (supportsFocusTrick) { - this.ui.addEventListener('focus', ev => { - if (this.currEditable) { - ev.preventDefault() - ev.stopImmediatePropagation() - this.currEditable.el.focus() // breaks Firefox - } - }, {capture:true, passive:false}) - } - } - - initUI() { - $('.reset-button', this.ui).addEventListener('click', ev => this.reset()) - $('.dismiss-button', this.ui).addEventListener('click', ev => this.stopEditing()) - this.initRangeSliders() - } - - initRangeSliders() { - this._sliderTimers = new Map() - $$('input[type="range"]', this.ui).forEach(input => { - var binding = this.bindings.getBinding(input.dataset.binding) - - // create and hook up value tip - let valtip = document.createElement('div') - let valtipval = document.createElement('div') - let valtipcallout = document.createElement('div') - valtip.className = 'slider-value-tip' - valtipval.className = 'value' - valtipcallout.className = 'callout' - valtipval.innerText = '0' - valtip.appendChild(valtipval) - valtip.appendChild(valtipcallout) - binding.addOutput(valtipval) - document.body.appendChild(valtip) - - let inputBounds = {} - let min = parseFloat(input.getAttribute('min')) - let max = parseFloat(input.getAttribute('max')) - if (isNaN(min)) { - min = 0 - } - if (isNaN(max)) { - max = 1 - } - const sliderThumbWidth = 12 - const valtipYOffset = 14 - - let updateValTipXPos = () => { - let r = (binding.value - min) / (max - min) - let sliderWidth = inputBounds.width - sliderThumbWidth - let x = ((inputBounds.x + (sliderThumbWidth / 2)) + (sliderWidth * r)) - (valtip.clientWidth / 2) - valtip.style.left = x + 'px' - } - - binding.addListener(updateValTipXPos) - - let shownCounter = 0 - let showValTip = () => { - if (++shownCounter == 1) { - valtip.classList.add('visible') - inputBounds = input.getBoundingClientRect() - valtip.style.top = (inputBounds.y - valtip.clientHeight + valtipYOffset) + 'px' - updateValTipXPos() - } - } - let hideValTip = () => { - if (--shownCounter == 0) { - valtip.classList.remove('visible') - } - } - - input.addEventListener('pointerdown', showValTip) - input.addEventListener('pointerup', hideValTip) - input.addEventListener('pointercancel', hideValTip) - - let timer = null - input.addEventListener('input', ev => { - if (timer === null) { - showValTip() - } else { - clearTimeout(timer) - } - timer = setTimeout(() => { - timer = null - hideValTip() - }, 400) - }) - }) - } - - initBindings() { - let b = this.bindings - - // let updateTracking = fontSize => { - // if (!this.currEditable.explicitTracking) { - // var tracking = InterDynamicTracking(fontSize) - // this.isChangingBindings = true - // b.setValue('tracking', tracking) - // this.isChangingBindings = false - // } - // } - - b.configure('tracking', 0, 'float', tracking => { - if (!this.isChangingBindings && !this.currEditable.explicitTracking) { - // console.log('enabled explicit tracking') - this.currEditable.setExplicitTracking(true) - this.setNeedsSaveValues() - } - }) - b.setFormatter('tracking', v => v.toFixed(3)) - - b.configure('size', 0, 'float', size => { - let ed = this.currEditable - if (ed) { - setTimeout(() => { - // HERE BE DRAGONS! Feedback loop from Editable - if (!ed.explicitTracking) { - this.isChangingBindings = true - b.setValue('tracking', ed.values.tracking) - this.isChangingBindings = false - } - }, 10) - } - }) - - b.configure('lineHeight', 1, 'float') - - b.bindAllInputs($$('.control input', this.ui)) - b.bindAllInputs($$('.control select', this.ui)) - - $('.control input[data-binding="tracking"]').addEventListener("dblclick", ev => { - let ed = this.currEditable - setTimeout(() => { - ed.setExplicitTracking(false) - this.setNeedsSaveValues() - this.isChangingBindings = true - b.setValue('tracking', ed.values.tracking) - this.isChangingBindings = false - }, 50) - }) - - for (let binding of b.allBindings()) { - binding.addListener(() => this.bindingChanged(binding)) - } - } - - preloadFonts() { - // Note: This has no effect on systems supporting variable fonts. - [ - "regular", - "italic", - "medium", - "medium-italic", - "semi-bold", - "semi-bold-italic", - "bold", - "bold-italic", - "extra-bold", - "extra-bold-italic", - "black", - "black-italic", - ].forEach(style => { - let e = document.createElement('div') - e.className = 'font-preload font-style-' + style - e.innerText = 'a' - document.body.appendChild(e) - }) - } - - bindingChanged(binding) { - if (this.isChangingBindings) { - // Note: this.isChangingBindings is true when binding values are - // changed internally, in which case we do nothing here. - return - } - if (this.currEditable) { - this.currEditable.setValue(binding.name, binding.value) - } - this.setNeedsSaveValues() - } - - reset() { - for (let ed of this.editables.values()) { - ed.resetValues() - } - this.updateBindingValues() - } - - updateBindingValues() { - if (this.currEditable) { - this.isChangingBindings = true - this.bindings.setValues(this.currEditable.values) - this.isChangingBindings = false - } - } - - saveValues() { - if (this._saveValuesTimer !== null) { - clearTimeout(this._saveValuesTimer) - this._saveValuesTimer = null - } - if (this.currEditable) { - this.currEditable.saveValues() - } - } - - setNeedsSaveValues() { - if (this._saveValuesTimer !== null) { - clearTimeout(this._saveValuesTimer) - } - this._saveValuesTimer = setTimeout(() => this.saveValues(), 300) - } - - setCurrEditable(ed) { - if (this._saveValuesTimer !== null && - this.currEditable && - !this.isChangingBindings) - { - this.saveValues() - } - this.currEditable = ed - this.updateBindingValues() - if (this.currEditable) { - this.showUI() - } else { - this.hideUI() - } - } - - onEditableReceivedFocus(ed) { - // console.log(`onEditableReceivedFocus ${ed}`) - clearTimeout(this._deselectTimer) - this.setCurrEditable(ed) - } - - onEditableLostFocus(ed) { - // console.log(`onEditableLostFocus ${ed}`) - // this.setCurrEditable(null) - if (supportsFocusTrick) { - this._deselectTimer = setTimeout(() => this.setCurrEditable(null), 10) - } - } - - showUI() { - this.ui.classList.add('visible') - } - - hideUI() { - this.ui.classList.remove('visible') - } - - stopEditing() { - if (this.currEditable) { - this.currEditable.el.blur() - this.setCurrEditable(null) - } - } - - addAllEditables() { - for (let el of $$('[data-ctxedit]')) { - this.addEditable(el) - } - } - - addEditable(el) { - let key = this.keyPrefix + el.dataset.ctxedit - let existing = this.editables.get(key) - if (existing) { - throw new Error(`duplicate editable ${key}`) - } - let ed = new Editable(el, key) - this.editables.set(key, ed) - this.initEditable(ed) - // this.showUI() // XXX - } - - initEditable(ed) { - // filter paste - ed.el.addEventListener('paste', ev => { - ev.preventDefault() - let text = ev.clipboardData.getData("text/plain") - document.execCommand("insertHTML", false, text) - }, {capture:true,passive:false}) - - ed.el.addEventListener('focus', ev => this.onEditableReceivedFocus(ed)) - ed.el.addEventListener('blur', ev => this.onEditableLostFocus(ed)) - } -} - -return CtxEdit -})(); diff --git a/docs/res/dismiss.svg b/docs/res/dismiss.svg deleted file mode 100644 index 0749e2196..000000000 --- a/docs/res/dismiss.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/favicon.png b/docs/res/favicon.png deleted file mode 100644 index 414217338..000000000 --- a/docs/res/favicon.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8941a9dfdb8de43d438d164d1cec675b399846c44426e6570df99d86ba5d74a7 -size 914 diff --git a/docs/res/graphplot.js b/docs/res/graphplot.js deleted file mode 100644 index b06f67f16..000000000 --- a/docs/res/graphplot.js +++ /dev/null @@ -1,239 +0,0 @@ - -function GraphPlot(canvas) { - this.canvas = canvas - const g = canvas.getContext('2d') - if (g == null) { - throw new Error('failed to acquire 2d context') - } - - this.width = 0 // dp - this.height = 0 // dp - this.widthPx = 0 // px - this.heightPx = 0 // px - this.pixelRatio = 1 - this.g = g - this.dataSegments = [] - this.axes = { - x0: .5, // % from left to x=0 - y0: .5, // % from top to y=0 - scalex: 40, // pixels from x=0 to x=1 - scaley: 40, // pixels from y=0 to y=1 - negativeX: true, - } - - if (!this.autosize()) { - this.setSize(256, 256) - } -} - -GraphPlot.prototype.autosize = function() { - try { - this.canvas.width = null - this.canvas.height = null - this.canvas.style.width = null - this.canvas.style.height = null - var cs = window.getComputedStyle(this.canvas) - var width = parseFloat(cs.width) - var height = parseFloat(cs.height) - this.setSize(width, height) - return true - } catch (err) { - if (typeof console != 'undefined' && console.warn) { - console.warn('GraphPlot.autosize failed: ' + err) - } - } - return false -} - -// setOrigin sets the origin of axis x and y -// The values should be in the range [0-1] and maps to the extremes -// of the canvas. -// -GraphPlot.prototype.setOrigin = function(x, y) { - var p = this - p.axes.x0 = x - p.axes.y0 = y -} - -// setScale sets the value scale for x and y axis. -// The values should be provided as display points. -// -GraphPlot.prototype.setScale = function(x, y) { - var p = this - if (y === undefined) { - y = x - } - p.axes.scalex = x - p.axes.scaley = y -} - -// setSize sets the size of canvas in display points -// -GraphPlot.prototype.setSize = function(width, height) { - var p = this - p.width = width - p.height = height - const el = p.canvas, g = p.g - p.pixelRatio = window.devicePixelRatio || 1 - if (p.pixelRatio != 1) { - el.width = p.widthPx = width * p.pixelRatio - el.height = p.heightPx = height * p.pixelRatio - g.scale(p.pixelRatio, p.pixelRatio) - } else { - el.width = p.widthPx = width - el.height = p.heightPx = height - g.scale(1, 1) - } - el.style.width = `${width}px` - el.style.height = `${height}px` -} - - -GraphPlot.prototype.renderAxes = function() { - var p = this - , g = p.g - , x0 = Math.round(p.axes.x0 * p.widthPx) / p.pixelRatio - , y0 = Math.round(p.axes.y0 * p.heightPx) / p.pixelRatio - - g.beginPath() - g.strokeStyle = "rgb(0, 0, 0, 0.2)" - if (y0 > 0 && y0 < p.width) { - g.moveTo(0, y0); g.lineTo(p.width, y0) // X axis - } - if (x0 > 0 && x0 < p.height) { - g.moveTo(x0, 0); g.lineTo(x0, p.height) // Y axis - } - g.stroke() -} - - -// plotf plots an arbitrary function on the graph -// -GraphPlot.prototype.plotf = function(f, color) { - var p = this - , g = p.g - , w = p.width - , h = p.height - , x0 = p.axes.x0 * p.width - , y0 = p.axes.y0 * p.height - , x = 0 - , y = 0 - , dx = 4 / p.pixelRatio // smaller means finer curves and more CPU - , scalex = p.axes.scalex * w - , scaley = p.axes.scaley * h - , iMax = Math.round((w - x0) / dx) - , iMin = p.axes.negativeX ? Math.round(-x0 / dx) : 0 - - g.beginPath() - g.lineWidth = 1 - g.strokeStyle = color || "rgb(0, 0, 0, 0.8)" - - for (var i = iMin; i <= iMax; i++) { - x = dx * i - y = f(x / scalex) * scaley - if (i == iMin) { - g.moveTo(x0 + x, y0 - y) - } else { - g.lineTo(x0 + x, y0 - y) - } - } - - g.stroke() -} - - -// plotLines draws straight lines between a collection of points -// -GraphPlot.prototype.plotLine = function(points, color) { - var p = this - , g = p.g - , x0 = p.axes.x0 * p.width - , y0 = p.axes.y0 * p.height - , x = 0 - , y = 0 - , scalex = p.axes.scalex * p.width - , scaley = p.axes.scaley * p.height - , pt - - g.beginPath() - g.lineWidth = 1 - g.strokeStyle = color || "rgb(0, 0, 0, 0.8)" - - var i = 0 - for (; i < points.length; i++) { - pt = points[i] - x = pt[0] * scalex - y = pt[1] * scaley - if (i == 0) { - g.moveTo(x0 + x, y0 - y) - } else { - g.lineTo(x0 + x, y0 - y) - } - } - - g.stroke() -} - - -// plotPoints draws points -// -GraphPlot.prototype.plotPoints = function(points, color) { - var p = this - , g = p.g - , x0 = p.axes.x0 * p.width - , y0 = p.axes.y0 * p.height - , x = 0 - , y = 0 - , scalex = p.axes.scalex * p.width - , scaley = p.axes.scaley * p.height - , pt - , i = 0 - - g.fillStyle = color || "rgb(0, 0, 0, 0.8)" - - for (; i < points.length; i++) { - pt = points[i] - x = x0 + pt[0] * scalex - y = y0 - pt[1] * scaley - g.beginPath() - g.arc(x, y, 3, 0, Math.PI + (Math.PI * 2) / 2, false) - g.fill() - } -} - - -GraphPlot.prototype.clear = function() { - var p = this - p.g.clearRect(0, 0, p.width, p.height) - p.renderAxes() -} - - -GraphPlot.prototype.renderDemo = function() { - var p = this - , g = p.g - , dpscale = p.pixelRatio - , w = p.widthPx - , h = p.heightPx - - p.clear() - - p.plotf( - function(x) { return Math.sin(x) }, - 'blue' - ) - - p.plotf( - function(x) { return Math.cos(3*x) }, - 'hotpink' - ) - - // var scale = p.height / 4 - // g.moveTo(0, scale) - // var i, sine, lines = 200, frag = p.width / lines - // for (i = 0; i < lines; i++) { - // sine = Math.sin(i / scale * 2) * scale - // g.lineTo(i * frag, -sine + scale) - // } - // g.stroke() -} diff --git a/docs/res/grid.css b/docs/res/grid.css deleted file mode 100644 index 3d5a70bdc..000000000 --- a/docs/res/grid.css +++ /dev/null @@ -1,341 +0,0 @@ -/* Raster Simple CSS Grid System, version 3 */ -grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - --grid-cs: 1; /* start */ - --grid-ce: -1 /* end */ -} - -/* c -- cell or column */ -grid > c { display: block; appearance: none; -webkit-appearance: none } - -grid[columns="1"] { grid-template-columns: repeat(1, 1fr) } -grid[columns="2"] { grid-template-columns: repeat(2, 1fr) } -grid[columns="3"] { grid-template-columns: repeat(3, 1fr) } -grid[columns="4"] { grid-template-columns: repeat(4, 1fr) } -grid[columns="5"] { grid-template-columns: repeat(5, 1fr) } -grid[columns="6"] { grid-template-columns: repeat(6, 1fr) } -grid[columns="7"] { grid-template-columns: repeat(7, 1fr) } -grid[columns="8"] { grid-template-columns: repeat(8, 1fr) } -grid[columns="9"] { grid-template-columns: repeat(9, 1fr) } -grid[columns="10"] { grid-template-columns: repeat(10, 1fr) } -grid[columns="11"] { grid-template-columns: repeat(11, 1fr) } -grid[columns="12"] { grid-template-columns: repeat(12, 1fr) } -grid[columns="13"] { grid-template-columns: repeat(13, 1fr) } -grid[columns="14"] { grid-template-columns: repeat(14, 1fr) } -grid[columns="15"] { grid-template-columns: repeat(15, 1fr) } -grid[columns="16"] { grid-template-columns: repeat(16, 1fr) } -grid[columns="17"] { grid-template-columns: repeat(17, 1fr) } -grid[columns="18"] { grid-template-columns: repeat(18, 1fr) } -grid[columns="19"] { grid-template-columns: repeat(19, 1fr) } -grid[columns="20"] { grid-template-columns: repeat(20, 1fr) } -grid[columns="21"] { grid-template-columns: repeat(21, 1fr) } -grid[columns="22"] { grid-template-columns: repeat(22, 1fr) } -grid[columns="23"] { grid-template-columns: repeat(23, 1fr) } -grid[columns="24"] { grid-template-columns: repeat(24, 1fr) } -grid[columns="25"] { grid-template-columns: repeat(25, 1fr) } -grid[columns="26"] { grid-template-columns: repeat(26, 1fr) } -grid[columns="27"] { grid-template-columns: repeat(27, 1fr) } -grid[columns="28"] { grid-template-columns: repeat(28, 1fr) } -grid[columns="29"] { grid-template-columns: repeat(29, 1fr) } -grid[columns="30"] { grid-template-columns: repeat(30, 1fr) } - -/* span=start... */ -grid > c[span^="1"] { --grid-cs: 1 } -grid > c[span^="2"] { --grid-cs: 2 } -grid > c[span^="3"] { --grid-cs: 3 } -grid > c[span^="4"] { --grid-cs: 4 } -grid > c[span^="5"] { --grid-cs: 5 } -grid > c[span^="6"] { --grid-cs: 6 } -grid > c[span^="7"] { --grid-cs: 7 } -grid > c[span^="8"] { --grid-cs: 8 } -grid > c[span^="9"] { --grid-cs: 9 } -grid > c[span^="10"] { --grid-cs: 10 } -grid > c[span^="11"] { --grid-cs: 11 } -grid > c[span^="12"] { --grid-cs: 12 } -grid > c[span^="13"] { --grid-cs: 13 } -grid > c[span^="14"] { --grid-cs: 14 } -grid > c[span^="15"] { --grid-cs: 15 } -grid > c[span^="16"] { --grid-cs: 16 } -grid > c[span^="17"] { --grid-cs: 17 } -grid > c[span^="18"] { --grid-cs: 18 } -grid > c[span^="19"] { --grid-cs: 19 } -grid > c[span^="20"] { --grid-cs: 20 } -grid > c[span^="21"] { --grid-cs: 21 } -grid > c[span^="22"] { --grid-cs: 22 } -grid > c[span^="23"] { --grid-cs: 23 } -grid > c[span^="24"] { --grid-cs: 24 } -grid > c[span^="25"] { --grid-cs: 25 } -grid > c[span^="26"] { --grid-cs: 26 } -grid > c[span^="27"] { --grid-cs: 27 } -grid > c[span^="28"] { --grid-cs: 28 } -grid > c[span^="29"] { --grid-cs: 29 } -grid > c[span^="30"] { --grid-cs: 30 } - -/* span=...+width, span=...-end */ -grid > c[span$="+1"], grid > c[span="1"] { --grid-ce: 1 } -grid > c[span$="+2"], grid > c[span$="-1"], grid > c[span="2"] { --grid-ce: 2 } -grid > c[span$="+3"], grid > c[span$="-2"], grid > c[span="3"] { --grid-ce: 3 } -grid > c[span$="+4"], grid > c[span$="-3"], grid > c[span="4"] { --grid-ce: 4 } -grid > c[span$="+5"], grid > c[span$="-4"], grid > c[span="5"] { --grid-ce: 5 } -grid > c[span$="+6"], grid > c[span$="-5"], grid > c[span="6"] { --grid-ce: 6 } -grid > c[span$="+7"], grid > c[span$="-6"], grid > c[span="7"] { --grid-ce: 7 } -grid > c[span$="+8"], grid > c[span$="-7"], grid > c[span="8"] { --grid-ce: 8 } -grid > c[span$="+9"], grid > c[span$="-8"], grid > c[span="9"] { --grid-ce: 9 } -grid > c[span$="+10"], grid > c[span$="-9"], grid > c[span="10"] { --grid-ce: 10 } -grid > c[span$="+11"], grid > c[span$="-10"], grid > c[span="11"] { --grid-ce: 11 } -grid > c[span$="+12"], grid > c[span$="-11"], grid > c[span="12"] { --grid-ce: 12 } -grid > c[span$="+13"], grid > c[span$="-12"], grid > c[span="13"] { --grid-ce: 13 } -grid > c[span$="+14"], grid > c[span$="-13"], grid > c[span="14"] { --grid-ce: 14 } -grid > c[span$="+15"], grid > c[span$="-14"], grid > c[span="15"] { --grid-ce: 15 } -grid > c[span$="+16"], grid > c[span$="-15"], grid > c[span="16"] { --grid-ce: 16 } -grid > c[span$="+17"], grid > c[span$="-16"], grid > c[span="17"] { --grid-ce: 17 } -grid > c[span$="+18"], grid > c[span$="-17"], grid > c[span="18"] { --grid-ce: 18 } -grid > c[span$="+19"], grid > c[span$="-18"], grid > c[span="19"] { --grid-ce: 19 } -grid > c[span$="+20"], grid > c[span$="-19"], grid > c[span="20"] { --grid-ce: 20 } -grid > c[span$="+21"], grid > c[span$="-20"], grid > c[span="21"] { --grid-ce: 21 } -grid > c[span$="+22"], grid > c[span$="-21"], grid > c[span="22"] { --grid-ce: 22 } -grid > c[span$="+23"], grid > c[span$="-22"], grid > c[span="23"] { --grid-ce: 23 } -grid > c[span$="+24"], grid > c[span$="-23"], grid > c[span="24"] { --grid-ce: 24 } -grid > c[span$="+25"], grid > c[span$="-24"], grid > c[span="25"] { --grid-ce: 25 } -grid > c[span$="+26"], grid > c[span$="-25"], grid > c[span="26"] { --grid-ce: 26 } -grid > c[span$="+27"], grid > c[span$="-26"], grid > c[span="27"] { --grid-ce: 27 } -grid > c[span$="+28"], grid > c[span$="-27"], grid > c[span="28"] { --grid-ce: 28 } -grid > c[span$="+29"], grid > c[span$="-28"], grid > c[span="29"] { --grid-ce: 29 } -grid > c[span$="+30"], grid > c[span$="-29"], grid > c[span="30"] { --grid-ce: 30 } -grid > c[span$="-30"] { --grid-ce: 31 } - -/* connect vars */ -grid > c[span] { grid-column-end: span var(--grid-ce) } -grid > c[span*="+"], grid > c[span*="-"], grid > c[span*=".."] { - grid-column-start: var(--grid-cs) } -grid > c[span*="-"], grid > c[span*=".."] { - grid-column-end: var(--grid-ce) } -grid > c[span="row"] { grid-column: 1 / -1 } - -/* for window width <= 600 */ -@media only screen and (max-width: 600px) { - grid[columns-s="1"] { grid-template-columns: repeat(1, 1fr) } - grid[columns-s="2"] { grid-template-columns: repeat(2, 1fr) } - grid[columns-s="3"] { grid-template-columns: repeat(3, 1fr) } - grid[columns-s="4"] { grid-template-columns: repeat(4, 1fr) } - grid[columns-s="5"] { grid-template-columns: repeat(5, 1fr) } - grid[columns-s="6"] { grid-template-columns: repeat(6, 1fr) } - grid[columns-s="7"] { grid-template-columns: repeat(7, 1fr) } - grid[columns-s="8"] { grid-template-columns: repeat(8, 1fr) } - grid[columns-s="9"] { grid-template-columns: repeat(9, 1fr) } - grid[columns-s="10"] { grid-template-columns: repeat(10, 1fr) } - grid[columns-s="11"] { grid-template-columns: repeat(11, 1fr) } - grid[columns-s="12"] { grid-template-columns: repeat(12, 1fr) } - grid[columns-s="13"] { grid-template-columns: repeat(13, 1fr) } - grid[columns-s="14"] { grid-template-columns: repeat(14, 1fr) } - grid[columns-s="15"] { grid-template-columns: repeat(15, 1fr) } - grid[columns-s="16"] { grid-template-columns: repeat(16, 1fr) } - grid[columns-s="17"] { grid-template-columns: repeat(17, 1fr) } - grid[columns-s="18"] { grid-template-columns: repeat(18, 1fr) } - grid[columns-s="19"] { grid-template-columns: repeat(19, 1fr) } - grid[columns-s="20"] { grid-template-columns: repeat(20, 1fr) } - grid[columns-s="21"] { grid-template-columns: repeat(21, 1fr) } - grid[columns-s="22"] { grid-template-columns: repeat(22, 1fr) } - grid[columns-s="23"] { grid-template-columns: repeat(23, 1fr) } - grid[columns-s="24"] { grid-template-columns: repeat(24, 1fr) } - grid[columns-s="25"] { grid-template-columns: repeat(25, 1fr) } - grid[columns-s="26"] { grid-template-columns: repeat(26, 1fr) } - grid[columns-s="27"] { grid-template-columns: repeat(27, 1fr) } - grid[columns-s="28"] { grid-template-columns: repeat(28, 1fr) } - grid[columns-s="29"] { grid-template-columns: repeat(29, 1fr) } - grid[columns-s="30"] { grid-template-columns: repeat(30, 1fr) } - - /* span-s=start... */ - grid > c[span-s^="1"] { --grid-cs: 1 } - grid > c[span-s^="2"] { --grid-cs: 2 } - grid > c[span-s^="3"] { --grid-cs: 3 } - grid > c[span-s^="4"] { --grid-cs: 4 } - grid > c[span-s^="5"] { --grid-cs: 5 } - grid > c[span-s^="6"] { --grid-cs: 6 } - grid > c[span-s^="7"] { --grid-cs: 7 } - grid > c[span-s^="8"] { --grid-cs: 8 } - grid > c[span-s^="9"] { --grid-cs: 9 } - grid > c[span-s^="10"] { --grid-cs: 10 } - grid > c[span-s^="11"] { --grid-cs: 11 } - grid > c[span-s^="12"] { --grid-cs: 12 } - grid > c[span-s^="13"] { --grid-cs: 13 } - grid > c[span-s^="14"] { --grid-cs: 14 } - grid > c[span-s^="15"] { --grid-cs: 15 } - grid > c[span-s^="16"] { --grid-cs: 16 } - grid > c[span-s^="17"] { --grid-cs: 17 } - grid > c[span-s^="18"] { --grid-cs: 18 } - grid > c[span-s^="19"] { --grid-cs: 19 } - grid > c[span-s^="20"] { --grid-cs: 20 } - grid > c[span-s^="21"] { --grid-cs: 21 } - grid > c[span-s^="22"] { --grid-cs: 22 } - grid > c[span-s^="23"] { --grid-cs: 23 } - grid > c[span-s^="24"] { --grid-cs: 24 } - grid > c[span-s^="25"] { --grid-cs: 25 } - grid > c[span-s^="26"] { --grid-cs: 26 } - grid > c[span-s^="27"] { --grid-cs: 27 } - grid > c[span-s^="28"] { --grid-cs: 28 } - grid > c[span-s^="29"] { --grid-cs: 29 } - grid > c[span-s^="30"] { --grid-cs: 30 } - - /* span-s=...+width, span-s=...-end */ - grid > c[span-s$="+1"], grid > c[span-s="1"] { --grid-ce: 1 } - grid > c[span-s$="+2"], grid > c[span-s$="-1"], grid > c[span-s="2"] { --grid-ce: 2 } - grid > c[span-s$="+3"], grid > c[span-s$="-2"], grid > c[span-s="3"] { --grid-ce: 3 } - grid > c[span-s$="+4"], grid > c[span-s$="-3"], grid > c[span-s="4"] { --grid-ce: 4 } - grid > c[span-s$="+5"], grid > c[span-s$="-4"], grid > c[span-s="5"] { --grid-ce: 5 } - grid > c[span-s$="+6"], grid > c[span-s$="-5"], grid > c[span-s="6"] { --grid-ce: 6 } - grid > c[span-s$="+7"], grid > c[span-s$="-6"], grid > c[span-s="7"] { --grid-ce: 7 } - grid > c[span-s$="+8"], grid > c[span-s$="-7"], grid > c[span-s="8"] { --grid-ce: 8 } - grid > c[span-s$="+9"], grid > c[span-s$="-8"], grid > c[span-s="9"] { --grid-ce: 9 } - grid > c[span-s$="+10"], grid > c[span-s$="-9"], grid > c[span-s="10"] { --grid-ce: 10 } - grid > c[span-s$="+11"], grid > c[span-s$="-10"], grid > c[span-s="11"] { --grid-ce: 11 } - grid > c[span-s$="+12"], grid > c[span-s$="-11"], grid > c[span-s="12"] { --grid-ce: 12 } - grid > c[span-s$="+13"], grid > c[span-s$="-12"], grid > c[span-s="13"] { --grid-ce: 13 } - grid > c[span-s$="+14"], grid > c[span-s$="-13"], grid > c[span-s="14"] { --grid-ce: 14 } - grid > c[span-s$="+15"], grid > c[span-s$="-14"], grid > c[span-s="15"] { --grid-ce: 15 } - grid > c[span-s$="+16"], grid > c[span-s$="-15"], grid > c[span-s="16"] { --grid-ce: 16 } - grid > c[span-s$="+17"], grid > c[span-s$="-16"], grid > c[span-s="17"] { --grid-ce: 17 } - grid > c[span-s$="+18"], grid > c[span-s$="-17"], grid > c[span-s="18"] { --grid-ce: 18 } - grid > c[span-s$="+19"], grid > c[span-s$="-18"], grid > c[span-s="19"] { --grid-ce: 19 } - grid > c[span-s$="+20"], grid > c[span-s$="-19"], grid > c[span-s="20"] { --grid-ce: 20 } - grid > c[span-s$="+21"], grid > c[span-s$="-20"], grid > c[span-s="21"] { --grid-ce: 21 } - grid > c[span-s$="+22"], grid > c[span-s$="-21"], grid > c[span-s="22"] { --grid-ce: 22 } - grid > c[span-s$="+23"], grid > c[span-s$="-22"], grid > c[span-s="23"] { --grid-ce: 23 } - grid > c[span-s$="+24"], grid > c[span-s$="-23"], grid > c[span-s="24"] { --grid-ce: 24 } - grid > c[span-s$="+25"], grid > c[span-s$="-24"], grid > c[span-s="25"] { --grid-ce: 25 } - grid > c[span-s$="+26"], grid > c[span-s$="-25"], grid > c[span-s="26"] { --grid-ce: 26 } - grid > c[span-s$="+27"], grid > c[span-s$="-26"], grid > c[span-s="27"] { --grid-ce: 27 } - grid > c[span-s$="+28"], grid > c[span-s$="-27"], grid > c[span-s="28"] { --grid-ce: 28 } - grid > c[span-s$="+29"], grid > c[span-s$="-28"], grid > c[span-s="29"] { --grid-ce: 29 } - grid > c[span-s$="+30"], grid > c[span-s$="-29"], grid > c[span-s="30"] { --grid-ce: 30 } - grid > c[span-s$="-30"] { --grid-ce: 31 } - - /* connect vars */ - grid > c[span-s] { grid-column-end: span var(--grid-ce) } - grid > c[span-s*="+"], grid > c[span-s*="-"], grid > c[span-s*=".."] { - grid-column-start: var(--grid-cs) } - grid > c[span-s*="-"], grid > c[span-s*=".."] { - grid-column-end: var(--grid-ce) } - grid > c[span-s="row"] { grid-column: 1 / -1 } -} - -/* for window width >= 1600 */ -@media only screen and (min-width: 1599px) { - grid[columns-l="1"] { grid-template-columns: repeat(1, 1fr) } - grid[columns-l="2"] { grid-template-columns: repeat(2, 1fr) } - grid[columns-l="3"] { grid-template-columns: repeat(3, 1fr) } - grid[columns-l="4"] { grid-template-columns: repeat(4, 1fr) } - grid[columns-l="5"] { grid-template-columns: repeat(5, 1fr) } - grid[columns-l="6"] { grid-template-columns: repeat(6, 1fr) } - grid[columns-l="7"] { grid-template-columns: repeat(7, 1fr) } - grid[columns-l="8"] { grid-template-columns: repeat(8, 1fr) } - grid[columns-l="9"] { grid-template-columns: repeat(9, 1fr) } - grid[columns-l="10"] { grid-template-columns: repeat(10, 1fr) } - grid[columns-l="11"] { grid-template-columns: repeat(11, 1fr) } - grid[columns-l="12"] { grid-template-columns: repeat(12, 1fr) } - grid[columns-l="13"] { grid-template-columns: repeat(13, 1fr) } - grid[columns-l="14"] { grid-template-columns: repeat(14, 1fr) } - grid[columns-l="15"] { grid-template-columns: repeat(15, 1fr) } - grid[columns-l="16"] { grid-template-columns: repeat(16, 1fr) } - grid[columns-l="17"] { grid-template-columns: repeat(17, 1fr) } - grid[columns-l="18"] { grid-template-columns: repeat(18, 1fr) } - grid[columns-l="19"] { grid-template-columns: repeat(19, 1fr) } - grid[columns-l="20"] { grid-template-columns: repeat(20, 1fr) } - grid[columns-l="21"] { grid-template-columns: repeat(21, 1fr) } - grid[columns-l="22"] { grid-template-columns: repeat(22, 1fr) } - grid[columns-l="23"] { grid-template-columns: repeat(23, 1fr) } - grid[columns-l="24"] { grid-template-columns: repeat(24, 1fr) } - grid[columns-l="25"] { grid-template-columns: repeat(25, 1fr) } - grid[columns-l="26"] { grid-template-columns: repeat(26, 1fr) } - grid[columns-l="27"] { grid-template-columns: repeat(27, 1fr) } - grid[columns-l="28"] { grid-template-columns: repeat(28, 1fr) } - grid[columns-l="29"] { grid-template-columns: repeat(29, 1fr) } - grid[columns-l="30"] { grid-template-columns: repeat(30, 1fr) } - - /* span-l=start... */ - grid > c[span-l^="1"] { --grid-cs: 1 } - grid > c[span-l^="2"] { --grid-cs: 2 } - grid > c[span-l^="3"] { --grid-cs: 3 } - grid > c[span-l^="4"] { --grid-cs: 4 } - grid > c[span-l^="5"] { --grid-cs: 5 } - grid > c[span-l^="6"] { --grid-cs: 6 } - grid > c[span-l^="7"] { --grid-cs: 7 } - grid > c[span-l^="8"] { --grid-cs: 8 } - grid > c[span-l^="9"] { --grid-cs: 9 } - grid > c[span-l^="10"] { --grid-cs: 10 } - grid > c[span-l^="11"] { --grid-cs: 11 } - grid > c[span-l^="12"] { --grid-cs: 12 } - grid > c[span-l^="13"] { --grid-cs: 13 } - grid > c[span-l^="14"] { --grid-cs: 14 } - grid > c[span-l^="15"] { --grid-cs: 15 } - grid > c[span-l^="16"] { --grid-cs: 16 } - grid > c[span-l^="17"] { --grid-cs: 17 } - grid > c[span-l^="18"] { --grid-cs: 18 } - grid > c[span-l^="19"] { --grid-cs: 19 } - grid > c[span-l^="20"] { --grid-cs: 20 } - grid > c[span-l^="21"] { --grid-cs: 21 } - grid > c[span-l^="22"] { --grid-cs: 22 } - grid > c[span-l^="23"] { --grid-cs: 23 } - grid > c[span-l^="24"] { --grid-cs: 24 } - grid > c[span-l^="25"] { --grid-cs: 25 } - grid > c[span-l^="26"] { --grid-cs: 26 } - grid > c[span-l^="27"] { --grid-cs: 27 } - grid > c[span-l^="28"] { --grid-cs: 28 } - grid > c[span-l^="29"] { --grid-cs: 29 } - grid > c[span-l^="30"] { --grid-cs: 30 } - - /* span-l=...+width, span-l=...-end */ - grid > c[span-l$="+1"], grid > c[span-l="1"] { --grid-ce: 1 } - grid > c[span-l$="+2"], grid > c[span-l$="-1"], grid > c[span-l="2"] { --grid-ce: 2 } - grid > c[span-l$="+3"], grid > c[span-l$="-2"], grid > c[span-l="3"] { --grid-ce: 3 } - grid > c[span-l$="+4"], grid > c[span-l$="-3"], grid > c[span-l="4"] { --grid-ce: 4 } - grid > c[span-l$="+5"], grid > c[span-l$="-4"], grid > c[span-l="5"] { --grid-ce: 5 } - grid > c[span-l$="+6"], grid > c[span-l$="-5"], grid > c[span-l="6"] { --grid-ce: 6 } - grid > c[span-l$="+7"], grid > c[span-l$="-6"], grid > c[span-l="7"] { --grid-ce: 7 } - grid > c[span-l$="+8"], grid > c[span-l$="-7"], grid > c[span-l="8"] { --grid-ce: 8 } - grid > c[span-l$="+9"], grid > c[span-l$="-8"], grid > c[span-l="9"] { --grid-ce: 9 } - grid > c[span-l$="+10"], grid > c[span-l$="-9"], grid > c[span-l="10"] { --grid-ce: 10 } - grid > c[span-l$="+11"], grid > c[span-l$="-10"], grid > c[span-l="11"] { --grid-ce: 11 } - grid > c[span-l$="+12"], grid > c[span-l$="-11"], grid > c[span-l="12"] { --grid-ce: 12 } - grid > c[span-l$="+13"], grid > c[span-l$="-12"], grid > c[span-l="13"] { --grid-ce: 13 } - grid > c[span-l$="+14"], grid > c[span-l$="-13"], grid > c[span-l="14"] { --grid-ce: 14 } - grid > c[span-l$="+15"], grid > c[span-l$="-14"], grid > c[span-l="15"] { --grid-ce: 15 } - grid > c[span-l$="+16"], grid > c[span-l$="-15"], grid > c[span-l="16"] { --grid-ce: 16 } - grid > c[span-l$="+17"], grid > c[span-l$="-16"], grid > c[span-l="17"] { --grid-ce: 17 } - grid > c[span-l$="+18"], grid > c[span-l$="-17"], grid > c[span-l="18"] { --grid-ce: 18 } - grid > c[span-l$="+19"], grid > c[span-l$="-18"], grid > c[span-l="19"] { --grid-ce: 19 } - grid > c[span-l$="+20"], grid > c[span-l$="-19"], grid > c[span-l="20"] { --grid-ce: 20 } - grid > c[span-l$="+21"], grid > c[span-l$="-20"], grid > c[span-l="21"] { --grid-ce: 21 } - grid > c[span-l$="+22"], grid > c[span-l$="-21"], grid > c[span-l="22"] { --grid-ce: 22 } - grid > c[span-l$="+23"], grid > c[span-l$="-22"], grid > c[span-l="23"] { --grid-ce: 23 } - grid > c[span-l$="+24"], grid > c[span-l$="-23"], grid > c[span-l="24"] { --grid-ce: 24 } - grid > c[span-l$="+25"], grid > c[span-l$="-24"], grid > c[span-l="25"] { --grid-ce: 25 } - grid > c[span-l$="+26"], grid > c[span-l$="-25"], grid > c[span-l="26"] { --grid-ce: 26 } - grid > c[span-l$="+27"], grid > c[span-l$="-26"], grid > c[span-l="27"] { --grid-ce: 27 } - grid > c[span-l$="+28"], grid > c[span-l$="-27"], grid > c[span-l="28"] { --grid-ce: 28 } - grid > c[span-l$="+29"], grid > c[span-l$="-28"], grid > c[span-l="29"] { --grid-ce: 29 } - grid > c[span-l$="+30"], grid > c[span-l$="-29"], grid > c[span-l="30"] { --grid-ce: 30 } - grid > c[span-l$="-30"] { --grid-ce: 31 } - - /* connect vars */ - grid > c[span-l] { grid-column-end: span var(--grid-ce) } - grid > c[span-l*="+"], grid > c[span-l*="-"], grid > c[span-l*=".."] { - grid-column-start: var(--grid-cs) } - grid > c[span-l*="-"], grid > c[span-l*=".."] { - grid-column-end: var(--grid-ce) } - grid > c[span-l="row"] { grid-column: 1 / -1 } -} - -/* .debug can be added to a grid to visualize its effective cells */ -grid.debug > * { ---color: rgba(248,110,91 ,0.3); -background-image: - linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); -} -grid.debug > :nth-child(6n+2) { --color: rgba(103,126,208,0.3) } -grid.debug > :nth-child(6n+3) { --color: rgba(224,174,72 ,0.3) } -grid.debug > :nth-child(6n+4) { --color: rgba(77, 214,115,0.3) } -grid.debug > :nth-child(6n+5) { --color: rgba(217,103,219,0.3) } -grid.debug > :nth-child(6n+6) { --color: rgba(94, 204,211,0.3) } -grid.debug > :nth-child(6n+7) { --color: rgba(248,110,91 ,0.3) } diff --git a/docs/res/icons/close-black.svg b/docs/res/icons/close-black.svg deleted file mode 100755 index a67a2e22b..000000000 --- a/docs/res/icons/close-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/close.svg b/docs/res/icons/close.svg deleted file mode 100755 index f6b7b196e..000000000 --- a/docs/res/icons/close.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/dismiss-black.svg b/docs/res/icons/dismiss-black.svg deleted file mode 100755 index d359e4123..000000000 --- a/docs/res/icons/dismiss-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/dismiss.svg b/docs/res/icons/dismiss.svg deleted file mode 100755 index 427522b60..000000000 --- a/docs/res/icons/dismiss.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/font-size-black.svg b/docs/res/icons/font-size-black.svg deleted file mode 100755 index fb0b9df50..000000000 --- a/docs/res/icons/font-size-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/font-size.svg b/docs/res/icons/font-size.svg deleted file mode 100755 index 0dd5cfd61..000000000 --- a/docs/res/icons/font-size.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/letter-spacing-black.svg b/docs/res/icons/letter-spacing-black.svg deleted file mode 100755 index 267c0ac62..000000000 --- a/docs/res/icons/letter-spacing-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/letter-spacing.svg b/docs/res/icons/letter-spacing.svg deleted file mode 100755 index 993435895..000000000 --- a/docs/res/icons/letter-spacing.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/line-height-black.svg b/docs/res/icons/line-height-black.svg deleted file mode 100755 index 04c1e66a9..000000000 --- a/docs/res/icons/line-height-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/line-height.svg b/docs/res/icons/line-height.svg deleted file mode 100755 index 627f62faa..000000000 --- a/docs/res/icons/line-height.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/minimize-black.svg b/docs/res/icons/minimize-black.svg deleted file mode 100644 index 4fef3328f..000000000 --- a/docs/res/icons/minimize-black.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/res/icons/minimize.svg b/docs/res/icons/minimize.svg deleted file mode 100644 index 861eec592..000000000 --- a/docs/res/icons/minimize.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/res/icons/popup-black.svg b/docs/res/icons/popup-black.svg deleted file mode 100755 index 4046411f2..000000000 --- a/docs/res/icons/popup-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/popup.svg b/docs/res/icons/popup.svg deleted file mode 100755 index eba6b62fe..000000000 --- a/docs/res/icons/popup.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/reset-black.svg b/docs/res/icons/reset-black.svg deleted file mode 100755 index 6f20feaef..000000000 --- a/docs/res/icons/reset-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/reset.svg b/docs/res/icons/reset.svg deleted file mode 100755 index 33b7ca175..000000000 --- a/docs/res/icons/reset.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/settings-black.svg b/docs/res/icons/settings-black.svg deleted file mode 100755 index 81365ff40..000000000 --- a/docs/res/icons/settings-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/settings.svg b/docs/res/icons/settings.svg deleted file mode 100755 index 31ed727a1..000000000 --- a/docs/res/icons/settings.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/style-black.svg b/docs/res/icons/style-black.svg deleted file mode 100755 index 0dd668a3d..000000000 --- a/docs/res/icons/style-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/icons/style.svg b/docs/res/icons/style.svg deleted file mode 100755 index ab0589a56..000000000 --- a/docs/res/icons/style.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/metrics.png b/docs/res/metrics.png deleted file mode 100644 index 1a3d2c638..000000000 --- a/docs/res/metrics.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bf98ba617d84d5ac73f8711974e75667e0d973f39cf3cc9f762fe23c3b2c4d10 -size 272310 diff --git a/docs/res/noise512.png b/docs/res/noise512.png deleted file mode 100644 index cba935879..000000000 --- a/docs/res/noise512.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9f808e4bfe2281c9e1c6455e71410f4c2c0de7d47fdaac81d2d0d90cdcd8b2bb -size 36283 diff --git a/docs/res/popup.svg b/docs/res/popup.svg deleted file mode 100644 index a20c03fa8..000000000 --- a/docs/res/popup.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/preview-app.png b/docs/res/preview-app.png deleted file mode 100644 index d70b71a7a..000000000 --- a/docs/res/preview-app.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:146a2d6eb5e14abd38e67637956fd04e45064739b23d824828a9e61ae4d593eb -size 236331 diff --git a/docs/res/reset.svg b/docs/res/reset.svg deleted file mode 100644 index 33b7ca175..000000000 --- a/docs/res/reset.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/sample.png b/docs/res/sample.png deleted file mode 100644 index 390deba1f..000000000 --- a/docs/res/sample.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0771694b2073ba15269971ba90a1a293129d4ca816790c04fddc6d59fac92551 -size 425764 diff --git a/docs/res/settings.svg b/docs/res/settings.svg deleted file mode 100644 index 31ed727a1..000000000 --- a/docs/res/settings.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/res/share.png b/docs/res/share.png deleted file mode 100644 index f0dafe1f8..000000000 --- a/docs/res/share.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a5775db8b3b74f7d602423246c9b3fe8a104fa1cd3e9f3909b33bff9fe6e50a0 -size 45806 diff --git a/docs/res/weights-and-styles.svg b/docs/res/weights-and-styles.svg deleted file mode 100644 index 240d4f9a4..000000000 --- a/docs/res/weights-and-styles.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/samples/index.html b/docs/samples/index.html index 7a4ced920..15b68fc8d 100644 --- a/docs/samples/index.html +++ b/docs/samples/index.html @@ -12,17 +12,17 @@ for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% if _path == "/samples/index.css" %}{% assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/bindings.js" %}{% + elsif _path == "/r/bindings.js" %}{% assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - elsif _path == "/res/graphplot.js" %}{% + elsif _path == "/r/graphplot.js" %}{% assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% endif %}{% endfor %} - - + + {% include ctxedit.html %}
    -- cgit v1.2.3