Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
500px API
<div id="user" class="panel panel-user"></div>
<nav id="sorts" class="panel">
<ul>
<li class="active" data-sort-name="created_at">Date Uploaded</li>
<li data-sort-name="times_viewed">Views</li>
<li data-sort-name="votes_count">Likes</li>
<li data-sort-name="favorites_count">Favorites</li>
<li data-sort-name="highest_rating">Highest Pulse</li>
<!-- <li data-sort-name="sort_direction">desc/asc</li>-->
</ul>
</nav>
<nav class="panel pagination">
<ul class="pager"></ul>
</nav>
<div id="container" class="panel panel-main"></div>
<!--<nav class="panel pagination">
<ul class="pager"></ul>
</nav>-->
// Using the Prototype Pattern
console.clear();
/*
An immediately-invoked function expression (or IIFE, pronounced "iffy") is a JavaScript design pattern which produces a lexical scope using JavaScript's function scoping.
*/
(function () {
var userId, sdkKey, User, Photos, user;
userId = 678550;
sdkKey = '10e2aea1742dcba191588e8bb86d9e7d3f63cdd5';
User = function (userId, sdkKey) {
this.userId = userId;
this.sdkKey = sdkKey;
this.user = null;
this.$container = $('#user');
};
User.prototype = {
loadData: function () {
this.spinner.on();
_500px.api('/users/show', { id: this.userId}, function (response) {
if (response.success) {
this.spinner.off();
this.user = response.data.user;
this.render();
if(response.data.user.photos_count > 0) {
var photos = new Photos(this.userId);
photos.init();
}
}
else {
this.spinner.off();
console.error('Error: Can\'t Get User Data');
}
}.bind(this));
},
render: function () {
var html = '<h1>' + this.user.fullname + '</h1>';
html += '<img class="avatar" src="' + this.user.userpic_url + ' alt="">';
html += '<div class="status">';
html += '<p>Photos: ' + this.user.photos_count + '</p><p>Affection: ' + this.user.affection + '</p>';
html += '<p>Followers: ' + this.user.followers_count+ '</p><p>Friends: ' + this.user.friends_count + '</p>';
html += '</div>';
this.$container.html(html);
},
init: function () {
// init 500px
_500px.init({
sdk_key: this.sdkKey
});
this.spinner = new Spinner(this.$container);
this.loadData();
}
};
var Spinner = function ($el) {
this.$el = $el;
this.$spinner = $('<div class="spinner"></div>');
};
Spinner.prototype.on = function () {
this.$el.html(this.$spinner);
};
Spinner.prototype.off = function () {
this.$el.find(this.$spinner).remove();
};
Photos = function (userId) {
this.userId = userId;
this.feature = 'user';
this.sort = "created_at";
this.sort_direction = 'desc'; // 'asc'
this.page = 1;
this.rpp = 20; //— The number of results to return. Can not be over 100, default 20.
this.photos = null;
this.totalPages = null;
this.$container = $('#container');
this.$pager = $('.pager');
this.$sort = $('#sorts');
}
Photos.prototype = {
loadData: function () {
var terms = {
feature: this.feature,
user_id: this.userId,
sort: this.sort,
sort_direction: this.sort_direction,
page: this.page,
rpp: this.rpp //— The number of results to return. Can not be over 100, default 20.
}
//console.log('terms', terms);
this.spinner.on();
_500px.api('/photos', terms, function (response) {
if (response.success) {
this.spinner.off();
this.photos = response.data.photos;
this.totalPages = response.data.total_pages;
this.page = response.data.current_page;
this.renderPhotos();
}
else {
this.spinner.off();
console.error('Error: Can\'t Get User Pictures');
}
}.bind(this));
},
renderPhotos: function () {
var html;
var delay = 80;
this.emptyContainer();
this.renderPager();
$.each(this.photos, function (index, photo) {
window.setTimeout(function () {
html = $('<a href="http://500px.com' + photo.url + '" target="_blank"><img src="' + photo.image_url + '" alt="' + photo.description + '"></a>');
html.hide();
html.appendTo(this.$container).fadeIn();
}.bind(this), delay * index);
}.bind(this));
},
renderPager: function () {
var html = '';
var className;
for(var i = 1; i < this.totalPages; i++) {
className = (i === this.page) ? 'active' : '';
html += '<li class="' + className + '" data-page="' + i + '">' + i + '</li>'
}
this.$pager.html(html);
},
emptyContainer: function () {
this.$container.empty();
},
bindPager: function () {
this.$pager.on('click', 'li', function (e) {
this.page = $(e.currentTarget).data('page');
this.$pager.find('li').removeClass('active');
this.$sort.find('li[data-page="' + this.page + '"]').addClass('active');
this.loadData();
}.bind(this));
},
/*
'created_at' — Sort by time of upload (note: for a request of a user's favorite photos, this sort order will retrieve the list in the order that the user added photos to their favorites list.)
'rating' — Sort by rating
'highest_rating' — Sort by the highest rating the photo reached
'times_viewed' — Sort by view count
'votes_count' — Sort by votes count
'favorites_count' — Sort by favorites count
'comments_count' — Sort by comments count
'taken_at' — Sort by the original date of the image extracted from metadata (might not be available for all images)
*/
bindSort: function () {
this.emptyContainer();
this.$sort.on('click', 'li', function (e) {
this.sort = $(e.currentTarget).data('sort-name');
this.$sort.find('li').removeClass('active');
this.$sort.find('li[data-sort-name="' + this.sort + '"]').addClass('active');
this.loadData();
}.bind(this));
},
init: function () {
this.spinner = new Spinner(this.$container);
this.loadData();
this.bindPager();
this.bindSort();
}
};
new User(userId, sdkKey).init();
}).call(this);
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
html, body {
height: 100%;
background: rgb(40,40,40);
text-align: center;
font: 14px/24px 'Open Sans', 'Bree Serif', 'Source Sans Pro', Helvetica, Helvetica Neue, Arial, sans-serif;
color: #ccc;
}
nav {
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
margin: 0 .2em;
padding: 3px 10px;
background-color: #444;
color: #cfcfcf;
text-decoration: none;
cursor: pointer;
&.active {
background-color: #222;
}
}
}
}
.panel {
padding-bottom: 1em;
margin-bottom: 1em;
}
.panel-user {
@include clearfix;
border-bottom: 1px solid #444;
.avatar {
width: 140px;
height: 140px;
float: left;
margin-left: 20px;
}
.status {
text-align: left;
margin-left: 180px;
p {
margin: 0;
}
}
}
.panel-main {
min-height: 300px;
margin: 1em 0 2em;
text-align: left;
img {
opacity: 0.9;
padding: .2em .5em;
&:hover {
opacity: 1;
}
}
}
.spinner {
width: 30px;
height: 30px;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: 0 0 10px 1px;
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
color: rgba(179, 179, 179, 0.5);
border-right-color: transparent;
border-top-color: transparent;
-webkit-animation: spin-right 1s linear infinite;
margin: 50px auto 0;
&:after {
display: block;
width: 13px;
height: 13px;
margin: 3px;
border: 5px solid rgba(255, 255, 255, 0.5);
content: " ";
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
}
}
@-webkit-keyframes spin-right {
from {
-webkit-transform: rotate(0deg);
opacity: 0.2;
}
50% {
-webkit-transform: rotate(180deg);
opacity: 1.0;
}
to {
-webkit-transform: rotate(360deg);
opacity: 0.2;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment