Modularization of the codebase

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "env"
+  ]
+}

.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 233
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[.*rc]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

.eslintrc

@@ -0,0 +1,28 @@
+{
+  "root": true,
+  "plugins": [
+    "prettier"
+  ],
+  "extends": [
+    "eslint:recommended"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "BinaryToArray": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "no-unused-vars": "warn",
+    "no-useless-escape": "warn",
+    "no-console": "warn",
+    "no-redeclare": "warn"
+  }
+}

.gitignore

@@ -0,0 +1,65 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# idea stuff
+.idea/
+.cache/
+config.json

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+  "printWidth": 233,
+  "bracketSpacing": false
+}

README.md

@@ -1,42 +1,101 @@
 # JavaScript AJAX client for DAP services
 
 ## Introduction
+
 [OPeNDAP](http://www.opendap.org/) protocol allows publishing huge datasets over internet. The protocols allows describing and querying data in various formats.
 
 This library is designed to allow querying DAP dataset in AJAX based on the url. Main library code is from [Roberto De Almeida's jsdap project on google code](https://code.google.com/p/jsdap/).
 
-## Setup 
-The javascript files need to be loaded to the HTML source code, the **test.html** file is a good quickstart to load the libraries. 
+## Setup
+
+The script is packed as `UMD` module and transpile down to `ES5` (`dist/jsdap`). However, you can only use it as `ES6 module` or `AMD` module. Since
+the script relies on `window.XMLHttpRequest`, it is not available on `NODE` environment.
+
+The **dist/index.html** is a good quickstart to load the libraries.
 Notice also that the cross domain limitations apply to OPeNDAP servers and thus requests must be properly managed or CORS enabled.
 
-## Usage 
+A quick start (make sure you have `yarn` or `npm` install), following is example with `yarn`:
+
+    // Download the dependencies (in the proj folder)
+    $ yarn
+
+    // Then you bring the webpack-dev server up and checkout the example
+    $ yarn serve
+
+    // If you want to rebuild the dist again, then
+    $ yarn build
+
+## Usage
+
+To load a dataset the _loadData_ function can be used this way (`ES6` exampe) :
+
+    import JsDap from './dist/jsdap.js';
 
-To load a dataset the *loadData* function must be used this way :
+    // if you want the IE_HACK, set the flag as true
+    let jsdap = new JsDap(false);
 
-	loadData("http://www.example.com/dapserver/mydataset.nc.dods?time[1][1:5]",
-		function(data) {
-			console.log("Received data");
-			console.log(data);
-		});
-Notice that the url **MUST** be a .dods request and that you *CAN* add additionnaly DAP query.
+    jsdap.loadData("http://www.example.com/dapserver/mydataset.nc.dods?time[1][1:5]",
+    	function(data) {
+    		console.log("Received data");
+    		console.log(data);
+    	});
+
+Notice that the url **MUST** be a .dods request and that you _CAN_ add additionnaly DAP query.
 
 To only load the dataset (ie. information about the structure of data) :
-
-	loadDataset("http://www.example.com/dapserver/mydataset.nc.dds", i
-		function(info) {
-			console.log(info);
-		});
+
+    import JsDap from './dist/jsdap.js';
+
+    // if you want the IE_HACK, set the flag as true
+    let jsdap = new JsDap(false);
+
+    jsdap.loadDataset("http://www.example.com/dapserver/mydataset.nc.dds",
+        function(info) {
+            console.log(info);
+        });
 
 Notice that the url **MUST** be a .dds request and you **CANNOT** add additonnal DAP query/
 
 An extra parameter can be added to send additionnal headers to the request.
 
-## Troubleshooting
+Of cause, you can still go with the old school way, load the script into the `<script>` tag,
+there you go:
 
-1. Your requests fail ? Careful about **cross domain requests**
-2. You have parsing errors in loadData ? Ensure you passed in .dods request not .ascii or other.
-3. You have parsing errors with loadDataset ? Ensure you are doing a .dds request.
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>OpenDap</title>
+    <script type="text/javascript" src="jsdap.js"></script></head>
+    <body>
+    <script type="text/javacript">
 
-Not enought ? Contact me at contact@obenhamid.me or http://obenhamid.me
+        // disable IE_HACK as default
+        var jsdap = new JsDap(false);
+
+        // if you want IE_HACK, just set the flag as true during initialize
+        // var jsdap = new JsDap(true);
+
+        // load data
+        jsdap.loadData("http://www.example.com/dapserver/mydataset.nc.dods?time[1][1:5]",
+            function(data) {
+                console.log("Received data");
+                console.log(data);
+            });
 
+        // load dataset
+        jsdap.loadDataset("http://www.example.com/dapserver/mydataset.nc.dds",
+            function(info) {
+                console.log(info);
+            });
+    </script>
+    </body>
+    </html>
 
+## Troubleshooting
+
+1.  Your requests fail ? Careful about **cross domain requests**
+2.  You have parsing errors in loadData ? Ensure you passed in .dods request not .ascii or other.
+3.  You have parsing errors with loadDataset ? Ensure you are doing a .dds request.
+
+Not enought ? Contact me at contact@obenhamid.me or http://obenhamid.me

dist/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>OpenDap</title>
+    <style type="text/css">
+        form {
+            margin: 20px 10px;
+        }
+
+        input {
+            margin-bottom: 10px;
+        }
+    </style>
+<script type="text/javascript" src="jsdap.js"></script></head>
+<body>
+<script>
+    // disable IE_HACK as default
+    var jsdap = new JsDap(false);
+
+    // if you want IE_HACK, just set the flag as true during initialize
+    // var jsdap = new JsDap(true);
+
+    function loadData() {
+        var url = document.getElementById('dods_url').value;
+        var ta = document.getElementById('dods_textarea');
+        jsdap.loadData(url, function(data) {
+            ta.value = JSON.stringify(data, null, 2);
+        });
+        return false;
+    }
+
+    function loadDataset() {
+        var url = document.getElementById('dds_url').value;
+        var ta = document.getElementById('dds_textarea');
+        jsdap.loadDataset(url, function(data) {
+            ta.value = JSON.stringify(data, null, 2);
+        });
+        return false;
+    }
+
+
+</script>
+<form method="GET" action="#">
+    <input type="text" id="dods_url" size="128" value=""
+           placeholder="DODS URL (e.g. http://www.example.com/dapserver/mydataset.nc.dods?time[1][1:5])"/>
+    <input type="button" value="load DODS URL" onclick="loadData()"/>
+    <textarea id="dods_textarea" style="width: 100%; height: 400px;"></textarea>
+</form>
+
+<form method="GET" action="#">
+    <input type="text" id="dds_url" size="128" value=""
+           placeholder="DDS URL (e.g. http://www.example.com/dapserver/mydataset.nc)"/>
+    <input type="button" value="load DDS URL" onclick="loadDataset()"/>
+    <textarea id="dds_textarea" style="width: 100%; height: 400px;"></textarea>
+</form>
+</body>
+</html>