mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
8.9 KiB
236 lines
8.9 KiB
/* ---------------------------------- |
|
* PullToRefresh v0.007 |
|
* By Simon Waldherr |
|
* https://github.com/SimonWaldherr/PullToRefresh |
|
* Licensed under The MIT License |
|
* http://opensource.org/licenses/MIT |
|
* ---------------------------------- */ |
|
|
|
var ptr = []; |
|
var ptr_init = function () { |
|
"use strict"; |
|
var i = 0; |
|
ptr.scrollable_parent = false; |
|
ptr.scrollables = document.getElementsByClassName('ptr_scrollable'); |
|
if ((window.hasOwnProperty('ontouchstart')) || (window.navigator.msPointerEnabled)) { |
|
document.getElementsByTagName('body')[0].className += ' touch'; |
|
} else { |
|
document.getElementsByTagName('body')[0].className += ' notouch'; |
|
} |
|
|
|
for (i = 0; i < ptr.scrollables.length; i += 1) { |
|
if (ptr.scrollables[i].hasAttribute('data-url') !== false) { |
|
ptr.box = document.createElement('div'); |
|
ptr.container = document.createElement('div'); |
|
ptr.image = document.createElement('div'); |
|
ptr.text = document.createElement('div'); |
|
|
|
ptr.box.appendChild(ptr.container); |
|
ptr.container.appendChild(ptr.image); |
|
ptr.container.appendChild(ptr.text); |
|
ptr.text.innerHTML = 'Pull to refresh'; |
|
|
|
ptr.box.className = 'ptr_box'; |
|
ptr.box.style.right = '99%'; |
|
ptr.container.className = 'ptr_container'; |
|
ptr.image.className = 'ptr_image'; |
|
ptr.text.className = 'ptr_text'; |
|
|
|
ptr.scrollables[i].firstElementChild.insertBefore(ptr.box, ptr.scrollables[i].firstElementChild.firstChild); |
|
} |
|
} |
|
|
|
document.addEventListener('touchstart', function (e) { |
|
var parent = e.target, i = 0; |
|
|
|
if (parent.className === undefined) { |
|
return false; |
|
} |
|
|
|
for (i = 0; i < 10; i += 1) { |
|
if (parent.className !== undefined) { |
|
|
|
if (parent.className.match('ptr_scrollable')) { |
|
|
|
ptr.scrollable_parent = i; |
|
i = 10; |
|
|
|
if (parent.hasAttribute('data-url') !== false) { |
|
if (parent.getElementsByClassName('ptr_box')[0] === undefined) { |
|
ptr.box = document.createElement('div'); |
|
ptr.container = document.createElement('div'); |
|
ptr.image = document.createElement('div'); |
|
ptr.text = document.createElement('div'); |
|
|
|
ptr.box.appendChild(ptr.container); |
|
ptr.container.appendChild(ptr.image); |
|
ptr.container.appendChild(ptr.text); |
|
ptr.text.innerHTML = 'Pull to refresh'; |
|
|
|
ptr.box.className = 'ptr_box'; |
|
ptr.box.style.right = '0px'; |
|
ptr.container.className = 'ptr_container'; |
|
ptr.image.className = 'ptr_image'; |
|
ptr.text.className = 'ptr_text'; |
|
|
|
parent.firstElementChild.insertBefore(ptr.box, parent.firstElementChild.firstChild); |
|
} else { |
|
parent.getElementsByClassName('ptr_box')[0].style.opacity = 1.0; |
|
parent.getElementsByClassName('ptr_text')[0].innerHTML = 'Pull to refresh'; |
|
} |
|
} else if (parent.getElementsByClassName('ptr_box')[0] !== undefined) { |
|
parent.removeChild(parent.getElementsByClassName('ptr_box')[0]); |
|
} |
|
|
|
if (parent.scrollTop === 0) { |
|
parent.scrollTop = 1; |
|
parent.getElementsByClassName('ptr_wrap')[0].style.top = '1px'; |
|
} else if ((parent.scrollTop + parent.offsetHeight) === parent.scrollHeight) { |
|
parent.scrollTop = parent.scrollTop - 1; |
|
} |
|
} |
|
} |
|
|
|
if ((parent.parentNode.tagName === undefined)) { |
|
i = 10; |
|
return false; |
|
} |
|
if ((parent.parentNode.tagName === 'BODY') || (parent.parentNode.tagName === 'HTML')) { |
|
i = 10; |
|
return false; |
|
} |
|
|
|
parent = parent.parentNode; |
|
} |
|
}); |
|
|
|
document.addEventListener('touchmove', function (e) { |
|
var parent = e.target, scroll = false, rotate = 90, i = 0, top, scrolldistance, time, insert, inserted; |
|
|
|
if (ptr.scrollable_parent === false) { |
|
e.preventDefault(); |
|
return false; |
|
} |
|
|
|
for (i = 0; i < ptr.scrollable_parent; i += 1) { |
|
parent = parent.parentNode; |
|
} |
|
|
|
if ((ptr.scrollable_parent !== false) && (parent.hasAttribute('data-url') !== false)) { |
|
|
|
scroll = true; |
|
|
|
ptr.element = parent; |
|
ptr.wrapelement = ptr.element.getElementsByClassName('ptr_wrap')[0]; |
|
top = ptr.element.scrollTop; |
|
ptr.box = ptr.element.getElementsByClassName('ptr_box')[0]; |
|
scrolldistance = Math.abs(ptr.element.scrollTop); |
|
|
|
if ((ptr.wrapelement.className.indexOf(' active') === -1) && (!ptr.wrapelement.getElementsByClassName('ptr_image')[0].className.match('ptr_loading')) && (ptr.element.scrollTop < 1)) { |
|
if (ptr.element.scrollTop < -25) { |
|
rotate = (top < -40) ? -90 : 130 + parseInt(top * 12 + 270, 10); |
|
} |
|
|
|
if (ptr.element.scrollTop < 0) { |
|
ptr.box.style.right = '0px'; |
|
ptr.wrapelement.getElementsByClassName('ptr_image')[0].style['-webkit-transform'] = 'scale(1) rotate(' + rotate + 'deg)'; |
|
} |
|
|
|
if (ptr.element.scrollTop < -51) { |
|
if (ptr.wrapelement.className.indexOf(' ptr_active') === -1) { |
|
ptr.box.style.right = '0px'; |
|
ptr.wrapelement.className += ' ptr_active'; |
|
ptr.wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Loading ...'; |
|
ptr.wrapelement.getElementsByClassName('ptr_image')[0].className += ' ptr_loading'; |
|
|
|
if (parent.getAttribute('data-url') === 'reload') { |
|
window.location.reload(true); |
|
return false; |
|
} |
|
|
|
ptr.element = parent; |
|
ptr.wrapelement = ptr.element.getElementsByClassName('ptr_wrap')[0]; |
|
ptr.eleId = parent.id; |
|
time = new Date(); |
|
|
|
reqwest({ |
|
url: parent.getAttribute('data-url') + '?rt=' + time.getTime(), |
|
type: 'html', |
|
method: 'post', |
|
data: { |
|
usertime: time.getTime() |
|
}, |
|
error: function () { |
|
alert('Could not connect'); |
|
ptr.wrapelement.style.top = '0px'; |
|
ptr.box.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', ''); |
|
ptr.wrapelement.className = ptr.wrapelement.className.replace(' ptr_active', ''); |
|
}, |
|
success: function (resp) { |
|
ptr.box = document.getElementById(ptr.eleId).getElementsByClassName('ptr_box')[0]; |
|
insert = document.createElement('div'); |
|
insert.innerHTML = resp; |
|
insert.className = 'ptr_inserted'; |
|
|
|
ptr.wrapelement.insertBefore(insert, ptr.box.nextSibling); |
|
ptr.wrapelement.style.top = '0px'; |
|
ptr.box.getElementsByClassName('ptr_image')[0].className = ptr.box.getElementsByClassName('ptr_image')[0].className.replace(' ptr_loading', ''); |
|
ptr.wrapelement.className = ptr.wrapelement.className.replace(' ptr_active', ''); |
|
inserted = document.getElementsByClassName('ptr_inserted')[0]; |
|
ptr.element.scrollTop = inserted.clientHeight - 51; |
|
ptr.wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = ''; |
|
ptr.box.style.right = '99%'; |
|
|
|
ptr.wrapelement.getElementsByClassName('ptr_image')[0].className = ptr.wrapelement.getElementsByClassName('ptr_image')[0].className.replace(' ptr_loading', ''); |
|
|
|
ptr.scrollable_parent = false; |
|
} |
|
}); |
|
} |
|
} else if (ptr.element.scrollTop !== 0) { |
|
if (ptr.wrapelement.className.indexOf(' active') !== -1) { |
|
ptr.wrapelement.className = ptr.wrapelement.className.replace(' ptr_active', ''); |
|
ptr.wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Pull to refresh'; |
|
} |
|
} |
|
} |
|
} else if ((ptr.scrollable_parent !== false)) { |
|
scroll = true; |
|
} |
|
|
|
if (scroll === false) { |
|
e.preventDefault(); |
|
} |
|
}); |
|
|
|
document.addEventListener('touchend', function (e) { |
|
var parent = e.target, i = 0, top; |
|
|
|
for (i = 0; i < ptr.scrollable_parent; i += 1) { |
|
parent = parent.parentNode; |
|
} |
|
|
|
if ((parent.hasAttribute('data-url') !== false) && (ptr.scrollable_parent !== false)) { |
|
if ((parent.hasAttribute('data-url') !== false)) { |
|
ptr.element = parent; |
|
ptr.wrapelement = ptr.element.getElementsByClassName('ptr_wrap')[0]; |
|
ptr.eleId = parent.id; |
|
top = ptr.element.scrollTop; |
|
ptr.box = ptr.element.getElementsByClassName('ptr_box')[0]; |
|
|
|
if (ptr.wrapelement.getElementsByClassName('ptr_image')[0].className.match('ptr_loading')) { |
|
ptr.wrapelement.className = ptr.wrapelement.className.replace(' ptr_active', ''); |
|
ptr.wrapelement.style.top = '51px'; |
|
} else { |
|
ptr.box.style.right = '99%'; |
|
} |
|
} |
|
} |
|
|
|
ptr.scrollable_parent = false; |
|
}); |
|
}; |
|
|
|
window.onload = function() { |
|
ptr_init(); |
|
}
|
|
|