all done, assets missing

Guillermo987 · Feb 28, 2017 · c2ac679 · c2ac679
1 parent e48a9fc
commit c2ac679
Show file tree

Hide file tree

Showing 6 changed files with 365 additions and 112 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,16 @@
 <body>
  <h1 class="title">Backbone.js Books</h1>
 
+ <div id="credits">
+ Written by <a href="http://davidsulc.com">David Sulc</a>, based on the <a href="http://www.atinux.fr/backbone-books/">original application</a> by <a href="http://www.atinux.fr">Atinux</a>.
+ </div>
+
+ <div id="menu">
+ <a href="#" class="js-menu-books">Books</a>
+ <a href="#close" class="js-menu-close">Close</a>
+ </div>
  <div id="content"></div>
+ <div id="modal"></div>
 
  <!-- templates -->
  <script type="text/template" id="library-layout">
@@ -23,17 +32,52 @@ <h1 class="title">Backbone.js Books</h1>
  <div id="bookContainer"></div>
  </script>
 
+ <script type="text/template" id="book-list-template">
+ <div style="display:table;width:100%;height:100%;">
+ <img src="assets/images/shadow-search.png" style="position:absolute;left: 0px;top: 0px;" />
+ <img src="assets/images/shadow-search-right.png" style="position:absolute;right: 0px;top: 0px;" />
+ <div class="leftBar"></div>
+ <div class="books"></div>
+ <div class="rightBar"></div>
+ </div>
+ </script>
+
+ <script type="text/template" id="book-template">
+ <img src="<%= (thumbnail ? thumbnail : 'http://placehold.it/100x150') %>" alt="" class="book" />
+ </script>
+
+ <script type="text/template" id="book-detail-template">
+ <a class="close" data-dismiss="modal">x</a>
+ <div class="imgBook">
+ <img src="<%= (thumbnail ? thumbnail : 'http://placehold.it/200x260') %>" />
+ </div>
+ <h1><%= title %></h1>
+ <%= (subtitle ? '<h2>'+subtitle+'</h2>' : '') %>
+ <p>
+ <%= (description ? description : 'No description found') %>
+ </p>
+ <b>Google link :</b> <a href="http://books.google.fr/books?id=<%= googleId %>" target="_blank">http://books.google.fr/books?id=<%= googleId %></a>
+ </script>
+
+ <script type="text/template" id="close-template">
+ <p>That's all, folks !</p>
+ </script>
+
  <!-- Thirt-Party Libraries (Order matters) -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
- <script src="./assets/javascript/vendor/underscore.js"></script>
- <script src="./assets/javascript/vendor/backbone.js"></script>
- <script src="./assets/javascript/vendor/backbone.marionette.js"></script>
+ <script src="./src/vendor/underscore.js"></script>
+ <script src="./src/vendor/backbone.js"></script>
+ <script src="./src/vendor/backbone.marionette.js"></script>
+ <script src="./src/vendor/bootstrap-modal.js"></script>
 
- <!-- Application Core -->
+ <!-- Application core (Order matters) -->
  <script type="text/javascript" src="src/app.js"></script>
  <script type="text/javascript" src="src/app.library_app.js"></script>
  <script type="text/javascript" src="src/app.library_app.book_list.js"></script>
+ <script type="text/javascript" src="src/app.library_app.routing.js"></script>
+ <script type="text/javascript" src="src/app.closer.js"></script>
+
  <script type="text/javascript">
  MyApp.start();
  </script>

diff --git a/src/app.closer.js b/src/app.closer.js
@@ -0,0 +1,26 @@
+MyApp.Closer = {};
+
+MyApp.Closer.DefaultView = Backbone.Marionette.ItemView.extend({
+ template: "#close-template",
+ className: "close"
+});
+
+MyApp.Closer.Router = Backbone.Marionette.AppRouter.extend({
+ appRoutes: {
+ "close": "close"
+ }
+});
+
+MyApp.Closer.close = function() {
+ var closeView = new MyApp.Closer.DefaultView();
+ MyApp.content.show(closeView);
+ Backbone.history.navigate("close");
+}
+
+MyApp.addInitializer(function() {
+ MyApp.Closer.router = new MyApp.Closer.Router({
+ controller: MyApp.Closer
+ });
+
+ MyApp.vent.trigger("routing:started");
+});
diff --git a/src/app.js b/src/app.js
@@ -1,5 +1,61 @@
 MyApp = new Backbone.Marionette.Application();
 
+// see http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/
+var ModalRegion = Backbone.Marionette.Region.extend({
+ el: "#modal",
+
+ constructor: function() {
+ _.bindAll(this);
+ Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
+ this.on("show", this.showModal, this);
+ },
+
+ getEl: function(selector) {
+ var $el = $(selector);
+ $el.on("hidden", this.close);
+ return $el;
+ },
+
+ showModal: function(view) {
+ view.on("close", this.hideModal, this);
+ this.$el.modal('show');
+ },
+
+ hideModal: function() {
+ this.$el.modal('hide');
+ }
+});
+
 MyApp.addRegions({
- content: "#content"
+ content: "#content",
+ menu: "#menu",
+ modal: ModalRegion
+});
+
+MyApp.MenuView = Backbone.Marionette.View.extend({
+ el: "#menu",
+
+ events: {
+ 'click #menu .js-menu-books': 'showLibraryApp',
+ 'click #menu .js-menu-close': 'closeApp'
+ },
+
+ showLibraryApp: function(e) {
+ e.preventDefault();
+ MyApp.LibraryApp.defaultSearch();
+ },
+
+ closeApp: function(e) {
+ e.preventDefault();
+ MyApp.Closer.close();
+ }
+});
+
+MyApp.vent.on("layout:rendered", function() {
+ var menu = new MyApp.MenuView();
+ MyApp.menu.attachView(menu);
+});
+
+MyApp.vent.on("routing:started", function() {
+ if (!Backbone.History.started) Backbone.history.start();
 });
diff --git a/src/app.library_app.book_list.js b/src/app.library_app.book_list.js
@@ -1,19 +1,94 @@
 MyApp.LibraryApp.BookList = function(){
  var BookList = {};
 
+ var BookDetailView = Backbone.Marionette.ItemView.extend({
+ template: "#book-detail-template",
+ className: "modal bookDetail"
+ });
+
+ var BookView = Backbone.Marionette.ItemView.extend({
+ template: "#book-template",
+
+ events: {
+ 'click': 'showBookDetail'
+ },
+
+ showBookDetail: function(){
+ var detailView = new BookDetailView({model: this.model});
+ MyApp.modal.show(detailView);
+ }
+ });
+
+ var BookListView = Backbone.Marionette.CompositeView.extend({
+ template: "#book-list-template",
+ id: "bookList",
+ itemView: BookView,
+
+ initialize: function(){
+ _.bindAll(this, "showMessage", "loadMoreBooks");
+ var self = this;
+ MyApp.vent.on("search:error", function(){ self.showMessage("Error, please retry later :s") });
+ MyApp.vent.on("search:noSearchTerm", function(){ self.showMessage("Hummmm, can do better :)") });
+ MyApp.vent.on("search:noResults", function(){ self.showMessage("No books found") });
+ },
+
+ events: {
+ 'scroll': 'loadMoreBooks'
+ },
+
+ appendHtml: function(collectionView, itemView){
+ collectionView.$(".books").append(itemView.el);
+ },
+
+ showMessage: function(message){
+ this.$('.books').html('<h1 class="notFound">' + message + '</h1>');
+ },
+
+ loadMoreBooks: function(){
+ var totalHeight = this.$('> div').height(),
+ scrollTop = this.$el.scrollTop() + this.$el.height(),
+ margin = 200;
+
+ // if we are closer than 'margin' to the end of the content, load more books
+ if (scrollTop + margin >= totalHeight) {
+ MyApp.vent.trigger("search:more");
+ }
+ }
+ });
+
  var SearchView = Backbone.View.extend({
  el: "#searchBar",
 
+ initialize: function(){
+ var self = this;
+ var $spinner = self.$('#spinner');
+ MyApp.vent.on("search:start", function(){ $spinner.fadeIn(); });
+ MyApp.vent.on("search:stop", function(){ $spinner.fadeOut(); });
+ MyApp.vent.on("search:term", function(term){
+ self.$('#searchTerm').val(term);
+ });
+ },
+
  events: {
  'change #searchTerm': 'search'
  },
 
  search: function() {
  var searchTerm = this.$('#searchTerm').val().trim();
- console.log("searching for ", searchTerm);
+ if(searchTerm.length > 0){
+ MyApp.vent.trigger("search:term", searchTerm);
+ }
+ else{
+ MyApp.vent.trigger("search:noSearchTerm");
+ }
  }
  });
 
+ BookList.showBooks = function(books){
+ var bookListView = new BookListView({ collection: books });
+ MyApp.LibraryApp.layout.books.show(bookListView);
+ };
+
  MyApp.vent.on("layout:rendered", function(){
  // render a view for the existing HTML in the template, and attach it to the layout (i.e. don't double render)
  var searchView = new SearchView();