Demavend · Demavend · Aug 22, 2017 · Aug 22, 2017 · Aug 24, 2017 · Aug 24, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/*
+package-lock.json
diff --git a/css/style.css 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
diff --git a/index.html b/index.html
@@ -4,13 +4,41 @@
 <head>
     <meta charset="UTF-8" />
     <title>E-book library</title>
-    <link href="style.css" rel="stylesheet" type="text/css">
-    <script type="text/javascript" src="index.js"></script>   
-</head>
+    <link href="css/style.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
+    <script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
+    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
-<body>
 
+</head>
 
+<body>
+    <div class="navbar navbar-inverse">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="">GB api navigator</a>
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
+              <span class="sr-only">Навигация</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            </div>
+        </div>
+    </div>
+    <div class="pagination">
+    </div>
+    <div id="modal" class="modal fade">
+    </div>
+    <script src="node_modules/underscore/underscore-min.js" type="text/javascript"></script>
+    <script src="node_modules/backbone/backbone-min.js" type="text/javascript"></script>
+    <script src="js/templates.js"></script>
+    <script src="js/models.js"></script>
+    <script src="js/collections.js"></script>
+    <script src="js/views.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+    <script src="js/router.js"></script>
 </body>
 
 </html>
diff --git a/index.js b/index.js
diff --git a/js/app.js 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
@@ -0,0 +1,3 @@
+App.Collections.Library = Backbone.Collection.extend({
+    model: App.Models.Book
+});
diff --git a/js/models.js 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
@@ -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
@@ -0,0 +1,36 @@
+window.App = {
+    Models: {},
+    Views: {},
+    Collections: {},
+    Templates: {},
+    Router:{}
+};
+App.Templates.Book = `<div class='panel-heading'><h1 class='text-center'><%=title%>` +
+    `</h1></div><div class='panel-body'><div class='col-md-2'><img src='<%=img%>` +
+    `'width='100%' class='img-responsive'></img></div><div class='col-md-8'><h4 class='text-justify'><%=description%>` +
+    `</h4></div><div class='col-md-2'><button class='btn btn-info openModal' data-id=<%=dataId%>` +
+    `>Show<br>summary</button></div></div>`;
+App.Templates.Search = `<input id='bookName' class='search-query' type='text' placeholder='Search'>
+  <a id='btnSearch' class='btn btn-info'>Search</a>
+  <a id='clean' class='btn btn-danger'>Clean</a>`;
+App.Templates.Modal = `<div class='modal-content'>
+  <div class='modal-header'><button class='close' data-dismiss='modal'>x</button>
+  <h4 class='text-center text-primary'><%=title%></h4>
+  </div><div class='modal-body'>
+  <div id='bodyModal' class='coll'>
+  Author:  <%=author%>;<br>
+  Title:  <%=title%>;<br>
+  Category:  <%=category%>;<br>
+  Publisher:  <%=publisher%>;<br>
+  Date:  <%=date%>;
+  </div></div><div class='modal-footer'>
+  <button class='btn btn-danger' data-dismiss='modal'>Закрыть</button></div>
+  </div>`;
+App.Templates.Pagination = `<button id="prev" class="btn btn-default disabled" href="#">Prev</button>
+<button data-id="more" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Show more</button>
+<button data-id="next" class="btn btn-default" href="#">Next</button>`;
+
+  /*App.Templates.Head = `<h1 class='text-center'><%=title%></h1>`;
+  App.Templates.Img = `<img src='<%=img%>' width='100%'  class='img-responsive'></img>`;
+  App.Templates.Description = `<h4 class='text-justify'><%=description%></h4>`;
+  App.Templates.Button = `<button class='btn btn-info openModal'>Show<br>summary</button>`;*/
diff --git a/js/views.js 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
@@ -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