Merge branch 'main' into massive-relayout

# Conflicts:
#	assets/styles/root/050_ruby_controls.css
#	layouts/partials/ruby_controls.html
This commit is contained in:
Eryn Wells 2023-10-14 15:00:00 -07:00
commit d45ad449a5
12 changed files with 269 additions and 70 deletions

View file

@ -0,0 +1,169 @@
// Eryn Wells <eryn@erynwells.me>
class RubySwitch extends HTMLElement {
static controlSizeInPixels = 32;
static thumbTransitionDuration = 0.1;
static settings = [
{
id: "ruby-switch-none",
value: "none",
label: "あ"
},
{
id: "ruby-switch-both",
value: "both",
label: "<ruby>あ<rt>a</rt></ruby>",
default: true
},
{
id: "ruby-switch-hidden",
value: "hidden",
label: "ab"
},
];
#root;
#thumb;
constructor() {
super();
this.#updateValue(RubySwitch.settings.find(obj => obj.default).value);
this.addEventListener("RubyStyleChanged", event => {
this.#updateValue(event.detail.style);
});
this.#root = this.attachShadow({ mode: "closed" });
this.#buildShadowDOM();
this.#updateThumbPosition(this.#root.querySelector(".control[data-default]"));
}
#updateValue(style) {
this.setAttribute("value", style);
}
get #stylesheet() {
const controlSize = RubySwitch.controlSizeInPixels;
const halfControlSize = controlSize / 2;
return `
#ruby-controls {
box-sizing: border-box;
display: inline-block;
position: relative;
}
#controls {
border: none;
box-sizing: border-box;
display: inline grid;
grid-template-columns: repeat(3, ${controlSize}px);
margin: 0;
overflow: none;
padding: 0;
}
#thumb {
box-sizing: border-box;
box-shadow: 2px 2px 6px #ccc;
border: 0.5px solid #aaa;
border-radius: ${halfControlSize}px;
position: absolute;
top: 0;
height: ${controlSize}px;
width: ${controlSize}px;
z-index: 50;
transition: left ${RubySwitch.thumbTransitionDuration}s;
}
.control {
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
height: ${controlSize}px;
width: ${controlSize}px;
}
b {
font-weight: normal;
cursor: pointer;
}
label {
z-index: 2;
text-align: center;
}
#ruby-switch-both {
}
`;
}
#buildShadowDOM() {
const root = this.#root;
const style = document.createElement("style");
style.textContent = this.#stylesheet;
root.appendChild(style);
let container = document.createElement("div");
container.id = "ruby-controls";
root.appendChild(container);
let controls = document.createElement("div");
controls.id = "controls";
container.appendChild(controls);
for (const desc of RubySwitch.settings) {
let control = document.createElement("div");
control.classList.add("control")
control.id = desc.id;
control.dataset.value = desc.value;
if (desc.default) {
control.dataset.default = "";
}
controls.appendChild(control);
control.addEventListener("click", event => {
event.stopPropagation();
event.preventDefault();
this.#updateThumbPosition(event.currentTarget);
this.#root.dispatchEvent(new CustomEvent("RubyStyleChanged", {
bubbles: true,
composed: true,
detail: {
style: control.dataset.value,
},
}));
}, { capture: true });
const label = document.createElement("b");
label.innerHTML = desc.label;
control.appendChild(label);
}
const thumb = document.createElement("div");
this.#thumb = thumb;
thumb.id = "thumb";
container.appendChild(thumb);
}
#updateThumbPosition(selectedControl) {
const controls = this.#root.querySelector("#controls");
const trackBoundingRect = controls.getBoundingClientRect();
const controlBoundingRect = selectedControl.getBoundingClientRect();
const offset = controlBoundingRect.left - trackBoundingRect.left;
this.#thumb.style.left = `${offset}px`;
}
}
customElements.define("ruby-switch", RubySwitch);

View file

@ -1,35 +1,25 @@
@layer root {
#ruby-controls {
align-items: baseline;
display: flex;
padding: calc(var(--body-item-spacing) / 2);
body:has(ruby-switch[value=none]) rt {
display: none;
}
body:has(#ruby-controls > input[value=NONE]:checked) rt { display: none; }
/* When the ruby switch is set to "hidden", hide the ruby base and only show the <rt>. */
body:has(ruby-switch[value=hidden]) ruby > span {
display: none;
}
/* When ruby-controls is set to hidden, hide the ruby base and only show the <rt> */
body:has(#ruby-controls > input[value=HIDDEN]:checked) ruby > span { display: none; }
body:has(#ruby-controls > input[value=HIDDEN]:checked) rt {
body:has(ruby-switch[value=hidden]) rt {
color: inherit;
display: inline;
font-size: inherit;
white-space: inherit;
}
body:has(#ruby-controls > input[value=HIDDEN]:checked) :is(h1, h2, h3, h4, h5, h6) rt {
body:has(ruby-switch[value=hidden]) :is(h1, h2, h3, h4, h5, h6) rt {
font-family: var(--font-family-heading);
font-weight: bold;
}
fieldset#ruby-controls input[type=radio]:not(:last-child) {
margin-inline-end: 0.5rem;
}
fieldset#ruby-controls label:not(:last-child) {
margin-inline-end: 2rem;
}
rt { transition: color 0.3s; }
ruby:hover rt { transition: color 0.3s; }
}

View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e690aef1b3384a6ed6515edaba2f2b446fa08185a9a808b110f36507d9629a97
size 10830003

View file

@ -0,0 +1,10 @@
---
title: "Lotus"
date: 2023-10-12T10:09:29-07:00
tags:
- Nature
- Flowers
---
Two brilliant blue lotus flowers with pink centers, in a muddy pond, surrounded
by a plethora of striped lily pads.

View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9f7fd05997c7951ce8256e3c18f5539a6fe72348984677aeb3a46305f5cf940e
size 6667887

View file

@ -0,0 +1,17 @@
---
title: "Vibin' (at the San Diego Zoo Safari Park)"
date: 2023-10-12T10:51:02-07:00
resources:
- name: "Vibin'"
src: 20231008-Vibin.jpg
params:
alt: "
A black hat with \"Vibing\" written on the front, abandoned on a bench.
The bench is surrounded by lush green plants.
"
tags:
- Nature
---
I found this hat abandoned on a park bench in the San Diego Zoo Safari Park. I
thought it was neat.

View file

@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d440f6b13cb1fd9b65c43a889806683fdd713ffdd8edfcc1501a9cb582b8fac8
size 117394

View file

@ -1,5 +1,5 @@
{
"generated": "2023-08-08T07:30:00.125425",
"generated": "2023-10-12T11:05:37.725359",
"logfile": [
{
"score": 1395,
@ -46,7 +46,7 @@
"cause": "killed by a black naga hatchling"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -96,7 +96,7 @@
"cause": "quit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -146,7 +146,7 @@
"cause": "killed by a wand"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -196,7 +196,7 @@
"cause": "killed by a little dog"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -246,7 +246,7 @@
"cause": "killed by a giant mimic"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -296,7 +296,7 @@
"cause": "killed by an energy vortex"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -346,7 +346,7 @@
"cause": "quit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -396,7 +396,7 @@
"cause": "quit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -446,7 +446,7 @@
"cause": "quit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -496,7 +496,7 @@
"cause": "killed by a killer bee"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -546,7 +546,7 @@
"cause": "quit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -596,7 +596,7 @@
"cause": "killed by a gold golem"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -646,7 +646,7 @@
"cause": "killed by a killer bee"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -696,7 +696,7 @@
"cause": "killed by an energy vortex"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -746,7 +746,7 @@
"cause": "killed by a horse, while frozen by a monster's gaze"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -796,7 +796,7 @@
"cause": "crushed to death by an exploding drawbridge"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -846,7 +846,7 @@
"cause": "killed by a soldier ant"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -896,7 +896,7 @@
"cause": "killed by an imp"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -946,7 +946,7 @@
"cause": "killed by a purple worm"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -996,7 +996,7 @@
"cause": "killed by a large dog"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1046,7 +1046,7 @@
"cause": "quit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1096,7 +1096,7 @@
"cause": "poisoned by a soldier ant"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1146,7 +1146,7 @@
"cause": "poisoned by a quasit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1196,7 +1196,7 @@
"cause": "killed by a dwarf zombie, while frozen by a monster's gaze"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1246,7 +1246,7 @@
"cause": "poisoned by a rotted glob of gray ooze"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1296,7 +1296,7 @@
"cause": "killed by an air elemental"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1346,7 +1346,7 @@
"cause": "ascended"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1396,7 +1396,7 @@
"cause": "quit"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1446,7 +1446,7 @@
"cause": "killed by an incubus"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}
@ -1496,7 +1496,7 @@
"cause": "killed by a dwarf"
},
"system": {
"hostname": "electra",
"hostname": "Electra",
"user_id": 501,
"nethack_version": "3.6.6"
}

View file

@ -30,6 +30,11 @@
{{ block "scripts" . }}{{ end }}
{{- with partial "resources/site_js.html" . -}}
<script type="module" src="{{ .RelPermalink }}"></script>
<script type="module" src="{{ .Permalink }}"></script>
{{ end }}
{{ if .HasShortcode "ruby" }}
{{ with partial "resources/script.html" "ruby_switch" }}
<script type="module" src="{{ .Permalink }}"></script>
{{ end }}
{{ end }}
</html>

View file

@ -1,13 +1,18 @@
{{ $orientation := .Exif.Tags.Orientation }}
{{/* EXIF orientation is specified as an integer corresponding to a 90º rotation. */}}
{{ $angle := 0 }}
{{ if in (slice 1 2) $orientation }}
{{ $orientation = 0 }}
{{ else if in (slice 3 4) $orientation }}
{{ $orientation = 180 }}
{{ else if in (slice 5 6) $orientation }}
{{ $orientation = 90 }}
{{ else if in (slice 7 8) $orientation }}
{{ $orientation = 270 }}
{{ $orientation := 0 }}
{{ with (int .Exif.Tags.Orientation) }}
{{/* EXIF orientation is specified as an integer corresponding to a 90º rotation. */}}
{{ if in (slice 1 2) . }}
{{ $orientation = 0 }}
{{ else if in (slice 3 4) . }}
{{ $orientation = 180 }}
{{ else if in (slice 5 6) . }}
{{ $orientation = 90 }}
{{ else if in (slice 7 8) . }}
{{ $orientation = 270 }}
{{ end }}
{{ else }}
{{ warnf "Image missing orientation: %s" . }}
{{ end }}
{{ return $orientation }}

View file

@ -0,0 +1,2 @@
{{ $script := resources.Get (printf "scripts/%s.js" .) | fingerprint "md5" }}
{{ return $script }}

View file

@ -1,13 +1,5 @@
{{ if .HasShortcode "ruby" -}}
<aside>
<fieldset id=ruby-controls>
<legend>Ruby</legend>
<input id=ruby-controls-none type=radio name=ruby-controls value=NONE>
<label for=ruby-controls-none>Japanese Only</label>
<input id=ruby-controls-both type=radio name=ruby-controls value=BOTH checked>
<label for=ruby-controls-both>Both</label>
<input id=ruby-controls-hidden type=radio name=ruby-controls value=HIDDEN>
<label for=ruby-controls-hidden>English Only</label>
</fieldset>
<ruby-switch>
</aside>
{{- end }}