From 51e31be512d12081e534dbf0bdf18ba1e325e11f Mon Sep 17 00:00:00 2001 From: Jonathan Petitcolas Date: Tue, 19 Apr 2016 14:52:14 +0200 Subject: [PATCH] Use to execute directive after --- src/fsm-sticky-header.js | 190 ++++++++++++++++++++------------------- 1 file changed, 96 insertions(+), 94 deletions(-) diff --git a/src/fsm-sticky-header.js b/src/fsm-sticky-header.js index 50ec11c..733c8cc 100644 --- a/src/fsm-sticky-header.js +++ b/src/fsm-sticky-header.js @@ -3,7 +3,7 @@ (function(angular){ var fsm = angular.module('fsm', []); - fsm.directive('fsmStickyHeader', [function(){ + fsm.directive('fsmStickyHeader', ['$timeout', function($timeout) { return { restrict: 'EA', replace: false, @@ -14,109 +14,111 @@ contentOffset: '=', fsmZIndex: '=' }, - link: function(scope, element, attributes, control){ - var content, - header = $(element, this), - clonedHeader = null, - scrollableContainer = $(scope.scrollableContainer), - contentOffset = scope.contentOffset || 0; - - var unbindScrollBodyWatcher = scope.$watch('scrollBody', function(newValue, oldValue) { - content = $(scope.scrollBody); - init(); - unbindScrollBodyWatcher(); - }); - - if (scrollableContainer.length === 0){ - scrollableContainer = $(window); - } + link: function(scope, element, attributes, control) { + $timeout(function () { + var content, + header = $(element, this), + clonedHeader = null, + scrollableContainer = $(scope.scrollableContainer), + contentOffset = scope.contentOffset || 0; + + var unbindScrollBodyWatcher = scope.$watch('scrollBody', function(newValue, oldValue) { + content = $(scope.scrollBody); + init(); + unbindScrollBodyWatcher(); + }); - function setColumnHeaderSizes() { - if (clonedHeader.is('tr') || clonedHeader.is('thead')) { - var clonedColumns = clonedHeader.find('th'); - header.find('th').each(function (index, column) { - var clonedColumn = $(clonedColumns[index]); - //clonedColumn.css( 'width', column.offsetWidth + 'px'); fixed thead width - // fluid thead / table - var finalWidthSet = column.offsetWidth / ($(window).innerWidth()-20)*100; // $(window) can be replace with a custom wrapper / container - clonedColumn.css('width',finalWidthSet + '%'); - }); + if (scrollableContainer.length === 0){ + scrollableContainer = $(window); } - }; - function determineVisibility(){ - var scrollTop = scrollableContainer.scrollTop() + scope.scrollStop; - var contentTop = content.offset().top + contentOffset; - var contentBottom = contentTop + content.outerHeight(false); - - if ( (scrollTop > contentTop) && (scrollTop < contentBottom) ) { - if (!clonedHeader){ - createClone(); - clonedHeader.css({ "visibility": "visible"}); + function setColumnHeaderSizes() { + if (clonedHeader.is('tr') || clonedHeader.is('thead')) { + var clonedColumns = clonedHeader.find('th'); + header.find('th').each(function (index, column) { + var clonedColumn = $(clonedColumns[index]); + //clonedColumn.css( 'width', column.offsetWidth + 'px'); fixed thead width + // fluid thead / table + var finalWidthSet = column.offsetWidth / ($(window).innerWidth()-20)*100; // $(window) can be replace with a custom wrapper / container + clonedColumn.css('width',finalWidthSet + '%'); + }); } + }; - if ( scrollTop < contentBottom && scrollTop > contentBottom - clonedHeader.outerHeight(false) ){ - var top = contentBottom - scrollTop + scope.scrollStop - clonedHeader.outerHeight(false); - clonedHeader.css('top', top + 'px'); + function determineVisibility(){ + var scrollTop = scrollableContainer.scrollTop() + scope.scrollStop; + var contentTop = content.offset().top + contentOffset; + var contentBottom = contentTop + content.outerHeight(false); + + if ( (scrollTop > contentTop) && (scrollTop < contentBottom) ) { + if (!clonedHeader){ + createClone(); + clonedHeader.css({ "visibility": "visible"}); + } + + if ( scrollTop < contentBottom && scrollTop > contentBottom - clonedHeader.outerHeight(false) ){ + var top = contentBottom - scrollTop + scope.scrollStop - clonedHeader.outerHeight(false); + clonedHeader.css('top', top + 'px'); + } else { + calculateSize(); + } } else { - calculateSize(); - } - } else { - if (clonedHeader){ - /* - * remove cloned element (switched places with original on creation) - */ - header.remove(); - header = clonedHeader; - clonedHeader = null; - - header.removeClass('fsm-sticky-header'); - header.css({ - position: 'relative', - left: 0, - top: 0, - width: 'auto', - 'z-index': 0, - visibility: 'visible' - }); + if (clonedHeader){ + /* + * remove cloned element (switched places with original on creation) + */ + header.remove(); + header = clonedHeader; + clonedHeader = null; + + header.removeClass('fsm-sticky-header'); + header.css({ + position: 'relative', + left: 0, + top: 0, + width: 'auto', + 'z-index': 0, + visibility: 'visible' + }); + } } - } - }; - - function calculateSize() { - clonedHeader.css({ - top: scope.scrollStop, - width: header.outerWidth(), - left: header.offset().left - }); + }; - setColumnHeaderSizes(); - }; + function calculateSize() { + clonedHeader.css({ + top: scope.scrollStop, + width: header.outerWidth(), + left: header.offset().left + }); - function createClone(){ - /* - * switch place with cloned element, to keep binding intact - */ - clonedHeader = header; - header = clonedHeader.clone(); - clonedHeader.after(header); - clonedHeader.addClass('fsm-sticky-header'); - clonedHeader.css({ - position: 'fixed', - 'z-index': scope.fsmZIndex || 10000, - visibility: 'hidden' - }); - calculateSize(); - }; + setColumnHeaderSizes(); + }; + + function createClone(){ + /* + * switch place with cloned element, to keep binding intact + */ + clonedHeader = header; + header = clonedHeader.clone(); + clonedHeader.after(header); + clonedHeader.addClass('fsm-sticky-header'); + clonedHeader.css({ + position: 'fixed', + 'z-index': scope.fsmZIndex || 10000, + visibility: 'hidden' + }); + calculateSize(); + }; - function init() { - scrollableContainer.on('scroll.fsmStickyHeader', determineVisibility).trigger("scroll"); - scrollableContainer.on('resize.fsmStickyHeader', determineVisibility); + function init() { + scrollableContainer.on('scroll.fsmStickyHeader', determineVisibility).trigger("scroll"); + scrollableContainer.on('resize.fsmStickyHeader', determineVisibility); - scope.$on('$destroy', function () { - scrollableContainer.off('.fsmStickyHeader'); - }); - } + scope.$on('$destroy', function () { + scrollableContainer.off('.fsmStickyHeader'); + }); + } + }); } }; }]); @@ -396,7 +398,7 @@ var scrollPercent = (s / (d-c)); if (scrollPercent > 0.98) { - // We use scope.apply here to tell angular about these changes because + // We use scope.apply here to tell angular about these changes because // they happen outside of angularjs context... we're using jquery here // to figure out when we need to load another page of data. transcludedScope.$apply(nextPage);