-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
143 lines (109 loc) · 6.9 KB
/
index.html
File metadata and controls
143 lines (109 loc) · 6.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Hypergrid API Tutorial</title>
<link rel="stylesheet" href="index.css">
<!--<script src='../build/demo/build/fin-hypergrid.js'></script>-->
<script src="https://fin-hypergrid.github.io/core/3.1.0/build/fin-hypergrid.js"></script>
<script src="polyfills.js"></script>
<!--<script src='../get-smart/umd/get-smart.js'></script>-->
<script src="https://unpkg.com/get-smart@2.0/umd/get-smart.js"></script>
<script src="enhance.js"></script>
<script src="index.js"></script>
<!--<script src="../curvy-tabs/umd/curvy-tabs.js"></script>-->
<script src="https://unpkg.com/curvy-tabs@2.3/umd/curvy-tabs.js"></script>
<!--<script src="../curvy-tabs-pager/umd/curvy-tabs-pager.js"></script>-->
<script src="https://unpkg.com/curvy-tabs-pager@2.2/umd/curvy-tabs-pager.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7" crossorigin="anonymous">
</head>
<body>
<h1 style="margin:.5em; color:white; text-shadow: 1px 1px 2px #444">
<span style="cursor:help; user-select:none;" onclick="alert(this.getAttribute('title'))">Hypergrid API Tutorial</span>
</h1>
<div id="hypergrid" style="position:absolute; top:8px; height:145px; width:calc(50% - 16px); right:8px;"></div>
<div id="editors" class="curvy-tabs-container" style="position:absolute; height:calc(100% - 210px); width:calc(50% - 16px); bottom:8px; right:8px;">
<div style="background-color:#dff" name="Data">
<span id="reset-data" class="reset-button danger" title="Reset data to default. (This icon is only enabled when data have been edited.)"></span>
<input type="button" class="api" value="Apply"
title="grid.setData(obj, { schema: [] }) // resets schema; obj represents the object derived by evaluating the code in the editor below.">
<span class="feedback"></span>
<textarea id="data"></textarea>
</div>
<div style="background-color:#fdf" name="State">
<span id="reset-state" class="reset-button danger" title="Reset this state object to default. (This icon is only enabled when state has been edited.)"></span>
<input type="button" class="api" value="Apply"
title="grid.setState(obj) // obj represents the object derived by evaluating the code in the editor below.
Note: This call first deletes all members of grid.properties and then assigns the members of the state object defined below to it. (Contrast with grid.addState.)">
<span class="feedback"></span>
<textarea id="state"></textarea>
</div>
<div style="background-color:#ffd" name="Format">
<input type="button" value="Locals" class="locals">
Load: <select id="localizer-dropdown"></select>
<span id="reset-localizer" class="reset-button danger" title="Reset this localizer to its default. (This icon is only enabled for built in localizers that have been edited.)"></span>
<span id="delete-localizer" class="delete-button danger" title="Delete this localizer. (This icon only appears for custom localizers you added yourself.)"></span>
<input type="button" class="api" value="Apply" title="grid.localization.add(obj) // obj represents the object derived by evaluating the code in the editor below.">
<span class="feedback">Saved</span>
<textarea id="localizer-script"></textarea>
</div>
<div style="background-color:#ddf" name="Edit">
<input type="button" value="Locals" class="locals">
Load: <select id="editor-dropdown"></select>
<span id="reset-editor" class="reset-button danger" title="Reset this cell editor to its default. (This icon is only enabled for built in cell editors that have been edited.)"></span>
<span id="delete-editor" class="delete-button danger" title="Delete this cell editor. (This icon is only enabled for custom cell editors you added yourself.)"></span>
<input type="button" class="api" value="Apply" title="grid.cellEditors.add(obj) // where obj represents the object derived by evaluating the code in the editor below.">
<span class="feedback">Saved</span>
<textarea id="editor-script"></textarea>
</div>
<div style="background-color:#dfd" name="Scrollbars">
<span id="reset-scrollbars" class="reset-button danger" title="Reset scrollbars stylesheet to default (just comments and selectors with no styles). (This icon is only enabled when the stylesheet has been edited.)"></span>
<label title='Checking this will disable the default scrollbars stylesheet loaded by the finbars module into the DOM (<style id="injected-stylesheet-finbar-base">…</style>). In this case your stylesheet must specify the finbars style rules in full, rather than merely modify them.'>
<input type="checkbox" style="margin-left:2em" onclick="document.getElementById('injected-stylesheet-finbar-base').disabled=this.checked">
Replace
<a target="github" href="https://github.com/fin-hypergrid/finbars/blob/master/src/finbars.css"
title="Default scrollbars stylesheet.">finbars.css</a>
</label>
<input type="button" class="api" value="Apply"
title="injectCSS('custom', obj) // obj represents the object derived by evaluating the code in the editor below.">
<span class="feedback"></span>
<textarea id="scrollbars"></textarea>
</div>
<div style="background-color:#fde4dc" name="Help">
<iframe></iframe>
</div>
<div style="background-color:#aaa" name="Settings">
<h2 style="color: red; text-shadow: 1px 1px 0 yellow;">Danger Zone</h2>
<table><tr>
<td><input id="reset-all" type="button" value="Reset All" class="danger"></td>
<td>This will reset all tabs to their default values, removing all edits, including all custom localizers and custom cell editors.</td>
</tr></table>
</div>
</div>
<div class="divider"></div>
<div id="tutorial" class="curvy-tabs-container" style="position:absolute; height:calc(100% - 58px); width:calc(50% - 12px); bottom:8px">
<div style="background-color:#f4f4f4" name="Tutorial">
<iframe></iframe>
</div>
<div style="background-color:#ffc; display:none" name="Code Snippets">
<iframe src="pages/blank.html"></iframe>
</div>
<div style="background-color:ivory" name="ToC">
<iframe src="pages/Table%20of%20Contents.html"></iframe>
</div>
<div style="background-color:ivory" name="Jump Start">
<iframe></iframe>
</div>
<div style="background-color:#fde4dc" name="Help">
<iframe></iframe>
</div>
</div>
<div id="page-panel" style="position:absolute; user-select:none; white-space:nowrap; top:14px; right:calc(50% + 1em)">
<div id="scroll-warning">
Scroll tutorial to bottom before<br>
proceeding to next page.
</div>
</div>
</body>
</html>