bibliogram/src/site/pug/settings.pug

//- Needs constants, settings, csrf, status, message

mixin fieldset(name)
	fieldset
		legend= name
		.fieldset-contents
			block

mixin input(id, description, placeholder, disabled, list)
	.field-row
		label.description(for=id)= description
		input(type="text" id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`)
		if list
			datalist(id=`${id}-list`)
				each item in list
					option(value=item)

mixin checkbox(id, description, label, disabled)
	.field-row.checkbox-row
		label.description(for=id)= description
		input.checkbox(type="checkbox" id=id name=id checked=(settings[id] !== 0) disabled=disabled autocomplete="off")
		label.pill(for=id tabindex=(disabled ? null : 0) onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`)= label
			span.fake-checkbox

mixin select(id, description, disabled, options)
	.field-row
		label.description(for=id)= description
		select(id=id name=id disabled=disabled)
			each option in options
				option(value=option.value selected=(option.value === settings[id]))= option.text

doctype html
html
	head
		title Settings | Bibliogram
		include includes/head
		script(src=getStaticURL("html", "/static/js/settings_message.js") type="module")
	body.settings-page
		if status && message
			.status-notice(class=status)= message
		main.settings
			form(action=returnAction method="post" enctype="application/x-www-form-urlencoded")
				input(type="hidden" name="csrf" value=csrf)

				h1 Settings

				+fieldset("Features")
					+select("language", "Language", false, [
						{value: "en", text: "English (International)"},
						{value: "en-us", text: "English (US)"},
						{value: "fa", text: "فارسي"},
						{value: "it", text: "Italiano"},
						{value: "ru", text: "Русский"}
					])

					+select("save_data", "Save data", true, [
						{value: "automatic", text: "Automatic"},
						{value: "off", text: "Off"},
						{value: "lazy_load", text: "Lazy load"},
						{value: "full", text: "Full"}
					])

					+input("rewrite_youtube", "Rewrite YouTube domain", constants.default_user_settings.rewrite_youtube, false, [
						"invidio.us",
						"invidious.snopyta.org",
						"invidious.13ad.de",
						"watch.nettohikari.com",
						"invidious.fdn.fr",
						"yewtu.be"
					])

					+input("rewrite_twitter", "Rewrite Twitter domain", constants.default_user_settings.rewrite_twitter, false, [
						"nitter.net",
						"nitter.snopyta.org",
						"nitter.pussthecat.org",
						"nitter.42l.fr",
						"nitter.mastodont.cat",
						"nitter.tedomum.net",
						"nitter.cattube.org",
						"nitter.fdn.fr",
						"nitter.1d4.us"
					])

					+checkbox("remove_trailing_hashtags", "Hide trailing hashtags", "Hide", false)

					+checkbox("link_hashtags", "Clickable hashtags", "Clickable", true)

					+checkbox("show_comments", "Display comments", "Display", true)

					+checkbox("spa", "Fast navigation", "Enabled", false)

					+select("infinite_scroll", "Infinite scroll", true, [
						{value: "normal", text: "Normal"},
						{value: "eager", text: "Eager"},
						{value: "off", text: "Manual"}
					])

				+fieldset("Appearance")
					+select("theme", "Theme", false, constants.themes.collated.map(entry => ({value: entry.file, text: entry.name})))

					+checkbox("display_top_nav", "Display top bar", "Always", false)

					+select("timeline_columns", "Timeline columns", false, [
						{value: "dynamic", text: "Dynamic"},
						{value: "three", text: "3 columns"},
						{value: "four", text: "4 columns"},
						{value: "six", text: "6 columns"}
					])

					+select("caption_side", "Caption side", false, [
						{value: "left", text: "Left (Bibliogram)"},
						{value: "right", text: "Right (Instagram)"}
					])

					+checkbox("display_alt", "Display alt text inline", "Display", false)

				//- div
					//- Here are all the possible input styles. Uncomment to test styling.
					- let i = 2
					- let id = 0
					- let thisID
					while --i >= 0
						fieldset
							legend Style demo
							.field-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Placeholder
								input(type="text" placeholder="Placeholder" id=thisID)

							.field-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Disabled
								input(type="text" disabled placeholder="Disabled" value="Value" id=thisID)

							.field-row
								label.description Button
								button(type="button") Button

							.field-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Select
								select(id=thisID)
									option Select
									option Yes
									option No
									option Always
									option Never

							.field-row.checkbox-row
								- thisID = "in"+(id++)
								label.description(for=thisID) Checkbox
								input.checkbox(type="checkbox" id=thisID)
								label.pill(for=thisID tabindex=0 onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`) Label
									span.fake-checkbox

				if token
					p You can restore and sync saved settings by #[a(href=`/applysettings/${token}`)#restore-link bookmarking this link.]

				.action-container
					span.home-link-container: a(href=returnURL).home-link ← Return
					button(type="submit" formaction=stayAction).save-button Save
					button(type="submit").save-button Save & return