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

Pinning Feature #9

Closed
wants to merge 3 commits into from
Closed

Pinning Feature #9

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
c859699
created controller for ui-scrollpoint and moved settings in here, all…
plong0 Nov 25, 2015
cc8d581
past = undefined in reset
plong0 Nov 25, 2015
c217507
refactored pinning so placeholder takes over scrollpoint when pinned.…
plong0 Nov 26, 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
34 changes: 20 additions & 14 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,10 @@
$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;
});
$scope.actionClass = (distance < 0) ? 'warning' : 'info';
$scope.actionDistance = distance;
};
$scope.word = 'scrollin';
});
</script>
<style>
Expand All @@ -32,6 +30,9 @@
p.ui-scrollpoint {
background: lightgreen;
}
.ui-scrollpoint.pinned {
z-index: 100;
}

.my-scroll-class {
background: cyan;
Expand All @@ -55,11 +56,11 @@ <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 ui-scrollpoint-pin>They see me scrollin and {{pinWord}}... <input type="text" ng-model="pinWord" /></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" ui-scrollpoint-pin>offest: -100</p>
<p ui-scrollpoint="+100">offest: +100</p>
Try scrolling past this line and see effect on above lines...
</div>
Expand All @@ -73,6 +74,11 @@ <h3>Why?</h3>
<strong>only</strong> adds a
<code>ui-scrollpoint</code> class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.
</p>

<p>
<label for="pinWord">Pinned elements remain bound to scope</label><br/>
<input id="pinWord" type="text" ng-model="pinWord" ng-init="pinWord='pinnin'" />
</p>
</div>
</div>
<h3>How?</h3>
Expand All @@ -89,8 +95,8 @@ <h3>A scrollpoint with a target set on a parent scrollable div</h3>
</div>
<div id="scrollExample2" class="well" ui-scrollpoint="+100">
<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 ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
<p ui-scrollpoint="10%" ui-scrollpoint-pin>They see me scrollin and pinnin (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>
Expand Down Expand Up @@ -192,7 +198,7 @@ <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" ui-scrollpoint-pin>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 @@ -232,8 +238,8 @@ <h3 class="visible-md">&nbsp;</h3>
<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 ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
<p ui-scrollpoint="+15" ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin (+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>
Expand All @@ -259,8 +265,8 @@ <h3>Bottom Scrollpoint with parent target</h3>
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 ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin...</p>
<p ui-scrollpoint="+15" ui-scrollpoint-bottom="true" ui-scrollpoint-pin>They see me scrollin and pinnin (+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>
Expand Down
Loading