import { Controller } from "@hotwired/stimulus";
// Replaces a broken avatar image with the user's initials on a neutral
// background instead of the browser's broken image icon.
export default class extends Controller {
 static values = { initials: String };
 connect() {
 if (this.element.complete && this.element.naturalWidth === 0) {
 this.fallback();
 }
 }
 fallback() {
 const fallback = document.createElement("span");
 fallback.textContent = this.initialsValue;
 fallback.setAttribute("role", "img");
 if (this.element.alt) {
 fallback.setAttribute("aria-label", this.element.alt);
 }
 fallback.className = this.element.className;
 fallback.style.width = `${this.element.width}px`;
 fallback.style.height = `${this.element.height}px`;
 fallback.classList.add(
 "inline-flex",
 "items-center",
 "justify-center",
 "shrink-0",
 "rounded",
 "bg-neutral-200",
 "dark:bg-neutral-800",
 "text-neutral-600",
 "dark:text-neutral-400",
 "text-b4",
 "font-semibold",
 );
 this.element.replaceWith(fallback);
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://rubygems.org/assets/controllers/avatar_controller-c357c7d9.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://rubygems.org/assets/controllers/avatar_controller-c357c7d9.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>