- compressor, - final thoughts

nenadg · Jul 10, 2016 · ee9bc97 · ee9bc97
1 parent e061446
commit ee9bc97
Show file tree

Hide file tree

Showing 8 changed files with 659 additions and 67 deletions.
diff --git a/app.js b/app.js
@@ -6,10 +6,10 @@ var http = require('http'),
     app = express(),
     path = require('path'),
     favicon = require('serve-favicon'),
-     xls = require('excel');
+    xls = require('excel');
 
 // all environments
-app.set('port', process.env.PORT || 3001);
+app.set('port', process.env.PORT || 3002);
 
 app.use(express.static(path.join(__dirname, 'public')));
 

diff --git a/compressor.js b/compressor.js
@@ -0,0 +1,25 @@
+var fs = require('fs'),
+	compressor = require('node-minify'),
+	jsfiles = [
+		'public/js/d3.min.js',
+		'public/js/d3.geo.projection.js',
+		'public/js/topojson.v1.min.js',
+		'public/js/queue.min.js',
+		'public/js/geojson-utils.js',
+		'public/js/parser.js',
+		'public/js/page.js',
+		'public/js/load.js'
+	];
+
+new compressor.minify({
+	type: 'gcc',
+	language: 'ECMASCRIPT5',
+	fileIn: jsfiles,
+	fileOut: 'public/js/census.min.js',
+	callback: function(err, min){
+		if(err)
+			console.log(err);
+
+		console.log("Scripts generated and saved at ", 'public/js/census.min.js');
+	}
+});
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
 		"body-parser": "^1.8.2",
 		"express":"^4.13.3",
 		"serve-favicon": "^2.0.1",
-		"excel":"0.1.6"
+		"excel":"0.1.6",
+		"node-minify": "^1.3.7"
 	}
 }
diff --git a/public/dev.html b/public/dev.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>2013 census data</title>
+
+       <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>-->
+        <script type="text/javascript" src="js/d3.min.js"></script>
+        <script type="text/javascript" src="js/d3.geo.projection.js"></script>
+        <script type="text/javascript" src="js/topojson.v1.min.js"></script>
+        <script type="text/javascript" src="js/queue.min.js"></script>
+        <script type="text/javascript" src="js/geojson-utils.js"></script>
+        <script type="text/javascript" src="js/isMatch.js"></script>
+        <script type="text/javascript" src="js/parser.js"></script>
+        <script type="text/javascript" src="js/page.js"></script>
+        <script type="text/javascript" src="js/load.js"></script>
+
+        <style type="text/css">
+
+            body {
+                margin: 0px;
+                padding: 0px;
+                width: 100vw;
+                height: 100vh;
+            }
+
+            .holder {
+                width: 50vw;
+                height: 3px;
+                float: left;
+                display: block;
+            }
+
+            .controls {
+                width: 10vw;
+                height: 3px;
+                float: left;
+                display: block;
+            }
+
+            .selectors {
+                width: 100%;
+                float: left;
+                background: rgba(123,123,123,0.3); 
+                margin: 3px;
+            }
+
+            #textLayer {
+                position: absolute; 
+                top: 0; 
+                left: 0; 
+                z-index: 2;
+            }
+
+            #renderLayer {
+                position: absolute; 
+                top: 0; 
+                left: 0; 
+                z-index: 1;
+            }
+
+
+
+        </style>
+
+
+    </head>
+    <body>
+        <div class="holder">
+        </div>
+        <div class="controls">
+        </div>
+    </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -4,29 +4,69 @@
         <meta charset="utf-8">
         <title>2013 census data</title>
 
-       <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>-->
-        <script type="text/javascript" src="js/d3.min.js"></script>
-        <script type="text/javascript" src="js/d3.geo.projection.js"></script>
-        <script type="text/javascript" src="js/topojson.v1.min.js"></script>
-        <script type="text/javascript" src="js/queue.min.js"></script>
-        <script type="text/javascript" src="js/geojson-utils.js"></script>
-        <script type="text/javascript" src="js/isMatch.js"></script>
-        <script type="text/javascript" src="js/parser.js"></script>
-        <script type="text/javascript" src="js/page.js"></script>
-        <script type="text/javascript" src="js/load.js"></script>
+        <script type="text/javascript" src="js/census.min.js"></script>
+
+        <script>
+          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+          ga('create', 'UA-2076277-36', 'auto');
+          ga('send', 'pageview');
+
+        </script>
         <style type="text/css">
-            /* No style rules here yet */       
+
+            body {
+                margin: 0px;
+                padding: 0px;
+                width: 100vw;
+                height: 100vh;
+            }
+
+            .holder {
+                width: 50vw;
+                height: 3px;
+                float: left;
+                display: block;
+            }
+
+            .controls {
+                width: 10vw;
+                height: 3px;
+                float: left;
+                display: block;
+            }
+
+            .selectors {
+                width: 100%;
+                float: left;
+                background: rgba(123,123,123,0.3); 
+                margin: 3px;
+            }
+
+            #textLayer {
+                position: absolute; 
+                top: 0; 
+                left: 0; 
+                z-index: 2;
+            }
+
+            #renderLayer {
+                position: absolute; 
+                top: 0; 
+                left: 0; 
+                z-index: 1;
+            }
+
         </style>
 
-
     </head>
     <body>
-       <img src="/img/shade-white.png" style="display:none" id="shade-white" />
-       <img src="/img/shade-red.png" style="display:none" id="shade-red" />
-       <img src="/img/shade-green.png" style="display:none" id="shade-green" />
-       <img src="/img/shade-blue.png" style="display:none" id="shade-blue" />
+        <div class="holder">
+        </div>
+        <div class="controls">
+        </div>
     </body>
 </html>