Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Bottom and Percent scrollpoints #8

Merged
merged 3 commits into from
Nov 17, 2015
Merged

Bottom and Percent scrollpoints #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7031dfd
ui-scrollpoint-bottom feature
plong0 Nov 15, 2015
abfca40
adds percent-based scrollpoints. also fixes a bug with non-absolute …
plong0 Nov 16, 2015
fb019d2
fix typo in dist/scrollpoint.js
plong0 Nov 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 69 additions & 14 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ <h3>What?</h3>
<div id="scrollExample" class="well" ui-scrollpoint="+100">
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint="10%">They see me scrollin (10%)...</p>
<p ui-scrollpoint="25%">They see me scrollin (25%)...</p>
<p ui-scrollpoint="100%">They see me scrollin (100%)...</p>
<p ui-scrollpoint="-100">offest: -100</p>
<p ui-scrollpoint="+100">offest: +100</p>
Try scrolling past this line and see effect on above lines...
Expand Down Expand Up @@ -88,11 +88,11 @@ <h3>A scrollpoint with a target set on a parent scrollable div</h3>
This is a removable spacer
</div>
<div id="scrollExample2" class="well" ui-scrollpoint="+100">
<p ui-scrollpoint="+10px">They see me scrollin...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint="+10px">They see me scrollin (+10px)...</p>
<p ui-scrollpoint>They see me scrollin...</p>
<p ui-scrollpoint="10%">They see me scrollin (10%)...</p>
<p ui-scrollpoint="25%">They see me scrollin (25%)...</p>
<p ui-scrollpoint="100%">They see me scrollin (100%)...</p>
<p ui-scrollpoint="-100">offest: -100</p>
<p ui-scrollpoint="+100">offest: +100</p>
Try scrolling past this line and see effect on above lines...
Expand Down Expand Up @@ -129,11 +129,11 @@ <h3>Resetting</h3>
<h3>Using a variable</h3>
<div class="well" style="height:200px;overflow:auto; position:relative;" ui-scrollpoint-target>
<div id="scrollExample2" class="well" ui-scrollpoint="{{ scrollpoint }}">
<p ui-scrollpoint="{{ scrollpoint }}">They see me scrollin...</p>
<p ui-scrollpoint="{{ scrollpoint }}">They see me scrollin...</p>
<p ui-scrollpoint="{{ scrollpoint }}">They see me scrollin...</p>
<p ui-scrollpoint="{{ scrollpoint }}">They see me scrollin...</p>
<p ui-scrollpoint="{{ scrollpoint }}">They see me scrollin...</p>
<p ui-scrollpoint="{{ scrollpoint }}">They see me scrollin ({{ scrollpoint }})...</p>
<p ui-scrollpoint="{{ scrollpoint }}">They see me scrollin ({{ scrollpoint }})...</p>
<p ui-scrollpoint="+{{ scrollpoint }}">They see me scrollin (+{{ scrollpoint }})...</p>
<p ui-scrollpoint="-{{ scrollpoint }}">They see me scrollin (-{{ scrollpoint }})...</p>
<p ui-scrollpoint="{{ scrollpoint }}%">They see me scrollin ({{ scrollpoint }}%)...</p>
<p ui-scrollpoint="{{ scrollpoint * 2 }}">Scrollpoint * 2</p>
<p ui-scrollpoint="{{ (scrollpoint * 1) + 50 }}">Scrollpoint + 50</p>
<p ui-scrollpoint="{{ (scrollpoint * -1) }}">Scrollpoint * -1</p>
Expand All @@ -160,7 +160,7 @@ <h3>Using a variable</h3>
<h3>A scrollpoint with a custom class</h3>
<div class="well" style="height:200px;overflow:auto; position:relative;" ui-scrollpoint-target>
<div id="scrollExample2" class="well" ui-scrollpoint="+100" ui-scrollpoint-class="ui-scrollpoint another-scroll-class">
<p ui-scrollpoint="+10px" ui-scrollpoint-class="my-scroll-class">They see me scrollin...</p>
<p ui-scrollpoint="-10px" ui-scrollpoint-class="my-scroll-class">They see me scrollin (-10px)...</p>
<p ui-scrollpoint ui-scrollpoint-class="my-scroll-class">They see me scrollin...</p>
<p ui-scrollpoint ui-scrollpoint-class="my-scroll-class another-scroll-class">They see me scrollin...</p>
<p ui-scrollpoint ui-scrollpoint-class="my-scroll-class">They see me scrollin...</p>
Expand Down Expand Up @@ -191,7 +191,7 @@ <h3 class="visible-md">&nbsp;</h3>
<h3>A scrollpoint with a custom action</h3>
<div class="well" style="height:200px;overflow:auto; position:relative;" ui-scrollpoint-target>
<div id="scrollExample2" class="well" ui-scrollpoint="+100">
<p ui-scrollpoint="+10px" ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
<p ui-scrollpoint="-10px" ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
<p ui-scrollpoint ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
<p ui-scrollpoint ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
<p ui-scrollpoint ui-scrollpoint-action="scrollAction">They see me scrollin...</p>
Expand Down Expand Up @@ -227,6 +227,61 @@ <h3 class="visible-md">&nbsp;</h3>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Bottom Scrollpoint</h3>
<div class="well">
<div id="scrollBottomExample" class="well" ui-scrollpoint ui-scrollpoint-bottom="true">
<p ui-scrollpoint ui-scrollpoint-bottom="true">They see me scrollin...</p>
<p ui-scrollpoint="+15" ui-scrollpoint-bottom="true">They see me scrollin (+15)...</p>
<p ui-scrollpoint="100%" ui-scrollpoint-bottom="true">They see me scrollin (100%)...</p>
<p ui-scrollpoint="25%" ui-scrollpoint-bottom="true">They see me scrollin (25%)...</p>
<p ui-scrollpoint="10%" ui-scrollpoint-bottom="true">They see me scrollin (10%)...</p>
<p ui-scrollpoint="100" ui-scrollpoint-bottom="true">They see me scrollin (100)</p>
<p ui-scrollpoint="200" ui-scrollpoint-bottom="true">They see me scrollin (200)</p>
Try scrolling past this line and see effect on above lines...
</div>
</div>
</div>
<div class="col-md-6">
<h3 class="visible-md">&nbsp;</h3>
<p>
Calculates scrollpoint from the bottom of its target instead of top.<br/>
Example: <code ng-non-bindable>&lt;div ui-scrollpoint="100" ui-scrollpoint-bottom="true"&gt;&lt;/div&gt;</code> would activate the scrollpoint if the window is scrolled above 100 pixels from the bottom.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Bottom Scrollpoint with parent target</h3>
<div class="well" style="height:200px;overflow:auto; position:relative;" ui-scrollpoint-target>
<div class="well" style="height:150px;">
This is a spacer
</div>
<div id="scrollBottomExample" class="well" ui-scrollpoint ui-scrollpoint-bottom="true">
<p ui-scrollpoint ui-scrollpoint-bottom="true">They see me scrollin...</p>
<p ui-scrollpoint="+15" ui-scrollpoint-bottom="true">They see me scrollin (+15)...</p>
<p ui-scrollpoint="50%" ui-scrollpoint-bottom="true">They see me scrollin (50%)...</p>
<p ui-scrollpoint="75%" ui-scrollpoint-bottom="true">They see me scrollin (75%)...</p>
<p ui-scrollpoint="100%" ui-scrollpoint-bottom="true">They see me scrollin (100%)...</p>
<p ui-scrollpoint="100" ui-scrollpoint-bottom="true">They see me scrollin (100)</p>
<p ui-scrollpoint="100" ui-scrollpoint-bottom="true">They see me scrollin (100)</p>
Try scrolling past this line and see effect on above lines...
</div>
<div class="well" style="height:50px;">
This is a spacer
</div>
</div>
</div>
<div class="col-md-6">
<h3 class="visible-md">&nbsp;</h3>

<p>
Calculates scrollpoint from the bottom of its target instead of top.<br/>
Example: <code ng-non-bindable>&lt;div ui-scrollpoint="+15" ui-scrollpoint-bottom="true"&gt;&lt;/div&gt;</code> would activate the scrollpoint when it is 15 pixels from the bottom of its target.
</p>
</div>
</div>
</section>
</body>
</html>
81 changes: 62 additions & 19 deletions dist/scrollpoint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*!
* angular-ui-scrollpoint
* https://github.com/angular-ui/ui-scrollpoint
* Version: 1.2.0 - 2015-11-14T17:29:41.758Z
* Version: 1.2.0 - 2015-11-16T21:08:02.863Z
* License: MIT
*/

Expand All @@ -23,34 +23,42 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
return iebody.scrollTop;
}
}
function getWindowHeight(contentHeight) {
return (contentHeight ? ($window.document.body.scrollHeight - $window.innerHeight) : $window.innerHeight);
}
return {
require: '^?uiScrollpointTarget',
scope: {
uiScrollpoint: '@',
uiScrollpointClass: '@?',
uiScrollpointAction: '&?'
uiScrollpointAction: '&?',
uiScrollpointBottom: '@'
},
link: function (scope, elm, attrs, uiScrollpointTarget) {
var absolute = true,
percent = false,
shift = 0,
past = false,
bottom = scope.uiScrollpointBottom,
fixLimit,
$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);
var scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint';
if(scope.uiScrollpointAction){
var action = scope.uiScrollpointAction();
}

$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window),
scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint',
action = scope.uiScrollpointAction ? scope.uiScrollpointAction() : undefined;

function setup(scrollpoint) {
if (!scrollpoint) {
absolute = false;
} else if (typeof (scrollpoint) === 'string') {
// charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
percent = (scrollpoint.charAt(scrollpoint.length-1) == '%');
if(percent){
scrollpoint = scrollpoint.substr(0, scrollpoint.length-1);
}
if (scrollpoint.charAt(0) === '-') {
absolute = false;
absolute = percent;
shift = -parseFloat(scrollpoint.substr(1));
} else if (scrollpoint.charAt(0) === '+') {
absolute = false;
absolute = percent;
shift = parseFloat(scrollpoint.substr(1));
} else {
var parsed = parseFloat(scrollpoint);
Expand All @@ -60,21 +68,56 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
}
}
} else if (typeof (scrollpoint) === 'number') {
setup(scrollpoint.toString());
scrollpoint = scrollpoint.toString();
setup(scrollpoint);
return;
}
fixLimit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
fixLimit = calcLimit();
}
setup(scope.uiScrollpoint);

function calcLimit(){
var limit = absolute ? shift : calcElementTop() + shift;
if(percent && absolute){
// percent only works in absolute mode (absolute mode is forced for %'s in setup())
limit = shift / 100.0 * calcTargetContentHeight();
if(bottom){
limit = calcTargetContentHeight() - limit;
}
}
else if(bottom){
if(absolute){
limit = calcTargetContentHeight() - limit;
}
else{
limit = limit + elm[0].offsetHeight+1 - calcTargetHeight();
}
}
return limit;
}

function calcElementTop(){
if(!uiScrollpointTarget){
var bounds = elm[0].getBoundingClientRect();
return bounds.top + getWindowScrollTop();
}
return elm[0].offsetTop;
}
function calcTargetHeight(){
return ( uiScrollpointTarget ? $target[0].offsetHeight : getWindowHeight() );
}
function calcTargetContentHeight(){
return ( uiScrollpointTarget ? ($target[0].scrollHeight - $target[0].clientHeight) : getWindowHeight(true) );
}

function onScroll() {

var limit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
var limit = calcLimit();

// if pageYOffset is defined use it, otherwise use other crap for IE
var offset = uiScrollpointTarget ? $target[0].scrollTop : getWindowScrollTop();
var distance = null;
if (offset > limit) {

if ((!bottom && offset >= limit) || (bottom && offset <= limit)) {
if(!past){
distance = limit - offset;
past = true;
Expand All @@ -83,7 +126,7 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
elm.addClass(scrollpointClass);
}
fixLimit = limit;
} else if (offset < fixLimit) {
} else if ((!bottom && offset < fixLimit) || (bottom && offset > fixLimit)) {
if(past){
distance = fixLimit - offset;
past = false;
Expand All @@ -93,14 +136,14 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
}
}
if(action && distance !== null){
action(elm, distance);
action(elm, distance * (bottom?-1.0:1.0));
}
}

function reset() {
elm.removeClass(scrollpointClass);
past = false;
fixLimit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
past = bottom; // everything is flipped for scrollpoint-bottom (this would be false for normal scrollpoint)
fixLimit = calcLimit();
onScroll();
}

Expand Down
Loading