2022-03-27 04:26:20 +08:00
<!DOCTYPE html>
2013-10-13 02:45:37 +08:00
< html ng-app = "fishconfig" >
2012-03-15 18:43:45 +08:00
2013-10-23 01:30:38 +08:00
< head >
< meta http-equiv = "Content-type" content = "text/html;charset=UTF-8" >
< title > fish shell configuration< / title >
2023-02-08 07:34:10 +08:00
< link rel = "icon" type = "image/png" href = "favicon.png" / >
< link rel = "stylesheet" type = "text/css" href = "fishconfig.css" / >
2023-06-02 20:07:08 +08:00
< link rel = "stylesheet" type = "text/css" media = "print" href = "fishconfig_print.css" >
2023-02-08 23:08:10 +08:00
< script type = "text/javascript" src = "js/colorutils.js" defer > < / script >
2023-02-08 07:34:10 +08:00
< script type = "text/javascript" src = "js/main.js" defer > < / script >
< script type = "text/javascript" src = "js/alpine.js" defer > < / script >
2012-03-15 18:43:45 +08:00
< / head >
2013-10-23 01:30:38 +08:00
2023-02-08 07:34:10 +08:00
<!-- TODO check that every x - for has a :key binding -->
<!-- TODO check that every template has single child -->
2023-02-08 23:08:10 +08:00
<!-- TODO try to reduce depth by either splitting routes or eliminating redundant wrappers -->
2023-02-08 07:34:10 +08:00
2023-02-08 23:08:10 +08:00
< body id = "ancestor" x-data = "{ currentTab: 'colors' }" >
2023-02-08 07:34:10 +08:00
< main id = "parent" >
< div id = "tab_parent" >
< a :class = "{'tab': true, 'selected_tab': currentTab =='colors'}" id = "tab_colors"
@click="currentTab = 'colors'">colors< / a >
< a :class = "{'tab': true, 'selected_tab': currentTab == 'prompt'}" id = "tab_prompt"
@click="currentTab = 'prompt'">prompt< / a >
< a :class = "{'tab': true, 'selected_tab': currentTab == 'functions'}" id = "tab_functions"
@click="currentTab = 'functions'">functions< / a >
< a :class = "{'tab': true, 'selected_tab': currentTab == 'variables'}" id = "tab_variables"
@click="currentTab = 'variables'">variables< / a >
< a :class = "{'tab': true, 'selected_tab': currentTab == 'history'}" id = "tab_history"
@click="currentTab = 'history'">history< / a >
< a :class = "{'tab': true, 'selected_tab': currentTab == 'bindings'}" id = "tab_bindings"
2023-08-29 20:25:02 +08:00
@click="currentTab = 'bindings'">< span class = "print_only" > fish shell < / span > bindings< / a >
2012-03-15 18:43:45 +08:00
< / div >
2012-03-26 13:41:22 +08:00
< div id = "tab_contents" >
2023-02-08 23:08:10 +08:00
< template x-if = "currentTab === 'colors'" x-data = "colors" >
< div >
<!-- ko with: color_picker -->
< div class = "colorpicker_text_sample" :style = "{'background-color': terminalBackgroundColor}" >
< span style = "position: absolute; left: 10px; top: 3px"
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
x-text="selectedColorScheme.name">< / span >
< br / >
< div class = "color_picker_background_cells" >
< span style = "display: block; text-align: right; line-height: 110%"
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}">
Background Color:< br / > (demo only)
< / span >
< template x-for = "color in sampleTerminalBackgroundColors" >
< label :style = "{'background-color': color}" >
< input type = "radio" :value = "color" x-model = "terminalBackgroundColor" hidden
:title="'Preview with this background color.\n\nfish cannot change the background color of your terminal. Refer to your terminal settings to set its background color.'">
< / input >
< / label >
< / template >
< / div >
<!-- This is the sample text -->
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
@click="selectColorSetting('command')">/bright/vixens< / span >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'param'}"
:style="{ 'color': interpret_color(selectedColorScheme.param)}"
@click="selectColorSetting('param')">jump< / span >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
:style="{ 'color': interpret_color(selectedColorScheme.end)}"
@click="selectColorSetting('end')">|< / span >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
@click="selectColorSetting('command')">dozy< / span >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
:style="{ 'color': interpret_color(selectedColorScheme.quote)}"
@click="selectColorSetting('quote')"> "fowl"< / span >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'redirection'}"
:style="{ 'color': interpret_color(selectedColorScheme.redirection)}"
@click="selectColorSetting('redirection')">> quack< / span >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
:style="{ 'color': interpret_color(selectedColorScheme.end)}"
@click="selectColorSetting('end')">& < / span >
< br >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
@click="selectColorSetting('command')">echo< / span >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'error'}"
:style="{ 'color': interpret_color(selectedColorScheme.error)}"
@click="selectColorSetting('error')">'< / span > < span
:class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
:style="{ 'color': interpret_color(selectedColorScheme.quote)}"
@click="selectColorSetting('quote')">Errors are the portals to discovery< / span >
< br >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'comment'}"
:style="{ 'color': interpret_color(selectedColorScheme.comment)}"
@click="selectColorSetting('comment')"># This is a comment< / span >
< br >
< span :class = "{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
:style="{ 'color': interpret_color(selectedColorScheme.command)}"
@click="selectColorSetting('command')">Th< / span > < span class = "fake_cursor" > < span
style="visibility: hidden">i< / span > < / span > < span
:class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'autosuggestion'}"
:style="{ 'color': interpret_color(selectedColorScheme.autosuggestion)}"
@click="selectColorSetting('autosuggestion')">s is an autosuggestion< / span >
< div style = "position: absolute; right: 5px; bottom: 5px;" >
< button class = "customize_theme_button" :class = "{button_highlight: customizationActive}"
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
@click="toggleCustomizationActive">Customize< / button >
< button class = "save_button"
:style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
x-show="showSaveButton" @click="setTheme" x-text="saveThemeButtonTitle">< / button >
< / div >
< / div >
< div x-show = "customizationActive" >
< div style = "margin: 10px 0 7px 35px;" > Choose a color for < span
x-text="csUserVisibleTitle">< / span > :< / div >
<!-- TODO maybe add input[type=color] for 24bit terminals -->
< table class = "colorpicker_term256" style = "margin: 0px 20px;" >
< tbody >
< template x-for = "color_array in colorArraysArray" >
< tr class = "colorpicker_term256_row" >
< template x-for = "color in color_array" >
< td class = "colorpicker_term256_cell"
:style="{'background-color': interpret_color(color)}"
@click="changeSelectedTextColor(color)">
< div class = "colorpicker_term256_selection_indicator"
x-show="selectedColorScheme[selectedColorSetting] == color"
:style="{'border-color': interpret_color(border_color_for_color(color))}">
< / div >
< / td >
< / template >
< / tr >
< / template >
< / tbody >
<!-- /ko -->
< / table >
< / div >
< div style = "margin: 10px 0 7px 35px;" > Preview a theme below:< / div >
< div class = "color_scheme_choices_scrollview" >
< div class = "color_scheme_choices_list" >
< template x-for = "colorScheme in colorSchemes" >
< div class = "color_scheme_choice_container"
@click="changeSelectedColorScheme(colorScheme)">
< div class = "color_scheme_choice_label" >
<!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
< span x-text = "colorScheme.name" > < / span >
< a x-show = "colorScheme.url" style = "text-decoration: none; color: inherit;"
:href="colorScheme.url">➚ < / a >
< / div >
< div class = "colorpicker_text_sample_tight"
:style="{'background-color': colorScheme.preferred_background}">
< span
:style="{'color': interpret_color(colorScheme.command)}">/bright/vixens< / span >
< span :style = "{'color': interpret_color(colorScheme.param)}" > jump< / span >
< span :style = "{'color': interpret_color(colorScheme.end)}" > |< / span >
< span :style = "{'color': interpret_color(colorScheme.command)}" > dozy< / span >
< span :style = "{'color': interpret_color(colorScheme.quote)}" > "fowl" < / span >
< span :style = "{'color': interpret_color(colorScheme.redirection)}" > >
quack< / span >
< span :style = "{'color': interpret_color(colorScheme.end)}" > & < / span >
< br >
< span :style = "{'color': interpret_color(colorScheme.command)}" > echo< / span >
< span :style = "{'color': interpret_color(colorScheme.error)}" > '< / span > < span
:style="{'color': interpret_color(colorScheme.quote)}">Errors are the
portals to discovery< / span >
< br >
< span :style = "{'color': interpret_color(colorScheme.comment)}" > # This is a
comment< / span >
< br >
< span :style = "{'color': interpret_color(colorScheme.command)}" > Th< / span > < span
class="fake_cursor">< span style = "visibility: hidden" > i< / span > < / span > < span
:style="{ 'color': interpret_color(colorScheme.autosuggestion)}">s is an
autosuggestion< / span >
< / div >
< / div >
< / template >
< / div >
< / div >
<!-- /ko -->
< / div >
< / template >
2023-02-08 07:34:10 +08:00
<!-- Investigate potential race condition with selectedPrompt (e.g. replace x - if with x - show) -->
< template x-if = "currentTab === 'prompt'" x-data = "prompt" >
< div class = "height_limiter" >
<!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
< div class = "current_prompt" style = "min-height: 7.5em;"
:style="{'background-color': terminalBackgroundColor}">
< div class = "prompt_demo_choice_label" style = "color: #FFF;" x-text = "selectedPrompt.name" > < / div >
< div style = 'display: flex' >
< div x-html = 'selectedPrompt.demo' style = 'flex-grow: 1' class = "prompt_demo unbordered" > < / div >
< div x-if = 'selectedPrompt.right' title = "right prompt for {{selectedPrompt.name }}"
x-html='selectedPrompt.right' class="prompt_demo unbordered"
@click="selectPrompt(selectedPrompt)">
< / div >
< / div >
< div style = "position: absolute; right: 5px; bottom: 5px;" >
< button class = "save_button" x-show = "showSaveButton" style = "color: #CCC" @ click = "setPrompt()"
x-text="savePromptButtonTitle">< / button >
< / div >
< / div >
< div style = "margin: 10px 15px 7px 15px; padding-bottom: 10px; border-bottom: solid 1px #999" > Preview
a
prompt below:< / div >
< div class = "prompt_choices_scrollview" >
< div class = "prompt_choices_list" >
< template x-for = "p in samplePrompts" :key = "p.name" >
< div >
< div class = "prompt_demo_choice_label" x-text = "p.name" > < / div >
< template x-if = "p.right" >
< div style = "display: flex;" >
< div x-html = "p.demo" class = "prompt_demo" style = "flex-grow: 1"
@click="selectPrompt(p)">< / div >
< div title = "right prompt for {{p.name}}" x-html = "p.right || ''"
class="prompt_demo" @click="selectPrompt(p)">< / div >
< / div >
< / template >
< template x-if = "!p.right" >
< div x-html = "p.demo" class = "prompt_demo" @ click = "selectPrompt(p)" >
< / template >
< / div >
< / template >
< / div >
< / div >
< / div >
< / template >
< template x-if = "currentTab === 'functions'" x-data = "functions" >
< div class = "master_detail_table" >
< div class = "master" >
< template x-for = "func in functions" >
2023-02-08 23:08:10 +08:00
<!-- TODO use ul/li -->
2023-02-08 07:34:10 +08:00
< div >
< div id = "master_{{func}}"
:class="{'master_element': true, 'selected_master_elem': func == selectedFunction }"
@click="selectFunction(func)">
< span class = "master_element_text" x-text = "func" > < / span >
< / div >
< / div >
< / template >
< / div >
< div class = "detail" >
< div class = "detail_function" x-html = "functionDefinition" > < / div >
< / div >
< / div >
< / template >
< template x-if = "currentTab === 'variables'" x-data = "variables" >
< div >
< div id = "table_filter_container" >
< input id = "table_filter_text_box" class = "filter_text_box text_box_transient"
placeholder="Filter" x-model="query">
< / div >
< table class = "data_table" >
< template x-for = "v in filteredVars" :key = "v.name" >
< tr class = "data_table_row" tabindex = "0" x-data = "{ focused: false }"
@focusin="focused = true" @focusout="focused = false">
< td class = "data_table_cell no_overflow" style = "text-align: right; padding-right: 30px;"
x-text="v.name">< / td >
<!-- Small hack to select/unselect variables -->
< td :class = "{ 'data_table_cell': true, 'no_overflow': !focused }"
style="text-align: left; padding-right: 30px;" x-text="v.value">< / td >
< / tr >
< / template >
< / table >
< / div >
< / template >
< template x-if = "currentTab === 'history'" x-data = "history" >
< div >
< div id = "table_filter_container" >
< table class = "paginator" >
< tr >
< td :class = "{disabled: currentPage == 0}" class = "prev" >
< button type = "button" @ click = "prevPage" > « Prev< / a >
< / td >
< td class = "desc" x-text = "currentPageDescription" > < / td >
< td :class = "{disabled: currentPage * itemsPerPage >= filteredItems.length}"
class="next">
< button type = "button" @ click = "nextPage" > Next »< / a >
< / td >
< / tr >
< / table >
< input id = "table_filter_text_box" class = "filter_text_box text_box_transient"
placeholder="Filter" x-model.debounce="query">
< / div >
< table class = "data_table" >
<!-- TODO maybe use history index as keys here? -->
< template
x-for="item in filteredItems.slice(currentPage * itemsPerPage, (currentPage+1) * itemsPerPage)"
:key="item">
< tr >
< td :class = "{'history_text': true, 'no_overflow': selectedItems.indexOf(item) < 0}"
@click="selectItem(item)" x-text="item">< / td >
< td class = "history_delete" >
< button type = "button" class = "delete_icon"
@click="deleteHistoryItem(item)">❌< / button >
< / td >
< / tr >
< / template >
< / table >
< / div >
< / template >
< template x-if = "currentTab === 'bindings'" x-data = "bindings"
x-init="bindings = await (await fetch('bindings/')).json()">
< div >
< div id = "table_filter_container" >
< input id = "table_filter_text_box" class = "filter_text_box text_box_transient"
placeholder="Filter" x-model="query">
< / div >
< table class = "data_table" >
< template x-for = "b in filteredBindings" :key = "b.command" >
< tr class = "data_table_row" tabindex = "0" x-data = "{ focused: false }"
@focusin="focused = true" @focusout="focused = false">
< td :class = "{ 'data_table_cell': true, 'no_overflow': !focused }"
style="text-align: right; padding-right: 30px;" x-text="b.command">< / td >
<!-- Small hack to select/unselect variables -->
< td :class = "{ 'data_table_cell': true, 'no_overflow': !focused }"
style="text-align: left; padding-right: 30px;">
< template x-for = "variety in b.bindings" :key = "variety.readable_binding" >
< div >
< span x-text = "variety.readable_binding" > < / span >
< template x-for = "raw in variety.raw_bindings" :key = "raw" >
< div class = "raw_binding" x-show = "focused" x-text = "raw" > < / div >
< / template >
< / div >
< / template >
< / td >
< / tr >
< / template >
< / table >
< / div >
< / template >
< / div >
< / main >
2022-03-27 04:26:20 +08:00
< / body >
2023-02-08 07:34:10 +08:00
2022-03-27 04:26:20 +08:00
< / html >
