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 206 207 logger.show();208 209 210 var c = logger.log('Compass');211 window.addEventListener('deviceorientation', function(e) {212 c.innerHTML = e.absolute + '<br>alpha: ' + e.alpha + '<br>beta: ' + e.beta + '<br>gamma: ' + e.gamma;213 }, true);214 215 var a = logger.log('Accelerometer');216 window.addEventListener('devicemotion', function(e) {217 a.innerHTML = 'x: ' + e.accelerationIncludingGravity.x + '<br>y: ' + e.accelerationIncludingGravity.y + '<br>z: ' + e.accelerationIncludingGravity.z; 218 }, true);219 220 Enlace
El enlace para compartir es: