forked from nathancarter/group-explorer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Multtable.html
156 lines (143 loc) · 6.42 KB
/
Multtable.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!--
Multiplication table visualizer
-->
<html>
<head>
<title>Multtable Visualizer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="./images/favicon.png"></link>
<link rel="stylesheet" href="./style/fonts.css" type="text/css"></link>
<link rel="stylesheet" href="./style/sliders.css" type="text/css"></link>
<link rel="stylesheet" href="./visualizerFramework/visualizer.css" type="text/css"></link>
<link rel="stylesheet" href="./style/menu.css" type="text/css"></link>
<link rel="stylesheet" href="./style/SubsetHighlightController.css" type="text/css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
#graphic {
overflow-x: hidden;
-webkit-user-drag: none; /* prevents default drag behavior */
-webkit-user-select: none; /* prevents confusing cut-and-paste attempt in graphic */
}
#controls {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
grid-template-areas: 'options' 'panels';
}
#options {
grid-area: options;
background-color: var(--visualizer-body-background);
justify-self: stretch;
text-align: center;
}
#options > button {
margin: 0 2px 12px 0;
min-width: 15%;
}
#controls .panel {
grid-area: panels;
}
#subset-control {
padding: 2px;
overflow: auto;
visibility: visible;
}
#table-control {
background-color: var(--visualizer-controls-background);
visibility: hidden;
display: none;
}
#drag-image {
-webkit-user-drag: none; /* prevents annoying default drag behavior */
}
.graphic-lead {
margin-top: 1.5em;
margin-bottom: 0.5em;
}
#coloration-choice > div {
margin-left: 5%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: {
scale: 100, /* scale MathJax to match the HTML around it */
},
showMathMenu: false, /* disable MathJax context menu (it interferes with subsetDisplay context menu) */
});
MathJax.Hub.processUpdateTime = 1000; // allow MathJax to work longer at a stretch, improves initial load time
MathJax.Hub.processSectionDelay = 0; // no pause to let browser handle interaction -- only busy during loading
MathJax.Hub.processUpdateDelay = 0;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=MML_CHTML"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-resizable.js"></script>
<script type="module">
import {load} from "./Multtable.js";
window.addEventListener('load', load, {once: true});
</script>
</head>
<body>
<div id="bodyDouble">
<div id="header">
<div id="heading"></div>
</div>
<div id="graphic">
<template id="drag-image-template">
<img id="drag-image" src="${Multtable_View.canvas.toDataURL()}" class="remove-on-clean" swapping="${swapping}"
start="${start}" style="${style}">
</template>
<template id="node-label-template">
<div id="node-label" class="tooltip remove-on-clean" row="${rowXcol.row}" col="${rowXcol.col}">
${MathML.sans(Group.representation[element])}
</div>
</template>
</div>
<div id="splitter"></div>
<div id="controls">
<div id="options">
<button id="subset-button" onclick="VC.showPanel('#subset-control')">Subsets</button>
<button id="table-button" onclick="VC.showPanel('#table-control')">Table</button>
</div>
<div id="subset-control" class="panel">
<!-- This is filled in by subsetDisplay/subsets.html -->
</div>
<div id="table-control" class="panel">
<div class="graphic-lead">Organize by subgroup:</div>
<div id="organization-select" class="faux-select" action="toggleOrganizationChoices()">
<div style="display: inline-block; line-height: 1.5em"> </div>
<div id="organization-choice" class="faux-selection"></div>
<div class="faux-select-arrow" ></div>
<ul id="organization-choices" class="faux-select-options visibility-hidden-on-clean"></ul>
</div>
<template id="organization-choice-none-template">
<li action="organizeBySubgroup(0)" style="margin-right: 3em">${MathML.sansText('none')}</li>
</template>
<template id="organization-choice-template">
<li action="organizeBySubgroup(${subgroupIndex})" style="white-space: nowrap; margin-right: 3em">
${MathML.sans(MathML.sub('H', subgroupIndex))}, ${MathML.sansText('a subgroup of order')}
${MathML.sans('<mn>' + subgroup.order + '</mn>')}
</li>
</template>
<div class="graphic-lead" style="margin-top: 3em">Separate cosets by:</div>
<input id="separation-slider" type="range" min="0" max="100" value="0"> <!-- [0-100] => [0,box width] -->
<form id="coloration-choice" class="graphic-lead" style="margin-bottom: 0">
Default coloration:
<div>
<input id="rainbow" name="coloration" type="radio" checked>
<label for="rainbow">Spectrum/rainbow</label>
</div>
<div>
<input id="grayscale" name="coloration" type="radio">
<label for="grayscale">Grayscale</label>
</div>
<div>
<input id="none" name="coloration" type="radio">
<label for="none">None</label>
</div>
</form>
</div>
</div>
</div>
</body>
</html>