angular-timeline - npm Package Compare versions

Comparing version 1.2.1 to 1.6.2

bower.json

 {
   "name": "angular-timeline",
-  "version": "1.2.1",
+  "version": "1.6.2",
   "license": "MIT",
-  "main": "src/angular-timeline.js",
+  "main": [
+    "dist/angular-timeline.js",
+    "dist/angular-timeline.css"
+  ],
   "keywords": [
-    "angular", "timeline", "history", "events", "list", "responsive", "bootstrap"
+    "angular",
+    "timeline",
+    "history",
+    "events",
+    "list",
+    "responsive",
+    "bootstrap"
   ],
@@ -23,14 +32,16 @@ "ignore": [
   "dependencies": {
-    "angular": "^1.2.26"
+    "angular": "^1.3.15",
+    "angular-sanitize": "^1.3.15"
   },
   "devDependencies": {
-    "angular-bootstrap": "^0.12.1",
-    "angular-ui-router": "^0.2.11",
-    "angular-mocks": "^1.2.26",
-    "sinon": "1.9.0",
-    "jasmine-sinon": "0.3.1",
-    "underscore": "~1.7.0",
-    "jquery": "~2.1.1",
-    "bootstrap": "~3.2.0"
+    "angular-bootstrap": "^0.13.0",
+    "angular-ui-router": "^0.2.14",
+    "angular-mocks": "^1.3.15",
+    "sinon": "^1.9.0",
+    "jasmine-sinon": "^0.3.1",
+    "underscore": "^1.7.0",
+    "jquery": "^2.1.1",
+    "bootstrap": "^3.3.4",
+    "angular-scroll-animate": "^0.9.8"
   }
 }

dist/angular-timeline.js

 'use strict';
 angular.module('angular-timeline', []);// Source: src/timeline-badge-directive.js
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-badge
+ * @restrict AE
+ *
+ * @description
+ * Shown in the centre pane (or left on narrow devices) to indicate the activity.
+ */
 angular.module('angular-timeline').directive('timelineBadge', function() {
   return {
-    require: '^timelineNode',
+    require: '^timelineEvent',
     restrict: 'AE',
-    replace: true,
     transclude: true,
@@ -13,20 +20,73 @@ template: '<div ng-transclude class="timeline-badge"></div>'
 
-// Source: src/timeline-content-directive.js
-angular.module('angular-timeline').directive('timelineContent', function() {
+// Source: src/timeline-directive.js
+/**
+ * @ngdoc directive
+ * @name angular-timeline
+ * @restrict AE
+ *
+ * @description
+ * Primary container for displaying a vertical set of timeline events.
+ */
+angular.module('angular-timeline').directive('timeline', function() {
   return {
-    require: '^timelinePanel',
     restrict: 'AE',
-    replace: true,
     transclude: true,
-    template: '<div class="timeline-body" ng-transclude></div>'
+    template: '<ul class="timeline" ng-transclude></ul>',
+    controller: function() {}
   };
 });
 
-// Source: src/timeline-directive.js
-angular.module('angular-timeline').directive('timeline', function() {
+// Source: src/timeline-event-directive.js
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline
+ * @restrict AE
+ *
+ * @description
+ * Represents an event occuring at a point in time, displayed on the left or the right
+ * of the timeline line.
+ *
+ * You typically embed a `timeline-badge` and `timeline-panel` element within a `timeline-event`.
+ *
+ * @param {string=} side  Define the side of the element (i.e. side="left", side="right", or use an {{ expression }}).
+ */
+
+angular.module('angular-timeline').directive('timelineEvent', function() {
   return {
+    require: '^timeline',
     restrict: 'AE',
-    replace: true,
     transclude: true,
-    template: '<ul class="timeline" ng-transclude></ul>'
+    template: '<li ng-class-odd="oddClass" ng-class-even="evenClass" ng-transclude></li>',
+    link: function(scope, element, attrs, controller) {
+
+      var checkClass = function(side, leftSide) {
+
+        var leftClass = '';
+        var rightClass = 'timeline-inverted';
+
+        if (side === 'left' || (!side && leftSide === true)) {
+          return leftClass;
+        }
+        else if ((side === 'alternate' || !side) && leftSide === false) {
+          return rightClass;
+        }
+        else if (side === 'right') {
+          return rightClass;
+        }
+        else {
+          return leftClass;
+        }
+      };
+
+      var updateRowClasses = function(value) {
+        scope.oddClass = checkClass(value, true);
+        scope.evenClass = checkClass(value, false);
+      };
+
+      attrs.$observe('side', function(newValue) {
+        updateRowClasses(newValue);
+      });
+
+      updateRowClasses(attrs.side);
+    }
   };
@@ -36,7 +96,14 @@ });
 // Source: src/timeline-footer-directive.js
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-footer
+ * @restrict AE
+ *
+ * @description
+ * Optional element to add a footer section to the `timeline-panel` for links or other actions.
+ */
 angular.module('angular-timeline').directive('timelineFooter', function() {
   return {
-    require: '^timelineContent',
+    require: '^timelinePanel',
     restrict: 'AE',
-    replace: true,
     transclude: true,
@@ -48,2 +115,10 @@ template: '<div class="timeline-footer" ng-transclude></div>'
 // Source: src/timeline-heading-directive.js
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-heading
+ * @restrict AE
+ *
+ * @description
+ * Optional element to show the heading for a `timeline-panel`.
+ */
 angular.module('angular-timeline').directive('timelineHeading', function() {
@@ -53,3 +128,2 @@ return {
     restrict: 'AE',
-    replace: true,
     transclude: true,
@@ -60,17 +134,11 @@ template: '<div class="timeline-heading" ng-transclude></div>'
 
-// Source: src/timeline-node-directive.js
-angular.module('angular-timeline').directive('timelineNode', function() {
-  return {
-    require: '^timeline',
-    scope: {
-      side: '@'
-    },
-    restrict: 'AE',
-    replace: true,
-    transclude: true,
-    template: '<li ng-class="{\'timeline-inverted\': side == \'right\'}" ng-transclude></li>'
-  };
-});
-
 // Source: src/timeline-panel-directive.js
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-panel
+ * @restrict AE
+ *
+ * @description
+ * An panel inside the `timeline-event` which shows detailed information about the event.
+ */
 angular.module('angular-timeline').directive('timelinePanel', function() {
@@ -80,3 +148,2 @@ return {
     restrict: 'AE',
-    replace: true,
     transclude: true,
@@ -86,12 +153,1 @@ template: '<div class="timeline-panel" ng-transclude></div>'
 });
-
-// Source: src/timeline-title-directive.js
-angular.module('angular-timeline').directive('timelineTitle', function() {
-  return {
-    require: '^timelineHeading',
-    restrict: 'AE',
-    replace: true,
-    transclude: true,
-    template: '<h4 class="timeline-title" ng-transclude></h4>'
-  };
-});

example/app.js

 'use strict';
 
 var app = angular.module('example', [
+	'ngSanitize',
   'ui.router',
-  'angular-timeline'
+  'angular-timeline',
+	'angular-scroll-animate'
 ]);
@@ -7,0 +9,0 @@

example/example-controller.js

 'use strict';
 
-var ExampleCtrl = function($rootScope, $scope) {
+var ExampleCtrl = function($rootScope, $document, $timeout, $scope) {
+
+	var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. " +
+		          "Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor." +
+		          "Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, " +
+		          "ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor." +
+		          "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+
+	$scope.side = '';
+
+	$scope.events = [{
+		badgeClass: 'info',
+		badgeIconClass: 'glyphicon-check',
+		title: 'First heading',
+		when: '11 hours ago via Twitter',
+		content: 'Some awesome content.'
+	}, {
+		badgeClass: 'warning',
+		badgeIconClass: 'glyphicon-credit-card',
+		title: 'Second heading',
+		when: '12 hours ago via Twitter',
+		content: 'More awesome content.'
+	}, {
+		badgeClass: 'default',
+		badgeIconClass: 'glyphicon-credit-card',
+		title: 'Third heading',
+		titleContentHtml: '<img class="img-responsive" src="http://www.freeimages.com/assets/183333/1833326510/wood-weel-1444183-m.jpg">',
+		contentHtml: lorem,
+		footerContentHtml: '<a href="">Continue Reading</a>'
+	}];
+
+	$scope.addEvent = function() {
+		$scope.events.push({
+			badgeClass: 'info',
+			badgeIconClass: 'glyphicon-check',
+			title: 'First heading',
+			when: '3 hours ago via Twitter',
+			content: 'Some awesome content.'
+		});
+
+	};
+	// optional: not mandatory (uses angular-scroll-animate)
+	$scope.animateElementIn = function($el) {
+		$el.removeClass('timeline-hidden');
+		$el.addClass('bounce-in');
+	};
+
+	// optional: not mandatory (uses angular-scroll-animate)
+	$scope.animateElementOut = function($el) {
+		$el.addClass('timeline-hidden');
+		$el.removeClass('bounce-in');
+	};
+
+	$scope.leftAlign = function() {
+		$scope.side = 'left';
+	}
+
+	$scope.rightAlign = function() {
+		$scope.side = 'right';
+	}
+
+	$scope.defaultAlign = function() {
+		$scope.side = ''; // or 'alternate'
+	}
 };
 
 angular.module('example').controller('ExampleCtrl', ExampleCtrl);

Gruntfile.js

@@ -5,3 +5,7 @@ 'use strict';
 
-  // Load grunt tasks automatically
+	var moduleName = 'angular-timeline';
+
+	var beautifyFiles = ['!Gruntfile.js', '!npm-shrinkwrap.json', 'src/**/*.{html,js}', '!app/bower_components/**/*'];
+
+	// Load grunt tasks automatically
   require('load-grunt-tasks')(grunt);
@@ -23,3 +27,3 @@
                     files: ['src/**/*'],
-                    tasks: ['build'],
+                    tasks: ['beautify', 'build'],
                     options: {
@@ -32,3 +36,3 @@ spawn: false
 
-    clean: ['dist/*.js'],
+    clean: ['dist/', 'docs/'],
 
@@ -40,3 +44,3 @@ concat: {
 
-          banner: "'use strict';\nangular.module('angular-timeline', []);",
+          banner: "'use strict';\nangular.module('" + moduleName + "', []);",
           process: function(src, filepath) {
@@ -49,3 +53,3 @@ return '// Source: ' + filepath + '\n' +
         dest: 'dist/angular-timeline.js'
-      },
+      }
     },
@@ -56,4 +60,5 @@
         files: {
-          'dist/angular-timeline.css':'dist/angular-timeline.scss',
-          'dist/angular-timeline-bootstrap.css':'dist/angular-timeline-bootstrap.scss'
+          'dist/angular-timeline.css':'src/angular-timeline.scss',
+          'dist/angular-timeline-bootstrap.css':'src/angular-timeline-bootstrap.scss',
+          'dist/angular-timeline-animations.css':'src/angular-timeline-animations.scss'
         }
@@ -63,28 +68,33 @@ }
 
-    // verifies we have formatted our js and HTML according to our style conventions
-    jsbeautifier: {
-      files:   ['!Gruntfile.js', '!npm-shrinkwrap.json', 'src/**/*.{html,js}', '!app/bower_components/**/*'],
-      options: {
-        mode: 'VERIFY_ONLY',
-        js:   {
-          'indent_size':               2,
-          'indent_char':               ' ',
-          'indent_level':              0,
-          'indent_with_tabs':          false,
-          'preserve_newlines':         true,
-          'max_preserve_newlines':     2,
-          'jslint_happy':              false,
-          'brace_style':               'end-expand',
-          'indent_scripts':            'keep',
-          'keep_array_indentation':    true,
-          'keep_function_indentation': false,
-          'space_before_conditional':  true,
-          'break_chained_methods':     false,
-          'eval_code':                 false,
-          'unescape_strings':          false,
-          'wrap_line_length':          0
-        }
-      }
-    },
+	  ngdocs: {
 
+		  options: {
+		    dest: 'docs',
+		    html5Mode: false,
+		    title: 'Angular Timeline',
+			  startPage: '/api/timeline'
+		  },
+		  api: {
+		  	 src: ['dist/**/*.js'],
+		  	 title: 'API'
+		  }
+	  },
+
+	  // verifies we have formatted our js and HTML according to our style conventions
+	  jsbeautifier: {
+		  verify : {
+			  src:   beautifyFiles,
+			  options: {
+				  config: '.jsbeautifyrc',
+				  mode: 'VERIFY_ONLY'
+			  }
+		  },
+		  update: {
+			  src:   beautifyFiles,
+			  options: {
+				  config: '.jsbeautifyrc'
+			  }
+		  }
+	  },
+
     // Make sure code styles are up to par and there are no obvious mistakes
@@ -123,5 +133,5 @@ jshint:       {
   grunt.registerTask('serve', ['build','connect', 'watch']);
-
+	grunt.registerTask('beautify', ['jsbeautifier:update']);
   grunt.registerTask('build', [
-    'clean', 'sass', 'jsbeautifier', 'jshint', 'concat' //'karma'
+    'clean', 'sass', 'jsbeautifier:verify', 'jshint', 'concat', 'ngdocs' //'karma'
   ]);
@@ -128,0 +138,0 @@

package.json

@@ -0,40 +1,50 @@
+
 {
   "name": "angular-timeline",
   "description": "An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story, show history or describe a sequence of events.",
-  "homepage":"https://github.com/rpocklin/angular-timeline",
-  "author":"Robert Pocklington <[e-mail]>",
+  "homepage": "https://github.com/rpocklin/angular-timeline",
+  "author": "Robert Pocklington <[e-mail]>",
   "repository": {
     "type": "git",
-    "url": "http://github.com/rpocklin/angular-timeline"
+    "url": "http://github.com/rpocklin/angular-timeline.git"
   },
+  "main": "./dist/angular-timeline.js",
   "keywords": [
-    "angular", "timeline", "history", "events", "list", "responsive", "bootstrap"
+    "angular",
+    "timeline",
+    "history",
+    "events",
+    "list",
+    "responsive",
+    "bootstrap"
   ],
-  "version": "1.2.1",
+  "version": "1.6.2",
   "license": "MIT",
   "dependencies": {
-    "angular": "^1.2.26"
+    "angular": "^1.3.15"
   },
   "devDependencies": {
-    "grunt": "~0.4.1",
-    "grunt-autoprefixer": "~0.7.3",
-    "grunt-cli": "~0.1.13",
-    "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-concat": "^0.5.0",
-    "grunt-contrib-connect": "~0.8.0",
-    "grunt-contrib-jshint": "~0.7.1",
-    "grunt-contrib-watch": "~0.6.1",
-    "grunt-jsbeautifier": "~0.2.7",
-    "grunt-karma": "~0.6.2",
-    "grunt-karma-coveralls": "~2.3.0",
-    "karma": "~0.10.9",
-    "karma-coverage": "~0.2.4",
-    "karma-jasmine": "~0.1.5",
-    "karma-ng-html2js-preprocessor": "~0.1.0",
-    "karma-phantomjs-launcher": "~0.1.4",
-    "phantomjs": "~1.9.7-15",
-    "grunt-sass": "^0.16.1",
-    "jshint-stylish": "~0.1.3",
-    "load-grunt-tasks": "~0.6.0",
-    "time-grunt": "~0.2.1"
+    "grunt": "~1.0.0",
+    "grunt-autoprefixer": "~3.0.4",
+    "grunt-cli": "~1.2.0",
+    "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-connect": "~1.0.2",
+    "grunt-contrib-jshint": "~0.11.0",
+    "grunt-contrib-watch": "~1.0.0",
+    "grunt-jsbeautifier": "~0.2.11",
+    "grunt-karma": "~0.12.2",
+    "grunt-karma-coveralls": "~2.5.0",
+    "grunt-ngdocs": "^0.2.9",
+    "grunt-sass": "^1.1.0",
+    "jshint-stylish": "~2.1.0",
+    "jasmine-core": "~2.4.1",
+    "karma": "~0.13.22",
+    "karma-coverage": "~0.5.4",
+    "karma-jasmine": "~0.3.8",
+    "karma-ng-html2js-preprocessor": "~0.2.1",
+    "karma-phantomjs-launcher": "~1.0.0",
+    "load-grunt-tasks": "~3.5.0",
+    "phantomjs-prebuilt": "~2.1.7",
+    "time-grunt": "~1.3.0"
   },
@@ -44,6 +54,5 @@ "engines": {
   },
-  "repository": {
-    "type": "git",
-    "url": "http://github.com/npm/npm.git"
+  "scripts": {
+    "test": "grunt"
   }
 }

README.md

 # Angular Timeline
 
-An Angular.JS directive that generates a responsive, data-driven vertical timeline to tell a story, 
+An Angular.js directive that generates a responsive, data-driven vertical timeline to tell a story, 
 show history or describe a sequence of events.
 
-# Demo / Example
+[![Build Status](https://secure.travis-ci.org/rpocklin/angular-timeline.svg)](http:/travis-ci.org/rpocklin/angular-timeline)
 
+# Demo
+
 [Demo](http://rpocklin.github.io/angular-timeline/example/index.html)
@@ -14,2 +16,6 @@
 
+# NG Docs
+
+[link](http://rpocklin.github.io/angular-timeline/docs/#/api/angular-timeline.directive:timeline)
+
 # Inspiration
@@ -21,2 +27,3 @@ [1](http://bootsnipp.com/snippets/featured/two-column-timeline-not-responsive)
 [5](http://bootsnipp.com/snippets/featured/timeline-dotted)
+[6](http://codyhouse.co/demo/vertical-timeline/index.html)
 
@@ -31,3 +38,3 @@ ## Installation
 
-  `<link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline.css" />`
+  `<link rel="stylesheet" href="bower_components/angular-timeline/dist/angular-timeline.css"/>`
 
@@ -44,51 +51,49 @@ 1. Include `angular-timeline.js` in your app:
 
+  ```javascript
+  
+    // in controller
+    $scope.events = [{
+      badgeClass: 'info',
+      badgeIconClass: 'glyphicon-check',
+      title: 'First heading',
+      content: 'Some awesome content.'
+    }, {
+      badgeClass: 'warning',
+      badgeIconClass: 'glyphicon-credit-card',
+      title: 'Second heading',
+      content: 'More awesome content.'
+    }];
   ```
+
+  ```html
+  
+    <!-- view -->
     <timeline>
-      <timeline-node side="left">
-        <timeline-badge class="info"><i class="glyphicon glyphicon-check"></i>
+      <timeline-event ng-repeat="event in events" side="right">
+        <timeline-badge class="{{event.badgeClass}}">
+          <i class="glyphicon {{event.badgeIconClass}}"></i>
         </timeline-badge>
-        <timeline-panel>
+        <timeline-panel class="{{event.badgeClass}}">
           <timeline-heading>
-            <timeline-title>Some twitter post</timeline-title>
-            <p>
-              <small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small>
-            </p>
+            <h4>{{event.title}}</h4>
           </timeline-heading>
-          <timeline-content>
-            <p>Twitter post goes here</p>
-          </timeline-content>
+          <p>{{event.content}}</p>
         </timeline-panel>
-      </timeline-node>
-      <timeline-node side="right">
-        <timeline-badge class="warning"><i class="glyphicon glyphicon-credit-card"></i>
-        </timeline-badge>
-        <timeline-panel>
-          <timeline-heading>
-            <timeline-title>Another twitter post</timeline-title>
-            <p>
-              <small class="text-muted">12 hours ago via Twitter</small>
-            </p>
-          </timeline-heading>
-          <timeline-content>
-            <p>Another twitter post goes here</p>
-          </timeline-content>
-        </timeline-panel>
-      </timeline-node>
+      </timeline-event>
     </timeline>
   ```
 
-Yes, there is a bit of markup here, but `<timeline-content>` and `<timeline-heading>` are optional.
+There is a bit of markup here but `<timeline-heading>` is optional.
+`<timeline-badge>` is for the centre line between the two sides, and should represent the event type that occured.
 
-`timeline-badge` is for the centre line between the two sides, and should represent the event type that occured.
+## Notes
 
-I had also added an optional `<timeline-footer>` to go after `<timeline-content>` for links and other info.
+- The demo uses [angular-scroll-animate](https://github.com/rpocklin/angular-scroll-animate) to trigger CSS animations when timeline events scroll into view.  It's totally optional to include this or not and is just there for effect.
 
+- Panels are now designed to float left, then right, side to side.  Float right is forced on smaller (eg. mobile) devices.
+- If you define the events in an array and have HTML content to output, use `ng-bind-html={{event.attribute}}` and require the `ngSanitize` module.
 
-## Notes
-
-- You can use the `side=left` or `side=right` attribute on the `<timeline-node>` element to float the timeline panels left or right accordingly. (when < 768px in width it will push all `<timeline-node>` elements to the right).
-
 - You can use either the SASS styles directly file under `/dist` or the compiled CSS files, up to you :)
 
-- If you are using Bootstrap 3 it affects the timeline CSS, so include `angular-timeline-bootstrap.[css|scss]}` instead to re-adjust the offsets e.g:
+- If you are using Bootstrap 3 it affects the timeline CSS, so include `angular-timeline-bootstrap.[css|scss]}` to re-adjust the offsets e.g:
 
@@ -114,6 +119,8 @@ ```html
 1. Fork it
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Added some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create a new Pull Request
+1. Create your feature branch (`git checkout -b my-new-feature`)
+1. Beautify (`grunt beautify`)
+1. Ensure it passes code-checks / tests (`grunt`)
+1. Commit your changes (`git commit -am 'Added some feature'`)
+1. Push to the branch (`git push origin my-new-feature`)
+1. Create a new Pull Request
 
@@ -123,2 +130,7 @@
 
+* 1.6.2 Fixed missing logic in passing `side` attribute declaration (was watching parent scope)
+* 1.6.1 Added attribute for `side=left` or `side=right` to force left or right-handed columns for timeline events.
+* 1.6.0 Changed `hidden` to `timeline-hidden` class in example an `angular-timeline-animations.css`.
+* 1.5.2 Updated dependency used in example `angular-scroll-animate` from 0.8.0 to 0.9.1.
+* 1.5.0 Updated dependencies, simplified nested components and improved example.  Changed `timeline-node` to `timeline-event`. Removed `replace = true` in directives.
 * 1.2.1 Cleaned up dependencies and build steps.
@@ -132,3 +144,2 @@ * 1.2.0 Updated example and styling to be more responsive.
 - Add some tests
-- Add some examples with ng-repeat based on JSON datasets.
 
@@ -135,0 +146,0 @@ ## Thanks

src/timeline-badge-directive.js

 'use strict';
 
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-badge
+ * @restrict AE
+ *
+ * @description
+ * Shown in the centre pane (or left on narrow devices) to indicate the activity.
+ */
 angular.module('angular-timeline').directive('timelineBadge', function() {
   return {
-    require: '^timelineNode',
+    require: '^timelineEvent',
     restrict: 'AE',
-    replace: true,
     transclude: true,
-    template: '<div ng-transclude class="timeline-badge"></div>'
+    template: '<div class="timeline-badge" ng-transclude></div>'
   };
 });

src/timeline-directive.js

 'use strict';
 
+/**
+ * @ngdoc directive
+ * @name angular-timeline
+ * @restrict AE
+ *
+ * @description
+ * Primary container for displaying a vertical set of timeline events.
+ */
 angular.module('angular-timeline').directive('timeline', function() {
   return {
     restrict: 'AE',
-    replace: true,
     transclude: true,
-    template: '<ul class="timeline" ng-transclude></ul>'
+    template: '<ul class="timeline" ng-transclude></ul>',
+    controller: function() {}
   };
 });

src/timeline-footer-directive.js

 'use strict';
 
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-footer
+ * @restrict AE
+ *
+ * @description
+ * Optional element to add a footer section to the `timeline-panel` for links or other actions.
+ */
 angular.module('angular-timeline').directive('timelineFooter', function() {
   return {
-    require: '^timelineContent',
+    require: '^timelinePanel',
     restrict: 'AE',
-    replace: true,
     transclude: true,
@@ -9,0 +16,0 @@ template: '<div class="timeline-footer" ng-transclude></div>'

src/timeline-heading-directive.js

 'use strict';
 
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-heading
+ * @restrict AE
+ *
+ * @description
+ * Optional element to show the heading for a `timeline-panel`.
+ */
 angular.module('angular-timeline').directive('timelineHeading', function() {
@@ -7,3 +15,2 @@ return {
     restrict: 'AE',
-    replace: true,
     transclude: true,
@@ -10,0 +17,0 @@ template: '<div class="timeline-heading" ng-transclude></div>'

src/timeline-panel-directive.js

 'use strict';
 
+/**
+ * @ngdoc directive
+ * @name angular-timeline.directive:timeline-panel
+ * @restrict AE
+ *
+ * @description
+ * An panel inside the `timeline-event` which shows detailed information about the event.
+ */
 angular.module('angular-timeline').directive('timelinePanel', function() {
@@ -7,3 +15,2 @@ return {
     restrict: 'AE',
-    replace: true,
     transclude: true,
@@ -10,0 +17,0 @@ template: '<div class="timeline-panel" ng-transclude></div>'

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

148

increased by8.03%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

1

decreased by-80%

Worsened metrics

Total package byte prevSize

804673

decreased by-87.54%

Dev dependency count

23

increased by9.52%

Number of package files

56

decreased by-87.8%

Lines of code

11875

decreased by-89.94%

Dependency changes

• Updatedangular@^1.3.15