Utatane / Components / Header.razor

@*
	This file is part of Utatane.
	   
	Utatane is free software: you can redistribute it and/or modify it under
	the terms of the GNU Affero General Public License as published by the Free
	Software Foundation, either version 3 of the License, or (at your option)
	any later version.
	   
	Utatane is distributed in the hope that it will be useful, but WITHOUT ANY
	WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
	FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for
	more details.
	   
	You should have received a copy of the GNU Affero General Public License
	along with Utatane. If not, see <http://www.gnu.org/licenses/>.
*@

<header class="n-box">
	<Breadcrumbs Path="@Path" />
	<div id="toolbar">
		<button id="reload-table"
				class="clickable"
				type="button"
				aria-label="Reload table"
				_="
-- shortcut: only the active <th> will have aria-sort
on click send nhnd:run to <th[aria-sort]/>
"
		>
			<span class="[vertical-align:sub]">↻</span>
		</button>
		
		<GoBackButton Path="@Path"/>
		
		<abbr id="search-label" title="Search">🔎</abbr>
		<input id="search" class="border-black" type="search" aria-labelledby="search-label" _="@_scriptForIdSearch" />
		
		<abbr id="rx-label" title="Search with RegEx">.*</abbr>
		<input id="use-rx-for-search" type="checkbox" autocomplete="off" checked aria-labelledby="rx-label" _="@_scriptForIdUseRxForSearch" />
		
		<span id="file-counter" class="my-auto" _="@_scriptForIdFileCounter" />
	</div>
</header>

@code {

	[Parameter]
	public required String Path { get; set; }

	#region _hyperscript strings
	// these are just the big ones, smaller ones are littered throughout
	private readonly String _scriptForIdSearch = @"
on load
	set my value to ''
on input
	if (#use-rx-for-search's checked is true) then
		make a RegExp from my value called rxSearch
		show <tbody > tr/> in #filetable when rxSearch.test(the @data-order of .file-name in it) is true
	otherwise
		show <tbody > tr/> in #filetable when (the first @data-order of .file-name in it) contains my value.toLowerCase()
	end
on keydown[key==""Enter""]
	if event.isComposing or event.keyCode really equals 229 then
		exit
	otherwise
		send click to the first <#filetable-body > tr:not(.hidden) > .file-name > a/>
		set my value to """"
	end
on keydown from body
	make a RegExp from ""^(F|Soft)\\d"" called rx
	if not (
		document.activeElement is me or -- dont repeat it!
		event.key is """" or -- actually I forgot
		event.ctrlKey or event.altKey or event.metaKey or -- dont react on modifier combos
		[""Shift"", ""Tab"", ""ArrowUp"", ""ArrowRight"", ""ArrowLeft"", ""ArrowDown"",
			""AltGraph"", ""CapsLock"", ""Fn"", ""FnLock"", ""Hyper"", ""NumLock"",
			""ScrollLock"", ""Super"", ""Symbol"", ""SymbolLock"", ""OS"", ""End"", ""Home"",
			""PageDown"", ""PageUp"", ""Backspace"", ""Clear"", ""Delete"", ""Redo"",
			""Undo"", ""Accept"", ""Again"", ""Attn"", ""Cancel"", ""ContextMenu"",
			""Escape"", ""Find"", ""Pause"", ""Play"", ""Props"", ""Select"", ""ZoomIn"",
			""ZoomOut"", ""Apps"", ""BrightnessDown"", ""BrightnessUp"", ""PrintScreen"",
			""MediaFastForward"", ""MediaPause"", ""MediaPlay"", ""MediaPlayPause"",
			""MediaRecord"", ""MediaRewind"", ""MediaStop"", ""MediaTrackNext"",
			""MediaTrackPrevious""].includes(event.key) or -- special keys to not react on
		rx.test(event.key) -- more special keys but these can be regexed
	)
		go to the top of the body
		focus() on me
";

	private readonly String _scriptForIdUseRxForSearch = @"
on load or click -- on load for if this comes checked
	if < #use-rx-for-search:checked />'s length
		add .font-mono to #search
	otherwise
		remove .font-mono from #search
	end
	send input to #search
";

	private readonly String _scriptForIdFileCounter = @"
on nhnd:update
	set files to $('.file').length
	set dirs to $('.directory').length
	set my innerHTML to `${dirs} __W ${files} __X`
"
		.Replace("__W", Utils.AbbrIconPlain("Directories", "📁"))
		.Replace("__X", Utils.AbbrIconPlain("Files", "📄"));

	#endregion _hyperscript strings

}