/** * @requires javelin-install * @provides javelin-quicksand * @javelin */ /** * Sink into a hopeless, cold mire of limitless depth from which there is * no escape. * * Captures navigation events (like clicking links and using the back button) * and expresses them in Javascript instead, emulating complex native browser * behaviors in a language and context ill-suited to the task. * * By doing this, you abandon all hope and retreat to a world devoid of light * or goodness. However, it allows you to have persistent UI elements which are * not disrupted by navigation. A tempting trade, surely? * * To cast your soul into the darkness, use: * * JX.Quicksand * .setFrame(node) * .start(); */ JX.install('Quicksand', { statics: { _id: 0, _onpage: 0, _cursor: 0, _current: 0, _content: {}, _history: [], _started: false, _frameNode: null, _contentNode: null, /** * Start Quicksand, accepting a fate of eternal torment. */ start: function() { var self = JX.Quicksand; if (self._started) { return; } JX.Stratcom.listen('click', 'tag:a', self._onclick); JX.Stratcom.listen('history:change', null, self._onchange); self._started = true; self._history.push({ id: 0, path: self._getRelativeURI(window.location) }); }, /** * Set the frame node which Quicksand controls content for. */ setFrame: function(frame) { var self = JX.Quicksand; self._frameNode = frame; return self; }, /** * Respond to the user clicking a link. * * After a long list of checks, we may capture and simulate the resulting * navigation. */ _onclick: function(e) { var self = JX.Quicksand; if (!self._frameNode) { // If Quicksand has no frame, bail. return; } if (JX.Stratcom.pass()) { // If something else handled the event, bail. return; } if (!e.isNormalClick()) { // If this is a right-click, control click, etc., bail. return; } if (e.getNode('workflow')) { // Because JX.Workflow also passes these events, it might still want // the event. Don't trigger if there's a workflow node in the stack. return; } var a = e.getNode('tag:a'); var href = a.href; if (!href || !href.length) { // If the the user clicked has no href, or the href is empty, // bail. return; } if (href[0] == '#') { // If this is an anchor on the current page, bail. return; } var uri = new JX.$U(href); var here = new JX.$U(window.location); if (uri.getDomain() != here.getDomain()) { // If the link is off-domain, bail. return; } if (uri.getFragment() && uri.getPath() == here.getPath()) { // If the link has an anchor but points at the current path, bail. // This is presumably a long-form anchor on the current page. // TODO: This technically gets links which change query parameters // wrong: they are navigation events but we won't Quicksand them. return; } // The fate of this action is sealed. Suck it into the depths. e.kill(); // If we're somewhere in history (that is, the user has pressed the // back button one or more times, putting us in a state where pressing // the forward button would do something) and we're navigating forward, // all the stuff ahead of us is about to become unreachable when we // navigate. Throw it away. var discard = (self._history.length - self._cursor) - 1; for (var ii = 0; ii < discard; ii++) { var obsolete = self._history.pop(); self._content[obsolete.id] = false; } // Set up the new state and fire a request to fetch the page content. var path = self._getRelativeURI(uri); var id = ++self._id; JX.History.push(path, id); self._history.push({path: path, id: id}); self._cursor = (self._history.length - 1); self._content[id] = null; self._current = id; new JX.Workflow(href, {__quicksand__: true}) .setHandler(JX.bind(null, self._onresponse, id)) .start(); }, /** * Receive a response from the server with page content. * * Usually we'll dump it into the page, but if the user clicked very fast * it might already be out of date. */ _onresponse: function(id, r) { var self = JX.Quicksand; // Before possibly updating the document, check if this response is still // relevant. // We don't save the new content if the user has already destroyed // the navigation. They can do this by pressing back, then clicking // another link before the content can load. if (self._content[id] === false) { return; } // Otherwise, this data is still relevant (either data on the current // page, or data for a page that's still somewhere in history), so we // save it. var new_content = JX.$H(r.content).getFragment(); self._content[id] = new_content; // If it's the current page, draw it into the browser. It might not be // the current page if the user already clicked another link. if (self._current == id) { self._draw(); } }, /** * Draw the current page. * * After a navigation event or the arrival of page content, we paint it * onto the page. */ _draw: function() { var self = JX.Quicksand; if (self._onpage == self._current) { // Don't bother redrawing if we're already on the current page. return; } if (!self._content[self._current]) { // If we don't have this page yet, we can't draw it. We'll draw it // when it arrives. return; } // Otherwise, we're going to replace the page content. First, save the // current page content. Modern computers have lots and lots of RAM, so // there is no way this could ever create a problem. var old = window.document.createDocumentFragment(); while (self._frameNode.firstChild) { JX.DOM.appendContent(old, self._frameNode.firstChild); } self._content[self._onpage] = old; // Now, replace it with the new content. JX.DOM.setContent(self._frameNode, self._content[self._current]); self._onpage = self._current; // Scroll to the top of the page and trigger any layout adjustments. // TODO: Maybe store the scroll position? JX.DOM.scrollToPosition(0, 0); JX.Stratcom.invoke('resize'); }, /** * Handle navigation events. * * In general, we're going to pull the content out of our history and dump * it into the document. */ _onchange: function(e) { var self = JX.Quicksand; var data = e.getData(); data.state = data.state || null; // Check if we're going back to the first page we started Quicksand on. // We don't have a state value, but can look at the path. if (data.state === null) { if (JX.$U(window.location).getPath() == self._history[0].path) { data.state = 0; } } // Figure out where in history the user jumped to. if (data.state !== null) { self._current = data.state; // Point the cursor at the right place in history. for (var ii = 0; ii < self._history.length; ii++) { if (self._history[ii].id == self._current) { self._cursor = ii; break; } } // Redraw the page. self._draw(); } }, /** * Get just the relative part of a URI, for History operations. */ _getRelativeURI: function(uri) { return JX.$U(uri) .setProtocol(null) .setPort(null) .setDomain(null) .toString(); } } });