Skip to content

Commit

Permalink
Improved initial app load time by removing the view dependencies from
Browse files Browse the repository at this point in the history 
the router. The major views now only get loaded via RequireJS when they
are first navigated to. 

Changed the way the "My Data" link works since it depended upon the
DataCatalogView being preloaded by the router in order to work. Now the
link navigates directly to #data/my-data, which will initialize the
DataCatalogView at that point if needed.
  • Loading branch information
@laurenwalker
laurenwalker committed May 11, 2016
1 parent 95acf28 commit 149aa42
Show file tree
Hide file tree
Showing 22 changed files with 941 additions and 495 deletions.
4 changes: 2 additions & 2 deletions metacatui/src/main/webapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@

<!-- Pull in correct theme configuration, then use Require.js to manage dependencies -->
<script id="loader" type="text/javascript" src="loader.js?v=1.11.2"
data-theme="default"
data-theme="arctic"
data-metacat-context="metacat"
data-map-key="YOUR-GOOGLE-MAPS-API-KEY"
data-map-key=""
></script>

</body>
Expand Down
4 changes: 2 additions & 2 deletions metacatui/src/main/webapp/js/models/LookupModel.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*global define */
define(['jquery', 'underscore', 'backbone'],
function($, _, Backbone) {
define(['jquery', 'jqueryui', 'underscore', 'backbone'],
function($, $ui, _, Backbone) {
'use strict';

// Lookup Model
Expand Down
4 changes: 2 additions & 2 deletions metacatui/src/main/webapp/js/models/UserModel.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*global define */
define(['jquery', 'underscore', 'backbone', 'models/Search', "collections/SolrResults"],
function($, _, Backbone, SearchModel, SearchResults) {
define(['jquery', 'underscore', 'backbone', 'jws', 'models/Search', "collections/SolrResults"],
function($, _, Backbone, JWS, SearchModel, SearchResults) {
'use strict';

// User Model
Expand Down
231 changes: 174 additions & 57 deletions metacatui/src/main/webapp/js/routers/router.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*global Backbone */
'use strict';

define(['jquery', 'underscore', 'backbone', 'views/IndexView', 'views/TextView', 'views/DataCatalogView', 'views/RegistryView', 'views/MetadataView', 'views/StatsView', 'views/UserView', 'views/ExternalView', 'views/LdapView'],
function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, MetadataView, StatsView, UserView, ExternalView, LdapView) {
define(['jquery', 'underscore', 'backbone'],
function ($, _, Backbone) {

// MetacatUI Router
// ----------------
Expand All @@ -12,7 +12,9 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me
'about(/:anchorId)' : 'renderAbout', // about page
'help(/:page)(/:anchorId)' : 'renderHelp',
'tools(/:anchorId)' : 'renderTools', // tools page
'data/my-data(/page/:page)' : 'renderMyData', // data search page
'data(/mode=:mode)(/query=:query)(/page/:page)' : 'renderData', // data search page
'data/my-data' : 'renderMyData',
'view/*pid' : 'renderMetadata', // metadata page
'profile(/*username)' : 'renderProfile',
'profile' : 'renderProfile',
Expand All @@ -34,16 +36,6 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me

initialize: function(){
this.listenTo(Backbone.history, "routeNotFound", this.navigateToDefault);

appView.indexView = new IndexView();
appView.textView = new TextView();
appView.dataCatalogView = new DataCatalogView();
appView.registryView = new RegistryView();
appView.metadataView = new MetadataView();
appView.statsView = new StatsView();
appView.userView = new UserView();
appView.externalView = new ExternalView();
appView.ldapView = new LdapView();
},

routeHistory: new Array(),
Expand All @@ -57,6 +49,30 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me
return this.routeHistory[this.routeHistory.length-2];
},

renderIndex: function (param) {
this.routeHistory.push("index");

if(!appView.indexView){
require(["views/IndexView"], function(IndexView){
appView.indexView = new IndexView();
appView.showView(appView.indexView);
});
}
else
appView.showView(appView.indexView);
},

renderText: function(options){
if(!appView.textView){
require(['views/TextView'], function(TextView){
appView.textView = new TextView();
appView.showView(appView.textView, options);
});
}
else
appView.showView(appView.textView, options);
},

renderHelp: function(page, anchorId){
this.routeHistory.push("help");
appModel.set('anchorId', anchorId);
Expand All @@ -71,12 +87,7 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me
anchorId: anchorId
}

appView.showView(appView.textView, options);
},

renderIndex: function (param) {
this.routeHistory.push("index");
appView.showView(appView.indexView);
this.renderText(options);
},

renderAbout: function (anchorId) {
Expand All @@ -87,7 +98,7 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me
anchorId: anchorId
}

appView.showView(appView.textView, options);
this.renderText(options);
},

renderAPI: function (anchorId) {
Expand All @@ -98,7 +109,7 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me
anchorId: anchorId
}

appView.showView(appView.textView, options);
this.renderText(options);
},

renderTools: function (anchorId) {
Expand All @@ -110,89 +121,185 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me
anchorId: anchorId
}

appView.showView(appView.textView, options);
this.renderText(options);
},
renderData: function (mode, query, page) {

renderMyData: function(page){
//Only display this is the user is logged in
if(!appUserModel.get("loggedIn") && appUserModel.get("checked")) this.navigate("data", { trigger: true });
else if(!appUserModel.get("checked")){
var router = this;

this.listenToOnce(appUserModel, "change:checked", function(){

if(appUserModel.get("loggedIn"))
router.renderMyData(page);
else
this.navigate("data", { trigger: true });
});

return;
}

this.routeHistory.push("data");
appModel.set('page', page);

///Check for the URL parameters
///Check for a page URL parameter
if(typeof page === "undefined")
appModel.set("page", 0);
else
appModel.set('page', page);

//If a search mode parameter is given
if((typeof mode !== "undefined") && mode)
//appModel.set('searchMode', mode)
appView.dataCatalogView.mode = mode;
if(!appView.dataCatalogView){
require(['views/DataCatalogView'], function(DataCatalogView){
appView.dataCatalogView = new DataCatalogView();
appView.dataCatalogView.searchModel = appUserModel.get("searchModel").clone();
appView.showView(appView.dataCatalogView);
});
}
else{
appView.dataCatalogView.searchModel = appUserModel.get("searchModel").clone();
appView.showView(appView.dataCatalogView);
}
},

renderData: function (mode, query, page) {
this.routeHistory.push("data");

//If a query parameter is given
///Check for a page URL parameter
if(typeof page === "undefined")
appModel.set("page", 0);
else
appModel.set('page', page);

//Check for a query URL parameter
if((typeof query !== "undefined") && query){
var customQuery = appSearchModel.get('additionalCriteria');
customQuery.push(query);
appSearchModel.set('additionalCriteria', customQuery);
}

appView.showView(appView.dataCatalogView);
if(!appView.dataCatalogView){
require(['views/DataCatalogView'], function(DataCatalogView){
appView.dataCatalogView = new DataCatalogView();

//Check for a search mode URL parameter
if((typeof mode !== "undefined") && mode)
appView.dataCatalogView.mode = mode;

appView.showView(appView.dataCatalogView);
});
}
else{
//Check for a search mode URL parameter
if((typeof mode !== "undefined") && mode)
appView.dataCatalogView.mode = mode;

appView.showView(appView.dataCatalogView);
}
},

renderMetadata: function (pid) {
this.routeHistory.push("metadata");
appModel.set('lastPid', appModel.get("pid"));

var seriesId;

//Check for a seriesId
if(appModel.get("useSeriesId") && (pid.indexOf("version:") > -1)){
seriesId = pid.substr(0, pid.indexOf(", version:"));
appView.metadataView.seriesId = seriesId;

pid = pid.substr(pid.indexOf(", version: ") + ", version: ".length);
}

appModel.set('pid', pid);
appView.metadataView.pid = pid;
//Save the id in the app model
appModel.set('pid', pid);

appView.showView(appView.metadataView);
if(!appView.metadataView){
require(['views/MetadataView'], function(MetadataView){
appView.metadataView = new MetadataView();

//Send the id(s) to the view
appView.metadataView.seriesId = seriesId;
appView.metadataView.pid = pid;

appView.showView(appView.metadataView);
});
}
else{
//Send the id(s) to the view
appView.metadataView.seriesId = seriesId;
appView.metadataView.pid = pid;

appView.showView(appView.metadataView);
}
},

renderProfile: function(username, section, subsection){
this.closeLastView();
this.closeLastView();

var viewChoice;

if(!username || !appModel.get("userProfiles")){
this.routeHistory.push("summary");
appView.showView(appView.statsView);

if(!appView.statsView){
require(["views/StatsView"], function(StatsView){
appView.statsView = new StatsView();

appView.showView(appView.statsView);
});
}
else
appView.showView(appView.statsView);
}
else{
this.routeHistory.push("profile");
appModel.set("profileUsername", username);
//We only support the public profile section in non-D1 themes
appView.showView(appView.userView, { section: "profile" });

if(!appView.userView){

require(['views/UserView'], function(UserView){
appView.userView = new UserView();

appView.showView(appView.userView);
});
}
else
appView.showView(appView.userView);
}
},

renderUserSettings: function(){
this.closeLastView();

appView.userView.activeSection = "settings";
this.routeHistory.push("profile");

if(appUserModel.get("username"))
appModel.set("profileUsername", appUserModel.get("username"));

appView.showView(appView.userView);
},

renderRegistry: function (stage, pid) {
this.routeHistory.push("registry");
appView.registryView.stage = stage;
appView.registryView.pid = pid;
appView.showView(appView.registryView);

if(!appView.registryView){
require(['views/RegistryView'], function(RegistryView){
appView.registryView = new RegistryView();
appView.registryView.stage = stage;
appView.registryView.pid = pid;
appView.showView(appView.registryView);
});
}
else{
appView.registryView.stage = stage;
appView.registryView.pid = pid;
appView.showView(appView.registryView);
}
},

renderLdap: function (stage) {
this.routeHistory.push("ldap");
appView.ldapView.stage = stage;
appView.showView(appView.ldapView);

if(!appView.ldapView){
require(["views/LdapView"], function(LdapView){
appView.ldapView = new LdapView();
appView.ldapView.stage = stage;
appView.showView(appView.ldapView);
});
}else{
appView.ldapView.stage = stage;
appView.showView(appView.ldapView);
}
},

logout: function (param) {
Expand All @@ -204,8 +311,18 @@ function ($, _, Backbone, IndexView, TextView, DataCatalogView, RegistryView, Me
renderExternal: function(url) {
// use this for rendering "external" content pulled in dynamically
this.routeHistory.push("external");
appView.externalView.url = url;
appView.showView(appView.externalView);

if(!appView.externalView){
require(['views/ExternalView'], function(ExternalView){
appView.externalView = new ExternalView();
appView.externalView.url = url;
appView.showView(appView.externalView);
});
}
else{
appView.externalView.url = url;
appView.showView(appView.externalView);
}
},

navigateToDefault: function(){
Expand Down
1 change: 0 additions & 1 deletion metacatui/src/main/webapp/js/templates/appHead.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
<link href="./components/annotator/v1.2.10/annotator.css" rel="stylesheet" type="text/css">
<link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="./css/font-awesome-3.2.1.min.css" type="text/css" rel="stylesheet">
<link href="./css/jquery.sidr.light.css" type="text/css" rel="stylesheet">
<link href="./css/metacatui-common.css?v=<%=window.metacatUIVersion%>" type="text/css" rel="stylesheet">
<link href="./js/themes/<%=theme%>/css/metacatui.css?v=<%=window.metacatUIVersion%>" type="text/css" rel="stylesheet">
<link href="./css/metacatui-common.responsive.css?v=<%=window.metacatUIVersion%>" type="text/css" rel="stylesheet">
Expand Down
Loading

0 comments on commit 149aa42

Please sign in to comment.