1 /***********************************************************************2 (c) Copyright 2014 Telefónica I+D. Printed in Spain (Europe). All Rights3 Reserved.4 5 The copyright to the software program(s) is property of Telefónica I+D.6 The program(s) may be used and or copied only with the express written7 consent of Telefónica I+D or in accordance with the terms and conditions8 stipulated in the agreement/contract under which the program(s) have9 been supplied.10 ************************************************************************/11 12 /***********************************************************************13 Jedi - Json EDIt14 ************************************************************************/15 16 (function(context) {17 18 function cloneObject(o) {19 return JSON.parse(JSON.stringify(o));20 }21 22 23 var toggle_class_closed = function(e) {24 this.parentNode.classList.toggle('bracket-collapsed');25 };26 27 28 var JediString = function(root) {29 this.dom = document.createElement('div');30 this.dom.setAttribute('contentEditable', root.content_editable);31 this.dom.setAttribute('component', 'JediString');32 this.dom.root = root;33 34 this.dom.addEventListener('blur', JediString.prototype._event_change, true);35 };36 JediString.prototype.load = function(data, path) {37 this.dom.textContent = data;38 this.dom.path = path.join('.');39 };40 JediString.prototype._event_change = function(e) {41 undefined === this.root.event_change || this.root.event_change(this.path, this.textContent, e);42 };43 44 45 var JediNumber = function(root) {46 this.dom = document.createElement('div');47 this.dom.setAttribute('contentEditable', root.content_editable);48 this.dom.setAttribute('component', 'JediNumber');49 this.dom.root = root;50 51 this.dom.addEventListener('blur', JediNumber.prototype._event_change, true);52 };53 JediNumber.prototype.load = function(data, path) {54 this.dom.textContent = data;55 this.dom.path = path.join('.');56 };57 JediNumber.prototype._event_change = function(e) {58 var parsed = parseFloat(this.textContent);59 var sanitized = "" + parsed;60 if (this.textContent != sanitized) {61 this.textContent = sanitized;62 console.log("is not a number");63 }64 if (NaN === parsed) {65 return;66 }67 undefined === this.root.event_change || this.root.event_change(this.path, this.textContent, e);68 };69 70 71 var JediBoolean = function(root) {72 this.dom = document.createElement('div');73 this.dom.setAttribute('component', 'JediBoolean');74 75 this.check = document.createElement('input');76 this.check.setAttribute('type', 'checkbox');77 if (false === root.content_editable) {78 this.check.setAttribute('disabled', true);79 }80 this.check.root = root;81 this.check.addEventListener('click', JediBoolean.prototype._event_change, true);82 this.dom.appendChild(this.check);83 };84 JediBoolean.prototype.load = function(data, path) {85 this.check.path = path.join('.');86 this.check.checked = data;87 };88 JediBoolean.prototype._event_change = function(e){89 undefined === this.root.event_change || this.root.event_change(this.path, this.checked, e);90 };91 92 93 var JediId = function(root) {94 this.dom = document.createElement('div');95 this.dom.setAttribute('component', 'JediId');96 this.dom.root = root; // For the moment this is optional97 };98 JediId.prototype.load = function(data, path) {99 this.dom.innerHTML = '<span>ObjectId(</span>"' + data['$oid'] + '"<span>)</span>';100 this.dom.path = path.join('.'); // for the moment this is optional101 };102 103 104 var JediNull = function(root) {105 this.dom = document.createElement('div');106 this.dom.setAttribute('component', 'JediNull');107 this.dom.textContent = 'null';108 this.dom.root = root; // 100% optional109 };110 JediNull.prototype.load = function(data, path) {111 this.dom.path = path.join('.'); // 100% optional112 };113 114 115 var JediUndefined = function(root) {116 this.dom = document.createElement('div');117 this.dom.setAttribute('component', 'JediUndefined');118 this.dom.textContent = 'undefined';119 this.dom.root = root; // 100% optional120 };121 JediUndefined.prototype.load = function(data, path) {122 this.dom.path = path.join('.'); // 100% optional123 };124 125 126 var JediKeyValue = function() {127 var key = '';128 129 this.dom = document.createElement('div');130 this.dom.setAttribute('component', 'JediKeyValue');131 132 this.key = document.createElement('div');133 this.key.classList.add('key');134 this.dom.appendChild(this.key);135 136 this.value = document.createElement('div');137 this.value.classList.add('value');138 this.dom.appendChild(this.value);139 };140 JediKeyValue.prototype.setKey = function(k) {141 this.key.textContent = key = k;142 };143 144 145 var JediArray = function(root) {146 this.root = root;147 148 this.items = null;149 150 this.dom = document.createElement('div');151 this.dom.setAttribute('component', 'JediArray');152 153 this.open = document.createElement('div');154 this.open.classList.add('bracket-open');155 this.open.textContent = '[';156 this.open.addEventListener('click', toggle_class_closed, true);157 this.dom.appendChild(this.open);158 159 this.content = document.createElement('div');160 this.content.classList.add('content');161 this.dom.appendChild(this.content);162 163 this.close = document.createElement('div');164 this.close.classList.add('bracket-close');165 this.close.textContent = ']';166 this.close.addEventListener('click', toggle_class_closed, true);167 this.dom.appendChild(this.close);168 };169 JediArray.prototype.load = function(data, path) {170 // TODO: clear this171 for (i in data) { // TODO: change i by key172 var type = typeof data[i];173 if ('_id' == i) {174 type = 'id';175 } else if ('object' == type && data[i] instanceof Array) {176 type = 'array';177 } else if ('object' == type && null === data[i]) {178 type = 'null';179 }180 181 var subpath = cloneObject(path);182 subpath.push(i);183 184 var mkv = new JediKeyValue();185 mkv.setKey(i);186 187 switch (type) {188 case 'id':189 var mi = new JediId(this.root);190 mi.load(data[i], subpath);191 mkv.value.appendChild(mi.dom);192 break;193 case 'undefined':194 var mu = new JediUndefined();195 mkv.value.appendChild(mu.dom);196 break;197 case 'null':198 var mn = new JediNull();199 mkv.value.appendChild(mn.dom);200 break;201 case 'boolean':202 var mb = new JediBoolean(this.root);203 mb.load(data[i], subpath);204 mkv.value.appendChild(mb.dom);205 break;206 case 'string':207 var ms = new JediString(this.root);208 ms.load(data[i], subpath);209 mkv.value.appendChild(ms.dom);210 break;211 case 'number':212 var mn = new JediNumber(this.root);213 mn.load(data[i], subpath);214 mkv.value.appendChild(mn.dom);215 break;216 case 'object':217 var mo = new JediDocument(this.root);218 mo.load(data[i], subpath);219 mkv.value.appendChild(mo.dom);220 break;221 case 'array':222 var ma = new JediArray(this.root);223 ma.load(data[i], subpath);224 mkv.value.appendChild(ma.dom);225 break;226 }227 228 this.content.appendChild(mkv.dom);229 }230 };231 232 233 var JediDocument = function(root) {234 this.root = root;235 236 this.items = null;237 238 this.dom = document.createElement('div');239 this.dom.setAttribute('component', 'JediDocument');240 241 this.open = document.createElement('div');242 this.open.classList.add('bracket-open');243 this.open.textContent = '{';244 this.open.addEventListener('click', toggle_class_closed, true);245 this.dom.appendChild(this.open);246 247 this.content = document.createElement('div');248 this.content.classList.add('content');249 this.dom.appendChild(this.content);250 251 this.close = document.createElement('div');252 this.close.classList.add('bracket-close');253 this.close.addEventListener('click', toggle_class_closed, true);254 this.close.textContent = '}';255 this.dom.appendChild(this.close);256 257 };258 JediDocument.prototype.load = function(data, path) {259 // TODO: clear this260 261 var keys = Object.keys(data);262 keys.sort();263 264 for (var key in keys) {265 key = keys[key];266 267 if (this.root.skip_keys.indexOf(key) >= 0) {268 continue;269 }270 271 var value = data[key];272 var type = typeof value;273 274 if ('_id' === key) {275 type = 'id';276 } else if ('object' == type && value instanceof Array) {277 type = 'array';278 } else if ('object' == type && value === null) {279 type = 'null';280 }281 282 var subpath = cloneObject(path);283 subpath.push(key);284 285 var mkv = new JediKeyValue();286 mkv.setKey(key);287 288 switch (type) {289 case 'id':290 var mi = new JediId(this.root);291 mi.load(value, subpath);292 mkv.value.appendChild(mi.dom);293 break;294 case 'undefined':295 var mu = new JediUndefined(this.root);296 mkv.value.appendChild(mu.dom);297 break;298 case 'null':299 var mn = new JediNull(this.root);300 mkv.value.appendChild(mn.dom);301 break;302 case 'boolean':303 var mb = new JediBoolean(this.root);304 mb.load(value, subpath);305 mkv.value.appendChild(mb.dom);306 break;307 case 'string':308 var ms = new JediString(this.root);309 ms.load(value, subpath);310 mkv.value.appendChild(ms.dom);311 break;312 case 'number':313 var mn = new JediNumber(this.root);314 mn.load(value, subpath);315 mkv.value.appendChild(mn.dom);316 break;317 case 'object':318 var mo = new JediDocument(this.root);319 mo.load(value, subpath);320 mkv.value.appendChild(mo.dom);321 break;322 case 'array':323 var ma = new JediArray(this.root);324 ma.load(value, subpath);325 mkv.value.appendChild(ma.dom);326 break;327 }328 329 this.content.appendChild(mkv.dom);330 }331 };332 333 334 var Jedi = function() {335 this.documents = [];336 337 this.event_change = undefined;338 this.content_editable = true;339 this.skip_keys = [];340 341 this.dom = document.createElement('div');342 this.dom.setAttribute('component', 'Jedi');343 };344 Jedi.prototype.setData = function(data) {345 // TODO: destroy all items346 var type = typeof data;347 if ('object' == type && data instanceof Array) {348 // Array349 for (i in data) {350 var d = data[i];351 var item = new JediDocument(this);352 item.load(d, []);353 this.dom.appendChild(item.dom);354 }355 } else if ('object' == type && null !== data) {356 // Object357 var item = new JediDocument(this);358 item.load(data, []);359 this.dom.appendChild(item.dom);360 } else {361 // Do nothing362 }363 };364 365 366 context.Jedi = Jedi;367 368 369 })(window);Enlace
El enlace para compartir es: