Skip to content
Permalink
Browse files

todoCollection pull up animation

  • Loading branch information...
Evan You
Evan You committed Nov 15, 2012
1 parent 23aec34 commit 374d64148bbc9dd4990ccfe818b6c1c56822700f
Showing with 107 additions and 10 deletions.
  1. +1 −1 css/style.css
  2. +39 −3 css/style.less
  3. BIN img/arrow-small.png
  4. BIN img/drawer.png
  5. +12 −0 js/collection.js
  6. +1 −2 js/db.js
  7. +54 −4 js/todo-collection.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -60,9 +60,7 @@ html, body {
}
}

// top switch (shown when pulled down)

.top-switch {
.top-switch, .bottom-switch {
position: absolute;
top: -@itemHeight;
height: @itemHeight;
@@ -82,6 +80,44 @@ html, body {
}
}

.bottom-switch {
&.empty {
color: #333;
.drawer {
opacity: .2;
.arrow-small {
display: none;
}
}
}
}

.drawer {
position: relative;
top: -2px;
margin-right: 8px;
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
background: url(../img/drawer.png) 0 0 no-repeat;
background-size: 100%;

.arrow-small {
position: absolute;
width: 15px;
left: 7px;
top: -@itemHeight + 5px;
}

&.full {
background-position: 0 -30px;
.arrow-small {
display: none;
}
}
}

}

.item {
BIN +1.12 KB img/arrow-small.png
Binary file not shown.
BIN +1.14 KB img/drawer.png
Binary file not shown.
@@ -21,6 +21,8 @@ C.Collection = (function (raf) {
this.initiated = false;
this.longPullingDown = false;
this.longPullingUp = false;
this.pastLongPullDownThreshold = false;
this.pastLongPullUpThreshold = false;

this.data = data || C.db.data;
this.items = [];
@@ -51,6 +53,8 @@ C.Collection = (function (raf) {
if (!li.data.done) this.count++;
}

this.hasDoneItems = this.items.length > this.count;

this.updateBounds();

},
@@ -158,10 +162,18 @@ C.Collection = (function (raf) {

this.height = this.items.length * C.ITEM_HEIGHT;
this.upperBound = Math.min(0, C.client.height - (this.height + C.ITEM_HEIGHT));

// move into bound when items are deleted
if (this.y < this.upperBound) {
this.moveY(this.upperBound);
}

// update bottom switch position
if (this.bottomSwitch) {
var pos = Math.max(C.client.height, this.height) + C.ITEM_HEIGHT * 2;
this.bottomSwitch[0].style.webkitTransform = 'translate3d(0px,' + pos + 'px, 0px)';
}

},

onDragStart: function () {
@@ -1,8 +1,7 @@
C.db = (function () {

var supported = ('localStorage' in window) && ('JSON' in window);

var localStorageKey = 'html5-clear'
var localStorageKey = 'html5-clear';

var db = {

@@ -20,15 +20,25 @@ C.TodoCollection.prototype = {
render: function () {

this.el = $('<div class="collection">'
+ '<div class="top-switch">'
+ '<img class="arrow" src="img/arrow.png"> <span class="text">Switch To Lists</span>'
+ '</div>'
+ '<div class="top-switch">'
+ '<img class="arrow" src="img/arrow.png"> <span class="text">Switch To Lists</span>'
+ '</div>'
+ '<div class="bottom-switch">'
+ '<div class="drawer"><img class="arrow-small" src="img/arrow-small.png"></div>'
+ '<span class="text">Pull to Clear</span>'
+ '</div>'
+ '</div>');

this.style = this.el[0].style;

this.topSwitch = this.el.find('.top-switch');
this.topArrow = this.topSwitch.find('.arrow');
this.topText = this.topSwitch.find('.text');

this.bottomSwitch = this.el.find('.bottom-switch');
this.drawer = this.bottomSwitch.find('.drawer');
this.smallArrowStyle = this.bottomSwitch.find('.arrow-small')[0].style;

},

load: function (at, noAnimation) {
@@ -93,6 +103,7 @@ C.TodoCollection.prototype = {

this.listItem.count = this.count;
this.listItem.updateCount();
this.hasDoneItems = this.items.length > this.count;

},

@@ -102,7 +113,7 @@ C.TodoCollection.prototype = {

var lc = C.listCollection;

// long pull over top
// long pull down
if (this.y >= C.ITEM_HEIGHT * 2) {
if (!this.longPullingDown) {
this.longPullingDown = true;
@@ -115,6 +126,43 @@ C.TodoCollection.prototype = {
}
}

// long pull up
if (this.y < this.upperBound) {

if (!this.longPullingUp) {
this.longPullingUp = true;
if (this.hasDoneItems) {
this.bottomSwitch.removeClass('empty');
} else {
this.bottomSwitch.addClass('empty');
}
}

// move the small arrow
if (this.hasDoneItems) {
var offset = (this.upperBound - this.y) / 2;
this.smallArrowStyle.webkitTransform = 'translate3d(0,' + offset + 'px, 0)';
}

// check threshold
if (this.y < this.upperBound - C.ITEM_HEIGHT * 2) {
if (!this.pastLongPullUpThreshold) {
this.pastLongPullUpThreshold = true;
this.drawer.addClass('full');
}
} else {
if (this.pastLongPullUpThreshold) {
this.pastLongPullUpThreshold = false;
this.drawer.removeClass('full');
}
}

} else {
if (this.longPullingUp) {
this.longPullingUp = false;
}
}

},

onDragEnd: function () {
@@ -161,6 +209,8 @@ C.TodoCollection.prototype = {

onPullUp: function () {



},

createNewItem: function () {

0 comments on commit 374d641

Please sign in to comment.
You can’t perform that action at this time.