diff --git a/dist/ratchet.css b/dist/ratchet.css index 4bf7336..18b2431 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -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; } diff --git a/dist/ratchet.js b/dist/ratchet.js index 11449bf..6259a87 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -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(); } diff --git a/dist/template.html b/dist/template.html index 7aed229..bae2e62 100644 --- a/dist/template.html +++ b/dist/template.html @@ -42,8 +42,8 @@ -
-
+
+

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:

diff --git a/lib/css/pulltorefresh.css b/lib/css/pulltorefresh.css index 22c27a1..84fc59c 100644 --- a/lib/css/pulltorefresh.css +++ b/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; } diff --git a/lib/js/pulltorefresh.js b/lib/js/pulltorefresh.js index ee55891..686b467 100644 --- a/lib/js/pulltorefresh.js +++ b/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(); } diff --git a/submodules/pulltorefresh b/submodules/pulltorefresh index 7c55d91..171ae35 160000 --- a/submodules/pulltorefresh +++ b/submodules/pulltorefresh @@ -1 +1 @@ -Subproject commit 7c55d91031af238eedfb55ba9cc1e6558eb65ce3 +Subproject commit 171ae35941dfeb772fe78a62ad805ed153497a8d diff --git a/test/app/index.html b/test/app/index.html index d00a1d2..a568b62 100644 --- a/test/app/index.html +++ b/test/app/index.html @@ -20,8 +20,8 @@

Movie finder

-
-
+
+