Skip to content

Commit

Permalink
Reorganise code to be more maintainable.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Connorhd
Connorhd committed Feb 13, 2012
1 parent e38deed commit d86b738
Show file tree
Hide file tree
Showing 7 changed files with 383 additions and 376 deletions.
384 changes: 8 additions & 376 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,381 +2,13 @@
<html>
<head>
<title>Forge Web Test</title>
<script src="jquery.min.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="date.js"></script>

<script>
var config = {
fbAppId: '265837806823447',
parseAppId: 'QD9yEg6rZdAtirdSn02QQDFJp57pDnLfmwHqP4xa',
parseRestKey: 'ZstsmIqn3BoShHopKGTSVdOPv7TrNk1NrjQjnb1P'
};
var state = {
loggedIn: false,
parseSession: null,
parseUserId: null,
fbAccessToken: null,
fbId: null
};

var photolog = {
types: {},
views: {},
models: {},
collections: {}
};

var loadCount = 0;
var loading = function () {
loadCount++;
$('#loading').show();
}
var loaded = function () {
loadCount--;
if (loadCount < 1) {
$('#loading').hide();
}
}

photolog.types.Router = Backbone.Router.extend({
/*routes: {
"": "home",
"login": "login",
"upload": "upload",
"update": "update"
},*/
home: function() {
},
login: function () {
if (state.loggedIn) {
return;
}
var parseLogin = function () {
forge.request.ajax({
url: "https://api.parse.com/1/login",
headers: {
"X-Parse-Application-Id": config.parseAppId,
"X-Parse-REST-API-Key": config.parseRestKey
},
type: "GET",
dataType: 'json',
data: {
username: state.fbId,
password: state.fbId
},
success: function (data) {
// Logged in
if (data.sessionToken) {
state.parseSession = data.sessionToken;
state.parseUserId = data.objectId;
state.loggedIn = true;
photolog.router.update();
$('#login').text("Logged in.");
$('#login').removeClass('button').addClass('text');
} else {
alert("Parse login error");
}
loaded();
}, error: function (e) {
// Try to register
forge.request.ajax({
url: "https://api.parse.com/1/users",
headers: {
"X-Parse-Application-Id": config.parseAppId,
"X-Parse-REST-API-Key": config.parseRestKey
},
type: "POST",
contentType: "application/json",
dataType: 'json',
data: JSON.stringify({
username: state.fbId,
password: state.fbId
}),
success: function (data) {
if (data.sessionToken) {
state.parseSession = data.sessionToken;
state.parseUserId = data.objectId;
state.loggedIn = true;
photolog.router.update();
$('#login').text("Logged in.");
$('#login').removeClass('button').addClass('text');
} else {
alert("Parse registration error");
}
loaded();
}, error: function (e) {
alert("Parse registration error");
loaded();
}
});
}
});
}

if (forge.is.mobile()) {
forge.tabs.openWithOptions({
url: 'https://www.facebook.com/dialog/oauth?client_id='+config.fbAppId+'&redirect_uri=fb'+config.fbAppId+'://authorize&display=touch&response_type=token',
pattern: 'fb'+config.fbAppId+'://authorize/*'
}, function (data) {
// we are now at a URL matching the pattern given above, i.e. fb319333711443283://authorize/...
// now we can pull out the Facebook authentication data from the URL query string
var params = {}, queryString = data.url.substring(data.url.indexOf('#')+1),
regex = /([^&=]+)=([^&]*)/g, m;
while (m = regex.exec(queryString)) {
params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

loading();
// all authenticated - grab data for the current user
forge.request.ajax({
url: 'https://graph.facebook.com/me?access_token='+params['access_token'],
dataType: 'json',
success: function (data) {
if (data.id) {
state.fbAccessToken = params['access_token'];
state.fbId = data.id;
// Parse login
parseLogin();
} else {
alert("Facebook login error");
loaded();
}
}, error: function () {
loaded();
}
});
});
} else {
FB.login(function(response) {
if (response.authResponse) {
state.fbId = response.authResponse.userID;
parseLogin();
} else {
alert('User cancelled login or did not fully authorize.');
loaded();
}
});
}
},
upload: function () {
if (!forge.is.mobile()) {
alert("Please use the mobile app to upload photos");
return;
}
if (!state.loggedIn) {
alert("Please login to upload photos");
return;
}
forge.file.getImage({width: 500, height: 500}, function (file) {
loading();
forge.request.ajax({
url: "https://api.parse.com/1/files/"+(new Date()).getTime()+".jpg",
headers: {
"X-Parse-Application-Id": config.parseAppId,
"X-Parse-REST-API-Key": config.parseRestKey
},
type: "POST",
files: [file],
fileUploadMethod: 'raw',
dataType: 'json',
success: function (data) {
var acl = {
"*": {read: true}
};
acl[state.parseUserId] = {"read": true, "write": true};

forge.request.ajax({
url: "https://api.parse.com/1/classes/Photo",
headers: {
"X-Parse-Application-Id": config.parseAppId,
"X-Parse-REST-API-Key": config.parseRestKey
},
type: "POST",
contentType: "application/json",
dataType: 'json',
data: JSON.stringify({
file: {
"__type": "File",
name: data.name
},
user: {
"__type": "Pointer",
className: "_User",
objectId: state.parseUserId
},
"ACL": acl
}),
success: function (file) {
loaded();
photolog.photos.add([{
id: file.objectId,
url: data.url,
timestamp: Date.parse(file.createdAt.replace('T', ' ').replace('Z','').substring(0, file.createdAt.indexOf('.'))).getTime(),
user: state.parseUserId
}]);
}, error: function () {
loaded();
}
});
}, error: function () {
loaded();
}
});
});
},
update: function () {
loading();
forge.request.ajax({
url: "https://api.parse.com/1/classes/Photo",
headers: {
"X-Parse-Application-Id": config.parseAppId,
"X-Parse-REST-API-Key": config.parseRestKey,
"X-Parse-Session-Token": state.parseSession || ""
},
type: "GET",
dataType: 'json',
data: {
"limit": 10,
"order": "-createdAt"
},
success: function (data) {
data.results.forEach(function (file) {
if (!photolog.photos.get(file.objectId)) {
photolog.photos.add([{
id: file.objectId,
url: file.file.url,
timestamp: Date.parse(file.createdAt.replace('T', ' ').replace('Z','').substring(0, file.createdAt.indexOf('.'))).getTime(),
user: file.user.objectId
}]);
}
})
loaded();
},
error: function () {
loaded();
}
});
}
});
photolog.router = new photolog.types.Router();

photolog.models.Photo = Backbone.Model.extend({
});

photolog.collections.Photos = Backbone.Collection.extend({
model: photolog.models.Photo,
comparator: function (model) {
return -model.get('timestamp');
}
});
photolog.photos = new photolog.collections.Photos();
photolog.photos.on('add', function (model) {
var photo = new photolog.views.Photo({
model: model
});

var index = photolog.photos.indexOf(model);
loading();
if (index == 0) {
$('#header').after(photo.render().el);
} else {
$(photolog.photos.at(index-1).get('el')).after(photo.render().el);
}
});



photolog.views.Photo = Backbone.View.extend({
tagName: "div",
className: "photo",

render: function() {
var el = this.el;
this.model.set('el', el);
$(el).hide();
var preloadImage = new Image();
preloadImage.onload = function () {
var square, heightOffset, widthOffset;
if (preloadImage.height > preloadImage.width) {
square = preloadImage.width;
heightOffset = (preloadImage.height - square) / 2;
widthOffset = 0;
} else {
square = preloadImage.height;
widthOffset = (preloadImage.width - square) / 2;
heightOffset = 0;
}
var target = 220;
var ratio = target/square;
$(el).html('<div style="display: inline-block; height: '+square*ratio+'px; width: '+square*ratio+'px; overflow: hidden"><img style="width: '+preloadImage.width*ratio+'px; height: '+preloadImage.height*ratio+'px; margin-left: -'+widthOffset*ratio+'px; margin-top: -'+heightOffset*ratio+'px" src="'+preloadImage.src+'"></div>');
$(el).fadeIn('slow');
loaded();
}
preloadImage.src = this.model.get('url');

return this;
}
});

$(function () {
if (!forge.is.mobile()) {
FB.init({
appId : config.fbAppId,
status : true,
cookie : true,
xfbml : false,
oauth : true,
});
}
//Backbone.history.start()
photolog.router.home();
photolog.router.update();
setInterval(function () {
photolog.router.update();
}, 10000);
});

</script>
<style>
body {
text-align: center;
background-image: url('img/stripe.png');
font-family: "Helvetica", "Corbel", "Arial", sans-serif;
color: black;
}
#photos {
max-width: 580px;
margin: auto;
text-align: left;
}
div.photo {
overflow: hidden;
vertical-align: middle;
text-align: center;
box-shadow: 2px 2px 8px 3px #aaa;
-webkit-box-shadow: 2px 2px 8px 3px #aaa;
padding: 15px 15px 30px;
display: inline-block;
background-color: #ccc;
margin: 20px;
}
div.button {
font-size: 1.2em;
padding: 10px;
margin: 20px 10px;
border: 1px solid #444;
border-radius: 5px;
background-color: #888;
}
div.text {
font-size: 1.2em;
padding: 11px;
margin: 20px 10px;
}
</style>
<script src="lib/date.js"></script>
<script src="photolog.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fb-root"></div>
Expand All @@ -385,8 +17,8 @@
<div id="header" class="photo">
<div style="width: 220px; height: 220px;">
<div style="font-size: 2em;">Photolog</div>
<div class="button" id="login" onclick="photolog.router.login();">Login</div>
<div class="button" onclick="photolog.router.upload();">Upload</div>
<div class="button" id="login" onclick="photolog.util.login();">Login</div>
<div class="button" onclick="photolog.util.upload();">Upload</div>
<div class="text" id="loading">Loading...</div>
</div>
</div>
Expand Down
0 backbone.js → lib/backbone.js
View file
File renamed without changes.
0 date.js → lib/date.js
View file
File renamed without changes.
0 jquery.min.js → lib/jquery.min.js
View file
File renamed without changes.
0 underscore.js → lib/underscore.js
View file
File renamed without changes.
Loading

0 comments on commit d86b738

Please sign in to comment.