diff --git a/bower.json b/bower.json index 2fa35d9c..be06af63 100644 --- a/bower.json +++ b/bower.json @@ -13,6 +13,7 @@ "angular-tags": "git://github.com/boneskull/angular-tags.git#master", "angular-ui-utils": "latest", "bowser": "0.7.x", + "d3": "~3.4.x", "draggabilly": "~1.1.x", "hint.css": "https://github.com/chinchang/hint.css.git", "humanize-duration": "~2.0.0", @@ -29,4 +30,4 @@ "resolutions": { "angular": "1.3.0" } -} \ No newline at end of file +} diff --git a/buildConfig/build.config.js b/buildConfig/build.config.js index aad1886c..72ebfc91 100644 --- a/buildConfig/build.config.js +++ b/buildConfig/build.config.js @@ -116,6 +116,9 @@ module.exports = { 'vendor/get-size/get-size.js', 'vendor/draggabilly/draggabilly.js', + 'vendor/d3/d3.js', + + 'vendor/bowser/bowser.js', 'vendor/angular-growl-v2/build/angular-growl.js', 'vendor/angular-local-storage/dist/angular-local-storage.js', diff --git a/src/app/app.js b/src/app/app.js index eca4d570..ee712b5a 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -78,6 +78,7 @@ var app = angular.module('baw', 'bawApp.directives', /* our directives.js */ 'bawApp.directives.ngAudio', /* our directives.js */ 'bawApp.directives.toggleSwitch', + 'bawApp.filters', /* our filters.js */ @@ -90,6 +91,9 @@ var app = angular.module('baw', 'audio-control', 'draggabilly', + 'bawApp.d3', /* our d3 integration */ + 'bawApp.d3.calendarView', + 'bawApp.accounts', 'bawApp.annotationViewer', 'bawApp.audioEvents', @@ -167,6 +171,8 @@ var app = angular.module('baw', title: 'Audio Events' }). when('/library/:recordingId/audio_events/:audioEventId', {templateUrl: paths.site.files.library.item, controller: 'AnnotationItemCtrl', title: 'Annotation :audioEventId'}). + when('/d3Test', {templateUrl: paths.site.files.d3.testPage, controller: 'D3TestPageCtrl', title: 'D3 Test Page' }). + // missing route page when('/', {templateUrl: paths.site.files.home, controller: 'HomeCtrl'}). when('/404', {templateUrl: paths.site.files.error404, controller: 'ErrorCtrl'}). diff --git a/src/app/d3Bindings/bawD3.js b/src/app/d3Bindings/bawD3.js new file mode 100644 index 00000000..357f4acd --- /dev/null +++ b/src/app/d3Bindings/bawD3.js @@ -0,0 +1,21 @@ +/** + * Support for interacting with D3 + * Each d3 chart should have its own directive. + * Each directive should require the D3 service. + */ +var bawD3 = bawD3 || angular.module("bawApp.d3", []); +/** + * This wrapper is pretty simple. + * We do this for modularity's sake and to fit in with the angular pattern. + * This provider has the potential for runtime configuration: + * (inject d3Provider into a config function). + */ +bawD3.provider("d3", function () { + + // TODO: is there a better way to load d3, without it attaching to the window? + var d3 = window.d3; + + this.$get = [function d3Factory() { + return d3; + }]; + }); \ No newline at end of file diff --git a/src/app/d3Bindings/caelndarView/_calendarView.scss b/src/app/d3Bindings/caelndarView/_calendarView.scss new file mode 100644 index 00000000..c7301ce8 --- /dev/null +++ b/src/app/d3Bindings/caelndarView/_calendarView.scss @@ -0,0 +1,5 @@ +baw-calendar-view { + li { + color: darkgreen; + } +} \ No newline at end of file diff --git a/src/app/d3Bindings/caelndarView/calendarView.js b/src/app/d3Bindings/caelndarView/calendarView.js new file mode 100644 index 00000000..f59b0f5f --- /dev/null +++ b/src/app/d3Bindings/caelndarView/calendarView.js @@ -0,0 +1,37 @@ +/** + * A d3 Calendar View directive + * Created by Anthony on 23/08/2014. + */ +angular.module("bawApp.d3.calendarView", ["bawApp.d3"]) + .directive("bawCalendarView", ["d3", function(d3) { + return { + restrict: "EA", + scope: { + data: "=" + }, + templateUrl: "d3Bindings/caelndarView/calenderViewTemplate.tpl.html", + link: function($scope, $element, attributes, controller, transcludeFunction) { + // use this function to bind DOM events to angular scope + // or d3 events to angular scope. + // you can use the jQuery / d3 objects here (use the injected d3 instance) + + // where possible avoid jQuery + var element = $element[0]; + + // d3.doSomething + }, + controller: "bawCalendarViewController" + } + }]) + .controller("bawCalendarViewController", ["$scope", "$element", "$attrs", function($scope, $element, $attrs) { + // The controller should host functionality native to angular + // e.g. + // - functions for button clicks + // - API calls (not relevant in this case) + // - scope modification + // - iteraction with other services/providers + // IT SHOULD NOT contain any reference to the d3 or jQuery objects + + $scope.example = "Hello world!"; + + }]); \ No newline at end of file diff --git a/src/app/d3Bindings/caelndarView/calenderViewTemplate.tpl.html b/src/app/d3Bindings/caelndarView/calenderViewTemplate.tpl.html new file mode 100644 index 00000000..bc8a31a9 --- /dev/null +++ b/src/app/d3Bindings/caelndarView/calenderViewTemplate.tpl.html @@ -0,0 +1,7 @@ +I'm a fancy graph +
+ {{example}} +
+
    +
  1. {{dataPoint}}
    2. +
\ No newline at end of file diff --git a/src/app/d3Bindings/d3TestPage.js b/src/app/d3Bindings/d3TestPage.js new file mode 100644 index 00000000..98935f24 --- /dev/null +++ b/src/app/d3Bindings/d3TestPage.js @@ -0,0 +1,8 @@ +var bawD3 = bawD3 || angular.module("bawApp.d3", []); +bawD3.controller('D3TestPageCtrl', ['$scope', function($scope) { + + // use the REST API in here + // assign the resulting data to scope (not great but it will do for now + $scope.basicData = [0,1,2,3,4,5]; + + }]); \ No newline at end of file diff --git a/src/app/d3Bindings/d3TestPage.tpl.html b/src/app/d3Bindings/d3TestPage.tpl.html new file mode 100644 index 00000000..710bdf72 --- /dev/null +++ b/src/app/d3Bindings/d3TestPage.tpl.html @@ -0,0 +1,8 @@ +
+

D3 Play area

+ +

Calendar view

+
+ +
+
\ No newline at end of file diff --git a/src/baw.configuration.tpl.js b/src/baw.configuration.tpl.js index 4a3a1bdc..5289a51b 100644 --- a/src/baw.configuration.tpl.js +++ b/src/baw.configuration.tpl.js @@ -91,6 +91,9 @@ angular.module('bawApp.configuration', ['url']) }, recordings: { recentRecordings: 'recordings/recentRecordings/recentRecordings.tpl.html' + }, + d3: { + testPage: 'd3Bindings/d3TestPage.tpl.html' } }, // routes used by angular diff --git a/src/index.html b/src/index.html index 7e1e7a54..9edab321 100644 --- a/src/index.html +++ b/src/index.html @@ -71,6 +71,7 @@
  • Easy Link
    • +
  • D3 tests
    • diff --git a/src/sass/application.tpl.scss b/src/sass/application.tpl.scss index 45763519..4845ffc3 100644 --- a/src/sass/application.tpl.scss +++ b/src/sass/application.tpl.scss @@ -36,6 +36,7 @@ $DEBUG: '<%= build_configs.current.key === "development" %>' == 'true'; @import "../app/audioEvents/audio_events"; @import "../app/annotationLibrary/annotationLibrary"; @import "../app/bookmarks/bookmarks"; +@import "../app/d3Bindings/caelndarView/calendarView"; @import "../app/home/home"; @import "../app/listen/listen"; @import "../app/login/login_control";