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

Using scrollpoints with variables #5

Merged
merged 1 commit into from
Nov 11, 2015
Merged

Using scrollpoints with variables #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
40 changes: 35 additions & 5 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,11 @@ <h3>Why?</h3>
</p>
</div>
</div>
<h3>How?</h3>
<pre class="prettyprint">&lt;p ui-scrollpoint&gt;They see me scrollin...&lt;/p&gt;</pre>
<p>You can optionally pass a number to
<code>ui-scrollpoint</code> which would override the detected y-offset of the element. Values can be either absolute
<code>600</code> or offset from the calculated value <code>-50</code> or <code>+100</code>.</p>
<div class="row">
<div class="col-md-6" ng-controller="scrollpointTest">
<h3>A scrollpoint with a target set on a parent scrollable div</h3>
Expand Down Expand Up @@ -105,12 +110,37 @@ <h3>Resetting</h3>
</p>
</div>
</div>
<div class="row" ng-init="scrollpoint = 30">
<div class="col-md-12">
<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 * 2 }}">Scrollpoint * 2</p>
<p ui-scrollpoint="{{ (scrollpoint * 1) + 50 }}">Scrollpoint + 50</p>
<p ui-scrollpoint="{{ (scrollpoint * -1) }}">Scrollpoint * -1</p>
</div>
<div style="height:400px;">

<h3>How?</h3>
<pre class="prettyprint">&lt;p ui-scrollpoint&gt;They see me scrollin...&lt;/p&gt;</pre>
<p>You can optionally pass a number to
<code>ui-scrollpoint</code> which would override the detected y-offset of the element. Values can be either absolute
<code>600</code> or offset from the calculated value <code>-50</code> or <code>+100</code>.</p>
</div>
</div>
</div>
<div class="col-md-12">
<p class="col-md-6">
You can pass a variable to change de detected y-offset of the element.<br />
The element will be updated accordingly if the value is valid.<br />
Example: <code ng-non-bindable>&lt;div ui-scrollpoint={{ scrollpoint }}"&gt;&lt;/div&gt;</code>
</p>
<p class="col-md-6">
<label for="scrollpoint-value">Try changing the value of scrollpoint</label>
<input type="text" name="scrollpoint-value" class="form-control" ng-model="scrollpoint" />
</p>
</div>
</div>
</section>
</body>
</html>
83 changes: 51 additions & 32 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.1.0 - 2015-10-27T02:32:30.503Z
* Version: 1.1.0 - 2015-11-10T10:12:58.696Z
* License: MIT
*/

Expand All @@ -13,7 +13,7 @@
* @param [offset] {int} optional Y-offset to override the detected offset.
* Takes 300 (absolute) or -300 or +300 (relative to detected)
*/
angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', function($window) {
angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', function ($window) {

function getWindowScrollTop() {
if (angular.isDefined($window.pageYOffset)) {
Expand All @@ -25,31 +25,45 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
}
return {
require: '^?uiScrollpointTarget',
link: function(scope, elm, attrs, uiScrollpointTarget) {
scope: {
uiScrollpoint: '@'
},
link: function (scope, elm, attrs, uiScrollpointTarget) {
var absolute = true,
shift = 0,
fixLimit,
$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);

if (!attrs.uiScrollpoint) {
absolute = false;
} else if (typeof (attrs.uiScrollpoint) === 'string') {
// charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
if (attrs.uiScrollpoint.charAt(0) === '-') {
absolute = false;
shift = -parseFloat(attrs.uiScrollpoint.substr(1));
} else if (attrs.uiScrollpoint.charAt(0) === '+') {
shift = 0,
fixLimit,
$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);

function setup(scrollpoint) {
if (!scrollpoint) {
absolute = false;
shift = parseFloat(attrs.uiScrollpoint.substr(1));
} else if (typeof (scrollpoint) === 'string') {
// charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
if (scrollpoint.charAt(0) === '-') {
absolute = false;
shift = -parseFloat(scrollpoint.substr(1));
} else if (scrollpoint.charAt(0) === '+') {
absolute = false;
shift = parseFloat(scrollpoint.substr(1));
} else {
var parsed = parseFloat(scrollpoint);
if (!isNaN(parsed) && isFinite(parsed)) {
absolute = true;
shift = parsed;
}
}
} else if (typeof (scrollpoint) === 'number') {
setup(scrollpoint.toString());
return;
}
fixLimit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
}

fixLimit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;

setup(scope.uiScrollpoint);

function onScroll() {

var limit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;

var limit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
// if pageYOffset is defined use it, otherwise use other crap for IE
var offset = uiScrollpointTarget ? $target[0].scrollTop : getWindowScrollTop();
if (!elm.hasClass('ui-scrollpoint') && offset > limit) {
Expand All @@ -59,29 +73,34 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
elm.removeClass('ui-scrollpoint');
}
}

function reset() {
elm.removeClass('ui-scrollpoint');
fixLimit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;
fixLimit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
onScroll();
}

scope.$on('scrollpointShouldReset', reset);

$target.on('scroll', onScroll);
onScroll(); // sets the initial state

// Unbind scroll event handler when directive is removed
scope.$on('$destroy', function() {
scope.$on('$destroy', function () {
$target.off('scroll', onScroll);
});

scope.$watch('uiScrollpoint', function (newScrollpoint) {
setup(newScrollpoint);
onScroll();
});
}
};
}]).directive('uiScrollpointTarget', [function() {
}]).directive('uiScrollpointTarget', [function () {
return {
controller: ['$element', function($element) {
this.$element = $element;
}]
controller: ['$element', function ($element) {
this.$element = $element;
}]
};
}]);

Expand Down
4 changes: 2 additions & 2 deletions dist/scrollpoint.min.js
View file
Open in desktop

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

81 changes: 50 additions & 31 deletions src/scrollpoint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @param [offset] {int} optional Y-offset to override the detected offset.
* Takes 300 (absolute) or -300 or +300 (relative to detected)
*/
angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', function($window) {
angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', function ($window) {

function getWindowScrollTop() {
if (angular.isDefined($window.pageYOffset)) {
Expand All @@ -15,31 +15,45 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
}
return {
require: '^?uiScrollpointTarget',
link: function(scope, elm, attrs, uiScrollpointTarget) {
scope: {
uiScrollpoint: '@'
},
link: function (scope, elm, attrs, uiScrollpointTarget) {
var absolute = true,
shift = 0,
fixLimit,
$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);

if (!attrs.uiScrollpoint) {
absolute = false;
} else if (typeof (attrs.uiScrollpoint) === 'string') {
// charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
if (attrs.uiScrollpoint.charAt(0) === '-') {
absolute = false;
shift = -parseFloat(attrs.uiScrollpoint.substr(1));
} else if (attrs.uiScrollpoint.charAt(0) === '+') {
shift = 0,
fixLimit,
$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);

function setup(scrollpoint) {
if (!scrollpoint) {
absolute = false;
shift = parseFloat(attrs.uiScrollpoint.substr(1));
} else if (typeof (scrollpoint) === 'string') {
// charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
if (scrollpoint.charAt(0) === '-') {
absolute = false;
shift = -parseFloat(scrollpoint.substr(1));
} else if (scrollpoint.charAt(0) === '+') {
absolute = false;
shift = parseFloat(scrollpoint.substr(1));
} else {
var parsed = parseFloat(scrollpoint);
if (!isNaN(parsed) && isFinite(parsed)) {
absolute = true;
shift = parsed;
}
}
} else if (typeof (scrollpoint) === 'number') {
setup(scrollpoint.toString());
return;
}
fixLimit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
}

fixLimit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;

setup(scope.uiScrollpoint);

function onScroll() {

var limit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;

var limit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
// if pageYOffset is defined use it, otherwise use other crap for IE
var offset = uiScrollpointTarget ? $target[0].scrollTop : getWindowScrollTop();
if (!elm.hasClass('ui-scrollpoint') && offset > limit) {
Expand All @@ -49,28 +63,33 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
elm.removeClass('ui-scrollpoint');
}
}

function reset() {
elm.removeClass('ui-scrollpoint');
fixLimit = absolute ? attrs.uiScrollpoint : elm[0].offsetTop + shift;
fixLimit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
onScroll();
}

scope.$on('scrollpointShouldReset', reset);

$target.on('scroll', onScroll);
onScroll(); // sets the initial state

// Unbind scroll event handler when directive is removed
scope.$on('$destroy', function() {
scope.$on('$destroy', function () {
$target.off('scroll', onScroll);
});

scope.$watch('uiScrollpoint', function (newScrollpoint) {
setup(newScrollpoint);
onScroll();
});
}
};
}]).directive('uiScrollpointTarget', [function() {
}]).directive('uiScrollpointTarget', [function () {
return {
controller: ['$element', function($element) {
this.$element = $element;
}]
controller: ['$element', function ($element) {
this.$element = $element;
}]
};
}]);
42 changes: 41 additions & 1 deletion test/scrollpointSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*global describe, beforeEach, module, inject, it, spyOn, expect, $ */
/*global describe, beforeEach, afterAll, module, inject, it, spyOn, expect, $, angular */
describe('uiScrollpoint', function () {
'use strict';

Expand Down Expand Up @@ -70,4 +70,44 @@ describe('uiScrollpoint', function () {
expect(element.hasClass('ui-scrollpoint')).toBe(true);
});
});
describe('using a scope variable', function() {
var element;
beforeEach(function() {
element = $compile('<div ui-scrollpoint="{{ scrollpoint }}" class="ui-scrollpoint"></div>')(scope);
});
afterAll(function() {
scope.scrollpoint = undefined;
});
it('should add/remove the ui-scrollpoint class depending on the value of the scrollpoint variable', function () {
// number (absolute)
scope.scrollpoint = 100;
scope.$digest();
expect(element.hasClass('ui-scrollpoint')).toBe(false);
expect(element.attr('ui-scrollpoint')).toBe('100');

// string (absolute)
scope.scrollpoint = "100";
scope.$digest();
expect(element.hasClass('ui-scrollpoint')).toBe(false);
expect(element.attr('ui-scrollpoint')).toBe('100');

// string (plus relative)
scope.scrollpoint = "+100";
scope.$digest();
expect(element.hasClass('ui-scrollpoint')).toBe(false);
expect(element.attr('ui-scrollpoint')).toBe('+100');

// number (minus relative)
scope.scrollpoint = -100;
scope.$digest();
expect(element.hasClass('ui-scrollpoint')).toBe(true);
expect(element.attr('ui-scrollpoint')).toBe('-100');

// string (minus relative)
scope.scrollpoint = "-100";
scope.$digest();
expect(element.hasClass('ui-scrollpoint')).toBe(true);
expect(element.attr('ui-scrollpoint')).toBe('-100');
});
});
});