git.iko.soy/project-m36
on master help sign in
add clickable tutd samples to websocket client application
af207adAgentM
ProjectM36/Server/WebSocket/websocket-client.html+34−2
compare with master
unifiedsplit
@@ -1,5 +1,6 @@
1<html>
1<html>
2<head>
2<head>
3+<!-- add examples drop down menu -->
3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4<title>Project:M36 WebSocket Client</title>
5<title>Project:M36 WebSocket Client</title>
5<script type="text/javascript" src="project-m36.js"></script>
6<script type="text/javascript" src="project-m36.js"></script>
@@ -58,16 +59,47 @@ margin: 3px;
58 width: 100px;
59 width: 100px;
59}
60}
60
61
62+#samples
63+{
64+ display:none;
65+}
66+
67+#samplesouter
68+{
69+ border: 1px solid;
70+ display: inline-block;
71+ padding-left: 10px;
72+ padding-right: 10px;
73+}
74+
75+#samples li:hover
76+{
77+ background-color: #d1d1e0;
78+}
79+
61</style>
80</style>
62</head>
81</head>
63−<body>
82+<body onload="installSampleHandlers();">
64<h1>Project:M36 WebSocket Client</h1>
83<h1>Project:M36 WebSocket Client</h1>
65−<p>Try the <a href="https://github.com/agentm/project-m36/blob/master/docs/15_minute_tutorial.markdown">15 minute TutorialD Tutorial</a>.</p>
66<div id="sheet">
84<div id="sheet">
67 <div id="interactor">
85 <div id="interactor">
68 <form onsubmit="return connectOrDisconnect(this);" id="connection">
86 <form onsubmit="return connectOrDisconnect(this);" id="connection">
69 <label>Connection:</label><input type="text" name="host" value="localhost" placeholder="Host"/>:<input type="number" placeholder="Port" name="port" min="0" max="32767" value="8888"/>/<input type="text" placeholder="Database Name" name="dbname" value="test"/><input type="submit" name="connect" value="Connect"/>
87 <label>Connection:</label><input type="text" name="host" value="localhost" placeholder="Host"/>:<input type="number" placeholder="Port" name="port" min="0" max="32767" value="8888"/>/<input type="text" placeholder="Database Name" name="dbname" value="test"/><input type="submit" name="connect" value="Connect"/>
70 </form>
88 </form>
89+ <div onmouseover="toggleSamples(this, true);" onmouseleave="toggleSamples(this, false);" id="samplesouter">
90+ <span>Sample TutorialD: <a href="https://github.com/agentm/project-m36/blob/master/docs/15_minute_tutorial.markdown">15 minute TutorialD Tutorial</a>.</span>
91+</span>
92+ <ul id="samples">
93+ <li>:showexpr true</li>
94+ <li>:showexpr false</li>
95+ <li>:importexample date</li>
96+ <li>:showexpr s join sp</li>
97+ <li>update s where city=&quot;Paris&quot; (status:=10)</li>
98+ <li>:showexpr s</li>
99+ <li>:commit</li>
100+ <li>:showgraph</li>
101+ </ul>
102+ </div>
71 <form onsubmit="return execTutorialD();">
103 <form onsubmit="return execTutorialD();">
72 <input type="text" id="tutd"/>
104 <input type="text" id="tutd"/>
73 <input type="submit"/>
105 <input type="submit"/>
ProjectM36/Server/WebSocket/websocket-client.js+26
@@ -120,4 +120,30 @@ function hideParent(element)
120{
120{
121 var deleteNode = element.parentNode;
121 var deleteNode = element.parentNode;
122 element.parentNode.parentNode.removeChild(deleteNode)
122 element.parentNode.parentNode.removeChild(deleteNode)
123+}
124+
125+function toggleSamples(element,show)
126+{
127+ var samples = document.getElementById("samples");
128+ if(show)
129+ {
130+ samples.style.display = "block";
131+ }
132+ else
133+ {
134+ samples.style.display = "none";
135+ }
136+}
137+
138+function installSampleHandlers()
139+{
140+ var samples = document.querySelectorAll("#samples li");
141+ for(var idx = 0; idx < samples.length; idx++)
142+ {
143+ var tutd = document.getElementById("tutd");
144+ var el = samples[idx];
145+ el.onclick = function(el) {
146+ tutd.value = el.target.textContent;
147+ }
148+ }
123}
149}