From 58f4d92152f9ecca56af61b649abb3081e19fc06 Mon Sep 17 00:00:00 2001 From: Tom Wayson Date: Tue, 3 Mar 2015 12:38:55 -0800 Subject: [PATCH] added code snippets on all example pages based on http://plnkr.co/edit/OPxzDu?p=preview resolves #29 --- docs/app/about/about.html | 4 +- docs/app/about/about.js | 3 +- docs/app/app.js | 5 ++- docs/app/common/nav.js | 19 ++++++++++ docs/app/examples/basemap.js | 3 +- docs/app/examples/center-and-zoom.js | 3 +- docs/app/examples/examples.js | 3 +- docs/app/examples/feature-layers.js | 1 - docs/app/examples/legend.html | 4 +- docs/app/examples/legend.js | 1 - docs/app/examples/map-events.js | 1 - docs/app/examples/simple-map.js | 1 - docs/app/examples/snippets.js | 38 +++++++++++++++++++ docs/app/examples/web-map.js | 1 - docs/index.html | 55 ++++++++++++++++++++++++---- docs/test.html | 1 + 16 files changed, 118 insertions(+), 25 deletions(-) create mode 100644 docs/app/common/nav.js create mode 100644 docs/app/examples/snippets.js create mode 100644 docs/test.html diff --git a/docs/app/about/about.html b/docs/app/about/about.html index 43fef48..e9c1cdb 100644 --- a/docs/app/about/about.html +++ b/docs/app/about/about.html @@ -9,11 +9,11 @@

Roll Your Own Directives

We believe that you will have the best success integrating maps with your angular applications if you build directives that focus on your problem domain.

For example - suppose you are building an application for a local government. There is a very good chance that you would be integrating a few standard types of maps. Using the examples provided in this repo you could create directives like...

- 

+        

 <parcel-map pin="ABC123"></parcel-map>
 <lot-layout-map lot="93920-A-23"></lot-layout-map>
 <workorder-map order="10-31-14-002"></workorder-map>
-
+

These directives could be easily integrated into any views in the over-arching application, or even shared across a suite of applications.

diff --git a/docs/app/about/about.js b/docs/app/about/about.js index 7c18e48..63f1763 100644 --- a/docs/app/about/about.js +++ b/docs/app/about/about.js @@ -1,6 +1,5 @@ 'use strict'; angular.module('esri-map-docs') - .controller('AboutCtrl', function($scope) { - $scope.$parent.page = 'about'; + .controller('AboutCtrl', function() { }); diff --git a/docs/app/app.js b/docs/app/app.js index c42ec6f..1e9512c 100644 --- a/docs/app/app.js +++ b/docs/app/app.js @@ -1,7 +1,10 @@ (function(angular) { 'use strict'; + // NOTE: ngSelect and hljs are only included to support + // tabs that dynamically load code and highlight syntax + // see: https://github.com/pc035860/angular-highlightjs#demos angular - .module('esri-map-docs', ['ngRoute', 'ngSanitize', 'esri.map']) + .module('esri-map-docs', ['ngRoute', 'ngSanitize', 'ngSelect', 'hljs', 'esri.map']) .config(function($routeProvider) { $routeProvider .when('/examples', { diff --git a/docs/app/common/nav.js b/docs/app/common/nav.js new file mode 100644 index 0000000..295c66e --- /dev/null +++ b/docs/app/common/nav.js @@ -0,0 +1,19 @@ +'use strict'; + +angular.module('esri-map-docs') + .controller('NavCtrl', function($scope) { + + function getPathParts(path) { + if (!path) { + return []; + } + return path.slice(path.indexOf('/') + 1).split('/'); + } + + // set page based on route + $scope.$on('$routeChangeStart', function(event, next, current) { + var pathParts = getPathParts(next.originalPath); + $scope.page = pathParts.length > 0 ? pathParts[0] : ''; + }); + + }); diff --git a/docs/app/examples/basemap.js b/docs/app/examples/basemap.js index c0ede23..b4bfafc 100644 --- a/docs/app/examples/basemap.js +++ b/docs/app/examples/basemap.js @@ -1,8 +1,7 @@ 'use strict'; angular.module('esri-map-docs') - .controller('BasemapCtrl', function($scope) { - $scope.$parent.page = 'examples'; + .controller('BasemapCtrl', function($scope, $route) { $scope.map = { center: { lng: -31.036, diff --git a/docs/app/examples/center-and-zoom.js b/docs/app/examples/center-and-zoom.js index 5b44d66..9351580 100644 --- a/docs/app/examples/center-and-zoom.js +++ b/docs/app/examples/center-and-zoom.js @@ -2,7 +2,6 @@ angular.module('esri-map-docs') .controller('CenterAndZoomCtrl', function($scope) { - $scope.$parent.page = 'examples'; $scope.map = { center: { lng: -122.45, @@ -27,5 +26,5 @@ angular.module('esri-map-docs') $scope.map.center.lat = city.lat; $scope.map.center.lng = city.lng; $scope.map.zoom = city.zoom; - } + }; }); diff --git a/docs/app/examples/examples.js b/docs/app/examples/examples.js index f93780c..4cb244b 100644 --- a/docs/app/examples/examples.js +++ b/docs/app/examples/examples.js @@ -1,6 +1,5 @@ 'use strict'; angular.module('esri-map-docs') - .controller('ExamplesCtrl', function($scope) { - $scope.$parent.page = 'examples'; + .controller('ExamplesCtrl', function() { }); diff --git a/docs/app/examples/feature-layers.js b/docs/app/examples/feature-layers.js index c9703b3..b22b44c 100644 --- a/docs/app/examples/feature-layers.js +++ b/docs/app/examples/feature-layers.js @@ -2,7 +2,6 @@ angular.module('esri-map-docs') .controller('FeatureLayersCtrl', function($scope) { - $scope.$parent.page = 'examples'; $scope.map = { center: { lng: -122.676207, diff --git a/docs/app/examples/legend.html b/docs/app/examples/legend.html index 7c61059..7783f32 100644 --- a/docs/app/examples/legend.html +++ b/docs/app/examples/legend.html @@ -1,7 +1,7 @@

Legend Example

-
+
@@ -10,7 +10,7 @@

Legend Example

Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}

Based on this sample.

-
+
diff --git a/docs/app/examples/legend.js b/docs/app/examples/legend.js index ae8b134..9aa19a9 100644 --- a/docs/app/examples/legend.js +++ b/docs/app/examples/legend.js @@ -2,7 +2,6 @@ angular.module('esri-map-docs') .controller('LegendCtrl', function($scope) { - $scope.$parent.page = 'examples'; $scope.map = { center: { lng: -96.53, diff --git a/docs/app/examples/map-events.js b/docs/app/examples/map-events.js index 10bc69f..9631fbf 100644 --- a/docs/app/examples/map-events.js +++ b/docs/app/examples/map-events.js @@ -2,7 +2,6 @@ angular.module('esri-map-docs') .controller('MapEventsCtrl', function($scope, esriRegistry) { - $scope.$parent.page = 'examples'; $scope.map = { center: { lng: -122.45, diff --git a/docs/app/examples/simple-map.js b/docs/app/examples/simple-map.js index a474cca..9171205 100644 --- a/docs/app/examples/simple-map.js +++ b/docs/app/examples/simple-map.js @@ -2,7 +2,6 @@ angular.module('esri-map-docs') .controller('SimpleMapCtrl', function($scope) { - $scope.$parent.page = 'examples'; $scope.map = { center: { lng: -122.45, diff --git a/docs/app/examples/snippets.js b/docs/app/examples/snippets.js new file mode 100644 index 0000000..24a36d1 --- /dev/null +++ b/docs/app/examples/snippets.js @@ -0,0 +1,38 @@ +'use strict'; + +angular.module('esri-map-docs') + .controller('SnippetsCtrl', function($scope) { + + function getPathParts(path) { + if (!path) { + return []; + } + return path.slice(path.indexOf('/') + 1).split('/'); + } + + // parse snippet include file locations from route + function getTabs(path) { + var pathParts = getPathParts(path), + tabs, + page; + if (pathParts.length === 0) { + return; + } + page = pathParts[0]; + if (!page) { + return; + } + if (page === 'examples' && pathParts.length > 1) { + tabs = []; + tabs.push('app/examples/' + pathParts[1] + '.html'); + tabs.push('app/examples/' + pathParts[1] + '.js'); + return tabs; + } + } + + // update snippet parameters based on route + $scope.$on('$routeChangeStart', function(event, next/*, current*/) { + $scope.tabs = getTabs(next.originalPath); + $scope.currentTab = $scope.tabs && $scope.tabs.length > 0 ? $scope.tabs[0] : null; + }); + }); diff --git a/docs/app/examples/web-map.js b/docs/app/examples/web-map.js index 52c533a..0d32498 100644 --- a/docs/app/examples/web-map.js +++ b/docs/app/examples/web-map.js @@ -2,7 +2,6 @@ angular.module('esri-map-docs') .controller('WebMapCtrl', function($scope, esriLoader, esriRegistry) { - $scope.$parent.page = 'examples'; $scope.map = { center: { lng: -122.6819, diff --git a/docs/index.html b/docs/index.html index 6022ed5..e56e7e9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,21 +9,33 @@ + + + + +
+
-
+ +
+ + +
+ +
+
+
+
+
+
+ +

from Esri

+ + + + + + + + + - + + + @@ -57,7 +98,7 @@

angular-esri-map

- + diff --git a/docs/test.html b/docs/test.html new file mode 100644 index 0000000..b14df64 --- /dev/null +++ b/docs/test.html @@ -0,0 +1 @@ +Hi