Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 796 lines (624 sloc) 22.114 kB
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Hollagram by StackMob</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/json2-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/underscore-1.4.1-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/backbone-0.9.2-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.6.0-min.js"></script>
<style type="text/css">
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
/*This makes the button huge so that it can be clicked on*/
font-size:50px;
}
.hidden {
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
</style>
<script type="text/javascript">
StackMob.init({
appName: "html5rocks",
clientSubdomain: "stackmob339",
publicKey: "4ba05c7f-901f-4c03-b0d1-0ff0888cd0cf",
apiVersion: 0
});
var app = (function($){
var my = {};
var Shout = StackMob.Model.extend({
schemaName: "shout"
});
var Shouts = StackMob.Collection.extend({
model: Shout
});
var Whisper = StackMob.Model.extend({
schemaName: "whisper"
});
var Whispers = StackMob.Collection.extend({
model: Whisper
});
var HomeView = Backbone.View.extend({
el: 'body',
events: {
"click #submitShoutNav": "add",
"click #whisperNav": "whisper",
"click #loginBtn": "login",
"click #logoutBtn": "logout",
},
initialize: function() {
this.template = _.template($('#page-home').html());
this.render();
},
render: function() {
var el = this.$el
el.empty();
el.append(this.template());
new ListView({collection:my.shouts});
if(StackMob.isLoggedIn()) {
new WhisperView({collection:my.whispers});
}
new AddView({collection:my.shouts, whisperCollection : my.whispers});
new LogoutView();
return this;
},
whisper: function() {
if(StackMob.isLoggedIn()) {
my.whispers.reset();
my.whispers.fetch({async: false});
new WhisperView({collection:my.whispers});
}
return this;
},
login: function(e) {
window.location.hash = "#submitShout";
window.location.reload();
return this;
},
add: function(e) {
new AddView({collection:my.shouts, whisperCollection : my.whispers});
return this;
},
logout: function() {
var user = new StackMob.User({username: StackMob.getLoggedInUser()});
user.logout({
success: function() {
$('.three').empty();
$('#submitShoutTab').empty();
loginView = new LoginView();
this.el = loginView.el;
$('#submitShoutTab').append(this.el);
my.whispers.reset();
$('#whisperTab').empty();
$('#whisperTab').append('<a href="#submitShout" class="button" id="loginBtn">Login</a> to see your Whispers.');
}
});
return this;
}
});
var ListView = Backbone.View.extend({
tagName: 'ul',
className : 'nav-bar vertical light',
initialize: function() {
this.template = _.template($('#item-list').html());
this.render();
},
render:function (e) {
var template = this.template,
el = this.$el,
collection = this.collection;
$("#shoutTab").empty();
el.empty();
collection.each(function(shout){
el.append(template(shout.toJSON()));
});
$("#shoutTab").append(el);
return this;
}
});
var WhisperView = Backbone.View.extend({
tagName: 'ul',
className : 'nav-bar vertical light',
initialize: function() {
this.template = _.template($('#item-list').html());
this.collection = this.options.collection;
this.collection.bind('change', this.render, this);
this.render();
},
render:function (eventName) {
var template = this.template,
el = this.$el;
$("#whisperTab").empty();
el.empty();
this.collection.each(function(model){
el.append(template(model.toJSON()));
});
$("#whisperTab").append(el);
return this;
}
});
var AddView = Backbone.View.extend({
events: {
"click #addBtn": "save",
"keypress .title": "onEnter"
},
initialize: function() {
this.template = _.template($('#item-edit').html());
this.collection = this.options.collection;
this.whisperCollection = this.options.whisperCollection;
//this.collection.bind('change', this.render, this);
this.render();
},
render: function() {
var loginStatus = StackMob.isLoggedIn();
console.log('render shouts')
$('#submitShoutTab').empty();
if(!loginStatus) {
loginView = new LoginView();
this.el = loginView.el;
} else {
$(this.el).html(this.template());
}
$('#submitShoutTab').append(this.el);
return this;
},
onEnter: function(e) {
if (e.keyCode == 13) {
this.save(e);
}
},
resetAddForm: function() {
$('#addBtn').removeClass('disabled');
$('#addBtn').attr('disabled',false);
$('#description').val('');
$('#url').val('');
$('#username').val('');
},
save: function(e) {
var item = $('#addForm').serializeObject();
var that = this;
e.preventDefault();
$('.alert-box').hide();
if(item.description === ''){
$('.alert-box').show();
$('.alert-box .message').html('Missing text');
} else {
$('#addBtn').addClass('disabled');
$('#addBtn').attr('disabled',true);
if(item.username === ''){
var shout = new Shout(item);
shout.create({
success: function(model){
my.shouts.add(model);
that.resetAddForm();
}
});
} else {
var whisper = new Whisper({"description": item.description, "url" : item.url});
whisper.create({
success: function(model){
my.whispers.add(model);
model.appendAndSave("user", [item.username,StackMob.getLoggedInUser()], {
success: function(){
that.resetAddForm();
},
error: function(error) {
console.log(error);
}
})
}
});
}
}
return this;
}
});
var LoginView = Backbone.View.extend({
events: {
"click #submitLogin": "login",
"click #signupPage": "signupPage",
"keypress .title": "onEnter"
},
initialize: function() {
this.template = _.template($('#user-login').html());
this.collection = this.options.collection;
this.render();
},
render: function() {
var loginStatus = StackMob.isLoggedIn();
$('#submitShoutTab').empty();
if(!loginStatus) {
// Render Login Form
$(this.el).html(this.template());
}
$('#submitShoutTab').append(this.el);
return this;
},
signupPage: function() {
$('.alert-box').hide();
return this;
},
onEnter: function(e) {
if (e.keyCode == 13) {
this.login(e);
}
},
login: function(e) {
var collection = this.collection,
item = $('#loginForm').serializeObject();
e.preventDefault();
$('#loginBtn').addClass('disabled');
$('#loginBtn').attr('disabled',true);
$('.alert-box').hide();
var user = new StackMob.User(item);
user.login(false,{
success: function(model){
$('#submitShoutTab').empty();
$('#submitShoutTab').append(new AddView({collection:my.shouts , whisperCollection : my.whispers}).el);
new LogoutView();
},
error: function(error){
$('#loginBtn').removeClass('disabled');
$('#loginBtn').attr('disabled',false);
$('.alert-box').show();
//$('.alert-box .message').html(error.error_description);
$('.alert-box .message').html('Error logging in');
}
});
return this;
}
});
var SignupView = Backbone.View.extend({
events: {
"click #signupBtn": "signup",
"click #loginPage": "loginPage",
"keypress .title": "onEnter",
"change #photo": "saveImage"
},
initialize: function() {
this.template = _.template($('#user-signup').html());
this.collection = this.options.collection;
this.render();
this.photoBase64;
},
saveImage: function(e) {
console.log("save image");
var f = e.target.files[0];
if (f.type.match('image.*')) {
var reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = (function(e) {
console.log("load image");
var base64Content = e.target.result.substring(e.target.result.indexOf(',') + 1, e.target.result.length);
$(".latest img").attr("src", e.target.result).fadeIn();
$(".latest img").attr("data-base64", base64Content);
$(".latest img").attr("data-name", f.name);
$(".latest img").attr("data-type", f.type);
});
console.log("done image");
} else {
console.log("not valid image handle exception");
}
return this;
},
render: function() {
var loginStatus = StackMob.isLoggedIn();
$('#submitShoutTab').empty();
if(!loginStatus) {
// Render Login Form
$(this.el).html(this.template());
} else {
// Render Submit Shout
}
$('#submitShoutTab').append(this.el);
return this;
},
loginPage: function() {
$('.alert-box').hide();
return this;
},
onEnter: function(e) {
if (e.keyCode == 13) {
this.signup(e);
}
},
signup: function(e) {
var collection = this.collection,
item = $('#signupForm').serializeObject();
e.preventDefault();
$('.alert-box').hide();
if (item.username === ''){
$('.alert-box').show();
$('.alert-box .message').html('Missing username');
} else if (item.password === ''){
$('.alert-box').show();
$('.alert-box .message').html('Missing password');
} else {
$('#signupBtn').addClass('disabled');
$('#signupBtn').attr('disabled',true);
var user = new StackMob.User(item);
var base64Content = $(".latest img").attr("data-base64");
var fileName = $(".latest img").attr("data-name");
var fileType = $(".latest img").attr("data-type");
if(fileName !== undefined) {
user.setBinaryFile("pic", fileName, fileType, base64Content);
}
user.create({
success: function(model){
console.log(model.toJSON())
var user = new StackMob.User(model.toJSON());
user.login(false,{
success: function(model){
$('#submitShoutTab').empty();
$('#submitShoutTab').append(new AddView({collection:my.shouts , whisperCollection : my.whispers}).el);
new LogoutView();
// Render Add Shout Form
$('#submitShoutTab').empty();
$('#submitShoutTab').append(new AddView().el);
},
error: function(error){
$('.alert-box .message').html('Error logging in');
}
});
},
error: function(error){
$('#signupBtn').removeClass('disabled');
$('#signupBtn').attr('disabled',false);
$('.alert-box').show();
$('.alert-box .message').html(error.error_description);
}
});
}
return this;
}
});
var LogoutView = Backbone.View.extend({
tagName : 'div',
className : 'logout',
events: {
"click #logoutBtn": "logout"
},
initialize: function() {
this.template = _.template($('#user-logout').html());
this.render();
},
render: function() {
var loginStatus = StackMob.isLoggedIn();
$('.three').empty();
if(loginStatus) {
$(this.el).html(this.template());
$('.three').append(this.el);
}
return this;
},
logout: function(e) {
e.preventDefault();
var user = new StackMob.User({username: StackMob.getLoggedInUser()});
user.logout({
success: function() {
$('#submitShoutTab').empty();
loginView = new LoginView();
this.el = loginView.el;
$('#submitShoutTab').append(this.el);
new LogoutView();
if(StackMob.isLoggedIn()) {
new WhisperView({collection:my.whispers});
}
}
});
return this;
},
});
AppRouter = Backbone.Router.extend({
routes:{
"":"home",
"shout":"shout",
"whisper":"whisper",
"submitShout":"add",
"signup":"signup",
"login":"login",
"logout":"login"
},
home:function() {
new HomeView({collection:my.shouts, router:this});
},
shout:function() {
if($("#home").length == 0) {
new HomeView({collection:my.shouts, router:this});
} else {
new ListView({collection:my.shouts, router:this});
}
},
add:function() {
if($("#home").length == 0) {
new HomeView({collection:my.shouts, router:this});
} else {
new AddView({collection:my.shouts, whisperCollection : my.whispers, router:this});
}
},
whisper:function() {
if($("#home").length == 0) {
new HomeView({collection:my.shouts});
} else {
new AddView({collection:my.shouts, whisperCollection : my.whispers, router:this});
}
},
signup:function() {
if($("#home").length == 0) {
new HomeView({collection:my.shouts,router:this});;
} else {
new SignupView({router:this});
}
},
login:function() {
new LoginView({router:this});
}
});
my.initData = function() {
my.shouts = new Shouts();
my.shouts.fetch({async: false});
my.whispers = new Whispers();
if(StackMob.isLoggedIn()) {
my.whispers.fetch({async: true});
}
};
return my;
}(jQuery));
$(document).ready(function () {
app.initData();
app_router = new AppRouter();
Backbone.history.start();
$('.alert-box').hide();
$('a').on('click',function() {
$('.alert-box').hide();
});
});
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
</script>
<script type="text/template" id="page-home">
<div class="row" style="margin-top:20px;" id="home">
<div class="eight columns centered">
<div class="panel radius">
<div class="row">
<div class="five columns">
<h3>Hollagram</h3>
</div>
<div class="three columns">
</div>
</div>
<dl class="tabs mobile">
<dd class="active"><a id="shoutNav" href="#shout">Shouts</a></dd>
<dd><a href="#whisper" id="whisperNav">Whispers</a></dd>
<dd><a href="#submitShout" id="submitShoutNav">Say Something</a></dd>
</dl>
<div class="alert-box alert">
<div class="message">message</div>
<a href="" class="close">&times;</a>
</div>
<ul class="tabs-content">
<li class="active" id="shoutTab">
Loading Shouts ...
</li>
<li id="whisperTab">
<a href="#submitShout" class="button" id="loginBtn">Login</a> to see your Whispers.
</li>
<li id="submitShoutTab">
add shout
</li>
</ul>
</div>
</div>
</div>
</script>
<script type="text/template" id="item-edit">
<form method="post" id="addForm">
<fieldset style="padding-bottom:10px;">
<legend>Submit a Shout</legend>
<label>Text</label>
<textarea name="description" id="description" /></textarea>
<label>URL</label>
<input type="text" class="twelve" id="url" placeholder="url" name="url" />
<label>Whisper ...</label>
<div class="row collapse">
<div class="two mobile-one columns">
<span class="prefix">@</span>
</div>
<div class="ten mobile-three columns">
<input type="text" name="username" id="username" placeholder="username">
</div>
</div>
<input type="submit" id="addBtn" class="large button" value="submit" />
</fieldset>
</form>
</script>
<script type="text/template" id="user-login">
<form method="post" id="loginForm">
<fieldset style="padding-bottom:10px;">
<legend>Login</legend>
<label>username</label>
<input type="text" placeholder="username" name="username" autofocus="true" autocapitalize="off" autocorrect="off" />
<label>password</label>
<input type="password" placeholder="password" name="password" />
<input type="submit" id="submitLogin" class="large button" value="Login" />
<br/><br/>
Need an account? <br/><a id="signupPage" class="large button" href="#signup">Sign Up</a>
</fieldset>
</form>
</script>
<script type="text/template" id="user-signup">
<form method="post" id="signupForm">
<fieldset style="padding-bottom:10px;">
<legend>Sign-Up</legend>
<label>Profile Photo</label>
<div class="large button" style="min-width: 170px; ">
Take Picture
<input type="file" id="photo" class="fileInput hidden" accept="image/*;capture=camera">
</div>
<div class="latest">
<img>
</div>
<label>username</label>
<input type="text" placeholder="username" name="username" required="true" autofocus="true" autocapitalize="off" autocorrect="off" />
<label>password</label>
<input type="password" placeholder="password" name="password" required="true"/>
<input type="submit" id="signupBtn" class="large button" value="Sign Up" />
<br/><br/>
Have an account?
<br/>
<a id="loginPage" class="large button" href="#login">Login</a>
</fieldset>
</form>
</script>
<script type="text/template" id="user-logout">
<a href="#logout" id="logoutBtn" class="small button">Logout <%= StackMob.getLoggedInUser() %></a>
</script>
<script type="text/template" id="item-list">
<li>
<a href="<%= url %>"><%= description %></a></li>
</script>
</head>
<body>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/foundation.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.