Skip to content
This repository has been archived by the owner on Jun 24, 2024. It is now read-only.

Commit

Permalink
Merge pull request #22 from leonex-cstoller/clone_affix
Browse files Browse the repository at this point in the history 
Added option to affix a clone for a more fluent positioning
  • Loading branch information
@mg
mg committed Aug 13, 2015
2 parents 847363b + 85acad1 commit 7ee491c
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 19 deletions.
13 changes: 13 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,19 @@ The class *affixed* will be added to the class once it reaches the bottom edge o

Possible values for *affix* are *top*, *bottom*, *left* and *right*.

#### More fluent passage by *cloning*
In default mode the element which should be affixed is just set to *position fixed*.
As this will pull the element out of its normal flow, the elements below will be
moved up with a jolt.

If you add `{clone: true}` to the affix options the original element will be cloned,
the clone gets inserted after its origin and set to *position fixed*, so that you
won't see any flickering effects.

<div affix affix-options="{clone: true}">Affixed!</div>

The default of the option `clone` is `false`.

### The pagemenu and pageitems directives
The module provides two directives, *pageitems* attribute and *<pagemenu>* tag. The *pageitems* tag will parse the included HTML and query for items with a certain class. The menu will then be generated in the DOM where you put the *<pagemenu>* tag from that list of items.

Expand Down
29 changes: 23 additions & 6 deletions dist/ngScrollSpy.debug.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,12 +198,29 @@ mod.service('ScrollSpy', function($window) {

});
mod.directive('affix', function(ScrollSpy) {
var affixFn= function(shouldAffixFn, wasAffixed, affixClass, elem) {
var affixCloneFn= function(elem) {
if (!elem.data('$ngScrollSpy.clone')) {
var clone = elem.clone();
elem.data('$ngScrollSpy.clone', clone);
}
return elem.data('$ngScrollSpy.clone');
};

var affixFn= function(shouldAffixFn, wasAffixed, affixClass, affixOptions, elem) {
var shouldAffix= shouldAffixFn(elem[0].getBoundingClientRect());
if(shouldAffix !== wasAffixed) {
if(shouldAffix) {
if(affixOptions.clone) {
// insert cloned element into DOM, so that it replaces the element,
// that will be pulled out of the flow.
elem.after(affixCloneFn(elem));
}
elem.addClass(affixClass);
} else {
if(affixOptions.clone) {
// remove clone from DOM again
affixCloneFn(elem).detach();
}
elem.removeClass(affixClass);
}
}
Expand All @@ -216,7 +233,7 @@ mod.directive('affix', function(ScrollSpy) {
affixedPos,
trigger= false;

affixOptions = angular.extend({offset: 0}, affixOptions);
affixOptions = angular.extend({offset: 0, clone: false}, affixOptions);

if(affixTo === 'top') {
scrollHandler= ScrollSpy.onYScroll(function(pos) {
Expand All @@ -231,7 +248,7 @@ mod.directive('affix', function(ScrollSpy) {
return (isAffixed= true);
}
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
} else if(affixTo === 'bottom') {
trigger= true; // need to trigger scroll event
Expand All @@ -254,7 +271,7 @@ mod.directive('affix', function(ScrollSpy) {
}
// not affixed
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
} else if(affixTo === 'left') {
scrollHandler= ScrollSpy.onXScroll(function(pos) {
Expand All @@ -269,7 +286,7 @@ mod.directive('affix', function(ScrollSpy) {
return (isAffixed= true);
}
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
} else if(affixTo === 'right') {
trigger= true; // need to trigger scroll event
Expand All @@ -292,7 +309,7 @@ mod.directive('affix', function(ScrollSpy) {
}
// not affixed
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
}
if(trigger) {
Expand Down
29 changes: 23 additions & 6 deletions dist/ngScrollSpy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,12 +198,29 @@ mod.service('ScrollSpy', function($window) {

});
mod.directive('affix', function(ScrollSpy) {
var affixFn= function(shouldAffixFn, wasAffixed, affixClass, elem) {
var affixCloneFn= function(elem) {
if (!elem.data('$ngScrollSpy.clone')) {
var clone = elem.clone();
elem.data('$ngScrollSpy.clone', clone);
}
return elem.data('$ngScrollSpy.clone');
};

var affixFn= function(shouldAffixFn, wasAffixed, affixClass, affixOptions, elem) {
var shouldAffix= shouldAffixFn(elem[0].getBoundingClientRect());
if(shouldAffix !== wasAffixed) {
if(shouldAffix) {
if(affixOptions.clone) {
// insert cloned element into DOM, so that it replaces the element,
// that will be pulled out of the flow.
elem.after(affixCloneFn(elem));
}
elem.addClass(affixClass);
} else {
if(affixOptions.clone) {
// remove clone from DOM again
affixCloneFn(elem).detach();
}
elem.removeClass(affixClass);
}
}
Expand All @@ -216,7 +233,7 @@ mod.directive('affix', function(ScrollSpy) {
affixedPos,
trigger= false;

affixOptions = angular.extend({offset: 0}, affixOptions);
affixOptions = angular.extend({offset: 0, clone: false}, affixOptions);

if(affixTo === 'top') {
scrollHandler= ScrollSpy.onYScroll(function(pos) {
Expand All @@ -231,7 +248,7 @@ mod.directive('affix', function(ScrollSpy) {
return (isAffixed= true);
}
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
} else if(affixTo === 'bottom') {
trigger= true; // need to trigger scroll event
Expand All @@ -254,7 +271,7 @@ mod.directive('affix', function(ScrollSpy) {
}
// not affixed
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
} else if(affixTo === 'left') {
scrollHandler= ScrollSpy.onXScroll(function(pos) {
Expand All @@ -269,7 +286,7 @@ mod.directive('affix', function(ScrollSpy) {
return (isAffixed= true);
}
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
} else if(affixTo === 'right') {
trigger= true; // need to trigger scroll event
Expand All @@ -292,7 +309,7 @@ mod.directive('affix', function(ScrollSpy) {
}
// not affixed
return false;
}, wasAffixed, affixClass, elem);
}, wasAffixed, affixClass, affixOptions, elem);
});
}
if(trigger) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ngScrollSpy.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 7ee491c

Please sign in to comment.