-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathexample-editor.html
150 lines (112 loc) · 7 KB
/
example-editor.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
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
<script src="navigation.js"></script>
<style>
textarea {
max-width:100%;
}
</style>
</head>
<body class="">
<div class="contentBox" id="contentBox">
<h1>Apps Integration</h1>
<p><br><a class="appBtn app-icon-graphing" id="app_graphing" href="example-graphing.html">Graphing</a>
<a class="appBtn app-icon-geometry" id="app_geometry" href="example-geometry.html">Geometry</a>
<a class="appBtn app-icon-scientific" id="app_scientific" href="example-scientific.html">Scientific</a>
<a class="appBtn app-icon-cas" id="app_cas" href="example-cas.html">CAS</a>
<a class="appBtn app-icon-3d" id="app_3d" href="example-3d.html">3D</a>
<a class="appBtn app-icon-classic" id="app_classic" href="example-tools.html">Classic</a>
<br><br>
<a class="appBtn noimage active" id="app_editor" href="example-editor.html">Equation Editor</a></p>
<h5>Equation Editor</h5>
<p class="text">GeoGebra Equation Editor can be embedded as a stand-alone app.<br>
For details about customization please refer to <a class="inlineLink" target="_blank" href="https://geogebra.github.io/docs/reference/en/GeoGebra_App_Parameters/">Documentation</a>.<br>
</p>
<p>Enter a formula:</p>
<div id="ggbApplet" class="wrap" style="padding-bottom: 0px; transition: padding-bottom 0.2s linear 0s;">
<div class="applet_scaler ggbTransform" style="position: relative; display: block; transform: none; transform-origin: 0% 0%;"><article class="notranslate" data-param-id="ggbApplet" data-param-usebrowserforjs="false" data-param-app="false" data-param-appname="evaluator" data-param-scalecontainerclass="wrap" data-param-fontsize="32" data-param-rounding="6" data-param-language="en" data-param-keyboardtype="scientific" data-param-preventfocus="false" data-param-disableautoscale="false" tabindex="0" id="ggbApplet0" data-scalex="1" data-scaley="1" aria-label="Evaluator" style="border-width: 0px; border-style: solid; border-image: initial; display: inline-block; outline-style: none;"><div class="GeoGebraFrame applet-unfocused jsloaded" style="border-width: 1px; border-style: solid;"><div data-test="mathFieldEditor" class="evaluatorEditor" style="height: 101px; vertical-align: top;"><canvas height="101" width="149" tabindex="0" style="height: 101px; width: 149px;"></canvas><div class="textAreaClip" style="z-index: -32000; clip: rect(1em, 1em, 1em, 1em); width: 1px; height: 1px; position: relative; top: -100%;"><textarea id="hiddenCopyPasteLatexArea0" role="application" data-test="mathFieldTextArea" style="opacity: 0; width: 1px; padding: 0px; border: 0px; min-height: 0px; height: 1px;"></textarea></div></div><div class="kbButtonSpace"></div><div aria-hidden="true" class="DockGlassPane" style="position: relative; overflow: hidden; display: none; z-index: 5000;"><div aria-hidden="true" style="border-width: 4px; border-style: solid; border-color: gray; display: none;"></div></div></div><span class="geogebraweb-dummy-invisible" tabindex="10000"></span><div id="screenReader1" tabindex="-1" role="status" aria-live="polite" aria-atomic="true" aria-relevant="additions text" style="top: -1000px; position: absolute;"></div></article></div><div class="GeoGebraFrame" id="ggbAppletkeyboard"></div></div>
<script>
// eg ?cb=master/22583
// -> https://apps-builds.s3-eu-central-1.amazonaws.com/geogebra/branches/master/22583/web3d/web3d.nocache.js
var codebase;
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('cb')) {
codebase = urlParams.get('cb');
codebase = "https://apps-builds.s3-eu-central-1.amazonaws.com/geogebra/branches/" + codebase + "/web3d/";
}
var eventglob
var listener = function(state) {
if (state[0] == "editorKeyTyped") {
console.log("editorKeyTyped: ", state.latex, ", ", state.content, ", ", state.eval);
document.getElementById("textarea1").value = "latex: " + state.latex + "\ncontent: " + state.content + "\neval: " + state.eval;
document.getElementById("flat").value = state.content;
document.getElementById("latex").value = state.latex;
}
}
function printState() {
var state = editorAPI.getEditorState();
console.log(state.latex, ", ", state.content, ", ", state.eval);
console.log(state);
}
</script>
<script>
var editorAPI;
var parameters = {
"id": "ggbApplet",
"useBrowserForJS":false,
"app":false,
"appName":"evaluator",
"scaleContainerClass":"wrap",
"fontSize": 32,
// specify the rounding for a calculation (for state.eval)
"rounding": 6,
"language":"en",
"keyboardType": "scientific",
//or "keyboardType": "normal",
// useful if you have several editors on a page
"preventFocus": false,
// called after the editor is fully loaded
"appletOnLoad":function(api){
editorAPI = api;
api.registerClientListener(listener);
// initial state
var state = [];
state[0] = "editorKeyTyped";
state.content = "sqrt(x/(2+x))";
state.latex = "\\sqrt{{\\frac{x}{2+x}}}";
state.eval = "sqrt(x / (2 + x))";
editorAPI.setEditorState({"content":state.content});
// update other text fields
listener(state);
}
};
var applet = new GGBApplet(parameters);
if (codebase) {
console.log("using codebase " + codebase);
applet.setHTML5Codebase(codebase);
}
window.onload = function() {applet.inject('ggbApplet')};
function keyPressed() {
var content = document.getElementById("flat").value;
console.log(content);
editorAPI.setEditorState({"content":content});
}
function keyPressedLaTeX() {
var content = document.getElementById("latex").value;
console.log(content);
console.error('editorAPI.setEditorState({"latex":content}) not implemented yet');
editorAPI.setEditorState({"latex":content});
}
</script>
<h5>API Connection</h5>
<p class="text"> You can also type in here (& copy/paste):<br>
<textarea class="inputfield" onkeyup="keyPressed()" id="flat" name="flat" cols="50" rows="1"></textarea>
<br>You can copy LaTeX from here:<br>
<textarea class="inputfield" onkeyup="keyPressedLaTeX()" id="latex" name="latex" cols="50" rows="1"></textarea>
<br><br>Technical info:<br>
<textarea class="inputfield" id="textarea1" name="textarea1" cols="50" rows="3"></textarea>
<br><button class="appBtn noimage" type="button" onclick="printState()">Print state to console</button><br>
</p>
<iframe id="web3d" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;" src="./editorDeploy_files/saved_resource.html"></iframe><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;"> </div></div></body></html>