Merge branch 'diffdom' into netflux

This commit is contained in:
Yann Flory
2016-04-13 16:19:56 +02:00
6 changed files with 127 additions and 28 deletions

View File

@@ -12,8 +12,14 @@
box-sizing: border-box;
}
textarea{
position: absolute;
top: 5vh;
left: 0px;
border: 0px;
padding-top: 15px;
width: 100%;
height: 100vh;
height: 95vh;
max-width: 100%;
max-height: 100vh;
@@ -32,26 +38,41 @@
color: #637476;
}
#run {
#panel {
position: fixed;
top: 0px;
right: 0px;
z-index: 100;
width: 5vw;
width: 100%;
height: 5vh;
z-index: 95;
background-color: #777;
/* min-height: 75px; */
}
#run {
display: block;
float: right;
height: 100%;
width: 10vw;
z-index: 100;
line-height: 5vw;
font-size: 1.5em;
background-color: #222;
color: #CCC;
display: block;
text-align: center;
border-radius: 5%;
border: 0px;
}
</style>
</head>
<body>
<textarea></textarea>
<a href="#" id="run">RUN</a>
<div id="panel">
<!-- TODO update this element when new users join -->
<span id="users"></span>
<!-- what else should go in the panel? -->
<a href="#" id="run">RUN</a>
</div>
</body>
</html>

View File

@@ -3,9 +3,10 @@ define([
'/common/realtime-input.js',
'/common/messages.js',
'/common/crypto.js',
'/common/cursor.js',
'/bower_components/jquery/dist/jquery.min.js',
'/customize/pad.js'
], function (Config, Realtime, Messages, Crypto) {
], function (Config, Realtime, Messages, Crypto, Cursor) {
var $ = window.jQuery;
$(window).on('hashchange', function() {
window.location.reload();
@@ -58,7 +59,75 @@ define([
window.alert("Server Connection Lost");
};
var rt = Realtime.start(config);
var rt = window.rt = Realtime.start(config);
var cursor = Cursor($textarea[0]);
var splice = function (str, index, chars) {
var count = chars.length;
return str.slice(0, index) + chars + str.slice((index -1) + count);
};
var setSelectionRange = function (input, start, end) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(start, end);
} else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
};
var setCursor = function (el, pos) {
setSelectionRange(el, pos, pos);
};
var state = {};
// TODO
$textarea.on('keydown', function (e) {
// track when control keys are pushed down
//switch (e.key) { }
});
// TODO
$textarea.on('keyup', function (e) {
// track when control keys are released
});
$textarea.on('keypress', function (e) {
switch (e.key) {
case 'Tab':
// insert a tab wherever the cursor is...
var start = $textarea.prop('selectionStart');
var end = $textarea.prop('selectionEnd');
if (typeof start !== 'undefined') {
if (start === end) {
$textarea.val(function (i, val) {
return splice(val, start, "\t");
});
setCursor($textarea[0], start +1);
} else {
// indentation?? this ought to be fun.
}
}
// simulate a keypress so the event goes through..
// prevent default behaviour for tab
e.preventDefault();
rt.bumpSharejs();
break;
default:
break;
}
});
$textarea.on('change', function () {
rt.bumpSharejs();
});
$run.click(function (e) {
e.preventDefault();