fish-shell/web_config/index.html
ridiculousfish c8bc535f22 Big improvement to web config history speed
Nice dashed table seprators
2012-03-19 11:51:44 -07:00

329 lines
8.6 KiB
HTML

<html>
<head>
<style type="text/css">
body {
background-color: #292929;
font-family: Courier, "Courier New", monospace;
color: white;
}
#ancestor {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
#parent {
width: 100%;
background-color: black;
min-height: 480px;
margin-top: 30px;
}
#tab_parent {
width: 100%;
}
.tab {
border-style: groove;
border-color: #292929;
border-width: 2px;
margin-left: -2px;
margin-right: -2px;
font-size: 17pt;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
width: 25%;
float: left;
background-color: #292929;
cursor: pointer;
}
.selected_tab {
background-color: inherit;
border-style: none;
margin-left: 0px;
margin-right: -1px;
}
.footer {
clear: both;
height: 30px;
}
#master {
float: left;
text-align: right;
min-width: 200px;
font-size: 16pt;
padding-top: 24px;
padding-right: 32px;
padding-left: 12px;
}
.master_element {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-size: 12pt;
}
.master_element_text {
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid white;
}
#colorpicker_term256 {
padding-top: 30px;
}
#data_table {
table-layout:fixed;
color: white;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
.data_table_row {
}
.data_table_cell {
padding-top: 5px;
padding-bottom: 5px;
overflow:hidden;
border-bottom: #444 dotted 1px;
}
.no_overflow {
text-overflow: ellipsis;
white-space: nowrap;
}
.colorpicker_term256_row {
}
.colorpicker_term256_cell {
width: 24;
height: 24;
}
.colorpicker_cell_selected {
border: solid white 3px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function request_failed() {
alert('Request failed');
}
/* Runs a GET request, parses the JSON, and invokes the handler for each element in it. The JSON result is assumed to be an array. */
function run_get_request(url, handler) {
$.ajax({
type: "GET",
url: url,
success: function(data){
$.each($.parseJSON(data), function(idx, contents) {
handler(contents)
})
},
fail: request_failed
})
}
function switch_tab(new_tab) {
/* Switch selected tab */
$(".selected_tab").removeClass("selected_tab")
$('#' + new_tab).addClass("selected_tab")
/* Empty master element */
$('#master').empty()
/* Hide some things */
$('#colorpicker_term256').hide()
$('#data_table').hide()
$('#data_table').empty()
/* Load something new */
if (new_tab == 'tab_colors') {
run_get_request('/colors/', function(contents){
var key = contents[0]
var value = contents[1]
create_master_element(key)
})
$('#colorpicker_term256').show()
} else if (new_tab == 'tab_functions') {
run_get_request('/functions/', function(contents){
create_master_element(contents)
})
$('#data_table').show()
} else if (new_tab == 'tab_variables') {
run_get_request('/variables/', function(contents){
var name = contents[0]
var value = contents[1]
var flags = contents[2]
create_data_table_element([name, value])
})
$('#data_table').show()
} else if (new_tab == 'tab_history') {
run_get_request('/history/', function(contents){
create_data_table_element([contents])
})
$('#data_table').show()
} else {
alert("Unknown tab");
}
return false
}
/* The first index here corresponds to value 16 */
term256_colors = ["ffd7d7", "d7afaf", "af8787", "875f5f", "ffafaf", "d78787", "af5f5f", "ff8787",
"d75f5f", "ff5f5f", "5f0000", "870000", "af0000", "d70000", "ff0000", "ff875f",
"ffaf87", "d7875f", "ff5f00", "d75f00", "ffd7af", "d7af87", "af875f", "ffaf5f",
"ff8700", "af5f00", "d78700", "ffd787", "d7af5f", "ffaf00", "875f00", "ffd75f",
"af8700", "d7af00", "ffd700", "ffffd7", "d7d7af", "afaf87", "87875f", "ffffaf",
"d7d787", "afaf5f", "ffff87", "d7d75f", "ffff5f", "5f5f00", "878700", "afaf00",
"d7d700", "ffff00", "d7ff00", "afd700", "87af00", "d7ff5f", "5f8700", "afff00",
"d7ff87", "afd75f", "87d700", "5faf00", "87ff00", "d7ffaf", "afd787", "87af5f",
"afff5f", "5fd700", "5fff00", "afff87", "87d75f", "87ff5f", "d7ffd7", "afd7af",
"87af87", "5f875f", "afffaf", "87d787", "5faf5f", "87ff87", "5fd75f", "5fff5f",
"005f00", "008700", "00af00", "00d700", "00ff00", "5fff87", "87ffaf", "5fd787",
"00ff5f", "00d75f", "afffd7", "87d7af", "5faf87", "5fffaf", "00ff87", "00af5f",
"00d787", "87ffd7", "5fd7af", "00ffaf", "00875f", "5fffd7", "00af87", "00d7af",
"00ffd7", "d7ffff", "afd7d7", "87afaf", "5f8787", "afffff", "87d7d7", "5fafaf",
"87ffff", "5fd7d7", "5fffff", "005f5f", "008787", "00afaf", "00d7d7", "00ffff",
"00d7ff", "00afd7", "0087af", "5fd7ff", "005f87", "00afff", "87d7ff", "5fafd7",
"0087d7", "005faf", "0087ff", "afd7ff", "87afd7", "5f87af", "5fafff", "005fd7",
"005fff", "87afff", "5f87d7", "5f87ff", "d7d7ff", "afafd7", "8787af", "5f5f87",
"afafff", "8787d7", "5f5faf", "8787ff", "5f5fd7", "5f5fff", "00005f", "000087",
"0000af", "0000d7", "0000ff", "875fff", "af87ff", "875fd7", "5f00ff", "5f00d7",
"d7afff", "af87d7", "875faf", "af5fff", "8700ff", "5f00af", "8700d7", "d787ff",
"af5fd7", "af00ff", "5f0087", "d75fff", "8700af", "af00d7", "d700ff", "ffd7ff",
"d7afd7", "af87af", "875f87", "ffafff", "d787d7", "af5faf", "ff87ff", "d75fd7",
"ff5fff", "5f005f", "870087", "af00af", "d700d7", "ff00ff", "ff00d7", "d700af",
"af0087", "ff5fd7", "87005f", "ff00af", "ff87d7", "d75faf", "d70087", "af005f",
"ff0087", "ffafd7", "d787af", "af5f87", "ff5faf", "d7005f", "ff005f", "ff87af",
"d75f87", "ff5f87", "000000", "080808", "121212", "1c1c1c", "262626", "303030",
"3a3a3a", "444444", "4e4e4e", "585858", "5f5f5f", "626262", "6c6c6c", "767676",
"808080", "878787", "8a8a8a", "949494", "9e9e9e", "a8a8a8", "afafaf", "b2b2b2",
"bcbcbc", "c6c6c6", "d0d0d0", "d7d7d7", "dadada", "e4e4e4", "eeeeee", "ffffff"]
var items_per_row = 16
/* Adds a new element to master */
function create_master_element(contents) {
$('<div/>', {
class: 'master_element',
click: function(){
$(this).toggleClass('master_element');
}
}).append(
$("<span/>", {
class: 'master_element_text',
text: contents
})
).appendTo('#master')
}
/* Toggle the no_overflow class */
function toggle_overflow(who) {
$(who).toggleClass('no_overflow')
}
/* Creates a new row in the data table */
function create_data_table_element(contents_list) {
var row = $('<tr>', {
class: 'data_table_row'
})
for (idx = 0; idx < contents_list.length; idx++) {
/* If we have more than one, then align the first one right, subsequent ones left */
if (idx == 0 && contents_list.length > 1) {
cell = $('<td>', {
class: 'data_table_cell no_overflow',
style: 'text-align: right; padding-right: 30px;'
});
} else {
cell = $('<td>', {
class: 'data_table_cell no_overflow',
style: 'text-align: left',
onClick: "toggle_overflow(this)"
});
}
text_list = contents_list[idx].split("\n")
for (j=0; j < text_list.length; j++) {
cell.append($('<p>', {
text: text_list[j]
}))
}
row.append(cell)
}
$('#data_table').append(row)
}
/* Put stuff in colorpicker_term256 */
function populate_colorpicker_term256() {
var idx
for (idx = 0; idx < term256_colors.length; idx += items_per_row) {
var row = $('<tr>', {
class: 'colorpicker_term256_row'
})
var subidx
for (subidx = 0; subidx < items_per_row && idx + subidx < term256_colors.length; subidx++) {
cell_style = 'background-color: #' + term256_colors[idx + subidx]
row.append($('<td>', {
class: 'colorpicker_term256_cell',
style: cell_style,
text: ''
}))
}
$('#colorpicker_term256').append(row)
}
}
$(document).ready(function() {
populate_colorpicker_term256()
switch_tab('tab_colors')
})
</script>
</head>
<body>
<div id="ancestor">
<span style="font-size: 68pt">fish</span>
<div id="parent">
<div id="tab_parent">
<div class="tab selected_tab" id="tab_colors" onClick="switch_tab('tab_colors')">colors</div>
<div class="tab" id="tab_functions" onClick="switch_tab('tab_functions')">functions</div>
<div class="tab" id="tab_variables" onClick="switch_tab('tab_variables')">variables</div>
<div class="tab" id="tab_history" onClick="switch_tab('tab_history')">history</div>
</div>
<div id="master">
<!--- <div class="master_element"><span class="master_element_text">command</span></div> -->
</div>
<table id="colorpicker_term256">
</table>
<table id="data_table">
<table>
<div class="footer">
</div>
</div>
</div>
<a id="thelink">Click me</a>
</body></html>