NYC Camp 2015 - Building Apps with DrupalGap

app.js

'use strict';

// Configure the angular-drupal module.
angular.module('angular-drupal').config(function($provide) {
    $provide.value('drupalSettings', {
        sitePath: 'http://test.easystreet3.com/drupal', // Example: 'http://example.com' with no trailing slash
        basePath: '/',
        endpoint: 'drupalgap',
        language: 'und',
        file_public_path: 'sites/default/files' // use public or private
        //file_private_path: 'system/files',
    });
    
});

// Configure the drupalgap module.
angular.module('drupalgap').config(function($provide) {

    $provide.constant('drupalgapSettings', {
        
        // Front page.
        front: 'my_module/map',

      // @TODO are these modules deprecated now because of the dg_ng_dependencies() in index.html?
        // Modules.
        modules: {
          core: {
            admin: {},
            entity: {},
            field: {},
            image: {},
            menu: {},
            node: {},
            options: {},
            services: {},
            system: {},
            text: {},
            user: {}
          },
          contrib: {},
          custom: {
            my_module: {}
          }
        },
        
        // Menus.
        menus: {
          
          // Anonymous user menu.
          user_menu_anonymous: {
            links: [
              {
                title: 'Login',
                path: 'user/login',
                options: {
                  attributes: {
                    
                  }
                }
              },
              {
                title: 'Register',
                path: 'user/register',
                options: {
                  attributes: {
                    
                  }
                }
              }
            ],
            attributes: {
              'class': 'nav navbar-nav'
            }
          },
          
          // Authenticated user menu.
          user_menu_authenticated: {
            links: [
              {
                title: 'My account',
                path: 'user',
                options: {
                  attributes: {
                    
                  }
                }
              },
              {
                title: 'Logout',
                path: 'user/logout',
                options: {
                  attributes: {
                    
                  }
                }
              }
            ],
            attributes: {
              'class': 'nav navbar-nav'
            }
          },

          admin_menu: {
            links: [
              {
                title: t('Administer'),
                path: 'admin'
              }
            ],
            attributes: {
              'class': 'nav navbar-nav'
            }
          }
          
          
        },
        
        // Theme.
        theme: {
          
          name: 'spi',
          path: 'themes',
          
          // Regions.
          regions: {
            
            // Header region.
            header: {

              format: 'nav', // wrap in a nav element instead of a div
              attributes: {
                'class': 'navbar navbar-inverse navbar-fixed-top'
              },

              blocks: {
                
                // Anonymous user menu block.
                user_menu_anonymous: {
                  roles: {
                    value: ['anonymous user'],
                    mode: 'include'
                  }
                },
                
                // Authenticated user menu block.
                user_menu_authenticated: {
                  roles: {
                    value: ['authenticated user'],
                    mode: 'include'
                  }
                }
                
              }

            },
            
            // Content region.
            content: {
              
              attributes: {
                'class': 'container'
              },

              blocks: {
                
                // Main page content block..
                main: { }

              }

            },
            
            // Footer region.
            footer: {

              format: 'footer', // wrap in a footer element instead of a div
              attributes: {
                'class': 'footer'
              },

              blocks: {

                // Administration block.
                admin_menu: {
                  roles: {
                    value: ['administrator'],
                    mode: 'include'
                  }
                }

              }

            }

          }

        } // theme

    }); // drupalgapSettings
});

// Run the App!
dgApp.run(['drupal', function(drupal) {
      
      // Start building your app here...
      
}]);

index.html

<!doctype html>
<html lang="en" ng-app="dgApp">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="" name="description">
  <meta content="" name="author">

  <title>DrupalGap</title>
  
  <!-- Bower Components -->
  <link rel="stylesheet" href="app/bower_components/bootstrap/dist/css/bootstrap.css">
  <script src="app/bower_components/jquery/dist/jquery.js"></script>
  <script src="app/bower_components/angular/angular.js"></script>
  <script src="app/bower_components/angular-animate/angular-animate.js"></script>
  <script src="app/bower_components/angular-route/angular-route.js"></script>
  <script src="app/bower_components/angular-resource/angular-resource.js"></script>
  <script src="app/bower_components/angular-sanitize/angular-sanitize.js"></script>
  
  <!-- angular-drupal -->
  <script src="node_modules/angular-drupal/build/angular-drupal.min.js"></script>

    <!-- Specify DrupalGap Dependencies -->
    <script type="text/javascript">
        function dg_ng_dependencies() {
            return {

                // Angular JS
                angular: {
                    ngRoute: {},
                    ngSanitize: {},
                    'angular-drupal': {},
                    drupalgap: {}
                },

                // DrupalGap
                drupalgap: {

                    // Core

                    dg_admin: {},
                    dg_bootstrap: {},
                    dg_field: {},
                    dg_image: {},
                    dg_menu: {},
                    dg_node: {},
                    dg_options: {},
                    dg_services: {},
                    dg_system: {},
                    dg_text: {},
                    dg_user: {},
                    dg_entity: {}, // IMPORTANT - order matters here, e.g. user/login will get
                                // routed to user/:uid if we put the dgEntity module before
                                // the dgUser module.

                    // Contrib
                    addressfield: {},

                    // Custom
                    my_module: {}

                }
            };
        }
    </script>

  <!-- DrupalGap -->
  <script src="drupalgap.js"></script>
  <link rel="stylesheet" href="drupalgap.css">
  <!-- @TODO this should be compiled down into the drupalgap.css file -->
  <link rel="stylesheet" href="src/v2/modules/dg_bootstrap/dg_bootstrap.css">

  <!-- DrupalGap Theme -->
  <script src="themes/spi/spi.js"></script>
  <link rel="stylesheet" href="themes/spi/spi.css">
  
  <!-- DrupalGap Contrib Modules -->
  <script src="app/modules/addressfield/addressfield.js"></script>

  <!-- DrupalGap Custom Modules -->
  <script src="app/modules/custom/my_module/my_module.js"></script>
  <link rel="stylesheet" href="app/modules/custom/my_module/my_module.css">
  
  <!-- My App -->  
  <script src="app/js/app.js"></script>
  
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
  <script type="text/javascript" src="lodash.min.js"></script>
  <script type="text/javascript" src="angular-google-maps.min.js"></script>
  
</head>
<body>

  <div class="view-container">
    <div ng-view class="view-frame"></div>
  </div>

</body>
</html>

my_module.js

angular.module('my_module', ['drupalgap', 'uiGmapgoogle-maps'])

// Configure module route provider, which is similar to hook_menu() in Drupal.
.config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/my_module/map', {
          templateUrl: dg_templateUrl(),
          controller: 'dg_page_controller',
          page_callback: 'my_module_map_page'
      });
}])

.directive('myModuleLocations', function($compile, drupal) {
    return {
      controller: function($scope) { },
      link: function(scope, element) {
        
        // Grab the user's current position...
        navigator.geolocation.getCurrentPosition(

          // Success
          function (position) {
            
            var html = '';
            
            // Set aside the path and contextual filter for the views json.
            var path = 'nearby-locations.json';
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var radius = 10;
            var contextual_filter = latitude + ',' + longitude + '_' + radius;

            // Get the locations json, and display each location as a list item.
            drupal.views_json(path + '/' + contextual_filter).then(function(rows) {
                
                // Place the map into the scope, centered around the user's current location.
                scope.map = {
                  center: {
                    latitude: latitude,
                    longitude: longitude
                  },
                  zoom: 11
                };
                
                // Open the map directive.
                html += "<ui-gmap-google-map center='map.center' zoom='map.zoom'>";
                
                // Add a marker for the user's current position.
                var marker_name = 'my_module_user_location_marker';
                scope[marker_name] = {
                  id: marker_name,
                  coords: {
                    latitude: latitude,
                    longitude: longitude
                  },
                  options: {
                    icon: '//maps.google.com/mapfiles/ms/icons/blue-dot.png'
                  }
                };
                var attrs = {
                  idKey: marker_name + '.id',
                  coords: marker_name + '.coords',
                  options: marker_name + '.options'
                };
                html += '<ui-gmap-marker ' + dg_attributes(attrs) + '></ui-gmap-marker>';
                
                // Prepare a place to set aside each location list item.
                var items = [];
                
                // Iterate over each row...
                angular.forEach(rows, function(row) {
                    
                    // Build a list item for the location, and add it to the
                    // items collection.
                    var item = '(' + row.field_geofield_distance + ' miles) ' +
                      l(t(row.title), 'node/' + row.nid);
                    items.push(item);
                    
                    // Build a directive for the location marker.
                    var marker_name = 'marker_' + row.nid;
                    scope[marker_name] = {
                      id: row.nid,
                      coords: {
                        latitude: row.latitude,
                        longitude: row.longitude
                      }
                    };
                    var attrs = {
                      idKey: marker_name + '.id',
                      coords: marker_name + '.coords',
                      onclick: "alert(" + row.nid + ")"
                    };
                    html += '<ui-gmap-marker ' + dg_attributes(attrs) + '></ui-gmap-marker>';
                    
                });
                
                // Close the map directive.
                html += '</ui-gmap-google-map>';
                
                // Theme the list of locations.
                html += theme('item_list', { items: items });
                
                // Finally place the html onto our directive.
                //element.append(dg_ng_compile($compile, scope, html));
                var linkFn = $compile(html);
                var content = linkFn(scope);
                element.append(content);
            });

          },

          // Error
          function (error) {
            console.log(
              'Code: '    + error.code    + '\n' +
              'Message: ' + error.message + '\n'
            );
          }

        );

      }
    };
})

;

function my_module_map_page() {
  var content = {};

  // Locations element directive.
  content['locations'] = {
    markup: '<my-module-locations></my-module-locations>'
  };

  return content;
}