Skip to content

Commit

Permalink
Update sdk version. Remove friend picture lookup
Browse files Browse the repository at this point in the history
  • Loading branch information
@cshold
cshold committed Aug 4, 2015
1 parent 13026d4 commit 6b920fe
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 71 deletions.
10 changes: 4 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Just edit `example.js` and set your Facebook `appId`, then set the 'Website' fie

### The fun stuff (using the plugin)

1 - Make sure your user has authenticated your Facebook app. `user_photos` is required. `friends_photos` is required if you would like to browse a friend's photos. These are set in `example.js`.
1 - Make sure your user has authenticated your Facebook app. `user_photos` is required. This is set in `example.js`.

2 - Initialise the plugin. Here you can set options like toggling debug messages, your preferred classnames, etc.

Expand All @@ -56,15 +56,13 @@ Just edit `example.js` and set your Facebook `appId`, then set the 'Website' fie
autoDeselection : true
});

4 - Display the plugin instance when you need it. The plugin will automatically load the Facebook photos of the logged in user, or attempt to load the photos of the friend ID passed to the function.
4 - Display the plugin instance when you need it. The plugin will automatically load the Facebook photos of the logged in user.

$(".photoSelect").click(function (e) {
e.preventDefault();
id = null;
if ( $(this).attr('data-id') ) id = $(this).attr('data-id');
fbphotoSelect(id);
fbphotoSelect();
});

### License

[MIT Licensed](http://en.wikipedia.org/wiki/MIT_License)
[MIT Licensed](http://en.wikipedia.org/wiki/MIT_License)
48 changes: 23 additions & 25 deletions csphotoselector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,16 +85,14 @@ var CSPhotoSelector = (function(module, $) {

albums = [];
for (var i=0; i<input.length; i++){
if (input[i].count){
albums[albums.length] = input[i];
}
albums[albums.length] = input[i];
}
};

getAlbums = function() {
return albums;
};

setPhotos = function(input) {
var i, len;
if (!input || input.length === 0) {
Expand All @@ -103,7 +101,7 @@ var CSPhotoSelector = (function(module, $) {
input = Array.prototype.slice.call(input);
photos = input;
};

getPhotos = function() {
return photos;
};
Expand All @@ -121,7 +119,7 @@ var CSPhotoSelector = (function(module, $) {
}
return null;
};

getPhotoById = function(id) {
var i, len;
id = id.toString();
Expand Down Expand Up @@ -204,14 +202,14 @@ var CSPhotoSelector = (function(module, $) {
}
}
};

showPhotoSelector = function(callback, albumId) {
var i, len;
log('CSPhotoSelector - show Photos');

// show loader until we get a response
$loader.show();

if (!$photos || albumId) {
return buildPhotoSelector(function() {
showPhotoSelector(callback);
Expand All @@ -238,11 +236,11 @@ var CSPhotoSelector = (function(module, $) {
}
}
};

hidePhotoSelector = function() {
$photosWrapper.removeClass('CSPhoto_container_active');
};

hideAlbumSelector = function() {
unbindEvents();
$container.fadeOut(100);
Expand All @@ -251,7 +249,7 @@ var CSPhotoSelector = (function(module, $) {
getselectedAlbumIds = function() {
return selectedAlbumIds;
};

getselectedPhotoIds = function() {
return selectedPhotoIds;
};
Expand Down Expand Up @@ -303,7 +301,7 @@ var CSPhotoSelector = (function(module, $) {
hideAlbumSelector();
if (typeof instanceSettings.callbackSubmit === "function") { instanceSettings.callbackSubmit(selectedPhotoIds); }
});

$backToAlbums.bind('click', function(e) {
e.preventDefault();
$pagination.show();
Expand Down Expand Up @@ -360,7 +358,7 @@ var CSPhotoSelector = (function(module, $) {
selectAlbum($(this));
});
};

// Set the contents of the photos container
updatePhotosContainer = function(pageNumber) {
var firstIndex, lastIndex;
Expand Down Expand Up @@ -435,7 +433,7 @@ var CSPhotoSelector = (function(module, $) {
if (typeof instanceSettings.callbackMaxSelection === "function") { instanceSettings.callbackMaxSelection(); }
}
};

selectPhotos = function($photo) {
var photoId, i, len, removedId;
photoId = $photo.attr('data-id');
Expand Down Expand Up @@ -481,7 +479,7 @@ var CSPhotoSelector = (function(module, $) {
if (selectedPhotoIds.length === instanceSettings.maxSelection) {
if (typeof instanceSettings.callbackMaxSelection === "function") { instanceSettings.callbackMaxSelection(); }
}

// log(selectedPhotoIds);
};

Expand Down Expand Up @@ -512,7 +510,7 @@ var CSPhotoSelector = (function(module, $) {
}
return $("");
};

$getPhotoById = function(id) {
var i, len;
id = id.toString();
Expand All @@ -523,7 +521,7 @@ var CSPhotoSelector = (function(module, $) {
}
return $("");
};

/**
* Load the Facebook albums and build the markup
*/
Expand Down Expand Up @@ -581,7 +579,7 @@ var CSPhotoSelector = (function(module, $) {
'</a>';
};
};

/**
* Load the Facebook photos and build the markup
*/
Expand All @@ -598,7 +596,7 @@ var CSPhotoSelector = (function(module, $) {
buildSecondMarkup();
// Call the callback
if (typeof callback === 'function') {
callback();
callback();
// hide the loader and pagination
$loader.hide();
$pagination.hide();
Expand All @@ -610,23 +608,23 @@ var CSPhotoSelector = (function(module, $) {
return false;
}
});

// Build the markup of the photo selector
buildSecondMarkup = function() {
//loop through photos
var i, len, html = '';
// if photos is empty, we need to try again

if (!photos) {
buildPhotoSelector(null, albumId);
}
for (i = 0, len = photos.length; i < len; i += 1) {
html += buildPhotoMarkup(photos[i]);
}

$photos = $(html);
};

buildPhotoMarkup = function(photo) {
return '<a href="#" class="CSPhotoSelector_photo CSPhotoSelector_clearfix" data-id="' + photo.id + '">' +
'<span><img src="' + photo.picture + '" alt="" class="CSPhotoSelector_photoAvatar" /></span>' +
Expand Down
26 changes: 12 additions & 14 deletions example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ $(document).ready(function () {
var selector, logActivity, callbackAlbumSelected, callbackPhotoUnselected, callbackSubmit;
var buttonOK = $('#CSPhotoSelector_buttonOK');
var o = this;


/* --------------------------------------------------------------------
* Photo selector functions
* ----------------------------------------------------------------- */

fbphotoSelect = function(id) {
// if no user/friend id is sent, default to current user
if (!id) id = 'me';

callbackAlbumSelected = function(albumId) {
var album, name;
album = CSPhotoSelector.getAlbumById(albumId);
Expand Down Expand Up @@ -66,12 +66,12 @@ $(document).ready(function () {
selector.reset();
selector.showAlbumSelector(id);
}


/* --------------------------------------------------------------------
* Click events
* ----------------------------------------------------------------- */

$("#btnLogin").click(function (e) {
e.preventDefault();
FB.login(function (response) {
Expand All @@ -80,23 +80,21 @@ $(document).ready(function () {
} else {
$("#login-status").html("Not logged in");
}
}, {scope:'user_photos, friends_photos'});
}, {scope:'user_photos'});
});

$("#btnLogout").click(function (e) {
e.preventDefault();
FB.logout();
$("#login-status").html("Not logged in");
});

$(".photoSelect").click(function (e) {
e.preventDefault();
id = null;
if ( $(this).attr('data-id') ) id = $(this).attr('data-id');
fbphotoSelect(id);
fbphotoSelect();
});

logActivity = function (message) {
$("#results").append('<div>' + message + '</div>');
};
});
});
52 changes: 26 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ <h3>Example</h3>
<ul>
<li>Status: <span id="login-status">Not logged in</span> | <a href="#" id="btnLogin">Login</a> | <a href="#" id="btnLogout">Log out</a></li>
<li><a href="#" class="photoSelect">Select from your photos</a> (You'll need to log in first)</li>
<li><a href="#" class="photoSelect" data-id="100002194886179">Select a friend's photo</a> (See below for instructions)</li>
</ul>
<div id="results">
<p>ACTIVITY LOG</p>
Expand All @@ -40,16 +39,12 @@ <h3>Example</h3>
<h3>Features</h3>
<ul>
<li>Browse through albums to find photos</li>
<li>Defaults to searching the current user's photos,<br>but can search through friends. See <strong>Search your friend's photos</strong> below.</li>
<li>API calls only made when an album is selected.</li>
<li>Max 500 photos per album.</li>
<li>Search the current user's photos</li>
<li>API calls only made when an album is selected</li>
<li>Max 500 photos per album</li>
<li>Facebook-like styling</li>
</ul>

<h4>Search your friend's photos</h4>
<p>Simply pass a friend's ID to <code>fbphotoSelect()</code> via the <code>data-id</code> attribute on the link. If left blank, the current user's photos are selected.</p>
<p>Some users have their photos hidden no matter what permissions you ask for, so you may be faced with a brick wall.</p>


<div id="thesedays">
<h4>This is based on the Friend Selector plugin created by <a href="http://www.thesedays.com/">These Days</a>. Their plugin can be found on <a href="https://github.com/thesedays/Facebook-friend-selector">GitHub</a>.</h4>
Expand Down Expand Up @@ -118,24 +113,29 @@ <h4>This is based on the Friend Selector plugin created by <a href="http://www.t

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: '203534596466008', cookie: true, status: true, xfbml: true, oauth: true });

FB.getLoginStatus(function(response) {
if (response.authResponse) {
$("#login-status").html("Logged in");
} else {
$("#login-status").html("Not logged in");
}
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
window.fbAsyncInit = function() {
FB.init({
appId : '203534596466008',
xfbml : true,
version : 'v2.4'
});

FB.getLoginStatus(function(response) {
if (response.authResponse) {
$("#login-status").html("Logged in");
} else {
$("#login-status").html("Not logged in");
}
});
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script src="csphotoselector.js"></script>
<script src="example.js"></script>
Expand Down

0 comments on commit 6b920fe

Please sign in to comment.