-
Notifications
You must be signed in to change notification settings - Fork 0
/
gadget.html
121 lines (113 loc) · 5.05 KB
/
gadget.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This title is not used. -->
<title>WCAG Table Generator</title>
<!-- Use Bootstrap to match the look of OU Campus. -->
<!-- <link rel="stylesheet" href="./scripts/libs/bootstrap.min.css"> -->
<link rel="stylesheet" href="./css/ou_gadget.css">
<style>
script {
display: none !important;
}
</style>
<!-- Script Area-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- <script src="scripts/libs/gadgetlib.min.js"></script> -->
</head>
<body>
<div id="main">
<div id="AppWrapper">
<h1>CBE TableGen 1.0</h1>
<p>Create ATI-compliant Tables</p>
<section id="TableHeadSettings">
<h2>Table Caption</h2>
<div class="input-wrapper">
<label for="TableCaptionControl">Caption:</label>
<input type="text" id="TableCaptionControl" maxlength="200" data-keyup="syncCaption"
value="Table Caption">
<label>Columns:
<input type="number" min="1" max="7" data-keyup="syncColumns" data-change="syncColumns"
value="1">
</label>
<label>Rows:
<input type="number" min="1" max="20" data-keyup="syncRows" data-change="syncRows" value="1">
</label>
<button id="AddToPageButton" type="button" data-click="addToPage">Insert Table Now</button>
</div>
</section>
<section class="gadget-friendly">
<button type="button" id="AdvancedOptionsButton" data-click="toggleFor"
data-for="#TableBodySettings">Advanced Options</button>
</section>
<section id="TableBodySettings" class="hidden">
<h2>Table Preview</h2>
<div class="flex-input-wrapper">
<div class="input-wrapper">
<button id="InsertRowButton" data-click="addRow">Add Row</button>
<button id="InsertColumnButton" data-click="addColumn">Add Column</button>
</div>
<div class="input-wrapper">
<button id="ImportTableButton" data-click="textInput" data-action="importHtml">Import
HTML</button>
<button id="GetHtmlButton" data-click="getHtmlCode">Get HTML</button>
</div>
</div>
<div class="input-wrapper">
<button id="SetHtmlButton" data-click="addToPage">Add To Page</button>
</div>
<hr>
<div id="MainTable">
<table id="UI_TABLE">
<caption> </caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<hr>
</section>
</div>
<!-- Page Templates -->
<template data-engine="mustache" id="RowTemplate" class="row" data-template-for="MainTable">
<tr>
{{{rowContent}}}
</tr>
<tr class="ui-add-row">
<td colspan="{{columns}}" class="button-wrapper">
<button title="Add Row at {{row}}" data-row="{{row}}" class="add row" data-click="addRow">+</button>
</td>
</tr>
</template>
<template data-engine="mustache" id="ThTemplate" class="th" data-template-for="MainTable">
{{#first}}
<th class="button-wrapper first">
<button title="Reset Table (All data will be lost.)" class="reset table"
data-click="resetTable">R</button>
</th>
{{/first}}
<th data-index="{{column}}" class="button-wrapper">
<button title="Delete Column {{column}}" data-column="{{column}}" class="delete column"
data-click="removeColumn">-</button>
</th>
</template>
<template data-engine="mustache" id="TdTemplate" class="td" data-template-for="MainTable">
{{#first}}
<td rowspan="2" class="button-wrapper delete row first">
<button title="Delete Row at {{row}}" data-row="{{row}}" class="delete row"
data-click="removeRow">-</button>
</td>
{{/first}}
<td data-index="{{column}}" class="{{#first}}first{{/first}}">
<span class="number">{{number}}</span>
</td>
</template>
</div>
<!-- <script src="scripts/libs/gadget_setup.js"></script> -->
<script>window.isGadget = true; var exports = {};</script>
<script type="module" src="scripts/app.js"></script>
<!-- <script src="./js/index.js"></script> -->
</body>
</html>