[main.js] now asynchronous page data loading -> each page script is a Promise() that must success before calling next() on VueRouter to load the according Vue

This commit is contained in:
xdrm-brackets 2018-04-07 16:11:59 +02:00
parent 51875ca4e8
commit 9150874287
4 changed files with 162 additions and 140 deletions

View File

@ -12,7 +12,7 @@ gs.get.router.beforeEach((to, from, next) => {
// {1} Ignore null name // // {1} Ignore null name //
if( to.name == null ) if( to.name == null )
next(); return next();
// {2} Get appropriate page location // // {2} Get appropriate page location //
let auth_folder = (gs.get.authed) ? 'auth' : 'noauth'; let auth_folder = (gs.get.authed) ? 'auth' : 'noauth';
@ -21,14 +21,16 @@ gs.get.router.beforeEach((to, from, next) => {
// {3} Load page script // // {3} Load page script //
if( fullpath === 'noauth/login') if( fullpath === 'noauth/login')
import('./page/noauth/login.js').then(next); return require('./page/noauth/login.js').default.then(next);
else if( fullpath === 'noauth/register')
import('./page/noauth/register.js').then(next); if( fullpath === 'noauth/register')
else if( fullpath === 'auth/channel') return require('./page/noauth/register.js').default.then(next);
import('./page/auth/channel.js').then(next);
if( fullpath === 'auth/channel')
return require('./page/auth/channel.js').default.then(next);
// {4} Let VueRouter do the magic // // {4} Let VueRouter do the magic //
next(); // next();
}); });

View File

@ -3,25 +3,31 @@ import ContentController from '../../lib/content-controller'
import RoomController from '../../lib/room-controller' import RoomController from '../../lib/room-controller'
import ChannelController from '../../lib/channel-controller' import ChannelController from '../../lib/channel-controller'
/* (1) Channel data gathering export default new Promise( (res, rej) => {
---------------------------------------------------------*/
/* (1) Store route params */ /* (1) Channel data gathering
window.initial_link = gs.get.router.history.current.params.link; ---------------------------------------------------------*/
console.log(`[channel.URL] ${initial_link}`); /* (1) Store route params */
window.initial_link = gs.get.router.history.current.params.link;
console.log(`[channel.URL] ${initial_link}`);
/* (2) Main components /* (2) Main components
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Initialize popup management */ /* (1) Initialize popup management */
gs.set('popup', new PopupController()); gs.set('popup', new PopupController());
/* (2) Initialize content management */ /* (2) Initialize content management */
gs.set('content', new ContentController()); gs.set('content', new ContentController());
/* (3) Initialize rooms & room menu */ /* (3) Initialize rooms & room menu */
gs.set('room', new RoomController()); gs.set('room', new RoomController());
/* (4) Initialize channels & channel menu */ /* (4) Initialize channels & channel menu */
gs.set('channel', new ChannelController()); gs.set('channel', new ChannelController());
gs.get.channel.fetch(); // fetch at load time gs.get.channel.fetch(); // fetch at load time
res();
});

View File

@ -1,7 +1,9 @@
/* (1) Initialise export default new Promise( (res, rej) => {
---------------------------------------------------------*/
/* (1) Default data structure */ /* (1) Initialise
gs.set('login', { ---------------------------------------------------------*/
/* (1) Default data structure */
gs.set('login', {
// fields // fields
username: new FieldValidator('basic-name', ''), username: new FieldValidator('basic-name', ''),
password: new FieldValidator('password', ''), password: new FieldValidator('password', ''),
@ -17,15 +19,15 @@ gs.set('login', {
press_enter(){} press_enter(){}
} }
}); });
/* (2) Login attempt /* (2) Login attempt
* *
---------------------------------------------------------*/ ---------------------------------------------------------*/
gs.get.login.func.login = function(){ gs.get.login.func.login = function(){
/* (1) Cache fields' values */ /* (1) Cache fields' values */
let username = this.username.mutable; let username = this.username.mutable;
@ -55,7 +57,7 @@ gs.get.login.func.login = function(){
}.bind(this), encodeURI(`${username}:${password}`)); }.bind(this), encodeURI(`${username}:${password}`));
}.bind(gs.get.login); }.bind(gs.get.login);
@ -64,13 +66,18 @@ gs.get.login.func.login = function(){
/* (4) Manage pressing on enter /* (4) Manage pressing on enter
* *
---------------------------------------------------------*/ ---------------------------------------------------------*/
gs.get.login.func.press_enter = function(e){ gs.get.login.func.press_enter = function(e){
// if enter -> launch login // if enter -> launch login
if( e.keyCode === 13 ) if( e.keyCode === 13 )
this.func.login(); this.func.login();
}.bind(gs.get.login); }.bind(gs.get.login);
res();
});

View File

@ -1,7 +1,9 @@
/* (1) Initialise export default new Promise( (res, rej) => {
---------------------------------------------------------*/
/* (1) Default data structure */ /* (1) Initialise
gs.set('register', { ---------------------------------------------------------*/
/* (1) Default data structure */
gs.set('register', {
// fields // fields
mail: new FieldValidator('bypass', ''), mail: new FieldValidator('bypass', ''),
username: new FieldValidator('basic-name', ''), username: new FieldValidator('basic-name', ''),
@ -13,7 +15,7 @@ gs.set('register', {
press_enter(){} press_enter(){}
} }
}); });
@ -21,10 +23,10 @@ gs.set('register', {
/* (2) Login attempt /* (2) Login attempt
* *
---------------------------------------------------------*/ ---------------------------------------------------------*/
gs.get.register.func.register = function(){ gs.get.register.func.register = function(){
/* (1) Cache fields' values */ /* (1) Cache fields' values */
let mail = this.mail.mutable; let mail = this.mail.mutable;
@ -62,7 +64,7 @@ gs.get.register.func.register = function(){
}); });
}.bind(gs.get.register); }.bind(gs.get.register);
@ -71,13 +73,18 @@ gs.get.register.func.register = function(){
/* (4) Manage pressing on enter /* (4) Manage pressing on enter
* *
---------------------------------------------------------*/ ---------------------------------------------------------*/
gs.get.register.func.press_enter = function(e){ gs.get.register.func.press_enter = function(e){
// if enter -> launch register // if enter -> launch register
if( e.keyCode === 13 ) if( e.keyCode === 13 )
this.func.register(); this.func.register();
}.bind(gs.get.register); }.bind(gs.get.register);
res();
});