Skip to content

Commit

Permalink
Step3
Browse files Browse the repository at this point in the history
  • Loading branch information
@francois06
francois06 committed Mar 22, 2013
1 parent eb36157 commit f355b6c
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 164 deletions.
45 changes: 15 additions & 30 deletions app/index.html
View file
Expand Up @@ -39,47 +39,32 @@ <h1 class="Three-Dee">Gravity Blog</h1>
<button id="new-article"class="btn" type="button">Submit</button>
</div>
<button class="btn" id="add-article" type="button"><i class="icon-plus-sign"></i></button>
<button class="btn" id="toggle-debug" type="button"><i class="icon-screenshot"></i></button>
</header>

</div>

<div id="blog">
<canvas id="debug-canvas" width="560" height="0">
</canvas>
</div>

</div>

<!-- Template -->
<script type="text/template" id="article-template">

<label><%- title %></label>
<p><%- content %></p>
<div class="tools edit">
<input class="edit-title" type="text" value="<%- title %>" />
<textarea class="edit-content" rows="3" type="text" ><%- content %></textarea>
<button class="btn edit-article" type="button">modify</button>
</div>

</script>
<!-- build:js scripts/vendor.js -->
<script src="components/jquery/jquery.min.js"></script>
<script src="components/underscore/underscore-min.js"></script>
<script src="components/backbone/backbone-min.js"></script>
<!-- endbuild -->

<!-- build:js scripts/scripts.js -->
<script src="components/jquery/jquery.min.js"></script>
<script src="components/underscore/underscore-min.js"></script>
<script src="components/backbone/backbone-min.js"></script>
<script src="components/backbone-gravity/lib/Box2dWeb-2.1.a.3.min.js"></script>
<script src="components/backbone-gravity/helpers/box2d-helper.js"></script>
<script src="components/backbone-gravity/helpers/backbone-gravity.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/views/application-view.js"></script>
<script src="scripts/models/application-model.js"></script>
<script src="scripts/collections/application-collection.js"></script>
<script src="scripts/views/article-view.js"></script>
<script src="scripts/models/article-model.js"></script>
<script src="scripts/collections/article-collection.js"></script>
<script src="scripts/routes/application-router.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="scripts/routes/application-router.js"></script>
<script src="scripts/views/application-view.js"></script>
<script src="scripts/models/application-model.js"></script>
<script src="scripts/collections/application-collection.js"></script>
<script src="scripts/models/article-model.js"></script>
<script src="scripts/collections/article-collection.js"></script>
<script src="scripts/views/article-view.js"></script>
<!-- endbuild -->

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
Expand Down
2 changes: 0 additions & 2 deletions app/scripts/collections/article-collection.js
View file
Expand Up @@ -2,6 +2,4 @@ gravityBlog.Collections.ArticleCollection = Backbone.Collection.extend({

model: gravityBlog.Models.ArticleModel,

url: 'http://localhost:1337/article/'

});
4 changes: 1 addition & 3 deletions app/scripts/main.js
View file
Expand Up @@ -9,12 +9,10 @@ window.gravityBlog = {
console.log('| Gravity Blog Initialisation');

var articleList = new gravityBlog.Collections.ArticleCollection();
articleList.fetch();

var view = gravityBlog.view = new gravityBlog.Views.applicationView({
gravityBlog.view = new gravityBlog.Views.applicationView({
collection : articleList,
});
view.debug();
}
};

Expand Down
70 changes: 6 additions & 64 deletions app/scripts/views/application-view.js
View file
@@ -1,24 +1,15 @@
'use strict';
gravityBlog.Views.applicationView = BackboneGravity.Views.WorldView.extend({
gravityBlog.Views.applicationView = Backbone.View.extend({

el: $('#container'),

events: {
'click #new-article': 'createArticle',
'click #add-article': 'showTools',
'click #toggle-debug': 'debug'
'click #add-article': 'showTools'
},

initialize: function() {
BackboneGravity.Views.WorldView.prototype.initialize.call(this);
this.setDebugSprite(document.getElementById('debug-canvas'));
this.addCollectionListener(this.collection);
},

addCollectionListener: function(collection) {
collection.on('add', this.addOne, this);
collection.on('remove', this.removeOne, this);
collection.on('reset', this.reset, this);
this.collection.on('add',this.addOne, this);
},

addOne: function(article) {
Expand All @@ -27,61 +18,12 @@ gravityBlog.Views.applicationView = BackboneGravity.Views.WorldView.extend({
});
//on ajoute la vue au DOM
this.$el.find('#blog').prepend(view.render().el);
this.$el.height(this.$el.height() + view.$el.height());
if (this.debugCanvas) {
this.debugCanvas.height = this.$el.height();
}
this.bodies.ground.setPosition({y: this.$el.height()});
this.createBody(view, {
x: view.$el.width() / 2,
y: view.$el.height() / 2,
width: view.$el.outerWidth(),
height: view.$el.outerHeight(),
angle: Math.random() * 1.5 - 0.75
});
return false;
},

remove: function() {
},

reset: function() {
this.createBody({
cid: 'ground',
width: $(window).width() * 2,
height: 10,
x: 560 / 2,
y: this.$el.height(),
angle: 0,
dynamic: false
});
var self = this;
function loop(i) {
if (!self.collection.models[i]) {
return;
}
self.addOne(self.collection.models[i]);
i++;
window.setTimeout(function() {
loop(i);
}, 2000);
}
loop(0);
this.update();
},

createArticle: function(){
var articleObj = {},
inputVal = $('#new-title').val(),
textareaVal= $('#new-content').val();

if(inputVal){
articleObj.title=inputVal;
}
if(textareaVal){
articleObj.content = textareaVal;
}
this.collection.create(articleObj);
var inputVal = $('#new-title').val() || null,
textareaVal= $('#new-content').val() || null;
this.collection.add({title:inputVal, content:textareaVal });
this.resetTools();
this.hideTools();
},
Expand Down
58 changes: 1 addition & 57 deletions app/scripts/views/article-view.js
View file
Expand Up @@ -5,71 +5,15 @@ gravityBlog.Views.articleView = Backbone.View.extend({

className: 'article-view',

template: _.template($('#article-template').html()),

events: {
'dblclick p,label': 'showEditTools',
'click .edit-article': 'save'
},

initialize: function() {
this.render();
},

render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.trigger('resize', {
width: this.$el.outerWidth(),
height: this.$el.outerHeight()
});
this.$el.html('<label>'+this.model.get('title')+'</label>'+'<p>'+this.model.get('content')+'</p>');
return this;
},

save: function() {

var inputVal = this.$el.find('.edit-title').val();
var textareaVal = this.$el.find('.edit-content').val();

if (inputVal !== '' && textareaVal !== '') {
this.model.set({
'title': inputVal,
'content': textareaVal
});
this.model.save();
this.hideEditTools();
this.render();
}
},

showEditTools: function() {
this.$el.find('label').hide();
this.$el.find('p').hide();
this.$el.find('.tools').show();
this.trigger('resize', {
width: this.$el.outerWidth(),
height: this.$el.outerHeight()
});
},

hideEditTools: function() {
this.$el.find('label').show();
this.$el.find('p').show();
this.$el.find('.tools').hide();
this.trigger('resize', {
width: this.$el.outerWidth(),
height: this.$el.outerHeight()
});
},

update: function () {
var position = this.getPosition();
this.$el.css({
//left: position.x - this.$el.outerWidth() / 2,
//top: position.y - this.$el.outerHeight() / 2,
transform:
'translate(' + (position.x - this.$el.outerWidth() / 2) + 'px, ' + (position.y - this.$el.outerHeight() / 2) + 'px) ' +
'rotate(' + this.getAngle() + 'deg)'
});
}

});
13 changes: 5 additions & 8 deletions app/styles/main.css
View file
Expand Up @@ -36,29 +36,26 @@ body {
#header, #blog article{
background: #DDD;
padding: 20px;
margin-bottom: 10px;
}
#header{
position: relative;
margin-top: 10px;
margin-bottom: 30px;
box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px 5px 5px 5px;

}

#blog{
position:relative;
min-height:300px;
width:560px;
}
#blog article {
background: #DDD;
position:absolute;
width:520px;
border-radius: 15px 15px 15px 15px;
margin:0;
}


#blog label{
text-align: center;
font-size: 20px;
Expand Down

0 comments on commit f355b6c

Please sign in to comment.