add example

jsxc · Jul 3, 2014 · 52b16e9 · 52b16e9
1 parent a07347c
commit 52b16e9
Show file tree

Hide file tree

Showing 7 changed files with 562 additions and 0 deletions.
diff --git a/example/ajax/getturncredentials.json b/example/ajax/getturncredentials.json
@@ -0,0 +1 @@
+{"url":"numb.viagenie.ca","username":"webrtc@live.com","credential":"muazkh","ttl":43200}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+	  <title>JSXC example application</title>
+	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+	  <link href="../lib/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../lib/jquery.mCustomScrollbar.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../lib/jquery.colorbox.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../jsxc.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />
+
+	  <style type="text/css">
+	  body, * {font-size: 13px; font-family: "Helvetica Neue",Helvetica,Arial,FreeSans,sans-serif;}
+	  fieldset {float: left;}
+	  </style>
+
+	  <script src="../lib/jquery.min.js"></script>
+	  <script src="../lib/jquery.ui.min.js"></script>
+	  <script src="../lib/jquery.colorbox-min.js"></script>
+	  <script src="../lib/jquery.slimscroll.js"></script>
+	  <script src="../lib/jquery.fullscreen.js"></script>
+	  <script src="../lib/strophe.js"></script>
+	  <script src="../lib/strophe.muc.js"></script>
+	  <script src="../lib/strophe.disco.js"></script>
+	  <script src="../lib/strophe.caps.js"></script>
+	  <script src="../lib/strophe.vcard.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.session.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.sdp.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.adapter.js"></script>
+	  <script src="../lib/otr/build/dep/salsa20.js"></script>
+	  <script src="../lib/otr/build/dep/bigint.js"></script>
+	  <script src="../lib/otr/build/dep/crypto.js"></script>
+	  <script src="../lib/otr/build/dep/eventemitter.js"></script>
+	  <script src="../lib/otr/build/otr.js"></script>
+	  <script src="../jsxc.lib.js"></script>
+	  <script src="../jsxc.lib.webrtc.js"></script>
+
+	  <script src="js/example.js"></script>
+
+	</head>
+
+	<body>
+	  <form id="form" method="post" action="login.html">
+		  <fieldset>
+		     <legend>Login</legend>
+		     <label for="username">Username:</label><input type="text" id="username" name="username" /><br />
+		     <label for="password">Password:</label><input type="password" id="password" name="password" /><br />
+		     <input type="submit" value="Log in" />
+		  </fieldset>
+	  </form>
+	</body>
+</html>
diff --git a/example/js/example.js b/example/js/example.js
@@ -0,0 +1,41 @@
+$(function() {
+   jsxc.init({
+      loginForm: {
+         form: '#form',
+         jid: '#username',
+         pass: '#password',
+         preJid: function(jid) {
+            var data = {
+               xmppResource: 'example',
+               xmppDomain: 'localhost',
+               boshUrl: '/http-bind/'
+            };
+
+            var resource = (data.xmppResource) ? '/' + data.xmppResource : '';
+            var domain = data.xmppDomain;
+
+            jsxc.storage.setItem('boshUrl', data.boshUrl);
+
+            if (jid.match(/@(.*)$/)) {
+               return (jid.match(/\/(.*)$/)) ? jid : jid + resource;
+            }
+
+            return jid + '@' + domain + resource;
+         }
+      },
+      logoutElement: $('#logout'),
+      checkFlash: false,
+      rosterAppend: 'body',
+      root: '../',
+      turnCredentialsPath: 'ajax/getturncredentials.json',
+      displayRosterMinimized: function() {
+         return true;
+      },
+      otr: {
+         debug: true,
+         SEND_WHITESPACE_TAG: true,
+         WHITESPACE_START_AKE: true
+      },
+
+   });
+});
diff --git a/example/login.html b/example/login.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+   <head>
+     <title>JSXC example application</title>
+     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+     <link href="../lib/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../lib/jquery.mCustomScrollbar.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../lib/jquery.colorbox.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../jsxc.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />
+
+     <style type="text/css">
+     body, * {font-size: 13px; font-family: "Helvetica Neue",Helvetica,Arial,FreeSans,sans-serif;}
+     fieldset {float: left;}
+     </style>
+
+     <script src="../lib/jquery.min.js"></script>
+     <script src="../lib/jquery.ui.min.js"></script>
+     <script src="../lib/jquery.colorbox-min.js"></script>
+     <script src="../lib/jquery.slimscroll.js"></script>
+     <script src="../lib/jquery.fullscreen.js"></script>
+     <script src="../lib/strophe.js"></script>
+     <script src="../lib/strophe.muc.js"></script>
+     <script src="../lib/strophe.disco.js"></script>
+     <script src="../lib/strophe.caps.js"></script>
+     <script src="../lib/strophe.vcard.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.session.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.sdp.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.adapter.js"></script>
+     <script src="../lib/otr/build/dep/salsa20.js"></script>
+     <script src="../lib/otr/build/dep/bigint.js"></script>
+     <script src="../lib/otr/build/dep/crypto.js"></script>
+     <script src="../lib/otr/build/dep/eventemitter.js"></script>
+     <script src="../lib/otr/build/otr.js"></script>
+     <script src="../jsxc.lib.js"></script>
+     <script src="../jsxc.lib.webrtc.js"></script>
+
+     <script src="js/example.js"></script>
+
+   </head>
+
+   <body>
+     <h1>You are logged in :-).</h1>
+
+     <a href="index.html" id="logout">Log out</a>
+   </body>
+</html>
diff --git a/lib/jquery-ui.min.css b/lib/jquery-ui.min.css
diff --git a/lib/jquery.colorbox.css b/lib/jquery.colorbox.css
@@ -0,0 +1,172 @@
+/* Remove close button from firstrunwizard */
+#closeWizard {
+	display: none !important;
+}
+
+/*
+    Colorbox Core Style:
+    The following CSS is consistent between example themes and should not be altered.
+*/
+#colorbox,#cboxOverlay,#cboxWrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 9999;
+	overflow: hidden;
+}
+
+#cboxWrapper {
+	max-width: none;
+}
+
+#cboxOverlay {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+}
+
+#cboxMiddleLeft,#cboxBottomLeft {
+	clear: left;
+}
+
+#cboxContent {
+	position: relative;
+}
+
+#cboxLoadedContent {
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+#cboxTitle {
+	margin: 0;
+}
+
+#cboxLoadingOverlay,#cboxLoadingGraphic {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow {
+	cursor: pointer;
+}
+
+.cboxPhoto {
+	float: left;
+	margin: auto;
+	border: 0;
+	display: block;
+	max-width: none;
+	-ms-interpolation-mode: bicubic;
+}
+
+.cboxIframe {
+	width: 100%;
+	height: 100%;
+	display: block;
+	border: 0;
+}
+
+#colorbox,#cboxContent,#cboxLoadedContent {
+	box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+}
+
+/* 
+    User Style:
+    Change the following styles to modify the appearance of Colorbox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay {
+	background: #000;
+}
+
+#colorbox {
+
+}
+
+#cboxContent {
+	margin-top: 20px;
+}
+
+.cboxIframe {
+	background: #fff;
+}
+
+#cboxError {
+	padding: 50px;
+	border: 0px solid #ccc;
+}
+
+#cboxLoadedContent {
+	border: 0px solid #555;
+	background: #fff;
+	border-radius: 5px;
+}
+
+#cboxTitle {
+	position: absolute;
+	top: -20px;
+	left: 0;
+	color: #ccc;
+}
+
+#cboxCurrent {
+	position: absolute;
+	top: -20px;
+	right: 0px;
+	color: #ccc;
+}
+
+#cboxSlideshow {
+	position: absolute;
+	top: -20px;
+	right: 90px;
+	color: #fff;
+}
+
+#cboxPrevious:hover {
+	background-position: bottom left;
+}
+
+#cboxNext:hover {
+	background-position: bottom right;
+}
+
+#cboxLoadingOverlay {
+	background: #fff;
+}
+
+#cboxClose {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	display: block;
+	background: url(%webroot%/core/img/actions/close.svg) no-repeat right
+		center !important;
+	opacity: 0.5;
+	width: 19px !important;
+	height: 19px;
+	border: 0px;
+	text-indent: -9999px;
+}
+
+#cboxClose:hover {
+	background-position: right center !important;
+	opacity: 1.0;
+}
+
+/*
+  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
+  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
+  See: http://jacklmoore.com/notes/ie-transparency-problems/
+*/
+.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight
+	{
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,
+		endColorstr=#00FFFFFF);
+}