Skip to content

Commit

Permalink
dynamically gen _header CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@garykac
garykac committed Oct 25, 2018
1 parent 01f43e9 commit afcdeb8
Show file tree
Hide file tree
Showing 14 changed files with 142 additions and 166 deletions.
24 changes: 0 additions & 24 deletions focus-event-viewer.css
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,3 @@
.etype_header {
background-color: #e0e0e0;
font-weight: bold;
border: 1px solid black;
}

.target_header {
background-color: #ffffc0;
font-weight: bold;
border: 1px solid black;
}

.focusevent_header {
background-color: #c0ffff;
font-weight: bold;
border: 1px solid black;
}

.handler_header {
background-color: #c0c0ff;
font-weight: bold;
border: 1px solid black;
}

.hilite_target_a {
background-color: #c0ffc0;
padding: 0 10px;
Expand Down
2 changes: 1 addition & 1 deletion focus-event-viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
<script type="text/javascript" src="options.js" ></script>
<script type="text/javascript" src="shared.js" ></script>
<script type="text/javascript" src="focus-event-viewer.js" ></script>
<style title="inject"></style>
<link rel="stylesheet" type="text/css" href="focus-event-viewer.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
<style title="inject"></style>

</head>

Expand Down
24 changes: 18 additions & 6 deletions focus-event-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,40 @@ var _focus_table_info = [
["", "etype", [
["#", "etype", "text"],
["Event type", "etype", "html"],
], {'grouplabel': false}],
], {
'grouplabel': false,
'header-background': "#e0e0e0"
}],

// MouseEvent - Target
// Event - Target
["Target", "target", [
["A", "target", "text", {'style': 'hilite_target_a'}],
["B", "target", "text", {'style': 'hilite_target_b'}],
["Outer", "target", "text", {'style': 'hilite_target_outer'}],
], {'checked': true}],
], {
'checked': true,
'header-background': "#ffffc0"
}],

// FocusEvent - relatedTarget
["relatedTarget", "focusevent", [
["rA", "focusevent", "text", {'style': 'hilite_related_a'}],
["rB", "focusevent", "text", {'style': 'hilite_related_b'}],
["rOuter", "focusevent", "text", {'style': 'hilite_related_outer'}],
], {'checked': true}],
], {
'checked': true,
'header-background': "#c0ffff"
}],

// FocusEvent - Handler
["Handler", "handler", [
["hA", "handler", "text", {'style': 'hilite_handler_a'}],
["hB", "handler", "text", {'style': 'hilite_handler_b'}],
["hOuter", "handler", "text", {'style': 'hilite_handler_outer'}],
], {'checked': true}],
], {
'checked': true,
'header-background': "#c0c0ff"
}],
];

var _focus_event_info = [
Expand Down Expand Up @@ -94,7 +106,7 @@ function init() {
setUserAgentText();

createOptions(document.getElementById("options"), _focus_event_info, _focus_table_info, []);
injectCustomCSS(_focus_event_info);
injectCustomCSS(_focus_event_info, _focus_table_info);
resetTable(false);

var input_a = document.getElementById("input_a");
Expand Down
2 changes: 1 addition & 1 deletion key-event-viewer-ce.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
<script type="text/javascript" src="options.js" ></script>
<script type="text/javascript" src="shared.js" ></script>
<script type="text/javascript" src="key-event-viewer.js" ></script>
<style title="inject"></style>
<link rel="stylesheet" type="text/css" href="key-event-viewer.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
<style title="inject"></style>

</head>

Expand Down
42 changes: 0 additions & 42 deletions key-event-viewer.css
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,3 @@
.etype_header {
background-color: #e0e0e0;
font-weight: bold;
border: 1px solid black;
}

.legacy_header {
background-color: #c0ffc0;
font-weight: bold;
border: 1px solid black;
}

.modifiers_header {
background-color: #ffc0ff;
font-weight: bold;
border: 1px solid black;
}

.olddom3_header {
background-color: #ffc0c0;
font-weight: bold;
border: 1px solid black;
}

.uievents_header {
background-color: #c0ffff;
font-weight: bold;
border: 1px solid black;
}

.proposed_header {
background-color: #ffffc0;
font-weight: bold;
border: 1px solid black;
}

.inputbox_header {
background-color: #e0e0e0;
font-weight: bold;
border: 1px solid black;
}

.keydown_row_hilight {
background-color: #e0ffe0;
}
Expand Down
2 changes: 1 addition & 1 deletion key-event-viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
<script type="text/javascript" src="options.js" ></script>
<script type="text/javascript" src="shared.js" ></script>
<script type="text/javascript" src="key-event-viewer.js" ></script>
<style title="inject"></style>
<link rel="stylesheet" type="text/css" href="key-event-viewer.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
<style title="inject"></style>

</head>

Expand Down
38 changes: 30 additions & 8 deletions key-event-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,20 @@ var _key_table_info = [
["", "etype", [
["#", "etype", "text"],
["Event type", "etype", "html"],
], {'grouplabel': false}],
], {
'grouplabel': false,
'header-background': "#e0e0e0"
}],

// KeyboardEvent - Legacy
["Legacy", "legacy", [
["charCode", "legacy", "html"],
["keyCode", "legacy", "html"],
["which", "legacy", "text"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#c0ffc0"
}],

// KeyboardEvent - Modifiers
["Modifiers", "modifiers", [
Expand All @@ -22,14 +28,20 @@ var _key_table_info = [
["ctrl", "modifiers", "bool"],
["alt", "modifiers", "bool"],
["meta", "modifiers", "bool"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#ffc0ff"
}],

// KeyboardEvent - Old DOM3
["Old DOM3", "olddom3", [
["keyIdentifier", "olddom3", "text"],
["keyLocation", "olddom3", "text"],
["char", "olddom3", "text"],
], {'checked': false}],
], {
'checked': false,
'header-background': "#ffc0c0"
}],

// KeyboardEvent - UI Events
["UI Events", "uievents", [
Expand All @@ -40,17 +52,27 @@ var _key_table_info = [
["isComposing", "uievents", "bool"],
["inputType", "uievents", "text"],
["data", "uievents", "text"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#c0ffff"
}],

// KeyboardEvent - Proposed
["Proposed", "proposed", [
["locale", "proposed", "text"],
], {'checked': false}],
], {
'checked': false,
'header-background': "#ffffc0"
}],

// Input
["Input", "inputbox", [
["Input field", "inputbox", "text", {'align': 'left'}],
], {'checked': true, 'grouplabel': false}],
], {
'checked': true,
'grouplabel': false,
'header-background': "#e0e0e0"
}],
];

var _key_event_info = [
Expand Down Expand Up @@ -155,7 +177,7 @@ function init() {
}

createOptions(document.getElementById("options"), _key_event_info, _key_table_info, extra_options);
injectCustomCSS(_key_event_info);
injectCustomCSS(_key_event_info, _key_table_info);
resetTable(false);

var input = document.getElementById("input");
Expand Down
50 changes: 40 additions & 10 deletions mouse-event-viewer-core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,30 @@ var _mouse_table_info = [
["#", "etype", "text"],
["Event type", "etype", "html"],
["Count", "etype", "text"],
], {'grouplabel': false}],
], {
'grouplabel': false,
'header-background': "#e0e0e0"
}],

// MouseEvent - Target
["Target", "target", [
["A", "target", "text", {'style': 'hilite_div_a'}],
["B", "target", "text", {'style': 'hilite_div_b'}],
["C", "target", "text", {'style': 'hilite_div_c'}],
], {'checked': true}],
], {
'checked': true,
'header-background': "#ffffff"
}],

// MouseEvent - Handler
["Handler", "handler", [
["hA", "handler", "text", {'style': 'hilite_handler_a'}],
["hB", "handler", "text", {'style': 'hilite_handler_b'}],
["hC", "handler", "text", {'style': 'hilite_handler_c'}],
], {'checked': false}],
], {
'checked': false,
'header-background': "#c0c0ff"
}],

// Event
["Event", "event", [
Expand All @@ -32,27 +41,39 @@ var _mouse_table_info = [
["composed", "event", "bool"],
["isTrusted", "event", "bool"],
["timeStamp", "event", "text"],
], {'checked': false}],
], {
'checked': false,
'header-background': "#a0ffff"
}],

// UIEvent
["UIEvent", "uievent", [
["view", "uievent", "text"],
["detail", "uievent", "text"],
], {'checked': false}],
], {
'checked': false,
'header-background': "#ffffff"
}],

// MouseEvent - UI Events
["MouseEvent", "mouseevent", [
["screenX", "mouseevent", "text"],
["screenY", "mouseevent", "text"],
["clientX", "mouseevent", "text"],
["clientY", "mouseevent", "text"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#ffffc0"
}],

// PointerLock
["PointerLock", "plock", [
["movementX", "plock", "text"],
["movementY", "plock", "text"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#e0a0e0"
}],

// CSSOM
["CSSOM", "cssom", [
Expand All @@ -62,13 +83,19 @@ var _mouse_table_info = [
["pageY", "cssom", "text"],
["x", "cssom", "text"],
["y", "cssom", "text"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#c0f0c0"
}],

// MouseEvent - UI Events
["Buttons", "buttons", [
["button", "buttons", "text"],
["buttons", "buttons", "text"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#e0e0e0"
}],

// KeyboardEvent - Modifiers
["Modifiers", "modifiers", [
Expand All @@ -77,7 +104,10 @@ var _mouse_table_info = [
["ctrl", "modifiers", "bool"],
["alt", "modifiers", "bool"],
["meta", "modifiers", "bool"],
], {'checked': true}],
], {
'checked': true,
'header-background': "#ffc0c0"
}],
];

function init() {
Expand Down
2 changes: 1 addition & 1 deletion mouse-event-viewer-shadow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
<script type="text/javascript" src="shared.js" ></script>
<script type="text/javascript" src="mouse-event-viewer-shared.js" ></script>
<script type="text/javascript" src="mouse-event-viewer-shadow.js" ></script>
<style title="inject"></style>
<link rel="stylesheet" type="text/css" href="mouse-event-viewer.css" />
<link rel="stylesheet" type="text/css" href="shared.css" />
<style title="inject"></style>

</head>

Expand Down
Loading

0 comments on commit afcdeb8

Please sign in to comment.