changes:

* add dependencies to `package.json` * add requirejs sample * make `angular-vis.js` UMD * add `node_modules` to `.gitignore`
visjs · Apr 12, 2017 · 364daa5 · 364daa5
1 parent e8d2a6e
commit 364daa5
Show file tree

Hide file tree

Showing 8 changed files with 320 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 .idea
 bower_components/
+node_modules
+/yarn.lock
diff --git a/.npmignore b/.npmignore
@@ -1 +1,11 @@
+.idea
 bower_components
+node_modules
+/yarn.lock
+/bower.json
+/index-graph2d.html
+/app-graph2d.js
+/index.html
+/app.js
+/app_requirejs.js
+/index_requirejs.html
diff --git a/angular-vis.js b/angular-vis.js
@@ -1,4 +1,19 @@
-angular.module('ngVis', [])
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define('angular-visjs', ['angular', 'vis'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory(require('angular'), require('vis'));
+  } else {
+    // Browser globals (root is window)
+    root.returnExports = factory(root.angular, root.vis);
+  }
+}(this, function (angular, vis) {
+
+return angular.module('ngVis', [])
 
     .factory('VisDataSet', function () {
         'use strict';
@@ -224,4 +239,5 @@ angular.module('ngVis', [])
             }
         };
     })
-;
+  .name;
+}));
diff --git a/app.js b/app.js
@@ -11,7 +11,7 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
         orientation: ['top', 'bottom'],
         autoResize: [true, false],
         showCurrentTime: [true, false],
-        showCustomTime: [true, false],
+        // showCustomTime: [true, false],
         showMajorLabels: [true, false],
         showMinorLabels: [true, false],
         align: ['left', 'center', 'right'],
@@ -42,7 +42,7 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
         orientation: 'bottom',
         // padding: 5,
         showCurrentTime: true,
-        showCustomTime: true,
+        // showCustomTime: true,
         showMajorLabels: true,
         showMinorLabels: true
         // type: 'box', // dot | point
@@ -102,18 +102,18 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
     };
 
     var groups = VisDataSet([
-            {id: 0, content: 'First', value: 1},
-            {id: 1, content: 'Third', value: 3},
-            {id: 2, content: 'Second', value: 2}
-        ]);
+        {id: 0, content: 'First', value: 1},
+        {id: 1, content: 'Third', value: 3},
+        {id: 2, content: 'Second', value: 2}
+    ]);
     var items = VisDataSet([
-            {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
-            {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
-            {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
-            {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
-            {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
-            {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
-        ]);
+        {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
+        {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
+        {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
+        {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
+        {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
+        {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
+    ]);
 
     $scope.data = {groups: groups, items: items};
     var orderedContent = 'content';
@@ -129,7 +129,7 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
     $scope.options = angular.extend(options, {
         groupOrder: orderedContent,
         editable: true
-    })
+    });
 
     $scope.onSelect = function (items) {
         // debugger;
@@ -152,14 +152,13 @@ ngVisApp.controller('appController', function ($scope, $location, $timeout, VisD
     };
 
     $scope.events = {
-        rangechange: $scope.onRangeChange,
-        rangechanged: $scope.onRangeChanged,
+        // rangechange: $scope.onRangeChange,
+        // rangechanged: $scope.onRangeChanged,
         onload: $scope.onLoaded,
         select: $scope.onSelect,
         click: $scope.onClick,
         doubleClick: $scope.onDoubleClick,
         contextmenu: $scope.rightClick
     };
 
-})
-;
+});
diff --git a/app_requirejs.js b/app_requirejs.js
@@ -0,0 +1,182 @@
+require.config({
+    paths: {
+        angular: 'node_modules/angular/angular',
+        'angular-visjs': 'angular-vis',
+        vis: 'node_modules/vis/dist/vis',
+        moment: 'node_modules/moment/moment'
+    },
+    shim: {
+        angular: {exports: 'angular'}
+    }
+});
+
+require(['angular', 'angular-visjs', 'moment'], (angular, ngVis, moment) => {
+
+'use strict';
+
+
+var ngVisApp = angular.module('ngVisApp', [ngVis]);
+
+ngVisApp.controller('appController', function ($scope, $location, $timeout, VisDataSet) {
+
+    $scope.logs = {};
+
+    $scope.defaults = {
+        orientation: ['top', 'bottom'],
+        autoResize: [true, false],
+        showCurrentTime: [true, false],
+        // showCustomTime: [true, false],
+        showMajorLabels: [true, false],
+        showMinorLabels: [true, false],
+        align: ['left', 'center', 'right'],
+        stack: [true, false],
+
+        moveable: [true, false],
+        zoomable: [true, false],
+        selectable: [true, false],
+        editable: [true, false]
+    };
+
+    var options = {
+        align: 'center', // left | right (String)
+        autoResize: true, // false (Boolean)
+        editable: true,
+        selectable: true,
+        // start: null,
+        // end: null,
+        // height: null,
+        // width: '100%',
+        // margin: {
+        //   axis: 20,
+        //   item: 10
+        // },
+        // min: null,
+        // max: null,
+        // maxHeight: null,
+        orientation: 'bottom',
+        // padding: 5,
+        showCurrentTime: true,
+        // showCustomTime: true,
+        showMajorLabels: true,
+        showMinorLabels: true
+        // type: 'box', // dot | point
+        // zoomMin: 1000,
+        // zoomMax: 1000 * 60 * 60 * 24 * 30 * 12 * 10,
+        // groupOrder: 'content'
+    };
+
+    var now = moment().minutes(0).seconds(0).milliseconds(0);
+
+    var sampleData = function () {
+        return VisDataSet([
+            {
+                id: 1,
+                content: '<i class="fi-flag"></i> item 1',
+                start: moment().add('days', 1),
+                className: 'magenta'
+            },
+            {
+                id: 2,
+                content: '<a href="http://visjs.org" target="_blank">visjs.org</a>',
+                start: moment().add('days', 2)
+            },
+            {
+                id: 3,
+                content: 'item 3',
+                start: moment().add('days', -2)
+            },
+            {
+                id: 4,
+                content: 'item 4',
+                start: moment().add('days', 1),
+                end: moment().add('days', 3),
+                type: 'range'
+            },
+            {
+                id: 7,
+                content: '<i class="fi-anchor"></i> item 7',
+                start: moment().add('days', -3),
+                end: moment().add('days', -2),
+                type: 'range',
+                className: 'orange'
+            },
+            {
+                id: 5,
+                content: 'item 5',
+                start: moment().add('days', -1),
+                type: 'point'
+            },
+            {
+                id: 6,
+                content: 'item 6',
+                start: moment().add('days', 4),
+                type: 'point'
+            }
+        ]);
+    };
+
+    var groups = VisDataSet([
+        {id: 0, content: 'First', value: 1},
+        {id: 1, content: 'Third', value: 3},
+        {id: 2, content: 'Second', value: 2}
+    ]);
+    var items = VisDataSet([
+        {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
+        {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
+        {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
+        {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
+        {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
+        {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
+    ]);
+
+    $scope.data = {groups: groups, items: items};
+    var orderedContent = 'content';
+    var orderedSorting = function (a, b) {
+        // option groupOrder can be a property name or a sort function
+        // the sort function must compare two groups and return a value
+        //     > 0 when a > b
+        //     < 0 when a < b
+        //       0 when a == b
+        return a.value - b.value;
+    };
+
+    $scope.options = angular.extend(options, {
+        groupOrder: orderedContent,
+        editable: true
+    });
+
+    $scope.onSelect = function (items) {
+        // debugger;
+        alert('select');
+    };
+
+    $scope.onClick = function (props) {
+        //debugger;
+        alert('Click');
+    };
+
+    $scope.onDoubleClick = function (props) {
+        // debugger;
+        alert('DoubleClick');
+    };
+
+    $scope.rightClick = function (props) {
+        alert('Right click!');
+        props.event.preventDefault();
+    };
+
+    $scope.events = {
+        // rangechange: $scope.onRangeChange,
+        // rangechanged: $scope.onRangeChanged,
+        onload: $scope.onLoaded,
+        select: $scope.onSelect,
+        click: $scope.onClick,
+        doubleClick: $scope.onDoubleClick,
+        contextmenu: $scope.rightClick
+    };
+
+});
+
+angular.bootstrap(document, [ngVisApp.name]);
+
+});
diff --git a/bower.json b/bower.json
@@ -23,5 +23,8 @@
     "angular": "~1.5.0",
     "vis": "~4.16.0",
     "moment": "^2.15.1"
+  },
+  "devDependencies": {
+    "requirejs": "^2.3.2"
   }
 }
diff --git a/index_requirejs.html b/index_requirejs.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>AngularVis</title>
+  <link rel="stylesheet" href="node_modules/vis/dist/vis.min.css"/>
+  <style>
+    #showcase {
+      padding: 30px;
+      background-color: #fbfbfb;
+    }
+
+    .fluid {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    .vis.timeline {
+      background-color: #ffffff;
+    }
+
+    .vis.timeline .item {
+      /*background-color: #008CBA;*/
+      /*border-color: #008CBA;*/
+      /*color: #ffffff;*/
+      /*font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;*/
+      /*font-kerning: auto;*/
+      /*font-size: 13px;*/
+      /*font-style: normal;*/
+      /*font-variant: normal;*/
+      /*font-variant-ligatures: normal;*/
+      /*font-weight: normal;*/
+    }
+
+    .vis.timeline .item.green {
+      background-color: green;
+      border-color: green;
+      color: #ffffff;
+    }
+
+    .vis.timeline .item.red {
+      background-color: red;
+      border-color: red;
+      color: #ffffff;
+    }
+
+    .vis.timeline .item.orange {
+      background-color: orange;
+      border-color: orange;
+    }
+
+    .vis.timeline .item.magenta {
+      background-color: magenta;
+      border-color: magenta;
+      color: #ffffff;
+    }
+
+    .vis.timeline .item.past {
+      filter: alpha(opacity=50);
+      opacity: 0.5;
+    }
+
+    h6 {
+      font-size: 0.75rem;
+    }
+
+    pre {
+      font-size: 0.9rem;
+    }
+  </style>
+  <script data-main="app_requirejs.js" src="node_modules/requirejs/require.js"></script>
+</head>
+<body ng-controller="appController">
+
+<vis-timeline data="data" options="options" events="events"></vis-timeline>
+
+</body>
+</html>