Permalink
Browse files

todoCollection pull up animation

  • Loading branch information...
1 parent 23aec34 commit 374d64148bbc9dd4990ccfe818b6c1c56822700f Evan You committed Nov 15, 2012
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
View

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

Oops, something went wrong.
View
@@ -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 {
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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 () {
View
@@ -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 = {
View
@@ -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.