added code snippets on all example pages

based on http://plnkr.co/edit/OPxzDu?p=preview resolves #29
Esri · Mar 3, 2015 · 58f4d92 · 58f4d92
1 parent a309592
commit 58f4d92
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 25 deletions.
diff --git a/docs/app/about/about.html b/docs/app/about/about.html
@@ -9,11 +9,11 @@ <h2>Roll Your Own Directives</h2>
         <p>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.
         </p>
         <p>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...</p>
-        <pre><code>
+        <div hljs no-escape>
 &lt;parcel-map pin=&quot;ABC123&quot;&gt;&lt;/parcel-map&gt;
 &lt;lot-layout-map lot=&quot;93920-A-23&quot;&gt;&lt;/lot-layout-map&gt;
 &lt;workorder-map order=&quot;10-31-14-002&quot;&gt;&lt;/workorder-map&gt;
-            </code></pre>
+        </div>
         <p>These directives could be easily integrated into any views in the over-arching application, or even shared across a suite of applications.
         </p>
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,7 +1,7 @@
 <h2>Legend Example</h2>
 <!-- add map to page and bind to scope map parameters -->
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-xs-8 col-sm-9 col-lg-10">
         <esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo" style="width: 100%">
             <esri-feature-layer title="Rivers" url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1"></esri-feature-layer>
             <esri-feature-layer title="Water Bodies" url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0"></esri-feature-layer>
@@ -10,7 +10,7 @@ <h2>Legend Example</h2>
         <p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
         <p>Based on <a href="https://developers.arcgis.com/javascript/jssamples/widget_legend.html">this sample</a>.</p>
     </div>
-    <div class="col-md-3">
+    <div class="col-xs-4 col-sm-3 col-lg-2">
         <div id="legend"></div>
     </div>
 </div>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,21 +9,33 @@
     <!-- load bootstrap css -->
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="styles/narrow.css">
+
+    <!-- code snippet syntax highlighting -->
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
+
     <!-- load Esri CSS -->
     <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css">
+
     <!-- custom styles for this app -->
     <style type="text/css">
-    .jumbotron {
-        background: #091926 url('images/jumbotron-background.jpg') no-repeat right;
-        color: #fff;
-    }
+        .jumbotron {
+            background: #091926 url('images/jumbotron-background.jpg') no-repeat right;
+            color: #fff;
+        }
+        .map {
+            margin-bottom: 10px;
+        }
+        .tab-container {
+            padding-top: 1em;
+        }
     </style>
 </head>
 
 <body>
     <div class="container">
+        <!-- page header -->
         <div class="header">
-            <ul class="nav nav-pills pull-right" role="tablist">
+            <ul class="nav nav-pills pull-right" role="tablist" ng-controller="NavCtrl">
                 <li role="presentation" ng-class="{ active: page === 'examples' }"><a ng-href="#/examples">Examples</a>
                 </li>
                 <li role="presentation" ng-class="{ active: page === 'about' }"><a ng-href="#/about">About</a>
@@ -33,22 +45,51 @@
             </ul>
             <h3 class="text-muted">angular-esri-map</h3>
         </div>
+
+        <!-- page content -->
         <div ng-view=""></div>
+
+        <!-- source code snippets -->
+        <div ng-controller="SnippetsCtrl">
+            <ul ng-show="tabs" class="nav nav-tabs" ng-select ng-model="currentTab" select-class="{'active': $optSelected}">
+                <li ng-repeat="tab in tabs" ng-select-option="tab">
+                    <a href="">{{ tab }}</a>
+                </li>
+            </ul>
+            <div class="tab-container">
+                <div ng-repeat="tab in tabs">
+                  <div ng-if="tab == currentTab" hljs="" include="currentTab"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- page footer -->
         <div class="footer">
             <p><span class="glyphicon glyphicon-heart"></span> from Esri</p>
         </div>
     </div><!-- /container -->
+
     <!-- load Esri JavaScript API -->
     <script type="text/javascript" src="http://js.arcgis.com/3.11compact"></script>
+
     <!-- load Angular -->
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.js"></script>
+
+    <!-- code snippet syntax highlighting -->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
+    <script src="http://pc035860.github.io/ngSelect/ngSelect.min.js"></script>
+    <script src="http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"></script>
+
     <!-- load angular-esri-map module -->
     <script src="lib/angular-esri-map.js"></script>
+
     <!-- load this app -->
     <script type="text/javascript" src="app/app.js"></script>
-    <!-- <script type="text/javascript" src="app/home/home.js"></script> -->
+    <script type="text/javascript" src="app/about/about.js"></script>
+    <script type="text/javascript" src="app/common/nav.js"></script>
+    <script type="text/javascript" src="app/examples/snippets.js"></script>
     <script type="text/javascript" src="app/examples/examples.js"></script>
     <script type="text/javascript" src="app/examples/simple-map.js"></script>
     <script type="text/javascript" src="app/examples/web-map.js"></script>
@@ -57,7 +98,7 @@ <h3 class="text-muted">angular-esri-map</h3>
     <script type="text/javascript" src="app/examples/basemap.js"></script>
     <script type="text/javascript" src="app/examples/center-and-zoom.js"></script>
     <script type="text/javascript" src="app/examples/map-events.js"></script>
-    <script type="text/javascript" src="app/about/about.js"></script>
+
 </body>
 
 </html>
diff --git a/docs/test.html b/docs/test.html
@@ -0,0 +1 @@
+Hi