'
- + this.data.title
+ this.el = $('
'
+ + '
'
+ + '
'
+ + '
' + this.data.title + ''
+ + '
'
+ + '
'
+ '
'
+ '
');
- this.style = this.el[0].style;
+ this.lineStyle = this.el.find('.line')[0].style;
},
updatePosition: function () {
-
- this.style.webkitTransform = 'translate3d(0,' + this.y + 'px, 0)';
-
+ C.Item.updatePosition.apply(this, arguments);
},
updateColor: function () {
@@ -50,7 +53,7 @@
sL = spanL / n;
}
- this.style.backgroundColor = 'hsl('
+ this.sliderStyle.backgroundColor = 'hsl('
+ (baseH + o * sH) + ','
+ (o ? (baseS - 10) : baseS) + '%,'
+ (baseL + o * sL) + '%)';
@@ -63,14 +66,36 @@
onDragStart: function () {
C.Item.onDragStart.apply(this);
+ this.contentWidth = this.el.find('.title').width() + 7;
},
onDragMove: function (dx) {
+
+ this.lineStyle.width = Math.min(this.contentWidth, Math.max(0, ~~(this.x / 64 * this.contentWidth))) + 'px';
+ if (this.x >= rightBound) {
+ if (!this.green) {
+ this.green = true;
+ this.el.addClass('green');
+ }
+ } else {
+ if (this.green) {
+ this.green = false;
+ this.el.removeClass('green');
+ }
+ }
+
C.Item.onDragMove.apply(this, arguments);
+
},
onDragEnd: function () {
+
+ if (this.x < rightBound) {
+ this.lineStyle.width = 0;
+ }
+
C.Item.onDragEnd.apply(this);
+
},
del: function () {
@@ -78,7 +103,21 @@
},
done: function () {
- console.log("done");
+
+ //TODO: data manipulation
+
+ this.data.done = true;
+
+ this.el
+ .removeClass('green')
+ .addClass('done');
+
+ this.list.onDone(this);
+
+ },
+
+ cancel: function () {
+
}
};
diff --git a/js/todoView.js b/js/todoView.js
index 5ca25e7..cfd8ae9 100644
--- a/js/todoView.js
+++ b/js/todoView.js
@@ -60,6 +60,33 @@ C.TodoView.prototype = {
},
+ onDone: function (doneTodo) {
+
+ var todos = this.items,
+ i = todos.length,
+ incomplete = this.countIncomplete(),
+ doneOrder = doneTodo.data.order,
+ todo;
+
+ while (i--) {
+ todo = todos[i];
+ if (todo === doneTodo) {
+ todo.data.order = incomplete;
+ } else if (todo.data.order > doneOrder && !todo.data.done) {
+ todo.data.order -= 1;
+ } else {
+ continue;
+ }
+ todo.updateColor();
+ todo.updatePosition();
+ }
+
+ },
+
+ countIncomplete: function () {
+ return C.View.countIncomplete.apply(this, arguments);
+ },
+
updateBounds: function () {
C.View.updateBounds.apply(this, arguments);
},
diff --git a/js/view.js b/js/view.js
index c51368f..21bd490 100644
--- a/js/view.js
+++ b/js/view.js
@@ -10,25 +10,34 @@ C.View = (function () {
updateColor: function () {
- var i = this.items.length,
- item;
+ var i = this.items.length;
while (i--) {
- item = this.items[i];
- item.updateColor();
+ this.items[i].updateColor();
}
},
updatePosition: function () {
+ var i = this.items.length;
+
+ while (i--) {
+ this.items[i].updatePosition();
+ }
+
+ },
+
+ countIncomplete: function () {
+
var i = this.items.length,
- item;
+ count = 0;
while (i--) {
- item = this.items[i];
- item.updatePosition();
+ if (!this.items[i].data.done) count++;
}
+
+ return count;
},
');
+ this.cross = $('
');
+ this.el
+ .append(this.check)
+ .append(this.cross);
+
+ this.checkStyle = this.check[0].style;
+ this.crossStyle = this.cross[0].style;
+
+ this.checkX = 0;
+ this.crossX = 0;
+ this.checkO = 0;
+ this.crossO = 0;
+
+ },
+
+ updatePosition: function () {
+
+ this.y = this.data.order * 64;
+ this.style.webkitTransform = 'translate3d(0,' + this.y + 'px, 0)';
+
},
onDragStart: function () {
- this.el.addClass('drag');
+ this.slider.addClass('drag');
+ this.checkX = this.crossX = 0;
+ this.checkStyle.webkitTransform = this.crossStyle.webkitTransform = 'translate3d(0,0,0)';
},
onDragMove: function (dx) {
- if (this.noDragRight && this.x + dx > 0) return;
- if (this.noDragLeft && this.x + dx < 0) return;
+ var tx = this.x + dx;
+
+ if (this.noDragRight && tx > 0) return;
+ if (this.noDragLeft && tx < 0) return;
+
+ if (tx > 0) { // dragging to right
+
+ if (this.noDragRight) return;
+ if (tx <= rightBound) {
+
+ this.checkO = tx / rightBound;
+ this.checkStyle.opacity = this.checkO;
+
+ if (this.checkX != 0) {
+ this.checkX = 0;
+ this.checkStyle.webkitTransform = 'translate3d(0, 0, 0)';
+ }
+
+ } else { // over bound
+
+ dx /= 3;
+ this.checkX = Math.max(0, (this.x + dx) - rightBound);
+ this.checkStyle.webkitTransform = 'translate3d(' + this.checkX + 'px, 0, 0)';
+
+ if (this.checkO != 1) {
+ this.checkO = 1;
+ this.checkStyle.opacity = 1;
+ }
+
+ }
+
+ } else if (tx < 0) { // dragging to left
+
+ if (this.noDragLeft) return;
+ if (tx >= leftBound) {
+
+ this.crossO = tx / leftBound;
+ this.crossStyle.opacity = this.crossO;
+
+ if (this.crossX != 0) {
+ this.crossX = 0;
+ this.crossStyle.webkitTransform = 'translate3d(0, 0, 0)';
+ }
+
+ } else { // over bound
+
+ dx /= 3;
+ this.crossX = Math.min(0, (this.x + dx) - leftBound);
+ this.crossStyle.webkitTransform = 'translate3d(' + this.crossX + 'px, 0, 0)';
+
+ if (this.crossO != 1) {
+ this.crossO = 1;
+ this.crossStyle.opacity = 1;
+ }
+
+ }
- if (this.x + dx < leftBound || this.x + dx > rightBound) {
- dx /= 3;
}
this.x += dx;
- this.style.webkitTransform = 'translate3d(' + this.x + 'px,' + this.y + 'px, 0)';
+ this.sliderStyle.webkitTransform = 'translate3d(' + this.x + 'px, 0, 0)';
},
onDragEnd: function () {
- var item = this;
+ var item = this,
+ complete;
if (item.x < leftBound) {
- this.del();
+ complete = this.del;
} else if (item.x > rightBound) {
- this.done();
+ complete = this.done;
+ } else {
+ complete = this.cancel;
}
loop();
@@ -50,19 +132,24 @@ C.Item = (function () {
function loop () {
item.x *= .6;
- item.style.webkitTransform = 'translate3d(' + item.x + 'px,' + item.y + 'px, 0)';
+ item.sliderStyle.webkitTransform = 'translate3d(' + item.x + 'px, 0, 0)';
if (Math.abs(item.x) > 0.1) {
setTimeout(loop, 16);
} else {
item.x = 0;
- item.style.webkitTransform = 'translate3d(' + item.x + 'px,' + item.y + 'px, 0)';
- item.el.removeClass('drag');
+ item.sliderStyle.webkitTransform = 'translate3d(' + item.x + 'px, 0, 0)';
+ item.slider.removeClass('drag');
+
+ complete.call(item);
+
}
}
- }
+ },
+
+
};
diff --git a/js/listItem.js b/js/listItem.js
index 1cf79b6..9a44832 100644
--- a/js/listItem.js
+++ b/js/listItem.js
@@ -35,20 +35,18 @@
this.el = $('