diff options
Diffstat (limited to 'js/record.concat.js')
| -rw-r--r-- | js/record.concat.js | 73 |
1 files changed, 37 insertions, 36 deletions
diff --git a/js/record.concat.js b/js/record.concat.js index bff4d7f..99082a5 100644 --- a/js/record.concat.js +++ b/js/record.concat.js @@ -888,26 +888,26 @@ function GifEncoder(){ } ;var UI_TEMPLATE = [ - '<div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);cursor:crosshair;"></div>', - '<div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>', - '<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;min-width:300px; padding: 4px;cursor:default;">', - 'frames <input type="text" id="framecount" value="30" style="width:30px;">', - 'delay <input type="text" id="framedelay" value="0.06s" style="width:30px;">', - '<button id="record" disabled>record</button>', - '<button id="save" disabled>save</button>', - '<span id="status"></span>', + '<div id="gr_curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);cursor:crosshair;"></div>', + '<div id="gr_outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>', + '<div id="gr_controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;min-width:300px; padding: 4px;cursor:default;">', + 'frames <input type="text" id="gr_framecount" value="30" style="width:30px;">', + 'delay <input type="text" id="gr_framedelay" value="0.06s" style="width:30px;">', + '<button id="gr_record" disabled>record</button>', + '<button id="gr_save" disabled>save</button>', + '<span id="gr_status"></span>', '<br>', - 'w <input type="text" id="w_el" value="" style="width:30px;"> ', - 'h <input type="text" id="h_el" value="" style="width:30px;"> ', - 'x <input type="text" id="x_el" value="" style="width:30px;"> ', - 'y <input type="text" id="y_el" value="" style="width:30px;"> ', + 'w <input type="text" id="gr_w_el" value="" style="width:30px;"> ', + 'h <input type="text" id="gr_h_el" value="" style="width:30px;"> ', + 'x <input type="text" id="gr_x_el" value="" style="width:30px;"> ', + 'y <input type="text" id="gr_y_el" value="" style="width:30px;"> ', '<br>', - '<div id="preview"></div>', + '<div id="gr_preview"></div>', '</div>' ].join("") ;(function(){ - if (document.getElementById("gif-recorder")) return; + if ($("gif-recorder")) return; var canvases = document.getElementsByTagName("canvas") if (canvases.length == 0) { alert("no canvas found"); return; } @@ -933,7 +933,7 @@ function GifEncoder(){ document.body.style.height = "100%" document.body.parentNode.style.width = "100%" document.body.parentNode.style.height = "100%" - // var template = document.getElementById("template").innerHTML + // var template = $("template").innerHTML var el = document.createElement("div") el.id = "gif-recorder" // el.innerHTML = template @@ -942,15 +942,15 @@ function GifEncoder(){ bind() } function bind(){ - curtain = document.getElementById("curtain") - outline = 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 = $("curtain") + outline = $("outline") + controls = $("controls") + w_el = $("w_el") + h_el = $("h_el") + x_el = $("x_el") + y_el = $("y_el") + $("record").addEventListener("click", record, false) + $("save").addEventListener("click", save, false) curtain.addEventListener("mousedown", box_start, false) curtain.addEventListener("mousemove", box_size, false) curtain.addEventListener("mouseup", box_end, false) @@ -1008,16 +1008,16 @@ function GifEncoder(){ e.preventDefault() dragging = false controls.style.display = "block" - document.getElementById("record").focus() + $("record").focus() } - function _int(el){ return parseInt(typeof el == "string" ? document.getElementById(el).value : el.value) } - function _float(el){ return parseFloat(typeof el == "string" ? document.getElementById(el).value : 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 clickable(id){ document.getElementById(id).style.pointerEvents = "auto" } - function unclickable(id){ document.getElementById(id).style.pointerEvents = "none" } + function _int(el){ return parseInt(typeof el == "string" ? $(el).value : el.value) } + function _float(el){ return parseFloat(typeof el == "string" ? $(el).value : el.value) } + function show(id){ $(id).style.display="block" } + function hide(id){ $(id).style.display="none" } + function enable(id){ $(id).removeAttribute("disabled") } + function disable(id){ $(id).setAttribute("disabled","disabled") } + function clickable(id){ $(id).style.pointerEvents = "auto" } + function unclickable(id){ $(id).style.pointerEvents = "none" } function px(n){ return (~~n) + "px" } function record(e){ e.stopPropagation() @@ -1091,8 +1091,9 @@ function GifEncoder(){ throw e } } + function $(s){ return document.getElementById(s) } function status(s){ - document.getElementById("status").innerHTML = s + $("status").innerHTML = s } function encoded_frame(done,count){ status("encoded " + done + " / " + count) @@ -1103,8 +1104,8 @@ function GifEncoder(){ function rendered_url(url){ var image = new Image () lastGif = image.src = url - document.getElementById("preview").innerHTML = "" - document.getElementById("preview").appendChild(image) + $("preview").innerHTML = "" + $("preview").appendChild(image) rendering = false enable("record") enable("save") |