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

Features ui-scrollpoint-action and ui-scrollpoint-class #6

Merged
merged 3 commits into from
Nov 15, 2015
Merged

Features ui-scrollpoint-action and ui-scrollpoint-class #6

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
604603f
custom ui-scrollpoint-class
plong0 Nov 14, 2015
4f22d34
added ui-scrollpoint-action feature
plong0 Nov 14, 2015
4c09dcf
dist files
plong0 Nov 14, 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
88 changes: 87 additions & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@
$scope.triggerReset = function(){
$rootScope.$broadcast('scrollpointShouldReset');
};
$scope.scrollAction = function(element, distance){
// scroll events are triggered by DOM, so use $scope.$apply();
$scope.$apply(function(){
$scope.actionClass = (distance < 0) ? 'warning' : 'info';
$scope.actionDistance = distance;
});
};
});
</script>
<style>
Expand All @@ -25,6 +32,13 @@
p.ui-scrollpoint {
background: lightgreen;
}

.my-scroll-class {
background: cyan;
}
.another-scroll-class {
border: 1px solid blue;
}
</style>
</head>

Expand Down Expand Up @@ -133,14 +147,86 @@ <h3>Using a variable</h3>
<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>
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>
<div class="row">
<div class="col-md-6" ng-controller="scrollpointTest">
<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 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>
<p ui-scrollpoint ui-scrollpoint-class="my-scroll-class">They see me scrollin...</p>
<p ui-scrollpoint="-100" ui-scrollpoint-class="my-scroll-class another-scroll-class">offest: -100</p>
<p ui-scrollpoint="+100" ui-scrollpoint-class="my-scroll-class">offest: +100</p>
Try scrolling past this line and see effect on above lines...
</div>
<div style="height:400px;">

</div>
</div>
</div>
<div class="col-md-6">
<h3 class="visible-md">&nbsp;</h3>
<p>
Works as normal, but allows a custom ui-scrollpoint-class to be applied.<br/>
Example: <code ng-non-bindable>&lt;div ui-scrollpoint-class="my-scroll-class"&gt;&lt;/div&gt;</code>
</p>
<p>
You can also apply multiple scrollpoint classes.<br/>
Example: <code ng-non-bindable>&lt;div ui-scrollpoint-class="my-scroll-class another-scroll-class"&gt;&lt;/div&gt;</code>
</p>
</div>
</div>
<div class="row" ng-controller="scrollpointTest">
<div class="col-md-6">
<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 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>
<p ui-scrollpoint="-100" ui-scrollpoint-action="scrollAction">offest: -100</p>
<p ui-scrollpoint="+100" ui-scrollpoint-action="scrollAction">offest: +100</p>
Try scrolling past this line and see effect on above lines...
</div>
<div style="height:400px;">

</div>
</div>
<p class="alert alert-{{actionClass}}">
Scrollpoint @ {{actionDistance}}px.
</p>
</div>
<div class="col-md-6">
<h3 class="visible-md">&nbsp;</h3>
<p>
Works as normal, but allows a ui-scrollpoint-action to be fired when scrolled past.<br/>
Example: <code ng-non-bindable>&lt;div ui-scrollpoint-action="scrollAction"&gt;&lt;/div&gt;</code>
<pre>
&lt;script&gt;
$scope.scrollAction = function(element, distance){
// scroll events are triggered by DOM, so use $scope.$apply();
$scope.$apply(function(){
$scope.actionClass = (distance < 0) ? 'warning' : 'info';
$scope.actionDistance = distance;
});
};
&lt;/script&gt;
</pre>
</p>
</div>
</div>
</section>
</body>
</html>
38 changes: 31 additions & 7 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-11T01:45:07.327Z
* Version: 1.2.0 - 2015-11-14T17:29:41.758Z
* License: MIT
*/

Expand All @@ -26,13 +26,20 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
return {
require: '^?uiScrollpointTarget',
scope: {
uiScrollpoint: '@'
uiScrollpoint: '@',
uiScrollpointClass: '@?',
uiScrollpointAction: '&?'
},
link: function (scope, elm, attrs, uiScrollpointTarget) {
var absolute = true,
shift = 0,
past = false,
fixLimit,
$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);
var scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint';
if(scope.uiScrollpointAction){
var action = scope.uiScrollpointAction();
}

function setup(scrollpoint) {
if (!scrollpoint) {
Expand Down Expand Up @@ -66,16 +73,33 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func

// 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) {
elm.addClass('ui-scrollpoint');
var distance = null;
if (offset > limit) {
if(!past){
distance = limit - offset;
past = true;
}
if(!elm.hasClass(scrollpointClass)){
elm.addClass(scrollpointClass);
}
fixLimit = limit;
} else if (elm.hasClass('ui-scrollpoint') && offset < fixLimit) {
elm.removeClass('ui-scrollpoint');
} else if (offset < fixLimit) {
if(past){
distance = fixLimit - offset;
past = false;
}
if(elm.hasClass(scrollpointClass)){
elm.removeClass(scrollpointClass);
}
}
if(action && distance !== null){
action(elm, distance);
}
}

function reset() {
elm.removeClass('ui-scrollpoint');
elm.removeClass(scrollpointClass);
past = false;
fixLimit = absolute ? scope.uiScrollpoint : elm[0].offsetTop + shift;
onScroll();
}
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.

36 changes: 30 additions & 6 deletions src/scrollpoint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,20 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func
return {
require: '^?uiScrollpointTarget',
scope: {
uiScrollpoint: '@'
uiScrollpoint: '@',
uiScrollpointClass: '@?',
uiScrollpointAction: '&?'
},
link: function (scope, elm, attrs, uiScrollpointTarget) {
var absolute = true,
shift = 0,
past = false,
fixLimit,
$target = uiScrollpointTarget && uiScrollpointTarget.$element || angular.element($window);
var scrollpointClass = scope.uiScrollpointClass || 'ui-scrollpoint';
if(scope.uiScrollpointAction){
var action = scope.uiScrollpointAction();
}

function setup(scrollpoint) {
if (!scrollpoint) {
Expand Down Expand Up @@ -56,16 +63,33 @@ angular.module('ui.scrollpoint', []).directive('uiScrollpoint', ['$window', func

// 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) {
elm.addClass('ui-scrollpoint');
var distance = null;
if (offset > limit) {
if(!past){
distance = limit - offset;
past = true;
}
if(!elm.hasClass(scrollpointClass)){
elm.addClass(scrollpointClass);
}
fixLimit = limit;
} else if (elm.hasClass('ui-scrollpoint') && offset < fixLimit) {
elm.removeClass('ui-scrollpoint');
} else if (offset < fixLimit) {
if(past){
distance = fixLimit - offset;
past = false;
}
if(elm.hasClass(scrollpointClass)){
elm.removeClass(scrollpointClass);
}
}
if(action && distance !== null){
action(elm, distance);
}
}

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