simpleitjs
Version:
Simple light frontend framework
178 lines (177 loc) • 6.51 kB
JavaScript
;
/// <reference path="./module.ts" />
/// <reference path="./ajax.ts" />
/// <reference path="./module-scope.ts" />
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var ModuleScopeParent;
if (typeof window === "undefined") {
ModuleScopeParent = require('./module-scope');
}
else {
var win = window;
ModuleScopeParent = win.ModuleScope;
}
var RouterLoaderAttributes = /** @class */ (function () {
function RouterLoaderAttributes() {
this.basePath = "";
this.rootElemSelector = "";
}
return RouterLoaderAttributes;
}());
var Router = /** @class */ (function (_super) {
__extends(Router, _super);
function Router() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.configs = [];
_this.basePath = '';
_this.rootElemSelector = '.router-main';
return _this;
}
/**
* Loads state by state object
* @param {Object} state State object to load.
* @param {boolean} updateURL Optional, should update URL after loading the state. Default false
*/
Router.prototype.loadState = function (state, updateURL) {
var _this = this;
var exeResolvers = function () {
if (state.resolvers && state.resolvers.length) {
Promise.all(state.resolvers).then(function () {
// $('a.nav-item').removeClass('active');
// $('a[href="' + state.path.replace('/', '') + '"]').addClass('active');
state.module.invoke.apply(window, arguments);
return arguments;
});
}
else {
// $('a.nav-item').removeClass('active');
// $('a[href="' + state.path.replace('/', '') + '"]').addClass('active');
state.module.invoke();
}
};
var authUser = function (out) {
if (typeof out == 'boolean' && out) {
exeResolvers();
}
else if (typeof out == 'boolean' && out == false) {
state.onAuthFail();
}
};
if (updateURL) {
var url = location.protocol + '//' + location.host + this.basePath + state.path;
window.history.pushState(JSON.parse(JSON.stringify(state)), state.title, url);
}
this.Ajax.get(state.template, function (templateHTML) {
var elem = document.querySelector(_this.rootElemSelector);
if (elem != null) {
elem.innerHTML = templateHTML;
}
if (state.authGaurds && state.authGaurds.length && typeof state.authGaurdCb == 'function') {
Promise.all(state.authGaurds).then(function () {
var out = state.authGaurdCb.apply(window, arguments);
authUser(out);
if (typeof out == 'object' && out.then) {
out.then(authUser);
}
return arguments;
});
}
});
};
Router.prototype.loadProperState = function () {
var currState = this.getCurrentState();
if (currState) {
this.loadState(currState, false);
}
else {
var defState = this.getDefaultState();
if (defState) {
this.loadState(defState, true);
}
}
};
Router.prototype.getCurrentState = function () {
for (var i = 0; i < this.configs.length; i++) {
var currConfig = this.configs[i];
var path = location.protocol + '//' + location.host + this.basePath + currConfig.path;
if (path == location.href) {
return currConfig;
}
}
};
/**
* Loads configs and starts routing.
*/
Router.prototype.load = function (config, attr) {
var _this = this;
if (attr == void 0) {
attr = {};
}
if (attr.basePath == void 0) {
attr.basePath = '';
}
if (attr.rootElemSelector == void 0) {
attr.rootElemSelector = '.router-main';
}
window.addEventListener('popstate', function (event) {
_this.loadProperState();
});
window.addEventListener('pushstate', function (event) {
_this.loadProperState();
});
this.configs = config;
this.basePath = attr.basePath;
this.rootElemSelector = attr.rootElemSelector;
this.loadProperState();
};
Router.prototype.getDefaultState = function () {
for (var i = 0; i < this.configs.length; i++) {
var currConfig = this.configs[i];
if (currConfig.isDefault) {
return currConfig;
}
}
};
/**
* Loads given state.
* @param {string} stateName Name of state to load.
* @param {boolean} updateURL Optional, should update URL after loading the state. Default false
*/
Router.prototype.goTo = function (stateName, updateURL) {
for (var i = 0; i < this.configs.length; i++) {
var currConfig = this.configs[i];
if (currConfig.stateName == stateName) {
return this.loadState(currConfig, updateURL);
}
}
};
Router.invoke = function (model, Ajax) {
model.Ajax = Ajax;
return model;
};
return Router;
}(ModuleScopeParent));
(function () {
var ModuleClass;
if (typeof window === "undefined") {
ModuleClass = require('./module');
}
else {
var win = window;
win.SimpleJS = win.SimpleJS || {};
ModuleClass = win.SimpleJS.Module;
}
new ModuleClass('Router', 'Ajax', Router);
})();