affix.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * angular-strap
  3. * @version v2.3.5 - 2015-10-29
  4. * @link http://mgcrea.github.io/angular-strap
  5. * @author Olivier Louvignes <olivier@mg-crea.com> (https://github.com/mgcrea)
  6. * @license MIT License, http://www.opensource.org/licenses/MIT
  7. */
  8. 'use strict';
  9. angular.module('mgcrea.ngStrap.affix', [ 'mgcrea.ngStrap.helpers.dimensions', 'mgcrea.ngStrap.helpers.debounce' ]).provider('$affix', function() {
  10. var defaults = this.defaults = {
  11. offsetTop: 'auto',
  12. inlineStyles: true
  13. };
  14. this.$get = [ '$window', 'debounce', 'dimensions', function($window, debounce, dimensions) {
  15. var bodyEl = angular.element($window.document.body);
  16. var windowEl = angular.element($window);
  17. function AffixFactory(element, config) {
  18. var $affix = {};
  19. var options = angular.extend({}, defaults, config);
  20. var targetEl = options.target;
  21. var reset = 'affix affix-top affix-bottom', setWidth = false, initialAffixTop = 0, initialOffsetTop = 0, offsetTop = 0, offsetBottom = 0, affixed = null, unpin = null;
  22. var parent = element.parent();
  23. if (options.offsetParent) {
  24. if (options.offsetParent.match(/^\d+$/)) {
  25. for (var i = 0; i < options.offsetParent * 1 - 1; i++) {
  26. parent = parent.parent();
  27. }
  28. } else {
  29. parent = angular.element(options.offsetParent);
  30. }
  31. }
  32. $affix.init = function() {
  33. this.$parseOffsets();
  34. initialOffsetTop = dimensions.offset(element[0]).top + initialAffixTop;
  35. setWidth = !element[0].style.width;
  36. targetEl.on('scroll', this.checkPosition);
  37. targetEl.on('click', this.checkPositionWithEventLoop);
  38. windowEl.on('resize', this.$debouncedOnResize);
  39. this.checkPosition();
  40. this.checkPositionWithEventLoop();
  41. };
  42. $affix.destroy = function() {
  43. targetEl.off('scroll', this.checkPosition);
  44. targetEl.off('click', this.checkPositionWithEventLoop);
  45. windowEl.off('resize', this.$debouncedOnResize);
  46. };
  47. $affix.checkPositionWithEventLoop = function() {
  48. setTimeout($affix.checkPosition, 1);
  49. };
  50. $affix.checkPosition = function() {
  51. var scrollTop = getScrollTop();
  52. var position = dimensions.offset(element[0]);
  53. var elementHeight = dimensions.height(element[0]);
  54. var affix = getRequiredAffixClass(unpin, position, elementHeight);
  55. if (affixed === affix) return;
  56. affixed = affix;
  57. if (affix === 'top') {
  58. unpin = null;
  59. if (setWidth) {
  60. element.css('width', '');
  61. }
  62. if (options.inlineStyles) {
  63. element.css('position', options.offsetParent ? '' : 'relative');
  64. element.css('top', '');
  65. }
  66. } else if (affix === 'bottom') {
  67. if (options.offsetUnpin) {
  68. unpin = -(options.offsetUnpin * 1);
  69. } else {
  70. unpin = position.top - scrollTop;
  71. }
  72. if (setWidth) {
  73. element.css('width', '');
  74. }
  75. if (options.inlineStyles) {
  76. element.css('position', options.offsetParent ? '' : 'relative');
  77. element.css('top', options.offsetParent ? '' : bodyEl[0].offsetHeight - offsetBottom - elementHeight - initialOffsetTop + 'px');
  78. }
  79. } else {
  80. unpin = null;
  81. if (setWidth) {
  82. element.css('width', element[0].offsetWidth + 'px');
  83. }
  84. if (options.inlineStyles) {
  85. element.css('position', 'fixed');
  86. element.css('top', initialAffixTop + 'px');
  87. }
  88. }
  89. element.removeClass(reset).addClass('affix' + (affix !== 'middle' ? '-' + affix : ''));
  90. };
  91. $affix.$onResize = function() {
  92. $affix.$parseOffsets();
  93. $affix.checkPosition();
  94. };
  95. $affix.$debouncedOnResize = debounce($affix.$onResize, 50);
  96. $affix.$parseOffsets = function() {
  97. var initialPosition = element.css('position');
  98. if (options.inlineStyles) {
  99. element.css('position', options.offsetParent ? '' : 'relative');
  100. }
  101. if (options.offsetTop) {
  102. if (options.offsetTop === 'auto') {
  103. options.offsetTop = '+0';
  104. }
  105. if (options.offsetTop.match(/^[-+]\d+$/)) {
  106. initialAffixTop = -options.offsetTop * 1;
  107. if (options.offsetParent) {
  108. offsetTop = dimensions.offset(parent[0]).top + options.offsetTop * 1;
  109. } else {
  110. offsetTop = dimensions.offset(element[0]).top - dimensions.css(element[0], 'marginTop', true) + options.offsetTop * 1;
  111. }
  112. } else {
  113. offsetTop = options.offsetTop * 1;
  114. }
  115. }
  116. if (options.offsetBottom) {
  117. if (options.offsetParent && options.offsetBottom.match(/^[-+]\d+$/)) {
  118. offsetBottom = getScrollHeight() - (dimensions.offset(parent[0]).top + dimensions.height(parent[0])) + options.offsetBottom * 1 + 1;
  119. } else {
  120. offsetBottom = options.offsetBottom * 1;
  121. }
  122. }
  123. if (options.inlineStyles) {
  124. element.css('position', initialPosition);
  125. }
  126. };
  127. function getRequiredAffixClass(unpin, position, elementHeight) {
  128. var scrollTop = getScrollTop();
  129. var scrollHeight = getScrollHeight();
  130. if (scrollTop <= offsetTop) {
  131. return 'top';
  132. } else if (unpin !== null && scrollTop + unpin <= position.top) {
  133. return 'middle';
  134. } else if (offsetBottom !== null && position.top + elementHeight + initialAffixTop >= scrollHeight - offsetBottom) {
  135. return 'bottom';
  136. } else {
  137. return 'middle';
  138. }
  139. }
  140. function getScrollTop() {
  141. return targetEl[0] === $window ? $window.pageYOffset : targetEl[0].scrollTop;
  142. }
  143. function getScrollHeight() {
  144. return targetEl[0] === $window ? $window.document.body.scrollHeight : targetEl[0].scrollHeight;
  145. }
  146. $affix.init();
  147. return $affix;
  148. }
  149. return AffixFactory;
  150. } ];
  151. }).directive('bsAffix', [ '$affix', '$window', function($affix, $window) {
  152. return {
  153. restrict: 'EAC',
  154. require: '^?bsAffixTarget',
  155. link: function postLink(scope, element, attr, affixTarget) {
  156. var options = {
  157. scope: scope,
  158. target: affixTarget ? affixTarget.$element : angular.element($window)
  159. };
  160. angular.forEach([ 'offsetTop', 'offsetBottom', 'offsetParent', 'offsetUnpin', 'inlineStyles' ], function(key) {
  161. if (angular.isDefined(attr[key])) {
  162. var option = attr[key];
  163. if (/true/i.test(option)) option = true;
  164. if (/false/i.test(option)) option = false;
  165. options[key] = option;
  166. }
  167. });
  168. var affix = $affix(element, options);
  169. scope.$on('$destroy', function() {
  170. affix && affix.destroy();
  171. options = null;
  172. affix = null;
  173. });
  174. }
  175. };
  176. } ]).directive('bsAffixTarget', function() {
  177. return {
  178. controller: [ '$element', function($element) {
  179. this.$element = $element;
  180. } ]
  181. };
  182. });