pull2refresh
Version:
Pull to refresh library
110 lines (101 loc) • 3.12 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Pull2refresh example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<style>
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.content {
text-align: center;
height: 100%;
}
.content h1 {
font-size: 24px;
}
.content ul {
padding: 0;
}
.content li {
list-style-type: none;
}
.pulltorefresh {
display: none;
padding: 20px;
background: lightgrey;
}
.pulltorefresh .fa {
color: #007EC6;
}
</style>
</head>
<body>
<div class="content">
<div class="pulltorefresh">
<i class="fa fa-refresh fa-2x" aria-hidden="true"></i>
</div>
<h1>Pull down to refresh</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script type="text/javascript" src="../dist/pull2refresh.js"></script>
<script>
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h = 0;
var s = 0;
var l = (max + min) / 2;
if (max !== min) {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d; break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
}
l *= 100;
s *= 100;
h *= 60;
if (h < 0) {
h += 360;
}
return [Math.round(h), Math.round(s), Math.round(l)];
}
var element = document.querySelector(".pulltorefresh .fa");
var initialRefreshColor = window.getComputedStyle(element).getPropertyValue("color");
var rgb = initialRefreshColor.match(/\d+/g);
var p2r = new pull2refresh({
pullableElement: document.querySelector(".content"),
refreshElement: document.querySelector(".pulltorefresh"),
onRefresh: function() {
document.querySelector("h1").innerText = "Refresh in progress ...";
element.style.animation = "spin 1s infinite linear";
setTimeout(() => {
document.querySelector("h1").innerText = "Refreshed !";
element.style.animation = undefined;
p2r.done();
}, 3000);
},
onPull: function(ratio) {
var hsl = rgbToHsl(parseInt(rgb[0], 10), parseInt(rgb[1], 10), parseInt(rgb[2], 10));
element.style.color = `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2] * ratio}%)`;
element.style.transform = `rotate(${360 * ratio}deg)`;
}
});
</script>
</body>
</html>