width and height

1 files changed, 38 insertions, 7 deletions

diff --git a/js/record.js b/js/record.js
index 396f30a..7e4f0f5 100644
--- a/js/record.js
+++ b/js/record.js
@@ -10,6 +10,7 @@
   encoder.on("rendered-url", rendered_url)
 
   var w, h, x, y;
+  var w_el, h_el, x_el, y_el;
   var last_t, frame_t, count, delay, done;
   var frames = []
   var curtain, outline
@@ -32,21 +33,45 @@
   function bind(){
     curtain = document.getElementById("curtain")
     outline = document.getElementById("outline")
-    controls = document.getElementById("outline")
+    controls = document.getElementById("controls")
+    w_el = document.getElementById("w_el")
+    h_el = document.getElementById("h_el")
+    x_el = document.getElementById("x_el")
+    y_el = document.getElementById("y_el")
     document.getElementById("record").addEventListener("click", record, false)
     document.getElementById("save").addEventListener("click", save, false)
     curtain.addEventListener("mousedown", box_start, false)
     curtain.addEventListener("mousemove", box_size, false)
     curtain.addEventListener("mouseup", box_end, false)
+    w_el.addEventListener("keyup", box_position, false)
+    h_el.addEventListener("keyup", box_position, false)
+    x_el.addEventListener("keyup", box_position, false)
+    y_el.addEventListener("keyup", box_position, false)
     outline.style.display = "none"
-    controls.style.display = "none"
+    controls.style.display = "block"
   }
   function box_start(e){
+    e.stopPropagation()
     x = e.pageX
     y = e.pageY
     w = 1
     h = 1
     dragging = true
+    box_resize()
+  }
+  function box_position(){
+    w = _int(w_el)
+    h = _int(h_el)
+    x = _int(x_el)
+    y = _int(y_el)
+    box_resize()
+  }
+  function box_resize(){
+    if (isNaN(w) || isNaN(h) || isNaN(x) || isNaN(y)) return
+    w_el.value = ~~(w)
+    h_el.value = ~~(h)
+    x_el.value = ~~(x)
+    y_el.value = ~~(y)
     outline.style.left = px(x-1)
     outline.style.top = px(y-1)
     outline.style.width = px(w)
@@ -55,23 +80,29 @@
   }
   function box_size(e){
     if (! dragging) return
+    e.stopPropagation()
     w = e.pageX - x
     h = e.pageY - y
-    outline.style.width = px(w)
-    outline.style.height = px(h)
+    box_resize()
   }
   function box_end(e){
+    e.preventDefault()
     dragging = false
     controls.style.display = "block"
     enable("record")
     document.getElementById("record").focus()
   }
+  function _int(el){ return parseInt(el.value) }
+  function _float(el){ return parseFloat(el.value) }
+  function show(id){ document.getElementById(id).style.display="block" }
+  function hide(id){ document.getElementById(id).style.display="none" }
   function enable(id){ document.getElementById(id).removeAttribute("disabled") }
   function disable(id){ document.getElementById(id).setAttribute("disabled","disabled") }
-  function px(n){ return n + "px" }
+  function px(n){ return (~~n) + "px" }
   function record(){
-    count = parseInt(document.getElementById("framecount").value)
-    delay = parseFloat(document.getElementById("framedelay").value) * 1000
+    count = _int("framecount")
+    delay = _float("framedelay") * 1000
+    if (isNaN(count) || isNaN(delay)) return
     done = 0
     frame_t = 0
     build()