40 | 41 |

42 | 43 |

Browser Mirror

44 | 45 |

Browser Mirror is a way of sharing your browser session with anyone 46 | else. You share your session and you'll get a link which you can give 47 | to another person — they'll see what you see, and (with limits) 48 | they can interact with the page at the same time as you.

49 | 50 |

Getting Started

51 | 52 |

Install the Firefox addon (no restart required!):

53 | 54 |

55 | Install The Addon 56 |

57 | 58 |

After installation you should see a link in the bottom right of 59 | your browser, like this:

60 | 61 |

If you don't see that you might need to display the Add-on 62 | bar, you can do this with View > Toolbars > 63 | Add-on bar 64 | (read 65 | more here).

66 | 67 |

Once you've installed the addon, go to a page, 68 | click share, and a sidebar will open up — as long as the 70 | sidebar is open you are sharing your session (though maybe no one else 71 | is looking!) To invite someone to actually look at what you are 72 | doing, click share to get a link:

73 | 74 |

75 | 76 |

Click it:

77 | 78 |

79 | 80 |

Give that link to a friend, and they will see what's in your 81 | tab. (Each time you click share it will give you a new link.)

83 | 84 |

85 | 86 |

87 | 88 |

Screencast / video intro

89 | 90 |

91 |

92 | 93 |

94 | 95 |

96 | 97 |

How Does It Work?

98 | 99 |

Browser Mirror is different than a typical screen-sharing 100 | applications. Instead of sharing the image that you see on 101 | the screen, it shares the page that you are looking at. It's 102 | also not the same as sharing the URL — the other person 103 | sees what you are looking at, they aren't just following 104 | along with the same URL. So you can look at a private page on an 105 | intranet, or something that is bound to a session, like airplane 106 | ticket purchases. As you continue to surf, the other person will 107 | follow along. If you are using a dynamic application, the other 108 | person will see the results as you interact with the application.

109 | 110 |

In most cases you can both interact with forms, though in some 111 | fancier applications your friend may not be able to use the full 112 | functionality of some parts of the page.

113 | 114 |

In technical terms, what Browser Mirror does is send the DOM to 115 | the other person. That is more or less the same as sending the HTML 116 | of the page — but without any of the special information the 117 | server uses to identify you, like cookies or Javascript state. Only 118 | the visible parts of the page are sent. This is somewhat 119 | like a screen sharing program, which sends pixels instead of DOM 120 | elements. Currently the elements are captured at regular intervals, 121 | and diffs are sent to cut down on traffic.

122 | 123 |

124 | 125 |

126 | 127 |

The Code

128 | 129 |

The code is hosted on github.

131 | 132 |

The code contains a Firefox Add-on, a simple Node.js server that 133 | handles communication between the two browsers, and a web site for the 134 | client to view.

135 | 136 |

137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Example document 4 | 5 | 16 | 17 | 18 | 19 |

Example

20 | 21 |

This is an example document. 22 | A field: 23 |

24 | 25 |

A link: testy

26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /lib/sidebar.js: -------------------------------------------------------------------------------- 1 | const { Cc, Ci } = require("chrome"); 2 | const { setInterval, clearTimeout } = require("timers"); 3 | const tabs = require("tabs"); 4 | const windows = require("windows"); 5 | 6 | // This tries to dynamically recreate the instructions from here 7 | // https://developer.mozilla.org/en-US/docs/Creating_a_Firefox_sidebar 8 | // And expose toggleSidebar as described here: 9 | // https://developer.mozilla.org/en-US/docs/Code_snippets/Sidebar 10 | 11 | var Sidebar = function (options) { 12 | var url = options.url; 13 | if (! url) { 14 | throw 'You must give a url option'; 15 | } 16 | var title = options.title || url; 17 | var name = options.name || url; 18 | name = name.replace(/[^a-zA-Z0-9]/g, ''); 19 | this.name = name; 20 | this.url = url; 21 | this.showForTab = options.showForTab; 22 | this.onClose = options.onClose; 23 | this.onReady = options.onReady; 24 | this.contentScriptFile = options.contentScriptFile; 25 | // FIXME: not sure if it is okay to keep a strong reference: 26 | this.globalWindow = getWindow(); 27 | var doc = this.globalWindow.document; 28 | var container = doc.createElement('broadcasterset'); 29 | var broadcaster = doc.createElement('broadcaster'); 30 | container.id = name + '_container'; 31 | container.appendChild(broadcaster); 32 | broadcaster.id = name; 33 | broadcaster.setAttribute('sidebarurl', url); 34 | broadcaster.setAttribute('sidebartitle', title); 35 | broadcaster.setAttribute('type', 'checkbox'); 36 | broadcaster.setAttribute('group', 'sidebar'); 37 | doc.getElementById('mainCommandSet').appendChild(container); 38 | if (! options.hidden) { 39 | this.show(); 40 | } 41 | if (this.showForTab) { 42 | this._tabActivate = this._tabActivate.bind(this); 43 | tabs.on("activate", this._tabActivate); 44 | } 45 | if (this.onClose) { 46 | this._onClose = this._onClose.bind(this); 47 | var el = doc.getElementById('sidebar-header'); 48 | var child = el.querySelector('.tabs-closebutton'); 49 | child.addEventListener("click", this._onClose, false); 50 | } 51 | }; 52 | 53 | Sidebar.prototype = { 54 | 55 | show: function show() { 56 | this.globalWindow.toggleSidebar(this.name, true); 57 | if (this.onReady) { 58 | this._pollOnReady(this.onReady); 59 | } 60 | }, 61 | 62 | hide: function hide() { 63 | var w = this.globalWindow; 64 | var broadcaster = w.document.getElementById(this.name); 65 | if (broadcaster.getAttribute('checked') == 'true') { 66 | w.toggleSidebar(); 67 | } 68 | // Otherwise the sidebar isn't currently showing 69 | }, 70 | 71 | window: function window() { 72 | var doc = this.globalWindow.document; 73 | var sidebar = doc.getElementById('sidebar'); 74 | return sidebar.contentWindow; 75 | }, 76 | 77 | isShowing: function isShowing() { 78 | var doc = this.globalWindow.document; 79 | var el = doc.getElementById(this.name); 80 | return el.getAttribute('checked') == 'true'; 81 | }, 82 | 83 | _pollOnReady: function (callback) { 84 | // For some reason nothing else I try works 85 | var sidebar = this.globalWindow.document.getElementById('sidebar'); 86 | var url = this.url; 87 | var id = null; 88 | function check() { 89 | if (sidebar.contentDocument.location.href == url && sidebar.contentDocument.readyState == "complete") { 90 | clearTimeout(id); 91 | id = null; 92 | this._addContentScripts(); 93 | callback(); 94 | } 95 | } 96 | id = setInterval(check.bind(this), 100); 97 | }, 98 | 99 | _addContentScripts: function _addContentScripts() { 100 | if (! this.contentScriptFile) { 101 | return; 102 | } 103 | var cs = this.contentScriptFile; 104 | if (typeof cs == "string") { 105 | cs = [cs]; 106 | } 107 | for (var i=0; i this.MAX_PING_TIME; 165 | }, 166 | 167 | removeUser: function () { 168 | if (this.userElement) { 169 | this.userElement.parentNode.removeChild(this.userElement); 170 | } 171 | this.userElement = null; 172 | this.users.removeUser(this); 173 | }, 174 | 175 | addToUserList: function (userListEl) { 176 | if (this.userElement) { 177 | this.removeUser(); 178 | } 179 | if (! userListEl) { 180 | return; 181 | } 182 | var doc = userListEl.ownerDocument; 183 | this.userElement = doc.createElement('div'); 184 | this.userElement.className = 'user'; 185 | var name = doc.createElement('span'); 186 | name.className = 'username'; 187 | this.userElement.appendChild(name); 188 | userListEl.appendChild(this.userElement); 189 | } 190 | 191 | }; 192 | 193 | function secureGravatar(email, size, fallback) { 194 | email = email.replace(/^\s*/, ''); 195 | email = email.replace(/\s*$/, ''); 196 | email = email.toLowerCase(); 197 | return ('https://secure.gravatar.com/avatar/' + 198 | hex_md5(email) + 199 | '?size=' + encodeURIComponent(size) + 200 | 'd=' + encodeURIComponent(fallback)); 201 | } 202 | 203 | 204 | if (typeof require != "undefined") { 205 | hex_md5 = require("./chrome-md5.js").hex_md5; 206 | setTimeout = require("timers").setTimeout; 207 | } 208 | 209 | if (typeof exports != "undefined") { 210 | exports.Users = Users; 211 | } 212 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var WebSocketServer = require('websocket').server; 2 | var WebSocketRouter = require('websocket').router; 3 | var http = require('http'); 4 | var https = require('https'); 5 | var static = require('node-static'); 6 | var parseUrl = require('url').parse; 7 | var fs = require('fs'); 8 | 9 | // FIXME: this is a terrible way to override the mimetype: 10 | var mime = require('./node_modules/node-static/lib/node-static/mime.js'); 11 | mime.contentTypes['xpi'] = 'application/x-xpinstall'; 12 | 13 | var dataRoot = new static.Server(__dirname + '/data', {cache: 7200}); 14 | var siteRoot = new static.Server(__dirname + '/site', {cache: 7200}); 15 | 16 | var server = http.createServer(function(request, response) { 17 | var url = parseUrl(request.url); 18 | var filename = null; 19 | var app = null; 20 | if (url.pathname == '/') { 21 | filename = 'homepage.html'; 22 | app = siteRoot; 23 | } else if (url.pathname.indexOf('/data/') == 0) { 24 | filename = url.pathname.substr('/data/'.length); 25 | app = dataRoot; 26 | } else if (url.pathname.indexOf('/static/') == 0) { 27 | filename = url.pathname.substr('/static/'.length); 28 | app = siteRoot; 29 | } else if (url.pathname.search(/^\/[^\/]+\/?$/) == 0) { 30 | filename = '/view.html'; 31 | app = siteRoot; 32 | } 33 | if (filename) { 34 | // FIXME: doesn't handle 404s (stops entire server): 35 | var fullPath = app.resolve(filename); 36 | fs.exists(fullPath, function (exists) { 37 | if (! exists) { 38 | write404(response); 39 | } else { 40 | app.serveFile(filename, 200, {}, request, response); 41 | } 42 | }); 43 | return; 44 | } 45 | console.log((new Date()) + ' Received request for ' + request.url); 46 | write404(response); 47 | }); 48 | 49 | function write404(response) { 50 | response.writeHead(404); 51 | response.end(); 52 | } 53 | 54 | function startServer(port) { 55 | server.listen(port, '0.0.0.0', function() { 56 | console.log((new Date()) + ' Server is listening on port ' + port); 57 | }); 58 | } 59 | 60 | var wsServer = new WebSocketServer({ 61 | httpServer: server, 62 | // 10Mb max size (1Mb is default, maybe unnecessary) 63 | maxReceivedMessageSize: 0x1000000, 64 | // The browser doesn't seem to break things up into frames (not sure what this means) 65 | // and the default of 64Kb was exceeded; raised to 1Mb 66 | maxReceivedFrameSize: 0x100000, 67 | // Using autoaccept because the origin is somewhat dynamic 68 | // (but maybe is not anymore) 69 | // FIXME: make this fixed 70 | autoAcceptConnections: false 71 | }); 72 | 73 | function originIsAllowed(origin) { 74 | // Unfortunately the origin will be whatever page you are sharing, which is 75 | // any possible origin. 76 | console.log('got origin', origin); 77 | return true; 78 | } 79 | 80 | var allConnections = {}; 81 | var verifiedClientIds = {}; 82 | 83 | var ID = 0; 84 | 85 | wsServer.on('request', function(request) { 86 | if (!originIsAllowed(request.origin)) { 87 | // Make sure we only accept requests from an allowed origin 88 | request.reject(); 89 | console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.'); 90 | return; 91 | } 92 | 93 | var id = request.httpRequest.url.replace(/^\/hub\/+/, '').replace(/\/.*/, ''); 94 | 95 | // FIXME: we should use a protocol here instead of null, but I can't get it to work 96 | var connection = request.accept(null, request.origin); 97 | connection.ID = ID++; 98 | if (! allConnections[id]) { 99 | allConnections[id] = []; 100 | } 101 | allConnections[id].push(connection); 102 | console.log((new Date()) + ' Connection accepted to ' + JSON.stringify(id) + ' ID:' + connection.ID); 103 | connection.on('message', function(message) { 104 | var parsed = JSON.parse(message.utf8Data); 105 | if (parsed.verifyEmail) { 106 | // FIXME: move this into a function 107 | var result = ''; 108 | console.log('Sending verification'); 109 | var body = "assertion=" + encodeURIComponent(parsed.verifyEmail.assertion) + 110 | "&audience=" + encodeURIComponent(parsed.verifyEmail.audience); 111 | var httpReq = https.request({ 112 | hostname: "verifier.login.persona.org", 113 | path: "/verify", 114 | method: "POST", 115 | headers: { 116 | "Content-Length": body.length, 117 | "Content-Type": "application/x-www-form-urlencoded" 118 | } 119 | }, function (resp) { 120 | resp.setEncoding("utf8"); 121 | resp.on("data", function (chunk) { 122 | result += chunk; 123 | }); 124 | resp.on("end", function () { 125 | console.log('end on', result); 126 | try { 127 | result = JSON.parse(result); 128 | } catch (e) { 129 | result = {status: "error", message: "Internal: " + e}; 130 | } 131 | var verified = {clientVerified: result, clientId: parsed.clientId}; 132 | verified = JSON.stringify(verified); 133 | if (result.status == "okay") { 134 | verifiedClientIds[parsed.verifyEmail.clientId] = result; 135 | for (var i=0; i'; 295 | } 296 | var replSrc = null; 297 | if (el.tagName == 'IFRAME') { 298 | // FIXME: need to add element 299 | try { 300 | var html = this.staticHTML(el.contentWindow.document.documentElement); 301 | replSrc = this.encodeData('text/html', html); 302 | } catch (e) { 303 | console.warn('Had to skip iframe for permission reasons:', e+''); 304 | } 305 | } 306 | var s = '<' + el.tagName; 307 | var attrs = el.attributes; 308 | var l; 309 | if (attrs && (l = attrs.length)) { 310 | for (var i=0; i'; 330 | } 331 | return s; 332 | }; 333 | 334 | Freeze.getAttributes = function (el) { 335 | var result = []; 336 | var attrs = el.attributes; 337 | if (attrs && attrs.length) { 338 | var l = attrs.length; 339 | for (var i=0; i 16) bkey = binl_md5(bkey, key.length * 8); 58 | 59 | var ipad = Array(16), opad = Array(16); 60 | for(var i = 0; i < 16; i++) 61 | { 62 | ipad[i] = bkey[i] ^ 0x36363636; 63 | opad[i] = bkey[i] ^ 0x5C5C5C5C; 64 | } 65 | 66 | var hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8); 67 | return binl2rstr(binl_md5(opad.concat(hash), 512 + 128)); 68 | } 69 | 70 | /* 71 | * Convert a raw string to a hex string 72 | */ 73 | function rstr2hex(input) 74 | { 75 | try { hexcase } catch(e) { hexcase=0; } 76 | var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef"; 77 | var output = ""; 78 | var x; 79 | for(var i = 0; i < input.length; i++) 80 | { 81 | x = input.charCodeAt(i); 82 | output += hex_tab.charAt((x >>> 4) & 0x0F) 83 | + hex_tab.charAt( x & 0x0F); 84 | } 85 | return output; 86 | } 87 | 88 | /* 89 | * Convert a raw string to a base-64 string 90 | */ 91 | function rstr2b64(input) 92 | { 93 | try { b64pad } catch(e) { b64pad=''; } 94 | var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; 95 | var output = ""; 96 | var len = input.length; 97 | for(var i = 0; i < len; i += 3) 98 | { 99 | var triplet = (input.charCodeAt(i) << 16) 100 | | (i + 1 < len ? input.charCodeAt(i+1) << 8 : 0) 101 | | (i + 2 < len ? input.charCodeAt(i+2) : 0); 102 | for(var j = 0; j < 4; j++) 103 | { 104 | if(i * 8 + j * 6 > input.length * 8) output += b64pad; 105 | else output += tab.charAt((triplet >>> 6*(3-j)) & 0x3F); 106 | } 107 | } 108 | return output; 109 | } 110 | 111 | /* 112 | * Convert a raw string to an arbitrary string encoding 113 | */ 114 | function rstr2any(input, encoding) 115 | { 116 | var divisor = encoding.length; 117 | var i, j, q, x, quotient; 118 | 119 | /* Convert to an array of 16-bit big-endian values, forming the dividend */ 120 | var dividend = Array(Math.ceil(input.length / 2)); 121 | for(i = 0; i < dividend.length; i++) 122 | { 123 | dividend[i] = (input.charCodeAt(i * 2) << 8) | input.charCodeAt(i * 2 + 1); 124 | } 125 | 126 | /* 127 | * Repeatedly perform a long division. The binary array forms the dividend, 128 | * the length of the encoding is the divisor. Once computed, the quotient 129 | * forms the dividend for the next step. All remainders are stored for later 130 | * use. 131 | */ 132 | var full_length = Math.ceil(input.length * 8 / 133 | (Math.log(encoding.length) / Math.log(2))); 134 | var remainders = Array(full_length); 135 | for(j = 0; j < full_length; j++) 136 | { 137 | quotient = Array(); 138 | x = 0; 139 | for(i = 0; i < dividend.length; i++) 140 | { 141 | x = (x << 16) + dividend[i]; 142 | q = Math.floor(x / divisor); 143 | x -= q * divisor; 144 | if(quotient.length > 0 || q > 0) 145 | quotient[quotient.length] = q; 146 | } 147 | remainders[j] = x; 148 | dividend = quotient; 149 | } 150 | 151 | /* Convert the remainders to the output string */ 152 | var output = ""; 153 | for(i = remainders.length - 1; i >= 0; i--) 154 | output += encoding.charAt(remainders[i]); 155 | 156 | return output; 157 | } 158 | 159 | /* 160 | * Encode a string as utf-8. 161 | * For efficiency, this assumes the input is valid utf-16. 162 | */ 163 | function str2rstr_utf8(input) 164 | { 165 | var output = ""; 166 | var i = -1; 167 | var x, y; 168 | 169 | while(++i < input.length) 170 | { 171 | /* Decode utf-16 surrogate pairs */ 172 | x = input.charCodeAt(i); 173 | y = i + 1 < input.length ? input.charCodeAt(i + 1) : 0; 174 | if(0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF) 175 | { 176 | x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF); 177 | i++; 178 | } 179 | 180 | /* Encode output as utf-8 */ 181 | if(x <= 0x7F) 182 | output += String.fromCharCode(x); 183 | else if(x <= 0x7FF) 184 | output += String.fromCharCode(0xC0 | ((x >>> 6 ) & 0x1F), 185 | 0x80 | ( x & 0x3F)); 186 | else if(x <= 0xFFFF) 187 | output += String.fromCharCode(0xE0 | ((x >>> 12) & 0x0F), 188 | 0x80 | ((x >>> 6 ) & 0x3F), 189 | 0x80 | ( x & 0x3F)); 190 | else if(x <= 0x1FFFFF) 191 | output += String.fromCharCode(0xF0 | ((x >>> 18) & 0x07), 192 | 0x80 | ((x >>> 12) & 0x3F), 193 | 0x80 | ((x >>> 6 ) & 0x3F), 194 | 0x80 | ( x & 0x3F)); 195 | } 196 | return output; 197 | } 198 | 199 | /* 200 | * Encode a string as utf-16 201 | */ 202 | function str2rstr_utf16le(input) 203 | { 204 | var output = ""; 205 | for(var i = 0; i < input.length; i++) 206 | output += String.fromCharCode( input.charCodeAt(i) & 0xFF, 207 | (input.charCodeAt(i) >>> 8) & 0xFF); 208 | return output; 209 | } 210 | 211 | function str2rstr_utf16be(input) 212 | { 213 | var output = ""; 214 | for(var i = 0; i < input.length; i++) 215 | output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xFF, 216 | input.charCodeAt(i) & 0xFF); 217 | return output; 218 | } 219 | 220 | /* 221 | * Convert a raw string to an array of little-endian words 222 | * Characters >255 have their high-byte silently ignored. 223 | */ 224 | function rstr2binl(input) 225 | { 226 | var output = Array(input.length >> 2); 227 | for(var i = 0; i < output.length; i++) 228 | output[i] = 0; 229 | for(var i = 0; i < input.length * 8; i += 8) 230 | output[i>>5] |= (input.charCodeAt(i / 8) & 0xFF) << (i%32); 231 | return output; 232 | } 233 | 234 | /* 235 | * Convert an array of little-endian words to a string 236 | */ 237 | function binl2rstr(input) 238 | { 239 | var output = ""; 240 | for(var i = 0; i < input.length * 32; i += 8) 241 | output += String.fromCharCode((input[i>>5] >>> (i % 32)) & 0xFF); 242 | return output; 243 | } 244 | 245 | /* 246 | * Calculate the MD5 of an array of little-endian words, and a bit length. 247 | */ 248 | function binl_md5(x, len) 249 | { 250 | /* append padding */ 251 | x[len >> 5] |= 0x80 << ((len) % 32); 252 | x[(((len + 64) >>> 9) << 4) + 14] = len; 253 | 254 | var a = 1732584193; 255 | var b = -271733879; 256 | var c = -1732584194; 257 | var d = 271733878; 258 | 259 | for(var i = 0; i < x.length; i += 16) 260 | { 261 | var olda = a; 262 | var oldb = b; 263 | var oldc = c; 264 | var oldd = d; 265 | 266 | a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936); 267 | d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586); 268 | c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819); 269 | b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330); 270 | a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897); 271 | d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426); 272 | c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341); 273 | b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983); 274 | a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416); 275 | d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417); 276 | c = md5_ff(c, d, a, b, x[i+10], 17, -42063); 277 | b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162); 278 | a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682); 279 | d = md5_ff(d, a, b, c, x[i+13], 12, -40341101); 280 | c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290); 281 | b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329); 282 | 283 | a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510); 284 | d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632); 285 | c = md5_gg(c, d, a, b, x[i+11], 14, 643717713); 286 | b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302); 287 | a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691); 288 | d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083); 289 | c = md5_gg(c, d, a, b, x[i+15], 14, -660478335); 290 | b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848); 291 | a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438); 292 | d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690); 293 | c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961); 294 | b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501); 295 | a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467); 296 | d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784); 297 | c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473); 298 | b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734); 299 | 300 | a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558); 301 | d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463); 302 | c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562); 303 | b = md5_hh(b, c, d, a, x[i+14], 23, -35309556); 304 | a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060); 305 | d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353); 306 | c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632); 307 | b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640); 308 | a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174); 309 | d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222); 310 | c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979); 311 | b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189); 312 | a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487); 313 | d = md5_hh(d, a, b, c, x[i+12], 11, -421815835); 314 | c = md5_hh(c, d, a, b, x[i+15], 16, 530742520); 315 | b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651); 316 | 317 | a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844); 318 | d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415); 319 | c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905); 320 | b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055); 321 | a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571); 322 | d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606); 323 | c = md5_ii(c, d, a, b, x[i+10], 15, -1051523); 324 | b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799); 325 | a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359); 326 | d = md5_ii(d, a, b, c, x[i+15], 10, -30611744); 327 | c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380); 328 | b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649); 329 | a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070); 330 | d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379); 331 | c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259); 332 | b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551); 333 | 334 | a = safe_add(a, olda); 335 | b = safe_add(b, oldb); 336 | c = safe_add(c, oldc); 337 | d = safe_add(d, oldd); 338 | } 339 | return Array(a, b, c, d); 340 | } 341 | 342 | /* 343 | * These functions implement the four basic operations the algorithm uses. 344 | */ 345 | function md5_cmn(q, a, b, x, s, t) 346 | { 347 | return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b); 348 | } 349 | function md5_ff(a, b, c, d, x, s, t) 350 | { 351 | return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t); 352 | } 353 | function md5_gg(a, b, c, d, x, s, t) 354 | { 355 | return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t); 356 | } 357 | function md5_hh(a, b, c, d, x, s, t) 358 | { 359 | return md5_cmn(b ^ c ^ d, a, b, x, s, t); 360 | } 361 | function md5_ii(a, b, c, d, x, s, t) 362 | { 363 | return md5_cmn(c ^ (b | (~d)), a, b, x, s, t); 364 | } 365 | 366 | /* 367 | * Add integers, wrapping at 2^32. This uses 16-bit operations internally 368 | * to work around bugs in some JS interpreters. 369 | */ 370 | function safe_add(x, y) 371 | { 372 | var lsw = (x & 0xFFFF) + (y & 0xFFFF); 373 | var msw = (x >> 16) + (y >> 16) + (lsw >> 16); 374 | return (msw << 16) | (lsw & 0xFFFF); 375 | } 376 | 377 | /* 378 | * Bitwise rotate a 32-bit number to the left. 379 | */ 380 | function bit_rol(num, cnt) 381 | { 382 | return (num << cnt) | (num >>> (32 - cnt)); 383 | } 384 | -------------------------------------------------------------------------------- /data/domutils.js: -------------------------------------------------------------------------------- 1 | function getElementPosition(el) { 2 | var top = 0; 3 | var left = 0; 4 | while (el) { 5 | if (el.offsetTop) { 6 | top += el.offsetTop; 7 | } 8 | if (el.offsetLeft) { 9 | left += el.offsetLeft; 10 | } 11 | el = el.offsetParent; 12 | } 13 | return {top: top, left: left}; 14 | } 15 | 16 | function doOnLoad(func) { 17 | /* Runs a function on window load, or immediately if the window has 18 | already loaded */ 19 | if (this.document.readyState == 'complete') { 20 | func(); 21 | } else { 22 | window.addEventListener('load', func, false); 23 | } 24 | } 25 | 26 | 27 | function getScreenRange(doc) { 28 | /* Returns {start, end} where these elements are the closest ones 29 | to the top and bottom of the currently-visible screen. */ 30 | doc = doc || document; 31 | var win = doc.defaultView; 32 | var start = win.pageYOffset; 33 | var end = start + win.innerHeight; 34 | var nodes = iterNodes(document.body); 35 | var atStart = true; 36 | var startEl = null; 37 | var endEl = null; 38 | var startOffsetTop = 0; 39 | var endOffsetTop = 0; 40 | while (true) { 41 | var next = nodes(); 42 | if (! next) { 43 | break; 44 | } 45 | if (next.jsmirrorHide || (! next.jsmirrorId)) { 46 | continue; 47 | } 48 | if (next.nodeType != document.ELEMENT_NODE) { 49 | continue; 50 | } 51 | var offsetTop = 0; 52 | var el = next; 53 | while (el) { 54 | if (el.offsetTop) { 55 | offsetTop += el.offsetTop; 56 | } 57 | el = el.offsetParent; 58 | } 59 | if (atStart) { 60 | if (offsetTop > start) { 61 | startEl = endEl = next; 62 | atStart = false; 63 | startOffsetTop = start - offsetTop; 64 | continue; 65 | } 66 | } else { 67 | if (offsetTop + next.clientHeight > end) { 68 | break; 69 | } else { 70 | endOffsetTop = end - (offsetTop + next.clientHeight); 71 | endEl = next; 72 | } 73 | } 74 | } 75 | return {start: startEl, end: endEl, 76 | startOffsetTop: startOffsetTop, endOffsetTop: endOffsetTop}; 77 | } 78 | 79 | function iterNodes(start) { 80 | /* Iterates, in order (depth-first) all elements in the document. 81 | Returns a callback that yields these elements. */ 82 | var stack = [[start, null]]; 83 | var cursor = 0; 84 | return function () { 85 | if (! stack[cursor]) { 86 | // Finished 87 | return null; 88 | } 89 | var item = stack[cursor]; 90 | if (item[1] === null) { 91 | // We should return the item directly 92 | var result = item[0]; 93 | if (! result) { 94 | throw 'weird item in stack'; 95 | } 96 | if (result.nodeType == this.document.ELEMENT_NODE && result.childNodes.length) { 97 | // Put the children into the item's place 98 | stack[cursor] = [result.childNodes, 0]; 99 | } else { 100 | // Otherwise just pop this item from the stack 101 | stack[cursor] = null; 102 | cursor--; 103 | } 104 | } else { 105 | var result = item[0][item[1]]; 106 | if (! result) { 107 | throw 'weird item in stack'; 108 | } 109 | if (result.nodeType == this.document.ELEMENT_NODE && result.childNodes.length) { 110 | // Add this new element's child to the stack 111 | if (item[1] >= (item[0].length - 1)) { 112 | stack[cursor] = [result.childNodes, 0]; 113 | } else { 114 | item[1]++; 115 | cursor++; 116 | stack[cursor] = [result.childNodes, 0]; 117 | } 118 | } else { 119 | if (item[1] >= (item[0].length - 1)) { 120 | // We've finished with this element's children entirely 121 | stack[cursor] = null; 122 | cursor--; 123 | } else { 124 | // We have more to do, so just go to the next child 125 | item[1]++; 126 | } 127 | } 128 | } 129 | return result; 130 | }; 131 | } 132 | 133 | function expandRange(range) { 134 | /* Given a range object, return 135 | {start: el, startOffset: int, startSibling: bool, 136 | end: el, endOffset: int, endSibling: bool} 137 | The standard range object (https://developer.mozilla.org/en/DOM/range) tends to 138 | point to text nodes which are not referencable for us. If *Sibling is true, then the 139 | offset is after/before the element; if false then it is *interior to* the element. 140 | */ 141 | var result = {start: range.startContainer, end: range.endContainer, 142 | startOffset: range.startOffset, endOffset: range.endOffset, 143 | startText: false, endText: false}; 144 | function doit(name) { 145 | if (result[name].nodeType == this.document.TEXT_NODE) { 146 | while (true) { 147 | var prev = result[name].previousSibling; 148 | if (prev === null) { 149 | result[name] = result[name].parentNode; 150 | result[name+'Text'] = 'inner'; 151 | break; 152 | } else if (prev.nodeType == this.document.ELEMENT_NODE) { 153 | result[name] = prev; 154 | result[name+'Text'] = 'after'; 155 | break; 156 | } else if (prev.nodeType == this.document.TEXT_NODE) { 157 | result[name] = prev; 158 | result[name+'Offset'] += prev.nodeValue.length; 159 | } 160 | } 161 | } 162 | } 163 | doit('start'); doit('end'); 164 | return result; 165 | } 166 | 167 | function showRange(range, elCallback) { 168 | var inner; 169 | if (range.start == range.end && range.startText == 'inner' && range.endText == 'inner') { 170 | // A special case, when the range is entirely within one element 171 | var el = splitTextBetween(range.start, range.startOffset, range.endOffset); 172 | elCallback(el); 173 | return; 174 | } 175 | if (range.startText == 'inner') { 176 | range.start = splitTextAfter(range.start.childNodes[0], range.startOffset); 177 | } else if (range.startText == 'after') { 178 | range.start = splitTextAfter(range.start.nextSibling, range.startOffset); 179 | } else if (range.startOffset) { 180 | inner = range.start.childNodes[range.startOffset]; 181 | // While the spec says these offsets specify children, they don't always, and sometimes 182 | // the "container" is the element selected. 183 | if (inner) { 184 | range.start = inner; 185 | } 186 | } 187 | if (range.endText == 'inner') { 188 | range.end = splitTextBefore(range.end.childNodes[0], range.endOffset); 189 | } else if (range.endText == 'after') { 190 | range.end = splitTextBefore(range.end.nextSibling, range.endOffset); 191 | } else if (range.endOffset) { 192 | inner = range.end.childNodes[range.endOffset]; 193 | if (inner) { 194 | range.end = inner; 195 | } 196 | } 197 | // Now we strictly need to go from the start element to the end element (inclusive!) 198 | var pos = range.start; 199 | while (true) { 200 | elCallback(pos); 201 | pos = getNextElement(pos); 202 | if (pos === null) { 203 | log(WARN, 'pos fell out to null', range.start); 204 | break; 205 | } 206 | while (containsElement(pos, range.end)) { 207 | // FIXME: at some point pos might be a TextNode that needs to be wrapped in 208 | // a span. 209 | pos = pos.childNodes[0]; 210 | } 211 | if (pos == range.end) { 212 | elCallback(pos); 213 | break; 214 | } 215 | } 216 | } 217 | 218 | function containsElement(container, subelement) { 219 | /* Returns true if subelement is inside container 220 | Does not return true if subelement == container */ 221 | if (container == subelement) { 222 | return false; 223 | } 224 | if (container.nodeType != this.document.ELEMENT_NODE) { 225 | return false; 226 | } 227 | for (var i=0; i end) { 326 | throw 'Unexpected range: '+start+' to '+end; 327 | } 328 | var innerLength = end-start; 329 | var startText = ''; 330 | var endText = ''; 331 | var innerText = ''; 332 | var inStart = true; 333 | var inEnd = false; 334 | var textNodes = []; 335 | for (var i=0; i=0; j--) { 276 | var child; 277 | if (typeof pushes[j] == 'string') { 278 | child = document.createTextNode(pushes[j]); 279 | } else { 280 | child = this.deserializeElement(pushes[j]); 281 | } 282 | el.parentNode.insertBefore(child, el); 283 | } 284 | } 285 | if (name === 'append_to') { 286 | var pushes = command[2]; 287 | for (var j=0; j children.length) { 365 | var node = el.childNodes[children.length + offset]; 366 | if (node.jsmirrorHide) { 367 | offset++; 368 | continue; 369 | } 370 | el.removeChild(node); 371 | } 372 | }, 373 | 374 | setAttributes: function (el, attrs) { 375 | var attrLength = 0; 376 | for (var i in attrs) { 377 | if (! attrs.hasOwnProperty(i)) { 378 | continue; 379 | } 380 | attrLength++; 381 | try { 382 | el.setAttribute(i, attrs[i]); 383 | } catch (e) { 384 | // Sometimes this can cause an error, like: 385 | // INVALID_CHARACTER_ERR: DOM Exception 5 386 | // Usually this is an invalid upstream HTML, but so be it - nothing 387 | // we can do about it here. 388 | console.warn("Attribute setting error:", i, attrs[i], e); 389 | } 390 | if (i == 'value') { 391 | el.value = attrs[i]; 392 | } 393 | } 394 | if (el.attributes.length > attrLength) { 395 | // Something needs to be deleted 396 | var toDelete = []; 397 | for (i=0; i') { 436 | var text = (children && children[0]) || ""; 437 | el = document.createComment(text); 438 | el.jsmirrorId = jsmirrorId; 439 | this._elements[jsmirrorId] = el; 440 | return el; 441 | } 442 | el = document.createElement(tagName); 443 | for (var i in attrs) { 444 | if (attrs.hasOwnProperty(i)) { 445 | try { 446 | el.setAttribute(i, attrs[i]); 447 | } catch (e) { 448 | // Sometimes this can cause an error, like: 449 | // INVALID_CHARACTER_ERR: DOM Exception 5 450 | // Usually this is an invalid upstream HTML, but so be it - nothing 451 | // we can do about it here. 452 | console.warn("Attribute setting error:", i, attrs[i], e); 453 | } 454 | } 455 | } 456 | for (var i=0; i= origLength) { 157 | commands.push(["delete_last_text", current.jsmirrorId]); 158 | } else { 159 | commands.push(["deletetext-", origChildren[origPos+1][1]]); 160 | } 161 | } else { 162 | // Some elements have to be deleted 163 | var startText = typeof origChildren[origPos] == "string"; 164 | for (var i=origPos; i= origChildren.length || curStart >= curChildren.length) { 210 | return null; 211 | } 212 | while (typeof curChildren[curStart] == "string" || 213 | (! curChildren[curStart].jsmirrorId)) { 214 | curStart++; 215 | if (curStart >= curChildren.length) { 216 | // There's nothing with an id 217 | return null; 218 | } 219 | } 220 | // First we see if we can find a match for curStart in origChildren 221 | var check = origStart; 222 | var checkId = curChildren[curStart].jsmirrorId; 223 | if (! checkId) { // FIXME: why is this if statement here 224 | while (check < origChildren.length) { 225 | if (typeof origChildren[check] != "string" && checkId == origChildren[check][1]) { 226 | return [check, curStart]; 227 | } 228 | check++; 229 | } 230 | } 231 | // We didn't find a match, so we'll try to find a match for the origStart in curChildren 232 | // This should never really go more than one loop 233 | while (typeof origChildren[origStart] == "string") { 234 | origStart++; 235 | if (origStart >= origChildren.length) { 236 | // There's no more elements 237 | return null; 238 | } 239 | } 240 | checkId = origChildren[origStart][1]; 241 | check = curStart; 242 | while (check < curChildren.length) { 243 | if (typeof curChildren[check] != "string" && 244 | checkId == curChildren[check].jsmirrorId) { 245 | return [origStart, check]; 246 | } 247 | check++; 248 | } 249 | // Fell out of the loop - nothing matched, so we'll try later elements all around 250 | return this.findNextMatch(origChildren, curChildren, origStart+1, curStart+1); 251 | }, 252 | 253 | processCommand: function (command) { 254 | if (command.event) { 255 | this.processEvent(command.event); 256 | } 257 | if (command.change) { 258 | this.processChange(command.change); 259 | } 260 | if (command.highlight) { 261 | this.processHighlight(command.highlight); 262 | } 263 | // Skipping screen 264 | if (command.hello) { 265 | // Have to send the doc again 266 | if (command.isMaster) { 267 | alert('Two computers are sending updates, everything will break!\n' + 268 | 'The other computer is at: ' + (command.href || 'unknown')); 269 | } 270 | this.lastSentDoc = this.lastSentDocData = this.sentRange = null; 271 | this.sendDoc(); 272 | } 273 | }, 274 | 275 | processEvent: function (event) { 276 | var realEvent = this.deserializeEvent(event); 277 | if (realEvent.type == 'keypress') { 278 | event.type = 'keydown'; 279 | var downEvent = this.deserializeEvent(event); 280 | this.dispatchEvent(downEvent, event.target); 281 | } 282 | this.dispatchEvent(realEvent, event.target); 283 | if (realEvent.type == 'keypress') { 284 | event.type = 'keyup'; 285 | var upEvent = this.deserializeEvent(event); 286 | this.dispatchEvent(upEvent, event.target); 287 | } 288 | }, 289 | 290 | deserializeEvent: function (event) { 291 | var value; 292 | var newEvent = this.document.createEvent(event.module); 293 | for (var i in event) { 294 | if (! event.hasOwnProperty(i)) { 295 | continue; 296 | } 297 | value = event[i]; 298 | if (value && typeof value == "object" && value.jsmirrorId) { 299 | var el = this.getElement(value.jsmirrorId) || null; 300 | console.log('derefing object', i, value.jsmirrorId, el); 301 | if (! el) { 302 | log(WARN, "Could not find element", value.jsmirrorId); 303 | } 304 | value = el; 305 | } 306 | event[i] = value; 307 | } 308 | this.initEvent(newEvent, event, event.module); 309 | // This might be redundant: 310 | for (i in event) { 311 | if (! event.hasOwnProperty(i)) { 312 | continue; 313 | } 314 | newEvent[i] = event[i]; 315 | } 316 | return newEvent; 317 | }, 318 | 319 | 320 | initEvent: function (event, data, module) { 321 | /* Instantiates an actual native event object */ 322 | if (module in this.eventAliases) { 323 | module = this.eventAliases[module]; 324 | } 325 | if (module === 'UIEvents') { 326 | event.initUIEvent( 327 | data.type, 328 | data.canBubble || true, 329 | data.cancelable || true, 330 | data.view || window, 331 | data.detail); 332 | } else if (module == 'MouseEvents') { 333 | log(INFO, { 334 | type:data.type, 335 | canBubble:data.canBubble || true, 336 | cancelable:data.cancelable || true, 337 | view:this.document.defaultView, 338 | detail:data.detail === undefined ? 1 : this.detail, 339 | screenX:data.screenX, 340 | screenY:data.screenY, 341 | clientX:data.clientX, 342 | clientY:data.clientY, 343 | ctrlKey:data.ctrlKey, 344 | altKey:data.altKey, 345 | shiftKey:data.shiftKey, 346 | metaKey:data.metaKey, 347 | button:data.button, 348 | relatedTraget:data.relatedTarget || null}); 349 | event.initMouseEvent( 350 | data.type, 351 | data.canBubble || true, 352 | data.cancelable || true, 353 | this.document.defaultView, 354 | 1,//data.detail, 355 | data.screenX, 356 | data.screenY, 357 | data.clientX, 358 | data.clientY, 359 | data.ctrlKey, 360 | data.altKey, 361 | data.shiftKey, 362 | data.metaKey, 363 | data.button, 364 | data.relatedTarget || null); 365 | } else if (module == 'HTMLEvents') { 366 | event.initEvent( 367 | data.type, 368 | data.canBubble || true, 369 | data.cancelable || true); 370 | } else if (module == 'KeyboardEvent') { 371 | var method = event.initKeyboardEvent ? 'initKeyboardEvent' : 'initKeyEvent'; 372 | event[method]( 373 | data.type, 374 | data.canBubble || true, 375 | data.cancelable || true, 376 | data.view || window, 377 | data.ctrlKey, 378 | data.altKey, 379 | data.shiftKey, 380 | data.metaKey, 381 | data.keyCode, 382 | data.charCode); 383 | } 384 | }, 385 | 386 | eventAliases: { 387 | UIEvent: 'UIEvents', 388 | KeyEvents: 'KeyboardEvent', 389 | Event: 'HTMLEvents', 390 | Events: 'HTMLEvents', 391 | MouseScrollEvents: 'MouseEvents', 392 | MouseEvent: 'MouseEvents', 393 | HTMLEvent: 'HTMLEvents', 394 | PopupEvents: 'MouseEvents' 395 | }, 396 | 397 | dispatchEvent: function (event, target) { 398 | log(INFO, 'Dispatching internal event', event.type, event, target); 399 | if (target && ! target.dispatchEvent) { 400 | log(WARN, 'huh', event, target, target===window); 401 | target = window; 402 | } 403 | if (target) { 404 | var doDefault = target.dispatchEvent(event); 405 | log(DEBUG, 'should do default', doDefault, event.type, target.tagName, target.href); 406 | if (doDefault && target['on'+event.type]) { 407 | // FIXME: how do you cancel this? 408 | target['on'+event.type](event); 409 | } 410 | if (doDefault) { 411 | if (event.type == 'click') { 412 | this.doDefaultAction(event, target); 413 | } 414 | } 415 | } else { 416 | // FIXME: do other default actions 417 | this.document.dispatchEvent(event); 418 | } 419 | }, 420 | 421 | doDefaultAction: function (event, target) { 422 | if (target.tagName === 'A') { 423 | if (target.href) { 424 | var base = target.href; 425 | var hash = ''; 426 | if (base.indexOf('#') != -1) { 427 | hash = base.substr(base.indexOf('#'), base.length); 428 | base = base.substr(0, base.indexOf('#')); 429 | } 430 | var hereBase = location.href; 431 | if (hereBase.indexOf('#') != -1) { 432 | hereBase = hereBase.substr(0, hereBase.indexOf('#')); 433 | } 434 | if (base === hereBase) { 435 | // Not a remote link, so it's okay 436 | location.hash = hash; 437 | this.channel.send({doc: {hash: hash}}); 438 | return; 439 | } 440 | // FIXME: make this a query: 441 | //this.queryHref(target.href); 442 | location.href = target.href; 443 | } 444 | return; 445 | } 446 | target = target.parentNode; 447 | if (target) { 448 | this.doDefaultAction(event, target); 449 | } 450 | }, 451 | 452 | processChange: function (change) { 453 | var target = this.getElement(change.target); 454 | target.value = change.value; 455 | var realEvent = this.document.createEvent("UIEvent"); 456 | realEvent.initUIEvent( 457 | "change", 458 | true, // canBubble 459 | true, // cancelable 460 | window, // view 461 | {} // detail 462 | ); 463 | var doDefault = target.dispatchEvent(realEvent); 464 | if (doDefault && target.onchange) { 465 | target.onchange(realEvent); 466 | } 467 | // FIXME: if not doDefault, should I set the target.value? 468 | // FIXME: and should I set value after or before firing events? 469 | // A normal change event will also fire lots of keydown and keyup events 470 | // which sometimes are caught instead of a change event. We'll trigger 471 | // a keyup event just to make sure... 472 | realEvent = this.document.createEvent('KeyboardEvent'); 473 | // FIXME: is it okay to leave both keyCode and charCode as 0? 474 | // FIXME: probably should only fire on text fields 475 | // FIXME: should test this with some field that does something special with Return 476 | var method = realEvent.initKeyboardEvent ? 'initKeyboardEvent' : 'initKeyEvent'; 477 | realEvent[method]( 478 | 'keyup', 479 | true, // canBubble 480 | true, // cancelable 481 | window, // view 482 | false, // ctrlKey 483 | false, // altKey 484 | false, // shiftKey 485 | false, // metaKey 486 | 0, // keyCode 487 | 0 // charCode 488 | ); 489 | doDefault = target.dispatchEvent(realEvent); 490 | if (doDefault && target.onkeyup) { 491 | target.onkeyup(realEvent); 492 | } 493 | }, 494 | 495 | processHighlight: function (highlight) { 496 | var el = this.getElement(highlight.target); 497 | if (el) { 498 | this.temporaryHighlight(el, highlight.offsetTop, highlight.offsetLeft, 499 | highlight.mode || 'remote'); 500 | } 501 | }, 502 | 503 | refreshElements: function () { 504 | return; 505 | this.elements = {}; 506 | function recur(elements, el) { 507 | elements[el.jsmirrorId] = el; 508 | var l = el.childNodes.length; 509 | for (var i=0; i').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(f,this)):f.call(this)):b&&b()}function f(){this.$backdrop.remove(),this.$backdrop=null}function g(){var b=this;this.isShown&&this.options.keyboard?a(document).on("keyup.dismiss.modal",function(a){a.which==27&&b.hide()}):this.isShown||a(document).off("keyup.dismiss.modal")}var b=function(b,c){this.options=c,this.$element=a(b).delegate('[data-dismiss="modal"]',"click.dismiss.modal",a.proxy(this.hide,this))};b.prototype={constructor:b,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var b=this,c=a.Event("show");this.$element.trigger(c);if(this.isShown||c.isDefaultPrevented())return;a("body").addClass("modal-open"),this.isShown=!0,g.call(this),e.call(this,function(){var c=a.support.transition&&b.$element.hasClass("fade");b.$element.parent().length||b.$element.appendTo(document.body),b.$element.show(),c&&b.$element[0].offsetWidth,b.$element.addClass("in"),c?b.$element.one(a.support.transition.end,function(){b.$element.trigger("shown")}):b.$element.trigger("shown")})},hide:function(b){b&&b.preventDefault();var e=this;b=a.Event("hide"),this.$element.trigger(b);if(!this.isShown||b.isDefaultPrevented())return;this.isShown=!1,a("body").removeClass("modal-open"),g.call(this),this.$element.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?c.call(this):d.call(this)}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){function d(){a(b).parent().removeClass("open")}var b='[data-toggle="dropdown"]',c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),e,f,g;if(c.is(".disabled, :disabled"))return;return f=c.attr("data-target"),f||(f=c.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,"")),e=a(f),e.length||(e=c.parent()),g=e.hasClass("open"),d(),g||e.toggleClass("open"),!1}},a.fn.dropdown=function(b){return this.each(function(){var d=a(this),e=d.data("dropdown");e||d.data("dropdown",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.dropdown.Constructor=c,a(function(){a("html").on("click.dropdown.data-api",d),a("body").on("click.dropdown",".dropdown form",function(a){a.stopPropagation()}).on("click.dropdown.data-api",b,c.prototype.toggle)})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&c.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu")&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},isHTML:function(a){return typeof a!="string"||a.charAt(0)==="<"&&a.charAt(a.length-1)===">"&&a.length>=3||/^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(a)},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.isHTML(b)?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'

',trigger:"hover",title:"",delay:0}}(window.jQuery),!function(a){var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.isHTML(b)?"html":"text"](b),a.find(".popover-content > *")[this.isHTML(c)?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:''})}(window.jQuery),!function(a){var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();a(e).collapse(f)})})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(a){return a||(this.paused=!0),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide");this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c);e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):typeof c=="string"||(c=f.slide)?e[c]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c=this,d,e;return this.query=this.$element.val(),this.query?(d=a.grep(this.source,function(a){return c.matcher(a)}),d=this.sorter(d),d.length?this.render(d.slice(0,this.options.items)).show():this.shown?this.hide():this):this.shown?this.hide():this},matcher:function(a){return~a.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(a){var b=[],c=[],d=[],e;while(e=a.shift())e.toLowerCase().indexOf(this.query.toLowerCase())?~e.indexOf(this.query)?c.push(e):d.push(e):b.push(e);return b.concat(c,d)},highlighter:function(a){var b=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return a.replace(new RegExp("("+b+")","ig"),function(a,b){return""+b+""})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keypress,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},keypress:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:if(a.type!="keydown")break;a.preventDefault(),this.prev();break;case 40:if(a.type!="keydown")break;a.preventDefault(),this.next()}a.stopPropagation()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'',item:'

'},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery) -------------------------------------------------------------------------------- /data/channels.js: -------------------------------------------------------------------------------- 1 | /* Channel abstraction. Supported channels: 2 | 3 | - WebSocket to an address 4 | - port.emit/port.on proxying 5 | - postMessage between windows 6 | 7 | In the future: 8 | 9 | - XMLHttpRequest to a server (with some form of queuing) 10 | 11 | The interface: 12 | 13 | channel = new ChannelName(parameters) 14 | 15 | The instantiation is per-channel-type 16 | 17 | Methods: 18 | 19 | onmessage: set to function (jsonData) 20 | rawdata: set to true if you want onmessage to receive raw string data 21 | onclose: set to function () 22 | onopen: set to function () 23 | send: function (string or jsonData) 24 | close: function () 25 | 26 | .send() will encode the data if it is not a string. 27 | 28 | (should I include readyState as an attribute?) 29 | 30 | Channels must accept messages immediately, caching if the connection 31 | is not fully established yet. 32 | 33 | */ 34 | 35 | if (typeof exports != "undefined" && typeof require != "undefined" && 36 | typeof setTimeout == "undefined") { 37 | // In an addon context, need to import setTimeout 38 | setTimeout = require("timers").setTimeout; 39 | clearTimeout = require("timers").clearTimeout; 40 | } 41 | 42 | 43 | function AbstractChannel() { 44 | this.constructor.apply(this, arguments); 45 | } 46 | /* Subclasses must define: 47 | 48 | - ._send(string) 49 | - ._setupConnection() 50 | - ._ready() 51 | - .close() (and must set this.closed to true) 52 | 53 | And must call: 54 | 55 | - ._flush() on open 56 | - ._incoming(string) on incoming message 57 | - onclose()/onopen() (not onmessage - instead _incoming) 58 | */ 59 | 60 | AbstractChannel.subclass = function (overrides) { 61 | var C = function () { 62 | this.constructor.apply(this, arguments); 63 | this.baseConstructor.apply(this, arguments); 64 | }; 65 | C.prototype = new AbstractChannel(); 66 | for (var i in overrides) { 67 | if (overrides.hasOwnProperty(i)) { 68 | C.prototype[i] = overrides[i]; 69 | } 70 | } 71 | return C; 72 | }; 73 | 74 | AbstractChannel.prototype = { 75 | onmessage: null, 76 | rawdata: false, 77 | onclose: null, 78 | onopen: null, 79 | closed: false, 80 | 81 | baseConstructor: function () { 82 | this._buffer = []; 83 | this._setupConnection(); 84 | }, 85 | 86 | send: function (data) { 87 | if (this.closed) { 88 | throw 'Cannot send to a closed connection'; 89 | } 90 | if (typeof data != "string") { 91 | data = JSON.stringify(data); 92 | } 93 | if (! this._ready()) { 94 | this._buffer.push(data); 95 | return; 96 | } 97 | this._send(data); 98 | }, 99 | 100 | _flush: function () { 101 | for (var i=0; i this._pingPollMax ? this._pingPollMax : time; 271 | this._pingTimeout = setTimeout(this._setupConnection.bind(this), time); 272 | }, 273 | 274 | _receiveMessage: function (event) { 275 | if (event.source !== this.window) { 276 | return; 277 | } 278 | if (this.expectedOrigin && event.origin != this.expectedOrigin) { 279 | console.info("Expected message from", this.expectedOrigin, 280 | "but got message from", event.origin); 281 | return; 282 | } 283 | if (! this.expectedOrigin) { 284 | this.expectedOrigin = event.origin; 285 | } 286 | if (event.data == "hello") { 287 | this._pingReceived = true; 288 | if (this._pingTimeout) { 289 | clearTimeout(this._pingTimeout); 290 | this._pingTimeout = null; 291 | } 292 | if (this.onopen) { 293 | this.onopen(); 294 | } 295 | this._flush(); 296 | return; 297 | } 298 | this._incoming(event.data); 299 | }, 300 | 301 | close: function () { 302 | this.closed = true; 303 | this._pingReceived = false; 304 | if (this._pingTimeout) { 305 | clearTimeout(this._pingTimeout); 306 | } 307 | window.removeEventListener("message", this._receiveMessage, false); 308 | if (this.onclose) { 309 | this.onclose(); 310 | } 311 | } 312 | 313 | }); 314 | 315 | 316 | /* Handles message FROM an exterior window/parent */ 317 | var PostMessageIncomingChannel = AbstractChannel.subclass({ 318 | 319 | constructor: function (expectedOrigin) { 320 | this.source = null; 321 | this.expectedOrigin = expectedOrigin; 322 | this._receiveMessage = this._receiveMessage.bind(this); 323 | window.addEventListener("message", this._receiveMessage, false); 324 | }, 325 | 326 | toString: function () { 327 | var s = '[PostMessageIncomingChannel'; 328 | if (this.source) { 329 | s += ' bound to source ' + s; 330 | } else { 331 | s += ' awaiting source'; 332 | } 333 | return s + ']'; 334 | }, 335 | 336 | _send: function (data) { 337 | this.source.postMessage(data, this.expectedOrigin); 338 | }, 339 | 340 | _ready: function () { 341 | return !!this.source; 342 | }, 343 | 344 | _setupConnection: function () { 345 | }, 346 | 347 | _receiveMessage: function (event) { 348 | if (this.expectedOrigin && this.expectedOrigin != "*" && 349 | event.origin != this.expectedOrigin) { 350 | // FIXME: Maybe not worth mentioning? 351 | console.info("Expected message from", this.expectedOrigin, 352 | "but got message from", event.origin); 353 | return; 354 | } 355 | if (! this.expectedOrigin) { 356 | this.expectedOrigin = event.origin; 357 | } 358 | if (! this.source) { 359 | this.source = event.source; 360 | } 361 | if (event.data == "hello") { 362 | // Just a ping 363 | this.source.postMessage("hello", this.expectedOrigin); 364 | return; 365 | } 366 | this._incoming(event.data); 367 | }, 368 | 369 | close: function () { 370 | this.closed = true; 371 | window.removeEventListener("message", this._receiveMessage, false); 372 | if (this._pingTimeout) { 373 | clearTimeout(this._pingTimeout); 374 | } 375 | if (this.onclose) { 376 | this.onclose(); 377 | } 378 | } 379 | 380 | }); 381 | 382 | 383 | var CHROME_CHANNEL_EVENT = "BrowserMirrorChromeChannel"; 384 | 385 | /* Sends TO a window or iframe, from a CHROME window. Windows and 386 | iframes can't talk back to a chrome window, so we use another 387 | approach */ 388 | var ChromePostMessageChannel = AbstractChannel.subclass({ 389 | _pingPollPeriod: 100, // milliseconds 390 | 391 | constructor: function (win, doc, expectedOrigin) { 392 | this.expectedOrigin = expectedOrigin; 393 | this._pingReceived = false; 394 | this.doc = doc; 395 | if (win) { 396 | this.bindWindow(win, true); 397 | } 398 | this._receiveMessage = this._receiveMessage.bind(this); 399 | this.doc.addEventListener(CHROME_CHANNEL_EVENT, this._receiveMessage, false, true); 400 | }, 401 | 402 | toString: function () { 403 | var s = '[ChromePostMessageChannel'; 404 | if (this.window) { 405 | s += ' to window ' + this.window; 406 | } else { 407 | s += ' not bound to a window'; 408 | } 409 | if (this.window && ! this._pingReceived) { 410 | s += ' still establishing'; 411 | } 412 | return s + ']'; 413 | }, 414 | 415 | bindWindow: function (win, noSetup) { 416 | if (this.window) { 417 | this.close(); 418 | } 419 | if (win && win.contentWindow) { 420 | win = win.contentWindow; 421 | } 422 | this.window = win; 423 | if (! noSetup) { 424 | this._setupConnection(); 425 | } 426 | }, 427 | 428 | _send: function (data) { 429 | this.window.postMessage(data, this.expectedOrigin || "*"); 430 | }, 431 | 432 | _ready: function () { 433 | return this.window && this.pingReceived; 434 | }, 435 | 436 | _setupConnection: function () { 437 | if (this.closed || this._pingReceived || (! this.window)) { 438 | return; 439 | } 440 | this._send("hello"); 441 | this._pingTimeout = setTimeout(this._setupConnection.bind(this), this._pingPollPeriod); 442 | }, 443 | 444 | _receiveMessage: function (event) { 445 | var el = event.target; 446 | var data = el.getAttribute('data-payload'); 447 | el.parentNode.removeChild(el); 448 | el = null; 449 | if (data == "hello") { 450 | this._pingReceived = true; 451 | if (this._pingTimeout) { 452 | clearTimeout(this._pingTimeout); 453 | this._pingTimeout = null; 454 | } 455 | if (this.onopen) { 456 | this.onopen(); 457 | } 458 | this._flush(); 459 | return; 460 | } 461 | self._incoming(data); 462 | }, 463 | 464 | close: function () { 465 | this.closed = true; 466 | this.doc.remoteEventListener(CHROME_CHANNEL_EVENT, this._receiveMessage, false, true); 467 | if (this._pingTimeout) { 468 | clearTimeout(this._pingTimeout); 469 | } 470 | if (this.onclose) { 471 | this.onclose(); 472 | } 473 | } 474 | 475 | }); 476 | 477 | 478 | /* Handles message FROM an exterior CHROME window/parent, with events 479 | for handling the inability of these windows to talk to their chrome 480 | parents */ 481 | var ChromePostMessageIncomingChannel = AbstractChannel.subclass({ 482 | 483 | constructor: function () { 484 | this._receiveMessage = this._receiveMessage.bind(this); 485 | window.addEventListener("message", this._receiveMessage, false); 486 | }, 487 | 488 | toString: function () { 489 | var s = '[ChromePostMessageIncomingChannel]'; 490 | return s; 491 | }, 492 | 493 | _ready: function () { 494 | return !! document.head; 495 | }, 496 | 497 | _send: function (data) { 498 | var event = document.createEvent("Events"); 499 | event.initEvent(CHROME_CHANNEL_EVENT, true, false); 500 | var el = document.createElement("BrowserMirrorPayloadElement"); 501 | el.setAttribute("data-payload", data); 502 | document.head.appendChild(el); 503 | el.dispatchEvent(event); 504 | }, 505 | 506 | _setupConnection: function () { 507 | }, 508 | 509 | _receiveMessage: function (event) { 510 | if (event.source || event.origin) { 511 | // If either of these are set, it's not a postMessage from a 512 | // Chrome window 513 | // FIXME: warn? Or an option to warn in this case? 514 | return; 515 | } 516 | if (event.data == "hello") { 517 | if (this._ready()) { 518 | this._send("hello"); 519 | } else { 520 | // Wait a moment to respond 521 | setTimeout((function () { 522 | this._receiveMessage(event); 523 | }).bind(this), 100); 524 | } 525 | return; 526 | } 527 | this._incoming(event.data); 528 | }, 529 | 530 | close: function () { 531 | this.closed = true; 532 | window.removeEventListener("message", this._receiveMessage, false); 533 | if (this.onclose) { 534 | this.onclose(); 535 | } 536 | } 537 | 538 | }); 539 | 540 | /* Sends messages over a port. The "port" is the port object, such as self.port 541 | or worker.port; it must implement emit, on, and removeListener. 542 | 543 | Closed and Opened events are sent across the port to indicate when 544 | the remote channel is setup or closed. 545 | */ 546 | var PortChannel = AbstractChannel.subclass({ 547 | 548 | constructor: function (port, prefix) { 549 | this.prefix = prefix || ''; 550 | this.port = port; 551 | this._incoming = this._incoming.bind(this); 552 | this._remoteOpened = this._remoteOpened.bind(this); 553 | this._remoteClosed = this._remoteClosed.bind(this); 554 | this._gotHello = false; 555 | }, 556 | 557 | toString: function () { 558 | var s = '[PortChannel'; 559 | s += ' port: ' + this.port.toString(); 560 | if (this.prefix) { 561 | s += ' prefix: "' + this.prefix + '"'; 562 | } 563 | s += ']'; 564 | return s; 565 | }, 566 | 567 | _setupConnection: function () { 568 | this.port.on(this.prefix + 'Send', this._incoming); 569 | this.port.on(this.prefix + 'Opened', this._remoteOpened); 570 | this.port.on(this.prefix + 'Closed', this._remoteClosed); 571 | this.port.emit("Opened"); 572 | }, 573 | 574 | destroy: function () { 575 | this.port.removeListener(this.prefix + 'Send', this._incoming); 576 | this.port.removeListener(this.prefix + 'Opened', this._remoteOpened); 577 | this.port.removeListener(this.prefix + 'Closed', this._remoteClosed); 578 | }, 579 | 580 | _ready: function () { 581 | // FIXME: is any kind of ping necessary? 582 | return this._gotHello; 583 | }, 584 | 585 | _remoteOpened: function (helloBack) { 586 | this._gotHello = true; 587 | if (! helloBack) { 588 | // We'll say hello back, in case our original hello was lost 589 | this.port.emit("Opened", true); 590 | } 591 | if (this.onopen) { 592 | this.onopen(); 593 | } 594 | this._flush(); 595 | }, 596 | 597 | _remoteClosed: function () { 598 | this._gotHello = false; 599 | if (this.onclose) { 600 | this.onclose(); 601 | } 602 | this.destroy(); 603 | }, 604 | 605 | close: function () { 606 | this.port.emit("Closed"); 607 | this._remoteClosed(); 608 | }, 609 | 610 | _send: function (s) { 611 | this.port.emit("Send", s); 612 | } 613 | 614 | }); 615 | 616 | 617 | /* This proxies to another channel located in another process, via port.emit/port.on */ 618 | var PortProxyChannel = AbstractChannel.subclass({ 619 | 620 | constructor: function (prefix, self_) { 621 | this.prefix = prefix || ''; 622 | this.self = self_ || self; 623 | this._incoming = this._incoming.bind(this); 624 | this._remoteOpened = this._remoteOpened.bind(this); 625 | }, 626 | 627 | toString: function () { 628 | var s = '[PortProxyChannel'; 629 | if (typeof self == "undefined" || this.self !== self) { 630 | s += ' bound to self ' + this.self; 631 | } 632 | if (this.prefix) { 633 | s += ' with prefix "' + this.prefix + '"'; 634 | } 635 | return s + ']'; 636 | }, 637 | 638 | _setupConnection: function () { 639 | this.self.port.on(this.prefix + "IncomingData", this._incoming); 640 | this.self.port.on(this.prefix + "Opened", this._remoteOpened); 641 | }, 642 | 643 | _ready: function () { 644 | // FIXME: is any kind of ping necessary? 645 | return true; 646 | }, 647 | 648 | _send: function (data) { 649 | this.self.port.emit(this.prefix + "SendData", data); 650 | }, 651 | 652 | close: function () { 653 | try { 654 | this.self.port.emit(this.prefix + "Close"); 655 | } catch (e) { 656 | console.log('Error on close', e, e.name); 657 | } 658 | this.self.port.removeListener(this.prefix + "IncomingData", this._incoming); 659 | this.self.port.removeListener(this.prefix + "Opened", this._remoteOpened); 660 | this.closed = true; 661 | if (this.onclose) { 662 | this.onclose(); 663 | } 664 | }, 665 | 666 | _remoteOpened: function () { 667 | // Note this isn't the same as _ready, because we rely on the 668 | // remote connection to do caching/buffering 669 | if (this.onopen) { 670 | this.onopen(); 671 | } 672 | } 673 | 674 | }); 675 | 676 | /* Will handle incoming requests for the given channel over a port. 677 | Returns a function that tears down this connection. The teardown 678 | happens automatically on close. */ 679 | function PortIncomingChannel(channel, prefix, self_) { 680 | prefix = prefix || ''; 681 | self_ = self_ || self; 682 | function remoteSendData(data) { 683 | channel.send(data); 684 | } 685 | function remoteClose() { 686 | self_.port.removeListener(prefix + "SendData", remoteSendData); 687 | self_.port.removeListener(prefix + "Close", remoteClose); 688 | channel.close(); 689 | } 690 | self_.port.on(prefix + "SendData", remoteSendData); 691 | self_.port.on(prefix + "Close", remoteClose); 692 | channel.rawdata = true; 693 | channel.onmessage = function (data) { 694 | self_.port.emit(prefix + "IncomingData", data); 695 | }; 696 | channel.onopen = function () { 697 | self_.port.emit(prefix + "Opened"); 698 | }; 699 | channel.onclose = function () { 700 | // FIXME: call remoteClose? 701 | self_.port.emit(prefix + "Closed"); 702 | }; 703 | return { 704 | close: remoteClose 705 | }; 706 | } 707 | 708 | /* Echos all the connection proxying from from_ (the worker that wants 709 | a connection) to to_ (the worker that actually implements the 710 | connection). Returns a function that will tear down the connection. */ 711 | function EchoProxy(from_, to_, prefix) { 712 | prefix = prefix || ''; 713 | var bindings = []; 714 | function echo(name, source, dest) { 715 | function echoer() { 716 | var args = [name]; 717 | for (var i=0; i

Waiting for connection...