No al cierre de webs
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 /**2  * LOggER.js3  * Description: Implements a DOM Inspector.4  * Author: gerardooscarjt@gmail.com5  * Tipical use (after including LOggER.js:6  * 7  // Exploring objects:8  logger.log(window);9  logger.log(10  {11  'my_string':'This is my example',12  'my_number':256,13  'my_list':[1,2,4,8,16,32,64,128],14  'my_object':{15  'a':'Letter A',16  'b':['a','e','i','o','u'],17  'my_null':null18  }19  }20  );21  22  // Show logger from code:23  logger.show();24  25  // Reference a logger entry and update it:26  var c = logger.log('uno');27  c.innerHTML = 'dos';28  29  // Counter example:30  var c = logger.log('Counter: ');31  c.counter = 0;32  logger.show();33  34  function example() {35  c.counter++;36  c.innerHTML = 'Counter: '+c.counter;37  setTimeout(example,10);38  }39  40  example();41  42  * 43 */44 (function(window){45  46  var dom = document.createElement('div');47  dom.id = 'logger';48  49  var list = document.createElement('div');50  list.className = 'logger-list';51  dom.appendChild(list);52  53  var button = document.createElement('button');54  button.className = 'logger-button';55  button.innerHTML = 'loGGer';56  button.addEventListener('click', function(event){57  list.classList.toggle('logger-see');58  }, true);59  dom.appendChild(button);60  61  var counter = 0;62  63  window.addEventListener('load', function(event){64  document.body.appendChild(dom);65  }, true);66 67  window.logger = {68  'show':function() {69  list.classList.add('logger-see');70  },71  'clear':function() {72  var list = document.getElementById('logger');73  list.innerHTML = '';74  counter = 0;75  },76  'log':function(o) {77  counter++;78  var entry = document.createElement('div');79  entry.className = 'log';80  81  var entry_counter = document.createElement('div');82  entry_counter.className = 'entry-counter';83  entry_counter.innerHTML = counter;84  entry.appendChild(entry_counter);85  86  var entry_content = document.createElement('div');87  entry_content.className = 'entry-content';88  entry.appendChild(entry_content);89  90  if (typeof o == 'string') {91  entry_content.innerHTML = o;92  } else {93  var f = null;94  var fa = null;95  var fb = null;96  97  var k;98  var ko=null;99  for (k in o) {100  try {101  ko = o[k];102  103  f = document.createElement('div');104  f.className = 'log-line';105  106  fa = document.createElement('span');107  fa.className = 'log-line-a';108  fa.innerHTML = k+' = ';109  f.appendChild(fa);110  111  fb = document.createElement('span');112  fb.className = 'log-line-b';113  if (typeof ko == 'object') {114  var a = document.createElement('span');115  a.className = 'log-inspect';116  a.innerHTML = ''+ko+'';117  if (ko != null) {118  a.ko = ko;119  a.addEventListener('click', function(event){120  logger.log(this.ko);121  }, true);122  }123  fb.appendChild(a);124  } else if (typeof ko == 'string') {125  var a = document.createElement('textarea');126  a.className = 'log-string';127  a.k = k;128  a.o = o;129  a.addEventListener('blur', function(event){130  this.o[this.k] = this.value;131  }, true);132  a.value = ko;133  fb.appendChild(a);134  } else if (typeof ko == 'number') {135  var a = document.createElement('span');136  a.className = 'log-number';137  a.setAttribute('contentEditable', true);138  a.innerHTML = ko;139  a.k = k;140  a.o = o;141  a.addEventListener('keyup', function(event){142  alert(this.o[this.k]);143  this.o[this.k] = this.value;144  145  }, true);146  fb.appendChild(a);147  } else if (typeof ko == 'boolean') {148  var a = document.createElement('input');149  a.setAttribute('type', 'checkbox');150  a.className = 'log-boolean';151  a.checked = ko;152  a.k = k;153  a.o = o;154  a.addEventListener('click', function(event) {155  this.o[this.k] = this.checked;156  }, true);157  fb.appendChild(a);158  } else if (typeof ko == 'function') {159  var a = document.createElement('pre');160  a.className = 'log-function';161  a.innerHTML = 'function ...';162  a.ko = ko;163  a.addEventListener('click', function(event){164  this.innerHTML = this.ko;165  this.classList.add('log-function-opened');166  }, true);167  168  fb.appendChild(a);169  } else {170  fb.innerHTML = typeof(ko);171  }172  f.appendChild(fb);173  174  entry_content.appendChild(f);175  176  177  } catch(err) {178  f = document.createElement('div');179  f.className = 'log-line log-line-error';180  181  fa = document.createElement('span');182  fa.className = 'log-line-a';183  fa.innerHTML = k;184  f.appendChild(fa);185  186  entry_content.appendChild(f);187  } 188  }189  list.scrollTop = 0;190  }191  192  if (list.firstChild == null) {193  list.appendChild(entry);194  } else {195  list.insertBefore(entry, list.firstChild);196  }197  198  return entry_content;199  }200  }201 202 }(this))203 204 logger.log(window);205 logger.show();206 
Enlace
El enlace para compartir es:

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados