Merge branch 'diffdom' into netflux
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user