Added examples.

dylanfprice · Jan 2, 2014 · 809bbe6 · 809bbe6
1 parent 2818123
commit 809bbe6
Show file tree

Hide file tree

Showing 12 changed files with 1,167 additions and 0 deletions.
diff --git a/examples/css/docs.css b/examples/css/docs.css
@@ -0,0 +1,42 @@
+body {
+  padding-top: 40px;
+}
+
+.navbar-fixed-top .container {
+  width: 940px;
+}
+
+.footer p {
+  margin: 0;
+}
+
+form.jsfiddle {
+  display: inline;
+}
+
+code.nocode {
+  display: inline-block;
+  background-color: #99c2ff;
+  border: 1px solid #7699d1;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  color: #223f7a;
+
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid #e1e1e8;
+}
+
+.example {
+  margin-top: 1em;
+}
+
+.tabs-spacer {
+  height: 60px;
+}
+
+.app-source {
+  min-height: 375px;
+}
diff --git a/examples/css/prettify.css b/examples/css/prettify.css
@@ -0,0 +1,30 @@
+.com { color: #93a1a1; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #D14; }
+.kwd, .linenums .tag { color: #1e347b; }
+.typ, .atn, .dec, .var { color: teal; }
+.pln { color: #48484c; }
+
+.prettyprint {
+  padding: 8px;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+.prettyprint.linenums {
+  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin: 0 0 0 33px; /* IE indents via margin-left */
+} 
+ol.linenums li {
+  padding-left: 12px;
+  color: #bebec5;
+  line-height: 18px;
+  text-shadow: 0 1px 0 #fff;
+}
diff --git a/examples/docs-nav.html b/examples/docs-nav.html
@@ -0,0 +1,3 @@
+<ul class="nav pull-right">
+  <li><a href="/examples"><strong>Go to Examples</strong></a></li>
+</ul>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html ng-app="AngularGMExample">
+
+  <head lang="en">
+    <meta charset="utf-8">
+    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
+    <link href="css/prettify.css" rel="stylesheet">
+    <link href="css/docs.css" rel="stylesheet">
+    <title>AngularGM Examples</title>
+  </head>
+
+  <body ng-controller="BodyCtrl">
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="#">AngularGM Examples</a>
+          <ul class="nav">
+            <li ng-class="{active: $route.current.active == 'map'}">
+              <a href="#!/map/">Map</a>
+            </li>
+            <li ng-class="{active: $route.current.active == 'infowindows'}">
+              <a href="#!/infowindows/">InfoWindows</a>
+            </li>
+            <li ng-class="{active: $route.current.active == 'markers'}">
+              <a href="#!/markers/">Markers</a>
+            </li>
+            <li ng-class="{active: $route.current.active == 'polylines'}">
+              <a href="#!/polylines/">Polylines</a>
+            </li>
+          </ul>
+          <ul class="nav pull-right">
+            <li>
+              <a href="/docs"><strong>Go to API Documentation</strong></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div ng-view></div>
+
+    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
+    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
+    <script src="js/prettify.min.js"></script>
+    <script src="js/homepage.js"></script>
+    <script src="js/components.js"></script>
+    <script src="js/angular-gm-example.js"></script>
+    <script src="js/angular-gm-1.0.0.js"></script>
+  </body>
+
+</html>
diff --git a/examples/js/angular-gm-example.js b/examples/js/angular-gm-example.js
@@ -0,0 +1,33 @@
+angular.module('AngularGMExample', ['components', 'homepage'])
+
+.config(function($routeProvider) {
+  $routeProvider.
+    when('/map/', {
+      templateUrl: 'partials/map.html',
+      active: 'map',
+    }).
+    when('/infowindows/', {
+      templateUrl: 'partials/infowindows.html',
+      active: 'infowindows',
+    }).
+    when('/markers/', {
+      templateUrl: 'partials/markers.html',
+      active: 'markers',
+    }).
+    when('/polylines/', {
+      templateUrl: 'partials/polylines.html',
+      active: 'polylines',
+    }).
+    otherwise({
+      redirectTo: '/map/'
+    });
+})
+
+.config(function($locationProvider) {
+  $locationProvider.html5Mode(false);
+})
+
+.controller('BodyCtrl', function($scope, $route) {
+  $scope.$route = $route;
+});
+
diff --git a/examples/js/components.js b/examples/js/components.js
@@ -0,0 +1,51 @@
+angular.module('components', [])
+
+.directive('tabs', function() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    scope: {},
+    controller: function($scope, $element) {
+      var panes = $scope.panes = [];
+
+      $scope.select = function(pane) {
+        angular.forEach(panes, function(pane) {
+          pane.selected = false;
+        });
+        pane.selected = true;
+      }
+
+      this.addPane = function(pane) {
+        if (panes.length == 0) $scope.select(pane);
+        panes.push(pane);
+      }
+    },
+    template:
+      '<div class="tabbable">' +
+        '<ul class="nav nav-tabs">' +
+          '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
+            '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
+          '</li>' +
+        '</ul>' +
+        '<div class="tab-content" ng-transclude></div>' +
+      '</div>',
+    replace: true
+  };
+})
+
+.directive('pane', function() {
+  return {
+    require: '^tabs',
+    restrict: 'E',
+    transclude: true,
+    scope: { title: '@' },
+    link: function(scope, element, attrs, tabsCtrl) {
+      tabsCtrl.addPane(scope);
+    },
+    template:
+      '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
+      '</div>',
+    replace: true
+  };
+})
+