web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update hack with a slightly better UI

Browse Source
This commit is contained in:
ansuz 2016-04-12 18:51:03 +02:00
parent 71c0a06c3b
commit 9f0cc4ed64
2 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
www/hack/index.html
View File

@ -12,8 +12,14 @@
box-sizing: border-box; box-sizing: border-box;
} }
textarea{ textarea{
position: absolute;
top: 5vh;
left: 0px;
border: 0px;
padding-top: 15px;
width: 100%; width: 100%;
height: 100vh; height: 95vh;
max-width: 100%; max-width: 100%;
max-height: 100vh; max-height: 100vh;
@ -32,26 +38,41 @@
color: #637476; color: #637476;
} }
#run { #panel {
position: fixed; position: fixed;
top: 0px; top: 0px;
right: 0px; right: 0px;
width: 100%;
z-index: 100;
width: 5vw;
height: 5vh; 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; background-color: #222;
color: #CCC; color: #CCC;
display: block;
text-align: center; text-align: center;
border-radius: 5%;
border: 0px;
} }
</style> </style>
</head> </head>
<body> <body>
<textarea></textarea> <textarea></textarea>
<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> <a href="#" id="run">RUN</a>
</div>
</body> </body>
</html> </html>

27
www/hack/main.js
View File

@ -84,16 +84,35 @@ define([
setSelectionRange(el, pos, 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) { $textarea.on('keypress', function (e) {
switch (e.key) { switch (e.key) {
case 'Tab': case 'Tab':
// insert a tab wherever the cursor is... // insert a tab wherever the cursor is...
var position = $textarea.prop("selectionStart"); var start = $textarea.prop('selectionStart');
if (typeof position !== 'undefined') { var end = $textarea.prop('selectionEnd');
if (typeof start !== 'undefined') {
if (start === end) {
$textarea.val(function (i, val) { $textarea.val(function (i, val) {
return splice(val, position, "\t"); return splice(val, start, "\t");
}); });
setCursor($textarea[0], position +1); setCursor($textarea[0], start +1);
} else {
// indentation?? this ought to be fun.
}
} }
// prevent default behaviour for tab // prevent default behaviour for tab
e.preventDefault(); e.preventDefault();