Moved all functions related to colors to a separate file

This commit is contained in:
Siteshwar Vashisht 2013-10-19 23:54:51 +05:30
parent 3d2315d596
commit 5d8c776250
4 changed files with 570 additions and 567 deletions

View File

@ -5,6 +5,7 @@
<title>fish shell configuration</title> <title>fish shell configuration</title>
<link rel="stylesheet" type="text/css" href="fishconfig.css"/> <link rel="stylesheet" type="text/css" href="fishconfig.css"/>
<script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="js/colorutils.js"></script>
<script type="text/javascript" src="js/filters.js"></script> <script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/controllers.js"></script> <script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>

View File

@ -0,0 +1,548 @@
term_256_colors = [ //247
"ffd7d7",
"d7afaf",
"af8787",
"875f5f",
"5f0000",
"870000",
"af0000",
"d70000",
"ff0000",
"ff5f5f",
"d75f5f",
"d78787",
"ff8787",
"ffafaf",
"ffaf87",
"ffaf5f",
"ffaf00",
"ff875f",
"ff8700",
"ff5f00",
"d75f00",
"af5f5f",
"af5f00",
"d78700",
"d7875f",
"af875f",
"af8700",
"875f00",
"d7af87",
"ffd7af",
"ffd787",
"ffd75f",
"d7af00",
"d7af5f",
"ffd700",
"ffff5f",
"ffff00",
"ffff87",
"ffffaf",
"ffffd7",
"d7ff00",
"afd75f",
"d7d700",
"d7d787",
"d7d7af",
"afaf87",
"87875f",
"5f5f00",
"878700",
"afaf00",
"afaf5f",
"d7d75f",
"d7ff5f",
"d7ff87",
"87ff00",
"afff00",
"afff5f",
"afd700",
"87d700",
"87af00",
"5f8700",
"87af5f",
"5faf00",
"afd787",
"d7ffd7",
"d7ffaf",
"afffaf",
"afff87",
"5fff00",
"5fd700",
"87d75f",
"5fd75f",
"87ff5f",
"5fff5f",
"87ff87",
"afd7af",
"87d787",
"87d7af",
"87af87",
"5f875f",
"5faf5f",
"005f00",
"008700",
"00af00",
"00d700",
"00ff00",
"00ff5f",
"5fff87",
"00ff87",
"87ffaf",
"afffd7",
"5fd787",
"00d75f",
"5faf87",
"00af5f",
"5fffaf",
"00ffaf",
"5fd7af",
"00d787",
"00875f",
"00af87",
"00d7af",
"5fffd7",
"87ffd7",
"00ffd7",
"d7ffff",
"afd7d7",
"87afaf",
"5f8787",
"5fafaf",
"87d7d7",
"5fd7d7",
"5fffff",
"00ffff",
"87ffff",
"afffff",
"00d7d7",
"00d7ff",
"5fd7ff",
"5fafd7",
"00afd7",
"00afff",
"0087af",
"00afaf",
"008787",
"005f5f",
"005f87",
"0087d7",
"0087ff",
"5fafff",
"87afff",
"5f87d7",
"5f87ff",
"005fd7",
"005fff",
"005faf",
"5f87af",
"87afd7",
"afd7ff",
"87d7ff",
"d7d7ff",
"afafd7",
"8787af",
"afafff",
"8787d7",
"8787ff",
"5f5fff",
"5f5fd7",
"5f5faf",
"5f5f87",
"00005f",
"000087",
"0000af",
"0000d7",
"0000ff",
"5f00ff",
"5f00d7",
"5f00af",
"5f0087",
"8700af",
"8700d7",
"8700ff",
"af00ff",
"af00d7",
"d700ff",
"d75fff",
"d787ff",
"ffafd7",
"ffafff",
"ffd7ff",
"d7afff",
"d7afd7",
"af87af",
"af87d7",
"af87ff",
"875fd7",
"875faf",
"875fff",
"af5fff",
"af5fd7",
"af5faf",
"d75fd7",
"d787d7",
"ff87ff",
"ff5fff",
"ff5fd7",
"ff00ff",
"ff00af",
"ff00d7",
"d700af",
"d700d7",
"af00af",
"870087",
"5f005f",
"87005f",
"af005f",
"af0087",
"d70087",
"d7005f",
"ff0087",
"ff005f",
"ff5f87",
"d75f87",
"d75faf",
"ff5faf",
"ff87af",
"ff87d7",
"d787af",
"af5f87",
"875f87",
"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",
]
/* Returns array of values from a dictionary (or any object) */
function dict_values(dict) {
var result = [];
for (var i in dict) result.push(dict[i]);
return result;
}
/* Return the array of colors as an array of N arrays of length items_per_row */
function get_colors_as_nested_array(colors, items_per_row) {
var result = new Array();
for (var idx = 0; idx < colors.length; idx += items_per_row) {
var row = new Array();
for (var subidx = 0; subidx < items_per_row && idx + subidx < colors.length; subidx++) {
row.push(colors[idx + subidx]);
}
result.push(row);
}
return result;
}
/* Given an RGB color as a hex string, like FF0033, convert to HSL, apply the function to adjust its lightness, then return the new color as an RGB string */
function adjust_lightness(color_str, func) {
/* Hack to handle for example F00 */
if (color_str.length == 3) {
color_str = color_str[0] + color_str[0] + color_str[1] + color_str[1] + color_str[2] + color_str[2]
}
/* More hacks */
if (color_str == 'black') color_str = '000000';
if (color_str == 'white') color_str = 'FFFFFF';
rgb = parseInt(color_str, 16)
r = (rgb >> 16) & 0xFF
g = (rgb >> 8) & 0xFF
b = (rgb >> 0) & 0xFF
hsl = rgb_to_hsl(r, g, b)
new_lightness = func(hsl[2])
function to_int_str(val) {
str = Math.round(val).toString(16)
while (str.length < 2)
str = '0' + str
return str
}
new_rgb = hsl_to_rgb(hsl[0], hsl[1], new_lightness)
return to_int_str(new_rgb[0]) + to_int_str(new_rgb[1]) + to_int_str(new_rgb[2])
}
/* Given a color, compute a "border color" for it that can show it selected */
function border_color_for_color(color_str) {
return $scope.adjust_lightness(color_str, function(lightness){
var adjust = .5
var new_lightness = lightness + adjust
if (new_lightness > 1.0 || new_lightness < 0.0) {
new_lightness -= 2 * adjust
}
return new_lightness
})
}
/* Use this function to make a color that contrasts well with the given color */
function text_color_for_color(color_str) {
var adjust = .5
function compute_constrast(lightness){
var new_lightness = lightness + adjust
if (new_lightness > 1.0 || new_lightness < 0.0) {
new_lightness -= 2 * adjust
}
return new_lightness
}
return $scope.adjust_lightness(color_str, compute_constrast);
}
var color_scheme_fish_default = {
"name": "fish default",
"colors": [],
'preferred_background': 'black',
'autosuggestion': '555',
'command': '005fd7',
'param': '00afff',
'redirection': '00afff',
'comment': '990000',
'error': 'ff0000',
'escape': '00a6b2',
'operator': '00a6b2',
'quote': '999900',
'end': '009900'
};
var TomorrowTheme = {
tomorrow_night: {'Background': '1d1f21', 'Current Line': '282a2e', 'Selection': '373b41', 'Foreground': 'c5c8c6', 'Comment': '969896', 'Red': 'cc6666', 'Orange': 'de935f', 'Yellow': 'f0c674', 'Green': 'b5bd68', 'Aqua': '8abeb7', 'Blue': '81a2be', 'Purple': 'b294bb'
},
tomorrow: {'Background': 'ffffff', 'Current Line': 'efefef', 'Selection': 'd6d6d6', 'Foreground': '4d4d4c', 'Comment': '8e908c', 'Red': 'c82829', 'Orange': 'f5871f', 'Yellow': 'eab700', 'Green': '718c00', 'Aqua': '3e999f', 'Blue': '4271ae', 'Purple': '8959a8'
},
tomorrow_night_bright: {'Background': '000000', 'Current Line': '2a2a2a', 'Selection': '424242', 'Foreground': 'eaeaea', 'Comment': '969896', 'Red': 'd54e53', 'Orange': 'e78c45', 'Yellow': 'e7c547', 'Green': 'b9ca4a', 'Aqua': '70c0b1', 'Blue': '7aa6da', 'Purple': 'c397d8'},
apply: function(theme, receiver){
receiver['autosuggestion'] = theme['Comment']
receiver['command'] = theme['Purple']
receiver['comment'] = theme['Yellow'] /* we want to use comment for autosuggestions */
receiver['end'] = theme['Purple']
receiver['error'] = theme['Red']
receiver['param'] = theme['Blue']
receiver['quote'] = theme['Green']
receiver['redirection'] = theme['Aqua']
receiver['colors'] = []
for (var key in theme) receiver['colors'].push(theme[key])
}
}
var solarized = {
base03: '002b36', base02: '073642', base01: '586e75', base00: '657b83', base0: '839496', base1: '93a1a1', base2: 'eee8d5', base3: 'fdf6e3', yellow: 'b58900', orange: 'cb4b16', red: 'dc322f', magenta: 'd33682', violet: '6c71c4', blue: '268bd2', cyan: '2aa198', green: '859900'
};
/* Sample color schemes */
var color_scheme_solarized_light = {
name: "Solarized Light",
colors: dict_values(solarized),
preferred_background: '#' + solarized.base3,
autosuggestion: solarized.base1,
command: solarized.base01,
comment: solarized.base1,
end: solarized.blue,
error: solarized.red,
param: solarized.base00,
quote: solarized.base0,
redirection: solarized.violet,
url: 'http://ethanschoonover.com/solarized'
};
var color_scheme_solarized_dark = {
name: "Solarized Dark",
colors: dict_values(solarized),
preferred_background: '#' + solarized.base03,
autosuggestion: solarized.base01,
command: solarized.base1,
comment: solarized.base01,
end: solarized.blue,
error: solarized.red,
param: solarized.base0,
quote: solarized.base00,
redirection: solarized.violet,
url: 'http://ethanschoonover.com/solarized'
};
var color_scheme_tomorrow = {
name: 'Tomorrow',
preferred_background: 'white',
url: 'https://github.com/chriskempson/tomorrow-theme'
}
TomorrowTheme.apply(TomorrowTheme.tomorrow, color_scheme_tomorrow)
var color_scheme_tomorrow_night = {
name: 'Tomorrow Night',
preferred_background: '#232323',
url: 'https://github.com/chriskempson/tomorrow-theme'
}
TomorrowTheme.apply(TomorrowTheme.tomorrow_night, color_scheme_tomorrow_night)
var color_scheme_tomorrow_night_bright = {
'name': 'Tomorrow Night Bright',
'preferred_background': 'black',
'url': 'https://github.com/chriskempson/tomorrow-theme',
}
TomorrowTheme.apply(TomorrowTheme.tomorrow_night_bright, color_scheme_tomorrow_night_bright)
function construct_scheme_analogous(label, background, color_list) {
return {
name: label,
preferred_background: background,
colors: color_list,
command: color_list[0],
quote: color_list[6],
param: color_list[5],
autosuggestion: color_list[4],
error: color_list[9],
comment: color_list[12],
end: color_list[10],
redirection: color_list[11]
};
}
function construct_scheme_triad(label, background, color_list) {
return {
name: label,
preferred_background: background,
colors: color_list,
command: color_list[0],
quote: color_list[2],
param: color_list[1],
autosuggestion: color_list[3],
redirection: color_list[4],
error: color_list[8],
comment: color_list[10],
end: color_list[7],
};
}
function construct_scheme_complementary(label, background, color_list) {
return {
name: label,
preferred_background: background,
colors: color_list,
command: color_list[0],
quote: color_list[4],
param: color_list[3],
autosuggestion: color_list[2],
redirection: color_list[6],
error: color_list[5],
comment: color_list[8],
end: color_list[9],
};
}
function construct_color_scheme_mono(label, background, from_end) {
var mono_colors = ['000000', '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'];
if (from_end) mono_colors.reverse();
return {
name: label,
preferred_background: background,
colors: mono_colors,
autosuggestion: '777777',
command: mono_colors[0],
comment: mono_colors[7],
end: mono_colors[12],
error: mono_colors[20],
param: mono_colors[4],
quote: mono_colors[10],
redirection: mono_colors[15]
};
}
var additional_color_schemes = [
construct_scheme_analogous('Snow Day', 'white', ['164CC9', '325197', '072D83', '4C7AE4', '7596E4', '4319CC', '4C3499', '260885', '724EE5', '9177E5', '02BDBD', '248E8E', '007B7B', '39DEDE', '65DEDE']),
construct_scheme_analogous('Lava', '#232323', ['FF9400', 'BF8330', 'A66000', 'FFAE40', 'FFC473', 'FFC000', 'BF9C30', 'A67D00', 'FFD040', 'FFDD73', 'FF4C00', 'BF5B30', 'A63100', 'FF7940', 'FF9D73']),
construct_scheme_analogous('Seaweed', '#232323', ['00BF32', '248F40', '007C21', '38DF64', '64DF85', '04819E', '206676', '015367', '38B2CE', '60B9CE', '8EEB00', '7CB02C', '5C9900', 'ACF53D', 'C0F56E']),
construct_scheme_triad('Fairground', '#003', ['0772A1', '225E79', '024A68', '3BA3D0', '63AFD0', 'D9005B', 'A3295C', '8D003B', 'EC3B86', 'EC6AA1', 'FFE100', 'BFAE30', 'A69200', 'FFE840', 'FFEE73']),
construct_scheme_complementary('Bay Cruise', 'black', ['009999', '1D7373', '006363', '33CCCC', '5CCCCC', 'FF7400', 'BF7130', 'A64B00', 'FF9640', 'FFB273']),
{
'name': 'Old School',
'preferred_background': 'black',
colors: ['00FF00', '30BE30', '00A400', '44FF44', '7BFF7B', 'FF0000', 'BE3030', 'A40000', 'FF7B7B', '777777', 'CCCCCC'],
autosuggestion: '777777',
command: '00FF00',
comment: '30BE30',
end: 'FF7B7B',
error: 'A40000',
param: '30BE30',
quote: '44FF44',
redirection: '7BFF7B'
},
{
'name': 'Just a Touch',
'preferred_background': 'black',
colors: ['B0B0B0', '969696', '789276', 'F4F4F4', 'A0A0F0', '666A80', 'F0F0F0', 'D7D7D7', 'B7B7B7', 'FFA779', 'FAFAFA'],
autosuggestion: '9C9C9C',
command: 'F4F4F4',
comment: 'B0B0B0',
end: '969696',
error: 'FFA779',
param: 'A0A0F0',
quote: '666A80',
redirection: 'FAFAFA'
},
construct_color_scheme_mono('Mono Lace', 'white', false),
construct_color_scheme_mono('Mono Smoke', 'black', true)
];

View File

@ -7,327 +7,10 @@ controllers.controller("main", function($scope, $location) {
$location.path(view); $location.path(view);
$scope.currentTab = view; $scope.currentTab = view;
} }
}) })
controllers.controller("colorsController", function($scope, $http) { controllers.controller("colorsController", function($scope, $http) {
$scope.term256Colors = [ //247
"ffd7d7",
"d7afaf",
"af8787",
"875f5f",
"5f0000",
"870000",
"af0000",
"d70000",
"ff0000",
"ff5f5f",
"d75f5f",
"d78787",
"ff8787",
"ffafaf",
"ffaf87",
"ffaf5f",
"ffaf00",
"ff875f",
"ff8700",
"ff5f00",
"d75f00",
"af5f5f",
"af5f00",
"d78700",
"d7875f",
"af875f",
"af8700",
"875f00",
"d7af87",
"ffd7af",
"ffd787",
"ffd75f",
"d7af00",
"d7af5f",
"ffd700",
"ffff5f",
"ffff00",
"ffff87",
"ffffaf",
"ffffd7",
"d7ff00",
"afd75f",
"d7d700",
"d7d787",
"d7d7af",
"afaf87",
"87875f",
"5f5f00",
"878700",
"afaf00",
"afaf5f",
"d7d75f",
"d7ff5f",
"d7ff87",
"87ff00",
"afff00",
"afff5f",
"afd700",
"87d700",
"87af00",
"5f8700",
"87af5f",
"5faf00",
"afd787",
"d7ffd7",
"d7ffaf",
"afffaf",
"afff87",
"5fff00",
"5fd700",
"87d75f",
"5fd75f",
"87ff5f",
"5fff5f",
"87ff87",
"afd7af",
"87d787",
"87d7af",
"87af87",
"5f875f",
"5faf5f",
"005f00",
"008700",
"00af00",
"00d700",
"00ff00",
"00ff5f",
"5fff87",
"00ff87",
"87ffaf",
"afffd7",
"5fd787",
"00d75f",
"5faf87",
"00af5f",
"5fffaf",
"00ffaf",
"5fd7af",
"00d787",
"00875f",
"00af87",
"00d7af",
"5fffd7",
"87ffd7",
"00ffd7",
"d7ffff",
"afd7d7",
"87afaf",
"5f8787",
"5fafaf",
"87d7d7",
"5fd7d7",
"5fffff",
"00ffff",
"87ffff",
"afffff",
"00d7d7",
"00d7ff",
"5fd7ff",
"5fafd7",
"00afd7",
"00afff",
"0087af",
"00afaf",
"008787",
"005f5f",
"005f87",
"0087d7",
"0087ff",
"5fafff",
"87afff",
"5f87d7",
"5f87ff",
"005fd7",
"005fff",
"005faf",
"5f87af",
"87afd7",
"afd7ff",
"87d7ff",
"d7d7ff",
"afafd7",
"8787af",
"afafff",
"8787d7",
"8787ff",
"5f5fff",
"5f5fd7",
"5f5faf",
"5f5f87",
"00005f",
"000087",
"0000af",
"0000d7",
"0000ff",
"5f00ff",
"5f00d7",
"5f00af",
"5f0087",
"8700af",
"8700d7",
"8700ff",
"af00ff",
"af00d7",
"d700ff",
"d75fff",
"d787ff",
"ffafd7",
"ffafff",
"ffd7ff",
"d7afff",
"d7afd7",
"af87af",
"af87d7",
"af87ff",
"875fd7",
"875faf",
"875fff",
"af5fff",
"af5fd7",
"af5faf",
"d75fd7",
"d787d7",
"ff87ff",
"ff5fff",
"ff5fd7",
"ff00ff",
"ff00af",
"ff00d7",
"d700af",
"d700d7",
"af00af",
"870087",
"5f005f",
"87005f",
"af005f",
"af0087",
"d70087",
"d7005f",
"ff0087",
"ff005f",
"ff5f87",
"d75f87",
"d75faf",
"ff5faf",
"ff87af",
"ff87d7",
"d787af",
"af5f87",
"875f87",
"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",
]
/* Returns array of values from a dictionary (or any object) */
function dict_values(dict) {
var result = [];
for (var i in dict) result.push(dict[i]);
return result;
}
/* Return the array of colors as an array of N arrays of length items_per_row */
function get_colors_as_nested_array(colors, items_per_row) {
var result = new Array();
for (var idx = 0; idx < colors.length; idx += items_per_row) {
var row = new Array();
for (var subidx = 0; subidx < items_per_row && idx + subidx < colors.length; subidx++) {
row.push(colors[idx + subidx]);
}
result.push(row);
}
return result;
}
/* Given an RGB color as a hex string, like FF0033, convert to HSL, apply the function to adjust its lightness, then return the new color as an RGB string */
$scope.adjust_lightness = function(color_str, func) {
/* Hack to handle for example F00 */
if (color_str.length == 3) {
color_str = color_str[0] + color_str[0] + color_str[1] + color_str[1] + color_str[2] + color_str[2]
}
/* More hacks */
if (color_str == 'black') color_str = '000000';
if (color_str == 'white') color_str = 'FFFFFF';
rgb = parseInt(color_str, 16)
r = (rgb >> 16) & 0xFF
g = (rgb >> 8) & 0xFF
b = (rgb >> 0) & 0xFF
hsl = rgb_to_hsl(r, g, b)
new_lightness = func(hsl[2])
function to_int_str(val) {
str = Math.round(val).toString(16)
while (str.length < 2)
str = '0' + str
return str
}
new_rgb = hsl_to_rgb(hsl[0], hsl[1], new_lightness)
return to_int_str(new_rgb[0]) + to_int_str(new_rgb[1]) + to_int_str(new_rgb[2])
}
/* Given a color, compute a "border color" for it that can show it selected */
$scope.border_color_for_color = function (color_str) {
return $scope.adjust_lightness(color_str, function(lightness){
var adjust = .5
var new_lightness = lightness + adjust
if (new_lightness > 1.0 || new_lightness < 0.0) {
new_lightness -= 2 * adjust
}
return new_lightness
})
}
$scope.text_color_for_color = function (color_str) {
/* Use this function to make a color that contrasts well with the given color */
var adjust = .5
function compute_constrast(lightness){
var new_lightness = lightness + adjust
if (new_lightness > 1.0 || new_lightness < 0.0) {
new_lightness -= 2 * adjust
}
return new_lightness
}
return $scope.adjust_lightness(color_str, compute_constrast);
}
$scope.changeSelectedColorScheme= function(newScheme) { $scope.changeSelectedColorScheme= function(newScheme) {
$scope.selectedColorScheme = newScheme; $scope.selectedColorScheme = newScheme;
if ($scope.selectedColorScheme.preferred_background) { if ($scope.selectedColorScheme.preferred_background) {
@ -348,7 +31,7 @@ controllers.controller("colorsController", function($scope, $http) {
if ($scope.selectedColorScheme.colors.length > 0) if ($scope.selectedColorScheme.colors.length > 0)
result = get_colors_as_nested_array($scope.selectedColorScheme.colors, 32); result = get_colors_as_nested_array($scope.selectedColorScheme.colors, 32);
else else
result = get_colors_as_nested_array($scope.term256Colors, 32); result = get_colors_as_nested_array(term_256_colors, 32);
return result; return result;
} }
@ -360,245 +43,14 @@ controllers.controller("colorsController", function($scope, $http) {
$scope.selectedColorScheme[$scope.selectedColorSetting] = color; $scope.selectedColorScheme[$scope.selectedColorSetting] = color;
} }
var color_scheme_fish_default = {
"name": "fish default",
"colors": [],
'preferred_background': 'black',
'autosuggestion': '555',
'command': '005fd7',
'param': '00afff',
'redirection': '00afff',
'comment': '990000',
'error': 'ff0000',
'escape': '00a6b2',
'operator': '00a6b2',
'quote': '999900',
'end': '009900'
};
var TomorrowTheme = {
tomorrow_night: {'Background': '1d1f21', 'Current Line': '282a2e', 'Selection': '373b41', 'Foreground': 'c5c8c6', 'Comment': '969896', 'Red': 'cc6666', 'Orange': 'de935f', 'Yellow': 'f0c674', 'Green': 'b5bd68', 'Aqua': '8abeb7', 'Blue': '81a2be', 'Purple': 'b294bb'
},
tomorrow: {'Background': 'ffffff', 'Current Line': 'efefef', 'Selection': 'd6d6d6', 'Foreground': '4d4d4c', 'Comment': '8e908c', 'Red': 'c82829', 'Orange': 'f5871f', 'Yellow': 'eab700', 'Green': '718c00', 'Aqua': '3e999f', 'Blue': '4271ae', 'Purple': '8959a8'
},
tomorrow_night_bright: {'Background': '000000', 'Current Line': '2a2a2a', 'Selection': '424242', 'Foreground': 'eaeaea', 'Comment': '969896', 'Red': 'd54e53', 'Orange': 'e78c45', 'Yellow': 'e7c547', 'Green': 'b9ca4a', 'Aqua': '70c0b1', 'Blue': '7aa6da', 'Purple': 'c397d8'},
apply: function(theme, receiver){
receiver['autosuggestion'] = theme['Comment']
receiver['command'] = theme['Purple']
receiver['comment'] = theme['Yellow'] /* we want to use comment for autosuggestions */
receiver['end'] = theme['Purple']
receiver['error'] = theme['Red']
receiver['param'] = theme['Blue']
receiver['quote'] = theme['Green']
receiver['redirection'] = theme['Aqua']
receiver['colors'] = []
for (var key in theme) receiver['colors'].push(theme[key])
}
}
var solarized = {
base03: '002b36', base02: '073642', base01: '586e75', base00: '657b83', base0: '839496', base1: '93a1a1', base2: 'eee8d5', base3: 'fdf6e3', yellow: 'b58900', orange: 'cb4b16', red: 'dc322f', magenta: 'd33682', violet: '6c71c4', blue: '268bd2', cyan: '2aa198', green: '859900'
};
/* Sample color schemes */
var color_scheme_solarized_light = {
name: "Solarized Light",
colors: dict_values(solarized),
preferred_background: '#' + solarized.base3,
autosuggestion: solarized.base1,
command: solarized.base01,
comment: solarized.base1,
end: solarized.blue,
error: solarized.red,
param: solarized.base00,
quote: solarized.base0,
redirection: solarized.violet,
url: 'http://ethanschoonover.com/solarized'
};
var color_scheme_solarized_dark = {
name: "Solarized Dark",
colors: dict_values(solarized),
preferred_background: '#' + solarized.base03,
autosuggestion: solarized.base01,
command: solarized.base1,
comment: solarized.base01,
end: solarized.blue,
error: solarized.red,
param: solarized.base0,
quote: solarized.base00,
redirection: solarized.violet,
url: 'http://ethanschoonover.com/solarized'
};
var color_scheme_tomorrow = {
name: 'Tomorrow',
preferred_background: 'white',
url: 'https://github.com/chriskempson/tomorrow-theme'
}
TomorrowTheme.apply(TomorrowTheme.tomorrow, color_scheme_tomorrow)
var color_scheme_tomorrow_night = {
name: 'Tomorrow Night',
preferred_background: '#232323',
url: 'https://github.com/chriskempson/tomorrow-theme'
}
TomorrowTheme.apply(TomorrowTheme.tomorrow_night, color_scheme_tomorrow_night)
var color_scheme_tomorrow_night_bright = {
'name': 'Tomorrow Night Bright',
'preferred_background': 'black',
'url': 'https://github.com/chriskempson/tomorrow-theme',
}
TomorrowTheme.apply(TomorrowTheme.tomorrow_night_bright, color_scheme_tomorrow_night_bright)
function construct_scheme_analogous(label, background, color_list) {
return {
name: label,
preferred_background: background,
colors: color_list,
command: color_list[0],
quote: color_list[6],
param: color_list[5],
autosuggestion: color_list[4],
error: color_list[9],
comment: color_list[12],
end: color_list[10],
redirection: color_list[11]
};
}
function construct_scheme_triad(label, background, color_list) {
return {
name: label,
preferred_background: background,
colors: color_list,
command: color_list[0],
quote: color_list[2],
param: color_list[1],
autosuggestion: color_list[3],
redirection: color_list[4],
error: color_list[8],
comment: color_list[10],
end: color_list[7],
};
}
function construct_scheme_complementary(label, background, color_list) {
return {
name: label,
preferred_background: background,
colors: color_list,
command: color_list[0],
quote: color_list[4],
param: color_list[3],
autosuggestion: color_list[2],
redirection: color_list[6],
error: color_list[5],
comment: color_list[8],
end: color_list[9],
};
}
function construct_color_scheme_mono(label, background, from_end) {
var mono_colors = ['000000', '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'];
if (from_end) mono_colors.reverse();
return {
name: label,
preferred_background: background,
colors: mono_colors,
autosuggestion: '777777',
command: mono_colors[0],
comment: mono_colors[7],
end: mono_colors[12],
error: mono_colors[20],
param: mono_colors[4],
quote: mono_colors[10],
redirection: mono_colors[15]
};
}
var additional_color_schemes = [
construct_scheme_analogous('Snow Day', 'white', ['164CC9', '325197', '072D83', '4C7AE4', '7596E4', '4319CC', '4C3499', '260885', '724EE5', '9177E5', '02BDBD', '248E8E', '007B7B', '39DEDE', '65DEDE']),
construct_scheme_analogous('Lava', '#232323', ['FF9400', 'BF8330', 'A66000', 'FFAE40', 'FFC473', 'FFC000', 'BF9C30', 'A67D00', 'FFD040', 'FFDD73', 'FF4C00', 'BF5B30', 'A63100', 'FF7940', 'FF9D73']),
construct_scheme_analogous('Seaweed', '#232323', ['00BF32', '248F40', '007C21', '38DF64', '64DF85', '04819E', '206676', '015367', '38B2CE', '60B9CE', '8EEB00', '7CB02C', '5C9900', 'ACF53D', 'C0F56E']),
construct_scheme_triad('Fairground', '#003', ['0772A1', '225E79', '024A68', '3BA3D0', '63AFD0', 'D9005B', 'A3295C', '8D003B', 'EC3B86', 'EC6AA1', 'FFE100', 'BFAE30', 'A69200', 'FFE840', 'FFEE73']),
construct_scheme_complementary('Bay Cruise', 'black', ['009999', '1D7373', '006363', '33CCCC', '5CCCCC', 'FF7400', 'BF7130', 'A64B00', 'FF9640', 'FFB273']),
{
'name': 'Old School',
'preferred_background': 'black',
colors: ['00FF00', '30BE30', '00A400', '44FF44', '7BFF7B', 'FF0000', 'BE3030', 'A40000', 'FF7B7B', '777777', 'CCCCCC'],
autosuggestion: '777777',
command: '00FF00',
comment: '30BE30',
end: 'FF7B7B',
error: 'A40000',
param: '30BE30',
quote: '44FF44',
redirection: '7BFF7B'
},
{
'name': 'Just a Touch',
'preferred_background': 'black',
colors: ['B0B0B0', '969696', '789276', 'F4F4F4', 'A0A0F0', '666A80', 'F0F0F0', 'D7D7D7', 'B7B7B7', 'FFA779', 'FAFAFA'],
autosuggestion: '9C9C9C',
command: 'F4F4F4',
comment: 'B0B0B0',
end: '969696',
error: 'FFA779',
param: 'A0A0F0',
quote: '666A80',
redirection: 'FAFAFA'
},
construct_color_scheme_mono('Mono Lace', 'white', false),
construct_color_scheme_mono('Mono Smoke', 'black', true)
];
$scope.sampleTerminalBackgroundColors = ['white', '#' + solarized.base3, '#300', '#003', '#' + solarized.base03, '#232323', 'black']; $scope.sampleTerminalBackgroundColors = ['white', '#' + solarized.base3, '#300', '#003', '#' + solarized.base03, '#232323', 'black'];
/* Array of FishColorSchemes */ /* Array of FishColorSchemes */
$scope.color_schemes = [color_scheme_fish_default, color_scheme_solarized_light, color_scheme_solarized_dark, color_scheme_tomorrow, color_scheme_tomorrow_night, color_scheme_tomorrow_night_bright]; $scope.colorSchemes = [color_scheme_fish_default, color_scheme_solarized_light, color_scheme_solarized_dark, color_scheme_tomorrow, color_scheme_tomorrow_night, color_scheme_tomorrow_night_bright];
for (var i=0; i < additional_color_schemes.length; i++) for (var i=0; i < additional_color_schemes.length; i++)
$scope.color_schemes.push(additional_color_schemes[i]) $scope.colorSchemes.push(additional_color_schemes[i])
$scope.changeSelectedColorScheme($scope.color_schemes[0]); $scope.changeSelectedColorScheme($scope.colorSchemes[0]);
$scope.color_settings = $scope.color_schemes.colors;
$scope.setTheme = function() { $scope.setTheme = function() {
var settingNames = ["autosuggestion", "command", "param", "redirection", "comment", "error", "quote", "end"]; var settingNames = ["autosuggestion", "command", "param", "redirection", "comment", "error", "quote", "end"];
@ -732,6 +184,8 @@ controllers.controller("historyController", function($scope, $http, $timeout) {
$http.get("/history/").success(function(data, status, headers, config) { $http.get("/history/").success(function(data, status, headers, config) {
$scope.historySize = data.length; $scope.historySize = data.length;
$scope.remainingItems = data; $scope.remainingItems = data;
/* Call this function 10 times/second */
$timeout($scope.loadHistory, 100); $timeout($scope.loadHistory, 100);
})}; })};

View File

@ -37,26 +37,26 @@
</table> </table>
<div class="color_scheme_choices_list"> <div class="color_scheme_choices_list">
<div class="color_scheme_choice_container" data-ng-repeat="color_scheme in color_schemes" ng-click="changeSelectedColorScheme(color_scheme)"> <div class="color_scheme_choice_container" data-ng-repeat="colorScheme in colorSchemes" ng-click="changeSelectedColorScheme(colorScheme)">
<div class="color_scheme_choice_label"> <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 --> <!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
<span>{{color_scheme.name }}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a--> <span>{{colorScheme.name }}</span><!--a data-bind="if: $data.url, click: function(){return true;}, clickBubble: false, attr: { href: $data.url}"><img class="external_link_img" src="external_link.png"></a-->
</div> </div>
<div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': color_scheme.preferred_background}"> <div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': colorScheme.preferred_background}">
<span data-ng-style="{'color': color_scheme.command}">/bright/vixens</span> <span data-ng-style="{'color': colorScheme.command}">/bright/vixens</span>
<span data-ng-style="{'color': color_scheme.param}">jump</span> <span data-ng-style="{'color': colorScheme.param}">jump</span>
<span data-ng-style="{'color': color_scheme.end}">|</span> <span data-ng-style="{'color': colorScheme.end}">|</span>
<span data-ng-style="{'color': color_scheme.command}">dozy</span> <span data-ng-style="{'color': colorScheme.command}">dozy</span>
<span data-ng-style="{'color': color_scheme.quote}"> "fowl" </span> <span data-ng-style="{'color': colorScheme.quote}"> "fowl" </span>
<span data-ng-style="{'color': color_scheme.redirection}">&gt; quack</span> <span data-ng-style="{'color': colorScheme.redirection}">&gt; quack</span>
<span data-ng-style="{'color': color_scheme.end}">&</span> <span data-ng-style="{'color': colorScheme.end}">&</span>
<br> <br>
<span data-ng-style="{'color': color_scheme.command}">echo</span> <span data-ng-style="{'color': colorScheme.command}">echo</span>
<span data-ng-style="{'color': color_scheme.error}">'Errors are the portals to discovery</span> <span data-ng-style="{'color': colorScheme.error}">'Errors are the portals to discovery</span>
<br> <br>
<span data-ng-style="{ 'color': color_scheme.comment}"># This is a comment</span> <span data-ng-style="{ 'color': colorScheme.comment}"># This is a comment</span>
<br> <br>
<span data-ng-style="{ 'color': color_scheme.command}">Th</span><span data-ng-style="{ 'color': color_scheme.autosuggestion}"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span> <span data-ng-style="{ 'color': colorScheme.command}">Th</span><span data-ng-style="{ 'color': colorScheme.autosuggestion}"><span class="fake_cursor"><span style="visibility: hidden">i</span></span>s is an autosuggestion</span>
</div> </div>
</div> </div>
</div> </div>