Browse Source

pulltorefresh updated to version 0.007

pull/154/head
Simon Waldherr 12 years ago
parent
commit
06ac2fb982
  1. 20
      dist/ratchet.css
  2. 214
      dist/ratchet.js
  3. 4
      dist/template.html
  4. 20
      lib/css/pulltorefresh.css
  5. 214
      lib/js/pulltorefresh.js
  6. 2
      submodules/pulltorefresh
  7. 4
      test/app/index.html
  8. 4
      test/app/theaters.html

20
dist/ratchet.css vendored

@ -1292,15 +1292,14 @@ select {
}/* PullToRefresh styles
-------------------------------------------------- */
.scrollable {
.ptr_scrollable {
overflow-y: auto;
height: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
-webkit-transition: all 0.1s linear 0s;
}
.scrollable .wrap {
.ptr_scrollable .ptr_wrap {
min-height: 100%;
padding-bottom: 1px;
background: #f5f5f5;
@ -1308,21 +1307,19 @@ select {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-transition: all 0.1s linear 0s;
}
.wrap {
.ptr_wrap {
position: relative;
-webkit-transition: all 0.1s linear 0s;
}
.ptr_box {
position: absolute;
top: 0px;
top: -55px;
line-height: 55px;
display: block;
text-align: center;
height: 0px;
height: 55px;
left: 0px;
right: 0px;
overflow: hidden;
@ -1334,7 +1331,6 @@ select {
margin: auto;
height: 40px;
top: 10px;
-webkit-transition: all 0.1s linear 0s;
}
.ptr_image {
@ -1358,7 +1354,7 @@ select {
-webkit-backface-visibility: hidden
}
.ptr_image.loading {
.ptr_image.ptr_loading {
margin-left: 15px;
margin-right: 15px;
height: 30px;
@ -1383,14 +1379,14 @@ select {
font-size: 20px;
}
.inserted {
.ptr_inserted {
border-top: 1px solid #0a0a0a;
list-style-type: none;
padding: 0;
margin: 0;
}
.inserted ul {
.ptr_inserted ul {
padding: 0px;
margin: 0px;
}

214
dist/ratchet.js vendored

@ -764,47 +764,49 @@
}();
/* ----------------------------------
* PullToRefresh v0.004
* PullToRefresh v0.007
* By Simon Waldherr
* https://github.com/SimonWaldherr/PullToRefresh
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
var ptr_scrollable_parent = false;
function ptr_init() {
var ptr = [];
var ptr_init = function () {
"use strict";
var ptr_box, ptr_container, ptr_image, ptr_text, i = 0, scrollables = document.getElementsByClassName('scrollable');
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 < scrollables.length; i += 1) {
if (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_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
scrollables[i].firstElementChild.insertBefore(ptr_box, scrollables[i].firstElementChild.firstChild);
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 ptr_box, ptr_container, ptr_image, ptr_text, parent = e.target, i = 0;
var parent = e.target, i = 0;
if (parent.className === undefined) {
return false;
@ -813,29 +815,33 @@ function ptr_init() {
for (i = 0; i < 10; i += 1) {
if (parent.className !== undefined) {
if (parent.className.match('scrollable')) {
if (parent.className.match('ptr_scrollable')) {
ptr_scrollable_parent = i;
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_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
parent.firstElementChild.insertBefore(ptr_box, parent.firstElementChild.firstChild);
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]);
@ -843,6 +849,7 @@ function ptr_init() {
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;
}
@ -863,52 +870,52 @@ function ptr_init() {
});
document.addEventListener('touchmove', function (e) {
var parent = e.target, scroll = false, rotate = 90, i = 0, ptr_element, ptr_wrapelement, top, ptr, scrolldistance, ptr_eleId, time, ptrbox, insert, inserted;
if (ptr_scrollable_parent === false) {
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) {
for (i = 0; i < ptr.scrollable_parent; i += 1) {
parent = parent.parentNode;
}
if ((ptr_scrollable_parent !== false) && (parent.hasAttribute('data-url') !== false)) {
if ((ptr.scrollable_parent !== false) && (parent.hasAttribute('data-url') !== false)) {
scroll = true;
ptr_element = parent;
ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
top = ptr_element.scrollTop;
ptr = ptr_element.getElementsByClassName('ptr_box')[0];
scrolldistance = Math.abs(parseInt(ptr_element.scrollTop, 10));
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('loading')) && (ptr_element.scrollTop < 1)) {
if (ptr_element.scrollTop < -25) {
rotate = (top < -40) ? -90 : 130 + (top * 12 + 270);
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.style.height = (scrolldistance < 55) ? scrolldistance + 'px' : '55px';
ptr.style.top = (scrolldistance < 55) ? '-' + scrolldistance + 'px' : '-55px';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['-webkit-transform'] = "scale(1) rotate(" + rotate + "deg)";
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(' active') === -1) {
ptr_wrapelement.className += ' active';
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Loading ...';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].className += ' loading';
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('wrap')[0];
ptr_eleId = parent.id;
ptr.element = parent;
ptr.wrapelement = ptr.element.getElementsByClassName('ptr_wrap')[0];
ptr.eleId = parent.id;
time = new Date();
reqwest({
@ -920,38 +927,39 @@ function ptr_init() {
},
error: function () {
alert('Could not connect');
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
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) {
ptrbox = document.getElementById(ptr_eleId).getElementsByClassName('ptr_box')[0];
ptr.box = document.getElementById(ptr.eleId).getElementsByClassName('ptr_box')[0];
insert = document.createElement('div');
insert.innerHTML = resp;
insert.className = 'inserted';
insert.className = 'ptr_inserted';
ptr_wrapelement.insertBefore(insert, ptrbox.nextSibling);
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
inserted = document.getElementsByClassName('inserted')[0];
ptr_element.scrollTop = inserted.clientHeight - 51;
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = '';
ptr.style.opacity = 0.0;
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(' loading', '');
ptr_wrapelement.style.top = '0px';
ptr.wrapelement.getElementsByClassName('ptr_image')[0].className = ptr.wrapelement.getElementsByClassName('ptr_image')[0].className.replace(' ptr_loading', '');
ptr_scrollable_parent = false;
ptr.scrollable_parent = false;
}
});
}
} else if (ptr_element.scrollTop !== 0) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Pull to refresh';
} 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)) {
} else if ((ptr.scrollable_parent !== false)) {
scroll = true;
}
@ -961,32 +969,32 @@ function ptr_init() {
});
document.addEventListener('touchend', function (e) {
var parent = e.target, i = 0, ptr_element, ptr_wrapelement, ptr_eleId, top, ptr;
var parent = e.target, i = 0, top;
for (i = 0; i < ptr_scrollable_parent; i += 1) {
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.scrollable_parent !== false)) {
if ((parent.hasAttribute('data-url') !== false)) {
ptr_element = parent;
ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
ptr_eleId = parent.id;
top = ptr_element.scrollTop;
ptr = ptr_element.getElementsByClassName('ptr_box')[0];
if (ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading')) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.style.top = '51px';
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.style.height = '0px';
ptr.style.top = '0px';
ptr.box.style.right = '99%';
}
}
}
ptr_scrollable_parent = false;
ptr.scrollable_parent = false;
});
}
};
window.onload = function() {
ptr_init();
}

4
dist/template.html vendored

@ -42,8 +42,8 @@
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content scrollable" id="list">
<div class="wrap">
<div class="content ptr_scrollable" id="list">
<div class="ptr_wrap">
<div class="content-padded">
<p class="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
</div>

20
lib/css/pulltorefresh.css

@ -1,15 +1,14 @@
/* PullToRefresh styles
-------------------------------------------------- */
.scrollable {
.ptr_scrollable {
overflow-y: auto;
height: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
-webkit-transition: all 0.1s linear 0s;
}
.scrollable .wrap {
.ptr_scrollable .ptr_wrap {
min-height: 100%;
padding-bottom: 1px;
background: #f5f5f5;
@ -17,21 +16,19 @@
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-transition: all 0.1s linear 0s;
}
.wrap {
.ptr_wrap {
position: relative;
-webkit-transition: all 0.1s linear 0s;
}
.ptr_box {
position: absolute;
top: 0px;
top: -55px;
line-height: 55px;
display: block;
text-align: center;
height: 0px;
height: 55px;
left: 0px;
right: 0px;
overflow: hidden;
@ -43,7 +40,6 @@
margin: auto;
height: 40px;
top: 10px;
-webkit-transition: all 0.1s linear 0s;
}
.ptr_image {
@ -67,7 +63,7 @@
-webkit-backface-visibility: hidden
}
.ptr_image.loading {
.ptr_image.ptr_loading {
margin-left: 15px;
margin-right: 15px;
height: 30px;
@ -92,14 +88,14 @@
font-size: 20px;
}
.inserted {
.ptr_inserted {
border-top: 1px solid #0a0a0a;
list-style-type: none;
padding: 0;
margin: 0;
}
.inserted ul {
.ptr_inserted ul {
padding: 0px;
margin: 0px;
}

214
lib/js/pulltorefresh.js

@ -1,45 +1,47 @@
/* ----------------------------------
* PullToRefresh v0.004
* PullToRefresh v0.007
* By Simon Waldherr
* https://github.com/SimonWaldherr/PullToRefresh
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
* ---------------------------------- */
var ptr_scrollable_parent = false;
function ptr_init() {
var ptr = [];
var ptr_init = function () {
"use strict";
var ptr_box, ptr_container, ptr_image, ptr_text, i = 0, scrollables = document.getElementsByClassName('scrollable');
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 < scrollables.length; i += 1) {
if (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_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
scrollables[i].firstElementChild.insertBefore(ptr_box, scrollables[i].firstElementChild.firstChild);
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 ptr_box, ptr_container, ptr_image, ptr_text, parent = e.target, i = 0;
var parent = e.target, i = 0;
if (parent.className === undefined) {
return false;
@ -48,29 +50,33 @@ function ptr_init() {
for (i = 0; i < 10; i += 1) {
if (parent.className !== undefined) {
if (parent.className.match('scrollable')) {
if (parent.className.match('ptr_scrollable')) {
ptr_scrollable_parent = i;
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_container.className = 'ptr_container';
ptr_image.className = 'ptr_image';
ptr_text.className = 'ptr_text';
parent.firstElementChild.insertBefore(ptr_box, parent.firstElementChild.firstChild);
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]);
@ -78,6 +84,7 @@ function ptr_init() {
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;
}
@ -98,52 +105,52 @@ function ptr_init() {
});
document.addEventListener('touchmove', function (e) {
var parent = e.target, scroll = false, rotate = 90, i = 0, ptr_element, ptr_wrapelement, top, ptr, scrolldistance, ptr_eleId, time, ptrbox, insert, inserted;
if (ptr_scrollable_parent === false) {
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) {
for (i = 0; i < ptr.scrollable_parent; i += 1) {
parent = parent.parentNode;
}
if ((ptr_scrollable_parent !== false) && (parent.hasAttribute('data-url') !== false)) {
if ((ptr.scrollable_parent !== false) && (parent.hasAttribute('data-url') !== false)) {
scroll = true;
ptr_element = parent;
ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
top = ptr_element.scrollTop;
ptr = ptr_element.getElementsByClassName('ptr_box')[0];
scrolldistance = Math.abs(parseInt(ptr_element.scrollTop, 10));
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('loading')) && (ptr_element.scrollTop < 1)) {
if (ptr_element.scrollTop < -25) {
rotate = (top < -40) ? -90 : 130 + (top * 12 + 270);
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.style.height = (scrolldistance < 55) ? scrolldistance + 'px' : '55px';
ptr.style.top = (scrolldistance < 55) ? '-' + scrolldistance + 'px' : '-55px';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['-webkit-transform'] = "scale(1) rotate(" + rotate + "deg)";
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(' active') === -1) {
ptr_wrapelement.className += ' active';
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Loading ...';
ptr_wrapelement.getElementsByClassName('ptr_image')[0].className += ' loading';
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('wrap')[0];
ptr_eleId = parent.id;
ptr.element = parent;
ptr.wrapelement = ptr.element.getElementsByClassName('ptr_wrap')[0];
ptr.eleId = parent.id;
time = new Date();
reqwest({
@ -155,38 +162,39 @@ function ptr_init() {
},
error: function () {
alert('Could not connect');
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
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) {
ptrbox = document.getElementById(ptr_eleId).getElementsByClassName('ptr_box')[0];
ptr.box = document.getElementById(ptr.eleId).getElementsByClassName('ptr_box')[0];
insert = document.createElement('div');
insert.innerHTML = resp;
insert.className = 'inserted';
insert.className = 'ptr_inserted';
ptr_wrapelement.insertBefore(insert, ptrbox.nextSibling);
ptr_wrapelement.style.top = '0px';
ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
inserted = document.getElementsByClassName('inserted')[0];
ptr_element.scrollTop = inserted.clientHeight - 51;
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = '';
ptr.style.opacity = 0.0;
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(' loading', '');
ptr_wrapelement.style.top = '0px';
ptr.wrapelement.getElementsByClassName('ptr_image')[0].className = ptr.wrapelement.getElementsByClassName('ptr_image')[0].className.replace(' ptr_loading', '');
ptr_scrollable_parent = false;
ptr.scrollable_parent = false;
}
});
}
} else if (ptr_element.scrollTop !== 0) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Pull to refresh';
} 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)) {
} else if ((ptr.scrollable_parent !== false)) {
scroll = true;
}
@ -196,33 +204,33 @@ function ptr_init() {
});
document.addEventListener('touchend', function (e) {
var parent = e.target, i = 0, ptr_element, ptr_wrapelement, ptr_eleId, top, ptr;
var parent = e.target, i = 0, top;
for (i = 0; i < ptr_scrollable_parent; i += 1) {
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.scrollable_parent !== false)) {
if ((parent.hasAttribute('data-url') !== false)) {
ptr_element = parent;
ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
ptr_eleId = parent.id;
top = ptr_element.scrollTop;
ptr = ptr_element.getElementsByClassName('ptr_box')[0];
if (ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading')) {
ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
ptr_wrapelement.style.top = '51px';
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.style.height = '0px';
ptr.style.top = '0px';
ptr.box.style.right = '99%';
}
}
}
ptr_scrollable_parent = false;
ptr.scrollable_parent = false;
});
}
};
window.onload = function() {
ptr_init();
}

2
submodules/pulltorefresh

@ -1 +1 @@
Subproject commit 7c55d91031af238eedfb55ba9cc1e6558eb65ce3
Subproject commit 171ae35941dfeb772fe78a62ad805ed153497a8d

4
test/app/index.html

@ -20,8 +20,8 @@
<header class="bar-title">
<h1 class="title">Movie finder</h1>
</header>
<div class="content scrollable" id="list" data-url="reload">
<div class="wrap">
<div class="content ptr_scrollable scrollable" id="list">
<div class="ptr_wrap">
<nav class="bar-standard bar-header-secondary bar-scrolling">
<form>
<input type="search" placeholder="Search">

4
test/app/theaters.html

@ -20,8 +20,8 @@
<header class="bar-title">
<h1 class="title">Find a theater</h1>
</header>
<div class="content scrollable" id="list">
<div class="wrap">
<div class="content ptr_scrollable scrollable" id="list" data-url="reload">
<div class="ptr_wrap">
<nav class="bar-standard bar-header-secondary bar-scrolling">
<form>
<input type="search" placeholder="Search">

Loading…
Cancel
Save