import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
 static targets = [
 "radio",
 "gemname",
 "username",
 "reveal",
 "displayname",
 "submit",
 ];
 connect() {
 this.submitTarget.disabled = true;
 this.radioTargets.forEach((radio) => {
 if (radio.checked) {
 this[radio.value + "name"]();
 }
 });
 }
 gemnameField() {
 return this.gemnameTarget.querySelector("select");
 }
 usernameField() {
 return this.usernameTarget.querySelector("input");
 }
 gemname() {
 this.usernameTarget.classList.add("hidden");
 this.gemnameField().disabled = false;
 this.gemnameTarget.classList.remove("hidden");
 this.revealTarget.classList.remove("hidden");
 const inputElement = this.gemnameField();
 inputElement.focus();
 this.updateDisplaynameWith(inputElement.value);
 if (inputElement.value === "") {
 this.submitTarget.disabled = true;
 }
 this.validate();
 }
 username() {
 this.gemnameTarget.classList.add("hidden");
 this.gemnameField().disabled = true;
 this.usernameTarget.classList.remove("hidden");
 this.revealTarget.classList.remove("hidden");
 this.updateDisplaynameWith(this.usernameField().value);
 this.validate();
 }
 validate() {
 if (this.element.checkValidity()) {
 this.submitTarget.disabled = false;
 } else {
 this.submitTarget.disabled = true;
 }
 }
 updateDisplayname(e) {
 this.updateDisplaynameWith(e.currentTarget.value);
 this.validate();
 }
 updateDisplaynameWith(value) {
 // Replace dashes and underscores with spaces. Capitalize the first letter of each word.
 this.displaynameTarget.value = value
 .replace(/[-_]/g, " ")
 .replace(/\b\w/g, (char) => char.toUpperCase());
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/speech" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://rubygems.org/assets/controllers/onboarding_name_controller-a65c65ec.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://rubygems.org/assets/controllers/onboarding_name_controller-a65c65ec.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech" selected="selected">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>