Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

a much better friend selector

  • Loading branch information...
commit 3016c9342f08a5be6b00788d04c5b6806f407d93 1 parent 899f5de
@ptarjan authored
View
52 event_submit.html
@@ -11,6 +11,8 @@
<!-- CSS -->
<link rel="stylesheet" href="/static/dynamic.12380.css" type="text/css" />
<link rel="stylesheet" href="/static/power.12380.css" type="text/css" />
+<link rel="stylesheet" href="/static/jquery.facebook.multifriend.select.css" />
+
<style>
#hack_form {
display: none;
@@ -25,6 +27,9 @@
text-align: center;
display: none;
}
+div#jfmfs-friend-selector {
+ width: 100%;
+}
</style>
<!-- JavaScript -->
@@ -133,15 +138,10 @@
<label class="desc" id="title9" for="other_hackers">
Other Hackers
</label>
-<div>
-<select id="other_hackers" name="other_hackers" class="field large" tabindex="7" multiple>
-{% for friend in friends %}
-<option name="{{ friend.id }}">{{ friend.name }}</option>
-{% endfor %}
-</select>
-</div>
-<p class="instruct" id="instruct9"><small>Who else built this with you? Hold Control or ⌘ to select multiple.</small></p>
+<div id="jfmfs-container" name="other_hackers"></div>
+
+<p class="instruct" id="instruct9"><small>Who else built this with you?</small></p>
</li>
@@ -163,8 +163,12 @@
</a>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
+<script src="/static/jquery.facebook.multifriend.select.min.js"></script>
+
<div id="fb-root"></div>
<script>
+jQuery.noConflict()(function($) {
+
window.fbAsyncInit = function() {
FB.init({appId: '136348336398305', status: true, cookie: true, xfbml: true});
FB.getLoginStatus(function(response) {
@@ -179,16 +183,13 @@
});
var onLogin = function() {
- // Get the friends (I don't care about people with 0 friends)
- if (jQuery('#other_hackers').children().length == 0) {
- document.location.reload();
- } else {
- {% if isAttending %}
- jQuery('#hack_form').show();
- {% else %}
- jQuery('#error').show();
- {% endif %}
- }
+ $("#jfmfs-container").jfmfs();
+
+ {% if isAttending %}
+ jQuery('#hack_form').show();
+ {% else %}
+ jQuery('#error').show();
+ {% endif %}
}
};
(function() {
@@ -196,16 +197,17 @@
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
-</script>
-
-<script>
-jQuery.noConflict()(function($) {
$('form').submit(function () {
var names = [];
- $('#other_hackers :selected').each(function() {
- names.push($(this).text());
- });
+ var friendSelector = $("#jfmfs-container").data('jfmfs');
+ var friends = friendSelector.getSelectedIdsAndNames();
+ for (var i in friends) {
+ var name = friends[i].name;
+ if (name) {
+ names.push(friends[i].name);
+ }
+ }
names.push('{{ me.name }}');
names.sort(function(a, b) {
return a.split(':')[2] < b.split(':')[2] ? -1 : 1;
View
1  main.py
@@ -120,6 +120,7 @@ def getEvent(self, eid):
def getRawHacks(self, eid):
data = []
url = 'https://graph.facebook.com/'+str(eid)+'/feed?access_token='+self.getAppOAuthToken()
+ # print "\n\n"+url
while 1:
feed = self.fetch(url)
data += feed['data']
View
160 static/jquery.facebook.multifriend.select.css
@@ -0,0 +1,160 @@
+/*
+Copyright 2010 Mike Brevoort http://mike.brevoort.com @mbrevoort
+
+v1.0 jquery-facebook-multi-friend-selector
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+#jfmfs-friend-selector input {
+ background-color: #fcfcfc;
+ border: 1px solid #ccc;
+ font: 11px verdana, arial, helvetica, sans-serif;
+ margin: 2px 0;
+ padding: 2px 4px;
+}
+.jfmfs-friend {
+ cursor:pointer;
+ display:block;
+ float:left;
+ height:56px;
+ margin:3px;
+ padding:4px;
+ width:126px;
+ border: 1px solid #FFFFFF;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ overflow:hidden;
+}
+
+.jfmfs-friend img {
+ border: 1px solid #CCC;
+ float:left;
+ margin:0;
+}
+
+.jfmfs-friend.selected img {
+ border: 1px solid #233E75;
+}
+
+.jfmfs-friend div {
+ color:#111111;
+ font-size:11px;
+ overflow:hidden;
+ padding:2px 0 0 6px;
+}
+
+#jfmfs-friend-container {
+ overflow:scroll;
+ overflow-x: hidden;
+ -ms-overflow-x: hidden;
+ width:100%;
+ height:400px;
+ font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
+ color: #333;
+ font-size: 12px;
+}
+
+#jfmfs-friend-selector {
+ width:725px;
+ height:430px;
+ overflow-y:hidden;
+}
+
+#jfmfs-inner-header {
+ background:none repeat scroll 0 0 #F7F7F7;
+ border-bottom:1px solid #CCCCCC;
+ color:#3B5998;
+ font-size:11px;
+ font-weight:bold;
+ height:25px;
+ padding:2px;
+}
+
+.jfmfs-friend.selected {
+ background-color: #3B5998;
+ border: 1px solid #3B5998;
+
+ background: #6D84B4; /* for non-css3 browsers */
+
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#233E75', endColorstr='#6D84B4'); /* for IE */
+ background: -webkit-gradient(linear, left top, left bottom, from(#233E75), to(#6D84B4)); /* for webkit browsers */
+ background: -moz-linear-gradient(top, #233E75, #6D84B4); /* for firefox 3.6+ */
+}
+
+.jfmfs-friend.selected div {
+ color: #FFFFFF;
+}
+
+.hover {
+ background-color: #EFF2F7;
+}
+
+.hide-non-selected, .hide-filtered {
+ display: none;
+}
+
+div.jfmfs-button {
+ background:none repeat scroll 0 0 #6D84B4;
+ border:1px solid #3B5998;
+ color:white;
+ cursor:pointer;
+ margin:4px 5px 0 4px;
+ padding:2px 5px;
+ text-decoration:none;
+}
+
+#jfmfs-friend-selector a.filter-link:link, a.filter-link:visited {
+ font-weight: bold;
+ text-decoration: none;
+}
+
+#jfmfs-friend-selector a.filter-link:hover, #jfmfs-friend-selector a.selected {
+ background-color: #6D84B4;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ color: #FFFFFF;
+}
+
+#jfmfs-friend-selector .filter-link {
+ margin:4px 5px 4px 5px;
+ padding:3px 5px 3px 5px;
+}
+
+#jfmfs-inner-header .filter-link {
+ float:right;
+}
+
+#jfmfs-inner-header div.jfmfs-button-hover {
+ text-decoration: underline;
+}
+
+
+#jfmfs-friend-filter-text {
+ height: 23px;
+}
+
+
+#jfmfs-inner-header span.jfmfs-title {
+ color: #333333;
+ font-weight: bold;
+ margin: 3px 0 2px;
+}
+
+#jfmfs-max-selected-wrapper {
+ float: right;
+ margin:4px 5px 4px 5px;
+ padding:3px 5px 3px 5px;
+}
View
16 static/jquery.facebook.multifriend.select.min.js
@@ -0,0 +1,16 @@
+// Copyright 2010 Mike Brevoort http://mike.brevoort.com @mbrevoort
+//
+// v5.0 jquery-facebook-multi-friend-selector
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function(a){var b=function(b,c){var d=a(b),e=this,f=[],g,h=0,i=0,j,k=a.extend({max_selected:-1,max_selected_message:"{0} of {1} selected",pre_selected_friends:[],exclude_friends:[],friend_fields:"id,name",sorter:function(a,b){var c=a.name.toLowerCase(),d=b.name.toLowerCase();return c<d?-1:c>d?1:0},labels:{selected:"Selected",filter_default:"Start typing a name",filter_title:"Find Friends:",all:"All",max_selected_message:"{0} of {1} selected"}},c||{}),l,m=function(a){var b={};for(var c=0,d=a.length;c<d;c++)b[a[c]]="";return b};d.html("<div id='jfmfs-friend-selector'> <div id='jfmfs-inner-header'> <span class='jfmfs-title'>"+k.labels.filter_title+" </span><input type='text' id='jfmfs-friend-filter-text' value='"+k.labels.filter_default+"'/>"+" <a class='filter-link selected' id='jfmfs-filter-all' href='#'>"+k.labels.all+"</a>"+" <a class='filter-link' id='jfmfs-filter-selected' href='#'>"+k.labels.selected+" (<span id='jfmfs-selected-count'>0</span>)</a>"+(k.max_selected>0?"<div id='jfmfs-max-selected-wrapper'></div>":"")+" </div>"+" <div id='jfmfs-friend-container'></div>"+"</div>");var n=a("#jfmfs-friend-container"),o=a("#jfmfs-friend-selector"),p=m(k.pre_selected_friends),q=m(k.exclude_friends),r;FB.api("/me/friends?fields="+k.friend_fields,function(b){var c=b.data.sort(k.sorter),e={},g=[],h="";a.each(c,function(a,b){b.id in q||(h=b.id in p?"selected":"",g.push("<div class='jfmfs-friend "+h+" ' id='"+b.id+"'><img/><div class='friend-name'>"+b.name+"</div></div>"))}),n.append(g.join("")),f=a(".jfmfs-friend",d),f.bind("inview",function(b,c){a(this).attr("src")===undefined&&a("img",a(this)).attr("src","//graph.facebook.com/"+this.id+"/picture"),a(this).unbind("inview")}),s()}),this.getSelectedIds=function(){var b=[];return a.each(d.find(".jfmfs-friend.selected"),function(c,d){b.push(a(d).attr("id"))}),b},this.getSelectedIdsAndNames=function(){var b=[];return a.each(d.find(".jfmfs-friend.selected"),function(c,d){b.push({id:a(d).attr("id"),name:a(d).find(".friend-name").text()})}),b},this.clearSelected=function(){r.removeClass("selected")};var s=function(){r=a(".jfmfs-friend",d),j=r.first().offset().top;for(var b=0,c=r.length;b<c;b++)if(a(r[b]).offset().top===j)h++;else{i=a(r[b]).offset().top-j;break}d.delegate(".jfmfs-friend","click",function(b){var c=k.max_selected===1,f=a(this).hasClass("selected"),g=a(".jfmfs-friend.selected").length>=k.max_selected,h=n.find(".selected").attr("id")===a(this).attr("id");if(!c&&!f&&u()&&g)return;c&&!h&&n.find(".selected").removeClass("selected"),a(this).toggleClass("selected"),a(this).removeClass("hover");if(a(this).hasClass("selected"))if(!l)l=a(this);else if(b.shiftKey){var i=a(this).index(),j=l.index(),m=Math.max(i,j),o=Math.min(i,j);for(var q=o;q<=m;q++){var s=a(r[q]);!s.hasClass("hide-non-selected")&&!s.hasClass("hide-filtered")&&u()&&a(".jfmfs-friend.selected").length<k.max_selected&&a(r[q]).addClass("selected")}}l=a(this),p(),u()&&v(),d.trigger("jfmfs.selection.changed",[e.getSelectedIdsAndNames()])}),a("#jfmfs-filter-selected").click(function(b){b.preventDefault(),r.not(".selected").addClass("hide-non-selected"),a(".filter-link").removeClass("selected"),a(this).addClass("selected")}),a("#jfmfs-filter-all").click(function(b){b.preventDefault(),r.removeClass("hide-non-selected"),a(".filter-link").removeClass("selected"),a(this).addClass("selected")}),d.find(".jfmfs-friend:not(.selected)").live("hover",function(b){b.type=="mouseover"&&a(this).addClass("hover"),b.type=="mouseout"&&a(this).removeClass("hover")}),d.find("#jfmfs-friend-filter-text").keyup(function(){var b=a(this).val();clearTimeout(g),g=setTimeout(function(){b==""?r.removeClass("hide-filtered"):(o.find(".friend-name:not(:Contains("+b+"))").parent().addClass("hide-filtered"),o.find(".friend-name:Contains("+b+")").parent().removeClass("hide-filtered")),m()},400)}).focus(function(){a.trim(a(this).val())=="Start typing a name"&&a(this).val("")}).blur(function(){a.trim(a(this).val())==""&&a(this).val("Start typing a name")}),d.find(".jfmfs-button").hover(function(){a(this).addClass("jfmfs-button-hover")},function(){a(this).removeClass("jfmfs-button-hover")});var f=function(){var b=window.innerHeight,c=document.compatMode;if(c||!a.support.boxModel)b=c=="CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight;return b},m=function(){var b=n.innerHeight(),c=n.scrollTop(),d=n.offset().top,e,f,g=0,k=!1,l=a(".jfmfs-friend:not(.hide-filtered )");a.each(l,function(e,m){g++;if(m!==null){m=a(l[e]),f=j+i*Math.ceil(g/h)-c-d;if(f+i>=-10&&f-i<b)m.data("inview",!0),m.trigger("inview",[!0]),k=!0;else if(k)return!1}})},p=function(){a("#jfmfs-selected-count").html(t())};n.bind("scroll",a.debounce(250,m)),v(),m(),p(),d.trigger("jfmfs.friendload.finished")},t=function(){return a(".jfmfs-friend.selected").length},u=function(){return k.max_selected>0},v=function(){var b=k.labels.max_selected_message.replace("{0}",t()).replace("{1}",k.max_selected);a("#jfmfs-max-selected-wrapper").html(b)}};a.fn.jfmfs=function(c){return this.each(function(){var d=a(this);if(d.data("jfmfs"))return;var e=new b(this,c);d.data("jfmfs",e)})},a.expr[":"].Contains=function(b,c,d){return a(b).text().toUpperCase().indexOf(d[3].toUpperCase())>=0}})(jQuery),$.debounce===undefined&&function(a,b){var c=a.jQuery||a.Cowboy||(a.Cowboy={}),d;c.throttle=d=function(a,d,e,f){function i(){function l(){h=+(new Date),e.apply(c,k)}function m(){g=b}var c=this,i=+(new Date)-h,k=arguments;f&&!g&&l(),g&&clearTimeout(g),f===b&&i>a?l():d!==!0&&(g=setTimeout(f?m:l,f===b?a-i:a))}var g,h=0;return typeof d!="boolean"&&(f=e,e=d,d=b),c.guid&&(i.guid=e.guid=e.guid||c.guid++),i},c.debounce=function(a,c,e){return e===b?d(a,c,!1):d(a,e,c!==!1)}}(this);
Please sign in to comment.
Something went wrong with that request. Please try again.