Optimized UI

eubrazilcc · May 14, 2015 · 66bcfbb · 66bcfbb
1 parent 0ec8bfd
commit 66bcfbb
Show file tree

Hide file tree

Showing 45 changed files with 354 additions and 221 deletions.
diff --git a/lvl-project/lvl-bundle/OPTIMIZATION.TXT b/lvl-project/lvl-bundle/OPTIMIZATION.TXT
@@ -0,0 +1,54 @@
+==================================================================
+Add to documentation: Minify Resources (HTML, CSS, and JavaScript)
+==================================================================
+
+Comment the property 'urlArgs' in the RequireJS main file (requirejs_main.js).
+
+1) For minifying HTML:
+
+    https://www.npmjs.com/package/html-minifier
+
+    $ html-minifier -c html-minifier.conf index.html
+
+    $ find dist/js/ -iname '*.html' -print0 | xargs -0 -I"{}" html-minifier "{}" -c html-minifier.conf -o "{}"
+
+2) For minifying CSS:
+
+    See: 3.b - RequireJS optimization tool
+
+3) For minifying JavaScript:
+
+3.a) Standalone:
+
+    https://github.com/mishoo/UglifyJS2
+
+    $ uglifyjs -c -m -o jquery.spin.min.js --source-map jquery.spin.min.map -- jquery.spin.js
+
+3.b) RequireJS optimization tool:
+
+    http://requirejs.org/docs/optimization.html
+
+    https://github.com/jrburke/r.js/blob/master/build/example.build.js
+
+    $ r.js -o build.js
+
+==========================
+Optimization full example:
+==========================
+
+ertorser@regab:~$ mkdir TEMP
+
+ertorser@regab:~$ cd TEMP/
+
+ertorser@regab:~/TEMP$ clear ; rm -rf /home/ertorser/TEMP/ui/ ; \
+cp -r ~/Workspace/eclipse-jee-luna/leishmaniasis-virtual-lab/lvl-project/lvl-bundle/src/main/ui/ /home/ertorser/TEMP/
+
+ertorser@regab:~/TEMP/ui$ r.js -o build.js
+
+ertorser@regab:~/TEMP$ find dist/js/ -iname '*.html' -print0 | xargs -0 -I"{}" html-minifier "{}" -c html-minifier.conf -o "{}"
+
+ertorser@regab:~/TEMP/ui$ cd dist/
+
+ertorser@regab:~/TEMP/ui/dist$ rm -f build.txt
+
+ertorser@regab:~/TEMP/ui/dist$ python -m SimpleHTTPServer 8001
diff --git a/lvl-project/lvl-bundle/src/main/images/README.TXT b/lvl-project/lvl-bundle/src/main/images/README.TXT
@@ -0,0 +1 @@
+Original images before they are optimized for Web using TinyPNG: https://tinypng.com/
diff --git a/lvl-project/lvl-bundle/src/main/images/bg.svg b/lvl-project/lvl-bundle/src/main/images/bg.svg
diff --git a/lvl-project/lvl-bundle/src/main/images/cnpq.png b/lvl-project/lvl-bundle/src/main/images/cnpq.png
diff --git a/lvl-project/lvl-bundle/src/main/images/demo1.png b/lvl-project/lvl-bundle/src/main/images/demo1.png
diff --git a/lvl-project/lvl-bundle/src/main/images/demo2.png b/lvl-project/lvl-bundle/src/main/images/demo2.png
diff --git a/lvl-project/lvl-bundle/src/main/images/eu-comission.png b/lvl-project/lvl-bundle/src/main/images/eu-comission.png
diff --git a/lvl-project/lvl-bundle/src/main/images/eubrazilcc.png b/lvl-project/lvl-bundle/src/main/images/eubrazilcc.png
diff --git a/lvl-project/lvl-bundle/src/main/images/fiocruz.png b/lvl-project/lvl-bundle/src/main/images/fiocruz.png
diff --git a/lvl-project/lvl-bundle/src/main/images/flags.png b/lvl-project/lvl-bundle/src/main/images/flags.png
diff --git a/...roject/lvl-bundle/src/main/ui/img/lvl.png → ...roject/lvl-bundle/src/main/images/lvl.png b/...roject/lvl-bundle/src/main/ui/img/lvl.png → ...roject/lvl-bundle/src/main/images/lvl.png
diff --git a/lvl-project/lvl-bundle/src/main/images/mcti.png b/lvl-project/lvl-bundle/src/main/images/mcti.png
diff --git a/lvl-project/lvl-bundle/src/main/images/phlebotomus.jpg b/lvl-project/lvl-bundle/src/main/images/phlebotomus.jpg
diff --git a/lvl-project/lvl-bundle/src/main/images/unew.png b/lvl-project/lvl-bundle/src/main/images/unew.png
diff --git a/lvl-project/lvl-bundle/src/main/images/upv.png b/lvl-project/lvl-bundle/src/main/images/upv.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/build.js b/lvl-project/lvl-bundle/src/main/ui/build.js
@@ -1,12 +1,30 @@
-({
-	baseUrl : 'js',
+/* r.js -o build.js */
+({	
 	mainConfigFile : 'js/requirejs_main.js',
-	name : 'app',
-	out : 'dist/js/requirejs_main.js',	
-	wrap : true,
-	findNestedDependencies : true,
-	removeCombined : true,		
-	optimize : 'uglify2',	
+	appDir : './',
+	baseUrl : 'js',
+	dir : 'dist',
+	removeCombined : true,
+	findNestedDependencies : true,	
 	inlineText : true,
-	preserveLicenseComments : false
+	preserveLicenseComments : false,
+	wrap : true,
+	wrapShim : true,
+	optimize : 'uglify2', // 'none',
+	optimizeCss : 'standard',
+	fileExclusionRegExp : /^\.|^(r|build)\.js$|\.map$|html-minifier\.conf/,	
+	modules: [
+		{
+			name : 'requirejs_main',			
+			excludeShallow : [
+				'text!data/config.json',
+				'text!data/pipelines.json',
+				'text!data/events.json'
+			]
+		}
+	],
+	paths : {
+		jquery : 'empty:',
+		bootstrap : 'empty:'
+    }
 })
diff --git a/lvl-project/lvl-bundle/src/main/ui/css/bootstrap-paper.min.css b/lvl-project/lvl-bundle/src/main/ui/css/bootstrap-paper.min.css
diff --git a/lvl-project/lvl-bundle/src/main/ui/css/bootstrap.min.css b/lvl-project/lvl-bundle/src/main/ui/css/bootstrap.min.css
diff --git a/lvl-project/lvl-bundle/src/main/ui/css/font-awesome.min.css b/lvl-project/lvl-bundle/src/main/ui/css/font-awesome.min.css
diff --git a/lvl-project/lvl-bundle/src/main/ui/css/lvl.css b/lvl-project/lvl-bundle/src/main/ui/css/lvl.css
@@ -1,8 +1,5 @@
 @CHARSET "UTF-8";
 
-@import 'bootstrap.min.css';
-@import 'font-awesome.min.css';
-@import 'bootstrap-paper.min.css';
 @import 'backgrid.min.css';
 @import 'backgrid-paginator.min.css';
 @import 'backgrid-select-all.min.css';

diff --git a/lvl-project/lvl-bundle/src/main/ui/html-minifier.conf b/lvl-project/lvl-bundle/src/main/ui/html-minifier.conf
@@ -0,0 +1,19 @@
+{
+  "removeComments" : true,
+  "removeCommentsFromCDATA" : true,
+  "removeCDATASectionsFromCDATA" : true,
+  "collapseWhitespace" : true,
+  "conservativeCollapse" : false,
+  "collapseBooleanAttributes" : false,
+  "removeAttributeQuotes" : false,
+  "removeRedundantAttributes" : true,
+  "useShortDoctype" : true,
+  "removeEmptyAttributes" : true,
+  "removeOptionalTags" : false,
+  "removeEmptyElements" : false,
+  "lint" : false,
+  "keepClosingSlash" : false,
+  "caseSensitive" : false,
+  "minifyJS" : false,
+  "minifyCSS" : false
+}
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/bg.svg b/lvl-project/lvl-bundle/src/main/ui/img/bg.svg
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/cnpq.png b/lvl-project/lvl-bundle/src/main/ui/img/cnpq.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/demo1.png b/lvl-project/lvl-bundle/src/main/ui/img/demo1.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/demo2.png b/lvl-project/lvl-bundle/src/main/ui/img/demo2.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/eu-comission.png b/lvl-project/lvl-bundle/src/main/ui/img/eu-comission.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/eubrazilcc.png b/lvl-project/lvl-bundle/src/main/ui/img/eubrazilcc.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/fiocruz.png b/lvl-project/lvl-bundle/src/main/ui/img/fiocruz.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/flags.png b/lvl-project/lvl-bundle/src/main/ui/img/flags.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/mcti.png b/lvl-project/lvl-bundle/src/main/ui/img/mcti.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/phlebotomus.jpg b/lvl-project/lvl-bundle/src/main/ui/img/phlebotomus.jpg
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/unew.png b/lvl-project/lvl-bundle/src/main/ui/img/unew.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/img/upv.png b/lvl-project/lvl-bundle/src/main/ui/img/upv.png
diff --git a/lvl-project/lvl-bundle/src/main/ui/index.html b/lvl-project/lvl-bundle/src/main/ui/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- 
+<!-- lvl
 Copyright 2014-2015 EUBrazilCC (EU‐Brazil Cloud Connect)
 
 Licensed under the EUPL, Version 1.1 or - as soon they will be approved by 
@@ -19,14 +19,17 @@
 file for details on the various modules and licenses.
 The "NOTICE" text file is part of the distribution. Any derivative works
 that you distribute must include a readable copy of the "NOTICE" text file.
--->
+/lvl -->
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Leishmaniasis Virtual Laboratory | LeishVL</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/paper/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/lvl.css">
 </head>
 <body>
@@ -48,7 +51,7 @@ <h4 style="text-align: center; color: #34495E;">Loading the LeishVL...</h4>
 
   <a href="#top" class="lvl-back-to-top" style="visibility: hidden;" title="Scroll to top">Top</a>
 
-  <script data-main="js/requirejs_main.js?poh8aexLa8Ud__2" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js" type="text/javascript"></script>
+  <script data-main="js/requirejs_main.js?ooFoIu7ieg0u" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js" type="text/javascript"></script>
 
 </body>
 </html>
diff --git a/lvl-project/lvl-bundle/src/main/ui/js/apps/admin/layout/admin_layout_ctrl.js b/lvl-project/lvl-bundle/src/main/ui/js/apps/admin/layout/admin_layout_ctrl.js
@@ -7,20 +7,28 @@ define([ 'app', 'apps/admin/layout/admin_layout_view' ], function(Lvl, View) {
 		'use strict';
 		Layout.Controller = {
 			showLayout : function(section) {
-				require([ 'apps/admin/' + section + '/admin_' + section + '_ctrl', 'apps/admin/layout/entities/tablinks' ],
-						function(SectionController) {
-							var tabLinks = Lvl.request('admin:navigation:entities');
-							var tabLinkToSelect = tabLinks.find(function(tabLink) {
-								return tabLink.get('link') === section;
-							});
-							tabLinkToSelect.select();
-							tabLinks.trigger('reset');
-							var view = new View.Layout({
-								navigation : tabLinks
-							});
-							Lvl.mainRegion.show(view);
-							return SectionController.showSection();
-						});
+				var controller = function(SectionController) {
+					var tabLinks = Lvl.request('admin:navigation:entities');
+					var tabLinkToSelect = tabLinks.find(function(tabLink) {
+						return tabLink.get('link') === section;
+					});
+					tabLinkToSelect.select();
+					tabLinks.trigger('reset');
+					var view = new View.Layout({
+						navigation : tabLinks
+					});
+					Lvl.mainRegion.show(view);
+					return SectionController.showSection();
+				};
+				switch (section) {
+				case 'subscription_requests':
+					require([ 'apps/admin/subscription_requests/admin_subscription_requests_ctrl', 'apps/admin/layout/entities/tablinks' ], controller);
+					break;
+				case 'issues':
+				default:
+					require([ 'apps/admin/issues/admin_issues_ctrl', 'apps/admin/layout/entities/tablinks' ], controller);				
+					break;
+				}				
 			}
 		}
 	});

diff --git a/lvl-project/lvl-bundle/src/main/ui/js/apps/analysis/layout/analysis_layout_ctrl.js b/lvl-project/lvl-bundle/src/main/ui/js/apps/analysis/layout/analysis_layout_ctrl.js
@@ -8,7 +8,7 @@ define([ 'app', 'apps/analysis/layout/analysis_layout_view' ], function(Lvl, Vie
 		Layout.Controller = {
 			showLayout : function(section, id) {
 				var subapp = section + (id ? '_item' : '');
-				require([ 'apps/analysis/' + subapp + '/analysis_' + subapp + '_ctrl', 'apps/analysis/layout/entities/tablinks' ], function(SectionController) {
+				var controller = function(SectionController) {
 					var tabLinks = Lvl.request('analysis:navigation:entities');
 					var tabLinkToSelect = tabLinks.find(function(tabLink) {
 						return tabLink.get('link') === section;
@@ -20,7 +20,19 @@ define([ 'app', 'apps/analysis/layout/analysis_layout_view' ], function(Lvl, Vie
 					});
 					Lvl.mainRegion.show(view);
 					return SectionController.showSection(id);
-				});
+				};
+				switch (subapp) {
+				case 'runs':
+					require([ 'apps/analysis/runs/analysis_runs_ctrl', 'apps/analysis/layout/entities/tablinks' ], controller);
+					break;
+				case 'runs_item':
+					require([ 'apps/analysis/runs_item/analysis_runs_item_ctrl', 'apps/analysis/layout/entities/tablinks' ], controller);
+					break;				
+				case 'pipelines':
+				default:
+					require([ 'apps/analysis/pipelines/analysis_pipelines_ctrl', 'apps/analysis/layout/entities/tablinks' ], controller);
+					break;
+				}
 			}
 		}
 	});

diff --git a/lvl-project/lvl-bundle/src/main/ui/js/apps/collection/layout/collection_layout_ctrl.js b/lvl-project/lvl-bundle/src/main/ui/js/apps/collection/layout/collection_layout_ctrl.js
@@ -7,8 +7,7 @@ define([ 'app', 'apps/collection/layout/collection_layout_view' ], function(Lvl,
 		'use strict';
 		Layout.Controller = {
 			showLayout : function(section, id) {
-				require([ 'apps/collection/' + section + '/collection_' + section + '_ctrl', 'apps/collection/layout/entities/tablinks' ], function(
-						SectionController) {
+				var controller = function(SectionController) {
 					var tabLinks = Lvl.request('collection:navigation:entities');
 					var tabLinkToSelect = tabLinks.find(function(tabLink) {
 						return tabLink.get('link') === section;
@@ -20,7 +19,22 @@ define([ 'app', 'apps/collection/layout/collection_layout_view' ], function(Lvl,
 					});
 					Lvl.mainRegion.show(view);
 					return SectionController.showSection(id);
-				});
+				};
+				switch (section) {
+				case 'map':
+					require([ 'apps/collection/map/collection_map_ctrl', 'apps/collection/layout/entities/tablinks' ], controller);
+					break;
+				case 'stats':
+					require([ 'apps/collection/stats/collection_stats_ctrl', 'apps/collection/layout/entities/tablinks' ], controller);
+					break;
+				case 'submit':
+					require([ 'apps/collection/submit/collection_submit_ctrl', 'apps/collection/layout/entities/tablinks' ], controller);
+					break;
+				case 'browse':
+				default:
+					require([ 'apps/collection/browse/collection_browse_ctrl', 'apps/collection/layout/entities/tablinks' ], controller);
+					break;
+				}
 			}
 		}
 	});

diff --git a/lvl-project/lvl-bundle/src/main/ui/js/apps/drive/layout/drive_layout_ctrl.js b/lvl-project/lvl-bundle/src/main/ui/js/apps/drive/layout/drive_layout_ctrl.js
@@ -8,7 +8,7 @@ define([ 'app', 'apps/drive/layout/drive_layout_view' ], function(Lvl, View) {
 		Layout.Controller = {
 			showLayout : function(section, id) {
 				var subapp = section + (id ? '_item' : '');
-				require([ 'apps/drive/' + subapp + '/drive_' + subapp + '_ctrl', 'apps/drive/layout/entities/tablinks' ], function(SectionController) {
+				var controller = function(SectionController) {
 					var tabLinks = Lvl.request('drive:navigation:entities');
 					var tabLinkToSelect = tabLinks.find(function(tabLink) {
 						return tabLink.get('link') === section;
@@ -20,7 +20,16 @@ define([ 'app', 'apps/drive/layout/drive_layout_view' ], function(Lvl, View) {
 					});
 					Lvl.mainRegion.show(view);
 					return SectionController.showSection(id);
-				});
+				};
+				switch (subapp) {
+				case 'links':
+					require([ 'apps/drive/links/drive_links_ctrl', 'apps/drive/layout/entities/tablinks' ], controller);
+					break;
+				case 'datasets':
+				default:
+					require([ 'apps/drive/datasets/drive_datasets_ctrl', 'apps/drive/layout/entities/tablinks' ], controller);	
+					break;
+				}				
 			}
 		}
 	});

diff --git a/lvl-project/lvl-bundle/src/main/ui/js/apps/e-compendium/layout/e-compendium_layout_ctrl.js b/lvl-project/lvl-bundle/src/main/ui/js/apps/e-compendium/layout/e-compendium_layout_ctrl.js
@@ -7,8 +7,7 @@ define([ 'app', 'apps/e-compendium/layout/e-compendium_layout_view' ], function(
 		'use strict';
 		Layout.Controller = {
 			showLayout : function(section) {
-				require([ 'apps/e-compendium/' + section + '/e-compendium_' + section + '_ctrl', 'apps/e-compendium/layout/entities/tablinks' ], function(
-						SectionController) {
+				var controller = function(SectionController) {
 					var tabLinks = Lvl.request('e-compendium:navigation:entities');
 					var tabLinkToSelect = tabLinks.find(function(tabLink) {
 						return tabLink.get('link') === section;
@@ -20,7 +19,22 @@ define([ 'app', 'apps/e-compendium/layout/e-compendium_layout_view' ], function(
 					});
 					Lvl.mainRegion.show(view);
 					return SectionController.showSection();
-				});
+				};
+				switch (section) {
+				case 'map':
+					require([ 'apps/e-compendium/map/e-compendium_map_ctrl', 'apps/e-compendium/layout/entities/tablinks' ], controller);
+					break;
+				case 'stats':
+					require([ 'apps/e-compendium/stats/e-compendium_stats_ctrl', 'apps/e-compendium/layout/entities/tablinks' ], controller);
+					break;
+				case 'submit':
+					require([ 'apps/e-compendium/submit/e-compendium_submit_ctrl', 'apps/e-compendium/layout/entities/tablinks' ], controller);
+					break;
+				case 'browse':
+				default:
+					require([ 'apps/e-compendium/browse/e-compendium_browse_ctrl', 'apps/e-compendium/layout/entities/tablinks' ], controller);
+					break;
+				}
 			}
 		}
 	});

diff --git a/lvl-project/lvl-bundle/src/main/ui/js/apps/saved-items/layout/saved-items_layout_ctrl.js b/lvl-project/lvl-bundle/src/main/ui/js/apps/saved-items/layout/saved-items_layout_ctrl.js
@@ -7,20 +7,25 @@ define([ 'app', 'apps/saved-items/layout/saved-items_layout_view' ], function(Lv
 		'use strict';
 		Layout.Controller = {
 			showLayout : function(section) {
-				require([ 'apps/saved-items/' + section + '/saved-items_' + section + '_ctrl', 'apps/saved-items/layout/entities/tablinks' ],
-						function(SectionController) {
-							var tabLinks = Lvl.request('saved-items:navigation:entities');
-							var tabLinkToSelect = tabLinks.find(function(tabLink) {
-								return tabLink.get('link') === section;
-							});
-							tabLinkToSelect.select();
-							tabLinks.trigger('reset');
-							var view = new View.Layout({
-								navigation : tabLinks
-							});
-							Lvl.mainRegion.show(view);
-							return SectionController.showSection();
-						});
+				var controller = function(SectionController) {
+					var tabLinks = Lvl.request('saved-items:navigation:entities');
+					var tabLinkToSelect = tabLinks.find(function(tabLink) {
+						return tabLink.get('link') === section;
+					});
+					tabLinkToSelect.select();
+					tabLinks.trigger('reset');
+					var view = new View.Layout({
+						navigation : tabLinks
+					});
+					Lvl.mainRegion.show(view);
+					return SectionController.showSection();
+				};
+				switch (section) {
+				case 'searches':
+				default:
+					require([ 'apps/saved-items/searches/saved-items_searches_ctrl', 'apps/saved-items/layout/entities/tablinks' ], controller);
+					break;
+				}
 			}
 		}
 	});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Original images before they are optimized for Web using TinyPNG: https://tinypng.com/