CanJS 4.0

green3g · Feb 3, 2018 · 6d52afe · 6d52afe
1 parent 80c11f5
commit 6d52afe
Show file tree

Hide file tree

Showing 17 changed files with 449 additions and 394 deletions.
diff --git a/app/app.js b/app/app.js
@@ -101,9 +101,9 @@ export default DefineMap.extend('App',
      */
         init () {
             this.callHooks('init', this);
-            route('{configName}', {configName: 'viewer'});
+            route.register('{configName}', {configName: 'viewer'});
             route.data = this; 
-            route.ready();
+            route.start();
         },
         /**
          * Calls hooks that return a promise in order

diff --git a/app/template.stache b/app/template.stache
@@ -17,7 +17,7 @@
             <ul class="menu">
                 {{#each(links)}}
                 <li class="menu-item">
-                    <a href="#{{id}}" {{#is(configName, id)}}class="active"{{/is}}>
+                    <a href="#{{id}}" {{#is(../configName, id)}}class="active"{{/is}}>
                         {{title}}
                     </a>
                 </li>
@@ -28,6 +28,8 @@
 </header>
 
 {{#if configPromise.isPending}}
-<div class="loading loading-lg" /> {{else}}
-<esri-map mapOptions:from="config.mapOptions" viewOptions:from="config.viewOptions" view:to="view" widgets:from="config.widgets"
-/> {{/if}}
+<div class="loading loading-lg" /> 
+{{else}}
+<esri-map mapOptions:from="config.mapOptions" 
+    viewOptions:from="config.viewOptions" view:to="view" widgets:from="config.widgets" /> 
+{{/if}}
diff --git a/components/draw-widget/template.stache b/components/draw-widget/template.stache
@@ -1,8 +1,8 @@
 <div class="btn-group mt-2">                        
     {{#each(geometries, type=value)}}
         {{#with(button=../buttons[type])}}
-        <button class="btn btn-default tooltip {{#is type ../../active}}active{{/is}}" data-tooltip="{{button.tooltip}}" 
-            type="button" on:el:click="draw(type)"><i class="{{button.iconClass}}"></i></button>
+        <button class="btn btn-default tooltip {{#is ../type ../../active}}active{{/is}}" data-tooltip="{{button.tooltip}}" 
+            type="button" on:el:click="../../draw(../type)"><i class="{{button.iconClass}}"></i></button>
         {{/with}}
     {{/each}}
     {{#if(graphicsLayer.graphics.items.length)}}

diff --git a/components/edit-attribute-dialog/template.stache b/components/edit-attribute-dialog/template.stache
@@ -5,7 +5,7 @@
     on:el:beforeremove="setModal()">
     <sp-form isSaving:bind="isSaving" 
         object:from="editGraphic.attributes" 
-        on:submit="submitForm" 
-        on:cancel="cancelForm" 
+        on:submit="submitForm()" 
+        on:cancel="cancelForm()" 
         fields:from="editFields"></sp-form>
 </sp-modal>
diff --git a/components/edit-feature-widget/template.stache b/components/edit-feature-widget/template.stache
@@ -13,8 +13,8 @@
         <p>Add Details:</p>
         <sp-form 
             isSaving:bind="isSaving" 
-            on:submit="submitForm" 
-            on:cancel="cancelForm" 
+            on:submit="submitForm()" 
+            on:cancel="cancelForm()" 
             fields:from="editFields"
             object:from="editGraphic"></sp-form>
     {{else}}
@@ -28,7 +28,7 @@
 {{else}}
     <ul class="menu">
         {{#each(layers, layer=value)}}
-        <li class="menu-item" on:click="activate(layer)">
+        <li class="menu-item" on:click="../activate(layer)">
             <div class="tile tile-centered">
             <div class="tile-icon">
                 <div class="example-tile-icon">

diff --git a/components/esri-map/ViewModel.js b/components/esri-map/ViewModel.js
@@ -38,6 +38,9 @@ export default DefineMap.extend('EsriMap', {seal: false}, {
     },
     element: {
         set (element) {
+            if (element === this.element) {
+                return element;
+            }
             if (!element && this.view) {
                 this.view.destroy();
                 this.assign({

diff --git a/components/esri-map/esri-map.js b/components/esri-map/esri-map.js
@@ -1,6 +1,7 @@
 import Component from 'can-component';
 import ViewModel from './ViewModel';
 import './esri-map.less';
+import 'can-3-4-compat/dom-mutation-events';
 
 Component.extend({
     tag: 'esri-map',

diff --git a/components/esri-map/esri-map.less b/components/esri-map/esri-map.less
@@ -1,4 +1,4 @@
-esri-map {
+esri-map, esri-map > div {
   display: block;
   height:100%;
   width:100%;

diff --git a/components/feature-table/template.stache b/components/feature-table/template.stache
@@ -1,3 +1,3 @@
 <div class="container">
-    <list-table vm:objects:from="features" id-prop="OBJECTID" vm:fields:from="fields" />
+    <list-table objects:from="features" idProp:from="'OBJECTID'" fields:from="fields" />
 </div>
diff --git a/components/select-widget/README.md b/components/select-widget/README.md
@@ -52,11 +52,11 @@ A query object consists of 4 properties.
 
 ### Field Objects
 
-A field object is optional, and may be a simple string which will result in a text field. If an object is provided, it may be any of the field properties that are used in [spectre-canjs](https://github.com/roemhildtg/spectre-canjs). For example, to configure a select dropdown, you may use the following:
+A field object is optional, and may be a simple string which will result in a text field. If an object is provided, it may be any of the field properties that are used in [spectre-canjs](https://github.com/roemhildtg/spectre-canjs). For example, to configure a `sp-select-field` component dropdown, you may use the following:
 
 ```javascript
     fields: [{
-        fieldType: 'select',
+        editTag: 'sp-select-field',
         options: [{
             label: 'Option label',
             value: 'field-value'

diff --git a/components/select-widget/template.stache b/components/select-widget/template.stache
@@ -1,8 +1,11 @@
+<can-import from="spectre-canjs/sp-toast/" />
+
 <div class="workorder-picker container" 
     style="background:#fff;width:300px;padding:10px;">
     <p class="text-bold">{{title}}</p>
     {{#if message}}
-        <toast-item heading:from="'Oops'" body:from="message" severity:from="'warning'" dismissable:from="false" />
+        <sp-toast heading:from="'Oops'" 
+            body:from="message" severity:from="'warning'" dismissable:from="false" />
     {{/if}}
     {{#if(selectGraphicsLayer.graphics.items.length)}}
         <p>You've selected {{selectGraphicsLayer.graphics.items.length}} features.
@@ -14,7 +17,7 @@
             <!-- menu item -->
             {{#each(actions)}}
                 <li class="menu-item">
-                    <a href="#" on:el:click="onActionClick(., scope.event)">
+                    <a href="#" on:click="../onActionClick(., scope.event)">
                         <i class="{{iconClass}}"></i> {{label}}
                     </a>
                 </li>
@@ -37,7 +40,7 @@
                         graphicsLayer:bind="drawGraphicsLayer" />
 
                     {{#if(drawGraphicsLayer.graphics.items.length)}}
-                        <button class="btn btn-primary" on:el:click="searchGraphics">
+                        <button class="btn btn-primary" on:el:click="searchGraphics()">
                             <i class="esri-icon-search"></i> Search</button> 
                     {{/if}}
                 {{else}}
@@ -46,7 +49,7 @@
                         fields:from="selectedQuery.fields" 
                         object:from="queryFormObject" 
                         on:submit="searchFormSubmit(queryFormObject)" 
-                        on:cancel="reset" />
+                        on:cancel="reset()" />
                 {{/eq}}
             {{/if}}
         {{/if}}

diff --git a/config/scene/scene.js b/config/scene/scene.js
@@ -6,6 +6,7 @@ export default {
     title: 'Loading a 3d map',
     debug: true,
     mapOptions: {
+        basemap: 'satelite',
 
         // the main difference is we need to specify the map type as "WebScene"
         // this can be either "WebMap" (default) or "WebScene"
@@ -18,11 +19,6 @@ export default {
 
         // We also need to specify the view type
         // this can be either "MapView" (default) or "SceneView"
-        type: 'SceneView',
-        environment: {
-            lighting: {
-                directShadowsEnabled: false
-            }
-        }
+        type: 'SceneView'
     }
 };
diff --git a/config/secure/secure.js b/config/secure/secure.js
@@ -1,5 +1,6 @@
 export default {
-    title: 'Accessing secure resources <i class="esri-icon-key"></i><code>user1</code>',
+    title: `can-arcgis provides an auth hook that will store passwords for you. 
+        Try entering user1 for the username/password and refreshing the page`,
     mapOptions: {
         basemap: 'topo',
         layers: [{
@@ -13,4 +14,5 @@ export default {
         center: [-120.723, 35.165],
         zoom: 12
     }
-};
+};
+
diff --git a/config/select/select.js b/config/select/select.js
@@ -56,7 +56,7 @@ export default {
                     queries: [{
                         value: 'name',
                         label: 'Establishment Name',
-                        fields: ['name'],
+                        fields: [{name: 'name', placeholder: 'Example: KFC'}],
                         queryTemplate: 'EstablishmentName LIKE \'%{name}%\''
                     }, {
                         value: 'riskType',
@@ -65,7 +65,7 @@ export default {
                         fields: [{
                             name: 'risk',
                             alias: 'Risk Type',
-                            fieldType: 'select',
+                            editTag: 'sp-select-field',
                             options: [{
                                 value: 1,
                                 label: 'Inspected one time per year'