Create a gist now

Instantly share code, notes, and snippets.

@signalpoint /app.js
Last active Aug 29, 2015

What would you like to do?
NYC Camp 2015 - Building Apps with DrupalGap
'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...
}]);
<!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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment