forked from zeroc-ice/ice-demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
250 lines (247 loc) · 11.5 KB
/
index.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat Demo | Ice for JavaScript</title>
<link rel="icon" type="image/x-icon" href="../../../assets/favicon.ico">
<link rel="stylesheet" type="text/css" href="../../../assets/common.css" />
{{#cssDeps}}
<link rel="stylesheet" type="text/css" href="{{.}}"/>
{{/cssDeps}}
</head>
<body>
<!-- Header section that contains title and navigation bar -->
<section id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="../../index.html">Ice for JavaScript</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li><a href="#" id="viewReadme">Readme</a></li>
<li><a href="#" id="viewSource">Source</a></li>
</ul>
</section>
</nav>
<ul class="breadcrumbs">
<li><a href="../../index.html">Ice</a></li>
<li><a href="../index.html">Demos</a></li>
<li class="current"><a href="#">Chat Demo</a></li>
</ul>
</section>
<!-- Main section that contains the user interface -->
<section role="main" id="body">
<!-- Sign In Form -->
<div class="row" id="signin-form">
<div class="large-12 medium-12 columns">
<form>
<div class="row">
<div class="small-4 medium-3 columns">
<label class="right inline" for="username">Username:</label>
</div>
<div class="small-8 medium-9 columns">
<input type="text" id="username"/>
</div>
</div>
<div class="row">
<div class="small-4 medium-3 columns">
<label class="right inline" for="password">Password:</label>
</div>
<div class="small-8 medium-9 columns">
<input type="password" id="password"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<a href="#" class="button small right" id="signin">Sign in</a>
</div>
</div>
</form>
</div>
</div>
<!-- Error Alert -->
<div class="row" style="display:none;" id="signin-alert">
<div class="large-12 medium-12 columns">
<div data-alert class="alert-box warning round">
<span class="error-message"></span>
</div>
</div>
</div>
<!-- Loading Indicator -->
<div class="row" id="loading" style="display:none">
<div class="large-12 medium-12 columns">
<div class="panel">
<h3>Loading Please Wait...</h3>
<div class="progress radius round">
<span class="meter" style="width:0%"></span>
</div>
</div>
</div>
</div>
<!-- Chat Form -->
<div class="row" id="chat-form" style="display:none">
<div class="large-12 medium-12 columns">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">Chat Demo</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-form">
<a href="#" id="signout" class="button">Sign out</a>
</li>
</ul>
</section>
</nav>
<form>
<div class="row">
<div class="large-2 columns">
<ul id="users" class="side-nav"></ul>
</div>
<div class="large-10 columns">
<textarea id="output" class="disabled" readonly></textarea>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" id="input" autocomplete="off"/>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- Modal dialog to show the client README -->
<div id="readme-modal" class="reveal-modal" data-reveal>
<h4>Chat Demo Readme</h4>
<hr/>
<p>This demo implements a push client for the
<a href="https://doc.zeroc.com/technical-articles/general-topics/chat-demo">ZeroC's Chat Demo Application</a>. By default it will connect to a chat server running on demo.zeroc.com. To set up your own server follow the instructions from the C++11 Chat Demo README to start the server.</p>
<p>Once you have configured and started the Chat Demo server and router, edit <code>Ice.Default.Router</code> property in <code>js/Chat/config.json</code>. You will then be able to log into your chat server using this page.</p>
<h4>Using the minified scripts</h4>
<p>The minified script <code>es5/Client.min.js</code> includes:</p>
<ul>
<li><code>node_modules/ice/lib/es5/Ice.js</code> (The Ice run-time library)</li>
<li><code>node_modules/ice/lib/es5/Glacier2.js</code> (The Glacier2 library)</li>
<li><code>es5/generated/Chat.js</code> and <code>es5/generated/ChatSession.js</code> (The generated code for this demo)</li>
<li><code>es5/Client.js</code> (The client application)</li>
</ul>
<p>To use the minified version you should edit the <code>js/Chat/index.html</code>
file and comment out the non-optimized scripts:</p>
<pre>
<!--
Scripts used during development, for optimized builds comment
the following scripts and uncomment es5/Client.min.js
below
-->
<!-- Ice.js (Ice run-time library) -->
<script type="text/javascript" src="../../../node_modules/ice/lib/es5/Ice.js"></script>
<!-- Glacier2.js (Glacier2 run-time library) -->
<script type="text/javascript" src="../../../node_modules/ice/lib/es5/Glacier2.js"></script>
<!-- Chat.js (Demo generated code) -->
<script type="text/javascript" src="es5/generated/Chat.js"></script>
<!-- ChatSession.js (Demo generated code) -->
<script type="text/javascript" src="es5/generated/ChatSession.js"></script>
<!-- Client.js (Chat Demo Application) -->
<script type="text/javascript" src="es5/Client.js"></script>
</pre>
<p>Then uncomment the script tag for the minified version</p>
<pre>
<!--
Uncomment the following script to use a minified version of the
scripts that includes: the Ice and Glacier2 run-time libraries, the
generated code and the demo application.
-->
<!--<script src="es5/Client.min.js"></script>-->
</pre>
<a class="close-reveal-modal">×</a>
</div>
<!-- Modal dialog to show the client source code -->
<div id="source-modal" class="reveal-modal" data-reveal>
<a class="close-reveal-modal">×</a>
<dl class="tabs" data-tab>
<dt></dt>
<dd class="active"><a href="#panel2-1">Slice</a></dd>
<dd><a href="#panel2-2">JavaScript</a></dd>
<dd><a href="#panel2-3">HTML</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<h6>File: Chat/Chat.ice</h6>
<pre class="source language-c" data-code="Chat.ice"></pre>
<h6>File: Chat/ChatSession.ice</h6>
<pre class="source language-c" data-code="ChatSession.ice"></pre>
</div>
<div class="content" id="panel2-2">
<h6>File: Chat/Client.js</h6>
<pre class="source" data-code="Client.js"></pre>
</div>
<div class="content" id="panel2-3">
<h6>File: Chat/index.html</h6>
<pre class="source" data-code="index.html"></pre>
</div>
</div>
</div>
<!-- Footer section -->
<section id="footer" class="show-for-medium-up">
<div class="logo">
<h4><strong>ZeroC</strong></h4>
</div>
<div class="copyright">
<h6>Copyright © ZeroC, Inc. All rights reserved.</h6>
</div>
</section>
<!-- Common dependencies -->
{{#jsDeps}}
<script src="{{.}}"></script>
{{/jsDeps}}
<script type="text/javascript" src="../../../assets/es5/common.js"></script>
<!-- Babel dependencies -->
<script type="text/javascript" src="../../../node_modules/core-js-bundle/minified.js"></script>
<script type="text/javascript" src="../../../node_modules/regenerator-runtime/runtime.js "></script>
<!-- Scripts used during development, for optimized builds
comment the following scripts and uncomment es5/Client.min.js
below -->
<!-- Ice.js (Ice run-time library) -->
<script type="text/javascript" src="../../node_modules/ice/lib/es5/Ice.js"></script>
<!-- Glacier2.js (Glacier2 run-time library) -->
<script type="text/javascript" src="../../node_modules/ice/lib/es5/Glacier2.js"></script>
<!-- Chat.js (Demo generated code) -->
<script type="text/javascript" src="es5/generated/Chat.js"></script>
<!-- ChatSession.js (Demo generated code) -->
<script type="text/javascript" src="es5/generated/ChatSession.js"></script>
<!-- Client.js (Chat Demo Application) -->
<script type="text/javascript" src="es5/Client.js"></script>
<!-- Uncomment the following script to use a minified version of the
scripts that includes: the Ice and Glacier2 run-time libraries,
the generated code and the demo application. -->
<!--<script type="text/javascript" src="es5/Client.min.js"></script>-->
<script type="text/javascript">
$(".chatbutton").click(
function(e)
{
window.open("https://demo.zeroc.com/chat/js/index.html", "Chat",
"width=800,height=600,location=no,directories=no,status=yes," +
"menubar=no,scrollbars=yes,resizable=yes,toolbar=no");
return false;
});
/* jshint browser:true, jquery:true */
/* global checkGenerated: false */
if(["http:", "https:"].indexOf(document.location.protocol) !== -1)
{
checkGenerated(["es5/generated/Chat.js", "es5/generated/ChatSession.js"]);
}
</script>
</body>
</html>