hy-push-state
Version:
Turn static web sites into dynamic web apps
306 lines (251 loc) • 12.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Set", {
enumerable: true,
get: function get() {
return _component.Set;
}
});
Object.defineProperty(exports, "INIT", {
enumerable: true,
get: function get() {
return _constants.INIT;
}
});
Object.defineProperty(exports, "HINT", {
enumerable: true,
get: function get() {
return _constants.HINT;
}
});
Object.defineProperty(exports, "PUSH", {
enumerable: true,
get: function get() {
return _constants.PUSH;
}
});
Object.defineProperty(exports, "POP", {
enumerable: true,
get: function get() {
return _constants.POP;
}
});
exports.pushStateMixin = exports.MIXIN_FEATURE_TESTS = void 0;
var _component = require("hy-component/src/component");
var _rxjs = require("hy-component/src/rxjs");
var _types = require("hy-component/src/types");
var _esm = require("rxjs/_esm5");
var _url = require("../url");
var _common = require("../common");
var _constants = require("./constants");
var _setup = require("./setup");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
// ## Constants
// A set of [Modernizr] tests that are required to run this component.
// These are the bare-minimum requirements, more ad-hoc features tests for optional behavior
// is part of the code below.
var MIXIN_FEATURE_TESTS = new _component.Set([].concat(_toConsumableArray(_component.COMPONENT_FEATURE_TESTS), ["documentfragment", "eventlistener", "history", "promises", "queryselector", "requestanimationframe"]));
exports.MIXIN_FEATURE_TESTS = MIXIN_FEATURE_TESTS;
// Patching the document fragment's `getElementById` function, which is
// not implemented in all browsers, even some modern ones.
DocumentFragment.prototype.getElementById = DocumentFragment.prototype.getElementById || function getElementById(id) {
return this.querySelector("#".concat(id));
}; // ## Push state mixin
var pushStateMixin = function pushStateMixin(C) {
return /*#__PURE__*/function (_setupObservablesMixi) {
_inherits(_class, _setupObservablesMixi);
var _super = _createSuper(_class);
function _class() {
_classCallCheck(this, _class);
return _super.apply(this, arguments);
}
_createClass(_class, [{
key: "setupComponent",
// ### Setup
value: function setupComponent(el, props) {
_get(_getPrototypeOf(_class.prototype), "setupComponent", this).call(this, el, props);
this.saveScrollPosition = this.saveScrollPosition.bind(this);
this.reload$ = new _esm.Subject();
} // This component has no shadow DOM, so we just return the element.
}, {
key: "setupShadowDOM",
value: function setupShadowDOM(el) {
return el;
} // Overriding the setup function.
}, {
key: "connectComponent",
value: function connectComponent() {
if (process.env.DEBUG && !this.replaceIds && !this.el.id) console.warn("hy-push-state needs a 'replace-ids' or 'id' attribute."); // Setting up scroll restoration
if ("scrollRestoration" in window.history) window.history.scrollRestoration = "manual"; // Restore the last scroll position, if any.
this.restoreScrollPostionOnReload(); // Remember the current scroll position (for F5/reloads).
window.addEventListener("beforeunload", this.saveScrollPosition); // Calling the [setup observables function](./setup.md) function.
this.setupObservables(); // TODO: meh...
_get(_getPrototypeOf(_class.prototype), "connectComponent", this).call(this); // Setting the initial `history.state`.
var url = new _url.URL(this.initialHref);
this.updateHistoryState({
type: _constants.INIT,
replace: true,
url: url
});
var replaceEls = this.getReplaceElements(document);
if ((0, _common.isExternal)(this)) this.rewriteURLs(replaceEls); // After all this is done, we can fire the one-time `init` event...
this.fireEvent("init"); // ...and our custom `load` event, which gets fired on every page change.
// We provide similar data as subsequent `load` events,
// however we can't provide an `anchor` or `event`,
// since this `load` event wasn't caused by a user interaction.
this.onLoad({
type: _constants.INIT,
title: this.getTitle(document),
replaceEls: replaceEls,
url: url,
cacheNr: this.cacheNr
});
}
}, {
key: "disconnectComponent",
value: function disconnectComponent() {
_get(_getPrototypeOf(_class.prototype), "disconnectComponent", this).call(this);
window.removeEventListener("beforeunload", this.saveScrollPosition);
} // ### Methods
// Public methods of this component. See [Methods](../../methods.md) for more.
}, {
key: "assign",
value: function assign(url) {
this.reload$.next({
type: _constants.PUSH,
url: new _url.URL(url, this.href),
cacheNr: ++this.cacheNr // eslint-disable-line no-plusplus
});
}
}, {
key: "reload",
value: function reload() {
this.reload$.next({
type: _constants.PUSH,
url: new _url.URL(this.href),
cacheNr: ++this.cacheNr,
// eslint-disable-line no-plusplus
replace: true
});
}
}, {
key: "replace",
value: function replace(url) {
this.reload$.next({
type: _constants.PUSH,
url: new _url.URL(url, this.href),
cacheNr: ++this.cacheNr,
// eslint-disable-line no-plusplus
replace: true
});
}
}, {
key: "hash",
// ### Properties
// We expose the same properties as `window.location`
// (in many ways this component can be thought of as a "replacement" for the global `Location` object).
// Currently they are read-only.
get: function get() {
return this._url.hash;
}
}, {
key: "host",
get: function get() {
return this._url.host;
}
}, {
key: "hostname",
get: function get() {
return this._url.hostname;
}
}, {
key: "href",
get: function get() {
return this._url.href;
}
}, {
key: "origin",
get: function get() {
return this._url.origin;
}
}, {
key: "pathname",
get: function get() {
return this._url.pathname;
}
}, {
key: "port",
get: function get() {
return this._url.port;
}
}, {
key: "protocol",
get: function get() {
return this._url.protocol;
}
}, {
key: "search",
get: function get() {
return this._url.search;
}
}], [{
key: "componentName",
// The name of the component (required by hy-component)
get: function get() {
return "hy-push-state";
} // ### Options
// The default values (and types) of the configuration options (required by hy-component)
// See [Options](../../options.md) for usage information.
}, {
key: "types",
get: function get() {
return {
replaceIds: _types.array,
linkSelector: _types.string,
duration: _types.number,
hrefRegex: _types.regex,
scriptSelector: _types.string,
initialHref: _types.string,
prefetch: _types.bool
};
}
}, {
key: "defaults",
get: function get() {
return {
replaceIds: [],
linkSelector: "a[href]:not(.no-push-state)",
duration: 0,
hrefRegex: null,
scriptSelector: null,
initialHref: window.location.href,
prefetch: false
};
}
}]);
return _class;
}((0, _setup.setupObservablesMixin)((0, _rxjs.rxjsMixin)((0, _component.componentMixin)(C))));
}; // [rxjs]: https://github.com/ReactiveX/rxjs
// [esmixins]: http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
// [modernizr]: https://modernizr.com/
exports.pushStateMixin = pushStateMixin;