first commit

odoe · Oct 3, 2012 · b60d238 · b60d238
commit b60d238
Show file tree

Hide file tree

Showing 50 changed files with 1,967 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+*.swp
+*~
+example/src/.sass-cache/*
+*.rb
+.sass/*
+.img/*
+release/*
diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+# Drag and Drop Edit Demo
+
+This is a sample demo showing how to use the browser drag n' drop
+functionality to add new point data to your maps
+in your [ArcGIS JavaScript] applications.
+
+This has been tested to work in Chrome, IE, and Firefox.
+This tool could be used to add new points to FeatureLayers as well.
+
+Here is a [demo] of this application in action.
+
+[ArcGIS JavaScript]: http://help.arcgis.com/en/webapi/javascript/arcgis/index.html
+[demo]: http://www.odoe.net/apps/dndeditdemo/
diff --git a/example/src/img/glyphicons-halflings-white.png b/example/src/img/glyphicons-halflings-white.png
diff --git a/example/src/img/glyphicons-halflings.png b/example/src/img/glyphicons-halflings.png
diff --git a/example/src/img/home_icon.png b/example/src/img/home_icon.png
diff --git a/example/src/img/weather_station.png b/example/src/img/weather_station.png
diff --git a/example/src/index.html b/example/src/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content='text/html, charset=UTF-8' http-equiv='Content-Type' />
+    <meta http-equiv="X-UA-Compatible" content="IE=7;IE=8" /> 
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <!--[if lt IE 9]>
+    <script src="js/libs/shim/html5shiv.js"></script>
+    <![endif]-->
+    <link href='stylesheets/main.css' rel='stylesheet' type='text/css' />
+    <title>drag n' drop demo</title>
+    <body class="nihilo">
+      <div class="row-fluid navbar">
+        <div class="row-fluid navbar-inner">
+          <div class="row-fluid span12">
+            <a class="brand" href="#">drag and drop edit demo</a>
+            <ul class="nav">
+              <li><a href="http://www.odoe.net">odoenet</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div id='container-main'>
+        <div id="map" ></div>
+        <div id="sidebar-right"></div>
+      </div>
+
+    </body>
+    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2">
+    </script>
+    <script type="text/javascript" src="js/main.js"></script>
+  </head>
+</html>
diff --git a/example/src/js/app.build.js b/example/src/js/app.build.js
@@ -0,0 +1,93 @@
+/**
+ * This is the build file I have started using
+ * to build my ArcGIS JS API 3.0 apps, which are
+ * based on Dojo 1.7. I used a similar build file
+ * when I was using Require.js, so it wasn't much different.
+ *
+ * I tried using the Dojo Build Tools, but it just seemed
+ * way too bloated to download the Dojo SDK, sort my files,
+ * blah blah blah. With r.js I can use Node NPM to
+ * npm install requirejs and just use the following command
+ * r.js -o src/js/app.build.js
+ * Done and done!
+ *
+ * This build file is meant to be used with r.js
+ * http://requirejs.org/docs/optimization.html
+ *
+ * For more details on options, you can review
+ * the sample r.js build file
+ * https://github.com/jrburke/r.js/blob/master/build/example.build.js
+ */
+({
+  appDir  : "../",
+  baseUrl : "js",
+  dir     : "../../release",
+
+  paths : {
+    /**
+     * This is key. Since the namespaces of dojo & esri,
+     * even dojox and dijit come from the ArcGIS CDN, use the
+     * empty: scheme so r.js doesn't try pull in these
+     * dependencies.
+     * http://requirejs.org/docs/optimization.html#empty
+     */
+    "dojo"  : "empty:",
+    "dijit" : "empty:",
+    "esri"  : "empty:"
+  },
+  /**
+   * r.js uses uglifyjs by default.
+   * https://github.com/mishoo/UglifyJS/
+   *
+   * If you run r.js via java, you can use google closure.
+   * I tried to integrate closure, but java on my work
+   * machine kept punching me in the face. Stick with uglify,
+   * a dude on twitter told me it was faster anyway.
+   */
+  optimize : "uglify",
+  /**
+   * This doesn't work as intended for me.
+   * According to docs and google groups, this
+   * should remove all combined files when
+   * optimizing a whole project
+   */
+  removeCombined      : true,
+  /**
+   * This option will grab all the text! calls and
+   * place them in your optimized file to avoid
+   * making XMLHttpRequests to load the files
+   */
+  inlineText          : true,
+
+  /**
+   * This is optional, as setting the modules
+   * will create a combined file of all dependencies
+   * in the release folder. You get a single larger file
+   * to load rather than multiple smaller files.
+   * Use at your own discretion.
+   * */
+  //modules  : [
+    //{
+      /**
+       * I optimze my app file, because I use
+       * my main file to set up my dojoConfig.
+       * If doing a single js file optimization,
+       * DO NOT include the dojoConfig file
+       * to be included. It will blow you up.
+       * Optmize the next entry point into your app.
+       */
+      //name: "app"
+    //}
+  //],
+
+  /**
+   * Will make your css a single line file
+   */
+  optimizeCss         : "standard",
+  /**
+   * Ewww, RegEx. It's easy though,
+   * just include files/folders you don't want to
+   * get exported to your release build folder.
+   */
+  fileExclusionRegExp : /\.(coffee|.*~|swp|rb|lnk)|sass|.sass-cache|build/
+})
diff --git a/example/src/js/app.coffee b/example/src/js/app.coffee
@@ -0,0 +1,30 @@
+define [
+  'views/ViewManager'
+], (VM) ->
+  console.log "init"
+  initialize = ->
+    vm = new VM()
+    vm.render()
+    unless Array::indexOf
+      Array::indexOf = (searchElement) -> #, fromIndex
+        "use strict"
+        throw new TypeError()  unless this?
+        t = Object(this)
+        len = t.length >>> 0
+        return -1  if len is 0
+        n = 0
+        if arguments.length > 0
+          n = Number(arguments[1])
+          unless n is n # shortcut for verifying if it's NaN
+            n = 0
+          else n = (n > 0 or -1) * Math.floor(Math.abs(n))  if n isnt 0 and n isnt Infinity and n isnt -Infinity
+        return -1  if n >= len
+        k = (if n >= 0 then n else Math.max(len - Math.abs(n), 0))
+        while k < len
+          return k  if k of t and t[k] is searchElement
+          k++
+        -1
+
+
+  initialize: initialize
+
diff --git a/example/src/js/app.js b/example/src/js/app.js
@@ -0,0 +1,44 @@
+(function() {
+
+  define(['views/ViewManager'], function(VM) {
+    var initialize;
+    console.log("init");
+    initialize = function() {
+      var vm;
+      vm = new VM();
+      vm.render();
+      if (!Array.prototype.indexOf) {
+        return Array.prototype.indexOf = function(searchElement) {
+          "use strict";
+          var k, len, n, t;
+          if (typeof this === "undefined" || this === null) throw new TypeError();
+          t = Object(this);
+          len = t.length >>> 0;
+          if (len === 0) return -1;
+          n = 0;
+          if (arguments.length > 0) {
+            n = Number(arguments[1]);
+            if (n !== n) {
+              n = 0;
+            } else {
+              if (n !== 0 && n !== Infinity && n !== -Infinity) {
+                n = (n > 0 || -1) * Math.floor(Math.abs(n));
+              }
+            }
+          }
+          if (n >= len) return -1;
+          k = (n >= 0 ? n : Math.max(len - Math.abs(n), 0));
+          while (k < len) {
+            if (k in t && t[k] === searchElement) return k;
+            k++;
+          }
+          return -1;
+        };
+      }
+    };
+    return {
+      initialize: initialize
+    };
+  });
+
+}).call(this);
diff --git a/example/src/js/helpers/ArrayUtil.coffee b/example/src/js/helpers/ArrayUtil.coffee
@@ -0,0 +1,5 @@
+define ->
+  exists: (array, item) ->
+    for attr in array
+      if item.label is attr.label then return true
+    false
diff --git a/example/src/js/helpers/ArrayUtil.js b/example/src/js/helpers/ArrayUtil.js
@@ -0,0 +1,16 @@
+(function() {
+
+  define(function() {
+    return {
+      exists: function(array, item) {
+        var attr, _i, _len;
+        for (_i = 0, _len = array.length; _i < _len; _i++) {
+          attr = array[_i];
+          if (item.label === attr.label) return true;
+        }
+        return false;
+      }
+    };
+  });
+
+}).call(this);
diff --git a/example/src/js/helpers/extentfactory.coffee b/example/src/js/helpers/extentfactory.coffee
@@ -0,0 +1,16 @@
+define ->
+  losAngeles: ->
+    new esri.geometry.Extent {
+        xmin: -13286420.39
+        ymin: 3993285.76
+        xmax: -13025954.7
+        ymax: 4136625.11
+        spatialReference: wkid:102113 }
+
+  demo: ->
+    new esri.geometry.Extent {
+        xmin: -13154714.5196626
+        ymin: 4020932.14934935
+        xmax: -13152321.7329975
+        ymax: 4022801.26265936
+        spatialReference: wkid:102113 }
diff --git a/example/src/js/helpers/extentfactory.js b/example/src/js/helpers/extentfactory.js
@@ -0,0 +1,30 @@
+(function() {
+
+  define(function() {
+    return {
+      losAngeles: function() {
+        return new esri.geometry.Extent({
+          xmin: -13286420.39,
+          ymin: 3993285.76,
+          xmax: -13025954.7,
+          ymax: 4136625.11,
+          spatialReference: {
+            wkid: 102113
+          }
+        });
+      },
+      demo: function() {
+        return new esri.geometry.Extent({
+          xmin: -13154714.5196626,
+          ymin: 4020932.14934935,
+          xmax: -13152321.7329975,
+          ymax: 4022801.26265936,
+          spatialReference: {
+            wkid: 102113
+          }
+        });
+      }
+    };
+  });
+
+}).call(this);
diff --git a/example/src/js/helpers/identifyhelper.coffee b/example/src/js/helpers/identifyhelper.coffee
@@ -0,0 +1,38 @@
+define [
+  'jquery'
+  'underscore'
+  'views/infowindow/infoWindowView'
+], ($, _, InfoView) ->
+
+    identifyHandler: (map, url) ->
+      identifyTask = new esri.tasks.IdentifyTask url
+      idParams = new esri.tasks.IdentifyParameters()
+      idParams.tolerance = 3
+      idParams.returnGeometry = true
+      idParams.layerIds = [0,1]
+      idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL
+
+      #dojo.disconnect handle # just in case
+      dojo.connect map, "onClick", (evt) ->
+        #dojo.disconnect handle
+        idParams.geometry = evt.mapPoint
+        idParams.mapExtent = map.extent
+        idParams.width = map.width
+        idParams.height = map.height
+        deferred = identifyTask.execute idParams
+
+        deferred.addCallback (response) =>
+          dojo.map response, (result) ->
+            feature = result.feature
+            feature.attributes.layerName = result.layerName
+            fields = []
+            for key of feature.attributes
+              fields.push name:key unless key.toLowerCase().indexOf("shape") > -1 or key.toLowerCase() is "layername" or key.toLowerCase() is "objectid"
+            view = new InfoView fields
+            content = view.render().$el.html()
+            template = new esri.InfoTemplate "", content #"ID: ${ID}, Location:${LOC_ID}"
+            feature.setInfoTemplate template
+            feature
+        map.infoWindow.setFeatures [ deferred ]
+        map.infoWindow.show evt.mapPoint
+
diff --git a/example/src/js/helpers/identifyhelper.js b/example/src/js/helpers/identifyhelper.js
@@ -0,0 +1,48 @@
+(function() {
+
+  define(['jquery', 'underscore', 'views/infowindow/infoWindowView'], function($, _, InfoView) {
+    return {
+      identifyHandler: function(map, url) {
+        var idParams, identifyTask;
+        identifyTask = new esri.tasks.IdentifyTask(url);
+        idParams = new esri.tasks.IdentifyParameters();
+        idParams.tolerance = 3;
+        idParams.returnGeometry = true;
+        idParams.layerIds = [0, 1];
+        idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
+        return dojo.connect(map, "onClick", function(evt) {
+          var deferred,
+            _this = this;
+          idParams.geometry = evt.mapPoint;
+          idParams.mapExtent = map.extent;
+          idParams.width = map.width;
+          idParams.height = map.height;
+          deferred = identifyTask.execute(idParams);
+          deferred.addCallback(function(response) {
+            return dojo.map(response, function(result) {
+              var content, feature, fields, key, template, view;
+              feature = result.feature;
+              feature.attributes.layerName = result.layerName;
+              fields = [];
+              for (key in feature.attributes) {
+                if (!(key.toLowerCase().indexOf("shape") > -1 || key.toLowerCase() === "layername" || key.toLowerCase() === "objectid")) {
+                  fields.push({
+                    name: key
+                  });
+                }
+              }
+              view = new InfoView(fields);
+              content = view.render().$el.html();
+              template = new esri.InfoTemplate("", content);
+              feature.setInfoTemplate(template);
+              return feature;
+            });
+          });
+          map.infoWindow.setFeatures([deferred]);
+          return map.infoWindow.show(evt.mapPoint);
+        });
+      }
+    };
+  });
+
+}).call(this);
diff --git a/example/src/js/helpers/popuphelper.coffee b/example/src/js/helpers/popuphelper.coffee
@@ -0,0 +1,8 @@
+define ['require', 'esri/symbol', 'esri/dijit/Popup'], (require) ->
+  create: ->
+  	#esri.symbol = require "esri/symbol"
+  	slsLineColor = new dojo.Color [255,0,0]
+  	slsFillColor = new dojo.Color [255, 255, 0, 0.25]
+  	lineSymbol   = new esri.symbol.SimpleLineSymbol esri.symbol.SimpleLineSymbol.STYLE_SOLID, slsLineColor, 1
+  	fillSymbol   = new esri.symbol.SimpleFillSymbol esri.symbol.SimpleFillSymbol.STYLE_SOLID, lineSymbol, slsFillColor
+  	popup        = new esri.dijit.Popup { fillSymbol:fillSymbol }, dojo.create 'div'