From a6f068a93bda0ad501d793ad36448301941a1fa3 Mon Sep 17 00:00:00 2001
From: hazycora <hazysu@riseup.net>
Date: Tue, 26 Sep 2023 00:34:09 -0500
Subject: [PATCH] use dropdown for pronoun input

---
 options/locale/locale_en-US.ini      |  1 +
 routers/web/user/setting/profile.go  |  2 ++
 templates/user/settings/profile.tmpl | 52 ++++++++++++++++++++++++++--
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index d099e7820..b7237711d 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -702,6 +702,7 @@ full_name = Full name
 website = Website
 location = Location
 pronouns = Pronouns
+pronouns_custom = Custom
 update_theme = Change theme
 update_profile = Update profile
 update_language = Change language
diff --git a/routers/web/user/setting/profile.go b/routers/web/user/setting/profile.go
index b5d916b78..6843340fe 100644
--- a/routers/web/user/setting/profile.go
+++ b/routers/web/user/setting/profile.go
@@ -46,6 +46,7 @@ func Profile(ctx *context.Context) {
 	ctx.Data["PageIsSettingsProfile"] = true
 	ctx.Data["AllowedUserVisibilityModes"] = setting.Service.AllowedUserVisibilityModesSlice.ToVisibleTypeSlice()
 	ctx.Data["DisableGravatar"] = setting.Config().Picture.DisableGravatar.Value(ctx)
+	ctx.Data["PronounsAreCustom"] = ctx.Doer.Pronouns != "he/him" && ctx.Doer.Pronouns != "she/her" && ctx.Doer.Pronouns != "they/them" && ctx.Doer.Pronouns != "it/its"
 
 	ctx.HTML(http.StatusOK, tplSettingsProfile)
 }
@@ -56,6 +57,7 @@ func ProfilePost(ctx *context.Context) {
 	ctx.Data["PageIsSettingsProfile"] = true
 	ctx.Data["AllowedUserVisibilityModes"] = setting.Service.AllowedUserVisibilityModesSlice.ToVisibleTypeSlice()
 	ctx.Data["DisableGravatar"] = setting.Config().Picture.DisableGravatar.Value(ctx)
+	ctx.Data["PronounsAreCustom"] = ctx.Doer.Pronouns != "he/him" && ctx.Doer.Pronouns != "she/her" && ctx.Doer.Pronouns != "they/them" && ctx.Doer.Pronouns != "it/its"
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplSettingsProfile)
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index ac8260613..7638727e8 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -37,9 +37,55 @@
 					<label for="location">{{ctx.Locale.Tr "settings.location"}}</label>
 					<input id="location" name="location" placeholder="{{ctx.Locale.Tr "settings.location_placeholder"}}" value="{{.SignedUser.Location}}" maxlength="50">
 				</div>
-				<div class="field">
-					<label for="pronouns">{{.locale.Tr "settings.pronouns"}}</label>
-					<input id="pronouns" name="pronouns" value="{{.SignedUser.Pronouns}}" maxlength="50">
+				<div class="inline field">
+					<span class="inline field"><label for="pronouns">{{.locale.Tr "settings.pronouns"}}</label></span>
+					<div id="pronouns-dropdown" style="display: none" class="ui selection dropdown">
+						<input type="hidden" name="pronouns" value="{{.SignedUser.Pronouns}}">
+						<div class="text">
+							{{if .PronounsAreCustom}}
+								{{.locale.Tr "settings.pronouns_custom"}}
+							{{else}}
+								{{.SignedUser.Pronouns}}
+							{{end}}
+						</div>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="menu">
+							<div class="item{{if eq "he/him" .SignedUser.Pronouns}} active selected{{end}}" data-value="he/him">he/him</div>
+							<div class="item{{if eq "she/her" .SignedUser.Pronouns}} active selected{{end}}" data-value="she/her">she/her</div>
+							<div class="item{{if eq "they/them" .SignedUser.Pronouns}} active selected{{end}}" data-value="they/them">they/them</div>
+							<div class="item{{if eq "it/its" .SignedUser.Pronouns}} active selected{{end}}" data-value="it/its">it/its</div>
+							{{if .PronounsAreCustom}}
+								<div class="item active selected" data-value="{{.SignedUser.Pronouns}}">{{.locale.Tr "settings.pronouns_custom"}}</div>
+							{{else}}
+								<div class="item" data-value="">{{.locale.Tr "settings.pronouns_custom"}}</div>
+							{{end}}
+						</div>
+					</div>
+					<input id="pronouns-custom" name="pronouns" value="{{.SignedUser.Pronouns}}" maxlength="50">
+					<script>
+						(() => {
+							const pronounsDropdown = document.getElementById('pronouns-dropdown')
+							const pronounsCustom = document.getElementById('pronouns-custom')
+							const pronounsInput = pronounsDropdown.querySelector('input')
+							pronounsCustom.removeAttribute('name')
+							pronounsDropdown.style.display = ''
+							function onPronounsDropdownUpdate() {
+								const isCustom = !(pronounsInput.value == 'he/him' || pronounsInput.value == 'she/her' || pronounsInput.value == 'they/them' || pronounsInput.value == 'it/its')
+								if (isCustom) {
+									pronounsCustom.value = pronounsInput.value
+									pronounsCustom.style.display = ''
+								} else {
+									pronounsCustom.style.display = 'none'
+								}
+							}
+							function onPronounsCustomUpdate() {
+								pronounsInput.value = pronounsCustom.value
+							}
+							onPronounsDropdownUpdate()
+							pronounsInput.addEventListener('change', onPronounsDropdownUpdate)
+							pronounsCustom.addEventListener('input', onPronounsCustomUpdate)
+						})()
+					</script>
 				</div>
 
 				<div class="divider"></div>