Permalink
Browse files

reapply remove from list

This reverts commit da60984.
  • Loading branch information...
1 parent 50591e5 commit 84ef61fbb66990ecd1823a9f6c56c9ad3740e568 Brian Rosenthal committed Jul 2, 2011
Showing with 102 additions and 7 deletions.
  1. +15 −0 src/model/circle.js
  2. +8 −4 src/view/circle.js
  3. +17 −3 src/view/circle/circle.css
  4. +57 −0 src/view/circleList.js
  5. +5 −0 src/view/friendList/friendList.css
View
@@ -42,6 +42,12 @@ var Circle = fun.newClass(Observable, {
}
},
+ saveDeleteMemberId: function(id) {
+ if (this.id()) {
+ FB.api('/' + this.id() + '/members/' + id, 'DELETE', function() {});
+ }
+ },
+
members: function() {
var ret = [];
this.member_ids().forEach(function(id) {
@@ -52,6 +58,15 @@ var Circle = fun.newClass(Observable, {
return ret;
},
+ removeMemberId: function(id) {
+ var index = this.member_ids().indexOf(id);
+ var old_member_ids = this.member_ids();
+ old_member_ids.splice(index, 1);
+ this.member_ids(old_member_ids);
+ this.saveDeleteMemberId(id);
+ return this;
+ },
+
addMemberIds: function(newIds) {
var map = {};
var ids = this.member_ids();
View
@@ -23,7 +23,9 @@ var CircleFriend = view.newClass('CircleFriend', Img, {
var y = -Math.cos(a)*R;
this.dom().style.marginLeft = x - 15 + 'px';
this.dom().style.marginTop = y - 15 + 'px';
- })
+ }),
+
+ fbid: fun.newProp('fbid')
});
var Circle = view.newClass('Circle', Container, {
@@ -61,12 +63,13 @@ var Circle = view.newClass('Circle', Container, {
_firePopup: function(diff) {
var rect = this.clientRect(true);
+ var color_class = (diff >= 0 ? 'circle__popup_green' : 'circle__popup_red');
var popup = dom.createElement('div',
- { className: 'circle__popup',
+ { className: 'circle__popup ' + color_class,
html: diff > 0 ? '+' + diff : diff,
style: 'left: ' + rect.left + 'px; top: ' + rect.top + 'px'
});
- document.body.appendChild(popup);
+ document.body.appendChild(popup);
setTimeout(function() {
dom.addClass(popup, 'circle__popup_phase1');
@@ -115,8 +118,9 @@ var Circle = view.newClass('Circle', Container, {
if (this.model() && this.model().membersLoaded()) {
this._initted = true;
var members = this.model().members().slice(0, FRIENDS_PER_CIRCLE);
+ var child_views = [];
this.childViews(members.map(function(m, i) {
- return { view: CircleFriend, src: m.picture(), index: i };
+ return { view: CircleFriend, src: m.picture(), fbid: m.id(), index: i };
}));
}
},
View
@@ -153,7 +153,6 @@
width: 32px;
height: 32px;
border-radius: 32px;
- background: -webkit-gradient(linear, left top, left bottom, from(#00d240), to(#00d240));
z-index: 300;
left: 50%;
top: 50%;
@@ -170,12 +169,27 @@
font-size: 15px;
}
+.circle__popup_red {
+ background: -webkit-gradient(linear, left top, left bottom, from(#d20040), to(#d20040));
+}
-.circle__popup {
+.circle__popup_red {
+ background: -webkit-linear-gradient(top, #d20040 0%, #ae0035 100%);
+}
+
+.circle__popup_red {
+ background: -moz-linear-gradient(top, #d20040 0%, #ae0035 100%);
+}
+
+.circle__popup_green {
+ background: -webkit-gradient(linear, left top, left bottom, from(#00d240), to(#00d240));
+}
+
+.circle__popup_green {
background: -webkit-linear-gradient(top, #00d240 0%, #00ae35 100%);
}
-.circle__popup {
+.circle__popup_green {
background: -moz-linear-gradient(top, #00d240 0%, #00ae35 100%);
}
View
@@ -5,11 +5,68 @@ var view = require('../../lib/uki-core/view');
var utils = require('../../lib/uki-core/utils');
var fun = require('../../lib/uki-core/function');
var Circle = require('./circle').Circle;
+var dom = require('../../lib/uki-core/dom');
+
+// var DragController = require('./circleList/dragController').DragController;
var CircleList = view.newClass('CircleList', Base, {
_createDom: function(initArgs) {
Base.prototype._createDom.call(this, initArgs);
this.horizontal(true).addClass('circleList').spacing('none');
+ this.on('draggesture', this._ondraggesture);
+ this.on('draggesturestart', this._ondraggesturestart);
+ this.on('draggestureend', this._ondraggestureend);
+ },
+
+ friendCircleFeedback: fun.newProp('feedback'),
+
+ _repositionCircleFriendForDrag: function(e) {
+ var top = e.pageY;
+ var left = e.pageX;
+ this.friendCircleFeedback().style.left = left + 'px';
+ this.friendCircleFeedback().style.top = top+ 'px';
+ },
+
+ _ondraggesture: function(e) {
+ if (this._dragging) {
+ this._repositionCircleFriendForDrag(e);
+ }
+ },
+
+ _ondraggesturestart: function(e) {
+ var target = e.target;
+ var circle_index = this._itemUnderCursor(e);
+ if (circle_index === null) { return; }
+ var fbid = e.targetView().fbid && e.targetView().fbid();
+ if (!fbid) { return;}
+
+ this._itemDrag = {
@voloko

voloko Jul 3, 2011

Owner

why cannot you just store the view?
i think we should stick to id instead of fbid everywhere

+ circleIndex: circle_index,
+ fbid: fbid};
+ this._dragging = true;
+
+ var feedback = target.cloneNode(true);
+ dom.addClass(feedback, 'circleList__dragFeedback');
+ document.body.appendChild(feedback);
+ this.friendCircleFeedback(feedback);
+ this.friendCircleFeedback().style.position = 'absolute';
+ this.friendCircleFeedback().style.zIndex = '1000';
+ this.friendCircleFeedback().style.margin = '0';
+ this.friendCircleFeedback().style.marginLeft = '-15px';
+ this.friendCircleFeedback().style.marginTop = '-15px';
+ this.friendCircleFeedback().style.opacity = 100;
+ this._repositionCircleFriendForDrag(e);
+ },
+
+ _ondraggestureend: function(e) {
+ if (this._dragging) {
+ document.body.removeChild(this.friendCircleFeedback());
+ this.friendCircleFeedback(null);
+ if (this._itemDrag && this._itemDrag.fbid) {
+ this.childViews()[this._itemDrag.circleIndex].model().removeMemberId(this._itemDrag.fbid);
+ }
+ this._dragging = false;
+ }
},
data: fun.newProp('data', function(d) {
@@ -2,6 +2,11 @@
overflow-y: auto;
}
+.circleList__dragFeedback {
+ position: absolute;
+ z-index: 1000;
+}
+
.friendList__dragFeedback {
position: absolute;
z-index: 1000;

0 comments on commit 84ef61f

Please sign in to comment.