Mercurial > eldonilo > lightstring

comparison console/console.js @ 108:5cb4733c5189

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
many api changes
author Sonny Piers <sonny@fastmail.net>
date Fri, 13 Jul 2012 15:26:18 +0200
parents c06ec02217ee
children
comparison
equal deleted inserted replaced
107:704ce44c1a22 108:5cb4733c5189
1 'use strict'; 1 'use strict';
2 2
3 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 3 (function() {
4 var Console = {
5 holder: [],
6 invertedScroll: true,
7 log: function(aLog) {
8 if (document.readyState !== 'complete') {
9 this.holder.push(aLog);
10 return;
11 }
12 //beautify
13 var stanza = vkbeautify.xml(aLog.data, 2, ' ');
14 var entry = document.createElement('div');
15 entry.classList.add('entry');
16 entry.classList.add(aLog.dir);
17 var header = document.createElement('header');
18 var date = new Date();
19 var hours = (date.getHours() < 10 ? '0' : '') + date.getHours();
20 var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
21 var seconds = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds();
22 var timestamp = hours + ':' + minutes + ':' + seconds + '.' + date.getMilliseconds();
23 header.textContent = aLog.dir + ': ' + timestamp;
24 entry.appendChild(header)
25 var pre = document.createElement('pre');
26 pre.textContent = stanza;
27 entry.appendChild(pre);
28 //highlight
29 hljs.highlightBlock(entry.children[1], null, false);
30 var entriesEl = document.querySelector('#entries')
4 31
5 if(!Lightstring) 32 var child = entriesEl.firstChild;
6 var Lightstring = {}; 33 if(child)
34 entriesEl.insertBefore(entry, child);
35 else
36 entriesEl.appendChild(entry)
37 },
38 filter: function(aFilter) {
39 var entries = document.querySelectorAll('.entry pre');
40 for (var i = 0, length = entries.length; i < length; i++) {
41 var entry = entries[i];
42 if (!entry.textContent.match(aFilter))
43 entry.parentNode.hidden = true;
44 else
45 entry.parentNode.hidden = false;
46 }
47 },
48 send: function(aData) {
49 //C'mon you can do better
50 Lightstring.connections[0].send(aData)
51 },
52 init: function() {
53 if (Lightstring.Connection) {
54 Lightstring.Connection.prototype.on('stanza', function(stanza) {
55 Lightstring.console.log({dir: 'in', data: stanza.toString()});
56 });
57 Lightstring.Connection.prototype.on('out', function(stanza) {
58 Lightstring.console.log({dir: 'out', data: stanza.toString()});
59 });
60 }
61 if (document.readyState === 'complete')
62 return this.initView();
7 63
8 Lightstring.console = { 64 document.addEventListener('DOMContentLoaded', this.initView);
9 invertedScroll: true, 65 },
10 log: function(aLog) { 66 initView: function() {
11 var stanza = vkbeautify.xml(aLog.data, 2, ' '); 67 Lightstring.console.holder.forEach(function(log) {
12 var entry = document.createElement('div'); 68 Lightstring.console.log(log);
13 entry.classList.add('entry'); 69 });
14 entry.classList.add(aLog.dir);
15 var header = document.createElement('header');
16 //FIXME date? should come from the origin?
17 header.textContent = aLog.dir + ': ';
18 entry.appendChild(header)
19 var pre = document.createElement('pre');
20 pre.textContent = stanza;
21 entry.appendChild(pre);
22 var entriesEl = document.querySelector('#entries')
23 entriesEl.appendChild(entry);
24 },
25 filter: function(aFilter) {
26 var entries = document.querySelectorAll('.entry pre');
27 for (var i = 0, length = entries.length; i < length; i++) {
28 var entry = entries[i];
29 if (!entry.textContent.match(aFilter))
30 entry.parentNode.hidden = true;
31 else
32 entry.parentNode.hidden = false;
33 70
34 //FIXME use the Mutation Observer? get back to the previous scroll state? 71
35 this.scrollToBottom(); 72 var entriesEl = document.getElementById('entries');
73 Console.entriesEl = entriesEl;
74
75 document.getElementById('input').addEventListener('submit', function(e) {
76 e.preventDefault();
77 Lightstring.console.send(this.elements['field'].value)
78 });
79 document.getElementById('clear').addEventListener('click', function(e) {
80 Lightstring.console.entriesEl.innerHTML = '';
81 });
82 //FIXME allow xpath, xquery, E4X, whatever XML query syntax
83 document.getElementById('filter').addEventListener('input', function(e) {
84 Lightstring.console.filter(this.value);
85 });
86 document.getElementById('input').addEventListener('keypress', function(e) {
87 if (e.keyCode === 13) {
88 if (e.shiftKey) {
89 e.preventDefault();
90 var event = document.createEvent('Event');
91 event.initEvent('submit', true, true);
92 this.dispatchEvent(event);
93 }
94 }
95 });
36 } 96 }
37 }, 97 };
38 send: function(aData) { 98
39 Lightstring.console.source.postMessage({ 99 //Lightstring is defined in the parent window context
40 'send': aData}, document.location.protocol + '//' + document.location.host); 100 if (window.frameElement && window.parent.Lightstring) {
41 }, 101 window.Lightstring = window.parent.Lightstring;
42 scrollToBottom: function() { 102 Lightstring.console = Console;
43 this.entriesEl.scrollTop = (this.entriesEl.scrollHeight - this.entriesEl.clientHeight); 103 Lightstring.console.init();
44 } 104 }
45 }; 105 else {
46 106 //TODO: link to a doc?
47 (function() { 107 console.error('You must embed this in a iframe.');
48 document.addEventListener('DOMContentLoaded', function() { 108 }
49
50 var entriesEl = document.getElementById('entries');
51 entriesEl.addEventListener('scroll', function(e) {
52 if (entriesEl.scrollTop === (entriesEl.scrollHeight - entriesEl.clientHeight))
53 Lightstring.console.invertedScroll = true;
54 else
55 Lightstring.console.invertedScroll = false;
56 })
57
58 new MutationObserver(function(mutations) {
59 if(Lightstring.console.invertedScroll === true)
60 Lightstring.console.scrollToBottom();
61 }).observe(entriesEl, {
62 childList: true,
63 // attributes: false,
64 // characterData: false
65 });
66
67 Lightstring.console.entriesEl = entriesEl;
68 if (Lightstring.console.invertedScroll)
69 Lightstring.console.scrollToBottom();
70
71 window.addEventListener("message", function(e) {
72 if(!Lightstring.console.source)
73 Lightstring.console.source = e.source;
74
75 Lightstring.console.log(e.data);
76 }, false);
77
78 document.getElementById('input').addEventListener('submit', function(e) {
79 e.preventDefault();
80 Lightstring.console.send(this.elements['field'].value)
81 });
82 document.getElementById('clear').addEventListener('click', function(e) {
83 Lightstring.console.entriesEl.innerHTML = '';
84 });
85 //FIXME allow xpath, xquery, E4X, whatever XML query syntax
86 document.getElementById('filter').addEventListener('input', function(e) {
87 Lightstring.console.filter(this.value);
88 });
89 document.getElementById('input').addEventListener('keypress', function(e) {
90 if (e.keyCode === 13) {
91 if (e.shiftKey) {
92 e.preventDefault();
93 var event = document.createEvent('Event');
94 event.initEvent('submit', true, true);
95 this.dispatchEvent(event);
96 }
97 }
98 });
99 });
100 })(); 109 })();