cleanup, error highlight less jumpy

1 files changed, 14 insertions, 23 deletions

diff --git a/js/error.highlight.js b/js/error.highlight.js
index b7c583e..0b478e2 100644
--- a/js/error.highlight.js
+++ b/js/error.highlight.js
@@ -1,23 +1,21 @@
 (function(){
 
-var html
-var textarea
 var dom = {}
 var style = {}
 var pos = {}
 // i use this because a plain <br> collapses vertically sometimes...
 var zero_width_space = '&#xfeff;'
+var height_until_error = 0;
+var height_with_error = 0;
+var scrollbar_width = 0;
 
 var off = function(){
   dom.highlight.style.display = 'none'
 }
 
-var height_until_error = 0;
-var height_with_error = 0;
-
 var on = function(line_num){
-  pos = textarea.getBoundingClientRect()
-  var text = textarea.value;
+  pos = dom.textarea.getBoundingClientRect()
+  var text = dom.textarea.value;
 
   var lines = text.split('\n')
   var lines_until_error = lines.slice(0, line_num)
@@ -35,24 +33,21 @@ var on = function(line_num){
   height_with_error = dom.textmeasure.offsetHeight
 
   reposition_highlight()
-
-};
+}
 
 var reposition_highlight = function(){
-  dom.highlight.style.display = 'block'
 
   var bounds_bottom = pos.top + pos.height
 
-  if (textarea.scrollHeight > textarea.clientHeight) // scrollbar exists
+  if (dom.textarea.scrollHeight > dom.textarea.clientHeight) // scrollbar exists
     dom.highlight.style.width = pos.width - scrollbar_width + "px"
   else
     dom.highlight.style.width = pos.width + "px"
 
   dom.highlight.style.left = pos.left + "px"
 
-  var y_pos = pos.top + height_until_error - textarea.scrollTop
-
-  dom.highlight.style.top = y_pos + html.scrollTop + "px"
+  var y_pos = pos.top + height_until_error - dom.textarea.scrollTop
+  dom.highlight.style.top = y_pos + dom.html.scrollTop + "px"
 
   var height_of_highlight = height_with_error;
 
@@ -64,20 +59,19 @@ var reposition_highlight = function(){
     height_of_highlight = 0
 
   dom.highlight.style.height = height_of_highlight + "px"
+
+  dom.highlight.style.display = 'block'
 }
 
 var calc_textarea_style = function(){
   var $textarea = $("#shader")
-  textarea = $textarea[0]
-  // GG = textarea
+  dom.textarea = $textarea[0]
   
   var props = ['lineHeight', 'fontFamily', 'fontSize', 'padding', 'margin', 'borderWidth', 'width']
 
   for (var i=0, p; p=props[i]; i++){
     style[p] = $textarea.css(p)
   }
-  console.log(style)
-
 }
 
 
@@ -91,13 +85,11 @@ var calc_scrollbar_width = function() {
     // force scrollbars
     outer.style.overflow = "scroll";
     
-    // add innerdiv
     var inner = document.createElement("div");
     inner.style.width = "100%";
     outer.appendChild(inner);        
     
     var width_with_scroll = inner.offsetWidth;
-    // remove divs
     outer.parentNode.removeChild(outer);
     
     return width_no_scroll - width_with_scroll;
@@ -138,23 +130,22 @@ var create_el_highlight = function(){
   document.body.appendChild(el)
 }
 
-var scrollbar_width = 0;
 var init = function(){
+  dom.html = document.querySelector('html')
   calc_textarea_style()
   create_el_highlight()
   create_el_textmeasure()
   scrollbar_width = calc_scrollbar_width()
   textarea.addEventListener('scroll', reposition_highlight)
-  html = document.querySelector('html')
 }
 
+// exports
 error_highlight = {
   init: init,
   on: on,
   off: off
 }
 
-
 })();
 
 error_highlight.init()