Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add the pull-to-loading #71

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add the pull-to-loading #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecc1cf6
add pull to loading
taoeer Apr 10, 2017
e899508
add the pull-to-loading
taoeer Apr 10, 2017
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
46 changes: 33 additions & 13 deletions demo/dom-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
text-indent: 10px;
}

.refresh{
.refresh, .loading{
background: #7b91aa;
color: white;
font-weight: bold;
Expand All @@ -71,27 +71,33 @@
transition: background-color 300ms;
}

.refresh.active{
.refresh.active, .loading.active{
background: #006eb3;
}

.refresh.running{
.refresh.running, .loading.running{
background: #00b373;
}

.loading {
margin-top: 0;
}
</style>

</head>
<body>
<div id="container">
<div id="content"><div class="refresh">Pull to Refresh</div></div>
<div id="content">
<div class="refresh">Pull to Refresh</div>
<div class="loading">Pull to Loading</div>
</div>
</div>

<script type="text/javascript">

var container = document.getElementById("container");
var content = document.getElementById("content");
var refreshElem = content.getElementsByTagName("div")[0];
var loadingElem = content.getElementsByTagName("div")[1];


// Initialize Scroller
Expand All @@ -115,8 +121,23 @@
scroller.finishPullToRefresh();
}, 2000);
});



// Activate pull-to-loading
scroller.activatePullToLoading(50, function() {
loadingElem.className += " active";
loadingElem.innerHTML = "Release to Loading";
}, function() {
loadingElem.className = loadingElem.className.replace(" active", "");
loadingElem.innerHTML = "Pull to Loading";
}, function() {
loadingElem.className += " running";
loadingElem.innerHTML = "Loading...";
setTimeout(function() {
loadingElem.className = loadingElem.className.replace(" running", "");
insertItems(true);
scroller.finishPullToLoading();
}, 2000);
});

// Setup Scroller

Expand All @@ -128,7 +149,7 @@

// Fill Scroller

var insertItems = function() {
var insertItems = function(after) {

for (var i=0; i<15; i++) {

Expand All @@ -137,16 +158,15 @@
row.style.backgroundColor = i%2 > 0 ? "#ddd" : "";
row.innerHTML = Math.random();

if (content.firstChild == content.lastChild) {
content.appendChild(row);
if (after) {
content.insertBefore(row, content.lastElementChild);
} else {
content.insertBefore(row, content.childNodes[1])
content.insertBefore(row, content.childNodes[2])
}
}

// Update Scroller dimensions for changed content
scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight-50);

scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight-100);
};

insertItems();
Expand Down
99 changes: 97 additions & 2 deletions src/Scroller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,25 @@ var Scroller;
/** {Function} Callback to execute to start the actual refresh. Call {@link #refreshFinish} when done */
__refreshStart: null,


/*--------------------------------------------------------------------------------*/
/** {Integer} Height to assign to loading area */
__loadingHeight: null,

/** {Boolean} Whether the loading process is enabled when the event is released now */
__loadingActive: false,

/** {Function} Callback to execute on activation. This is for signalling the user about a loading is about to happen when he release */
__loadingActivate: null,

/** {Function} Callback to execute on deactivation. This is for signalling the user about the loading being cancelled */
__loadingDeactivate: null,

/** {Function} Callback to execute to start the actual loading. Call {@link #loadingFinish} when done */
__loadingStart: null,
/*--------------------------------------------------------------------------------*/


/** {Number} Zoom level */
__zoomLevel: 1,

Expand Down Expand Up @@ -395,6 +414,47 @@ var Scroller;
},


/*-------------------------------------------------------------------------------------*/
/**
* Like `activatePullToRefresh` but the zone on the bottom
*/
activatePullToLoading: function(height, activateCallback, deactivateCallback, startCallback) {

var self = this;

self.__loadingHeight = height;
self.__loadingActivate = activateCallback;
self.__loadingDeactivate = deactivateCallback;
self.__loadingStart = startCallback;

},

/**
* Like `triggerPullToRefresh`
*/
triggerPullToLoading: function() {
this.__publish(this.__scrollLeft, this.__maxScrollTop + this.__loadingHeight, this.__zoomLevel, true);

if (this.__loadingStart) {
this.__loadingStart();
}
},

/**
* Like `finishPullToRefresh`
*/
finishPullToLoading: function() {

var self = this;

self.__loadingActive = false;
if (self.__loadingDeactivate) {
self.__loadingDeactivate();
}
},
/*-------------------------------------------------------------------------------------*/


/**
* Returns the scroll position and zooming values
*
Expand Down Expand Up @@ -862,6 +922,26 @@ var Scroller;
}
}

// Support pull-to-loading (only when only y is scrollable)
if (!self.__enableScrollX && self.__loadingHeight != null) {

if (!self.__loadingActive && scrollTop >= maxScrollTop + self.__loadingHeight) {

self.__loadingActive = true;
if (self.__loadingActivate) {
self.__loadingActivate();
}

} else if (self.__loadingActive && scrollTop < maxScrollTop + self.__loadingHeight) {

self.__loadingActive = false;
if (self.__loadingDeactivate) {
self.__loadingDeactivate();
}

}
}

} else if (scrollTop > maxScrollTop) {

scrollTop = maxScrollTop;
Expand Down Expand Up @@ -978,8 +1058,8 @@ var Scroller;
// Verify that we have enough velocity to start deceleration
if (Math.abs(self.__decelerationVelocityX) > minVelocityToStartDeceleration || Math.abs(self.__decelerationVelocityY) > minVelocityToStartDeceleration) {

// Deactivate pull-to-refresh when decelerating
if (!self.__refreshActive) {
// Deactivate pull-to-refresh and pull-to-loading when decelerating
if (!self.__refreshActive && !self.__loadingActive) {
self.__startDeceleration(timeStamp);
}
} else {
Expand Down Expand Up @@ -1010,6 +1090,12 @@ var Scroller;
self.__refreshStart();
}

} else if(self.__loadingActive && self.__loadingStart) {
self.__publish(self.__scrollLeft, self.__maxScrollTop + self.__loadingHeight, self.__zoomLevel, true);

if (self.__loadingStart) {
self.__loadingStart();
}
} else {

if (self.__interruptedAnimation || self.__isDragging) {
Expand All @@ -1026,6 +1112,15 @@ var Scroller;
}

}

if (self.__loadingActive) {

self.__loadingActive = false;
if (self.__loadingDeactivate) {
self.__loadingDeactivate();
}

}
}
}

Expand Down