Customized Pull To Refresh List Using iScroll

Implement the new animation in pull down and pull up area

by Korah Babu Varghese

HTML

<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script>

<div id="wrapper">
  <div id="scroller">
    <div id="pullDown" class="pull-plugin">
      <div class="pullDown-left">
        <div class="rect left-rect pullDown-left-top"></div>
        <div class="rect left-rect pullDown-left-middle"></div>
        <div class="rect left-rect pullDown-left-bottom"></div>
      </div>
      <div class="pullDown-right">
        <div class="rect right-rect pullDown-right-top"></div>
        <div class="rect right-rect pullDown-right-middle"></div>
        <div class="rect right-rect pullDown-right-bottom"></div>
      </div>
    </div>

    <ul id="thelist">
      <li>Pretty row 1</li>
      <li>Pretty row 2</li>
      <li>Pretty row 3</li>
      <li>Pretty row 4</li>
      <li>Pretty row 5</li>
      <li>Pretty row 6</li>
      <li>Pretty row 7</li>
      <li>Pretty row 8</li>
      <li>Pretty row 9</li>
      <li>Pretty row 10</li>
      <li>Pretty row 11</li>
      <li>Pretty row 12</li>
      <li>Pretty row 13</li>
      <li>Pretty row 14</li>
      <li>Pretty row 15</li>
      <li>Pretty row 16</li>
      <li>Pretty row 17</li>
      <li>Pretty row 18</li>
    </ul>
    <div id="pullUp" class="pull-plugin">
      <div class="pullUp-left">
        <div class="rect left-rect pullUp-left-top"></div>
        <div class="rect left-rect pullUp-left-middle"></div>
        <div class="rect left-rect pullUp-left-bottom"></div>
      </div>
      <div class="pullUp-right">
        <div class="rect right-rect pullUp-right-top"></div>
        <div class="rect right-rect pullUp-right-middle"></div>
        <div class="rect right-rect pullUp-right-bottom"></div>
      </div>
    </div>
  </div>
</div>
<div id="footer"></div>

CSS

body,ul,li {
  padding:0;
  margin:0;
  border:0;
}

body {
  font-size:12px;
  -webkit-user-select:none;
    -webkit-text-size-adjust:none;
  font-family:helvetica;
}






#wrapper {
  position:absolute; z-index:1;
  top:45px; bottom:48px; left:-9999px;
  width:100%;
  overflow:auto;
}

#scroller {
  position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  width:100%;
  padding:0;
}

#scroller ul {
  list-style:none;
  padding:0;
  margin:0;
  width:100%;
  text-align:left;
}

#scroller li {
  padding:0 10px;
  height:40px;
  line-height:40px;
  border-bottom:1px solid #ccc;
  border-top:1px solid #fff;
  background-color:#fafafa;
  font-size:14px;
}

#myFrame {
  position:absolute;
  top:0; left:0;
}

/**
 * A customized pull up/down component by Daniel Zhu<[email protected]> 
 */
.pull-plugin {
  height: 80px;
  width: 100%;
  position: relative;
}      
.pullDown-left, .pullUp-left {
  margin-left: 10%;
  position: absolute;
  top: 0;
  left: 0;
}
.pullDown-right, .pullUp-right {
  margin-right: 10%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 0.8;
}
.pullDown-left, .pullDown-right {
  padding: 40px 0px 20px 0px;
}
.pullUp-left, .pullUp-right {
  padding: 20px 0px 40px 0px;
}
.rect {
  width: 35px;
  height: 5px;
  margin-top: 5px;
}
.left-rect {
  background-color: #F26522;
}
.right-rect {
  background-color: #0197d6;
}
.rect-pullDown-top-disappear, .rect-pullUp-top-disappear {
  transform: translateY(10px);
  transition-duration: 800ms;
}
.rect-pullDown-bottom-disappear, .rect-pullUp-bottom-disappear {
  transform: translateY(-10px);
  transition-duration: 800ms;
}
@-webkit-keyframes rotating {
  from{
      -webkit-transform: rotate(0deg);
  }
  to{
      -webkit-transform: rotate(360deg);
  }
}
.rotating {
  background-position:0 100%;
  -webkit-transition-duration:0ms;

  -webkit-animation-name:rotating;
  -webkit-animation-duration:1s;
 ...

TypeScript

var myScroll,
  pullDownEl, pullDownOffset,
  pullUpEl, pullUpOffset,
  generatedCount = 0;
var pullDownFit = false,
    pullUpFit = false;

function pullDownAction () {
  setTimeout(function () {  // <-- Simulate network congestion, remove setTimeout from production!
    var el, li, i;
    el = document.getElementById('thelist');

    for (i=0; i<3; i++) {
      li = document.createElement('li');
      li.innerText = 'Generated row ' + (++generatedCount);
      el.insertBefore(li, el.childNodes[0]);
    }
    
    myScroll.refresh();   // Remember to refresh when contents are loaded (ie: on ajax completion)
  }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
  setTimeout(function () {  // <-- Simulate network congestion, remove setTimeout from production!
    var el, li, i;
    el = document.getElementById('thelist');

    for (i=0; i<3; i++) {
      li = document.createElement('li');
      li.innerText = 'Generated row ' + (++generatedCount);
      el.appendChild(li, el.childNodes[0]);
    }
    
    myScroll.refresh();   // Remember to refresh when contents are loaded (ie: on ajax completion)
  }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

function resetPullDownPos (leftMargin, rightMargin) {
  $('.pullDown-left').css('margin-left', leftMargin);
  $('.pullDown-right').css('margin-right', rightMargin);
}

function resetPullUpPos (leftMargin, rightMargin) {
  $('.pullUp-left').css('margin-left', leftMargin);
  $('.pullUp-right').css('margin-right', rightMargin);
}

function loaded() {
  pullDownEl = document.getElementById('pullDown');
  pullDownOffset = pullDownEl.offsetHeight;
  pullUpEl = document.getElementById('pullUp'); 
  pullUpOffset = pullUpEl.offsetHeight;

  // Max progress value
  var pullDownMaxValue = pullDownOffset;
    pullUpMaxValue = pullUpOffset,

    pullDownLeftRectMarginLeft = parseFloat($('.pullDown-left').css('margin-left')),
   ...