start on realtime form prototype
ansuz
9 years ago
parent
02ff1a63a4
commit
a527024a8c
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
|
||||||
|
<style>
|
||||||
|
html, body{
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<input type="text" name="text"><br>
|
||||||
|
<input type="password" name="password"><br>
|
||||||
|
|
||||||
|
<input type="radio" name="radio" value="one" checked>One<br>
|
||||||
|
<input type="radio" name="radio" value="two">Two<br>
|
||||||
|
<input type="radio" name="radio" value="three">Three<br>
|
||||||
|
|
||||||
|
<input type="checkbox" name="checkbox1" value="1">Checkbox One<br>
|
||||||
|
<input type="checkbox" name="checkbox2" value="2">Checkbox Two<br>
|
||||||
|
|
||||||
|
<input type="number" name="number" min="1" max="5">Number<br>
|
||||||
|
|
||||||
|
<input type="range" name="range" min="0" max="10">Ranges<br>
|
||||||
|
|
||||||
|
<select>
|
||||||
|
<option value="one">One</option>
|
||||||
|
<option value="two">Two</option>
|
||||||
|
<option value="three">Three</option>
|
||||||
|
<option value="four">Four</option>
|
||||||
|
</select> Dropdowns<br>
|
||||||
|
|
||||||
|
<textarea rows="4" cols="50"> </textarea><br>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
define([
|
||||||
|
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
||||||
|
'/common/RealtimeTextarea.js',
|
||||||
|
'/common/messages.js',
|
||||||
|
'/common/crypto.js',
|
||||||
|
'/common/TextPatcher.js',
|
||||||
|
'/bower_components/jquery/dist/jquery.min.js',
|
||||||
|
'/customize/pad.js'
|
||||||
|
], function (Config, Realtime, Messages, Crypto, TextPatcher) {
|
||||||
|
var $ = window.jQuery;
|
||||||
|
$(window).on('hashchange', function() {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
if (window.location.href.indexOf('#') === -1) {
|
||||||
|
window.location.href = window.location.href + '#' + Crypto.genKey();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var module = window.APP = {};
|
||||||
|
var key = Crypto.parseKey(window.location.hash.substring(1));
|
||||||
|
var initializing = true;
|
||||||
|
|
||||||
|
/* elements that we need to listen to */
|
||||||
|
/*
|
||||||
|
* text
|
||||||
|
* password
|
||||||
|
* radio
|
||||||
|
* checkbox
|
||||||
|
* number
|
||||||
|
* range
|
||||||
|
* select
|
||||||
|
* textarea
|
||||||
|
*/
|
||||||
|
|
||||||
|
var $textarea = $('textarea');
|
||||||
|
|
||||||
|
var config = module.config = {
|
||||||
|
websocketURL: Config.websocketURL + '_old',
|
||||||
|
userName: Crypto.rand64(8),
|
||||||
|
channel: key.channel,
|
||||||
|
cryptKey: key.cryptKey
|
||||||
|
};
|
||||||
|
|
||||||
|
var setEditable = function (bool) {/* allow editing */};
|
||||||
|
var canonicalize = function (text) {/* canonicalize all the things */};
|
||||||
|
|
||||||
|
setEditable(false);
|
||||||
|
|
||||||
|
var onInit = config.onInit = function (info) { };
|
||||||
|
|
||||||
|
var onRemote = config.onRemote = function (info) {
|
||||||
|
if (initializing) { return; }
|
||||||
|
/* integrate remote changes */
|
||||||
|
};
|
||||||
|
|
||||||
|
var onLocal = config.onLocal = function () {
|
||||||
|
if (initializing) { return; }
|
||||||
|
/* serialize local changes */
|
||||||
|
};
|
||||||
|
|
||||||
|
var onReady = config.onReady = function (info) {
|
||||||
|
var realtime = module.realtime = info.realtime;
|
||||||
|
|
||||||
|
// create your patcher
|
||||||
|
module.patchText = TextPatcher.create({
|
||||||
|
realtime: realtime
|
||||||
|
});
|
||||||
|
|
||||||
|
// get ready
|
||||||
|
|
||||||
|
setEditable(true);
|
||||||
|
initializing = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
var onAbort = config.onAbort = function (info) {};
|
||||||
|
|
||||||
|
var rt = Realtime.start(config);
|
||||||
|
|
||||||
|
// bind to events...
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue