angular-timeline.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. 'use strict';
  2. angular.module('angular-timeline', []); // Source: src/timeline-badge-directive.js
  3. /**
  4. * @ngdoc directive
  5. * @name angular-timeline.directive:timeline-badge
  6. * @restrict AE
  7. *
  8. * @description
  9. * Shown in the centre pane (or left on narrow devices) to indicate the activity.
  10. */
  11. angular.module('angular-timeline').directive('timelineBadge', function() {
  12. return {
  13. require: '^timelineEvent',
  14. restrict: 'AE',
  15. transclude: true,
  16. template: '<div class="timeline-badge" ng-transclude></div>'
  17. };
  18. });
  19. // Source: src/timeline-directive.js
  20. /**
  21. * @ngdoc directive
  22. * @name angular-timeline
  23. * @restrict AE
  24. *
  25. * @description
  26. * Primary container for displaying a vertical set of timeline events.
  27. */
  28. angular.module('angular-timeline').directive('timeline', function() {
  29. return {
  30. restrict: 'AE',
  31. transclude: true,
  32. template: '<ul class="timeline" ng-transclude></ul>',
  33. controller: function() {}
  34. };
  35. });
  36. // Source: src/timeline-event-directive.js
  37. /**
  38. * @ngdoc directive
  39. * @name angular-timeline.directive:timeline
  40. * @restrict AE
  41. *
  42. * @description
  43. * Represents an event occuring at a point in time, displayed on the left or the right
  44. * of the timeline line.
  45. *
  46. * You typically embed a `timeline-badge` and `timeline-panel` element within a `timeline-event`.
  47. *
  48. * @param {string=} side Define the side of the element (i.e. side="left", side="right", or use an {{ expression }}).
  49. */
  50. angular.module('angular-timeline').directive('timelineEvent', function() {
  51. return {
  52. require: '^timeline',
  53. restrict: 'AE',
  54. transclude: true,
  55. template: '<li class="timeline-event" ng-class-odd="oddClass" ng-class-even="evenClass" ng-transclude></li>',
  56. link: function(scope, element, attrs, controller) {
  57. var checkClass = function(side, leftSide) {
  58. var leftClass = '';
  59. var rightClass = 'timeline-inverted';
  60. if (side === 'left' || (!side && leftSide === true)) {
  61. return leftClass;
  62. } else if ((side === 'alternate' || !side) && leftSide === false) {
  63. return rightClass;
  64. } else if (side === 'right') {
  65. return rightClass;
  66. } else {
  67. return leftClass;
  68. }
  69. };
  70. var updateRowClasses = function(value) {
  71. scope.oddClass = checkClass(value, true);
  72. scope.evenClass = checkClass(value, false);
  73. };
  74. attrs.$observe('side', function(newValue) {
  75. updateRowClasses(newValue);
  76. });
  77. updateRowClasses(attrs.side);
  78. }
  79. };
  80. });
  81. // Source: src/timeline-footer-directive.js
  82. /**
  83. * @ngdoc directive
  84. * @name angular-timeline.directive:timeline-footer
  85. * @restrict AE
  86. *
  87. * @description
  88. * Optional element to add a footer section to the `timeline-panel` for links or other actions.
  89. */
  90. angular.module('angular-timeline').directive('timelineFooter', function() {
  91. return {
  92. require: '^timelinePanel',
  93. restrict: 'AE',
  94. transclude: true,
  95. template: '<div class="timeline-footer" ng-transclude></div>'
  96. };
  97. });
  98. // Source: src/timeline-heading-directive.js
  99. /**
  100. * @ngdoc directive
  101. * @name angular-timeline.directive:timeline-heading
  102. * @restrict AE
  103. *
  104. * @description
  105. * Optional element to show the heading for a `timeline-panel`.
  106. */
  107. angular.module('angular-timeline').directive('timelineHeading', function() {
  108. return {
  109. require: '^timelinePanel',
  110. restrict: 'AE',
  111. transclude: true,
  112. template: '<div class="timeline-heading" ng-transclude></div>'
  113. };
  114. });
  115. // Source: src/timeline-panel-directive.js
  116. /**
  117. * @ngdoc directive
  118. * @name angular-timeline.directive:timeline-panel
  119. * @restrict AE
  120. *
  121. * @description
  122. * An panel inside the `timeline-event` which shows detailed information about the event.
  123. */
  124. angular.module('angular-timeline').directive('timelinePanel', function() {
  125. return {
  126. require: '^timeline',
  127. restrict: 'AE',
  128. transclude: true,
  129. template: '<div class="timeline-panel" ng-transclude></div>'
  130. };
  131. });
  132. angular.module('angular-timeline').directive('timelinetitle', function() {
  133. return {
  134. require: '^timeline',
  135. restrict: 'AE',
  136. transclude: true,
  137. template: '<div class="timeline-title timepost" ng-transclude></div>'
  138. };
  139. });