applicious_utils 0.0.6
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile +4 -0
- data/Rakefile +2 -0
- data/app/assets/javascripts/applicious_utils/Applicious/applicious.coffee +9 -0
- data/app/assets/javascripts/applicious_utils/Applicious/facebook.coffee +12 -0
- data/app/assets/javascripts/applicious_utils/FbMultiFriendSelector/README.md +122 -0
- data/app/assets/javascripts/applicious_utils/FbMultiFriendSelector/index.html +100 -0
- data/app/assets/javascripts/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select-list.css +158 -0
- data/app/assets/javascripts/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select.css +160 -0
- data/app/assets/javascripts/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select.js +366 -0
- data/app/assets/javascripts/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select.min.js +11 -0
- data/app/assets/javascripts/applicious_utils/LightboxMe/LICENSE +11 -0
- data/app/assets/javascripts/applicious_utils/LightboxMe/README.markdown +44 -0
- data/app/assets/javascripts/applicious_utils/LightboxMe/jquery.lightbox_me.js +250 -0
- data/app/assets/javascripts/applicious_utils/index.js +4 -0
- data/app/assets/stylesheets/applicious_utils/Applicious/applicious.css +0 -0
- data/app/assets/stylesheets/applicious_utils/FbMultiFriendSelector/README.md +122 -0
- data/app/assets/stylesheets/applicious_utils/FbMultiFriendSelector/index.html +100 -0
- data/app/assets/stylesheets/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select-list.css +158 -0
- data/app/assets/stylesheets/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select.css +160 -0
- data/app/assets/stylesheets/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select.js +366 -0
- data/app/assets/stylesheets/applicious_utils/FbMultiFriendSelector/jquery.facebook.multifriend.select.min.js +11 -0
- data/app/assets/stylesheets/applicious_utils/index.css +9 -0
- data/applicious_utils-0.0.1.gem +0 -0
- data/applicious_utils-0.0.2.gem +0 -0
- data/applicious_utils-0.0.3.gem +0 -0
- data/applicious_utils-0.0.4.gem +0 -0
- data/applicious_utils-0.0.5.gem +0 -0
- data/applicious_utils.gemspec +22 -0
- data/lib/applicious_utils/applicious_railtie.rb +11 -0
- data/lib/applicious_utils/engine.rb +5 -0
- data/lib/applicious_utils/version.rb +3 -0
- data/lib/applicious_utils/view_helpers.rb +16 -0
- data/lib/applicious_utils.rb +4 -0
- data/pkg/applicious_utils-0.0.4.gem +0 -0
- metadata +81 -0
@@ -0,0 +1,250 @@
|
|
1
|
+
/*
|
2
|
+
* $ lightbox_me
|
3
|
+
* By: Buck Wilson
|
4
|
+
* Version : 2.3
|
5
|
+
*
|
6
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
7
|
+
* you may not use this file except in compliance with the License.
|
8
|
+
* You may obtain a copy of the License at
|
9
|
+
*
|
10
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
11
|
+
*
|
12
|
+
* Unless required by applicable law or agreed to in writing, software
|
13
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
14
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
15
|
+
* See the License for the specific language governing permissions and
|
16
|
+
* limitations under the License.
|
17
|
+
*/
|
18
|
+
|
19
|
+
|
20
|
+
(function($) {
|
21
|
+
|
22
|
+
$.fn.lightbox_me = function(options) {
|
23
|
+
|
24
|
+
return this.each(function() {
|
25
|
+
|
26
|
+
var
|
27
|
+
opts = $.extend({}, $.fn.lightbox_me.defaults, options),
|
28
|
+
$overlay = $(),
|
29
|
+
$self = $(this),
|
30
|
+
$iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'),
|
31
|
+
ie6 = ($.browser.msie && $.browser.version < 7);
|
32
|
+
|
33
|
+
if (opts.showOverlay) {
|
34
|
+
//check if there's an existing overlay, if so, make subequent ones clear
|
35
|
+
var $currentOverlays = $(".js_lb_overlay:visible");
|
36
|
+
if ($currentOverlays.length > 0){
|
37
|
+
$overlay = $('<div class="lb_overlay_clear js_lb_overlay"/>');
|
38
|
+
} else {
|
39
|
+
$overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_overlay"/>');
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
/*----------------------------------------------------
|
44
|
+
DOM Building
|
45
|
+
---------------------------------------------------- */
|
46
|
+
if (ie6) {
|
47
|
+
var src = /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank';
|
48
|
+
$iframe.attr('src', src);
|
49
|
+
$('body').append($iframe);
|
50
|
+
} // iframe shim for ie6, to hide select elements
|
51
|
+
$('body').append($self.hide()).append($overlay);
|
52
|
+
|
53
|
+
|
54
|
+
/*----------------------------------------------------
|
55
|
+
Overlay CSS stuffs
|
56
|
+
---------------------------------------------------- */
|
57
|
+
|
58
|
+
// set css of the overlay
|
59
|
+
if (opts.showOverlay) {
|
60
|
+
setOverlayHeight(); // pulled this into a function because it is called on window resize.
|
61
|
+
$overlay.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2), display: 'none' });
|
62
|
+
if (!$overlay.hasClass('lb_overlay_clear')){
|
63
|
+
$overlay.css(opts.overlayCSS);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
/*----------------------------------------------------
|
68
|
+
Animate it in.
|
69
|
+
---------------------------------------------------- */
|
70
|
+
//
|
71
|
+
if (opts.showOverlay) {
|
72
|
+
$overlay.fadeIn(opts.overlaySpeed, function() {
|
73
|
+
setSelfPosition();
|
74
|
+
$self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); setSelfPosition(); opts.onLoad()});
|
75
|
+
});
|
76
|
+
} else {
|
77
|
+
setSelfPosition();
|
78
|
+
$self[opts.appearEffect](opts.lightboxSpeed, function() { opts.onLoad()});
|
79
|
+
}
|
80
|
+
|
81
|
+
/*----------------------------------------------------
|
82
|
+
Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox)
|
83
|
+
---------------------------------------------------- */
|
84
|
+
if (opts.parentLightbox) {
|
85
|
+
opts.parentLightbox.fadeOut(200);
|
86
|
+
}
|
87
|
+
|
88
|
+
|
89
|
+
/*----------------------------------------------------
|
90
|
+
Bind Events
|
91
|
+
---------------------------------------------------- */
|
92
|
+
|
93
|
+
$(window).resize(setOverlayHeight)
|
94
|
+
.resize(setSelfPosition)
|
95
|
+
.scroll(setSelfPosition)
|
96
|
+
.keyup(observeKeyPress);
|
97
|
+
$overlay.click(function(e) { closeLightbox(); e.preventDefault; });
|
98
|
+
$self.delegate(opts.closeSelector, "click", function(e) {
|
99
|
+
closeLightbox(); e.preventDefault();
|
100
|
+
});
|
101
|
+
$self.bind('close', closeLightbox);
|
102
|
+
$self.bind('reposition', setSelfPosition);
|
103
|
+
|
104
|
+
|
105
|
+
|
106
|
+
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|
107
|
+
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
|
108
|
+
|
109
|
+
|
110
|
+
/*----------------------------------------------------
|
111
|
+
Private Functions
|
112
|
+
---------------------------------------------------- */
|
113
|
+
|
114
|
+
/* Remove or hide all elements */
|
115
|
+
function closeLightbox() {
|
116
|
+
var s = $self[0].style;
|
117
|
+
if (opts.destroyOnClose) {
|
118
|
+
$self.add($overlay).remove();
|
119
|
+
} else {
|
120
|
+
$self.add($overlay).hide();
|
121
|
+
}
|
122
|
+
|
123
|
+
//show the hidden parent lightbox
|
124
|
+
if (opts.parentLightbox) {
|
125
|
+
opts.parentLightbox.fadeIn(200);
|
126
|
+
}
|
127
|
+
|
128
|
+
$iframe.remove();
|
129
|
+
|
130
|
+
// clean up events.
|
131
|
+
$self.undelegate(opts.closeSelector, "click");
|
132
|
+
|
133
|
+
$(window).unbind('reposition', setOverlayHeight);
|
134
|
+
$(window).unbind('reposition', setSelfPosition);
|
135
|
+
$(window).unbind('scroll', setSelfPosition);
|
136
|
+
$(window).unbind('keypress', observeKeyPress);
|
137
|
+
if (ie6)
|
138
|
+
s.removeExpression('top');
|
139
|
+
opts.onClose();
|
140
|
+
}
|
141
|
+
|
142
|
+
|
143
|
+
/* Function to bind to the window to observe the escape/enter key press */
|
144
|
+
function observeKeyPress(e) {
|
145
|
+
if((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) && opts.closeEsc) closeLightbox();
|
146
|
+
}
|
147
|
+
|
148
|
+
|
149
|
+
/* Set the height of the overlay
|
150
|
+
: if the document height is taller than the window, then set the overlay height to the document height.
|
151
|
+
: otherwise, just set overlay height: 100%
|
152
|
+
*/
|
153
|
+
function setOverlayHeight() {
|
154
|
+
if ($(window).height() < $(document).height()) {
|
155
|
+
$overlay.css({height: $(document).height() + 'px'});
|
156
|
+
$iframe.css({height: $(document).height() + 'px'});
|
157
|
+
} else {
|
158
|
+
$overlay.css({height: '100%'});
|
159
|
+
if (ie6) {
|
160
|
+
$('html,body').css('height','100%');
|
161
|
+
$iframe.css('height', '100%');
|
162
|
+
} // ie6 hack for height: 100%; TODO: handle this in IE7
|
163
|
+
}
|
164
|
+
}
|
165
|
+
|
166
|
+
|
167
|
+
/* Set the position of the modal'd window ($self)
|
168
|
+
: if $self is taller than the window, then make it absolutely positioned
|
169
|
+
: otherwise fixed
|
170
|
+
*/
|
171
|
+
function setSelfPosition() {
|
172
|
+
var s = $self[0].style;
|
173
|
+
|
174
|
+
// reset CSS so width is re-calculated for margin-left CSS
|
175
|
+
$self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1, zIndex: (opts.zIndex + 3) });
|
176
|
+
|
177
|
+
|
178
|
+
/* we have to get a little fancy when dealing with height, because lightbox_me
|
179
|
+
is just so fancy.
|
180
|
+
*/
|
181
|
+
|
182
|
+
// if the height of $self is bigger than the window and self isn't already position absolute
|
183
|
+
if (($self.height() + 80 >= $(window).height()) && ($self.css('position') != 'absolute' || ie6)) {
|
184
|
+
|
185
|
+
// we are going to make it positioned where the user can see it, but they can still scroll
|
186
|
+
// so the top offset is based on the user's scroll position.
|
187
|
+
var topOffset = $(document).scrollTop() + 40;
|
188
|
+
$self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0})
|
189
|
+
if (ie6) {
|
190
|
+
s.removeExpression('top');
|
191
|
+
}
|
192
|
+
} else if ($self.height()+ 80 < $(window).height()) {
|
193
|
+
//if the height is less than the window height, then we're gonna make this thing position: fixed.
|
194
|
+
// in ie6 we're gonna fake it.
|
195
|
+
if (ie6) {
|
196
|
+
s.position = 'absolute';
|
197
|
+
if (opts.centered) {
|
198
|
+
s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"')
|
199
|
+
s.marginTop = 0;
|
200
|
+
} else {
|
201
|
+
var top = (opts.modalCSS && opts.modalCSS.top) ? parseInt(opts.modalCSS.top) : 0;
|
202
|
+
s.setExpression('top', '((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"')
|
203
|
+
}
|
204
|
+
} else {
|
205
|
+
if (opts.centered) {
|
206
|
+
$self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1})
|
207
|
+
} else {
|
208
|
+
$self.css({ position: 'fixed'}).css(opts.modalCSS);
|
209
|
+
}
|
210
|
+
|
211
|
+
}
|
212
|
+
}
|
213
|
+
}
|
214
|
+
|
215
|
+
});
|
216
|
+
|
217
|
+
|
218
|
+
|
219
|
+
};
|
220
|
+
|
221
|
+
$.fn.lightbox_me.defaults = {
|
222
|
+
|
223
|
+
// animation
|
224
|
+
appearEffect: "fadeIn",
|
225
|
+
appearEase: "",
|
226
|
+
overlaySpeed: 250,
|
227
|
+
lightboxSpeed: 300,
|
228
|
+
|
229
|
+
// close
|
230
|
+
closeSelector: ".close",
|
231
|
+
closeClick: true,
|
232
|
+
closeEsc: true,
|
233
|
+
|
234
|
+
// behavior
|
235
|
+
destroyOnClose: false,
|
236
|
+
showOverlay: true,
|
237
|
+
parentLightbox: false,
|
238
|
+
|
239
|
+
// callbacks
|
240
|
+
onLoad: function() {},
|
241
|
+
onClose: function() {},
|
242
|
+
|
243
|
+
// style
|
244
|
+
classPrefix: 'lb',
|
245
|
+
zIndex: 999,
|
246
|
+
centered: false,
|
247
|
+
modalCSS: {top: '40px'},
|
248
|
+
overlayCSS: {background: 'black', opacity: .3}
|
249
|
+
}
|
250
|
+
})(jQuery);
|
File without changes
|
@@ -0,0 +1,122 @@
|
|
1
|
+
This is an client side alternative to the Facebook Multi-Friend Selector that
|
2
|
+
relies on jQuery. No server side component necessary which makes it really
|
3
|
+
easy to adapt and use. Check out this blog post with more details and [screencast](http://bit.ly/cHDkzm). To see a demo go [here](http://mbrevoort.github.com/jquery-facebook-multi-friend-selector/). Click login and login to your facebook account and you should see the friend selector.
|
4
|
+
|
5
|
+
Much can be customized by CSS, for example if you want a stacked list type selector that's [more stripped down](http://mbrevoort.github.com/jquery-facebook-multi-friend-selector/list.html)
|
6
|
+
|
7
|
+
|
8
|
+
How to use it
|
9
|
+
-------------
|
10
|
+
|
11
|
+
This plugin is depends on the Facebook Javascript API so you have to include it:
|
12
|
+
|
13
|
+
<script src="http://connect.facebook.net/en_US/all.js"></script>
|
14
|
+
|
15
|
+
Include the plugin javascript file and CSS
|
16
|
+
|
17
|
+
Assuming you have a container like:
|
18
|
+
|
19
|
+
<div id="jfmfs-container"></div>
|
20
|
+
|
21
|
+
And you have included the Facebook Javascript API
|
22
|
+
And you have already logged the user in. (FB.init and FB.login)
|
23
|
+
You can load the friend selector in a container like this:
|
24
|
+
|
25
|
+
$("#jfmfs-container").jfmfs();
|
26
|
+
|
27
|
+
This should fetch the current users friends and give you the interface to select friends. Then when you're ready to move on, there's a function to call that returns an array of the Facebook Ids of the selected friends.
|
28
|
+
|
29
|
+
var friendSelector = $("#jfmfs-container").data('jfmfs');
|
30
|
+
var selectedFriends = friendSelector.getSelectedIds();
|
31
|
+
|
32
|
+
Options
|
33
|
+
-------
|
34
|
+
These options can be passed into the jfmfs function with a map of options like jfmfs({key1: val, key2: val})
|
35
|
+
|
36
|
+
* max_selected: int (optional)- max number of items that can be selected
|
37
|
+
* labels: object with i18n labels for translations. If you pass this, you need to define all of the labels.
|
38
|
+
|
39
|
+
labels: {
|
40
|
+
selected: "Selected",
|
41
|
+
filter_default: "Start typing a name",
|
42
|
+
filter_title: "Find Friends:",
|
43
|
+
all: "All",
|
44
|
+
max_selected_message: "{0} of {1} selected"
|
45
|
+
// message to display showing how many items are already selected like: "{0} of {1} chosen"
|
46
|
+
}
|
47
|
+
|
48
|
+
* friend_fields: a comma separated list of fields to return in case you need additional fields for sorting. However you should always at least specify: "id,name",
|
49
|
+
* sorter: a function reference that will be called to do the sorting. It takes two arguments which are the two friend objects to be compared and returns "truthy if the first should come before the second. The default is:
|
50
|
+
|
51
|
+
function(a, b) {
|
52
|
+
var x = a.name.toLowerCase();
|
53
|
+
var y = b.name.toLowerCase();
|
54
|
+
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
55
|
+
}
|
56
|
+
|
57
|
+
* pre_selected_friends: an array of ids of friends to preselect once loaded like: pre_selected_friends: [1014025367]
|
58
|
+
|
59
|
+
* exclude_friends: an array of ids of friends to exclude from the list like: exclude_friends: [33333333]
|
60
|
+
|
61
|
+
For example your options might look like this if you want a max of 3 friends selected, friends 11111111 and 22222222 preselected, friend 33333333 excluded from the list and to sort by friends' last name:
|
62
|
+
|
63
|
+
{
|
64
|
+
max_selected: 3,
|
65
|
+
max_selected_message: "{0} of {1} sucker selected",
|
66
|
+
friend_fields: "id,name,last_name",
|
67
|
+
pre_selected_friends: [11111111, 22222222],
|
68
|
+
exclude_friends: [33333333],
|
69
|
+
sorter: function(a, b) {
|
70
|
+
var x = a.last_name.toLowerCase();
|
71
|
+
var y = b.last_name.toLowerCase();
|
72
|
+
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
Events
|
77
|
+
------
|
78
|
+
jfmfs.friendload.finished - triggered on the container when the list of friends is finished loading
|
79
|
+
|
80
|
+
$("#jfmfs-container").bind("jfmfs.friendload.finished", function() {
|
81
|
+
alert("finished loaded!");
|
82
|
+
});
|
83
|
+
|
84
|
+
jfmfs.selection.changed - triggered on the container when a selection has changed with an array of selected friends each like { id: "123", name: "John Doe"}
|
85
|
+
|
86
|
+
$("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) {
|
87
|
+
console.log("changed", data);
|
88
|
+
});
|
89
|
+
|
90
|
+
# Changelog
|
91
|
+
|
92
|
+
## Version v4
|
93
|
+
2/5/2011:
|
94
|
+
|
95
|
+
* Fixed issue with images not loading when list is filtered
|
96
|
+
|
97
|
+
* Added i18n label object option to override default text
|
98
|
+
|
99
|
+
* Fixed bug when there was only one row of friends
|
100
|
+
|
101
|
+
* Added minified version [5.37KB (2.06KB gzipped)]
|
102
|
+
|
103
|
+
## Version v3
|
104
|
+
1/28/2011:
|
105
|
+
|
106
|
+
* Added customizable sorter option (see details in options section)
|
107
|
+
|
108
|
+
* Added pre_selected_friends option (see details in options section)
|
109
|
+
|
110
|
+
* Added exclude_friends option (see details in options section)
|
111
|
+
|
112
|
+
## Version v2 (yeah, not 0.0.0.2)
|
113
|
+
1/21/2011:
|
114
|
+
|
115
|
+
* Added some performance optimizations especially with a large number of friends
|
116
|
+
|
117
|
+
* Custom events for notification when friends are loaded or selections change
|
118
|
+
|
119
|
+
* Progressive image loading when scrolling including the usage of Ben Alman's awesome throttle/debounce library for smoother scrolling
|
120
|
+
|
121
|
+
|
122
|
+
|
@@ -0,0 +1,100 @@
|
|
1
|
+
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
|
5
|
+
<script type="text/javascript" src="jquery.facebook.multifriend.select.js"></script>
|
6
|
+
<link rel="stylesheet" href="jquery.facebook.multifriend.select.css" />
|
7
|
+
<style>
|
8
|
+
body {
|
9
|
+
background: #fff;
|
10
|
+
color: #333;
|
11
|
+
font: 11px verdana, arial, helvetica, sans-serif;
|
12
|
+
}
|
13
|
+
a:link, a:visited, a:hover {
|
14
|
+
color: #666;
|
15
|
+
font-weight: bold;
|
16
|
+
text-decoration: none;
|
17
|
+
}
|
18
|
+
</style>
|
19
|
+
</head>
|
20
|
+
<body>
|
21
|
+
|
22
|
+
<div id="pageBody">
|
23
|
+
<div id="fb-root"></div>
|
24
|
+
<script src="http://connect.facebook.net/en_US/all.js"></script>
|
25
|
+
<script>
|
26
|
+
FB.init({appId: '194478650562619', cookie: true});
|
27
|
+
|
28
|
+
FB.getLoginStatus(function(response) {
|
29
|
+
if (response.session) {
|
30
|
+
init();
|
31
|
+
} else {
|
32
|
+
// no user session available, someone you dont know
|
33
|
+
}
|
34
|
+
});
|
35
|
+
|
36
|
+
|
37
|
+
function login() {
|
38
|
+
FB.login(function(response) {
|
39
|
+
if (response.session) {
|
40
|
+
init();
|
41
|
+
} else {
|
42
|
+
alert('Login Failed!');
|
43
|
+
}
|
44
|
+
});
|
45
|
+
}
|
46
|
+
|
47
|
+
function init() {
|
48
|
+
FB.api('/me', function(response) {
|
49
|
+
$("#username").html("<img src='https://graph.facebook.com/" + response.id + "/picture'/><div>" + response.name + "</div>");
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
$("#jfmfs-container").jfmfs({
|
54
|
+
max_selected: 15,
|
55
|
+
max_selected_message: "{0} of {1} selected",
|
56
|
+
friend_fields: "id,name,last_name",
|
57
|
+
pre_selected_friends: [1014025367],
|
58
|
+
exclude_friends: [1211122344, 610526078],
|
59
|
+
sorter: function(a, b) {
|
60
|
+
var x = a.last_name.toLowerCase();
|
61
|
+
var y = b.last_name.toLowerCase();
|
62
|
+
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
63
|
+
}
|
64
|
+
});
|
65
|
+
$("#jfmfs-container").bind("jfmfs.friendload.finished", function() {
|
66
|
+
window.console && console.log("finished loading!");
|
67
|
+
});
|
68
|
+
$("#jfmfs-container").bind("jfmfs.selection.changed", function(e, data) {
|
69
|
+
window.console && console.log("changed", data);
|
70
|
+
});
|
71
|
+
|
72
|
+
$("#logged-out-status").hide();
|
73
|
+
$("#show-friends").show();
|
74
|
+
|
75
|
+
});
|
76
|
+
}
|
77
|
+
|
78
|
+
|
79
|
+
|
80
|
+
$("#show-friends").live("click", function() {
|
81
|
+
var friendSelector = $("#jfmfs-container").data('jfmfs');
|
82
|
+
$("#selected-friends").html(friendSelector.getSelectedIds().join(', '));
|
83
|
+
});
|
84
|
+
|
85
|
+
|
86
|
+
</script>
|
87
|
+
|
88
|
+
<div id="logged-out-status" style="">
|
89
|
+
<a href="javascript:login()">Login</a>
|
90
|
+
</div>
|
91
|
+
|
92
|
+
<div>
|
93
|
+
<div id="username"></div>
|
94
|
+
<a href="#" id="show-friends" style="display:none;">Show Selected Friends</a>
|
95
|
+
<div id="selected-friends" style="height:30px"></div>
|
96
|
+
<div id="jfmfs-container"></div>
|
97
|
+
</div>
|
98
|
+
</div>
|
99
|
+
</body>
|
100
|
+
</html>
|
@@ -0,0 +1,158 @@
|
|
1
|
+
/*
|
2
|
+
Copyright 2010 Mike Brevoort http://mike.brevoort.com @mbrevoort
|
3
|
+
|
4
|
+
v1.0 jquery-facebook-multi-friend-selector
|
5
|
+
|
6
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
7
|
+
you may not use this file except in compliance with the License.
|
8
|
+
You may obtain a copy of the License at
|
9
|
+
|
10
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
11
|
+
|
12
|
+
Unless required by applicable law or agreed to in writing, software
|
13
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
14
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
15
|
+
See the License for the specific language governing permissions and
|
16
|
+
limitations under the License.
|
17
|
+
*/
|
18
|
+
|
19
|
+
#jfmfs-friend-selector input {
|
20
|
+
background-color: #fcfcfc;
|
21
|
+
border: 1px solid #ccc;
|
22
|
+
font: 11px verdana, arial, helvetica, sans-serif;
|
23
|
+
margin: 2px 0;
|
24
|
+
padding: 2px 4px;
|
25
|
+
}
|
26
|
+
.jfmfs-friend {
|
27
|
+
cursor:pointer;
|
28
|
+
display:block;
|
29
|
+
float:left;
|
30
|
+
margin:3px;
|
31
|
+
padding:2px;
|
32
|
+
width:180px;
|
33
|
+
overflow: hidden;
|
34
|
+
border: 1px solid #FFFFFF;
|
35
|
+
-moz-border-radius: 5px;
|
36
|
+
-webkit-border-radius: 5px;
|
37
|
+
-webkit-user-select:none;
|
38
|
+
-moz-user-select:none;
|
39
|
+
}
|
40
|
+
|
41
|
+
.jfmfs-friend img {
|
42
|
+
border: 1px solid #CCC;
|
43
|
+
float:left;
|
44
|
+
margin:0;
|
45
|
+
width:20px;
|
46
|
+
height:20px;
|
47
|
+
}
|
48
|
+
|
49
|
+
.jfmfs-friend.selected img {
|
50
|
+
border: 1px solid #233E75;
|
51
|
+
}
|
52
|
+
|
53
|
+
.jfmfs-friend div {
|
54
|
+
color:#111111;
|
55
|
+
font-size:11px;
|
56
|
+
overflow:hidden;
|
57
|
+
padding:2px 0 0 6px;
|
58
|
+
width:145px;
|
59
|
+
}
|
60
|
+
|
61
|
+
#jfmfs-friend-container {
|
62
|
+
overflow:scroll;
|
63
|
+
overflow-x: hidden;
|
64
|
+
-ms-overflow-x: hidden;
|
65
|
+
width:100%;
|
66
|
+
height:250px;
|
67
|
+
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
|
68
|
+
color: #333;
|
69
|
+
font-size: 12px;
|
70
|
+
}
|
71
|
+
|
72
|
+
#jfmfs-friend-selector {
|
73
|
+
width:210px;
|
74
|
+
height:226px;
|
75
|
+
}
|
76
|
+
|
77
|
+
#jfmfs-inner-header {
|
78
|
+
background:none repeat scroll 0 0 #F7F7F7;
|
79
|
+
border-bottom:1px solid #CCCCCC;
|
80
|
+
color:#3B5998;
|
81
|
+
font-size:11px;
|
82
|
+
font-weight:bold;
|
83
|
+
height:25px;
|
84
|
+
padding:2px;
|
85
|
+
}
|
86
|
+
|
87
|
+
.jfmfs-friend.selected {
|
88
|
+
background-color: #3B5998;
|
89
|
+
border: 1px solid #3B5998;
|
90
|
+
|
91
|
+
background: #6D84B4; /* for non-css3 browsers */
|
92
|
+
|
93
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#233E75', endColorstr='#6D84B4'); /* for IE */
|
94
|
+
background: -webkit-gradient(linear, left top, left bottom, from(#233E75), to(#6D84B4)); /* for webkit browsers */
|
95
|
+
background: -moz-linear-gradient(top, #233E75, #6D84B4); /* for firefox 3.6+ */
|
96
|
+
}
|
97
|
+
|
98
|
+
.jfmfs-friend.selected div {
|
99
|
+
color: #FFFFFF;
|
100
|
+
}
|
101
|
+
|
102
|
+
.hover {
|
103
|
+
background-color: #EFF2F7;
|
104
|
+
}
|
105
|
+
|
106
|
+
.hide-non-selected, .hide-filtered {
|
107
|
+
display: none;
|
108
|
+
}
|
109
|
+
|
110
|
+
div.jfmfs-button {
|
111
|
+
background:none repeat scroll 0 0 #6D84B4;
|
112
|
+
border:1px solid #3B5998;
|
113
|
+
color:white;
|
114
|
+
cursor:pointer;
|
115
|
+
margin:4px 5px 0 4px;
|
116
|
+
padding:2px 5px;
|
117
|
+
text-decoration:none;
|
118
|
+
}
|
119
|
+
|
120
|
+
#jfmfs-friend-selector a.filter-link:link, a.filter-link:visited {
|
121
|
+
color: #3B5998;
|
122
|
+
font-weight: bold;
|
123
|
+
text-decoration: none;
|
124
|
+
}
|
125
|
+
|
126
|
+
#jfmfs-friend-selector a.filter-link:hover, #jfmfs-friend-selector a.selected {
|
127
|
+
background-color: #6D84B4;
|
128
|
+
-moz-border-radius: 5px;
|
129
|
+
-webkit-border-radius: 5px;
|
130
|
+
color: #FFFFFF;
|
131
|
+
}
|
132
|
+
|
133
|
+
#jfmfs-friend-selector .filter-link {
|
134
|
+
margin:4px 5px 4px 5px;
|
135
|
+
padding:3px 5px 3px 5px;
|
136
|
+
}
|
137
|
+
|
138
|
+
#jfmfs-inner-header .filter-link {
|
139
|
+
float:right;
|
140
|
+
}
|
141
|
+
|
142
|
+
#jfmfs-inner-header div.jfmfs-button-hover {
|
143
|
+
text-decoration: underline;
|
144
|
+
}
|
145
|
+
|
146
|
+
|
147
|
+
#jfmfs-friend-filter-text {
|
148
|
+
height: 23px;
|
149
|
+
}
|
150
|
+
|
151
|
+
|
152
|
+
#jfmfs-inner-header span.jfmfs-title {
|
153
|
+
display:none;
|
154
|
+
}
|
155
|
+
|
156
|
+
#jfmfs-max-selected-wrapper, #jfmfs-filter-all, #jfmfs-filter-selected {
|
157
|
+
display:none;
|
158
|
+
}
|