Skip to content
Browse files

Cleanup styling. Improve textarea selectability

  • Loading branch information...
1 parent 044d3dc commit cc6302272e73291a8f474d1d9400059c3d3c29b2 @notlion committed Mar 15, 2012
Showing with 53 additions and 34 deletions.
  1. +12 −1 css/style.css
  2. +12 −5 css/style.scss
  3. +22 −21 main.js
  4. +7 −7 pop.html
View
13 css/style.css
@@ -8,6 +8,8 @@ body {
margin: 0;
height: 100%;
overflow: hidden; }
+ body.popped {
+ background-color: #0c0e0b; }
#canvas {
width: 100%;
@@ -67,9 +69,18 @@ body {
right: 0;
top: 0;
bottom: 0;
- padding: 20px; }
+ padding: 0; }
#code.popped:hover {
background-color: transparent; }
+ #code.popped #code-text {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ padding: 20px;
+ width: auto;
+ height: auto; }
#code-text {
margin: 0;
View
17 css/style.scss
@@ -11,11 +11,13 @@ body {
margin: 0;
height: 100%;
overflow: hidden;
+ &.popped {
+ background-color: rgb(12, 14, 11);
+ }
}
#canvas {
- width: 100%;
- height: 100%;
+ width: 100%; height: 100%;
}
#code {
@@ -37,10 +39,16 @@ body {
}
&.popped {
left: 0; right: 0; top: 0; bottom: 0;
- padding: 20px;
+ padding: 0;
&:hover {
background-color: transparent;
}
+ & #code-text {
+ position: absolute;
+ left: 0; right: 0; top: 0; bottom: 0;
+ padding: 20px;
+ width: auto; height: auto;
+ }
}
}
@@ -49,8 +57,7 @@ body {
border: 0;
outline: none;
resize: none;
- width: 100%;
- height: 100%;
+ width: 100%; height: 100%;
color: white;
background-color: transparent;
font-family: Monospace;
View
43 main.js
@@ -31,7 +31,7 @@ function(core, material, event, params, selector){
code_save.style.display = "block";
code_save.style.opacity = "1";
code_popout.style.display = "block";
- code_popout.style.opacity = "1";
+ code_popout.style.opacity = "1";
code.classList.remove("shut");
}
else{
@@ -64,7 +64,7 @@ function(core, material, event, params, selector){
code_popped = pop;
var popped_code_text = null;
if (pop) {
- code_window = window.open("pop.html", "code_window", "width=500,height=500,scrollbars=yes ,menubar=no,location=no,left=0,top=0");
+ code_window = window.open("pop.html", "code-window", "width=700,height=500,scrollbars=yes,menubar=no,location=no,left=50,top=50");
code_window.addEventListener("load", function(){
popped_code_text = code_window.document.getElementById("code-text");
popped_code_text.value = code_text.value;
@@ -91,23 +91,22 @@ function(core, material, event, params, selector){
setCodePoppedOut(!code_popped);
}, false);
-
- function addCodeEventListeners(code_text) {
+ function addCodeEventListeners(textarea) {
// Compile as you type
- code_text.addEventListener("keydown", function(e){
+ textarea.addEventListener("keydown", function(e){
e.stopPropagation();
if(e.keyCode == 9){ // tab
e.preventDefault();
- var start = code_text.selectionStart;
- var end = code_text.selectionEnd;
+ var start = textarea.selectionStart;
+ var end = textarea.selectionEnd;
- code_text.value = code_text.value.substring(0, start) + " " + code_text.value.substring(end, code_text.value.length);
- code_text.selectionStart = code_text.selectionEnd = start + 2;
- code_text.focus();
+ textarea.value = textarea.value.substring(0, start) + " " + textarea.value.substring(end, textarea.value.length);
+ textarea.selectionStart = textarea.selectionEnd = start + 2;
+ textarea.focus();
}
}, false);
- code_text.addEventListener("keyup", function(e){
+ textarea.addEventListener("keyup", function(e){
e.stopPropagation();
if(e.keyCode == 37 || // left
@@ -116,24 +115,23 @@ function(core, material, event, params, selector){
e.keyCode == 40) // down
return;
- tryCompile(code_text);
+ tryCompile(textarea);
}, false);
- code_text.addEventListener("keypress", function(e){
+ textarea.addEventListener("keypress", function(e){
e.stopPropagation();
}, false);
// Magic Number Dial / Scroll
- code_text.addEventListener("mousewheel", function(e){
- selector.scrollNumber(code_text, e.wheelDelta / 40, function(){
+ textarea.addEventListener("mousewheel", function(e){
+ selector.scrollNumber(textarea, e.wheelDelta / 40, function(){
e.stopPropagation();
e.preventDefault();
- tryCompile(code_text);
+ tryCompile(textarea);
});
}, false);
}
addCodeEventListeners(code_text);
-
// Drag and drop mp3
document.addEventListener("dragover", function(e){
e.stopPropagation();
@@ -150,6 +148,9 @@ function(core, material, event, params, selector){
setCodePoppedOut(false);
}
+
+ // MOUSE //
+
var mouse_move_enabled = false;
var mouse_pos = new core.Vec2(0, 0);
@@ -257,9 +258,9 @@ function(core, material, event, params, selector){
}
}
- function tryCompile(code_text){
+ function tryCompile(textarea){
try{
- var shader_src_frag = code_text.value.trim();
+ var shader_src_frag = textarea.value.trim();
parseShaderOutlets(shader_src_frag, {
"smoothing": function(value){
@@ -285,12 +286,12 @@ function(core, material, event, params, selector){
setMouseMoveEnabled(!!program.uniforms.u_mouse);
- code_text.classList.remove("error");
+ textarea.classList.remove("error");
console.log("Compile Successful!");
}
catch(err){
- code_text.classList.add("error");
+ textarea.classList.add("error");
console.error("Error compiling shader: " + err);
}
}
View
14 pop.html
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html>
<head>
-<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
-<link href="css/style.css" media="all" rel="stylesheet" type="text/css"/>
+ <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
+ <link href="css/style.css" media="all" rel="stylesheet" type="text/css"/>
</head>
-<body>
-<div id="code" class="popped">
-<textarea id="code-text" spellcheck="false">
-</textarea>
-</div>
+<body class="popped">
+ <div id="code" class="popped">
+ <textarea id="code-text" spellcheck="false">
+ </textarea>
+ </div>
</body>
</html>

0 comments on commit cc63022

Please sign in to comment.
Something went wrong with that request. Please try again.