diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9ea26ec --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/* +package-lock.json \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7196dcc --- /dev/null +++ b/css/style.css @@ -0,0 +1,30 @@ +.col-md-2 { + text-align: center; +} + +.col-md-8 { + height: 250px; + overflow: auto; +} + +.openModal { + margin-top: 90px; +} + +.capitalize { + text-transform: capitalize; +} + +.pagination { + display: none; + width: 100%; + text-align: center; +} + +#bookName { + width: 120px; +} + +.panel-group { + padding: 20px; +} diff --git a/i/Cover.gif b/i/Cover.gif new file mode 100644 index 0000000..7e84a79 Binary files /dev/null and b/i/Cover.gif differ diff --git a/index.html b/index.html index dee98c8..f838087 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,41 @@ E-book library - - - + + + + + - + + +
+
+
+ GB api navigator + +
+
+
+ + + + + + + + + + diff --git a/index.js b/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..32892bf --- /dev/null +++ b/js/app.js @@ -0,0 +1,6 @@ +const STEP = 10; +let search = new App.Views.Search; +let library = new App.Collections.Library; +let counter = 0; +let page = 0; +$('div.container-fluid').append(search.render().el); diff --git a/js/collections.js b/js/collections.js new file mode 100644 index 0000000..34d1dc5 --- /dev/null +++ b/js/collections.js @@ -0,0 +1,3 @@ +App.Collections.Library = Backbone.Collection.extend({ + model: App.Models.Book +}); diff --git a/js/models.js b/js/models.js new file mode 100644 index 0000000..dfc18da --- /dev/null +++ b/js/models.js @@ -0,0 +1,12 @@ +App.Models.Book = Backbone.Model.extend({ + defaults: { + title: 'Top secret (apparently).', + author: 'Your name could be here.', + category: 'Not like everyone else.', + publisher: 'Did not pay for advertising.', + date: 'It was a long time ago in a galaxy far far away...', + description: 'If you read this we will have to kill you. Enjoy!', + img: 'i/Cover.gif', + dataId: '0' + } +}); diff --git a/js/router.js b/js/router.js new file mode 100644 index 0000000..38a706d --- /dev/null +++ b/js/router.js @@ -0,0 +1,38 @@ +(function() { + App.Router = Backbone.Router.extend({ + routes: { + '': 'index', + 'page/:id': 'page' + }, + index: function() {}, + page: function(id) { + if (page < id) { + for (let i = 0; i < STEP; i++) { + let book = new App.Models.Book({ + dataId: counter + }); + library.add(book); + counter++; + } + let bookshelf = new App.Views.Bookshelf({ + collection: library.slice(-STEP) + }); + $('div.pagination').before(bookshelf.render().el); + page = Number(id); + } else { + counter = counter - STEP * 2; + for (let i = 0; i < STEP; i++) { + library.pop(); + counter++; + } + let bookshelf = new App.Views.Bookshelf({ + collection: library.slice(-STEP) + }); + $('div.pagination').before(bookshelf.render().el); + page = Number(id); + } + }, + }); + new App.Router(); + Backbone.history.start(); +}()); diff --git a/js/templates.js b/js/templates.js new file mode 100644 index 0000000..c6dddb9 --- /dev/null +++ b/js/templates.js @@ -0,0 +1,36 @@ +window.App = { + Models: {}, + Views: {}, + Collections: {}, + Templates: {}, + Router:{} +}; +App.Templates.Book = `

<%=title%>` + + `

<%=description%>` + + `

`; +App.Templates.Search = ` + Search + Clean`; +App.Templates.Modal = `
+
+

<%=title%>

+
+
+ Author: <%=author%>;
+ Title: <%=title%>;
+ Category: <%=category%>;
+ Publisher: <%=publisher%>;
+ Date: <%=date%>; +
+
+
`; +App.Templates.Pagination = ` + +`; + + /*App.Templates.Head = `

<%=title%>

`; + App.Templates.Img = ``; + App.Templates.Description = `

<%=description%>

`; + App.Templates.Button = ``;*/ diff --git a/js/views.js b/js/views.js new file mode 100644 index 0000000..9760191 --- /dev/null +++ b/js/views.js @@ -0,0 +1,107 @@ +App.Views.Search = Backbone.View.extend({ + tagName: 'form', + id: 'navbar-collapse', + className: 'navbar-form collapse navbar-collapse navbar-right', + template: _.template(App.Templates.Search), + render: function() { + this.$el.html(this.template()); + return this; + }, + events: { + 'click #btnSearch': 'showBooks', + 'click #clean': 'cleanAll' + }, + showBooks: () => { + location.href = '#page/1'; + $('.panel-group').remove(); + if ($('div.btn-group').length < 1) { + let pagination = new App.Views.Pagination; + $('div.pagination').append(pagination.render().el); + }; + }, + cleanAll: () => { + counter = 0; + library.reset() + $('.panel-group').remove(); + $('.btn-group').remove(); + location.href = ''; + } +}); +App.Views.Container = Backbone.View.extend({ + initialize: function() {}, + template: _.template(App.Templates.Book), + tagName: 'div', + className: 'panel panel-success', + render: function() { + this.$el.html(this.template(this.model.toJSON())); + return this; + }, +}); +App.Views.Modal = Backbone.View.extend({ + tagName: 'div', + className: 'modal-dialog', + template: _.template(App.Templates.Modal), + initialize: function(summary) { + this.render(summary); + }, + render: function() { + this.$el.html(this.template(this.model.toJSON())); + return this; + } +}); +App.Views.Bookshelf = Backbone.View.extend({ + tagName: 'div', + className: 'panel-group', + initialize: function() {}, + render: function() { + this.collection.forEach((book) => { + let view = new App.Views.Container({ + model: book + }); + this.$el.append(view.render().el); + }, this); + return this; + }, + events: { + 'click .openModal': 'showModal' + }, + showModal: (e) => { + let num = e.target.getAttribute('data-id'); + let modal = new App.Views.Modal({ + model: library.models[num] + }); + $('#modal').html(modal.render().el); + $('#modal').modal(); + } +}); +App.Views.Pagination = Backbone.View.extend({ + tagName: 'div', + className: 'btn-group', + template: _.template(App.Templates.Pagination), + initialize: function() {}, + render: function() { + this.$el.html(this.template()); + return this; + }, + events: { + 'click': 'pagination' + }, + pagination: function(e) { + const button = document.querySelector('button.disabled'); + let more = page + 1; + let less = page - 1; + if (e.target.getAttribute('data-id') === 'more') { + location.href = `#page/${more}`; + } else if (e.target.getAttribute('data-id') === 'next') { + $('.panel-group').remove(); + if (button) button.setAttribute('class', 'btn btn-default'); + location.href = `#page/${more}`; + } else { + if (counter === (STEP*2)) { + $('#prev').addClass('disabled'); + } + $('.panel-group').remove(); + location.href = `#page/${less}`; + } + } +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..bd1c580 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "e-library-backbone-sample", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Demavend/e-library-backbone-sample.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/Demavend/e-library-backbone-sample/issues" + }, + "homepage": "https://github.com/Demavend/e-library-backbone-sample#readme", + "dependencies": { + "backbone": "^1.3.3", + "bootstrap": "^3.3.7", + "jquery": "^3.2.1", + "requirejs": "^2.3.5", + "underscore": "^1.8.3" + } +} diff --git a/style.css b/style.css deleted file mode 100644 index e69de29..0000000