can-route-pushstate.js

/*jshint maxdepth:6, scripturl:true*/
"use strict";
var route = require("can-route");
var bindingProxy = require("can-route/src/binding-proxy");
var canReflect = require("can-reflect");
var canSymbol = require("can-symbol");

var SimpleObservable = require("can-simple-observable");
var ObservationRecorder = require("can-observation-recorder");

var isNode = require("can-globals/is-node/is-node");
var LOCATION = require("can-globals/location/location");
var getDocument = require("can-globals/document/document");
var getGlobal = require("can-globals/global/global");

var domEvents = require("can-dom-events");

var diffObject = require("can-diff/map/map");

var methodsToOverwrite = ["pushState", "replaceState"],

	dispatchSymbol = canSymbol.for("can.dispatch");

function cleanRoot() {
	var location = LOCATION(),
		domain = location.protocol + "//" + location.host,

		root = bindingProxy.call("root"),
		index = root.indexOf(domain);

	if (index === 0) {
		return root.substr(domain.length);
	}
	return root;
}

function getCurrentUrl() {
	var root = cleanRoot(),
		location = LOCATION(),
		loc = (location.pathname + location.search),
		index = loc.indexOf(root);

	return loc.substr(index + root.length);
}

function PushstateObservable() {

	this.replaceStateOnceKeys = [];

	this.replaceStateKeys = [];
	this.dispatchHandlers = this.dispatchHandlers.bind(this);
	this.anchorClickHandler = function(event) {
		PushstateObservable.prototype.anchorClickHandler.call(this, this, event);
	};

	this.keepHash = true;
}

PushstateObservable.prototype = Object.create(SimpleObservable.prototype);
PushstateObservable.constructor = PushstateObservable;
canReflect.assign(PushstateObservable.prototype, {

	root: "/",

	matchSlashes: false,

	paramsMatcher: /^\?(?:[^=]+=[^&]*&)*[^=]+=[^&]*/,

	querySeparator: "?",

	dispatchHandlers: function() {
		var old = this._value;
		this._value = getCurrentUrl();

		if (old !== this._value) {

			this[dispatchSymbol](this._value, old);
		}
	},

	anchorClickHandler: function(node, event) {
		if (!(event.isDefaultPrevented ? event.isDefaultPrevented() : event.defaultPrevented === true)) {

			if (node.href === "javascript://") {
				return;
			}

			if (node.target === "_blank") {
				return;
			}

			if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
				return;
			}

			var linksHost = node.host || window.location.host;

			if (window.location.host === linksHost) {
				var root = cleanRoot();

				if (node.pathname.indexOf(root) === 0) {

					var nodePathWithSearch = node.pathname + node.search,
						url = nodePathWithSearch.substr(root.length);

					if (route.rule(url) !== undefined) {

						if (node.href.indexOf("#") >= 0) {
							this.keepHash = true;
						}

						var windowPathWithSearch = window.location.pathname + window.location.search;
						var shouldCallPreventDefault = nodePathWithSearch !== windowPathWithSearch || node.hash === window.location.hash;

						if (shouldCallPreventDefault && event.preventDefault) {
							event.preventDefault();
						}

						window.history.pushState(null, null, node.href);
					}
				}
			}
		}
	},

	onBound: function() {

		if (isNode()) {
			return;
		}

		var document = getDocument(),
			window = getGlobal();

		this._value = getCurrentUrl();

		domEvents.addDelegateListener(document.documentElement, "click", "a", this.anchorClickHandler);
		var originalMethods = this.originalMethods = {};
		var dispatchHandlers = this.dispatchHandlers;

		canReflect.eachKey(methodsToOverwrite, function(method) {
			this.originalMethods[method] = window.history[method];
			window.history[method] = function(state, title, url) {

				var absolute = url.indexOf("http") === 0;
				var location = LOCATION();
				var searchHash = location.search + location.hash;

				if ((!absolute && url !== location.pathname + searchHash) ||
					(absolute && url !== location.href + searchHash)) {
					originalMethods[method].apply(window.history, arguments);
					dispatchHandlers();
				}
			};
		}, this);

		domEvents.addEventListener(window, "popstate", this.dispatchHandlers);
	},

	onUnbound: function() {

		if(isNode()) {
			return;
		}

		var document = getDocument(),
			window = getGlobal();

		domEvents.removeDelegateListener(document.documentElement, "click", "a", this.anchorClickHandler);

		canReflect.eachKey(methodsToOverwrite, function(method) {
			window.history[method] = this.originalMethods[method];
		}, this);

		domEvents.removeEventListener(window, "popstate", this.dispatchHandlers);
	},

	get: function get() {
		ObservationRecorder.add(this);
		return getCurrentUrl();
	},

	set: function(path) {
		var newProps = route.deparam(path),
			oldProps = route.deparam(getCurrentUrl()),
			method = "pushState",
			changed = {};

		if (this.keepHash && path.indexOf("#") === -1 && window.location.hash) {
			path += window.location.hash;
		}

		diffObject(oldProps, newProps)
			.forEach(function(patch) {

				return changed[patch.key] = true;
			});

		if (this.replaceStateKeys.length) {
			this.replaceStateKeys.forEach(function(replaceKey) {
				if (changed[replaceKey]) {
					method = "replaceState";
				}
			});
		}
		
		if (this.replaceStateOnceKeys.length) {
			this.replaceStateOnceKeys
				.forEach(function(replaceOnceKey, index, thisArray) {
					if (changed[replaceOnceKey]) {
						method = "replaceState";

						thisArray.splice(index, 1);
					}
				});
		}
		window.history[method](null, null, bindingProxy.call("root") + path);
	},

	replaceStateOn: function() {
		canReflect.addValues(this.replaceStateKeys, canReflect.toArray(arguments));
	},

	replaceStateOnce: function() {
		canReflect.addValues(this.replaceStateOnceKeys, canReflect.toArray(arguments));
	},

	replaceStateOff: function() {
		canReflect.removeValues(this.replaceStateKeys, canReflect.toArray(arguments));
		canReflect.removeValues(this.replaceStateOnceKeys, canReflect.toArray(arguments));
	}
});

canReflect.assignSymbols(PushstateObservable.prototype, {
	"can.getValue": PushstateObservable.prototype.get,
	"can.setValue": PushstateObservable.prototype.set,
});

module.exports = PushstateObservable;