Skip to content
Browse files

code clean up

  • Loading branch information...
1 parent 01aff48 commit 9970ec0b82d7bcf16673bb44a997f85870328f9c @SidneyAllen committed
Showing with 1,077 additions and 286 deletions.
  1. +829 −0 index-bak.html
  2. +248 −286 index.html
View
829 index-bak.html
@@ -0,0 +1,829 @@
+<!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 (eventName) {
+ 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.render();
+ },
+
+ render:function (eventName) {
+ var template = this.template,
+ el = this.$el,
+ collection = this.collection;
+
+ $("#whisperTab").empty();
+ el.empty();
+
+ 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.render();
+ },
+
+ render: function() {
+ var loginStatus = StackMob.isLoggedIn();
+
+ $('#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);
+ }
+ },
+
+
+ save: function(e) {
+ var item = $('#addForm').serializeObject();
+
+ 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);
+
+ window.location.href = '#shout';
+ window.location.reload();
+ }
+ });
+ } 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(){
+
+ window.location.href = '#whisper';
+ window.location.reload();
+
+ },
+ 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;
+ },
+
+ onEnter: function(e) {
+ if (e.keyCode == 13) {
+ this.save(e);
+ }
+ },
+
+ 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;
+ },
+
+ onEnter: function(e) {
+ if (e.keyCode == 13) {
+ this.save(e);
+ }
+ },
+
+ save: function(e) {
+ var collection = this.collection,
+ item = $('#addForm').serializeObject();
+
+ e.preventDefault();
+
+ var shout = new Shout(item);
+ shout.create({
+ success: function(model){
+ collection.add(model);
+ }
+ });
+
+ 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() {
+ console.log('clicked');
+ $('.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" /></textarea>
+ <label>URL</label>
+ <input type="text" class="twelve" 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" 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>
View
534 index.html
@@ -48,36 +48,35 @@
-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
- });
+ StackMob.init({
+ appName: "html5rocks",
+ clientSubdomain: "stackmob339",
+ publicKey: "4ba05c7f-901f-4c03-b0d1-0ff0888cd0cf",
+ apiVersion: 0
+ });
- var app = (function($){
+ var app = (function($){
- var my = {};
+ var my = {};
- var Shout = StackMob.Model.extend({
- schemaName: "shout"
- });
+ var Shout = StackMob.Model.extend({
+ schemaName: "shout"
+ });
- var Shouts = StackMob.Collection.extend({
- model: Shout
- });
+ var Shouts = StackMob.Collection.extend({
+ model: Shout
+ });
- var Whisper = StackMob.Model.extend({
- schemaName: "whisper"
- });
+ var Whisper = StackMob.Model.extend({
+ schemaName: "whisper"
+ });
- var Whispers = StackMob.Collection.extend({
- model: Whisper
- });
+ var Whispers = StackMob.Collection.extend({
+ model: Whisper
+ });
var HomeView = Backbone.View.extend({
el: 'body',
@@ -90,7 +89,6 @@
initialize: function() {
this.template = _.template($('#page-home').html());
- this.router = this.options.router;
this.render();
},
@@ -132,9 +130,7 @@
return this;
},
-
logout: function() {
-
var user = new StackMob.User({username: StackMob.getLoggedInUser()});
user.logout({
success: function() {
@@ -149,7 +145,6 @@
$('#whisperTab').empty();
$('#whisperTab').append('<a href="#submitShout" class="button" id="loginBtn">Login</a> to see your Whispers.');
}
-
});
return this;
@@ -157,8 +152,7 @@
});
- var ListView = Backbone.View.extend({
-
+ var ListView = Backbone.View.extend({
tagName: 'ul',
className : 'nav-bar vertical light',
@@ -167,7 +161,7 @@
this.render();
},
- render:function (eventName) {
+ render:function (e) {
var template = this.template,
el = this.$el,
collection = this.collection;
@@ -186,32 +180,30 @@
});
- var WhisperView = Backbone.View.extend({
-
+ 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,
- collection = this.collection;
+ el = this.$el;
$("#whisperTab").empty();
el.empty();
- collection.each(function(model){
+ this.collection.each(function(model){
el.append(template(model.toJSON()));
});
-
$("#whisperTab").append(el);
-
-
+
return this;
}
@@ -228,12 +220,13 @@
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) {
@@ -253,10 +246,18 @@
}
},
+ 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();
@@ -271,12 +272,10 @@
if(item.username === ''){
var shout = new Shout(item);
shout.create({
- success: function(model){
- my.shouts.add(model);
-
- window.location.href = '#shout';
- window.location.reload();
- }
+ success: function(model){
+ my.shouts.add(model);
+ that.resetAddForm();
+ }
});
} else {
@@ -287,10 +286,7 @@
model.appendAndSave("user", [item.username,StackMob.getLoggedInUser()], {
success: function(){
-
- window.location.href = '#whisper';
- window.location.reload();
-
+ that.resetAddForm();
},
error: function(error) {
console.log(error);
@@ -376,141 +372,139 @@
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);
+ var SignupView = Backbone.View.extend({
+ events: {
+ "click #signupBtn": "signup",
+ "click #loginPage": "loginPage",
+ "keypress .title": "onEnter",
+ "change #photo": "saveImage"
+ },
- 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);
+ initialize: function() {
+ this.template = _.template($('#user-signup').html());
+ this.collection = this.options.collection;
+ this.render();
+ this.photoBase64;
- });
- console.log("done image");
- } else {
- console.log("not valid image handle exception");
- }
-
- return this;
- },
+ },
- render: function() {
- var loginStatus = StackMob.isLoggedIn();
-
- $('#submitShoutTab').empty();
+ saveImage: function(e) {
+ console.log("save image");
+
- if(!loginStatus) {
- // Render Login Form
- $(this.el).html(this.template());
- } else {
- // Render Submit Shout
- }
+ var f = e.target.files[0];
+ if (f.type.match('image.*')) {
- $('#submitShoutTab').append(this.el);
-
- return this;
- },
+ 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;
+ },
- loginPage: function() {
- $('.alert-box').hide();
- return this;
- },
+ render: function() {
+ var loginStatus = StackMob.isLoggedIn();
+
+ $('#submitShoutTab').empty();
- onEnter: function(e) {
- if (e.keyCode == 13) {
- this.signup(e);
- }
- },
+ if(!loginStatus) {
+ // Render Login Form
+ $(this.el).html(this.template());
+ } else {
+ // Render Submit Shout
+ }
+
+ $('#submitShoutTab').append(this.el);
+
+ return this;
+ },
- signup: function(e) {
- var collection = this.collection,
- item = $('#signupForm').serializeObject();
-
- e.preventDefault();
- $('.alert-box').hide();
+ loginPage: function() {
+ $('.alert-box').hide();
+ return this;
+ },
- 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);
+ onEnter: function(e) {
+ if (e.keyCode == 13) {
+ this.signup(e);
+ }
+ },
- 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);
- }
+ signup: function(e) {
+ var collection = this.collection,
+ item = $('#signupForm').serializeObject();
+
+ e.preventDefault();
+ $('.alert-box').hide();
- user.create({
- success: function(model){
- console.log(model.toJSON())
- var user = new StackMob.User(model.toJSON());
- user.login(false,{
- success: function(model){
- console.log(my.shouts.toJSON())
- $('#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);
- }
- });
- }
+ 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");
- return this;
- }
- });
+ 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',
@@ -528,7 +522,6 @@
render: function() {
var loginStatus = StackMob.isLoggedIn();
-
$('.three').empty();
if(loginStatus) {
@@ -539,12 +532,6 @@
return this;
},
- onEnter: function(e) {
- if (e.keyCode == 13) {
- this.save(e);
- }
- },
-
logout: function(e) {
e.preventDefault();
var user = new StackMob.User({username: StackMob.getLoggedInUser()});
@@ -571,132 +558,107 @@
return this;
},
- onEnter: function(e) {
- if (e.keyCode == 13) {
- this.save(e);
- }
- },
-
- save: function(e) {
- var collection = this.collection,
- item = $('#addForm').serializeObject();
-
- e.preventDefault();
-
- var shout = new Shout(item);
- shout.create({
- success: function(model){
- collection.add(model);
- }
- });
-
- return this;
- }
});
- AppRouter = Backbone.Router.extend({
+ 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});
-
- },
+ routes:{
+ "":"home",
+ "shout":"shout",
+ "whisper":"whisper",
+ "submitShout":"add",
+ "signup":"signup",
+ "login":"login",
+ "logout":"login"
+ },
- shout:function() {
- if($("#home").length == 0) {
- new HomeView({collection:my.shouts, router:this});
- } else {
- new ListView({collection:my.shouts, router:this});
- }
-
- },
+ home:function() {
+ new HomeView({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});
- }
- },
+ shout:function() {
+ if($("#home").length == 0) {
+ new HomeView({collection:my.shouts, router:this});
+ } else {
+ new ListView({collection:my.shouts, router:this});
+ }
+
+ },
- login:function() {
- new LoginView({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});
+ }
+ },
- my.initData = function() {
- my.shouts = new Shouts();
- my.shouts.fetch({async: false});
-
- my.whispers = new Whispers();
- if(StackMob.isLoggedIn()) {
- my.whispers.fetch({async: true});
+ 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;
+ return my;
- }(jQuery));
+ }(jQuery));
- $(document).ready(function () {
- app.initData();
+ $(document).ready(function () {
+ app.initData();
- app_router = new AppRouter();
- Backbone.history.start();
- $('.alert-box').hide();
+ app_router = new AppRouter();
+ Backbone.history.start();
+ $('.alert-box').hide();
- $('a').on('click',function() {
- console.log('clicked');
- $('.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;
- };
+ });
+
+ $.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>
@@ -748,9 +710,9 @@
<fieldset style="padding-bottom:10px;">
<legend>Submit a Shout</legend>
<label>Text</label>
- <textarea name="description" /></textarea>
+ <textarea name="description" id="description" /></textarea>
<label>URL</label>
- <input type="text" class="twelve" placeholder="url" name="url" />
+ <input type="text" class="twelve" id="url" placeholder="url" name="url" />
<label>Whisper ...</label>
@@ -759,7 +721,7 @@
<span class="prefix">@</span>
</div>
<div class="ten mobile-three columns">
- <input type="text" name="username" placeholder="username">
+ <input type="text" name="username" id="username" placeholder="username">
</div>
</div>

0 comments on commit 9970ec0

Please sign in to comment.
Something went wrong with that request. Please try again.